:root {
  /* --- Fondos --- */
  --fondo: #fcfaf8;
  --superficie: #ffffff;
  --frio: #edf5f7;   /* velo celeste — linaje Vianova */
  --calor: #fbf1ec;  /* velo durazno — linaje Vianova */

  /* --- Tinta: contraste real --- */
  --tinta: #16242e;
  --tinta-2: #45565f;
  --tinta-3: #5c6c76; /* mínimo para AA en texto chico sobre el fondo */

  /* La voz de marca: azul Vianova profundo, emparentado con el logo
     (#7195af). Lo llevan los titulares y también los importes, para que
     precio y título hablen el mismo idioma. El cuerpo sigue en pizarra. */
  --tinta-titular: #2a5470;

  /* --- Acento de compra: único, comprometido --- */
  --compra: #b4451d;
  --compra-hover: #963a17;
  --compra-velo: #fdeee7;
  --compra-texto: #9a3c18; /* el acento sobre el velo, ya en AA */

  /* Celeste de marca  */
  --celeste: #97c4d7;

  /* --- Selección: azul profundo --- */
  --seleccion: #2c5b72;
  --seleccion-hover: #234a5e;
  --seleccion-velo: #eaf3f7;

  --filete: #e4ddd6;
  --filete-fuerte: #cfc5bb;

  --radio: 14px;
  --radio-chico: 10px;
  --radio-pill: 999px;
  --ancho-max: 1140px;
  --nav-alto: 68px;

  /* Titulares en caecilia itálica, la voz de marca de Vianova. Va en peso 700
     y a escala grande: la itálica no era el problema, el 400 sí —ahí los
     titulares de venta leían como epígrafe. */
  --titulos: "caecilia-sans-head", "Nunito Sans", system-ui, sans-serif;
  --sans: "Nunito Sans", system-ui, -apple-system, sans-serif;
  /* Los importes nunca van en el serif: necesitan cifras tabulares. */
  --numeros: "Nunito Sans", system-ui, sans-serif;

  --sombra-baja: 0 1px 2px rgba(22, 36, 46, 0.06), 0 2px 8px rgba(22, 36, 46, 0.05);
  --sombra-media: 0 4px 10px rgba(22, 36, 46, 0.07), 0 12px 28px rgba(22, 36, 46, 0.09);
  --sombra-alta: 0 6px 16px rgba(22, 36, 46, 0.10), 0 20px 48px rgba(22, 36, 46, 0.14);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

[hidden] { display: none !important; }

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--tinta-2);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2 {
  font-family: var(--titulos);
  font-style: italic;
  font-weight: 700;
  color: var(--tinta-titular);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 8.6vw, 4.1rem); }
h2 { font-size: clamp(1.95rem, 5.2vw, 2.85rem); }

/* Los subtítulos de card van en la sans: a tamaño chico el serif de alto
   contraste pierde legibilidad y compite con el precio. */
h3 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--tinta-titular);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

/* Sin viudas: el navegador evita que la última línea quede con una sola
   palabra, en cualquier ancho. Los titulares ya usan `balance`. */
p, li, figcaption, dd, dt { text-wrap: pretty; }

/* Las preguntas del FAQ son de dos o tres palabras: ahí `pretty` no puede
   evitar la viuda sin desbalancear, y `balance` reparte mejor. */
summary { text-wrap: balance; }

p { margin: 0 0 1em; max-width: 68ch; }

strong { color: var(--tinta); font-weight: 700; }

a { color: var(--seleccion); text-underline-offset: 3px; }

:focus-visible {
  outline: 3px solid var(--seleccion);
  outline-offset: 3px;
  border-radius: 4px;
}

/* El signo de moneda va bastante más chico que la cifra: el número es el
   dato, el símbolo solo lo califica. Se alinea por baseline para no
   flotar. */
.moneda {
  /* Piso de 11px: 0.56em funciona en el precio grande, pero en el tachado
     (1rem) daría ~8px y el signo se pierde. */
  font-size: max(0.56em, 11px);
  font-weight: 700;
  margin-right: 0.1em;
  /* Subido ópticamente: en baseline el signo queda ~5px por debajo del
     centro de la cifra y se lee colgado. Medido contra la caja del número. */
  vertical-align: 0.20em;
}

/* Iconos: un solo sistema, trazo consistente */
.ico {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Corte de línea decidido a mano, solo en desktop. En mobile el <br>
   desaparece y el texto envuelve solo. El espacio queda antes del <br>
   para que al ocultarlo no se peguen las palabras. */
.corte-desktop { display: none; }

@media (min-width: 920px) {
  .corte-desktop { display: inline; }
  /* El corte es explícito: `balance` acá pelearía con la decisión. */
  h2:has(.corte-desktop) { text-wrap: initial; }
}

/* "Lipo-Modelado" es el nombre del tratamiento: el guion es un punto de
   corte válido para el navegador, así que hay que impedirlo a mano. */
.nobr { white-space: nowrap; }

/* Los logos de marca vienen en relleno, no en trazo: el sistema de iconos
   propio es stroke-only, así que la marca desactiva el trazo. */
.ico--marca { fill: currentColor; stroke: none; }

.container {
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 22px;
}

.container--angosto { max-width: 780px; }

.section { padding: 76px 0; }
.section--frio { background: var(--frio); }
.section--calor { background: var(--calor); }

.centrado { text-align: center; }

/* Solo hijos directos: si alcanza a cualquier <p> descendiente, la utilidad
   se mete adentro de los componentes anidados y les centra el contenido. */
.centrado > p,
p.centrado { margin-left: auto; margin-right: auto; }

section[id] { scroll-margin-top: calc(var(--nav-alto) + 16px); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  border-radius: var(--radio-pill);
  min-height: 52px;
  padding: 15px 28px;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
              color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}

/* Compra: el único color de compra de la página */
.btn--compra {
  background: var(--compra);
  border-color: var(--compra);
  color: #fff;
  box-shadow: var(--sombra-media);
}

.btn--compra:hover { background: var(--compra-hover); border-color: var(--compra-hover); transform: translateY(-2px); }
.btn--compra:active { transform: translateY(0); }

/* Fantasma: acciones secundarias, nunca compiten con compra */
.btn--fantasma {
  background: transparent;
  border-color: var(--filete-fuerte);
  color: var(--tinta);
}

.btn--fantasma:hover { border-color: var(--tinta); background: var(--superficie); }

.btn--nav { min-height: 44px; padding: 10px 18px; font-size: 0.92rem; }
.btn--nav span { display: none; }

@media (min-width: 760px) {
  .btn--nav span { display: inline; }
}

/* ============ Nav ============ */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(252, 250, 248, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.nav--sombra { border-bottom-color: var(--filete); box-shadow: var(--sombra-baja); }

.nav__inner {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 22px;
  height: var(--nav-alto);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.nav__brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.nav__brand img { height: 27px; width: auto; }

.nav__lugar {
  display: none;
  margin: 0;
  padding-left: 14px;
  border-left: 1px solid var(--filete-fuerte);
  font-size: 0.8rem;
  line-height: 1.3;
  color: var(--tinta-3);
  max-width: none;
}

@media (min-width: 900px) {
  .nav__brand img { height: 30px; }
  .nav__lugar { display: block; }
}

/* ============ 1. Hero ============ */

.hero { padding: calc(var(--nav-alto) + 40px) 0 60px; }

.hero__grid { display: grid; gap: 34px; }

.hero h1 { margin-bottom: 0.4em; }

.hero__lead {
  font-size: 1.1rem;
  max-width: 36ch;
  color: var(--tinta-2);
  margin-bottom: 1.5em;
}

/* Ancla de precio: visible sin scrollear */
.hero__precio {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  /* Columna corta: el $ es chico y va subido, así que deja aire óptico y el
     hueco se percibe mayor que el métrico. */
  gap: 8px 6px;
  margin: 0 0 22px;
  max-width: none;
}

.hero__precio-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--tinta-2);
}

.hero__precio-monto {
  font-family: var(--numeros);
  font-variant-numeric: tabular-nums;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--tinta-titular);
}

.hero__precio-nota {
  font-size: 0.9rem;
  color: var(--tinta-3);
  width: 100%;
  margin: 0;
}

.hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }

.hero__confianza {
  list-style: none;
  margin: 34px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--filete);
  display: grid;
  gap: 12px;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--tinta-2);
}

.hero__confianza li { display: flex; align-items: center; gap: 11px; }
.hero__confianza .ico { color: var(--seleccion); }

.hero__media img {
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  width: 100%;
}

/* La franja de confianza cruza bajo las dos columnas: saca ~130px de alto
   a la columna de texto y deja el dúo del hero casi parejo. */
@media (min-width: 920px) {
  /* Los tres ítems tienen largos muy distintos: en columnas iguales el aire
     sobrante se acumula detrás de los cortos y la franja se ve despareja.
     Repartidos por contenido, el espacio queda entre ellos, no dentro. */
  .hero__confianza {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: 32px;
    row-gap: 12px;
    margin-top: 44px;
  }
}

@media (min-width: 920px) {
  .hero { padding: calc(var(--nav-alto) + 64px) 0 84px; }
  .hero__lead { font-size: 1.18rem; }

  /* Mismo criterio que el resto de los dúos: el alto lo decide el texto y
     la foto se estira. La acción de esta toma está centrada, así que el
     recorte la aprieta en vez de arruinarla. */
  .hero__grid {
    grid-template-columns: 1.05fr 1fr;
    align-items: stretch;
    gap: 60px;
    min-height: 460px;
  }

  .hero__texto { align-self: center; }

  .hero__media { position: relative; min-height: 100%; }

  .hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center 42%;
  }
}

/* ============ 3. El problema ============ */

.problema p { font-size: 1.12rem; }

/* ============ 4. Tecnología ============ */

.tecno__grid { display: grid; gap: 36px; }

.tecno__media img { border-radius: var(--radio); box-shadow: var(--sombra-media); }

.tecno__bullets {
  list-style: none;
  margin: 1.8em 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.tecno__bullets li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 15px 0;
  border-top: 1px solid var(--filete);
}

.tecno__bullets li:last-child { border-bottom: 1px solid var(--filete); }
.tecno__bullets .ico { color: var(--seleccion); margin-top: 2px; }

@media (min-width: 920px) {
  .tecno__grid { grid-template-columns: 5fr 7fr; gap: 68px; }
}

/* ============ 5. Resultados ============ */

/* Entra en una sola línea en desktop; en mobile envuelve natural. */
.resultados__intro { max-width: none; }

.resultados__grid { display: grid; gap: 24px; margin-top: 44px; }

/* Mismo tratamiento que la sección "Antes y después" del sitio principal:
   tarjeta blanca, el par lado a lado, etiqueta en píldora clara y sin texto
   por caso. Son ilustrativos, la explicación vive en la bajada de sección. */
.caso {
  margin: 0;
  background: var(--superficie);
  border: 1px solid var(--filete);
  border-radius: 18px;
  padding: 14px;
}

.caso__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.caso__foto { position: relative; }

.caso__foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 12px;
}

.caso__tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  background: rgba(252, 250, 248, 0.92);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: var(--tinta-titular);
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: var(--radio-pill);
  padding: 4px 10px;
}

.resultados__puente { margin-top: 44px; font-size: 1.06rem; }

.resultados__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--compra);
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
}

.resultados__cta:hover { color: var(--compra-hover); }

@media (min-width: 840px) {
  .resultados__grid { grid-template-columns: 1fr 1fr; }
}

/* ============ 6 y 7. Packs — la zona de decisión ============ */

/* La llegada: más aire arriba, terreno propio */
/* La zona de decisión. Va sobre papel limpio: la sección anterior
   (Resultados) es cálida, así que el cambio de terreno tiene que verse. Un
   degradado que arranque en el mismo cálido suelda las dos secciones en un
   solo bloque, que es justo lo contrario de una llegada. La llegada la dan
   el corte de color y el aire extra de arriba. */
.packs {
  padding: 104px 0 88px;
  background: var(--fondo);
}

.packs__intro { max-width: 54ch; font-size: 1.06rem; }

.packs__grid { display: grid; gap: 18px; margin-top: 42px; }

.pack {
  /* La card manda su propia alineación: si la hereda del contexto, la misma
     card se ve centrada en una sección y a la izquierda en otra. */
  text-align: left;
  position: relative;
  background: var(--superficie);
  border: 1.5px solid var(--filete);
  border-radius: var(--radio);
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sombra-baja);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease),
              transform 0.25s var(--ease), opacity 0.3s var(--ease);
}

.pack:hover { box-shadow: var(--sombra-media); }

/* Recomendación, no estado: va en celeste para no leerse como seleccionada.
   Si además la eligen, .pack--activo pisa el borde con el azul profundo. */
.pack--destacado { border-color: var(--celeste); }

.pack h3 { margin-bottom: 0.45em; }

.pack__etiqueta {
  position: absolute;
  top: -12px;
  left: 22px;
  /* Mismo celeste que el borde de la card recomendada: la etiqueta y el
     marco son la misma señal. Texto en blanco por decisión de marca
     (2026-08-14): queda en 1.9:1, por debajo de AA. Es una etiqueta
     decorativa cuyo contenido no es necesario para comprar ni para elegir,
     así que se aceptó el costo. No "corregir" sin consultar. */
  background: var(--celeste);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--radio-pill);
  padding: 5px 14px;
  box-shadow: var(--sombra-baja);
}

.pack__desc { font-size: 0.95rem; flex-grow: 1; margin-bottom: 1.3em; }

/* El precio como recompensa, no como nota al pie */
.pack__precio {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0 0 6px;
  max-width: none;
}

.pack__precio s {
  color: var(--tinta-3);
  font-family: var(--numeros);
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  text-decoration-thickness: 1.5px;
}

.pack__precio strong {
  font-family: var(--numeros);
  font-variant-numeric: tabular-nums;
  font-size: 2.05rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--tinta-titular);
}

.pack__ahorro {
  display: inline-block;
  background: var(--compra-velo);
  color: var(--compra-texto);
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: var(--radio-pill);
  padding: 4px 12px;
  margin-bottom: 12px;
  align-self: flex-start;
}

.pack__nota { font-size: 0.86rem; color: var(--tinta-3); margin-bottom: 1.4em; }

/* Selección ≠ compra: el botón de pack nunca usa el color de compra */
.pack__btn {
  width: 100%;
  background: var(--superficie);
  border-color: var(--seleccion);
  color: var(--seleccion);
}

.pack__btn:hover:not(:disabled) { background: var(--seleccion-velo); }

.pack--activo {
  border-color: var(--seleccion);
  box-shadow: 0 0 0 3px var(--seleccion-velo), var(--sombra-media);
}

.pack--activo .pack__btn { background: var(--seleccion); border-color: var(--seleccion); color: #fff; }
.pack--activo .pack__btn:hover:not(:disabled) { background: var(--seleccion-hover); }

/* Complementarios bloqueados */

.comp__aviso {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--tinta-2);
  background: var(--superficie);
  border: 1px solid var(--filete);
  border-radius: var(--radio-pill);
  padding: 10px 20px;
  margin: 0 auto 8px;
  max-width: none;
}

.comp__aviso .ico { width: 18px; height: 18px; color: var(--tinta-3); }

.comp__logrado {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--compra-texto);
  background: var(--compra-velo);
  border: 1px solid #f3d6c7;
  border-radius: var(--radio-pill);
  padding: 10px 20px;
  margin: 0 auto 8px;
  max-width: none;
}

.comp__logrado .ico { width: 18px; height: 18px; }

.pack--bloqueado {
  background: #f6f2ee;
  border-color: var(--filete);
  box-shadow: none;
}

.pack--bloqueado .pack__btn,
.pack__btn:disabled {
  background: transparent;
  border-color: var(--filete-fuerte);
  color: var(--tinta-3);
  cursor: not-allowed;
  font-size: 0.9rem;
}

/* El desbloqueo tiene que notarse, sobre todo en mobile */
@keyframes desbloqueo {
  0%   { transform: translateY(0) scale(1); box-shadow: 0 0 0 0 rgba(180, 69, 29, 0); }
  35%  { transform: translateY(-8px) scale(1.035); box-shadow: 0 0 0 8px rgba(180, 69, 29, 0.16), var(--sombra-alta); }
  70%  { transform: translateY(-2px) scale(1.008); box-shadow: 0 0 0 4px rgba(180, 69, 29, 0.09), var(--sombra-media); }
  100% { transform: translateY(0) scale(1); box-shadow: 0 0 0 0 rgba(180, 69, 29, 0), var(--sombra-baja); }
}

.pack--desbloqueando { animation: desbloqueo 0.85s var(--ease) both; border-color: var(--compra); }
.pack--desbloqueando:nth-child(2) { animation-delay: 0.09s; }
.pack--desbloqueando:nth-child(3) { animation-delay: 0.18s; }

/* Sin el tope de 68ch del párrafo base: en desktop entra en una línea. */
.packs__micro { font-size: 0.9rem; color: var(--tinta-3); margin-top: 30px; max-width: none; }

@media (min-width: 840px) {
  .packs__grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}

/* ============ Dúo: foto + texto en dos columnas ============
   El alto de la fila lo decide el texto, no el archivo de imagen. La foto
   se estira a esa altura con object-fit y un piso mínimo, así ninguna
   sección queda con una columna larga y una foto finita al lado. */

@media (min-width: 920px) {
  .tecno__grid,
  .esperar__grid,
  .centro__grid {
    align-items: stretch;
    min-height: 480px;
  }

  .tecno__media,
  .esperar__media,
  .centro__media {
    position: relative;
    min-height: 100%;
  }

  .tecno__media img,
  .esperar__media img,
  .centro__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
  }

  /* La columna de texto respira centrada frente a la foto. */
  .tecno__grid > :last-child,
  .esperar__grid > :last-child,
  .centro__grid > :last-child {
    align-self: center;
    padding: 8px 0;
  }
}

/* ============ Pantalla de gracias ============ */

.gracias { padding: calc(var(--nav-alto) + 72px) 0 96px; }
.gracias__texto { max-width: 46ch; font-size: 1.08rem; margin-bottom: 1.8em; }
.gracias__volver { margin-top: 2.4em; font-size: 0.94rem; }

/* ============ 8. Pasos ============ */

.pasos__lista {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  counter-reset: paso;
}

.paso {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  padding: 26px 0;
  border-top: 1px solid var(--filete);
  counter-increment: paso;
}

.paso:last-child { border-bottom: 1px solid var(--filete); }

.paso::before {
  content: counter(paso);
  font-family: var(--numeros);
  font-size: 1rem;
  font-weight: 800;
  color: var(--seleccion);
  background: var(--seleccion-velo);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.paso h3 { margin-bottom: 0.3em; }
.paso p { margin: 0; font-size: 0.98rem; }

/* ============ 9. Garantía ============ */

.garantia {
  background: var(--superficie);
  border: 1px solid var(--filete);
  border-radius: var(--radio);
  padding: 40px 32px;
  text-align: center;
  box-shadow: var(--sombra-media);
}

.garantia__sello {
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--compra-velo);
  color: var(--compra);
  display: grid;
  place-items: center;
}

.garantia__sello .ico { width: 30px; height: 30px; stroke-width: 1.5; }

/* El sello vira a azul cuando el pago quedó pendiente: verde de "listo"
   sobre un pago sin acreditar sería mentir con el color. */
.garantia__sello--espera {
  background: var(--seleccion-velo);
  color: var(--seleccion);
}


.garantia p { max-width: 52ch; margin-left: auto; margin-right: auto; }
.garantia p:last-child { margin-bottom: 0; }

/* ============ 10. Qué esperar ============ */

.esperar__grid { display: grid; gap: 36px; }
.esperar__media img { border-radius: var(--radio); box-shadow: var(--sombra-media); }

@media (min-width: 920px) {
  .esperar__grid { grid-template-columns: 5fr 7fr; gap: 68px; }
}

/* ============ 11. Seguinos en Instagram ============ */
/* Dúo invertido: acá la foto pesa más que el texto (7fr/5fr), porque son
   tres piezas en fila. La regla del dúo parejo no aplica: el alto de la
   tira lo fija un aspect-ratio escrito a mano (4/5), no la proporción de
   un archivo, que es lo que esa regla vino a evitar. */

.ig__grid { display: grid; gap: 30px; }

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

.ig__tira img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: var(--sombra-media);
}

/* El punto del icono de Instagram es el único relleno del sistema. */
.ig__grid .relleno { fill: currentColor; stroke: none; }

@media (min-width: 920px) {
  .ig__grid { grid-template-columns: 7fr 5fr; align-items: center; }
}

/* ============ 12. FAQ ============ */

.faq { margin-top: 40px; }

.faq details {
  background: var(--superficie);
  border: 1px solid var(--filete);
  border-radius: var(--radio-chico);
  margin-bottom: 10px;
  padding: 0 20px;
  transition: border-color 0.2s var(--ease);
}

.faq details[open] { border-color: var(--filete-fuerte); }

.faq summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--tinta);
  padding: 17px 34px 17px 0;
  list-style: none;
  position: relative;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after,
.faq summary::before {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 13px;
  height: 2px;
  border-radius: 2px;
  background: var(--seleccion);
  transition: transform 0.25s var(--ease);
}

.faq summary::before { transform: translateY(-50%) rotate(90deg); }
.faq summary::after { transform: translateY(-50%); }
.faq details[open] summary::before { transform: translateY(-50%) rotate(0deg); }

.faq details p { padding-bottom: 18px; margin: 0; font-size: 0.97rem; }

/* ============ 13. El centro ============ */

.centro__grid { display: grid; gap: 36px; }
.centro__media img { border-radius: var(--radio); box-shadow: var(--sombra-media); }

.centro__datos { list-style: none; margin: 0 0 1.7em; padding: 0; display: grid; gap: 11px; }
.centro__datos li { display: flex; align-items: center; gap: 11px; font-weight: 600; color: var(--tinta); }
.centro__datos .ico { color: var(--seleccion); }

@media (min-width: 920px) {
  .centro__grid { grid-template-columns: 5fr 7fr; gap: 68px; }
}

/* ============ 14. Cierre ============ */

.cierre { background: var(--frio); }
.cierre p { max-width: 52ch; margin-left: auto; margin-right: auto; font-size: 1.08rem; }
.cierre .btn { margin-top: 14px; }

/* ============ Footer ============ */

.footer {
  background: var(--tinta);
  color: #cdd7dd;
  padding: 40px 0 calc(40px + var(--sticky-espacio, 0px));
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 28px;
}

.footer__marca { display: flex; align-items: center; gap: 18px; }
.footer__marca img { filter: brightness(0) invert(1); opacity: 0.9; }

.footer p { margin: 0; font-size: 0.88rem; line-height: 1.5; max-width: none; }

/* Crédito de desarrollo: el logo ya viene en blanco, no lleva filtro. */
.footer__credito {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: #9fb0ba;
}

.footer__credito a { display: inline-flex; align-items: center; }

/* Mismos valores que vianova.uy: alto 11px, sin opacidad. */
.footer__credito img { height: 11px; width: auto; display: block; }

/* ============ 2. Barra sticky de compra ============ */

.sticky {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 110;
  background: var(--tinta);
  color: #fff;
  box-shadow: 0 -8px 32px rgba(22, 36, 46, 0.28);
  transform: translateY(100%);
  transition: transform 0.4s var(--ease);
}

.sticky--visible { transform: translateY(0); }

.sticky__inner {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 11px 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.sticky__info { min-width: 0; }

.sticky__resumen,
.sticky__total,
.sticky__ahorro { white-space: nowrap; }

.sticky__resumen {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #a9bac4;
  line-height: 1.25;
  max-width: none;
}

.sticky__total {
  margin: 1px 0 0;
  font-family: var(--numeros);
  font-variant-numeric: tabular-nums;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: none;
}

.sticky__ahorro {
  margin: 1px 0 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: #ffb59a;
  max-width: none;
}

.sticky__accion { flex-shrink: 0; }

.sticky__btn { padding: 14px 26px; }

/* Reaseguro donde está el pulgar, no arriba de todo */
.sticky__micro {
  margin: 0;
  padding: 8px 22px calc(11px + env(safe-area-inset-bottom));
  font-size: 0.74rem;
  line-height: 1.35;
  color: #b7c5cd;
  max-width: none;
  text-align: center;
}

.sticky__error {
  margin: 0;
  padding: 10px 22px 12px;
  background: #7c2d12;
  color: #ffe8de;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.4;
  max-width: none;
  text-align: center;
}

.sticky__error a { color: #fff; font-weight: 700; }

@media (max-width: 520px) {
  .sticky__inner { padding: 10px 16px 0; gap: 12px; }
  .sticky__total { font-size: 1.4rem; }
  .sticky__resumen { font-size: 0.72rem; }
  .sticky__ahorro { font-size: 0.76rem; }
  .sticky__btn { padding: 13px 18px; font-size: 0.95rem; min-height: 48px; }
  .sticky__micro { font-size: 0.68rem; padding: 7px 16px calc(10px + env(safe-area-inset-bottom)); }
}

/* ============ Accesibilidad: reducir movimiento ============ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .pack--desbloqueando { border-color: var(--compra); }
}

/* ============ Redes en el bloque del centro ============ */
/* Especificidad calcada de `.centro__datos li` (0,1,1), que impone su
   propio gap: por eso el selector va con li y clase juntos. */
.centro__datos li.centro__redes {
  display: flex;
  align-items: center;
  gap: 2px;
  /* Compensa el padding del primer enlace para alinear el ícono con
     el pin y el de WhatsApp de arriba. */
  margin-left: -8px;
}
.centro__datos li.centro__redes > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  transition: opacity .2s ease;
}
.centro__datos li.centro__redes > a:hover { opacity: .65; }
.centro__datos li.centro__redes .relleno { fill: currentColor; stroke: none; }