/* ==========================================================================
   Stay Cold — sistema de diseño de la tienda
   --------------------------------------------------------------------------
   Paleta azul / turquesa / celeste. Nada de verde: la clienta lo pidió
   expresamente después de ver una versión con lima.

   Los tonos salen del logotipo (azul petróleo y celeste) y se completan con
   un turquesa que da el acento sin salirse de la familia fría — el nombre de
   la marca es «Stay Cold» y la paleta tiene que sostener eso.
   ========================================================================== */

:root {
  /* --- marca ------------------------------------------------------------ */
  --azul:        #1A4860;   /* azul petróleo del logotipo */
  --azul-hondo:  #0F2B3A;
  --celeste:     #7499C6;   /* azul claro del logotipo */
  --turquesa:    #2FA8B5;   /* el acento */
  --acqua:       #8FD4E8;

  /* --- superficies ------------------------------------------------------ */
  --blanco:      #FFFFFF;
  --hueso:       #F1F5FA;
  --hueso-hondo: #E3EBF3;
  --linea:       #DCE5EE;

  /* --- texto ------------------------------------------------------------ */
  --tinta:       #16232B;
  --gris:        #63737F;
  --sobre-azul:  rgba(255, 255, 255, .82);

  /* --- medidas ---------------------------------------------------------- */
  --ancho:       1240px;
  --radio:       14px;
  --radio-chico: 10px;
  --sombra:      0 1px 2px rgba(22, 35, 43, .05), 0 8px 24px rgba(22, 35, 43, .06);
  --sombra-alta: 0 4px 12px rgba(22, 35, 43, .08), 0 18px 44px rgba(22, 35, 43, .12);

  --titulo: "Poppins", Helvetica, Arial, sans-serif;
  --texto:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--titulo);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
}

h1 { font-size: clamp(30px, 4.2vw, 46px); }
h2 { font-size: clamp(24px, 3.2vw, 34px); }
h3 { font-size: 19px; }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: 20px;
}

.marcador {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--turquesa);
  font-family: var(--titulo);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.seccion { padding: 60px 0; }
.seccion--hueso { background: var(--hueso); }

.seccion__cab {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}
.seccion__cab h2 { margin: 0; }

/* Enlace «ver todo» al lado del título: no compite con los botones de acción */
.enlace-mas {
  flex: none;
  color: var(--azul);
  font-family: var(--titulo);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.enlace-mas:hover { color: var(--turquesa); }

/* ==========================================================================
   Botones
   ========================================================================== */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 26px;
  border: 1px solid var(--azul);
  border-radius: 999px;
  background: var(--azul);
  color: var(--blanco);
  font-family: var(--titulo);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.boton:hover:not(:disabled) { background: var(--azul-hondo); border-color: var(--azul-hondo); }
.boton:disabled { opacity: .45; cursor: not-allowed; }

.boton--linea { background: transparent; color: var(--azul); }
.boton--linea:hover:not(:disabled) { background: var(--azul); color: var(--blanco); }

.boton--turquesa { background: var(--turquesa); border-color: var(--turquesa); }
.boton--turquesa:hover:not(:disabled) { background: #268C97; border-color: #268C97; }

.boton--bloque { width: 100%; }
.boton--chico  { padding: 9px 18px; font-size: 13px; }

/* ==========================================================================
   Cabecera
   ========================================================================== */

/* Barra de anuncio: una línea, lo que de verdad decide una compra —cuánto
   cuesta el envío y que se puede cerrar por WhatsApp—. No rota ni se cierra:
   un carrusel de anuncios se lee cero veces. */
.anuncio {
  background: var(--azul-hondo);
  color: var(--sobre-azul);
  font-size: 13px;
  text-align: center;
}
.anuncio .contenedor {
  display: flex;
  justify-content: center;
  gap: 8px 22px;
  flex-wrap: wrap;
  padding-block: 9px;
}
.anuncio b { color: var(--acqua); font-weight: 600; }
.anuncio a { color: inherit; }

.cab {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--azul);
  color: var(--blanco);
}

.cab__barra {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 68px;
}

.cab__logo { flex: none; }
.cab__logo img { width: 148px; height: auto; }

.cab__nav {
  display: flex;
  gap: 4px;
  margin-inline: auto;
}

.cab__enlace {
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--sobre-azul);
  font-family: var(--titulo);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.cab__enlace:hover,
.cab__enlace[aria-current="page"] { background: rgba(255, 255, 255, .12); color: var(--blanco); }

.cab__acciones { display: flex; align-items: center; gap: 10px; }

.cab__icono {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--blanco);
  text-decoration: none;
  transition: background .18s ease;
}
.cab__icono:hover { background: rgba(255, 255, 255, .12); }
.cab__icono svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; }

.cab__cuenta {
  position: absolute;
  top: 4px; right: 3px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--turquesa);
  color: var(--blanco);
  font-family: var(--titulo);
  font-size: 11px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
}
.cab__cuenta[hidden] { display: none; }

.cab__menu { display: none; }

/* ==========================================================================
   Banners de portada — rectangulares, nunca cuadrados
   --------------------------------------------------------------------------
   La clienta fue explícita: «banners rectangulares y no cuadrados». Por eso
   la proporción está fijada acá y no depende de la foto que suba: si la
   dejara libre, la primera foto vertical volvería a descuadrar la portada.
   ========================================================================== */

.banners {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.banner {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 3 / 2;
  padding: 26px;
  border-radius: var(--radio);
  background: var(--azul);
  overflow: hidden;
  color: var(--blanco);
  text-decoration: none;
  isolation: isolate;
}

/* El primero manda: ocupa el ancho completo y va más panorámico. Así la
   portada tiene una entrada clara en vez de tres piezas del mismo peso.

   8/3 es deliberado. La referencia usa un hero de pantalla completa que
   obliga a hacer scroll antes de ver un solo producto; acá a 1240 px de
   ancho el hero mide 465 px de alto y el catálogo empieza arriba del
   pliegue. Fue el encargo: «heros menos altos». */
.banner--ancho {
  grid-column: 1 / -1;
  align-items: center;
  aspect-ratio: 8 / 3;
  padding: 0 clamp(26px, 5vw, 64px);
}

/* La foto del hero ya trae su propio velo por la izquierda, donde va el
   texto. Repetir aquí el degradado de abajo arriba lo ensuciaba: acá el velo
   va en horizontal y suave. */
.banner--ancho::after {
  background: linear-gradient(
    to right,
    rgba(15, 43, 58, .72) 0%,
    rgba(15, 43, 58, .38) 38%,
    rgba(15, 43, 58, 0) 62%
  );
}

/* En porcentaje y no en `ch`: la unidad ch se mide con la tipografía del
   elemento donde se declara —este div, a 16 px— y no con la del titular, que
   va a 40. Puesto en 19ch daba 150 px de ancho y el título salía en cuatro
   líneas de dos palabras. */
.banner--ancho .banner__texto { max-width: min(50%, 600px); }

/* Que las dos líneas queden parejas en vez de una larga y una suelta. */
.banner--ancho .banner__titulo { text-wrap: balance; }

.banner--ancho .banner__bajada {
  font-size: clamp(14px, 1.4vw, 17px);
  max-width: 34ch;
}

.banner__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Velo: el texto tiene que leerse sobre cualquier foto que suba la clienta,
   incluida una clara. Sin esto, el día que cambie la imagen el título
   desaparece y nadie sabe por qué. */
.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* En diagonal, no de abajo arriba. El degradado vertical cubría también la
     mitad derecha —donde está el producto— y, sumado al velo que las fotos ya
     traen pintado, los termos salían apagados. Así protege el texto de abajo
     a la izquierda y deja limpio el lado del producto.

     Se mantiene aunque las fotos traigan su propio velo: el día que la
     clienta suba una foto clara desde el panel, esto es lo único que impide
     que el título desaparezca. */
  background: linear-gradient(
    to top right,
    rgba(15, 43, 58, .88) 0%,
    rgba(15, 43, 58, .46) 36%,
    rgba(15, 43, 58, .06) 68%,
    rgba(15, 43, 58, 0) 100%
  );
}

.banner__texto { max-width: 34ch; }

.banner__kicker {
  display: block;
  margin-bottom: 6px;
  color: var(--acqua);
  font-family: var(--titulo);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.banner__titulo {
  margin: 0 0 6px;
  font-family: var(--titulo);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}
.banner--ancho .banner__titulo { font-size: clamp(26px, 3.4vw, 40px); }

.banner__bajada {
  margin: 0;
  color: rgba(255, 255, 255, .84);
  font-size: 14px;
}

.banner__boton {
  display: inline-block;
  margin-top: 14px;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--blanco);
  color: var(--azul);
  font-family: var(--titulo);
  font-size: 13px;
  font-weight: 600;
}
.banner:hover .banner__boton { background: var(--acqua); }

/* ==========================================================================
   Tarjeta de producto
   --------------------------------------------------------------------------
   Cada color es su propio producto: la clienta quiere que al entrar a «Owala
   24 oz» se vean el rojo, el negro y el azul por separado, sin desplegables.
   ========================================================================== */

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 22px;
}

.tarjeta {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--blanco);
  overflow: hidden;
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tarjeta:hover {
  border-color: var(--celeste);
  box-shadow: var(--sombra-alta);
  transform: translateY(-3px);
}

.tarjeta__foto {
  position: relative;
  aspect-ratio: 3 / 4;          /* el panel encaja toda foto a 3:4 */
  background: var(--hueso);
}
.tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; }

.tarjeta__sellos {
  position: absolute;
  top: 10px; left: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sello {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--turquesa);
  color: var(--blanco);
  font-family: var(--titulo);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
}
.sello--agotado { background: var(--gris); }
.sello--ultima  { background: var(--azul); }

.tarjeta__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px;
  padding: 14px 15px 16px;
}

.tarjeta__marca {
  color: var(--gris);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.tarjeta__nombre {
  margin: 0;
  font-family: var(--titulo);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

/* La muestra de color va junto al nombre: es lo que distingue a un producto
   de su hermano, y el cliente lo busca con la vista antes que con el texto. */
.tarjeta__color {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--gris);
  font-size: 13px;
}

.muestra {
  flex: none;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(22, 35, 43, .18);
  border-radius: 50%;
}

.tarjeta__precio {
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--titulo);
  font-size: 17px;
  font-weight: 700;
  color: var(--azul);
}
.tarjeta__antes {
  margin-left: 7px;
  color: var(--gris);
  font-size: 14px;
  font-weight: 400;
  text-decoration: line-through;
}

.tarjeta--agotada { opacity: .62; }

/* ==========================================================================
   Catálogo: filtros
   ========================================================================== */

.catalogo {
  display: grid;
  grid-template-columns: 236px 1fr;
  gap: 34px;
  align-items: start;
}

.filtros {
  position: sticky;
  top: 88px;
  padding: 20px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--blanco);
}

.filtros__grupo + .filtros__grupo {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--linea);
}

.filtros__titulo {
  margin: 0 0 11px;
  font-family: var(--titulo);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
}

.filtros__lista { display: flex; flex-direction: column; gap: 3px; }

.filtro {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--radio-chico);
  background: transparent;
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease;
}
.filtro:hover { background: var(--hueso); }
.filtro[aria-pressed="true"] { background: var(--azul); color: var(--blanco); }
.filtro[aria-pressed="true"] .filtro__n { color: rgba(255, 255, 255, .7); }

.filtro__n { margin-left: auto; color: var(--gris); font-size: 12px; }

/* Los colores van en cuadrícula: cuarenta y un filas de texto serían una
   lista imposible de recorrer, y el color se reconoce antes de leerlo. */
.filtros__colores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
  gap: 7px;
}

.filtro-color {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid rgba(22, 35, 43, .16);
  border-radius: 50%;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.filtro-color:hover { transform: scale(1.12); }
.filtro-color[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--blanco), 0 0 0 4px var(--azul);
}

.catalogo__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.catalogo__conteo { color: var(--gris); font-size: 14px; }

.catalogo__orden {
  padding: 9px 12px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  background: var(--blanco);
  font-family: var(--texto);
  font-size: 14px;
}

.fichas-activas { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }

.ficha-activa {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border: 1px solid var(--celeste);
  border-radius: 999px;
  background: var(--hueso);
  color: var(--azul);
  font-size: 13px;
  cursor: pointer;
}
.ficha-activa::after { content: "×"; font-size: 15px; line-height: 1; }

.vacio {
  padding: 60px 20px;
  border: 1px dashed var(--linea);
  border-radius: var(--radio);
  text-align: center;
  color: var(--gris);
}

/* ==========================================================================
   Ficha de producto
   ========================================================================== */

.ficha { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: start; }

.ficha__galeria { position: sticky; top: 92px; }

.ficha__principal {
  aspect-ratio: 3 / 4;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--hueso);
  overflow: hidden;
}
.ficha__principal img { width: 100%; height: 100%; object-fit: cover; }

.ficha__miniaturas { display: flex; gap: 9px; margin-top: 11px; }

.ficha__mini {
  width: 66px;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  background: var(--hueso);
  overflow: hidden;
  cursor: pointer;
}
.ficha__mini img { width: 100%; height: 100%; object-fit: cover; }
.ficha__mini[aria-pressed="true"] { border-color: var(--azul); }

.ficha__marca { color: var(--gris); font-size: 13px; letter-spacing: .05em; text-transform: uppercase; }
.ficha__titulo { margin: 6px 0 14px; }

.ficha__precio {
  font-family: var(--titulo);
  font-size: 30px;
  font-weight: 700;
  color: var(--azul);
}

.ficha__datos {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 22px 0;
  padding: 18px 0;
  border-block: 1px solid var(--linea);
}

.ficha__dato { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.ficha__dato dt { flex: none; width: 108px; color: var(--gris); }
.ficha__dato dd { margin: 0; font-weight: 500; }

.ficha__acciones { display: flex; flex-direction: column; gap: 11px; }

/* Dos caminos a propósito: se puede pagar con tarjeta o cerrar por WhatsApp,
   que es como esta tienda ya vende hoy. */
.ficha__wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 26px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  color: var(--tinta);
  font-family: var(--titulo);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.ficha__wa:hover { border-color: var(--azul); color: var(--azul); }
.ficha__wa svg { width: 18px; height: 18px; fill: currentColor; }

.ficha__aviso {
  margin-top: 14px;
  padding: 13px 16px;
  border-radius: var(--radio-chico);
  background: var(--hueso);
  color: var(--gris);
  font-size: 13px;
}

/* ==========================================================================
   Carrito
   ========================================================================== */

.carrito { display: grid; grid-template-columns: 1fr 340px; gap: 34px; align-items: start; }

.carrito__linea {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--linea);
}

.carrito__foto {
  aspect-ratio: 3 / 4;
  border-radius: var(--radio-chico);
  background: var(--hueso);
  overflow: hidden;
}
.carrito__foto img { width: 100%; height: 100%; object-fit: cover; }

.carrito__nombre { font-family: var(--titulo); font-size: 15px; font-weight: 600; }

.cantidad { display: inline-flex; align-items: center; border: 1px solid var(--linea); border-radius: 999px; }
.cantidad button {
  width: 32px; height: 32px;
  border: 0; background: transparent;
  color: var(--azul); font-size: 17px; cursor: pointer;
}
.cantidad span { min-width: 30px; text-align: center; font-weight: 600; }

.resumen {
  position: sticky;
  top: 92px;
  padding: 24px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--hueso);
}

.resumen__fila { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 15px; }
.resumen__fila--total {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--linea);
  font-family: var(--titulo);
  font-size: 19px;
  font-weight: 700;
  color: var(--azul);
}

.campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; }
.campo label { font-size: 13px; font-weight: 600; }
.campo input, .campo select, .campo textarea {
  padding: 11px 13px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  background: var(--blanco);
  font-family: var(--texto);
  font-size: 15px;
  /* Alto propio: heredando solo el padding, una opción de select queda
     cortada por arriba y por abajo. */
  min-height: 44px;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 2px solid var(--celeste);
  outline-offset: -1px;
}
.pista { margin: 0; color: var(--gris); font-size: 12px; }

/* ==========================================================================
   Pie
   ========================================================================== */

.pie {
  /* Sin margen: pega con la sección que tenga encima. Con margen dejaba una
     franja blanca entre el gris y el azul que parecía un error de montaje.
     La separación ya la da el cambio de color, que es más limpio que un
     hueco. */
  background: var(--azul);
  color: var(--sobre-azul);
}

.pie__rejilla {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding: 54px 0 42px;
}

.pie__logo { width: 172px; margin-bottom: 16px; }
.pie__lema { max-width: 34ch; margin: 0 0 20px; font-size: 14px; }

.pie__titulo {
  margin: 0 0 14px;
  color: var(--blanco);
  font-family: var(--titulo);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.pie__lista { margin: 0; padding: 0; list-style: none; font-size: 14px; }
.pie__lista li + li { margin-top: 8px; }
.pie__lista a { text-decoration: none; }
.pie__lista a:hover { color: var(--blanco); }

.pie__wa {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 15px;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--turquesa);
  color: var(--blanco);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.pie__wa:hover { background: var(--acqua); color: var(--azul-hondo); }
.pie__wa svg { width: 18px; height: 18px; fill: currentColor; }

.pie__redes { display: flex; gap: 10px; }
.pie__red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  color: var(--blanco);
  transition: background .18s ease, border-color .18s ease;
}
.pie__red:hover { background: var(--turquesa); border-color: var(--turquesa); }
.pie__red svg { width: 18px; height: 18px; fill: currentColor; }

.pie__barra {
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 13px;
}
.pie__barra .contenedor { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ==========================================================================
   Tres razones
   --------------------------------------------------------------------------
   Sin iconos de stock ni fotos: lo que resuelve la duda antes de comprar es
   el texto, y tres frases cortas se leen. Una fila de ilustraciones genéricas
   no la mira nadie.
   ========================================================================== */

.razones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.razon {
  padding: 26px 24px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--blanco);
}

/* Un icono dice de qué va la tarjeta antes de leerla; un «01» solo dice que
   hay tres. Va en círculo con el color de marca al 10 %, que separa el icono
   del fondo sin pedir una segunda tinta. */
.razon__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 15px;
  border-radius: 50%;
  background: rgba(47, 168, 181, .12);
  color: var(--turquesa);
}

.razon__icono svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.razon h3 { margin: 0 0 7px; font-size: 17px; }
.razon p  { margin: 0; color: var(--gris); font-size: 14px; }

/* ==========================================================================
   Avisos
   ========================================================================== */

.aviso {
  padding: 13px 17px;
  border-radius: var(--radio-chico);
  font-size: 14px;
}
.aviso--mal   { background: #FDECEC; color: #8E2020; }
.aviso--bien  { background: #E6F5F2; color: #14615A; }
.aviso--cargando { color: var(--gris); text-align: center; padding: 50px 0; }

/* ==========================================================================
   Responsivo
   ========================================================================== */

/* Atajos por tamaño: pastillas, no filas de filtro. En la portada son una
   decisión («¿de qué medida lo quiero?»), no un panel de control. */
.tamanos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tamano {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  padding: 11px 20px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--titulo);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.tamano:hover { border-color: var(--azul); background: var(--azul); color: var(--blanco); }
.tamano:hover .tamano__n { color: rgba(255, 255, 255, .72); }
.tamano__n { color: var(--gris); font-size: 12px; font-weight: 400; }

@media (max-width: 1024px) {
  .catalogo { grid-template-columns: 1fr; }
  .filtros  { position: static; }
  .ficha    { grid-template-columns: 1fr; gap: 30px; }
  .ficha__galeria { position: static; }
  .carrito  { grid-template-columns: 1fr; }
  .resumen  { position: static; }
  .pie__rejilla { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 760px) {
  .seccion { padding: 44px 0; }

  .banners { grid-template-columns: 1fr; gap: 14px; }
  .banner  { aspect-ratio: 16 / 10; padding: 20px; }
  .banner--ancho { aspect-ratio: 4 / 3; padding: 22px; align-items: flex-end; }
  .banner--ancho::after {
    background: linear-gradient(to top,
      rgba(15, 43, 58, .9) 0%, rgba(15, 43, 58, .5) 50%, rgba(15, 43, 58, .1) 100%);
  }
  .banner--ancho .banner__texto { max-width: 84%; }
  .razones { grid-template-columns: 1fr; }

  .cab__nav { display: none; }
  .cab__menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    margin-left: auto;
    border: 0; border-radius: 50%;
    background: transparent; color: var(--blanco); cursor: pointer;
  }
  .cab__menu svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.8; fill: none; }

  /* Menú desplegado: la tienda se usa sobre todo desde el celular, así que
     esto no es un extra. */
  .cab__nav--abierto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0 16px;
    margin: 0;
  }

  .rejilla { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .pie__rejilla { grid-template-columns: 1fr; text-align: center; }
  .pie__lema, .pie__logo { margin-inline: auto; }
  .pie__redes { justify-content: center; }
}

/* ==========================================================================
   Movimiento
   --------------------------------------------------------------------------
   La página se veía plana, y la causa no era la falta de animación: era el
   ritmo de tonos. Iba blanco → hueso → blanco → hueso, cuatro veces casi el
   mismo valor. Lo que la levanta es una banda OSCURA en medio; el movimiento
   viene después, y de a poco.

   Todo lo de aquí anima solo `transform` y `opacity` —lo único que el
   navegador puede mover sin rehacer el diseño— y todo se apaga entero con
   prefers-reduced-motion. Marear a alguien no es energía.
   ========================================================================== */

/* --- Aurora: manchas de color que se desplazan muy lento ------------------
   Son gradientes radiales, no una foto: pesan cero bytes y no hay imagen que
   esperar. */
.aurora {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--azul-hondo);
  color: var(--blanco);
}

.aurora::before {
  content: "";
  position: absolute;
  inset: -35%;
  z-index: -2;
  background:
    radial-gradient(38% 46% at 18% 30%, rgba(47, 168, 181, .62), transparent 62%),
    radial-gradient(34% 42% at 80% 20%, rgba(116, 153, 198, .50), transparent 64%),
    radial-gradient(46% 54% at 64% 86%, rgba(143, 212, 232, .34), transparent 66%);
  filter: blur(14px);
  animation: aurora 28s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes aurora {
  0%   { transform: translate3d(0, 0, 0)      scale(1); }
  50%  { transform: translate3d(-3%, 2%, 0)   scale(1.09); }
  100% { transform: translate3d(2.5%, -2%, 0) scale(1.04); }
}

.aurora .seccion__cab h2,
.aurora .marcador { color: var(--blanco); }
.aurora .marcador { color: var(--acqua); }
.aurora .enlace-mas { color: var(--acqua); }
.aurora .enlace-mas:hover { color: var(--blanco); }

/* Sobre la aurora las pastillas van en vidrio, no en blanco sólido: un
   rectángulo blanco encima mataría el degradado que hay detrás. */
.aurora .tamano {
  border-color: rgba(255, 255, 255, .26);
  background: rgba(255, 255, 255, .10);
  color: var(--blanco);
  backdrop-filter: blur(6px);
}
.aurora .tamano:hover { background: var(--blanco); border-color: var(--blanco); color: var(--azul-hondo); }
.aurora .tamano__n { color: rgba(255, 255, 255, .58); }
.aurora .tamano:hover .tamano__n { color: var(--gris); }

/* --- Grano ---------------------------------------------------------------
   Lo que más delata a un fondo plano es que sea perfectamente liso. Una capa
   de ruido finísima le da textura; va en SVG embebido, unos 200 bytes. */
.grano::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");
}

/* --- Ken Burns en el hero ------------------------------------------------
   Un zoom lentísimo. No se percibe como animación; se percibe como que la
   foto está viva. Si se nota, está demasiado rápido. */
.banner--ancho .banner__foto {
  animation: kenburns 30s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes kenburns {
  from { transform: scale(1)    translate3d(0, 0, 0); }
  to   { transform: scale(1.08) translate3d(-1.5%, 1%, 0); }
}

/* --- Cinta que corre -----------------------------------------------------
   La pista va duplicada y el recorrido es exactamente la mitad: así el salto
   del bucle cae donde el segundo juego queda calcado sobre el primero y no
   se ve el corte. */
.cinta {
  overflow: hidden;
  background: var(--azul-hondo);
  border-block: 1px solid rgba(255, 255, 255, .10);
  user-select: none;
}

.cinta__pista {
  display: flex;
  width: max-content;
  padding-block: 11px;
  animation: correr 34s linear infinite;
  will-change: transform;
}

.cinta__item {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  padding-inline: 13px;
  color: rgba(255, 255, 255, .72);
  font-family: var(--titulo);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cinta__item::after { content: "◆"; color: var(--turquesa); font-size: 8px; }

@keyframes correr {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.cinta:hover .cinta__pista { animation-play-state: paused; }

/* --- Aparecer al bajar ---------------------------------------------------
   Lo aplica tienda.js con IntersectionObserver. El estado inicial se escribe
   desde el JS y no aquí a propósito: si el JS no corre —bloqueado, error—,
   con la regla en CSS la página se quedaría en blanco para siempre. */
[data-revelar] {
  transition: opacity .62s cubic-bezier(.22, .61, .36, 1),
              transform .62s cubic-bezier(.22, .61, .36, 1);
}
[data-revelar].oculto  { opacity: 0; transform: translate3d(0, 20px, 0); }
[data-revelar].visible { opacity: 1; transform: none; }

/* --- La foto del producto respira al pasar por encima ------------------- */
.tarjeta__foto { overflow: hidden; }
.tarjeta__foto img { transition: transform .55s cubic-bezier(.22, .61, .36, 1); }
.tarjeta:hover .tarjeta__foto img { transform: scale(1.07); }

.banner__foto { transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
.banner:not(.banner--ancho):hover .banner__foto { transform: scale(1.06); }

/* --- Respeto por quien pidió que nada se mueva -------------------------- */
@media (prefers-reduced-motion: reduce) {
  .aurora::before,
  .banner--ancho .banner__foto,
  .cinta__pista { animation: none !important; }

  [data-revelar],
  [data-revelar].oculto {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .tarjeta__foto img,
  .banner__foto { transition: none; }
}

/* ==========================================================================
   Páginas de texto: preguntas frecuentes y gracias
   --------------------------------------------------------------------------
   Las dos venían de la plantilla sin hoja de estilos ni cabecera. La de
   gracias es la que más duele: es adonde vuelve quien ACABA de pagar con
   tarjeta, y estaba saliendo como HTML pelado.
   ========================================================================== */

.legal { max-width: 760px; margin-inline: auto; padding-block: 12px; }

.legal__cabeza { margin-bottom: 34px; }
.legal__titulo { margin: 0 0 10px; }
.legal__bajada { margin: 0; color: var(--gris); font-size: 17px; }

.legal__bloque {
  padding-top: 30px;
  margin-top: 30px;
  border-top: 1px solid var(--linea);
  /* La cabecera es pegajosa: sin esto, un ancla del pie deja el título
     escondido detrás de ella. */
  scroll-margin-top: 92px;
}
.legal__bloque:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.legal__bloque h2 { font-size: 23px; }
.legal__bloque p  { color: var(--tinta); }

.legal__lista { margin: 14px 0; padding-left: 20px; }
.legal__lista li + li { margin-top: 9px; }
.legal__lista--numerada { list-style: decimal; }

/* El «ojo»: la aclaración que el comprador agradece y nadie pone. */
.legal__ojo {
  margin: 18px 0 0;
  padding: 15px 18px;
  border-left: 3px solid var(--turquesa);
  border-radius: 0 var(--radio-chico) var(--radio-chico) 0;
  background: var(--hueso);
  color: var(--gris);
  font-size: 14px;
}

/* --- Gracias ------------------------------------------------------------ */

.gracias {
  max-width: 640px;
  margin-inline: auto;
  padding: 46px 0 20px;
  text-align: center;
}

.gracias__titulo { margin: 0 0 18px; }

.gracias__numero {
  display: inline-block;
  margin: 0 0 20px;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--hueso);
  font-size: 15px;
}
.gracias__numero strong { color: var(--azul); font-family: var(--titulo); letter-spacing: .04em; }

.gracias__texto { margin: 0 0 28px; color: var(--gris); font-size: 16px; }

.gracias__acciones {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 11px;
  margin-bottom: 30px;
}

.gracias__pie {
  padding-top: 24px;
  border-top: 1px solid var(--linea);
  color: var(--gris);
  font-size: 14px;
}
.gracias__pie a { color: var(--azul); font-weight: 600; }

/* ==========================================================================
   Menú con categorías
   --------------------------------------------------------------------------
   Las marcas y sus tamaños salen de data/departamentos.json, que publica el
   panel. Escritos a mano en el HTML, el día que entre una marca nueva el
   menú se quedaría viejo y nadie se acordaría de por qué.
   ========================================================================== */

.cab__item { position: relative; }

.cab__enlace--con-sub { display: inline-flex; align-items: center; gap: 6px; }

.cab__flecha {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s ease;
}
.cab__item[aria-expanded="true"] .cab__flecha { transform: rotate(180deg); }

.cab__sub {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  min-width: 216px;
  padding: 8px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  background: var(--blanco);
  box-shadow: var(--sombra-alta);
  /* visibility además de opacity: sin ella el panel sigue capturando el
     ratón invisible y tapa lo que hay debajo. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

/* Una sola forma de abrir por tipo de dispositivo, y es a propósito.

   Antes convivían las dos —hover y un aria-expanded que ponía el clic— y se
   quedaban DOS desplegables abiertos a la vez: el que habías tocado seguía
   fijo y el otro se abría al pasar por encima. Ninguna de las dos cerraba a
   la otra porque no se conocen entre sí.

   Con ratón manda el hover, que además cierra solo al salir. Sin ratón no
   hay hover, así que ahí sí manda el toque. */
@media (hover: hover) {
  .cab__item:hover .cab__sub,
  /* focus-within: con el teclado no hay hover, y un menú al que solo se
     llega con el ratón deja fuera a quien navega tabulando. */
  .cab__item:focus-within .cab__sub {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

@media (hover: none) {
  .cab__item[aria-expanded="true"] .cab__sub {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

.cab__subenlace {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--tinta);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
.cab__subenlace:hover { background: var(--hueso); color: var(--azul); }
.cab__subenlace span { color: var(--gris); font-size: 12px; }

.cab__sub hr {
  height: 1px;
  margin: 6px 4px;
  border: 0;
  background: var(--linea);
}

@media (max-width: 760px) {
  /* En el menú desplegado no hay sitio para paneles flotantes: los tamaños
     van en línea, indentados bajo su marca. */
  .cab__item { width: 100%; }

  .cab__sub {
    position: static;
    min-width: 0;
    margin: 2px 0 6px 14px;
    padding: 4px 0 4px 12px;
    border: 0;
    border-left: 2px solid rgba(255, 255, 255, .22);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }
  .cab__item[aria-expanded="true"] .cab__sub { display: block; }

  .cab__subenlace { color: var(--sobre-azul); }
  .cab__subenlace:hover { background: rgba(255, 255, 255, .10); color: var(--blanco); }
  .cab__subenlace span { color: rgba(255, 255, 255, .5); }

  .cab__enlace--con-sub { width: 100%; justify-content: space-between; }
}

/* ==========================================================================
   Hero de anuncio
   --------------------------------------------------------------------------
   Tres fotos de ambiente pasándose por detrás de un texto fijo. El texto no
   cambia con la foto a propósito: un titular que salta cada seis segundos no
   se termina de leer nunca.

   2:1 y no 8:3 como los banners: en un anuncio hay gente, y a la gente hay
   que darle alto. A 1240 px de ancho son 620 px — sigue estando muy lejos
   del hero de pantalla completa que se quería evitar.
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  aspect-ratio: 2 / 1;
  padding: 0 clamp(26px, 5vw, 64px);
  border-radius: var(--radio);
  background: var(--azul-hondo);
  overflow: hidden;
  isolation: isolate;
  color: var(--blanco);
}

.hero__fotos { position: absolute; inset: 0; z-index: -2; }

.hero__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* El fundido es largo a propósito: con un cambio rápido el ojo salta al
     movimiento y deja de leer el titular. */
  transition: opacity 1.4s ease-in-out;
}
.hero__foto.activa { opacity: 1; }

/* Ken Burns solo en la que está a la vista: animarlas todas sería tener tres
   animaciones corriendo para ver una. */
.hero__foto.activa { animation: kenburns 22s ease-in-out infinite alternate; }

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to right,
    rgba(8, 26, 37, .92) 0%,
    rgba(8, 26, 37, .70) 32%,
    rgba(8, 26, 37, .18) 62%,
    rgba(8, 26, 37, 0) 100%
  );
}

.hero__texto { position: relative; max-width: min(48%, 580px); }

.hero__kicker {
  display: block;
  margin-bottom: 10px;
  color: var(--acqua);
  font-family: var(--titulo);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.hero__titulo {
  margin: 0 0 12px;
  font-family: var(--titulo);
  font-size: clamp(28px, 3.8vw, 46px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.hero__bajada {
  margin: 0 0 22px;
  max-width: 36ch;
  color: rgba(255, 255, 255, .86);
  font-size: clamp(14px, 1.4vw, 17px);
}

/* Puntos: además de indicar cuántas hay, dejan saltar a una. Sin ellos el
   pase se siente como algo que le pasa a la página, no como algo que se
   puede manejar. */
.hero__puntos {
  position: absolute;
  bottom: 18px;
  left: clamp(26px, 5vw, 64px);
  z-index: 2;
  display: flex;
  gap: 8px;
}

.hero__punto {
  width: 26px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .34);
  cursor: pointer;
  transition: background .25s ease, width .25s ease;
}
.hero__punto[aria-current="true"] { width: 40px; background: var(--acqua); }

@media (max-width: 760px) {
  .hero {
    aspect-ratio: 4 / 5;
    align-items: flex-end;
    padding: 22px 22px 46px;
  }
  .hero__texto { max-width: 100%; }
  .hero::after {
    background: linear-gradient(to top,
      rgba(8, 26, 37, .94) 0%, rgba(8, 26, 37, .62) 46%, rgba(8, 26, 37, .1) 100%);
  }
  .hero__puntos { left: 22px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__foto { transition: none; }
  .hero__foto.activa { animation: none; }
}

/* ==========================================================================
   Formas de pago
   --------------------------------------------------------------------------
   Antes eran cuatro botones de «pagar» uno al lado del otro y nadie sabía cuál
   apretar. La decisión —cómo pago— y la acción —confirmar— son dos pasos.
   ========================================================================== */

.pagos {
  margin: 4px 0 18px;
  padding: 0;
  border: 0;
}

.pagos__titulo {
  padding: 0;
  margin-bottom: 11px;
  font-family: var(--titulo);
  font-size: 15px;
  font-weight: 600;
}

.pago {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  background: var(--blanco);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.pago + .pago { margin-top: 8px; }
.pago:hover { border-color: var(--celeste); }

/* El radio real se queda: es lo que hace que funcionen el teclado y las
   flechas. Solo se le cambia el color. */
.pago input { margin: 2px 0 0; accent-color: var(--azul); flex: none; }

.pago:has(input:checked) {
  border-color: var(--azul);
  background: var(--hueso);
}
.pago:has(input:focus-visible) { outline: 2px solid var(--celeste); outline-offset: 2px; }

.pago__nombre { display: block; font-family: var(--titulo); font-size: 14px; font-weight: 600; }
.pago__nota   { display: block; margin-top: 2px; color: var(--gris); font-size: 13px; }

/* Las cuentas bancarias, en la pantalla de gracias y en el correo. */
.cuentas { display: grid; gap: 12px; margin: 18px 0 0; text-align: left; }

.cuenta {
  padding: 16px 18px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  background: var(--blanco);
}

.cuenta__banco {
  margin: 0 0 9px;
  font-family: var(--titulo);
  font-size: 15px;
  font-weight: 700;
  color: var(--azul);
}

.cuenta__fila { display: flex; gap: 10px; font-size: 14px; }
.cuenta__fila + .cuenta__fila { margin-top: 5px; }
.cuenta__fila dt { flex: none; width: 92px; color: var(--gris); }
.cuenta__fila dd { margin: 0; font-weight: 500; }

/* El número se escribe grande y se puede copiar de un toque: es el dato que
   la persona va a trasladar a la app del banco, y teclearlo mal es perder
   el pago. */
.cuenta__numero {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 16px;
  letter-spacing: .04em;
  user-select: all;
}