/* ═══════════════════════════════════════════════════════════════
   VENDÚ — PORTADA.  Necesita base.css cargado antes.
   ═══════════════════════════════════════════════════════════════ */

/* ── HERO ── */
header{position:relative;overflow:hidden;padding:64px 0 84px}
header::before{ /* el círculo amarillo de la pantalla de bienvenida */
  content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  background:var(--yellow);opacity:.15;right:-200px;top:-170px;pointer-events:none}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;position:relative}
/* Títulos GRUESOS: es la identidad de Vendú (el desvío deliberado de MD3). */
h1{font-size:clamp(38px,5.6vw,62px);line-height:1.03;font-weight:800;
  letter-spacing:-2.2px;text-wrap:balance}
h1 em{font-style:normal;color:var(--green-text)}
.lede{font-size:18px;color:var(--muted);margin:22px 0 20px;max-width:44ch}
/* La linea que explica POR QUE es gratis. Va antes de los botones
   para que "Donar" ya tenga sentido cuando el ojo llega a el. */
.hero-free{font-size:15px;color:var(--muted);max-width:46ch;margin:0 0 30px;
  padding-left:15px;border-left:2px solid var(--green)}
.hero-free b{color:var(--ink);font-weight:700}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
/* Tercera opcion del hero: es un enlace, no un boton. Con tres botones
   iguales ninguno gana, y aqui el que tiene que ganar es Descargar. */
.hero-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;
  color:var(--muted);text-decoration:none;padding:12px 2px;transition:color .15s ease}
.hero-link:hover{color:var(--green-text)}
.hero-link svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.hero-note{font-size:13px;color:var(--faint);margin-top:18px}
.hero-note b{color:var(--ink);font-weight:700}

/* ── TELÉFONO (capturas REALES de la app) ── */
.phone{width:290px;margin:0 auto;background:#0d0f0d;border-radius:36px;padding:8px;
  box-shadow:var(--e5),0 0 0 1px #0000001a}
.phone img{width:100%;height:auto;display:block;border-radius:29px}
.phone.tilt{transform:rotate(-2deg)}

/* ══════════════════════════════════════════════════════════════
   HERO CON IMAGEN (solo escritorio).
   La composicion trae un vacio a la izquierda hecho a proposito
   para que ahi caiga el texto. En movil ese vacio no cabe, asi que
   por debajo de 900px se vuelve al mockup, que ya es responsive.

   Se usa `contain` y no `cover`: con cover la imagen se recorta a
   lo alto y le corta el telefono. El background-color es el color
   exacto del borde de cada PNG (#FEFEFE / #010203), medido del
   archivo, para que no se vea la union entre imagen y fondo.

   Solo se descarga el PNG del tema activo: el navegador nunca pide
   un fondo cuya media query no aplica.
   ══════════════════════════════════════════════════════════════ */
/* El hero de escritorio usaba una ilustración 3D a pantalla completa
   (assets/hero-*.jpg, 1,2 MB en PNG originalmente). La sustituye el
   panel construido en HTML: pesa cero y sigue al tema solo. Los
   archivos siguen en assets/ por si se quieren para otra cosa. */

/* ── SECCIONES ── */
section{padding:88px 0}
.sec-head{max-width:60ch;margin-bottom:44px}
h2{font-size:clamp(28px,3.6vw,40px);font-weight:800;letter-spacing:-1.2px;text-wrap:balance}
.sec-head p{color:var(--muted);font-size:17px;margin-top:14px}
h3{font-size:16px;font-weight:800;letter-spacing:-.2px}

/* ── FUNCIONES ── */
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:14px}
/* Tarjeta OUTLINED: borde, SIN sombra. La regla del design system. */
.feat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  padding:22px;transition:border-color .15s ease,transform .15s ease}
.feat:hover{border-color:var(--green);transform:translateY(-2px)}
.feat .ic{width:38px;height:38px;border-radius:var(--r-sm);background:var(--green-dim);
  display:grid;place-items:center;margin-bottom:14px}
.feat .ic svg{width:19px;height:19px;stroke:var(--green-text);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.feat p{color:var(--muted);font-size:14px;margin-top:7px}
.beta{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;background:var(--green-dim);color:var(--green-text);font-size:11px;font-weight:600;vertical-align:middle}
/* Las 2 que no son verdes: en el sistema, NEGRO avisa y ROJO alarma. */
.feat.warn .ic{background:#39393914}
.feat.warn .ic svg{stroke:var(--dark)}
.feat.danger .ic{background:#ff3b3014}
.feat.danger .ic svg{stroke:var(--red-text)}
@media (prefers-color-scheme:dark){
  .feat.warn .ic{background:#ffffff14}
  .feat.warn .ic svg{stroke:#e9ece9}
}

/* Lo que acaba de salir. La etiqueta va arriba a la derecha y no
   delante del titulo para que no empuje el texto ni parta la linea.
   Se quita en la proxima version: entonces ya no es noticia. */
.feat.nuevo{position:relative;border-color:#00c62a4d}
.feat.nuevo::after{content:"Nuevo";position:absolute;top:14px;right:14px;
  font-size:10.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
  color:var(--green-text);background:var(--green-dim);
  padding:4px 9px;border-radius:var(--r-full)}
.feat.nuevo h3{padding-right:52px}

/* ── Entrada del catálogo de funciones ──
   El escalonado general de base.css reparte retardo hasta la tarjeta
   12, y aquí hay 19: de la 13 en adelante entraban todas a la vez con
   la primera, y se notaba el corte a media sección.

   El incremento baja de .05s a .035s porque son muchas: con .05s la
   última llegaba casi un segundo tarde y la sección parecía lenta. */
.feats.visible>*:nth-child(2){transition-delay:0.035s}
.feats.visible>*:nth-child(3){transition-delay:0.070s}
.feats.visible>*:nth-child(4){transition-delay:0.105s}
.feats.visible>*:nth-child(5){transition-delay:0.140s}
.feats.visible>*:nth-child(6){transition-delay:0.175s}
.feats.visible>*:nth-child(7){transition-delay:0.210s}
.feats.visible>*:nth-child(8){transition-delay:0.245s}
.feats.visible>*:nth-child(9){transition-delay:0.280s}
.feats.visible>*:nth-child(10){transition-delay:0.315s}
.feats.visible>*:nth-child(11){transition-delay:0.350s}
.feats.visible>*:nth-child(12){transition-delay:0.385s}
.feats.visible>*:nth-child(13){transition-delay:0.420s}
.feats.visible>*:nth-child(14){transition-delay:0.455s}
.feats.visible>*:nth-child(15){transition-delay:0.490s}
.feats.visible>*:nth-child(16){transition-delay:0.525s}
.feats.visible>*:nth-child(17){transition-delay:0.560s}
.feats.visible>*:nth-child(18){transition-delay:0.595s}
.feats.visible>*:nth-child(19){transition-delay:0.630s}
.feats.visible>*:nth-child(20){transition-delay:0.665s}

/* La tarjeta se levanta y el icono crece un punto. Dos cosas a la vez
   y muy poco cada una: si solo se moviera la tarjeta parecería que se
   despega, y si creciera más el icono se leería como un rebote. */
.feat{transition:border-color .18s ease,
                transform .22s cubic-bezier(.22,1,.36,1),
                box-shadow .22s ease}
.feat .ic{transition:transform .22s cubic-bezier(.22,1,.36,1),
                    background .18s ease}
.feat:hover .ic{transform:scale(1.08)}
.feat:hover .ic svg{stroke:var(--green-text)}
.feat .ic svg{transition:stroke .18s ease}

/* Las dos que avisan de algo mantienen su color al pasar por encima:
   un vencimiento no se vuelve verde porque pases el ratón. */
.feat.warn:hover{border-color:var(--amber)}
.feat.danger:hover{border-color:var(--red)}

/* ── GALERÍA ── */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px;
  align-items:start}
.shot{text-align:center}
.shot .frame{background:#0d0f0d;border-radius:26px;padding:6px;box-shadow:var(--e2)}
.shot img{width:100%;height:auto;display:block;border-radius:21px}
.shot h3{font-size:14px;margin-top:14px}
.shot p{font-size:12.5px;color:var(--muted);margin-top:3px}

/* ── PASOS ── */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:28px}
.step .n{font-size:13px;font-weight:800;color:var(--green-text);background:var(--green-dim);
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;margin-bottom:14px}
.step p{color:var(--muted);font-size:14px;margin-top:7px}

/* ── CTA ── */
.cta{text-align:center;background:linear-gradient(135deg,var(--hero-a),var(--hero-b));
  border-radius:var(--r-xl);padding:64px 32px;color:#fff;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;
  background:var(--yellow);opacity:.12;left:-110px;top:-130px}
.cta h2{color:#fff;position:relative}
.cta p{color:#ffffffb8;margin:14px auto 30px;max-width:46ch;position:relative;font-size:16px}
.cta .btn{position:relative}

/* ══════════════════════════════════════════════════════════════
   APOYO — Vendú es gratis y alguien lo paga con su tiempo.
   Va ANTES del CTA de descarga a propósito: saber que lo hace una
   persona y que el proyecto tiene rumbo da confianza justo antes
   de instalar, no después.
   ══════════════════════════════════════════════════════════════ */
/* Borde verde: el mismo acento que usa .feat:hover. Sin el, la tarjeta
   se funde con el fondo y la seccion pasa desapercibida. */
.apoyo{display:grid;grid-template-columns:1.12fr .88fr;
  background:var(--surface);border:1px solid var(--green);
  border-radius:var(--r-xl);overflow:hidden}
.apoyo-txt{padding:44px 40px}
.apoyo-txt h2{font-size:clamp(24px,3vw,31px)}
.apoyo-txt>p{color:var(--muted);font-size:15.5px;margin-top:14px;max-width:44ch}
.apoyo-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.apoyo-nota{font-size:12.5px;color:var(--faint);margin-top:16px;max-width:42ch}

/* Columna derecha: la prueba de que el roadmap no es decorativo. */
.apoyo-next{background:var(--surface2);padding:44px 36px;border-left:1px solid var(--border)}
.next-label{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;
  letter-spacing:.5px;color:var(--green-text);margin-bottom:20px}
.next-list{list-style:none;display:grid;gap:14px}
.next-list li{display:flex;gap:11px;align-items:flex-start;font-size:14px;font-weight:700}
.next-list li i{flex-shrink:0;width:15px;height:15px;border-radius:50%;
  border:2px solid var(--green);margin-top:3px;font-style:normal}
.next-list li small{display:block;color:var(--muted);font-size:12.5px;
  font-weight:400;margin-top:2px}
.next-mas{display:inline-block;margin-top:24px;font-size:13.5px;font-weight:700;
  color:var(--green-text);text-decoration:none}
.next-mas:hover{text-decoration:underline}

@media (max-width:820px){
  .apoyo{grid-template-columns:1fr;border-radius:var(--r-lg)}
  .apoyo-txt{padding:34px 26px}
  .apoyo-next{border-left:0;border-top:1px solid var(--border);padding:32px 26px}
}

/* ══════════════════════════════════════════════════════════════
   MODAL DE APOYO — mismo que en /roadmap: Ko-fi sin salir del sitio.
   El iframe se carga al abrir, nunca antes.
   ══════════════════════════════════════════════════════════════ */
.modal{position:fixed;inset:0;z-index:100;display:grid;padding:20px;
  place-items:center;overscroll-behavior:contain;
  visibility:hidden;opacity:0;pointer-events:none;
  transition:opacity .22s ease,visibility .22s ease}
.modal.open{visibility:visible;opacity:1;pointer-events:auto}
.modal-bg{position:absolute;inset:0;background:#000000a8;backdrop-filter:blur(3px);
  border:0;padding:0;cursor:pointer}
.modal-card{position:relative;width:100%;max-width:452px;max-height:92vh;
  display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-xl);
  overflow:hidden;box-shadow:var(--e5);
  opacity:0;translate:0 14px;scale:.98;
  transition:opacity .22s ease,translate .22s cubic-bezier(.22,1,.36,1),scale .22s cubic-bezier(.22,1,.36,1)}
.modal.open .modal-card{opacity:1;translate:none;scale:1}
.modal-head{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:17px 20px;border-bottom:1px solid var(--border);flex-shrink:0}
.modal-head h3{font-size:15px;letter-spacing:-.2px}
.modal-head p{font-size:12.5px;color:var(--muted);margin-top:2px}
.modal-x{flex-shrink:0;width:32px;height:32px;border-radius:50%;border:0;cursor:pointer;
  background:var(--surface2);color:var(--muted);display:grid;place-items:center;
  transition:background .15s ease,color .15s ease}
.modal-x:hover{background:var(--border);color:var(--ink)}
.modal-x:focus-visible{outline:2px solid var(--green-text);outline-offset:2px}
.modal-x svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;fill:none}
.modal-body{flex:1;min-height:0;background:#f9f9f9}
#kofiframe{display:block;width:100%;height:640px;max-height:100%;border:0}
.modal-foot{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;padding:12px 20px;border-top:1px solid var(--border);
  font-size:12px;color:var(--faint)}
.modal-foot a{color:var(--muted);font-weight:600;text-decoration:none}
.modal-foot a:hover{color:var(--green-text);text-decoration:underline}
@media (max-width:520px){
  .modal{padding:0}
  .modal-card{max-width:none;max-height:100vh;height:100vh;border:0;border-radius:0}
  #kofiframe{height:100%}
}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:44px;text-align:center}
  .lede{margin-left:auto;margin-right:auto}
  .hero-cta{justify-content:center}
  .phone.tilt{transform:none}
  }
@media (max-width:480px){section{padding:62px 0}.phone{width:260px}}

/* ═══════════════════════════════════════════════════════════════
   VENDÚ — ROADMAP.  Necesita base.css cargado antes.
   ═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   Mismos tokens que index.html y privacidad. Esta página no
   inventa identidad: extiende la que ya existe.
   ══════════════════════════════════════════════════════════════ */
/* ── CABECERA DE SUBPÁGINA ── */

/* El roadmap traia su propia escala de cuando era pagina aparte.
   Ahora es una seccion mas y sigue el ritmo general: solo se conserva
   lo que de verdad es suyo. */

/* ══════════════════════════════════════════════════════════════
   APOYO — el bloque de donaciones.
   Va ARRIBA del roadmap a propósito: primero se ve qué se está
   construyendo con el dinero, y el roadmap de abajo es la prueba.
   ══════════════════════════════════════════════════════════════ */

/* Monto recibido. Sin meta a propósito: no se promete un número
   al que llegar, solo se muestra lo que de verdad ha entrado.
   La cifra la pinta el JS de config, no se escribe a mano. */

/* En qué se va el dinero. Sin esto la barra es solo un pedido. */

/* ══════════════════════════════════════════════════════════════
   ROADMAP — trimestres.
   Regla de honestidad: solo el trimestre EN CURSO lleva detalle
   fino. Lo de más adelante va en grueso, porque prometer una
   fecha exacta a 6 meses es mentir con calendario.
   ══════════════════════════════════════════════════════════════ */

/* Hecho */

/* En construcción */

/* Pendiente */

/* ══════════════════════════════════════════════════════════════
   CHANGELOG — lo que YA cambió. Es el contrapeso del roadmap:
   uno promete, el otro demuestra.
   ══════════════════════════════════════════════════════════════ */

/* ── PEDIR ALGO ── */

/* ══════════════════════════════════════════════════════════════
   MODAL DE APOYO.
   El panel de Ko-fi vive dentro de una ventana con NUESTRA marca,
   no incrustado suelto en la página: así el sitio no cambia de
   cara a media lectura. El iframe se carga al abrir, nunca antes.
   ══════════════════════════════════════════════════════════════ */
/* Cerrado usa visibility, no display: así se puede animar la salida y,
   de paso, visibility:hidden saca del tabulador todo lo de adentro. */

/* Ko-fi sirve su panel en claro. Se deja el fondo claro a propósito
   para que el iframe no quede flotando sobre un hueco oscuro. */

/* ── FOOTER ── */

/* ═══════════════════════════════════════════════════════════════
   PASE DE ACABADO

   Va al final a propósito: son ajustes sobre lo que ya está definido
   arriba, y separarlos deja ver de un vistazo qué se cambió del
   diseño original sin tener que perseguirlo por todo el archivo.
   ═══════════════════════════════════════════════════════════════ */

/* Más aire entre secciones. Con todo en una sola página, el respiro
   es lo que separa un bloque del siguiente: sin él la página se lee
   como una lista larga y no como secciones distintas. */
section{padding:104px 0}
.sec-head{max-width:58ch;margin-bottom:48px}
@media (max-width:820px){section{padding:74px 0}.sec-head{margin-bottom:36px}}

/* Tarjetas: menos borde y más profundidad.
   El borde de 1px en todo dibuja una rejilla de cajas; con la sombra
   apenas insinuada las tarjetas flotan y el ojo sigue el contenido. */
.feat,.feat:hover,
@media (prefers-color-scheme:dark){
  /* En oscuro la sombra no se ve: ahí el borde sí hace falta para
     despegar la tarjeta del fondo. */
  .feat,  .feat:hover,}

/* Títulos de sección más contenidos.
   Estaban en 44px con peso 800 y -1.6 de tracking: a ese tamaño el
   titular compite con el h1 del hero y cada sección parece el
   principio de otra página. Bajado el cuerpo y el peso, la jerarquía
   vuelve a leerse — el hero manda, las secciones acompañan.

   Y sin rótulo encima: rótulo + titular enorme + párrafo eran tres
   capas diciendo lo mismo antes de llegar al contenido. */
h2{font-size:clamp(25px,2.6vw,32px);font-weight:700;letter-spacing:-.7px;
  line-height:1.18}
.sec-head{max-width:52ch}
/* Una línea, no un párrafo. Lo que se explicaba aquí ya lo demuestra
   lo que viene justo debajo. */
.sec-head p{font-size:16.5px;line-height:1.55;margin-top:10px;
  color:var(--muted);max-width:46ch;text-wrap:pretty}

/* ── HERO, segunda versión ──────────────────────────────────────
   Menos texto y una sola jerarquía. Antes había cinco bloques
   apilados (rótulo, titular, entradilla, párrafo de "es gratis" y
   nota al pie) antes de que el ojo llegara al botón. */
.hero-txt{min-width:0}
h1{font-size:clamp(33px,4.4vw,52px);font-weight:800;letter-spacing:-1.6px;
  line-height:1.06;text-wrap:balance}
.lede{font-size:18px;line-height:1.55;color:var(--muted);margin:20px 0 30px;
  max-width:40ch}

/* ── La prueba, en cifras ──
   Tres datos comprobables en lugar de tres adjetivos. El número va
   grande y la etiqueta pequeña debajo: se leen de un vistazo, que es
   todo el tiempo que tienen. */
.hero-datos{display:flex;gap:34px;flex-wrap:wrap;margin-top:34px;
  padding-top:26px;border-top:1px solid var(--border)}
.hero-datos div{min-width:0}
.hero-datos dt{font-size:25px;font-weight:800;letter-spacing:-1px;
  color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1}
.hero-datos dd{margin:5px 0 0;font-size:13px;color:var(--muted);
  line-height:1.35;max-width:15ch}

@media (max-width:900px){
  .hero-datos{justify-content:center;gap:26px}
  .hero-datos dd{margin-left:auto;margin-right:auto}
  .lede{margin-left:auto;margin-right:auto}
}
@media (max-width:420px){
  .hero-datos{gap:20px}
  .hero-datos dt{font-size:21px}
  .hero-datos dd{font-size:12px}
}

/* ═══════════════════════════════════════════════════════════════
   HERO — composición de la referencia, color de Vendú

   Degradado a sangre, nav encima sin barra propia, titular centrado
   y el teléfono cortado por el borde inferior.

   El degradado va claro arriba y profundo abajo, como en la
   referencia, pero con los verdes REALES de la tarjeta "Cobrado hoy"
   del panel: quien viene del teléfono reconoce el color.
   ═══════════════════════════════════════════════════════════════ */
.hero3{
  position:relative;overflow:hidden;text-align:center;
  /* A pantalla completa, con el contenido centrado en vertical. Con
     `min-height` y no `height`: si el texto crece (traducción larga,
     letra grande del sistema), la sección crece con él en vez de
     recortarlo. */
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:0;
  /* Degradado con el mismo recorrido que la referencia: arriba claro y
     poco saturado, abajo profundo y lleno. El anterior salía saturado
     desde el principio y se apagaba, que es justo al revés.

     Los verdes son los de la marca: arriba el #00C62A rebajado y
     aclarado, abajo el #00432A de la tarjeta "Cobrado hoy" del panel.

     La segunda capa es la arista diagonal que la referencia tiene a la
     izquierda; aquí va en el verde de marca al 12%, apenas insinuada. */
  background:
    linear-gradient(106deg, #00c62a1f 0%, #00c62a0a 34%, transparent 58%),
    linear-gradient(180deg,
      #3FAE79  0%,
      #219B63 15%,
      #078850 34%,
      #00733F 56%,
      #005B33 78%,
      #00402400 100%),
    #004024;
  color:#fff}

/* Textura muy tenue, para que el degradado no se vea plano. En la
   referencia ese papel lo hace una foto de ciudad desvanecida; aquí,
   hasta que haya una foto de una tienda de verdad, lo hace la luz. */
/* La foto de la tienda, debajo del degradado.
   Va MUY apagada (12%) y en escala de grises: a color, el amarillo del
   delantal y la madera pelean con el verde de marca. En gris solo
   aporta lo que tiene que aportar — textura y la sensación de que
   detrás hay un negocio de verdad, no un fondo de plantilla.

   El encuadre se corre a la derecha para que la cara no quede debajo
   del titular: una cara detrás del texto se lleva la mirada. */
.hero3::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:image-set(
    url('/vendu/assets/tienda.webp') type('image/webp'),
    url('/vendu/assets/tienda.jpg')  type('image/jpeg'));
  background-size:cover;background-position:50% 50%;
  filter:grayscale(1) contrast(1.06);
  /* Sin mix-blend-mode. Con `luminosity` la foto imponía su luz sobre
     el degradado y la cara salía mucho más presente de lo que sugiere
     un 12%: el hero quedaba cargado a la izquierda, con la mirada de
     ella compitiendo con el titular.

     La foto además se recortó a la banda del mostrador y se dejó fuera
     a la persona. Un fondo es textura; un retrato crea un punto focal
     que discute con el titular, y por eso el bloque entero se veía
     descentrado aunque la maquetación estuviera centrada. La
     referencia hace lo mismo: su fondo es una ciudad, no una cara. */
  opacity:.11}

/* Luz encima de la foto, para que el degradado no se vea plano. */
.hero3::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(1100px 620px at 50% -8%, #ffffff26 0%, transparent 62%),
    radial-gradient(760px 520px at 12% 108%, #00c62a26 0%, transparent 66%)}
.hero3>*{position:relative;z-index:2}

/* ── El contenido ── */
.hero3-in{padding:96px 24px 0;max-width:1000px}

/* Titular al patrón de la referencia: grande, blanco puro, dos
   líneas centradas y muy juntas.
   El tracking sube de -2px a -.6px. Vendú aprieta mucho sus títulos, y
   a este tamaño esa compresión hace que las palabras se peguen y la
   frase pierda el aire que tiene el modelo. */
.hero3 h1{font-size:clamp(36px,6vw,68px);font-weight:800;letter-spacing:-.6px;
  line-height:1.14;margin:0;color:#fff;text-wrap:balance}

/* El subtítulo va más grande y más blanco que antes: en la referencia
   se lee de corrido bajo el titular, no como una nota al pie. */
.hero3 p{font-size:clamp(17px,2vw,20px);color:#ffffffed;margin:26px auto 0;
  max-width:52ch;line-height:1.5;font-weight:400}

/* Insignia de tienda. Una sola: Vendú es solo Android, y poner
   también la de App Store sería prometer algo que no existe. */
/* ── Insignia de Google Play ──
   El archivo es el oficial y no se toca: ni color, ni proporciones, ni
   los elementos de dentro. Aquí solo se le da altura y sitio.

   Google pide un cuarto de la altura de espacio libre alrededor: con
   46px de alto son ~12px, que es de donde sale el margen. */
.play{display:inline-block;line-height:0;margin:36px 12px 0;
  transition:transform .15s cubic-bezier(.22,1,.36,1),box-shadow .15s ease}
.play img{display:block;height:46px;width:auto}
.play:active{transform:translateY(0)}
.play:focus-visible{outline:2px solid #fff;outline-offset:5px}

@media (max-width:520px){.play img{height:42px}}

/* ── El teléfono asomando ──
   Se corta por el borde inferior a propósito: es lo que invita a
   bajar. El margen negativo es menor que su altura, así que siempre
   queda un trozo dentro. */

/* Solo asoma la punta del teléfono; el resto se hunde en la sección
   siguiente, como en la referencia. El relleno de aquí abajo es lo
   que se ve de degradado bajo el teléfono: poco, o el hero se estira
   sin necesidad. */
/* Aire abajo para que la insignia no quede pegada al borde ni el
   teléfono se le monte encima al subir desde la sección siguiente. */
.hero3{padding-bottom:120px}

@media (max-width:900px){
  .nav3-links{display:none}
  .hero3-in{padding-top:72px}
  .hero3{padding-bottom:150px}
}
@media (max-width:420px){
  .nav3{padding:13px 0}
  .hero3-in{padding-top:72px}
  .hero3{padding-bottom:150px}
}
@media (prefers-reduced-motion:reduce){
  .nav3,.play{transition:none}
}

/* ═══════════════════════════════════════════════════════════════
   DESTACADOS — cuatro razones alrededor del teléfono

   El teléfono cruza el borde entre el hero y esta sección. Vive aquí
   y sube con margen negativo: dentro del hero se recortaba, porque
   aquel lleva overflow:hidden para el degradado y la foto.
   ═══════════════════════════════════════════════════════════════ */
.destacados{padding:0 0 84px;position:relative}

.dst-grid{display:grid;grid-template-columns:1fr auto 1fr;
  gap:0 52px;align-items:center}

.dst-tel{width:264px;
  /* Sube hasta la banda verde. Menos que su alto, así que siempre
     queda la mayor parte dentro de esta sección. */
  margin:-150px 0 0;position:relative;z-index:2}
.dst-tel img{display:block;width:100%;height:auto;
  /* La sombra sigue la silueta del png en vez de dibujar una caja:
     el mockup ya trae su propio marco y sus esquinas redondeadas. */
  filter:drop-shadow(0 26px 44px #00000038)}

.dst-col{display:flex;flex-direction:column;gap:46px;padding-top:52px}
.dst{max-width:30ch}
.dst-izq{text-align:right;margin-left:auto}
.dst-der{text-align:left;margin-right:auto}

/* El icono es de trazo y hereda el color: así basta cambiar el color
   del bloque para que icono y título vayan a juego. */
.dst-ic{display:block;margin-bottom:11px}
.dst-izq .dst-ic{text-align:right}
.dst-ic svg{width:30px;height:30px;fill:none;stroke:var(--green);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.destacados h3{font-size:17.5px;font-weight:800;letter-spacing:-.35px;
  margin-bottom:7px;color:var(--ink)}
.dst p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0;
  text-wrap:pretty}

/* ── Pantallas medianas y estrechas ──
   El teléfono pasa arriba y las cuatro razones van debajo en dos
   columnas. Apilarlas en una sola dejaría la página larguísima. */
@media (max-width:1000px){
  .dst-grid{grid-template-columns:1fr 1fr;gap:44px 40px}
  .dst-tel{grid-column:1 / -1;justify-self:center;width:228px;margin:-130px auto 10px}
  .dst-col{padding-top:0;gap:44px}
  .dst-izq,.dst-der{text-align:left;margin:0;max-width:none}
  .dst-izq .dst-ic{text-align:left}
}
@media (max-width:620px){
  .destacados{padding-bottom:66px}
  .dst-grid{grid-template-columns:1fr;gap:38px}
  .dst-tel{width:196px;margin:-110px auto 8px}
  .dst-col{gap:38px}
}

/* ═══════════════════════════════════════════════════════════════
   ENTRADA DEL HERO

   Una secuencia, no cuatro efectos sueltos: el titular entra palabra
   por palabra, y detrás van el subtítulo, la insignia y el teléfono,
   cada uno cuando el anterior ya está. Leído de arriba abajo, que es
   como se mira.

   Todo en CSS y no en JS: las animaciones corren al cargar aunque el
   script falle. El JS solo reparte el retardo entre las palabras; si
   no llega, el titular entra de una pieza y no pasa nada.
   ═══════════════════════════════════════════════════════════════ */
@keyframes sube{
  from{opacity:0;transform:translateY(18px)}
  to  {opacity:1;transform:none}
}
@keyframes asoma{
  from{opacity:0;transform:translateY(34px) scale(.985)}
  to  {opacity:1;transform:none}
}

.hero3 h1,.hero3 .lede,.hero3 p,.play{animation:sube .75s cubic-bezier(.22,1,.36,1) both}
.hero3 h1{animation-delay:.05s}
.hero3 p {animation-delay:.42s}
.play    {animation-delay:.56s}
.dst-tel {animation:asoma .9s .68s cubic-bezier(.22,1,.36,1) both}

/* Con JS el titular se parte en palabras y cada una entra un poco
   después que la anterior. El retardo lo pone el script en --i. */
.hero3 h1.porpalabras{animation:none}
.hero3 h1 .pal{display:inline-block;
  animation:sube .68s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(.05s + var(--i) * .045s)}

/* ── La insignia ──
   Ya flota un poco en reposo: un botón que solo se mueve al pasar por
   encima parece que se enciende, y uno que ya estaba levantado parece
   que se puede tocar. */
/* Sin recorte ni reflejo.
   El brillo que cruzaba necesitaba `overflow:hidden`, y eso recortaba
   las esquinas PROPIAS del badge —que ya trae su forma redondeada con
   su borde claro— dejándolas mordidas.

   Tampoco encajaba con las normas de Google: su guía prohíbe ajustar
   el badge de cualquier manera, y pasarle un destello por encima es
   ajustarlo. Queda el levantar y la sombra, que no lo tocan. */
.play{position:relative;
  /* La sombra sigue la silueta del svg, no una caja recta. */
  filter:drop-shadow(0 10px 18px #00000045);box-shadow:none;
  transition:transform .22s cubic-bezier(.22,1,.36,1),filter .22s ease}
.play:hover{transform:translateY(-3px);filter:drop-shadow(0 16px 26px #0000005c)}
.play:active{transform:translateY(-1px);filter:drop-shadow(0 8px 14px #00000045)}

@media (prefers-reduced-motion:reduce){
  .hero3 h1,.hero3 h1 .pal,.hero3 p,.play,.dst-tel{animation:none}
  .play:hover::after{animation:none}
  .play{transition:none}
}

/* ═══════════════════════════════════════════════════════════════
   BANDA DE CIFRAS
   ═══════════════════════════════════════════════════════════════ */
.cifras{padding:0 0 96px}
.cifras-caja{position:relative;overflow:hidden;border-radius:26px;
  padding:56px 44px;
  background:linear-gradient(118deg,#00A85C 0%,#00934F 38%,#007A42 72%,#006338 100%)}

/* Las ondas se estiran a lo ancho del bloque: por eso el
   preserveAspectRatio="none" del svg. Deformarlas es intencionado —
   son textura, y así siempre cruzan la banda de lado a lado sea cual
   sea el ancho. */
.cifras-ondas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

.cifras-grid{position:relative;display:grid;
  grid-template-columns:repeat(4,1fr);gap:32px 24px;margin:0}

/* Centradas, no alineadas a la izquierda.
   Los números miden cosas muy distintas — "1,000+" contra "8" — y a
   la izquierda cada columna arranca donde le toca al número: el
   bloque queda dentado y se lee descuidado. Centrado, el eje de cada
   columna es el mismo y las cuatro se leen como una serie. */
.cifras-grid>div{text-align:center;display:flex;flex-direction:column;
  align-items:center}

.cifras-grid dt{font-size:clamp(36px,4.4vw,54px);font-weight:800;letter-spacing:-1.8px;
  line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.cifras-grid dd{margin:13px 0 0;font-size:14px;line-height:1.5;
  color:#ffffffd1;max-width:19ch;text-wrap:balance}

@media (max-width:900px){
  .cifras{padding-bottom:70px}
  .cifras-caja{padding:42px 30px;border-radius:22px}
  .cifras-grid{grid-template-columns:1fr 1fr;gap:34px 26px}
}
@media (max-width:520px){
  .cifras-caja{padding:34px 24px}
  .cifras-grid{grid-template-columns:1fr;gap:26px}
  .cifras-grid dd{max-width:none;margin-top:8px}
}

/* Cada icono se ve solo en su tema. Se declaran los dos casos —el del
   sistema y el elegido a mano— porque son estados distintos. */
.ico-sol{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ico-sol{display:block}
  :root:not([data-theme="light"]) .ico-luna{display:none}
}
:root[data-theme="dark"] .ico-sol{display:block}
:root[data-theme="dark"] .ico-luna{display:none}
:root[data-theme="light"] .ico-sol{display:none}
:root[data-theme="light"] .ico-luna{display:block}

.nav3.pegado .tema{background:var(--surface2);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--border)}
.nav3.pegado .tema:hover{background:var(--border)}
.nav3.pegado .tema:focus-visible{outline-color:var(--green-text)}

@media (max-width:900px){.tema{margin-left:auto}}

/* ── Vida en la banda de cifras ──
   Las ondas se mecen muy despacio, cada una a su ritmo y en sentido
   contrario a la de al lado. Con todas al mismo compás no se vería
   agua: se vería una sola forma desplazándose.

   Van y vuelven (alternate) en vez de dar la vuelta: un bucle exigiría
   que el dibujo encajara consigo mismo por los bordes, y el corte se
   nota siempre. Al ir y volver no hay costura que disimular.

   Los tiempos son primos entre sí —23, 31, 19, 37, 27— para que las
   cinco tarden muchísimo en volver a coincidir. Si coincidieran, el
   ojo detectaría el patrón y dejaría de leerse como movimiento
   natural. */
.cifras-ondas path{will-change:transform}
.o1{animation:mece 23s ease-in-out infinite alternate}
.o2{animation:mece 31s ease-in-out infinite alternate-reverse}
.o3{animation:mece 19s ease-in-out infinite alternate-reverse}
.o4{animation:mece 37s ease-in-out infinite alternate}
.o5{animation:mece 27s ease-in-out infinite alternate-reverse}
@keyframes mece{
  from{transform:translateX(-26px)}
  to  {transform:translateX(26px)}
}

/* El degradado respira: se desplaza muy poco y muy lento, lo justo
   para que la caja no se lea como un rectángulo pintado. */
.cifras-caja{background-size:150% 150%;
  animation:respira 26s ease-in-out infinite alternate}
@keyframes respira{
  from{background-position:0% 50%}
  to  {background-position:100% 50%}
}

/* Un brillo tenue arriba a la izquierda, de donde vendría la luz. */
.cifras-caja::before{content:"";position:absolute;pointer-events:none;
  width:70%;height:150%;left:-10%;top:-60%;border-radius:50%;
  background:radial-gradient(circle,#ffffff1a 0%,transparent 62%)}

@media (prefers-reduced-motion:reduce){
  .cifras-ondas path,.cifras-caja{animation:none}
}

/* ═══════════════════════════════════════════════════════════════
   CARRUSEL DE PANTALLAS
   ═══════════════════════════════════════════════════════════════ */
.pantallas{padding:92px 0 88px;overflow:hidden}
.pantallas .sec-head{max-width:46ch}

.car{position:relative;margin-top:14px}

/* Sin JS: fila con desplazamiento y anclaje, que ya es un carrusel
   usable con el dedo. El JS le añade las flechas y el escalonado. */
.car-pista{display:flex;align-items:center;gap:22px;margin:0;padding:30px 0 6px;
  list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none}
.car-pista::-webkit-scrollbar{display:none}
.car-item{flex:0 0 auto;width:172px;scroll-snap-align:center}

.car-item figure{margin:0}
.car-item img{display:block;width:100%;height:auto;border-radius:18px;
  background:var(--surface2);
  box-shadow:0 6px 14px #00000012,0 2px 5px #0000000d;
  transition:box-shadow .35s ease}

.car-item figcaption{margin-top:20px;text-align:center;
  opacity:0;transition:opacity .3s ease}
.car-item figcaption b{display:block;font-size:14.5px;font-weight:800;
  letter-spacing:-.3px;color:var(--ink)}
.car-item figcaption span{display:block;font-size:12.5px;color:var(--muted);
  margin-top:3px;line-height:1.45}

/* ── Con JS ──
   La pista deja de desplazarse y se mueve con transform: así se puede
   escalar y atenuar cada pantalla según lo lejos que esté del centro,
   que es lo que da la profundidad. */
.car.vivo .car-pista{overflow:visible;justify-content:center;
  transition:transform .5s cubic-bezier(.22,1,.36,1)}
.car.vivo .car-item{transition:transform .5s cubic-bezier(.22,1,.36,1),
  opacity .5s ease,filter .5s ease}

/* Cuanto más lejos del centro, más pequeña y más apagada. */
.car.vivo .car-item{transform:scale(.82);opacity:.34;filter:saturate(.5)}
.car.vivo .car-item[data-cerca]{transform:scale(.9);opacity:.62;filter:saturate(.8)}
.car.vivo .car-item[data-activa]{transform:scale(1.2);opacity:1;filter:none;
  position:relative;z-index:2}
.car.vivo .car-item[data-activa] img{box-shadow:0 22px 44px #0000002e,0 8px 16px #00000017}
.car.vivo .car-item[data-activa] figcaption{opacity:1;
  /* La tarjeta activa está escalada a 1.2, así que su pie también.
     Se compensa al revés para que el texto mida lo mismo que en las
     demás y no salte de tamaño al cambiar de pantalla. */
  transform:scale(.833);transform-origin:top center}

/* ── Flechas ── */
.car-flecha{position:absolute;top:44%;z-index:4;translate:0 -50%;
  width:46px;height:46px;display:grid;place-items:center;padding:0;
  border:1px solid var(--border);border-radius:50%;cursor:pointer;
  background:var(--surface);color:var(--ink);
  box-shadow:0 4px 12px #00000014;
  transition:transform .18s cubic-bezier(.22,1,.36,1),background .18s ease}
.car-flecha svg{width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.car-flecha:hover{background:var(--surface2);transform:translateY(-50%) scale(1.07)}
.car-flecha:active{transform:translateY(-50%) scale(.95)}
.car-flecha:focus-visible{outline:2px solid var(--green-text);outline-offset:3px}
.car-flecha[disabled]{opacity:.3;cursor:default;pointer-events:none}
.car-ant{left:0}
.car-sig{right:0}
/* Sin JS no hacen nada: no se enseñan. */
.car:not(.vivo) .car-flecha{display:none}

/* ── Puntos ── */
.car-puntos{display:flex;justify-content:center;gap:9px;margin-top:26px}
.car-puntos button{width:8px;height:8px;padding:0;border:0;border-radius:50%;
  background:var(--border2);cursor:pointer;
  transition:background .2s ease,width .2s cubic-bezier(.22,1,.36,1)}
.car-puntos button:hover{background:var(--muted)}
.car-puntos button[aria-selected="true"]{background:var(--green);width:24px;
  border-radius:999px}
.car-puntos button:focus-visible{outline:2px solid var(--green-text);outline-offset:3px}

@media (max-width:760px){
  .pantallas{padding:70px 0}
  .car-item{width:142px}
  .car-flecha{width:40px;height:40px}
  .car.vivo .car-item[data-activa]{transform:scale(1.1)}
}
@media (prefers-reduced-motion:reduce){
  .car.vivo .car-pista,.car.vivo .car-item,.car-flecha,.car-puntos button{
    transition:none}
}

/* ═══════════════════════════════════════════════════════════════
   NOVEDADES — modal y burbuja
   ═══════════════════════════════════════════════════════════════ */

/* ── La burbuja ──
   Abajo a la derecha, donde todo el mundo busca este tipo de botón.
   Nace redonda y se ensancha al pasar por encima para enseñar de qué
   es: así no ocupa sitio en reposo pero tampoco hay que adivinarlo. */
.nov-burbuja{position:fixed;right:20px;bottom:20px;z-index:70;
  display:flex;align-items:center;gap:0;
  height:54px;padding:0 15px;border:0;border-radius:999px;cursor:pointer;
  background:var(--green);color:#00230D;
  box-shadow:0 8px 22px #00000030,0 2px 6px #0000001f;
  transition:gap .28s cubic-bezier(.22,1,.36,1),
             padding .28s cubic-bezier(.22,1,.36,1),
             transform .18s cubic-bezier(.22,1,.36,1),
             box-shadow .18s ease}
.nov-burbuja svg{width:24px;height:24px;flex:none;fill:currentColor}
.nov-burbuja-txt{max-width:0;overflow:hidden;white-space:nowrap;
  font-size:14.5px;font-weight:700;
  transition:max-width .28s cubic-bezier(.22,1,.36,1)}
.nov-burbuja:hover,.nov-burbuja:focus-visible{gap:9px;padding:0 20px 0 15px}
.nov-burbuja:hover .nov-burbuja-txt,
.nov-burbuja:focus-visible .nov-burbuja-txt{max-width:190px}
.nov-burbuja:hover{transform:translateY(-2px);box-shadow:0 12px 28px #0000003d}
.nov-burbuja:active{transform:translateY(0)}
.nov-burbuja:focus-visible{outline:2px solid var(--green-text);outline-offset:3px}

/* El punto rojo solo mientras no se haya leído: una vez visto, deja
   de haber novedad que anunciar. Lo quita el js. */
.nov-punto{position:absolute;top:11px;right:13px;width:10px;height:10px;
  border-radius:50%;background:var(--red);
  box-shadow:0 0 0 2.5px var(--green);
  animation:late 2s ease-in-out infinite}
.nov-burbuja.leido .nov-punto{display:none}

/* ── El modal ── */
.nov-modal[hidden]{display:none}
.nov-modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  padding:24px}
.nov-fondo{position:absolute;inset:0;background:#00150cbf;
  backdrop-filter:blur(3px);animation:aparece .25s ease both}
@keyframes aparece{from{opacity:0}to{opacity:1}}

.nov-caja{position:relative;width:min(560px,100%);max-height:86vh;overflow-y:auto;
  background:var(--surface);border-radius:var(--r-xl);
  padding:38px 36px 30px;
  box-shadow:0 30px 70px #00000047,0 0 0 1px var(--border);
  animation:entramodal .34s cubic-bezier(.22,1,.36,1) both}
@keyframes entramodal{
  from{opacity:0;transform:translateY(20px) scale(.97)}
  to  {opacity:1;transform:none}
}

.nov-x{position:absolute;top:16px;right:16px;width:36px;height:36px;padding:0;
  display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  background:var(--surface2);color:var(--muted);
  transition:background .16s ease,color .16s ease}
.nov-x svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round}
.nov-x:hover{background:var(--border);color:var(--ink)}
.nov-x:focus-visible{outline:2px solid var(--green-text);outline-offset:2px}

.nov-cab{margin-bottom:26px;padding-right:34px}
.nov-tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--green-text);background:var(--green-dim);
  padding:5px 11px;border-radius:999px;margin-bottom:14px}
.nov-caja h2{font-size:25px;font-weight:800;letter-spacing:-.8px;line-height:1.15}
.nov-cab p{margin-top:9px;font-size:15px;color:var(--muted)}

.nov-lista{display:flex;flex-direction:column;gap:20px}
.nov{display:grid;grid-template-columns:auto 1fr;gap:15px;align-items:start}
.nov-ic{display:grid;place-items:center;width:40px;height:40px;flex:none;
  border-radius:var(--r-md);background:var(--green-dim)}
.nov-ic svg{width:20px;height:20px;fill:none;stroke:var(--green-text);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nov h3{font-size:16px;font-weight:800;letter-spacing:-.3px;margin-bottom:4px}
.nov p{font-size:14.5px;line-height:1.55;color:var(--muted);margin:0;
  text-wrap:pretty}

.nov-pie{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px;
  padding-top:22px;border-top:1px solid var(--border)}

@media (max-width:560px){
  .nov-caja{padding:30px 22px 24px}
  .nov-caja h2{font-size:21px}
  .nov-burbuja{right:14px;bottom:14px;height:50px}
  .nov-pie .btn{flex:1 1 auto;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .nov-fondo,.nov-caja{animation:none}
  .nov-burbuja,.nov-burbuja-txt{transition:none}
  .nov-punto{animation:none}
}

/* ═══════════════════════════════════════════════════════════════
   RESEÑAS — una a la vez, en horizontal

   El intento anterior las ponía en fila de tres. No funcionaba: van
   de 9 caracteres ("Muy buena") a 300, y en una fila de flex todas
   crecen hasta la más alta — las cortas quedaban como cajas verticales
   medio vacías.

   De una en una, cada cual ocupa lo suyo. Y en horizontal el texto
   dispone de todo el ancho, así que baja de diez líneas a tres o
   cuatro: la sección deja de verse alargada.
   ═══════════════════════════════════════════════════════════════ */
.resenas-sec{padding:0 0 96px}

/* La caja se sale de la medida del resto de la página.
   Con los 1080px del `.wrap` general quedaba estrecha y la reseña
   dentro se veía comprimida contra los bordes. Aquí el contenido es
   una sola tarjeta ancha: puede permitirse más sitio. */
.resenas-sec .wrap{max-width:1320px}

/* Los bordes se desvanecen hacia los lados en vez de cortar en seco:
   así el bloque se posa sobre la página en lugar de recortarse contra
   ella, que es lo que le daba el aire de caja apretada. */
.res-caja{position:relative;border-radius:36px;padding:56px 64px 44px;
  background:
    radial-gradient(120% 90% at 8% 0%,    #00c62a1f 0%, transparent 58%),
    radial-gradient(110% 90% at 96% 100%, #fbfb001a 0%, transparent 56%),
    linear-gradient(90deg,
      color-mix(in srgb, var(--surface2) 30%, transparent) 0%,
      var(--surface2) 14%,
      var(--surface2) 86%,
      color-mix(in srgb, var(--surface2) 30%, transparent) 100%)}

.res-cab{text-align:center;max-width:52ch;margin:0 auto 34px}
.res-tag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:1px;
  text-transform:uppercase;color:var(--green-text);background:var(--green-dim);
  padding:6px 14px;border-radius:999px;margin-bottom:16px}
.res-cab h2{margin:0}
.res-cab p{margin:12px auto 0;color:var(--muted);max-width:44ch}

/* El marco recorta: la que sale desaparece por el borde en vez de
   asomar fuera de la caja. El aire lateral evita que corte la sombra. */
/* El aire es para que el recorte no corte la sombra de la tarjeta.
   Antes iba con margen negativo y eso la sacaba 8px fuera de la caja
   por cada lado: dejaba de estar centrada respecto al fondo. */
.res-marco{overflow:hidden;padding:8px;margin:0}

.res-pista{display:flex;margin:0;padding:0;list-style:none;
  overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}
.res-pista::-webkit-scrollbar{display:none}
.res-pista.vivo{overflow:visible;
  transition:transform .55s cubic-bezier(.22,1,.36,1)}

/* Cada una ocupa el ancho entero del marco. */
.resena{flex:0 0 100%;scroll-snap-align:start;
  display:grid;grid-template-columns:230px 1fr;gap:40px;align-items:start;
  background:var(--surface);border-radius:22px;padding:38px 44px;
  box-shadow:0 2px 6px #0000000d,0 14px 30px #0000000a;
  transition:opacity .4s ease}
.res-pista.vivo .resena[data-fuera]{opacity:0;pointer-events:none}

/* ── Quién la escribió: columna izquierda ── */
.resena-quien{display:flex;flex-direction:column;align-items:flex-start;gap:0}

/* El icono de Play, sobre un cuadro claro para que sus cuatro colores
   se lean también en modo oscuro. */
.resena-play{width:52px;height:52px;border-radius:14px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface2);box-shadow:inset 0 0 0 1px var(--border);
  margin-bottom:14px}
.resena-play svg{width:25px;height:25px;display:block}

.resena-quien b{font-size:16px;font-weight:800;letter-spacing:-.3px;
  color:var(--ink);line-height:1.3}
/* Con clase propia y no `.resena-quien > span`: ese selector alcanzaba
   también al icono —que es un span hermano— y le pisaba tamaño y
   color, porque (0,1,1) le gana a (0,1,0). */
.resena-fuente{font-size:13px;color:var(--faint);margin-top:2px}

.estrellas{display:flex;gap:2px;margin-top:12px}
.estrella{width:16px;height:16px;fill:var(--border2);flex:none}
.estrella.on{fill:#FF8A00}   /* ámbar: el verde de marca aquí confundiría */

/* ── La cita: columna derecha ──
   Sin recorte. Con todo el ancho disponible ya no hace falta: la más
   larga cabe en cuatro líneas. */
.resena blockquote{margin:0;position:relative;padding-left:40px;
  font-size:15.5px;line-height:1.7;color:var(--ink);text-wrap:pretty;
  /* Tope de medida: sin él la línea se estiraba hasta el borde de la
     caja y el ojo perdía el renglón al volver. */
  max-width:62ch;min-height:104px}
.resena-com{position:absolute;left:0;top:2px;width:28px;height:28px;
  fill:var(--green);opacity:.22}

/* ── Mando: flechas y puntos ── */
.res-mando{display:flex;align-items:center;justify-content:center;gap:16px;
  margin-top:28px}
.res-flecha{width:42px;height:42px;display:grid;place-items:center;padding:0;
  border:1px solid var(--border);border-radius:50%;cursor:pointer;
  background:var(--surface);color:var(--ink);
  transition:transform .18s cubic-bezier(.22,1,.36,1),background .18s ease}
.res-flecha svg{width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.res-flecha:hover{background:var(--surface2);transform:scale(1.07)}
.res-flecha:active{transform:scale(.95)}
.res-flecha:focus-visible{outline:2px solid var(--green-text);outline-offset:3px}

.res-puntos{display:flex;gap:9px}
.res-puntos button{width:8px;height:8px;padding:0;border:0;border-radius:50%;
  background:var(--border2);cursor:pointer;
  transition:background .2s ease,width .2s cubic-bezier(.22,1,.36,1)}
.res-puntos button:hover{background:var(--muted)}
.res-puntos button[aria-selected="true"]{background:var(--green);width:26px;
  border-radius:999px}
.res-puntos button:focus-visible{outline:2px solid var(--green-text);outline-offset:3px}

@media (max-width:820px){
  .resenas-sec .wrap{max-width:1080px}
  .res-caja{padding:40px 22px 30px;border-radius:26px}
  /* La columna de la persona pasa arriba: en 380px de ancho, 212px
     para el nombre dejan al texto sin sitio. */
  .resena{grid-template-columns:1fr;gap:22px;padding:28px 24px}
  .resena-quien{flex-direction:row;flex-wrap:wrap;align-items:center;gap:0 14px}
  .resena-play{margin-bottom:0}
  .resena-quien b{width:calc(100% - 66px)}
  .resena-quien>span{width:calc(100% - 66px);margin-top:0}
  .estrellas{margin-top:14px;width:100%}
    .resena blockquote{font-size:15.5px;padding-left:0;padding-top:36px;min-height:0}
  .resena-com{top:0}
}
@media (prefers-reduced-motion:reduce){
  .res-pista.vivo,.resena,.res-flecha,.res-puntos button{transition:none}
}

/* ═══════════════════════════════════════════════════════════════
   RESEÑAS — una a la vez, en horizontal

   El intento anterior las ponía en fila de tres. No funcionaba: van
   de 9 caracteres ("Muy buena") a 300, y en una fila de flex todas
   crecen hasta la más alta — las cortas quedaban como cajas verticales
   medio vacías.

   De una en una, cada cual ocupa lo suyo. Y en horizontal el texto
   dispone de todo el ancho, así que baja de diez líneas a tres o
   cuatro: la sección deja de verse alargada.
   ═══════════════════════════════════════════════════════════════ */
.resenas-sec{padding:0 0 96px}

/* La caja se sale de la medida del resto de la página.
   Con los 1080px del `.wrap` general quedaba estrecha y la reseña
   dentro se veía comprimida contra los bordes. Aquí el contenido es
   una sola tarjeta ancha: puede permitirse más sitio. */
.resenas-sec .wrap{max-width:1320px}

/* Los bordes se desvanecen hacia los lados en vez de cortar en seco:
   así el bloque se posa sobre la página en lugar de recortarse contra
   ella, que es lo que le daba el aire de caja apretada. */
.res-caja{position:relative;border-radius:36px;padding:56px 64px 44px;
  background:
    radial-gradient(120% 90% at 8% 0%,    #00c62a1f 0%, transparent 58%),
    radial-gradient(110% 90% at 96% 100%, #fbfb001a 0%, transparent 56%),
    linear-gradient(90deg,
      color-mix(in srgb, var(--surface2) 30%, transparent) 0%,
      var(--surface2) 14%,
      var(--surface2) 86%,
      color-mix(in srgb, var(--surface2) 30%, transparent) 100%)}

.res-cab{text-align:center;max-width:52ch;margin:0 auto 34px}
.res-tag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:1px;
  text-transform:uppercase;color:var(--green-text);background:var(--green-dim);
  padding:6px 14px;border-radius:999px;margin-bottom:16px}
.res-cab h2{margin:0}
.res-cab p{margin:12px auto 0;color:var(--muted);max-width:44ch}

/* El marco recorta: la que sale desaparece por el borde en vez de
   asomar fuera de la caja. El aire lateral evita que corte la sombra. */
/* El aire es para que el recorte no corte la sombra de la tarjeta.
   Antes iba con margen negativo y eso la sacaba 8px fuera de la caja
   por cada lado: dejaba de estar centrada respecto al fondo. */
.res-marco{overflow:hidden;padding:8px;margin:0}

.res-pista{display:flex;margin:0;padding:0;list-style:none;
  overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}
.res-pista::-webkit-scrollbar{display:none}
.res-pista.vivo{overflow:visible;
  transition:transform .55s cubic-bezier(.22,1,.36,1)}

/* Cada una ocupa el ancho entero del marco. */
.resena{flex:0 0 100%;scroll-snap-align:start;
  display:grid;grid-template-columns:230px 1fr;gap:40px;align-items:start;
  background:var(--surface);border-radius:22px;padding:38px 44px;
  box-shadow:0 2px 6px #0000000d,0 14px 30px #0000000a;
  transition:opacity .4s ease}
.res-pista.vivo .resena[data-fuera]{opacity:0;pointer-events:none}

/* ── Quién la escribió: columna izquierda ── */
.resena-quien{display:flex;flex-direction:column;align-items:flex-start;gap:0}

/* El icono de Play, sobre un cuadro claro para que sus cuatro colores
   se lean también en modo oscuro. */
.resena-play{width:52px;height:52px;border-radius:14px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface2);box-shadow:inset 0 0 0 1px var(--border);
  margin-bottom:14px}
.resena-play svg{width:25px;height:25px;display:block}

.resena-quien b{font-size:16px;font-weight:800;letter-spacing:-.3px;
  color:var(--ink);line-height:1.3}
/* Con clase propia y no `.resena-quien > span`: ese selector alcanzaba
   también al icono —que es un span hermano— y le pisaba tamaño y
   color, porque (0,1,1) le gana a (0,1,0). */
.resena-fuente{font-size:13px;color:var(--faint);margin-top:2px}

.estrellas{display:flex;gap:2px;margin-top:12px}
.estrella{width:16px;height:16px;fill:var(--border2);flex:none}
.estrella.on{fill:#FF8A00}   /* ámbar: el verde de marca aquí confundiría */

/* ── La cita: columna derecha ──
   Sin recorte. Con todo el ancho disponible ya no hace falta: la más
   larga cabe en cuatro líneas. */
.resena blockquote{margin:0;position:relative;padding-left:40px;
  font-size:15.5px;line-height:1.7;color:var(--ink);text-wrap:pretty;
  /* Tope de medida: sin él la línea se estiraba hasta el borde de la
     caja y el ojo perdía el renglón al volver. */
  max-width:62ch;min-height:104px}
.resena-com{position:absolute;left:0;top:2px;width:28px;height:28px;
  fill:var(--green);opacity:.22}

/* ── Mando: flechas y puntos ── */
.res-mando{display:flex;align-items:center;justify-content:center;gap:16px;
  margin-top:28px}
.res-flecha{width:42px;height:42px;display:grid;place-items:center;padding:0;
  border:1px solid var(--border);border-radius:50%;cursor:pointer;
  background:var(--surface);color:var(--ink);
  transition:transform .18s cubic-bezier(.22,1,.36,1),background .18s ease}
.res-flecha svg{width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.res-flecha:hover{background:var(--surface2);transform:scale(1.07)}
.res-flecha:active{transform:scale(.95)}
.res-flecha:focus-visible{outline:2px solid var(--green-text);outline-offset:3px}

.res-puntos{display:flex;gap:9px}
.res-puntos button{width:8px;height:8px;padding:0;border:0;border-radius:50%;
  background:var(--border2);cursor:pointer;
  transition:background .2s ease,width .2s cubic-bezier(.22,1,.36,1)}
.res-puntos button:hover{background:var(--muted)}
.res-puntos button[aria-selected="true"]{background:var(--green);width:26px;
  border-radius:999px}
.res-puntos button:focus-visible{outline:2px solid var(--green-text);outline-offset:3px}

@media (max-width:820px){
  .resenas-sec .wrap{max-width:1080px}
  .res-caja{padding:40px 22px 30px;border-radius:26px}
  /* La columna de la persona pasa arriba: en 380px de ancho, 212px
     para el nombre dejan al texto sin sitio. */
  .resena{grid-template-columns:1fr;gap:22px;padding:28px 24px}
  .resena-quien{flex-direction:row;flex-wrap:wrap;align-items:center;gap:0 14px}
  .resena-play{margin-bottom:0}
  .resena-quien b{width:calc(100% - 66px)}
  .resena-quien>span{width:calc(100% - 66px);margin-top:0}
  .estrellas{margin-top:14px;width:100%}
    .resena blockquote{font-size:15.5px;padding-left:0;padding-top:36px;min-height:0}
  .resena-com{top:0}
}
@media (prefers-reduced-motion:reduce){
  .res-pista.vivo,.resena,.res-flecha,.res-puntos button{transition:none}
}

/* ═══════════════════════════════════════════════════════════════
   LOS TRES PASOS

   Antes iban sobre una curva. No funcionaba, y no por afinar mal: la
   forma vivía en coordenadas del svg y los pasos en las del css, así
   que cualquier cambio de ancho o de altura de texto los separaba. Un
   diseño que solo cuadra en una medida concreta está roto aunque en
   esa medida se vea bien.

   Una recta horizontal no tiene geometría que ajustar. Los números se
   apoyan encima y siguen contando lo mismo: que hay un orden.
   ═══════════════════════════════════════════════════════════════ */
.pasos{padding:96px 0 104px}
.pasos-cab{text-align:center;max-width:none;margin-bottom:52px}
.pasos-cab h2{margin:0 auto}
.pasos-cab p{margin:12px auto 0;max-width:40ch}

.pasos-lista{position:relative;display:grid;grid-template-columns:repeat(3,1fr);
  gap:0 26px;list-style:none;margin:0;padding:0}
.pasos-lista.reveal{opacity:1;translate:none;transition:none}

/* La línea pasa por el centro de los números. 27px es medio número
   (54px de alto), así que cae justo en su eje sin cálculo raro.
   Empieza y acaba en el centro de las columnas de los extremos —a un
   sexto del ancho por cada lado— para no salirse por los bordes. */
.pasos-lista::before{content:"";position:absolute;top:27px;
  left:16.667%;right:16.667%;height:2px;background:var(--border);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1.1s cubic-bezier(.33,0,.2,1)}
.pasos-lista.visible::before{transform:scaleX(1)}

.paso{position:relative;text-align:center;max-width:30ch;justify-self:center;
  padding:0 8px}

/* El número, en un disco sobre la línea. El anillo del color del
   fondo es lo que la corta a su paso: sin él, la línea le cruzaría
   por encima. */
.paso-n{position:relative;z-index:2;display:grid;place-items:center;
  width:54px;height:54px;margin:0 auto 20px;border-radius:50%;
  background:var(--green);color:#00230D;
  font-size:21px;font-weight:800;line-height:1;
  box-shadow:0 0 0 8px var(--bg),0 6px 16px #00c62a3d;
  opacity:0;transform:scale(.5);
  transition:opacity .3s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}

/* Cada uno entra cuando la línea ya llegó a él. */
.pasos-lista.visible .paso-n{opacity:1;transform:scale(1)}
.pasos-lista.visible .paso:nth-child(1) .paso-n{transition-delay:.15s}
.pasos-lista.visible .paso:nth-child(2) .paso-n{transition-delay:.62s}
.pasos-lista.visible .paso:nth-child(3) .paso-n{transition-delay:1.05s}

.pasos h3{font-size:19px;font-weight:800;letter-spacing:-.4px;margin-bottom:9px}
.paso>p{font-size:14.5px;line-height:1.62;color:var(--muted);margin:0;
  text-wrap:pretty}

/* ── Pantallas estrechas ──
   Se apilan y la línea se pone vertical, a la izquierda de los
   números. Misma idea, y cabe. */
@media (max-width:800px){
  .pasos{padding:70px 0 78px}
  .pasos-cab{margin-bottom:38px}
  .pasos-lista{grid-template-columns:1fr;gap:34px;padding-left:70px}
  .pasos-lista::before{top:22px;bottom:22px;left:27px;right:auto;
    width:2px;height:auto;
    transform:scaleY(0);transform-origin:top center}
  .pasos-lista.visible::before{transform:scaleY(1)}
  .paso{text-align:left;max-width:none;justify-self:stretch;padding:0}
  .paso-n{position:absolute;left:-70px;top:-4px;margin:0;
    width:54px;height:54px}
}
@media (prefers-reduced-motion:reduce){
  .pasos-lista::before{transform:none;transition:none}
  .paso-n{opacity:1;transform:none;transition:none}
}

/* ═══════════════════════════════════════════════════════════════
   BANNER DE APOYO

   Dos columnas: el texto a la izquierda, el teléfono a la derecha en
   la suya. La versión que lo superponía como capa absoluta se veía
   peor: al recortarlo por abajo y encima girado, el corte salía en
   diagonal y parecía un error de montaje.

   Aquí `overflow:hidden` en la caja produce el corte de abajo, que es
   limpio y horizontal.
   ═══════════════════════════════════════════════════════════════ */
.descarga{padding:0 0 96px}
.descarga .wrap{max-width:1180px}

/* Lleva .reveal solo para que el observador le ponga `visible`. La
   entrada por opacidad del propio bloque se anula: aquí entran sus
   hijos, uno detrás de otro. */
.dsc-caja.reveal{opacity:1;translate:none;transition:none}
.dsc-caja{position:relative;overflow:hidden;border-radius:36px;
  display:grid;grid-template-columns:1fr 300px;gap:44px;align-items:center;
  /* Delgado: el alto lo marca el texto, sin `min-height`.
     Y la columna del teléfono va en píxeles y no en fr: así el
     texto se queda con TODO lo que sobra en vez de dejar un
     hueco en medio, que es lo que lo empujaba a la izquierda. */
  padding:40px 44px 40px 58px;
  background:linear-gradient(118deg,#00A85C 0%,#00934F 40%,#007A42 74%,#006338 100%)}

.dsc-formas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

.dsc-txt{position:relative;max-width:none}
.dsc-tag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:1px;
  text-transform:uppercase;color:#fff;background:#ffffff2b;
  padding:6px 14px;border-radius:999px;margin-bottom:18px}
.dsc-caja h2{font-size:clamp(30px,3.6vw,46px);font-weight:800;letter-spacing:-1.5px;
  line-height:1.08;color:#fff;margin:0;text-wrap:balance}
.dsc-txt p{margin:18px 0 0;font-size:17.5px;line-height:1.55;color:#ffffffdb;
  max-width:42ch;text-wrap:pretty}

.dsc-btn{display:inline-flex;align-items:center;gap:10px;margin-top:28px;
  padding:15px 28px;border-radius:999px;text-decoration:none;
  background:#fff;color:#00301E;font-size:15.5px;font-weight:700;
  box-shadow:0 10px 24px #00000030;
  transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s ease}
.dsc-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dsc-btn:hover{transform:translateY(-3px);box-shadow:0 18px 34px #0000003d}
.dsc-btn:active{transform:translateY(-1px)}
.dsc-btn:focus-visible{outline:2px solid #fff;outline-offset:4px}

/* ── El teléfono ──
   Se hunde 300px por el borde de abajo, y el overflow de la caja lo
   corta ahí.

   Ese margen negativo es lo que adelgaza el banner: el alto del
   bloque lo marcaba el teléfono —635px de alto— y no el texto, así
   que al texto le sobraba espacio arriba y abajo. Hundiéndolo, el
   teléfono aporta la mitad de alto y se sigue viendo igual de grande;
   solo se ve menos de él. */
.dsc-img{position:relative;align-self:end;margin-bottom:-300px}
.dsc-img img{display:block;width:100%;height:auto;max-width:300px;
  margin:0 auto;transform:rotate(-4deg);
  filter:drop-shadow(0 24px 44px #00000045)}

@media (max-width:820px){
  .descarga{padding-bottom:70px}
  .descarga .wrap{max-width:1080px}
  .dsc-caja{grid-template-columns:1fr;gap:6px;text-align:center;
    padding:40px 26px 0;border-radius:28px}
  .dsc-txt{max-width:none;margin:0 auto}
  .dsc-txt p{margin-left:auto;margin-right:auto}
  .dsc-img{margin-bottom:0}
  .dsc-img img{max-width:206px;transform:none}
}
@media (prefers-reduced-motion:reduce){.dsc-btn{transition:none}}

/* ── Entrada del banner ──
   Una secuencia, no efectos sueltos: primero la píldora, luego el
   titular, el texto y el botón; el teléfono entra el último, subiendo
   desde abajo como si se asomara al bloque.

   Se dispara con `.visible`, que lo pone el mismo observador que usa
   el resto del sitio. */
.dsc-tag,.dsc-caja h2,.dsc-txt p,.dsc-btn{
  opacity:0;transform:translateY(16px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.dsc-caja.visible .dsc-tag,
.dsc-caja.visible h2,
.dsc-caja.visible .dsc-txt p,
.dsc-caja.visible .dsc-btn{opacity:1;transform:none}
.dsc-caja.visible .dsc-tag   {transition-delay:.05s}
.dsc-caja.visible h2         {transition-delay:.16s}
.dsc-caja.visible .dsc-txt p {transition-delay:.28s}
.dsc-caja.visible .dsc-btn   {transition-delay:.4s}

/* El teléfono sube desde fuera del bloque. Recorre más distancia que
   el texto y tarda más: así se lee como que entra en escena, no como
   que aparece. */
.dsc-img{opacity:0;transform:translateY(60px);
  transition:opacity .8s ease,transform .9s cubic-bezier(.22,1,.36,1);
  transition-delay:.22s}
.dsc-caja.visible .dsc-img{opacity:1;transform:none}

/* Y una vez dentro, respira. Muy poco y muy lento: a 6 segundos no se
   percibe como animación, solo evita que el bloque se sienta muerto. */
.dsc-caja.visible .dsc-img img{animation:flotabanner 6s 1.2s ease-in-out infinite}
@keyframes flotabanner{
  0%,100%{transform:rotate(-4deg) translateY(0)}
  50%    {transform:rotate(-4deg) translateY(-9px)}
}

@media (prefers-reduced-motion:reduce){
  .dsc-tag,.dsc-caja h2,.dsc-txt p,.dsc-btn,.dsc-img{
    opacity:1;transform:none;transition:none}
  .dsc-caja.visible .dsc-img img{animation:none}
}

/* ═══════════════════════════════════════════════════════════════
   GUÍAS
   ═══════════════════════════════════════════════════════════════ */
.guias{padding:88px 0 96px}
.guias .sec-head{max-width:46ch}

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

.guia{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;
  transition:transform .22s cubic-bezier(.22,1,.36,1),
             box-shadow .22s ease,border-color .18s ease}
.guia:hover{transform:translateY(-4px);border-color:var(--border2);
  box-shadow:0 10px 22px #0000000f,0 24px 48px #0000000d}

/* Toda la tarjeta es el enlace, no solo el título: un objetivo de
   350x340 se acierta siempre, y una línea de texto no. */
.guia-enlace{display:flex;flex-direction:column;height:100%;
  text-decoration:none;color:inherit}
.guia-enlace:focus-visible{outline:2px solid var(--green-text);outline-offset:-2px}

.guia-img{position:relative;aspect-ratio:3/2;overflow:hidden;
  background:linear-gradient(135deg,var(--hero-a),var(--hero-b));
  display:grid;place-items:center}
.guia-img img{width:100%;height:100%;object-fit:cover;display:block}
/* Sin foto, un icono grande sobre el verde: mejor un bloque
   deliberado que un hueco gris esperando imagen. */
.guia-ic svg{width:56px;height:56px;fill:none;stroke:#ffffff8f;
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

.guia-cat{position:absolute;left:14px;bottom:14px;
  font-size:11.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:#00230D;background:var(--green);padding:5px 11px;border-radius:999px}

.guias h3{font-size:18px;font-weight:800;letter-spacing:-.4px;line-height:1.3;
  margin:20px 22px 0;color:var(--ink);text-wrap:balance}
.guia>a>p{margin:9px 22px 0;font-size:14.5px;line-height:1.6;color:var(--muted);
  text-wrap:pretty}

.guia-pie{display:flex;align-items:center;justify-content:space-between;
  margin:auto 22px 0;padding:16px 0;
  border-top:1px solid var(--border);font-size:13px;color:var(--faint)}
.guia-pie time{font-variant-numeric:tabular-nums}
.guia-mas{display:inline-flex;align-items:center;gap:5px;
  font-weight:700;color:var(--green-text)}
.guia-mas svg{width:13px;height:13px;fill:none;stroke:currentColor;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .2s cubic-bezier(.22,1,.36,1)}
.guia:hover .guia-mas svg{transform:translateX(3px)}

@media (max-width:900px){.guias-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){
  .guias{padding-bottom:70px}
  .guias-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .guia,.guia-mas svg{transition:none}
}