/* ============================================================
   compa.care — hoja de estilos Cielo
   Tokens y voz visual idénticos a la app (CLAUDE.md §7):
   crema #FBF7EF · papel #FFFFFF · selva #173B33 · musgo #5F8D6E
   sol #F4B860 · Fraunces = voz · Figtree = todo lo demás
   ============================================================ */

:root {
  --crema: #FBF7EF;
  --papel: #FFFFFF;
  --selva: #173B33;
  --selva-2: #1D4A3F;
  --selva-3: #2A5C4D;
  --musgo: #5F8D6E;
  --musgo-suave: #E6F0E7;
  --sol: #F4B860;
  --sol-claro: #FFD98E;
  --sol-suave: #FBEFD8;
  --tinta: #1B2A26;
  --tinta-suave: #5E6F69;
  --tinta-tenue: #94A39D;
  --arena: #A8946F;
  --borde: #EBE3D2;
  --borde-2: #E2D9C5;
  --verde-texto-claro: #A8C3AE;
  --durazno: #FFE3C2;
  --durazno-2: #F7E3CB;

  --fraunces: 'Fraunces', Georgia, serif;
  --figtree: 'Figtree', system-ui, -apple-system, sans-serif;

  --r-card: 24px;
  --r-grande: 40px;
  --sombra-hero: 0 24px 60px -24px rgba(23, 59, 51, 0.35);
  --sombra-card: 0 10px 26px -16px rgba(23, 59, 51, 0.22);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--figtree);
  font-size: 17px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--musgo); }

::selection { background: var(--sol-claro); color: var(--selva); }

/* ---------- animaciones (las tres del lenguaje: entrada, asentar, confirmar) */
@keyframes up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rise-sun {
  from { transform: translateY(34px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes glow {
  0%, 100% { box-shadow: 0 0 60px 18px rgba(244, 184, 96, 0.35); }
  50%      { box-shadow: 0 0 80px 26px rgba(244, 184, 96, 0.5); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Cabecera
   ============================================================ */
.top {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1080px;
  margin: 0 auto;
  padding: 26px 28px;
}
.wordmark {
  font-family: var(--fraunces);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--crema);
  text-decoration: none;
}
.wordmark .punto { color: var(--sol); }
.top nav { display: flex; gap: 22px; }
.top nav a {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--verde-texto-claro);
  text-decoration: none;
}
.top nav a:hover { color: var(--crema); }

/* Variante para páginas claras (políticas, soporte) */
.top--claro { position: static; }
.top--claro .wordmark { color: var(--selva); }
.top--claro nav a { color: var(--tinta-suave); }
.top--claro nav a:hover { color: var(--selva); }

/* ============================================================
   Héroe — el cielo del splash (1.1) hecho página
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(176deg, var(--selva) 0%, var(--selva-2) 55%, var(--selva-3) 100%);
  color: var(--crema);
  padding: 130px 28px 0;
  border-radius: 0 0 var(--r-grande) var(--r-grande);
}
.hero__nube {
  position: absolute;
  right: -60px;
  top: 110px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, var(--sol-claro), var(--sol) 70%);
  opacity: 0.13;
  filter: blur(3px);
}
.hero__int {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 48px;
  align-items: end;
}
.hero__texto { padding-bottom: 90px; }
.hero__sol {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--sol-claro), var(--sol) 70%);
  animation: rise-sun 1.1s cubic-bezier(0.2, 0.8, 0.3, 1) both, glow 6s 1.2s ease-in-out infinite;
  margin-bottom: 30px;
}
.hero h1 {
  font-family: var(--fraunces);
  font-weight: 450;
  font-size: clamp(42px, 6.2vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  animation: up 0.55s 0.15s ease-out both;
}
.hero h1 em { font-style: italic; font-weight: 450; color: var(--sol-claro); }
.hero__sub {
  font-size: 19px;
  color: var(--verde-texto-claro);
  max-width: 430px;
  margin-top: 18px;
  text-wrap: pretty;
  animation: up 0.55s 0.28s ease-out both;
}
.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
  animation: up 0.55s 0.4s ease-out both;
}
.badge-store {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1.5px solid #3A5C50;
  border-radius: 99px;
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 700;
  color: #F2EFE6;
}
.badge-store .lucecita {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sol);
  flex: none;
}
.hero__nota {
  font-size: 13px;
  /* Antes #5E7A6E: 2.6:1 sobre el degradado selva, ilegible. El token claro
     que ya usa .hero__sub llega a 5:1. */
  color: var(--verde-texto-claro);
  font-weight: 600;
  margin-top: 12px;
  animation: up 0.55s 0.5s ease-out both;
}
.hero__nota a {
  color: var(--sol-claro);
  text-underline-offset: 3px;
}

/* El teléfono del héroe, asomando desde abajo */
.hero__phone {
  justify-self: center;
  margin-bottom: -6px;
  animation: up 0.7s 0.35s ease-out both;
}

/* ============================================================
   Marco de teléfono (CSS puro, sin imágenes de bezel)
   ============================================================ */
.phone {
  /* 220px de pantalla + 22px de marco ≈ 500px de alto con la captura 900×1953 */
  width: min(242px, 70vw);
  border-radius: 46px;
  padding: 11px;
  background: #10201B;
  box-shadow: var(--sombra-hero);
  position: relative;
}
.phone::after {
  /* la isla dinámica */
  content: '';
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 86px;
  height: 24px;
  border-radius: 99px;
  background: #10201B;
}
.phone img { border-radius: 36px; }

/* ============================================================
   Secciones claras
   ============================================================ */
.seccion {
  max-width: 1080px;
  margin: 0 auto;
  padding: 88px 28px 0;
}
.kicker {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--arena);
  margin-bottom: 12px;
}
.titulo {
  font-family: var(--fraunces);
  font-weight: 450;
  font-size: clamp(30px, 4.2vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--selva);
  max-width: 560px;
  text-wrap: pretty;
}

/* Beneficios (los tres de la bienvenida 1.2) */
.beneficios {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 44px;
}
.beneficio {
  background: var(--papel);
  border-radius: var(--r-card);
  box-shadow: var(--sombra-card);
  padding: 26px 24px;
}
.beneficio__icono {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.beneficio__icono--musgo { background: var(--musgo-suave); }
.beneficio__icono--sol { background: var(--sol-suave); }
.beneficio h3 { font-size: 18px; font-weight: 800; }
.beneficio p { font-size: 15px; color: var(--tinta-suave); margin-top: 7px; }

/* Chip de clima — la intensidad SIEMPRE es clima, también en la web */
.chip-clima {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--papel);
  border-radius: 99px;
  box-shadow: var(--sombra-card);
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--selva);
  margin-top: 18px;
}
.chip-clima .solcito {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--sol-claro), var(--sol) 70%);
}
.chip-clima span { font-weight: 600; color: var(--tinta-suave); }

/* ============================================================
   Privacidad — la tarjeta selva
   ============================================================ */
.privacidad-card {
  background: linear-gradient(176deg, var(--selva) 0%, var(--selva-2) 100%);
  color: #F2EFE6;
  border-radius: 30px;
  padding: clamp(38px, 6vw, 64px) clamp(30px, 5vw, 56px);
  margin-top: 44px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.privacidad-card__sol {
  position: absolute;
  right: -40px;
  top: -40px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--sol-claro), var(--sol) 70%);
  opacity: 0.16;
  filter: blur(2px);
}
.privacidad-card h2 {
  font-family: var(--fraunces);
  font-weight: 450;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.privacidad-card h2 em { font-style: italic; color: var(--sol-claro); }
.privacidad-card p {
  font-size: 17px;
  color: var(--verde-texto-claro);
  margin: 14px auto 0;
  max-width: 440px;
  text-wrap: balance;
}

/* Promesas — pastillas suaves en vez de lista de requisitos */
.promesas {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}
.promesas li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 99px;
  padding: 10px 18px;
  font-size: 14.5px;
  font-weight: 600;
}
.promesas .check {
  flex: none;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--musgo);
  display: grid;
  place-items: center;
}
.promesas .promesa--enlace {
  background: rgba(244, 184, 96, 0.1);
  border-color: rgba(244, 184, 96, 0.35);
  padding: 0;
}
.promesas .promesa--enlace a {
  color: var(--sol-claro);
  padding: 10px 18px;
  border-radius: 99px;
  text-decoration: none;
}
.promesas .promesa--enlace a:hover { background: rgba(244, 184, 96, 0.12); }
.privacidad-card .pronto {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(244, 184, 96, 0.16);
  color: var(--sol-claro);
  border-radius: 99px;
  padding: 6px 13px;
  margin-top: 22px;
}

/* ============================================================
   Galería de pantallas
   ============================================================ */
.galeria {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(10px, 3vw, 34px);
  margin-top: 54px;
  padding-bottom: 8px;
}
.galeria .phone { width: min(242px, 60vw); }
.galeria .phone:nth-child(1) { transform: rotate(-3deg) translateY(14px); }
.galeria .phone:nth-child(3) { transform: rotate(3deg) translateY(14px); }
.galeria figcaption {
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--tinta-tenue);
  margin-top: 16px;
}

/* ============================================================
   Pie
   ============================================================ */
.footer {
  margin-top: 100px;
  background: var(--selva);
  color: var(--verde-texto-claro);
  border-radius: var(--r-grande) var(--r-grande) 0 0;
  padding: 56px 28px 40px;
}
.footer__int {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 34px;
  align-items: start;
}
.footer .wordmark { font-size: 28px; }
.footer__frase { font-size: 15px; margin-top: 10px; max-width: 340px; }
.footer__cols { display: flex; gap: 54px; flex-wrap: wrap; }
.footer__col h4 {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5E7A6E;
  margin-bottom: 12px;
}
.footer__col a {
  display: block;
  color: var(--verde-texto-claro);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  padding: 4px 0;
}
.footer__col a:hover { color: var(--crema); }
.footer__legal {
  max-width: 1080px;
  margin: 44px auto 0;
  padding-top: 22px;
  border-top: 1px solid #2A473D;
  font-size: 13px;
  color: #5E7A6E;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* ============================================================
   Páginas de texto (políticas, soporte)
   ============================================================ */
.prosa-cabecera {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 28px 0;
}
.prosa-cabecera h1 {
  font-family: var(--fraunces);
  font-weight: 450;
  font-size: clamp(34px, 5vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--selva);
}
.prosa-cabecera .meta {
  font-size: 14px;
  color: var(--tinta-tenue);
  font-weight: 600;
  margin-top: 14px;
}
.aviso-borrador {
  max-width: 720px;
  margin: 26px auto 0;
  background: var(--sol-suave);
  border-radius: 18px;
  padding: 15px 19px;
  font-size: 14px;
  color: #8A6328;
  font-weight: 600;
}
.prosa {
  max-width: 720px;
  margin: 12px auto 0;
  background: var(--papel);
  border-radius: var(--r-card);
  box-shadow: var(--sombra-card);
  padding: clamp(26px, 5vw, 48px);
}
.prosa h2 {
  font-family: var(--fraunces);
  font-weight: 600;
  font-size: 23px;
  color: var(--selva);
  margin: 34px 0 10px;
}
.prosa h2:first-child { margin-top: 0; }
.prosa p { margin: 12px 0; color: var(--tinta); }
.prosa ul { margin: 12px 0 12px 22px; }
.prosa li { margin: 7px 0; }
.prosa strong { color: var(--selva); }
.prosa .final {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1.5px dashed var(--borde);
  font-size: 14px;
  color: var(--tinta-tenue);
}
.cambiar-idioma {
  max-width: 720px;
  margin: 18px auto 0;
  padding: 0 4px;
  font-size: 14.5px;
  font-weight: 700;
}

/* Soporte */
.soporte-card {
  max-width: 720px;
  margin: 30px auto 0;
  background: var(--papel);
  border-radius: var(--r-card);
  box-shadow: var(--sombra-card);
  padding: clamp(26px, 5vw, 44px);
  text-align: center;
}
.soporte-card .sol-chico {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--sol-claro), var(--sol) 70%);
  box-shadow: 0 0 34px 10px rgba(244, 184, 96, 0.3);
  margin: 0 auto 18px;
}
.soporte-card h2 {
  font-family: var(--fraunces);
  font-weight: 600;
  font-size: 26px;
  color: var(--selva);
}
.soporte-card p { color: var(--tinta-suave); margin-top: 10px; }
.boton-correo {
  display: inline-block;
  margin-top: 22px;
  background: var(--selva);
  color: var(--crema);
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  border-radius: 99px;
  padding: 16px 30px;
  transition: transform 0.12s;
}
.boton-correo:active { transform: scale(0.97); }

/* ============================================================
   Invitación a la prueba (lista de espera)
   La rampa del clima (#9FC2A6 → #C9544A) está reservada para la intensidad
   de los momentos, así que el error del formulario usa su propio ladrillo.
   ============================================================ */
.invitacion {
  position: relative;
  overflow: hidden;
  margin-top: 44px;
  background: linear-gradient(168deg, var(--sol-suave) 0%, var(--papel) 62%);
  border: 1.5px solid var(--borde-2);
  border-radius: 30px;
  padding: clamp(30px, 5vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(26px, 4vw, 52px);
  align-items: center;
}
.invitacion__sol {
  position: absolute;
  left: -62px;
  bottom: -74px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--sol-claro), var(--sol) 70%);
  opacity: 0.22;
  filter: blur(2px);
}
.invitacion__texto { position: relative; }
.invitacion h2 {
  font-family: var(--fraunces);
  font-weight: 450;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--selva);
  text-wrap: balance;
}
.invitacion h2 em { font-style: italic; color: var(--musgo); }
.invitacion__texto p {
  font-size: 16.5px;
  color: var(--tinta-suave);
  margin-top: 16px;
  max-width: 46ch;
  text-wrap: pretty;
}

.espera { display: grid; gap: 15px; position: relative; }
.campo { display: grid; gap: 7px; }
.campo label {
  font-size: 14px;
  font-weight: 700;
  color: var(--tinta-suave);
}
.campo input {
  font-family: inherit;
  font-size: 16px;
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  color: var(--tinta);
  background: var(--papel);
  border: 1.5px solid var(--borde-2);
  border-radius: 16px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.campo input::placeholder { color: var(--tinta-suave); opacity: 1; }
.campo input:focus {
  outline: none;
  border-color: var(--musgo);
  box-shadow: 0 0 0 3px rgba(95, 141, 110, 0.2);
}
.campo input[aria-invalid='true'] { border-color: #8F4034; }
.campo input[aria-invalid='true']:focus { box-shadow: 0 0 0 3px rgba(143, 64, 52, 0.18); }
.campo__error {
  font-size: 14px;
  font-weight: 600;
  color: #8F4034;
}
/* Trampa para robots: fuera de pantalla, sin foco, invisible para lectores. */
.campo--trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.boton-sol {
  margin-top: 3px;
  min-height: 54px;
  border: none;
  border-radius: 99px;
  padding: 16px 28px;
  background: var(--sol);
  color: var(--selva);
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.12s, background 0.15s;
}
.boton-sol:hover { background: var(--sol-claro); }
.boton-sol:active { transform: scale(0.98); }
.boton-sol:focus-visible { outline: 2.5px solid var(--selva); outline-offset: 3px; }
.boton-sol:disabled {
  background: var(--durazno-2);
  color: var(--tinta-suave);
  cursor: progress;
  transform: none;
}

.espera__nota {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--tinta-suave);
  text-wrap: pretty;
}
.espera__nota--noscript { margin-top: 16px; }
.espera__aviso {
  font-size: 14.5px;
  font-weight: 600;
  color: #8F4034;
  background: #FBEDEA;
  border-radius: 16px;
  padding: 12px 15px;
  text-wrap: pretty;
}

.espera-listo {
  background: var(--papel);
  border: 1.5px solid var(--musgo-suave);
  border-radius: var(--r-card);
  padding: clamp(24px, 4vw, 34px);
  /* Confirmación: uno de los tres momentos con movimiento del lenguaje. */
  animation: up 0.4s ease-out both;
}
.espera-listo:focus { outline: none; }
.espera-listo:focus-visible { outline: 2.5px solid var(--musgo); outline-offset: 4px; }
.espera-listo__check {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--musgo);
  display: grid;
  place-items: center;
}
.espera-listo__titulo {
  font-family: var(--fraunces);
  font-weight: 600;
  font-size: 25px;
  line-height: 1.15;
  color: var(--selva);
  margin-top: 15px;
}
.espera-listo__texto {
  font-size: 15.5px;
  color: var(--tinta-suave);
  margin-top: 8px;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

/* Ya no pedimos nada: la invitación a dejar el correo sobra junto al «¡Listo!». */
.invitacion--listo .invitacion__texto p { display: none; }

/* El atributo hidden manda sobre display: grid de las reglas de arriba. */
[hidden] { display: none !important; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 860px) {
  .invitacion { grid-template-columns: 1fr; }
  .hero__int { grid-template-columns: 1fr; gap: 10px; }
  .hero__texto { padding-bottom: 44px; }
  .hero__phone { margin-bottom: -40px; }
  .beneficios { grid-template-columns: 1fr; }
  .galeria { flex-direction: column; align-items: center; }
  .galeria .phone:nth-child(1),
  .galeria .phone:nth-child(3) { transform: none; }
  .footer__int { grid-template-columns: 1fr; }
}