/* Estructura Going (bandas de color, píldoras, tracking editorial) con la identidad Conversa.
   Ritmo: nav tinta → hero papel → banda lila (agentes) → papel (principios) → bloque tinta (cierre) → footer tinta */
:root{
  color-scheme: light;
  --lila:#CFC6FB;
  --lima:#E8F76B;
  --tinta:#0A0A0B;
  --papel:#FFFFFF;
  --gris:#6E6B78;
  --lila-suave:#F1EEFE;          /* lila al 30% sobre papel, para superficies */
  --borde: rgba(10,10,11,.14);
  --sombra: rgba(10,10,11,.04) 0 2px 8px 0;

  --f-display:'Space Grotesk', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-texto:'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --max:1200px;
  --gutter:20px;
  --seccion:80px;
  --r-card:24px;
  --r-pill:900px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--f-texto);font-weight:475;font-size:16px;line-height:1.45;letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--tinta);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:14px 26px;border-radius:var(--r-pill);
  font-family:var(--f-texto);font-weight:500;font-size:16px;letter-spacing:.02em;white-space:nowrap;
  transition:transform .15s ease, background-color .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-tinta{background:var(--tinta);color:var(--papel)}
.btn-lima{background:var(--lima);color:var(--tinta)}
.btn-borde{border:1.5px solid currentColor;background:transparent}
.btn-sm{min-height:40px;padding:10px 20px;font-size:14px}
.btn .punto{width:8px;height:8px;border-radius:50%;background:var(--lima);flex:none}
.btn-lima .punto{background:var(--tinta)}

/* ---------- Nav ---------- */
.nav{background:var(--tinta);color:var(--papel);position:sticky;top:env(safe-area-inset-top,0px);z-index:10}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:16px}
.marca{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:700;font-size:22px;letter-spacing:.01em}
.nav-links{display:none;gap:32px;font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.nav-links a{opacity:.8}
.nav-links a:hover{opacity:1}
.nav-acciones{display:flex;gap:10px;align-items:center}

/* ---------- Hero ---------- */
.hero{padding-block:48px 64px;overflow:hidden}
.hero-grid{display:grid;gap:48px;align-items:center}
.hero-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.estado{
  display:inline-flex;align-items:center;gap:10px;background:var(--lila);
  padding:8px 16px 8px 10px;border-radius:var(--r-pill);font-size:14px;font-weight:500;
}
.estado .chip{display:inline-flex;align-items:center;gap:6px;background:var(--tinta);color:var(--papel);padding:4px 10px;border-radius:var(--r-pill);font-size:12px;letter-spacing:.04em}
.estado .chip i{width:7px;height:7px;border-radius:50%;background:var(--lima);display:block}
.hero h1{
  font-weight:700;font-size:clamp(40px, 10.5vw, 80px);line-height:1.08;letter-spacing:.06em;
}
.resalta{
  background:linear-gradient(transparent 12%, var(--lima) 12%, var(--lima) 92%, transparent 92%);
  padding-inline:.08em;margin-inline:-.04em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.hero p.lead{font-size:18px;line-height:1.45;max-width:34ch;margin:0;color:var(--tinta)}
.hero-acciones{display:flex;flex-wrap:wrap;gap:12px}
.hero-nota{font-size:14px;color:var(--gris);margin:0}

/* Teléfono sobre disco lila */
.escena{position:relative;display:grid;place-items:center;min-height:520px}
.disco{
  position:absolute;width:min(460px, 96%);aspect-ratio:1;border-radius:50%;background:var(--lila);
}
.disco svg{position:absolute;inset:0;width:100%;height:100%}
.tel{
  position:relative;width:272px;max-width:100%;aspect-ratio:9/19.5;border-radius:40px;
  background:var(--tinta);padding:10px;box-shadow:var(--sombra);
}
.pantalla{
  height:100%;border-radius:31px;overflow:hidden;background:#EFEAE2;
  display:flex;flex-direction:column;font-size:13px;letter-spacing:0;
}
.barra{display:flex;justify-content:space-between;align-items:center;padding:12px 20px 6px;font-size:12px;font-weight:600;background:var(--papel)}
.chat-top{display:flex;align-items:center;gap:10px;padding:8px 14px 10px;background:var(--papel);border-bottom:1px solid var(--borde)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--tinta);display:grid;place-items:center;flex:none}
.chat-top b{display:block;font-size:14px;font-weight:600}
.chat-top small{color:var(--gris);font-size:11.5px;display:flex;align-items:center;gap:5px}
.chat-top small i{width:6px;height:6px;border-radius:50%;background:#25D366;display:block}
.mensajes{flex:1;padding:14px 12px;display:flex;flex-direction:column;gap:8px;justify-content:flex-end}
.burbuja{max-width:84%;padding:8px 11px 6px;border-radius:12px;line-height:1.35;box-shadow:0 1px 0 rgba(10,10,11,.06)}
.burbuja time{display:block;text-align:right;font-size:10px;color:var(--gris);margin-top:2px}
.in{background:var(--papel);align-self:flex-start;border-top-left-radius:4px}
.out{background:#D9FDD3;align-self:flex-end;border-top-right-radius:4px}
.tarjeta-chat{background:var(--papel);border-radius:12px;align-self:flex-start;max-width:88%;overflow:hidden;border-top-left-radius:4px}
.tarjeta-chat p{margin:0;padding:9px 11px 8px;line-height:1.35}
.tarjeta-chat .ops{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--borde)}
.tarjeta-chat .ops span{text-align:center;padding:9px 4px;color:#027EB5;font-weight:600;font-size:12.5px}
.tarjeta-chat .ops span+span{border-left:1px solid var(--borde)}
.escribe{align-self:flex-start;background:var(--papel);border-radius:12px;padding:10px 12px;display:flex;gap:4px}
.escribe span{width:6px;height:6px;border-radius:50%;background:var(--gris);opacity:.5;animation:b 1.2s infinite}
.escribe span:nth-child(2){animation-delay:.15s}.escribe span:nth-child(3){animation-delay:.3s}
@keyframes b{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-3px);opacity:1}}
.input-chat{margin:0 10px 12px;background:var(--papel);border-radius:var(--r-pill);padding:9px 14px;color:var(--gris);font-size:12.5px}

/* Franja de garantías (en lugar de logos de prensa) */
.franja{border-top:1px solid var(--borde);margin-top:56px;padding-top:24px;display:flex;flex-wrap:wrap;gap:12px 28px;color:var(--gris);font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.franja span{display:inline-flex;align-items:center;gap:8px}
.franja span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tinta);opacity:.35}

/* ---------- Encabezados de sección ---------- */
.kicker{font-size:13px;text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.titulo{font-weight:700;font-size:clamp(30px, 6.4vw, 48px);line-height:1.12;letter-spacing:.04em}
.cabeza{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin-bottom:48px}
.cabeza p{margin:0;max-width:46ch;font-size:17px}

/* ---------- Banda lila: agentes ---------- */
.banda{background:var(--lila);padding-block:var(--seccion)}
.agentes{display:grid;gap:20px}
.agente{
  background:var(--papel);border-radius:var(--r-card);border:1px solid var(--borde);box-shadow:var(--sombra);
  padding:32px;display:flex;flex-direction:column;gap:20px;min-width:0;
}
.agente-top{display:flex;justify-content:space-between;align-items:center}
.icono{width:56px;height:56px;border-radius:18px;display:grid;place-items:center}
.icono-tinta{background:var(--tinta)}
.icono-suave{background:var(--lila-suave)}
.badge{padding:6px 12px;border-radius:var(--r-pill);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.badge-lima{background:var(--lima)}
.badge-gris{background:transparent;border:1px solid var(--borde);color:var(--gris)}
.agente h3{font-size:28px;font-weight:700;letter-spacing:.04em;line-height:1.1}
.agente .sub{display:block;margin-top:6px;font-size:15px;color:var(--gris)}
.agente p{margin:0;font-size:16px;line-height:1.5}
.agente ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:15px}
.agente li{display:flex;gap:10px;align-items:baseline}
.agente li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--tinta);transform:translateY(-1px)}
.agente .enlace{margin-top:auto;font-weight:600;display:inline-flex;align-items:center;gap:8px}
.agente .enlace .flecha{transition:transform .15s ease}
.agente:hover .enlace .flecha{transform:translateX(3px)}
.agente.mesa h3,.agente.mesa p{color:var(--gris)}
.agente.mesa li{color:var(--gris)}
.agente.mesa li::before{background:var(--gris);opacity:.5}
.agente.tuyo{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.agente.tuyo p{color:rgba(255,255,255,.78)}
.agente.tuyo .btn{align-self:flex-start;margin-top:auto}

/* ---------- Principios ---------- */
.principios{padding-block:var(--seccion)}
.carrusel{
  display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:16px;overflow-x:auto;
  scroll-snap-type:x mandatory;padding-bottom:8px;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
  scrollbar-width:none;
}
.carrusel::-webkit-scrollbar{display:none}
.principio{
  scroll-snap-align:start;background:var(--lila-suave);border-radius:var(--r-card);padding:32px;
  display:flex;flex-direction:column;gap:14px;min-width:0;
}
.principio .marca-p{width:44px;height:44px;border-radius:50%;background:var(--lila);display:grid;place-items:center}
.principio h3{font-size:22px;font-weight:700;letter-spacing:.03em;line-height:1.2}
.principio p{margin:0;font-size:15.5px;line-height:1.5}

/* ---------- Cierre tinta ---------- */
.cierre{padding-block:0 var(--seccion)}
.bloque{
  background:var(--tinta);color:var(--papel);border-radius:var(--r-card);padding:48px 28px;
  display:flex;flex-direction:column;align-items:flex-start;gap:24px;position:relative;overflow:hidden;
}
.bloque h2{font-size:clamp(36px, 9vw, 72px);font-weight:700;line-height:1.05;letter-spacing:.06em;position:relative}
.bloque h2 .p{display:inline-block;width:.24em;height:.24em;border-radius:50%;background:var(--lima);margin-left:.06em;vertical-align:baseline}
.bloque p{margin:0;max-width:40ch;font-size:17px;color:rgba(255,255,255,.78);position:relative}
.bloque .btn{position:relative}
.bloque .anillo{position:absolute;right:-90px;bottom:-110px;width:340px;height:340px;opacity:.14}

/* ---------- Footer ---------- */
.footer{background:var(--tinta);color:var(--papel);padding-block:56px 40px;border-top:1px solid rgba(255,255,255,.08)}
.footer-top{display:flex;flex-direction:column;gap:28px}
.footer nav{display:flex;flex-wrap:wrap;gap:12px 28px;font-size:14px}
.footer nav a{opacity:.75}
.footer nav a:hover{opacity:1}
.footer-bajo{margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:13px;opacity:.6}

/* ---------- Tablet / desktop ---------- */
@media (min-width:720px){
  :root{--gutter:32px}
  .agentes{grid-template-columns:repeat(2,1fr)}
  .agente.tuyo{grid-column:1 / -1}
  .carrusel{grid-auto-flow:row;grid-template-columns:repeat(2,1fr);overflow:visible;margin-inline:0;padding-inline:0}
  .bloque{padding:72px 64px}
}
@media (min-width:1024px){
  :root{--seccion:104px}
  .nav-links{display:flex}
  .hero{padding-block:72px 88px}
  .hero-grid{grid-template-columns:1.45fr 1fr;gap:32px}
  .escena{min-height:600px}
  .tel{width:300px}
  .agentes{grid-template-columns:repeat(3,1fr)}
  .agente.tuyo{grid-column:auto}
  .carrusel{grid-template-columns:repeat(4,1fr)}
  .footer-top{flex-direction:row;justify-content:space-between;align-items:center}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* =====================================================================
   Versión final (rediseno-going): mejoras de accesibilidad / táctiles,
   nav tipo isla flotante y entrada suave al hacer scroll.
   ===================================================================== */

/* Nav tipo isla flotante (tinta, píldora, separado del borde superior) */
.nav{
  background:transparent;margin-top:12px;
  top:calc(env(safe-area-inset-top,0px) + 12px);
  padding-inline:var(--gutter);
}
.nav .nav-inner{
  max-width:calc(var(--max) - 2 * var(--gutter));
  background:var(--tinta);border-radius:var(--r-pill);
  padding:10px 10px 10px 20px;
  box-shadow:0 10px 30px rgba(10,10,11,.14);
}

/* Las anclas no quedan debajo del nav: borde inferior de la isla
   (12px de separación + alto de la isla) en cada breakpoint */
:root{--alto-nav:74px}
html{scroll-padding-top:var(--alto-nav)}

/* Botones pequeños con objetivo táctil de 44px en móvil */
@media (max-width:719.98px){
  :root{--alto-nav:76px}
  .btn-sm{min-height:44px}
}

/* Enlaces del footer: más área táctil sin cambiar cómo se ven
   (el padding extra se compensa con margen negativo) */
.footer nav a{display:inline-block;padding-block:12px;margin-block:-12px}

/* "Saltar al contenido": solo visible al recibir foco */
.saltar{
  position:absolute;left:16px;top:-200px;z-index:40;
  background:var(--lima);color:var(--tinta);font-weight:600;font-size:15px;
  padding:12px 20px;border-radius:var(--r-pill);
}
.saltar:focus,.saltar:focus-visible{top:calc(env(safe-area-inset-top,0px) + 12px)}

/* Sin zoom por doble toque en los botones */
.btn{touch-action:manipulation}

/* Entrada suave al hacer scroll (js/home.js). Solo se ocultan elementos si
   el JS corrió (añade .revelar-on al <html>); sin JS todo se ve normal. */
.revelar-on .revelar{
  opacity:0;transform:translateY(16px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i, 0) * 80ms);
}
.revelar-on .revelar.visible{opacity:1;transform:none}

/* =====================================================================
   Hover y foco con la paleta de Conversa: "pasar el mouse = lila".
   :hover solo con mouse (hover: hover + pointer: fine) para que en el
   celular no queden pegados al tocar; :focus-visible siempre, además del
   outline. Con prefers-reduced-motion la regla global quita transiciones.
   ===================================================================== */
.btn{transition:transform .15s ease, background-color .18s ease, color .18s ease, border-color .18s ease}
.btn .punto{transition:background-color .18s ease}
.nav-links a,.footer nav a{transition:color .18s ease, opacity .18s ease}
.agente .enlace-texto{
  text-decoration:underline 2px transparent;text-underline-offset:4px;
  transition:text-decoration-color .18s ease;
}

/* Franja de garantías: "foco" al pasar el mouse. En reposo se ve igual que
   siempre; el ítem señalado crece desde su borde izquierdo y los demás se
   atenúan. */
:root{--suave:cubic-bezier(.22,.61,.36,1)}
.franja span{
  transform-origin:left center;
  transition:transform .4s var(--suave), color .4s var(--suave), opacity .4s var(--suave);
}
.franja span::before{transition:opacity .4s var(--suave)}

@media (hover:hover) and (pointer:fine){
  .btn-tinta:hover{background:var(--lila);color:var(--tinta)}
  .btn-tinta:hover .punto{background:var(--tinta)}
  .btn-lima:hover{background:var(--lila);color:var(--tinta)}
  .btn-borde:hover{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
  .nav .btn-borde:hover{background:var(--papel);color:var(--tinta);border-color:var(--papel)}
  .nav-links a:hover,.footer nav a:hover{color:var(--lima);opacity:1}
  .agente:hover .enlace-texto{text-decoration-color:var(--lila)}
  /* El ítem crecido (115%) no debe tocar al siguiente: 32px en vez de 28px */
  .franja{column-gap:32px}
  .franja:hover span{opacity:.45}
  .franja span:hover{opacity:1;transform:scale(1.15);color:var(--tinta)}
  .franja span:hover::before{opacity:1}
}
.btn-tinta:focus-visible{background:var(--lila);color:var(--tinta)}
.btn-tinta:focus-visible .punto{background:var(--tinta)}
.btn-lima:focus-visible{background:var(--lila);color:var(--tinta)}
.btn-borde:focus-visible{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.nav .btn-borde:focus-visible{background:var(--papel);color:var(--tinta);border-color:var(--papel)}
.nav-links a:focus-visible,.footer nav a:focus-visible{color:var(--lima);opacity:1}
.agente:focus-visible .enlace-texto{text-decoration-color:var(--lila)}

/* Con movimiento reducido: el ítem de la franja cambia color y opacidad,
   pero no crece. */
@media (prefers-reduced-motion:reduce){
  .franja span:hover{transform:none}
}

/* =====================================================================
   Isla en celular (< 768px): solo "Iniciar sesión", como píldora lima.
   WhatsApp sale de la isla porque el CTA grande del hero ya lo cubre.
   Desde 768px la isla muestra ambos botones como siempre.
   ===================================================================== */
.nav :focus-visible{outline-color:var(--lima)}
@media (max-width:767.98px){
  .nav-acciones .nav-wa{display:none}
  .nav .nav-login{background:var(--lima);color:var(--tinta);border-color:var(--lima)}
  .nav .nav-login:focus-visible{background:var(--lila);color:var(--tinta);border-color:var(--lila)}
  .nav .nav-inner{gap:12px}
}
@media (max-width:767.98px) and (hover:hover) and (pointer:fine){
  .nav .nav-login:hover{background:var(--lila);color:var(--tinta);border-color:var(--lila)}
}
/* Celulares de menos de 360px: logo y botón un poco más compactos para que
   quepan en la isla sin desbordarse */
@media (max-width:359.98px){
  .nav .nav-inner{gap:8px;padding-left:16px}
  .nav .marca{font-size:20px;gap:8px}
  .nav .nav-login{padding-inline:14px}
}