/* Alka Vida — hoja de estilos. Blanco con aqua, a partir de los colores del logo. Fuentes alojadas en el sitio.
   Concepto: luz que atraviesa el agua. Arriba, la superficie (blanco con reflejos); a media página se
   baja al agua profunda (hielo para negocios) y se vuelve a salir. */

@font-face {
    font-family: "Unbounded";
    src: url("fonts/unbounded-latin.woff2") format("woff2");
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Figtree";
    src: url("fonts/figtree-latin.woff2") format("woff2");
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --blanco: #fff;
    --agua: #2bbfd3;
    --agua-clara: #bfeaf1;
    --agua-honda: #00707f;
    --agua-profunda: #07515c;
    --abismo: #043742;
    --bruma: #eaf8fb;
    --tinta: #1c2452;
    --tinta-suave: #4a5578;
    --alerta: #a12a1e;
    --ejemplo-fondo: #fff3cd;
    --ejemplo-texto: #6b4e00;
    --ancho: 68rem;
    --margen: clamp(1rem, 4vw, 2.5rem);
    --display: "Unbounded", "Arial Black", system-ui, sans-serif;
    --texto: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    border-top: 4px solid var(--agua);
    font-family: var(--texto);
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--tinta);
    background: var(--blanco);
}

h1,
h2,
h3 {
    margin: 0;
    font-family: var(--display);
    line-height: 1.1;
}

p {
    margin: 0;
}

a {
    color: inherit;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

[id] {
    scroll-margin-top: 1.5rem;
}

:focus-visible {
    outline: 3px solid var(--agua-honda);
    outline-offset: 3px;
}

.inmersion :focus-visible,
.pie :focus-visible {
    outline-color: var(--blanco);
}

.inmersion .formulario :focus-visible {
    outline-color: var(--agua-honda);
}

.saltar {
    position: absolute;
    left: 1rem;
    top: -5rem;
    z-index: 30;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    background: var(--tinta);
    color: var(--blanco);
}

.saltar:focus {
    top: 1rem;
}

.aviso-vivo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

/* Botones */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.65rem 1.35rem;
    border: 2px solid transparent;
    border-radius: 999px;
    font-weight: 650;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.boton--agua {
    background: var(--agua);
    color: var(--tinta);
}

.boton--agua:hover {
    background: #5fd3e2;
}

.boton--linea {
    border-color: currentColor;
    background: transparent;
    color: var(--agua-honda);
}

.boton--linea:hover {
    background: var(--bruma);
}

.boton[disabled] {
    opacity: 0.6;
    cursor: progress;
}

.acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Portada: sobre un lienzo de luz en movimiento van el logo, el mensaje y la tienda */

.portada {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--bruma) 0%, var(--blanco) 38%);
}

.luz {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.escaparate,
.ola {
    position: relative;
    z-index: 1;
}

/* La cabecera va encima del lienzo sin formar su propia capa: así el blanco del logo
   se puede fundir (multiply) con la luz que hay detrás. */
.cabecera {
    position: relative;
}

.cabecera {
    display: grid;
    justify-items: center;
    gap: 0.25rem;
    max-width: var(--ancho);
    margin-inline: auto;
    padding: 0.75rem var(--margen) 0;
}

.cabecera__logo {
    display: block;
    width: min(100%, 44rem);
}

/* Barra superior de la cabecera: idioma a la izquierda; cuenta y carrito a la derecha. */
.cabecera__barra {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.cabecera__iconos {
    display: flex;
    gap: 0.4rem;
}

.icono-boton {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.6rem;
    padding: 0.35rem 0.8rem;
    border: 1.5px solid rgba(7, 81, 92, 0.18);
    border-radius: 999px;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tinta);
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(6px);
    cursor: pointer;
}

.icono-boton:hover {
    border-color: var(--agua);
}

.icono-boton svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icono-boton svg circle[r="1.4"] {
    fill: currentColor;
    stroke: none;
}

.icono-boton__n {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    display: grid;
    place-items: center;
    min-width: 1.3rem;
    height: 1.3rem;
    padding-inline: 0.25rem;
    border-radius: 999px;
    font-size: 0.72rem;
    letter-spacing: 0;
    color: var(--tinta);
    background: var(--agua);
}

@media (max-width: 30rem) {
    .cabecera__iconos .icono-boton__texto {
        display: none;
    }
}

.idioma {
    position: relative;
}

.idioma__menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    z-index: 25;
    display: grid;
    min-width: 10rem;
    margin: 0;
    padding: 0.4rem;
    border-radius: 14px;
    list-style: none;
    background: var(--blanco);
    box-shadow: 0 14px 34px rgba(28, 36, 82, 0.2);
}

.idioma__menu button {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 0;
    border-radius: 10px;
    font: inherit;
    font-weight: 600;
    text-align: left;
    color: var(--tinta);
    background: none;
    cursor: pointer;
}

.idioma__menu button:hover,
.idioma__menu button[aria-current="true"] {
    background: var(--bruma);
}

/* El traductor de Google: se oculta su barra superior y su ventanita; el menú propio cambia el idioma. */
.skiptranslate iframe,
iframe.skiptranslate,
#traductor-google,
.goog-te-banner-frame {
    display: none !important;
}

body {
    top: 0 !important;
}

/* Etiquetas en los productos. */
.ficha {
    position: relative;
}

.sello {
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;
    z-index: 2;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--agua-profunda);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 6px 16px rgba(7, 81, 92, 0.18);
}

.sello--estrella {
    color: var(--blanco);
    background: linear-gradient(135deg, #622373, #4a4b9a);
}

.opcion {
    position: relative;
}

.opcion__sello {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    font-size: 0.85rem;
    color: var(--blanco);
    background: linear-gradient(135deg, #622373, #4a4b9a);
    box-shadow: 0 4px 10px rgba(74, 75, 154, 0.35);
}

/* En pantallas angostas se recortan los lados del banner para que el logo se vea más grande.
   Los bordes laterales se desvanecen y el blanco del banner se funde con la luz del fondo. */
.cabecera__logo img {
    width: 100%;
    aspect-ratio: 2.6 / 1;
    object-fit: cover;
    mix-blend-mode: multiply;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

@media (min-width: 48rem) {
    .cabecera__logo img {
        aspect-ratio: 952 / 232;
    }
}

.cabecera__enlaces {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 clamp(0.9rem, 3vw, 2rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.cabecera__enlaces a {
    display: inline-block;
    padding: 0.5rem 0 0.35rem;
    border-bottom: 2px solid transparent;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
}

.cabecera__enlaces a:hover {
    border-bottom-color: var(--agua);
}

/* En celulares chicos el menú va en dos filas de tres. */
@media (max-width: 30rem) {
    .cabecera__enlaces {
        display: grid;
        grid-template-columns: repeat(3, auto);
        gap: 0 1.5rem;
        text-align: center;
    }
}

/* Escaparate: a la izquierda el mensaje y el selector; a la derecha la presentación elegida */

.escaparate {
    display: grid;
    gap: 2.5rem;
    max-width: var(--ancho);
    margin-inline: auto;
    padding: clamp(1.75rem, 4vw, 3rem) var(--margen) 0;
}

@media (min-width: 60rem) {
    .escaparate {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        grid-template-rows: auto 1fr;
        gap: 2.5rem 4rem;
        align-items: start;
    }

    .entrada {
        grid-column: 1;
        grid-row: 1;
    }

    .presentaciones {
        grid-column: 1;
        grid-row: 2;
    }

    .fichas {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}

.entrada h1 {
    font-size: clamp(1.9rem, 6.2vw, 3rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.025em;
}

.entrada__bajada {
    max-width: 34rem;
    margin-top: 1.25rem;
    font-size: clamp(1.1rem, 2.2vw, 1.3rem);
    color: var(--tinta-suave);
}

.horario {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1rem;
    font-weight: 600;
}

.horario::before {
    content: "";
    flex: none;
    width: 0.7rem;
    height: 0.7rem;
    border: 2px solid var(--tinta-suave);
    border-radius: 50%;
}

.horario--abierto::before {
    border-color: #1fa85a;
    background: #1fa85a;
}

.entrada .acciones {
    margin-top: 1.5rem;
}

.entrada .boton--linea {
    background: rgba(255, 255, 255, 0.7);
}

.presentaciones h2 {
    font-family: var(--texto);
    font-size: 1rem;
    font-weight: 700;
    color: var(--agua-honda);
}

.selector {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem 0.9rem;
    margin-top: 1rem;
}

.opcion {
    display: grid;
    align-content: start;
    gap: 0.45rem;
    border-radius: 12px;
    text-align: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.opcion__foto {
    width: 100%;
    border-radius: 12px;
    outline: 3px solid transparent;
    outline-offset: 2px;
    aspect-ratio: 1;
    object-fit: cover;
    transition: outline-color 0.15s;
}

.opcion__nombre {
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--tinta-suave);
}

.opcion:hover .opcion__foto {
    outline-color: var(--agua-clara);
}

.opcion[aria-selected="true"] .opcion__foto {
    outline-color: var(--agua);
}

.opcion[aria-selected="true"] .opcion__nombre {
    font-weight: 700;
    color: var(--tinta);
}

.ficha {
    display: grid;
    gap: 0.8rem;
    padding-block: 1.5rem;
    border-top: 1px solid var(--agua-clara);
}

.js .ficha {
    padding-block: 0;
    border-top: 0;
}

.ficha__foto {
    width: 100%;
    border-radius: 16px;
    background: var(--bruma);
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* Galería de fotos reales (garrafones): se desliza con el dedo; flechas y puntos los agrega app.js. */
.galeria {
    position: relative;
}

.galeria__pista {
    display: flex;
    overflow-x: auto;
    border-radius: 16px;
    background: var(--bruma);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.galeria__pista::-webkit-scrollbar {
    display: none;
}

.galeria__pista:focus-visible {
    outline: 3px solid var(--agua-honda);
    outline-offset: 3px;
}

.galeria__foto {
    flex: 0 0 100%;
    scroll-snap-align: center;
}

.galeria__foto img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.galeria__flecha {
    position: absolute;
    top: 50%;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--tinta);
    background: rgb(255 255 255 / 0.85);
    box-shadow: 0 6px 18px rgb(7 81 92 / 0.18);
    transform: translateY(-50%);
    backdrop-filter: blur(6px);
    cursor: pointer;
    transition: opacity 0.2s;
}

.galeria__flecha svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.galeria__flecha--antes {
    left: 0.75rem;
}

.galeria__flecha--despues {
    right: 0.75rem;
}

.galeria__flecha:disabled {
    opacity: 0;
    pointer-events: none;
}

.galeria__puntos {
    position: absolute;
    bottom: 0.8rem;
    left: 50%;
    display: flex;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: rgb(28 36 82 / 0.35);
    transform: translateX(-50%);
    backdrop-filter: blur(6px);
}

/* Cada punto es un botón de 1.6rem para que sea fácil de tocar; el punto visible es más chico. */
.galeria__punto {
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.galeria__punto::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.6);
    transition: width 0.25s, background-color 0.25s;
}

.galeria__punto[aria-current="true"]::before {
    width: 1.1rem;
    background: #fff;
}

@media (min-width: 60rem) {
    .galeria {
        width: min(100%, 30rem);
    }
}

.ficha__foto--entera {
    background: #f1f5fa;
    object-fit: contain;
}

.ficha h3 {
    margin-top: 0.6rem;
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    font-weight: 600;
    letter-spacing: -0.015em;
}

.ficha__precio strong {
    font-family: var(--display);
    font-size: 1.5rem;
    font-weight: 700;
}

.ficha__precio .unidad,
.ficha__precio .antes {
    color: var(--tinta-suave);
}

.chip-especial {
    display: inline-block;
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    vertical-align: 0.25em;
    color: #fff;
    background: var(--agua-honda);
}

.ficha__especial {
    margin-top: -0.4rem;
    font-size: 0.95rem;
    color: var(--tinta-suave);
}

/* Tipo de agua del garrafón: dos opciones lado a lado con su precio de hoy. */
.variantes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.variantes legend {
    margin-bottom: 0.5rem;
    padding: 0;
    font-weight: 700;
}

.variante {
    position: relative;
    display: grid;
    gap: 0.1rem;
    padding: 0.7rem 0.9rem;
    border: 2px solid var(--agua-clara);
    border-radius: 14px;
    cursor: pointer;
}

.variante input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.variante:has(input:checked) {
    border-color: var(--agua);
    background: var(--bruma);
}

.variante:has(input:focus-visible) {
    outline: 3px solid var(--agua-honda);
    outline-offset: 2px;
}

.variante__nombre {
    font-weight: 700;
}

.variante__precio {
    font-family: var(--display);
    font-weight: 700;
    color: var(--agua-honda);
}

.variante--especial .variante__precio::after {
    content: " · especial";
    font-family: var(--texto);
    font-size: 0.8rem;
}

.garrafon-nuevo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.95rem;
    cursor: pointer;
}

.garrafon-nuevo input {
    flex: none;
    width: 1.2rem;
    height: 1.2rem;
    margin: 0;
    accent-color: var(--agua-honda);
}

.pedido__envio {
    display: flex;
    justify-content: space-between;
    color: var(--tinta-suave);
}

/* Logos de tarjetas: solo aparecen cuando el pago en línea está activo. */
.sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.tarjetas {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    vertical-align: middle;
}

.tarjetas svg {
    display: block;
    width: 38px;
    height: 24px;
}

.opcion-pago .tarjetas {
    display: flex;
    margin-top: 0.55rem;
}

.aceptamos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.9rem;
    margin-top: 1.25rem;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    font-size: 0.95rem;
    background: var(--bruma);
}

.ejemplo {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    vertical-align: 0.2em;
    color: var(--ejemplo-texto);
    background: var(--ejemplo-fondo);
}

.compra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.4rem;
}

.cantidad {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border: 2px solid var(--agua-clara);
    border-radius: 999px;
    background: var(--blanco);
}

.cantidad button {
    width: 2.9rem;
    height: 2.9rem;
    border: 0;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--agua-honda);
    background: none;
    cursor: pointer;
}

.cantidad button:hover {
    background: var(--bruma);
}

.cantidad__n {
    min-width: 2.2ch;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Olas: la superficie del agua entre la portada y la zona profunda */

.ola {
    display: block;
    width: 100%;
    height: clamp(3rem, 8vw, 6.5rem);
    margin-top: clamp(2.5rem, 6vw, 4.5rem);
}

.ola__a {
    fill: var(--agua);
    opacity: 0.35;
    animation: correr 17s linear infinite;
}

.ola__b {
    fill: var(--agua-profunda);
    animation: correr 11s linear infinite;
}

@keyframes correr {
    to {
        transform: translateX(-720px);
    }
}

.ola--salida {
    margin-top: 0;
}

.ola--salida .ola__b {
    fill: var(--bruma);
    animation-duration: 14s;
}

/* Inmersión: hielo para negocios, bajo el agua */

.inmersion {
    position: relative;
    overflow: hidden;
    color: var(--blanco);
    background: linear-gradient(180deg, var(--agua-profunda) 0%, var(--abismo) 100%);
}

/* Rayos de luz que bajan desde la superficie */
.inmersion::before {
    content: "";
    position: absolute;
    inset: -20% -10% 0;
    background:
        linear-gradient(100deg, transparent 12%, rgba(255, 255, 255, 0.07) 18%, transparent 27%),
        linear-gradient(96deg, transparent 38%, rgba(255, 255, 255, 0.05) 46%, transparent 57%),
        linear-gradient(104deg, transparent 66%, rgba(255, 255, 255, 0.06) 73%, transparent 82%);
    animation: rayos 9s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes rayos {
    from {
        opacity: 0.55;
        transform: translateX(-2%);
    }

    to {
        opacity: 1;
        transform: translateX(2%);
    }
}

.hielo {
    position: absolute;
    inset: 0;
    perspective: 900px;
    pointer-events: none;
}

.cubo {
    position: absolute;
    width: var(--l);
    height: var(--l);
    transform-style: preserve-3d;
    animation: girar var(--dur) linear infinite, flotar var(--sube) ease-in-out infinite alternate;
}

.cubo i {
    position: absolute;
    inset: 0;
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 14%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(191, 234, 241, 0.07) 55%, rgba(255, 255, 255, 0.2));
}

.cubo i:nth-child(1) { transform: translateZ(calc(var(--l) / 2)); }
.cubo i:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--l) / 2)); }
.cubo i:nth-child(3) { transform: rotateY(90deg) translateZ(calc(var(--l) / 2)); }
.cubo i:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--l) / 2)); }
.cubo i:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--l) / 2)); }
.cubo i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--l) / 2)); }

.cubo--1 { --l: 9rem; --dur: 46s; --sube: 7s; top: 12%; left: 4%; }
.cubo--2 { --l: 5.5rem; --dur: 34s; --sube: 5s; top: 58%; left: 13%; }
.cubo--3 { --l: 7rem; --dur: 52s; --sube: 8s; top: 6%; right: 6%; }
.cubo--4 { --l: 4rem; --dur: 28s; --sube: 6s; bottom: 16%; right: 3%; }
.cubo--5 { --l: 3.2rem; --dur: 24s; --sube: 4.5s; top: 40%; left: 46%; }

@keyframes girar {
    from {
        rotate: 1 1 0.3 0deg;
    }

    to {
        rotate: 1 1 0.3 360deg;
    }
}

@keyframes flotar {
    from {
        translate: 0 -0.9rem;
    }

    to {
        translate: 0 0.9rem;
    }
}

@media (max-width: 47.99rem) {
    .cubo--1 { --l: 5.5rem; top: 3%; left: auto; right: 4%; }
    .cubo--2 { --l: 3.2rem; top: 30%; left: 78%; }
    .cubo--3,
    .cubo--5 { display: none; }
    .cubo--4 { --l: 2.8rem; }
}

.inmersion__dentro {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 2.5rem 4rem;
    padding-block: clamp(3rem, 7vw, 5rem) clamp(2.5rem, 6vw, 4rem);
}

@media (min-width: 60rem) {
    .inmersion__dentro {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        align-items: start;
    }
}

.inmersion h2 {
    max-width: 14ch;
    font-size: clamp(2rem, 5.6vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -0.025em;
}

.inmersion__bajada {
    max-width: 30rem;
    margin-top: 1.25rem;
    font-size: clamp(1.1rem, 2.2vw, 1.25rem);
    color: #d7f1f5;
}

.ventajas {
    display: grid;
    gap: 0.7rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
}

.ventajas li {
    padding-left: 1.9rem;
    font-weight: 600;
    background: radial-gradient(circle at 0.55rem 0.8rem, var(--agua) 0.4rem, transparent 0.45rem);
}

/* Formularios */

.formulario--mayoreo {
    display: grid;
    gap: 1.1rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    border-radius: 20px;
    color: var(--tinta);
    background: var(--blanco);
}

.formulario h3 {
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.campos {
    position: relative;
    display: grid;
    gap: 0.9rem 1rem;
}

@media (min-width: 36rem) {
    .campos {
        grid-template-columns: 1fr 1fr;
    }
}

.campo {
    display: grid;
    align-content: start;
    gap: 0.35rem;
}

.campo--ancho {
    grid-column: 1 / -1;
}

.campo label {
    font-size: 0.92rem;
    font-weight: 600;
}

.opcional {
    font-weight: 400;
    color: var(--tinta-suave);
}

.campo input,
.campo select,
.campo textarea {
    width: 100%;
    min-height: 2.9rem;
    padding: 0.6rem 0.8rem;
    border: 2px solid var(--agua-clara);
    border-radius: 10px;
    background: var(--blanco);
}

.campo textarea {
    resize: vertical;
}

.campo [aria-invalid="true"] {
    border-color: var(--alerta);
}

.trampa {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.formulario__error {
    font-weight: 600;
    color: var(--alerta);
}

.aviso-entrega {
    padding: 0.8rem 1rem;
    border-left: 4px solid var(--alerta);
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--alerta);
    background: #fdf1ef;
}

.formulario__legal {
    font-size: 0.88rem;
    color: var(--tinta-suave);
}

.formulario__listo {
    display: grid;
    gap: 0.75rem;
    padding: 1.1rem 1.25rem;
    border-radius: 14px;
    background: var(--bruma);
}

/* Secciones */

.seccion {
    padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.seccion--bruma {
    background: var(--bruma);
}

.seccion__dentro {
    max-width: var(--ancho);
    margin-inline: auto;
    padding-inline: var(--margen);
}

.seccion h2 {
    max-width: 18ch;
    font-size: clamp(1.6rem, 4.2vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Proceso y escala de pH */

#proceso {
    padding-top: clamp(2rem, 5vw, 3.5rem);
}

.proceso {
    display: grid;
    gap: 2.5rem 4rem;
}

.proceso__texto p {
    max-width: 34rem;
    margin-top: 1.1rem;
    font-size: 1.15rem;
}

.proceso__texto p + p {
    font-size: 1.0625rem;
    color: var(--tinta-suave);
}

@media (min-width: 60rem) {
    .proceso {
        grid-template-columns: 5fr 6fr;
        align-items: end;
    }
}

.ph {
    margin: 0;
}

.ph__senal {
    position: relative;
    height: 3.2rem;
}

.ph__marca {
    position: absolute;
    bottom: 0.9rem;
    /* Centro del tramo 9 de la tira de 15 (0 a 14): el medio del rango 8.5 a 9.5 de la etiqueta. */
    left: 63.333%;
    transform: translateX(-50%);
    font-family: var(--display);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.ph__marca::after {
    content: "";
    position: absolute;
    top: calc(100% + 0.15rem);
    left: 50%;
    width: 2px;
    height: 0.75rem;
    background: var(--tinta);
    transform: translateX(-50%);
}

.ph__tira {
    position: relative;
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    height: 3rem;
    overflow: hidden;
    border-radius: 6px;
}

.ph__tira::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 66.667%;
    width: 4px;
    background: var(--blanco);
    box-shadow: 0 0 0 1px rgba(28, 36, 82, 0.4);
    transform: translateX(-50%);
}

/* Colores del indicador universal de pH */
.ph__n--0 { background: #ee1c25; }
.ph__n--1 { background: #f26724; }
.ph__n--2 { background: #f8c611; }
.ph__n--3 { background: #f5ed1c; }
.ph__n--4 { background: #b5d333; }
.ph__n--5 { background: #84c341; }
.ph__n--6 { background: #4db749; }
.ph__n--7 { background: #33a94b; }
.ph__n--8 { background: #22b46b; }
.ph__n--9 { background: #0ab8b6; }
.ph__n--10 { background: #4690cd; }
.ph__n--11 { background: #3853a4; }
.ph__n--12 { background: #5a51a2; }
.ph__n--13 { background: #63459d; }
.ph__n--14 { background: #462c83; }

.ph__pie {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    margin-top: 0.6rem;
    font-size: 0.9rem;
    color: var(--tinta-suave);
}

.ph__pie span:last-child {
    text-align: end;
}

/* Opiniones de Google */

.opiniones__cabeza {
    display: grid;
    gap: 0.75rem;
}

.opiniones__nota {
    color: var(--tinta-suave);
}

.opiniones__nota strong {
    color: var(--tinta);
}

.opiniones {
    display: grid;
    gap: 2rem 2.5rem;
    margin: 2.5rem 0 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 48rem) {
    .opiniones {
        grid-template-columns: repeat(3, 1fr);
    }

    .opinion--grande {
        grid-column: 1 / -1;
    }
}

.opinion {
    display: grid;
    align-content: start;
    gap: 0.8rem;
    padding-left: 1.1rem;
    border-left: 4px solid var(--agua);
}

.opinion blockquote {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.35;
}

.opinion--grande blockquote {
    max-width: 22ch;
    font-family: var(--display);
    font-size: clamp(1.5rem, 4.4vw, 2.7rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.opinion__autor {
    font-weight: 700;
}

.opinion__autor span {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--tinta-suave);
}

.opiniones__acciones {
    margin-top: 2.5rem;
}

/* Pasos */

.pasos {
    display: grid;
    gap: 2rem 2.5rem;
    margin: 2.5rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: paso;
}

.pasos li {
    padding-top: 1rem;
    border-top: 3px solid var(--agua);
    counter-increment: paso;
}

.pasos li::before {
    content: counter(paso);
    display: block;
    font-family: var(--display);
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--agua-honda);
}

.pasos h3 {
    margin-top: 0.9rem;
    font-family: var(--texto);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.25;
}

.pasos p {
    margin-top: 0.4rem;
    color: var(--tinta-suave);
}

@media (min-width: 48rem) {
    .pasos {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Visítanos */

.visita {
    display: grid;
    gap: 2.5rem 4rem;
}

.datos {
    display: grid;
    gap: 1.1rem;
    margin: 1.75rem 0 0;
}

.datos dt {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--agua-honda);
}

.datos dd {
    margin: 0.15rem 0 0;
    font-size: 1.1rem;
    overflow-wrap: anywhere;
}

.datos a {
    text-underline-offset: 0.2em;
}

.visita .acciones {
    margin-top: 2rem;
}

.visita__mapa {
    width: 100%;
    min-height: 20rem;
    border: 0;
    border-radius: 12px;
    background: var(--agua-clara);
    aspect-ratio: 4 / 3;
}

/* Video de la planta: tarjeta vertical con el texto encima y botón de pausa. */
.recorrido {
    position: relative;
    justify-self: center;
    width: min(100%, 24rem);
    margin: 0;
    overflow: hidden;
    border-radius: 20px;
    background: var(--abismo);
    box-shadow: 0 18px 40px rgb(7 81 92 / 0.22);
}

.recorrido__video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    object-fit: cover;
}

.recorrido__texto {
    position: absolute;
    inset: auto 0 0;
    padding: 3.5rem 1.1rem 1.1rem;
    font-size: 0.95rem;
    line-height: 1.35;
    color: #fff;
    background: linear-gradient(transparent, rgb(4 55 66 / 0.88));
    pointer-events: none;
}

.recorrido__texto strong {
    display: block;
    font-family: var(--display);
    font-size: 1.15rem;
}

.recorrido__boton {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgb(4 55 66 / 0.55);
    backdrop-filter: blur(6px);
    cursor: pointer;
}

.recorrido__boton svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: currentColor;
}

.recorrido__boton .icono-pausa,
.recorrido__boton--pausa .icono-play {
    display: none;
}

.recorrido__boton--pausa .icono-pausa {
    display: block;
}

.recorrido__boton:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

@media (min-width: 60rem) {
    .visita {
        grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 5fr);
        column-gap: 2.5rem;
        align-items: stretch;
    }

    .recorrido {
        align-self: start;
        width: 100%;
    }

    .visita__mapa {
        height: 100%;
        aspect-ratio: auto;
    }
}

/* Pie */

/* Servicios. */
.servicios {
    display: grid;
    gap: 1rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 40rem) {
    .servicios {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 60rem) {
    .servicios {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.servicio {
    display: grid;
    align-content: start;
    gap: 0.5rem;
    padding: 1.4rem;
    border-radius: 20px;
    background: var(--blanco);
    box-shadow: 0 10px 26px rgba(7, 81, 92, 0.08);
}

.servicio__icono {
    width: 2.6rem;
    height: 2.6rem;
    padding: 0.55rem;
    border-radius: 14px;
    fill: none;
    stroke: var(--blanco);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    background: linear-gradient(135deg, var(--agua-honda), #4a4b9a);
}

.servicio h3 {
    font-size: 1.15rem;
}

.servicio p {
    color: var(--tinta-suave);
}

.servicio a,
.servicio__enlace {
    font-weight: 700;
    color: var(--agua-honda);
}

/* Botón que se ve como los enlaces de las otras tarjetas. */
.servicio__enlace {
    justify-self: start;
    padding: 0;
    border: 0;
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    background: none;
    cursor: pointer;
}

.proceso__subtitulo {
    margin-top: 1.4rem;
    font-size: 1.2rem;
}

/* Franja de confianza. */
.confianza {
    padding-block: 2rem;
    color: var(--blanco);
    background: var(--tinta);
}

.confianza__lista {
    display: grid;
    gap: 1.2rem;
    margin: 0 auto;
    list-style: none;
}

@media (min-width: 48rem) {
    .confianza__lista {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.confianza li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.confianza svg {
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    fill: none;
    stroke: var(--agua);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.confianza strong {
    display: block;
    font-weight: 800;
}

.confianza span {
    font-size: 0.95rem;
    color: #c9d0f0;
}

.pie {
    padding-block: 3rem 7rem;
    background: var(--agua-profunda);
    font-size: 0.95rem;
    color: #d7f1f5;
}

.pie__dentro {
    display: grid;
    gap: 2rem;
}

@media (min-width: 52rem) {
    .pie__dentro {
        grid-template-columns: 1.3fr 1fr 1fr 1.3fr;
    }
}

.pie__columna {
    display: grid;
    align-content: start;
    gap: 0.55rem;
}

.pie h2 {
    margin-bottom: 0.3rem;
    font-family: var(--display);
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--blanco);
}

.pie__columna a {
    color: #d7f1f5;
    text-underline-offset: 0.2em;
}

.pie__pagos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.pie__pagos svg {
    width: 38px;
    height: 24px;
}

.pago-chip {
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--agua-profunda);
    background: var(--blanco);
}

.pie__siguenos {
    margin-top: 0.8rem;
}

.redes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.pie__columna .red {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    color: var(--agua-profunda);
    background: var(--blanco);
    transition: background-color 0.2s, color 0.2s;
}

.pie__columna .red:hover {
    color: var(--blanco);
    background: var(--agua);
}

.red svg {
    width: 1.3rem;
    height: 1.3rem;
    fill: currentColor;
}

.red svg path[d^="M12 22"] {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.pie__final {
    margin-top: 2rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.85rem;
    color: #b7dfe6;
}

/* Pestaña de opiniones al costado y su panel. */
.pestana-opiniones {
    position: fixed;
    top: 50%;
    right: 0;
    z-index: 18;
    padding: 0.9rem 0.55rem;
    border: 0;
    border-radius: 12px 0 0 12px;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--blanco);
    background: linear-gradient(180deg, #622373, #4a4b9a);
    box-shadow: -4px 6px 18px rgba(74, 75, 154, 0.3);
    writing-mode: vertical-rl;
    transform: translateY(-50%) rotate(180deg);
    cursor: pointer;
}

/* En el celular la pestaña es más angosta para tapar menos texto. */
@media (max-width: 47.99rem) {
    .pestana-opiniones {
        padding: 0.7rem 0.3rem;
        font-size: 0.72rem;
        letter-spacing: 0.04em;
    }
}

.panel-opiniones .opiniones {
    grid-template-columns: 1fr;
    margin-top: 0.5rem;
}

.panel-opiniones .opinion--grande blockquote {
    font-size: 1.4rem;
}

/* Chat: burbuja y botón abajo a la derecha. El carrito flotante sube para no encimarse. */
.chat {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right, 0px));
    bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    z-index: 21;
    display: grid;
    justify-items: end;
    gap: 0.7rem;
}

.chat__boton {
    display: grid;
    place-items: center;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    color: var(--blanco);
    background: linear-gradient(140deg, #2bbfd3, var(--agua-honda));
    box-shadow: 0 10px 26px rgba(0, 112, 127, 0.4);
}

.chat__boton svg {
    width: 1.7rem;
    height: 1.7rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chat__globo {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.6rem 0.8rem;
    align-items: center;
    width: min(19rem, calc(100vw - 2rem));
    padding: 1rem 1rem 1rem 0.9rem;
    border-radius: 18px 18px 4px 18px;
    background: var(--blanco);
    box-shadow: 0 16px 36px rgba(28, 36, 82, 0.22);
}

.chat__globo img {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
}

.chat__globo p {
    font-size: 0.95rem;
    line-height: 1.35;
}

.chat__globo .boton {
    grid-column: 1 / -1;
}

.chat__cerrar {
    position: absolute;
    top: 0.2rem;
    right: 0.35rem;
    padding: 0.2rem 0.4rem;
    border: 0;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--tinta-suave);
    background: none;
    cursor: pointer;
}

/* Mi cuenta. */
.cuenta__hola {
    font-size: 1.2rem;
    font-weight: 700;
}

.cuenta__membresia {
    display: grid;
    gap: 0.35rem;
    padding: 1rem;
    border-radius: 14px;
    color: var(--blanco);
    background: linear-gradient(150deg, #622373, #4a4b9a 55%, var(--agua-honda));
}

.cuenta__membresia strong {
    font-family: var(--display);
    font-size: 1.3rem;
    letter-spacing: 0.04em;
}

.cuenta__membresia .cuenta__usar {
    justify-self: start;
    margin-top: 0.4rem;
    color: #4a4b9a;
    background: var(--blanco);
}

.cuenta__subtitulo {
    font-size: 1.05rem;
}

.cuenta__pedidos {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cuenta__pedidos li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.2rem 0.8rem;
    padding: 0.8rem 1rem;
    border: 1.5px solid var(--agua-clara);
    border-radius: 12px;
}

.cuenta__pedidos small {
    grid-column: 1 / -1;
    color: var(--tinta-suave);
}

.cuenta__pedidos a {
    font-weight: 700;
    color: var(--agua-honda);
}

.marca {
    margin: 0;
    font-family: var(--display);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-decoration: none;
}

.pie .marca {
    color: var(--blanco);
}

/* Pedido: botón flotante y ventana con los pasos de compra */

/* Carrito flotante: ícono redondo con el número de piezas en una burbuja. */
.pedido-flotante {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right, 0px));
    /* Arriba del botón de chat. */
    bottom: calc(max(1rem, env(safe-area-inset-bottom, 0px)) + 4.4rem);
    z-index: 20;
    display: grid;
    place-items: center;
    width: 3.6rem;
    height: 3.6rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--blanco);
    background: linear-gradient(140deg, var(--agua-honda), var(--tinta));
    box-shadow: 0 12px 30px rgba(28, 36, 82, 0.35);
    cursor: pointer;
    transition: transform 0.2s;
}

.pedido-flotante:hover {
    transform: translateY(-2px);
}

.pedido-flotante__carrito {
    width: 1.85rem;
    height: 1.85rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pedido-flotante__carrito circle {
    fill: currentColor;
    stroke: none;
}

.pedido-flotante__n {
    position: absolute;
    top: -0.2rem;
    right: -0.2rem;
    display: grid;
    place-items: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding-inline: 0.35rem;
    border: 2px solid var(--blanco);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--tinta);
    background: var(--agua);
    font-variant-numeric: tabular-nums;
}

.boton--chico {
    min-height: 2.6rem;
    padding: 0.45rem 1rem;
    font-size: 0.95rem;
}

.boton-texto {
    justify-self: center;
    padding: 0.4rem;
    border: 0;
    font: inherit;
    font-weight: 600;
    color: var(--tinta-suave);
    background: none;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
}

/* Ubicación para entregar a domicilio. */
.ubicacion {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.8rem;
    align-items: start;
    padding: 0.9rem 1rem;
    border: 2px solid var(--agua-clara);
    border-radius: 14px;
    background: var(--blanco);
}

.ubicacion__icono {
    width: 1.8rem;
    height: 1.8rem;
    fill: none;
    stroke: var(--agua-honda);
    stroke-width: 1.8;
}

.ubicacion__texto {
    margin-bottom: 0.6rem;
    font-size: 0.95rem;
}

.ubicacion--bien {
    border-color: #2e9e6a;
    background: #effaf4;
}

.ubicacion--fuera {
    border-color: var(--alerta);
    background: #fdf1ef;
}

/* Código de promoción o de membresía. */
.codigo label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 700;
}

.codigo__fila {
    display: flex;
    gap: 0.6rem;
}

.codigo__fila input {
    flex: 1;
    min-width: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.codigo__estado {
    margin-top: 0.5rem;
    font-size: 0.93rem;
    font-weight: 600;
    color: var(--agua-honda);
}

.codigo__estado--error {
    color: var(--alerta);
}

.pedido__ahorro {
    margin-top: -0.4rem;
    padding: 0.5rem 0.8rem;
    border-radius: 10px;
    font-weight: 700;
    text-align: right;
    color: #1d7a52;
    background: #effaf4;
}

.pedido__regalo .gratis,
.gratis {
    font-weight: 800;
    color: #1d7a52;
}

.acepto a {
    color: var(--agua-honda);
}

/* Bienvenida. */
.regalos {
    display: grid;
    gap: 0.8rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.regalos li {
    display: grid;
    grid-template-columns: 2.4rem 1fr;
    gap: 0.7rem;
    align-items: start;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: var(--bruma);
}

.regalos__icono {
    font-size: 1.6rem;
    line-height: 1.2;
}

.regalo-chip {
    justify-self: start;
    margin-top: 0.4rem;
    padding: 0.55rem 1rem;
    border: 2px dashed var(--agua);
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    font-size: 0.95rem;
    text-align: left;
    color: var(--agua-profunda);
    background: rgba(255, 255, 255, 0.75);
    cursor: pointer;
}

/* Membresía. */
.membresia__antetitulo {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--agua-honda);
}

.membresia h2 {
    margin-top: 0.4rem;
    font-size: clamp(1.7rem, 4.5vw, 2.6rem);
    line-height: 1.1;
}

.membresia__bajada {
    max-width: 40rem;
    margin-top: 0.8rem;
    font-size: 1.1rem;
    color: var(--tinta-suave);
}

.planes {
    display: grid;
    gap: 1.1rem;
    margin-top: 2rem;
}

@media (min-width: 52rem) {
    .planes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
    }
}

.plan {
    position: relative;
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    gap: 0.7rem;
    padding: 1.6rem 1.4rem;
    border: 2px solid var(--agua-clara);
    border-radius: 22px;
    background: var(--blanco);
    box-shadow: 0 12px 30px rgba(7, 81, 92, 0.08);
}

.plan--destacado {
    border-color: transparent;
    color: var(--blanco);
    background: linear-gradient(150deg, #622373, #4a4b9a 55%, var(--agua-honda));
    box-shadow: 0 18px 40px rgba(74, 75, 154, 0.35);
}

.plan__sello {
    position: absolute;
    top: -0.8rem;
    right: 1.2rem;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--tinta);
    background: var(--agua);
}

.plan__nombre {
    font-size: 1.15rem;
    font-weight: 800;
}

.plan__precio {
    font-family: var(--display);
    font-size: 2.3rem;
    font-weight: 700;
    line-height: 1;
}

.plan__precio small {
    font-family: var(--texto);
    font-size: 1rem;
    font-weight: 600;
}

.plan__equivale {
    font-size: 0.95rem;
    opacity: 0.85;
}

.plan__beneficios {
    display: grid;
    gap: 0.5rem;
    margin: 0.4rem 0 0;
    padding: 0;
    list-style: none;
}

.plan__beneficios li::before {
    content: "✓ ";
    font-weight: 800;
    color: var(--agua);
}

.plan--destacado .boton {
    color: var(--tinta);
    background: var(--blanco);
}

.membresia__nota {
    margin-top: 1.2rem;
    font-size: 0.92rem;
    color: var(--tinta-suave);
}

.membresia-resumen {
    padding: 1rem;
    border-radius: 14px;
    font-weight: 600;
    color: var(--blanco);
    background: linear-gradient(150deg, #622373, #4a4b9a 55%, var(--agua-honda));
}

.tarjetas--centro {
    display: flex;
    justify-content: center;
}

.pedido {
    width: min(34rem, calc(100vw - 1.5rem));
    max-height: calc(100dvh - 1.5rem);
    padding: 0;
    border: 0;
    border-radius: 20px;
    color: var(--tinta);
    background: var(--blanco);
}

.pedido::backdrop {
    background: rgba(4, 55, 66, 0.6);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.pedido__barra {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem 0.75rem;
    background: var(--blanco);
}

.pedido__barra h2 {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.pedido__cerrar {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: var(--bruma);
    cursor: pointer;
}

.pedido__cerrar svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: var(--tinta);
    stroke-width: 2.5;
    stroke-linecap: round;
}

.aviso-demo {
    margin: 0 1.25rem;
    padding: 0.55rem 0.9rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ejemplo-texto);
    background: var(--ejemplo-fondo);
}

.progreso {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
    margin: 1rem 1.25rem;
    padding: 0;
    list-style: none;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--tinta-suave);
}

.progreso li {
    padding-top: 0.45rem;
    border-top: 4px solid var(--agua-clara);
}

.progreso .hecho {
    border-top-color: var(--agua);
    color: var(--tinta);
}

.paso {
    display: grid;
    gap: 1rem;
    padding: 0 1.25rem 1.25rem;
}

.pedido__lista {
    display: grid;
    gap: 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.linea {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.5rem 1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--agua-clara);
}

.linea__nombre {
    font-weight: 700;
    line-height: 1.25;
}

.linea__precio {
    font-size: 0.9rem;
    color: var(--tinta-suave);
}

.linea__importe {
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.linea__quitar {
    justify-self: end;
    padding: 0.3rem 0;
    border: 0;
    font-size: 0.9rem;
    text-decoration: underline;
    color: var(--agua-honda);
    background: none;
    cursor: pointer;
}

.pedido__vacio {
    color: var(--tinta-suave);
}

.pedido__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 1.1rem;
    font-weight: 600;
}

.pedido__total strong {
    font-family: var(--display);
    font-size: 1.6rem;
    font-variant-numeric: tabular-nums;
}

.pedido__nota {
    font-size: 0.92rem;
    color: var(--tinta-suave);
}

.opciones-pago {
    display: grid;
    gap: 0.7rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.opciones-pago legend {
    margin-bottom: 0.6rem;
    padding: 0;
    font-weight: 700;
}

.opcion-pago {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border: 2px solid var(--agua-clara);
    border-radius: 14px;
    cursor: pointer;
}

.opcion-pago:has(input:checked) {
    border-color: var(--agua);
    background: var(--bruma);
}

/* Entrega a domicilio bloqueada hasta llegar a la compra mínima. */
.opcion-pago:has(input:disabled) {
    border-style: dashed;
    color: var(--tinta-suave);
    cursor: not-allowed;
}

.opcion-pago input {
    width: 1.2rem;
    height: 1.2rem;
    margin: 0.2rem 0 0;
    accent-color: var(--agua-honda);
}

.opcion-pago strong {
    display: block;
}

#form-pedido,
#form-registro,
#form-membresia {
    display: grid;
    gap: 1rem;
}

.boton--ancho {
    width: 100%;
}

.recordar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.95rem;
    cursor: pointer;
}

.recordar input {
    width: 1.2rem;
    height: 1.2rem;
    margin: 0;
    accent-color: var(--agua-honda);
}

.pago-planta {
    display: grid;
    gap: 0.4rem;
    padding: 0.9rem 1rem;
    border-radius: 12px;
    background: var(--bruma);
}

.pedido__lista--resumen {
    gap: 0.35rem;
    padding-left: 1.1rem;
    list-style: disc;
}

.pago-demo {
    display: grid;
    gap: 0.5rem;
    padding: 0.9rem 1rem;
    border-radius: 12px;
    font-size: 0.95rem;
    background: var(--bruma);
}

.listo__titulo {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

/* Recibe el foco solo para que los lectores de pantalla anuncien el resultado; no es un control. */
.listo__titulo:focus {
    outline: none;
}

.listo__resumen {
    margin: 0;
    padding: 1rem;
    border-radius: 12px;
    font-family: var(--texto);
    font-size: 0.98rem;
    white-space: pre-wrap;
    background: var(--bruma);
}

.nota-impresa {
    display: none;
}

/* Página de texto (aviso de privacidad) */

.documento {
    max-width: 44rem;
    margin-inline: auto;
    padding: clamp(1.5rem, 4vw, 3rem) var(--margen) clamp(3rem, 8vw, 5rem);
}

.documento h1 {
    font-size: clamp(1.7rem, 5vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.documento h2 {
    margin-top: 2rem;
    font-size: 1.2rem;
    font-weight: 600;
}

.documento p,
.documento ul {
    margin-top: 0.8rem;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .boton,
    .opcion__foto {
        transition: none;
    }

    .ola__a,
    .ola__b,
    .cubo,
    .inmersion::before {
        animation: none;
    }
}

@media print {
    body {
        border: 0;
    }

    body > *:not(.nota-impresa) {
        display: none !important;
    }

    .nota-impresa {
        display: block;
        padding: 1.5cm;
        font-size: 12pt;
    }

    .nota-impresa pre {
        font-family: var(--texto);
        white-space: pre-wrap;
    }
}