/* ==========================================================================
   nona · landing — estilos
   Fuentes: /public/fonts (cargadas por app/assets/stylesheets/application.css).
   Tokens alineados a app/assets/tailwind/application.css.
   ========================================================================== */

.nona-landing{
  --crema:#FBF3DD;
  --manteca:#F5E3A8;
  --naranja:#CF7F04;
  --naranja-deep:#B06D03;
  --ink:#3A2A14;
  --ink-2:#6A5230;
  --card:#FFFFFF;
  --line:#E3D9C2;
  --warn:#D9541E;
  --on-hero:#FBE6BE;
  --wa:#25D366;
  --wa-hover:#1EBE5D;
  --wa-sheet:#0F7A38;
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-ui:'Space Grotesk',system-ui,sans-serif;
  --font-body:'DM Sans',system-ui,sans-serif;
  --font-accent:'Fraunces',Georgia,serif;
  --font-black:'Archivo Black',system-ui,sans-serif;
  --font-mono:'Martian Mono',ui-monospace,monospace;
  --r-pill:999px;
  --r-card:28px 5px 28px 5px;
  --shadow-card:0 18px 40px -18px rgba(84,59,32,.35);
  --ease:cubic-bezier(.2,.8,.2,1);

  background:var(--crema);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}

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

.nona-landing .wrap{ width:100%; max-width:1120px; margin-inline:auto; padding-inline:20px; }

.nona-landing a:focus-visible,
.nona-landing button:focus-visible{
  outline:3px solid var(--naranja);
  outline-offset:3px;
  border-radius:6px;
}

.site-nav{
  position:sticky; top:0; z-index:40;
  background:rgba(251,243,221,.82);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-block:18px;
}
.nav-menu{ display:flex; align-items:center; gap:18px; }
.nav-link{
  font-family:var(--font-ui); font-weight:600; font-size:15px;
  color:var(--ink-2); text-decoration:none;
}
.nav-link:hover{ color:var(--ink); }

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

.country-switch{ position:relative; flex:none; }
.country-switch__toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; cursor:pointer;
  font-size:19px; line-height:1; list-style:none;
  background:var(--card); border:1px solid var(--line);
}
.country-switch__toggle::-webkit-details-marker{ display:none; }
.country-switch__toggle:hover{ border-color:var(--naranja); }
.country-switch__menu{
  /* Abre hacia la derecha: el toggle ahora vive pegado al logo, en el borde
     izquierdo del nav (antes estaba al final y abría hacia la izquierda). */
  position:absolute; top:calc(100% + 8px); left:0; z-index:50;
  display:flex; flex-direction:column; gap:2px; margin:0; padding:6px;
  list-style:none; min-width:160px;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow-card);
}
.country-switch__option{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:8px;
  font-family:var(--font-ui); font-weight:600; font-size:14px;
  color:var(--ink-2); text-decoration:none;
}
.country-switch__option:hover{ background:var(--crema); color:var(--ink); }
.country-switch__option.is-current{ color:var(--naranja); }

.site-nav__logo{ display:block; line-height:0; }
.site-nav__logo svg{ width:clamp(9rem,28vw,11rem); height:auto; }

.wordmark{
  font-family:var(--font-display); font-weight:700; font-size:26px;
  letter-spacing:-.02em; color:var(--ink); text-decoration:none;
}
.wordmark .dot{ color:var(--naranja); }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-ui); font-weight:600; text-decoration:none;
  border:0; cursor:pointer; border-radius:var(--r-pill);
  transition:background .18s var(--ease), transform .12s var(--ease);
}
/* Verde como los CTA del hero y del cierre: los tres abren WhatsApp, y en
   naranja parecía otra acción (2026-10-07). */
.btn--primary{
  background:var(--wa); color:#fff;
  padding:11px 20px; font-size:15px;
}
.btn--primary:hover{ background:var(--wa-hover); }
.btn--primary:active{ transform:scale(.97); }

.beta-badge{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:.08em; color:var(--naranja);
  background:var(--crema); border:1px solid var(--line);
  padding:6px 12px; border-radius:var(--r-pill);
}
.beta-badge .pulse{ width:6px; height:6px; border-radius:50%; background:var(--naranja); }

.wa-cta{ position:relative; display:inline-flex; isolation:isolate; }
.wa-cta__sheet{
  position:absolute; left:3px; right:3px; top:7px; bottom:-7px;
  border-radius:var(--r-pill); background:var(--wa-sheet); z-index:0;
}
.wa-cta__face{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:14px;
  background:var(--wa); color:#fff;
  font-family:var(--font-black); text-transform:uppercase; letter-spacing:-.01em;
  font-size:1.35rem; padding:22px 44px; border-radius:var(--r-pill);
  text-decoration:none; box-shadow:0 8px 22px rgba(18,140,62,.30);
  transition:background .18s var(--ease), transform .12s var(--ease);
}
.wa-cta__face:hover{ background:var(--wa-hover); }
.wa-cta__face:active{ transform:translateY(4px); }
.wa-cta__face svg{ width:30px; height:30px; flex:none; }

/* Banda de registro (/ve/registro). Full-bleed arriba del hero, misma mecanica
   que .waitlist-promo: manteca contra el crema del hero, sin bordes ni card. */
.register-promo{
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  background:var(--manteca);
}
/* .hero .wrap pasa a grid de dos columnas en >=1280 y este wrap vive adentro del
   hero: sin ganarle en especificidad, los beneficios se iban a la columna
   derecha y el boton se estiraba al ancho de la celda. */
.hero .register-promo .wrap{ display:block; padding-block:34px 36px; }
/* Titulo al 80% de .hero__title; el acento repite el de "médico de confianza". */
.register-promo__title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.92rem,5.6vw,3.36rem); line-height:1.04; letter-spacing:-.035em;
  color:var(--ink); margin:0; max-width:22ch; text-wrap:balance;
}
.register-promo__title .em{
  font-family:var(--font-accent); font-style:italic; font-weight:800;
  color:var(--naranja);
}
.register-promo__perks-title{
  font-family:var(--font-display); font-weight:700;
  font-size:1.5rem; letter-spacing:-.02em; color:var(--ink); margin:40px 0 0;
}
.register-promo__perks{
  list-style:none; margin:18px 0 0; padding:0;
  display:grid; grid-template-columns:1fr; gap:12px 36px;
}
.register-promo__perks li{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-body); font-size:1.0625rem; color:var(--ink-2);
}
.register-promo__perks svg{ width:20px; height:20px; flex:none; color:var(--ink); }

/* CTA de alta: verde WhatsApp como "Consultar ahora", pero en tamaño medio para
   no competir con el titulo de la banda. */
.wa-cta--alta .wa-cta__face{ font-size:1.1rem; padding:20px 34px; gap:12px; }
.wa-cta--alta .wa-cta__face svg{ width:24px; height:24px; }

.wa-cta--waitlist .wa-cta__sheet{ background:#3D2B17; }
.wa-cta--waitlist .wa-cta__face{
  background:var(--card); color:var(--ink);
  font-size:1.6rem; padding:26px 56px;
  box-shadow:0 10px 26px rgba(0,0,0,.22);
}
.wa-cta--waitlist .wa-cta__face:hover{ background:var(--crema); }

/* Banda full-bleed: reemplaza el CTA de WhatsApp en AR mientras dura la
   waitlist (no lanzamos wa.me todavía, ver landing/_waitlist_promo). */
.waitlist-promo{
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  display:flex; flex-direction:column; align-items:center; gap:18px;
  background:#543B20; text-align:center;
  padding:40px 20px 48px;
}
.waitlist-promo__title{
  font-family:var(--font-black); text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(2rem,8vw,3.2rem); line-height:1; color:var(--manteca); margin:0;
}
.waitlist-promo__subtitle{
  font-family:var(--font-body); font-size:clamp(1.05rem,3.5vw,1.3rem);
  color:var(--on-hero); margin:0;
}

.hero .wrap{
  display:grid; grid-template-columns:1fr; gap:40px;
  padding-block:32px 64px;
}
.hero__title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.4rem,7vw,4.2rem); line-height:1.02;
  letter-spacing:-.035em; color:var(--ink); margin:16px 0 0; text-wrap:balance;
}
.hero__title .em{
  font-family:var(--font-accent); font-style:italic; font-weight:800;
  color:var(--naranja);
}
.hero__subtitle{
  font-family:var(--font-body); font-size:clamp(1.15rem,4vw,1.5rem);
  line-height:1.4; color:var(--ink-2); margin:24px 0 0; max-width:460px;
}
.hero__tags{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:12px;
  font-family:var(--font-ui); font-weight:600; font-size:19px;
  color:var(--ink-2); margin:20px 0 0;
}
.hero__tags .sep{ color:var(--naranja); }
.hero__tags .grito{
  font-family:var(--font-black); color:var(--naranja);
  text-transform:uppercase; letter-spacing:-.01em;
}
.hero__cta{ display:flex; flex-wrap:nowrap; align-items:center; gap:16px; margin-top:32px; }

/* Mockup de WhatsApp. En el teléfono va debajo del CTA: angosto para que el
   botón siga siendo lo primero que se ve y la imagen no ocupe dos pantallas. */
.hero__phone{
  display:block; justify-self:center;
  width:min(72vw,280px); height:auto;
  filter:drop-shadow(0 24px 40px rgba(84,59,32,.28));
}

.how{ background:var(--manteca); }
.how .wrap{ padding-block:56px; }
.how__title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.6rem,4.5vw,2.3rem); letter-spacing:-.03em;
  color:var(--ink); margin:0 0 32px;
}
/* Gap vertical amplio: el círculo sobresale por arriba de cada card y si no
   se montaría sobre la anterior. */
.nona-landing .cards{ display:grid; grid-template-columns:1fr; gap:36px 18px; }
/* Círculo montado sobre la esquina superior izquierda y título al lado, en la
   misma fila: la card pierde el alto que ocupaba el círculo solo (2026-10-07). */
.nona-landing .card{
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px 14px;
  background:var(--card); border-radius:var(--r-card);
  padding:0 24px 26px 0; box-shadow:var(--shadow-card);
  transition:transform .25s var(--ease);
}
.nona-landing .card:hover{ transform:translateY(-6px); }
.card__badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%;
  font-family:var(--font-black); font-size:15px;
  margin:-16px 0 0 -12px; align-self:start;
}
.card__badge--naranja{ background:var(--naranja); color:#fff; }
/* Fondo blanco y no transparente: ahora pisa el borde de la card. */
.card__badge--outline{ background:var(--card); border:2px solid var(--ink); color:var(--ink); }
.card__badge--marron{ background:var(--ink); color:var(--manteca); }
.card__title{
  font-family:var(--font-display); font-weight:700; font-size:22px;
  letter-spacing:-.02em; color:var(--ink); margin:0; padding-top:6px;
}
/* Texto de lectura a 17–18px: el público es de 45 a 65 años (2026-10-07). */
.card__text{
  grid-column:1 / -1; padding-left:24px;
  font-family:var(--font-body); font-size:18px; line-height:1.5; color:var(--ink-2); margin:0;
}

.notice{
  display:flex; align-items:flex-start; justify-content:center;
  gap:10px; margin-top:32px; text-align:center;
}
.notice svg{ width:20px; height:20px; flex:none; margin-top:2px; }
.notice p{ font-family:var(--font-ui); font-size:17px; color:var(--ink-2); margin:0; }
.notice strong{ color:var(--ink); }

/* Partners (solo VE). Va en crema: la seccion de arriba (.how) ya es manteca,
   asi que el ritmo de bandas queda manteca -> crema -> naranja. */
.partners{ background:var(--crema); }
.partners .wrap{ padding-block:48px; text-align:center; }
.partners__title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.4rem,4vw,2rem); letter-spacing:-.03em;
  color:var(--ink); margin:0 0 30px;
}
.partners__logos{
  display:flex; align-items:center; justify-content:center;
  gap:24px; flex-wrap:wrap;
}
.partners__sep{ color:var(--naranja); font-size:26px; font-weight:700; line-height:1; }
.partners__logo{ display:block; height:34px; width:auto; }
.partners__link{ display:inline-flex; transition:transform .25s var(--ease); }
.partners__link:hover{ transform:translateY(-3px); }
/* Docguia solo tiene logo blanco: sin su chip de marca no se ve sobre el crema.
   box-sizing explicito porque .nona-landing * fuerza border-box y el padding
   se comeria la altura del logo. */
.partners__logo--docguia{
  box-sizing:content-box;
  height:30px; padding:13px 22px;
  border-radius:10px; background:#3F3179;
}

/* Preguntas frecuentes (solo VE). Manteca entre partners (crema) y shout
   (naranja); cada pregunta es una card crema, como en el diseño. */
.faq{ background:var(--manteca); }
.faq .wrap{ padding-block:56px; }
.faq__title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.6rem,4.5vw,2.3rem); letter-spacing:-.03em;
  color:var(--ink); margin:0 0 28px;
}
.faq__title .em{
  font-family:var(--font-accent); font-style:italic; font-weight:800;
  color:var(--naranja);
}
.faq__list{ display:grid; gap:14px; }
.faq__item{
  background:var(--crema); border-radius:14px;
  box-shadow:0 3px 0 var(--line);
}
.faq__q{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 22px; cursor:pointer; list-style:none;
  font-family:var(--font-ui); font-weight:700; font-size:18px; line-height:1.3;
  color:var(--ink);
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q::after{
  content:"+"; flex:none;
  font-family:var(--font-ui); font-weight:700; font-size:24px; line-height:1;
  color:var(--naranja-deep); transition:transform .2s var(--ease);
}
.faq__item[open] .faq__q::after{ transform:rotate(45deg); }
.faq__a{ padding:0 22px 22px; max-width:68ch; }
.faq__a p{
  font-family:var(--font-body); font-size:17px; line-height:1.55;
  color:var(--ink-2); margin:0 0 12px;
}
.faq__a p:last-child{ margin-bottom:0; }
.faq__a strong{ color:var(--ink); }

.shout{ background:var(--naranja); }
.shout .wrap{ padding-block:72px; text-align:center; }
.shout__title{
  font-family:var(--font-black); text-transform:uppercase; letter-spacing:-.015em;
  font-size:clamp(2.1rem,7vw,3.6rem); line-height:1; color:var(--manteca); margin:0;
}
.shout__text{
  font-family:var(--font-body); font-size:clamp(1.1rem,4vw,1.25rem);
  line-height:1.5; color:var(--on-hero); margin:18px auto 0; max-width:520px;
}
.shout .hero__cta{ display:flex; flex-wrap:nowrap; justify-content:center; gap:16px; margin-top:34px; }
.shout .wa-cta__sheet{ background:var(--wa-sheet); }

/* Footer (diseño 2026-10-07): tres filas separadas por línea — redes + legales,
   copyright + mail, avisos + wordmark. En el teléfono cada fila se apila. */
.site-footer{ background:var(--manteca); border-top:1px solid var(--line); }
.site-footer .wrap{ padding-block:36px 32px; }
.footer__row{
  display:flex; flex-direction:column; align-items:flex-start; gap:16px;
  padding-block:22px; border-top:1px solid var(--line);
}
.footer__row:first-child{ padding-top:0; border-top:0; }
.footer__row:last-child{ padding-bottom:0; }
.footer__label{
  font-family:var(--font-mono); font-size:13px; font-weight:500;
  text-transform:uppercase; letter-spacing:.08em; color:var(--ink-2); margin:0 0 12px;
}
.footer__social-list{ display:flex; gap:12px; margin:0; padding:0; list-style:none; }
.footer__social-list a{ display:block; border-radius:50%; transition:transform .2s var(--ease); }
.footer__social-list a:hover{ transform:translateY(-3px); }
.footer__social-list img{ display:block; width:48px; height:48px; }
.footer__legal{ display:flex; flex-wrap:wrap; gap:10px 32px; }
.footer__legal a,
.footer__mail{
  font-family:var(--font-ui); font-weight:600; font-size:17px;
  color:var(--ink); text-decoration:none;
}
.footer__legal a:hover,
.footer__mail:hover{ text-decoration:underline; }
.footer__copy{ font-family:var(--font-body); font-size:15px; color:var(--ink-2); margin:0; }
/* ink-2 y no el gris anterior (#8C7550), que no llegaba al 4.5:1 de WCAG AA. */
.footer__disclaimers p{ font-family:var(--font-body); font-size:15px; line-height:1.5; color:var(--ink-2); margin:0 0 6px; }
.footer__disclaimers p:last-child{ margin-bottom:0; }
.footer__disclaimers strong{ color:var(--ink); }
.site-footer .wordmark{ font-size:34px; line-height:1; }

@media (max-width:767px){
  /* El nav no entra en un teléfono: logo (mín 9rem) + "Cómo funciona" + CTA +
     bandera dan ~506px contra 350 útiles, y lo último se iba de pantalla. Se
     achica el logo y se esconde el ancla — la sección queda a un scroll — para
     que entre lo que importa: cambiar de país y consultar. */
  .site-nav__logo svg{ width:7.5rem; }
  .nav-menu .nav-link{ display:none; }
}

@media (max-width:359px){
  /* iPhone SE y compañía: 14px de más y el CTA se comía el borde. */
  .site-nav__logo svg{ width:6.25rem; }
  /* "Consultar ahora" se partia en dos lineas a 320px: se achica y se aprietan
     los gaps para que entre en una. */
  .site-nav .wrap{ gap:8px; }
  .site-nav__brand{ gap:6px; }
  .nav-menu .btn--primary{ font-size:13px; padding:9px 12px; white-space:nowrap; }
}

@media (min-width:768px){
  .nona-landing .wrap{ padding-inline:32px; }
  .register-promo__perks{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .register-promo__perks li{ font-size:1.13rem; gap:14px; }
  .register-promo__perks svg{ width:22px; height:22px; }
  .hero .register-promo .wrap{ padding-block:40px 44px; }
  .site-nav .wrap{ padding-block:22px; }
  .hero .wrap{ padding-block:44px 80px; }
  .nona-landing .cards{ grid-template-columns:repeat(2,1fr); }
  .how .wrap, .faq .wrap{ padding-block:72px; }
  .footer__row{ flex-direction:row; align-items:center; justify-content:space-between; gap:24px 40px; }
  .footer__row:last-child{ align-items:flex-end; }
}

@media (min-width:1280px){
  .nona-landing .wrap{ padding-inline:40px; }
  .hero .wrap{
    grid-template-columns:1fr auto; gap:56px; align-items:center;
    padding-block:52px 96px;
  }
  .hero__phone{ width:340px; }
  .nona-landing .cards{ grid-template-columns:repeat(3,1fr); gap:22px; }
  .how .wrap, .faq .wrap{ padding-block:80px; }
}

@media (max-width:479px){
  /* El CTA a tamaño completo (1.35rem + 44px de padding) no entra en pantallas
     angostas. Nació para meter dos botones lado a lado; desde que quedó uno
     solo (2026-09-02) sigue haciendo falta, pero hay margen para agrandarlo. */
  .hero__cta .wa-cta__face,
  .shout .hero__cta .wa-cta__face{ font-size:1rem; padding:14px 20px; gap:8px; }
  .hero__cta .wa-cta__face svg,
  .shout .hero__cta .wa-cta__face svg{ width:20px; height:20px; }

  .wa-cta--waitlist .wa-cta__face{ font-size:1.2rem; padding:18px 32px; }

  /* A tamano completo los dos logos suman 341px sobre 350 utiles: rozan el borde
     en un iPhone estandar y se apilan en un SE. Achicados entran con aire, y el
     punto separador sobra cuando se apilan. */
  .partners__logos{ gap:20px; }
  .partners__sep{ display:none; }
  .partners__logo{ height:28px; }
  .partners__logo--docguia{ height:24px; padding:11px 18px; }
}

@media (prefers-reduced-motion:reduce){
  .nona-landing *{ animation:none !important; transition:none !important; }
}