/* ==========================================================================
   NOOKINO — Landing de campaña (agenda de visitas)
   Página de aterrizaje de los anuncios de Meta. Objetivo único: agendar visita.
   Usa exclusivamente las variables de tokens.css. No hay colores hardcodeados.

   Se carga DESPUÉS de site.css: reutiliza .wrap, .btn, .eyebrow, .lead
   y solo agrega lo que la landing necesita de más.
   ========================================================================== */

/* ---------- Encabezado reducido -----------------------------------------
   Sin menú de navegación: en una landing cada enlace es una fuga.
   Solo marca, teléfono (llamar también es conversión) e idioma.            */
.lp-header{
  position:sticky;top:0;z-index:50;
  background:rgba(249,245,234,.94);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--line);
}
.lp-header .wrap{
  display:flex;align-items:center;gap:var(--sp-2);
  min-height:64px;
}
.lp-logo{
  display:block;width:150px;height:34px;flex:0 0 auto;
  background:var(--logo-horizontal) left center/contain no-repeat;
  text-indent:-9999px;overflow:hidden;white-space:nowrap;
}
.lp-header .sep{flex:1}
.lp-tel{
  font-weight:700;color:var(--brand);text-decoration:none;
  letter-spacing:var(--track-ui);white-space:nowrap;
}
.lp-tel:hover{text-decoration:underline}
.lp-lang{display:flex;gap:.35rem;font-size:var(--fs-micro)}
.lp-lang a{
  color:var(--ink-soft);text-decoration:none;padding:.2rem .45rem;
  border-radius:6px;letter-spacing:.08em;font-weight:700;
}
.lp-lang a[aria-current="true"]{background:var(--brand);color:#fff}

/* ---------- Hero con formulario a la vista ------------------------------ */
.lp-hero{
  position:relative;overflow:hidden;
  padding:var(--sp-4) 0 var(--sp-5);
  background:
    radial-gradient(58% 80% at 88% 8%,  rgba(255,133,78,.15), transparent 62%),
    radial-gradient(52% 78% at 6% 96%,  rgba(117,217,224,.20), transparent 64%),
    var(--bg);
}
/* z-index: los globos decorativos van al fondo, el contenido encima.
   Sin esto un globo se monta sobre el formulario y tapa el botón. */
.lp-hero .blob{z-index:0}
.lp-hero .wrap{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:var(--sp-5);align-items:start;
}
.lp-hero h1{
  font-family:var(--font-display);font-weight:600;
  font-size:var(--fs-hero);line-height:1.06;
  letter-spacing:var(--track-display);color:var(--ink);
  margin-bottom:var(--sp-2);
}
.lp-hero h1 em{font-style:normal;color:var(--accent)}
.lp-hero .lead{margin-bottom:var(--sp-3)}

/* Puntos de confianza del hero */
.lp-puntos{list-style:none;display:grid;gap:var(--sp-1);margin-bottom:var(--sp-3)}
.lp-puntos li{
  display:flex;gap:.7rem;align-items:flex-start;
  font-size:var(--fs-body);color:var(--ink-soft);
}
.lp-puntos svg{
  flex:0 0 auto;width:21px;height:21px;margin-top:2px;
  fill:none;stroke:var(--forest);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
}
.lp-puntos b{color:var(--ink)}

/* Aviso de urgencia honesta: cupo real, sin inventar escasez */
.lp-cupo{
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--surface);border:1.5px solid var(--line);
  border-left:5px solid var(--accent);
  border-radius:var(--r-sm);padding:.7rem 1rem;
  font-size:var(--fs-small);color:var(--ink-soft);
}
.lp-cupo b{color:var(--ink)}

/* ---------- Tarjeta del formulario -------------------------------------- */
.lp-form-card{
  background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-md);
  padding:var(--sp-3);position:sticky;top:88px;
  /* margen para que el encabezado fijo no tape el título al saltar aquí */
  scroll-margin-top:84px;
}
.lp-form-card h2{
  font-family:var(--font-display);font-weight:600;
  font-size:var(--fs-h3);line-height:1.2;color:var(--ink);
  margin-bottom:.35rem;
}
.lp-form-card .sub{
  font-size:var(--fs-small);color:var(--ink-soft);
  margin-bottom:var(--sp-2);
}
.campo{margin-bottom:var(--sp-2)}
.campo label{
  display:block;font-size:var(--fs-small);font-weight:700;
  color:var(--ink);margin-bottom:.3rem;letter-spacing:var(--track-ui);
}
.campo label .op{font-weight:400;color:var(--ink-soft)}
.campo input,
.campo select,
.campo textarea{
  width:100%;font-family:var(--font-body);font-size:var(--fs-body);
  color:var(--ink);background:var(--bg-alt);
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:.7rem .85rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.campo textarea{min-height:76px;resize:vertical}
.campo select{
  appearance:none;cursor:pointer;padding-right:2.4rem;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A5A4E' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .85rem center;
  background-size:17px;
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(255,113,91,.18);
}
.campo-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}

/* Preferencia de idioma de la visita. Son radios de verdad dentro de un
   fieldset, no adorno: viajan en el envío de Netlify y funcionan con el
   teclado y con JavaScript apagado. */
.campo-idioma{border:0;padding:0;margin:0 0 var(--sp-2)}
.campo-idioma .lab{
  display:block;padding:0;font-size:var(--fs-small);font-weight:700;
  color:var(--ink);margin-bottom:.3rem;letter-spacing:var(--track-ui);
}
.idioma-op{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.idioma-op input{position:absolute;width:1px;height:1px;opacity:0}
.idioma-op label{
  display:flex;align-items:center;justify-content:center;
  margin:0;padding:.7rem .5rem;cursor:pointer;
  font-size:var(--fs-small);font-weight:700;color:var(--ink-soft);
  background:var(--bg-alt);border:1.5px solid var(--line);border-radius:var(--r-sm);
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.idioma-op label:hover{border-color:var(--brand-2)}
.idioma-op input:checked + label{
  background:var(--casa-conejo);border-color:var(--casa-conejo);color:var(--ink);
}
.idioma-op input:focus-visible + label{
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,113,91,.18);
}
.lp-form-card .btn{width:100%;justify-content:center;font-size:1.05rem;padding:.95rem 1rem}
.lp-nota{
  font-size:var(--fs-micro);color:var(--ink-soft);
  text-align:center;margin-top:var(--sp-1);line-height:1.45;
}
/* Trampa antispam: invisible para personas, visible para robots */
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* Separador "o" entre formulario y WhatsApp */
.lp-o{
  display:flex;align-items:center;gap:.8rem;
  margin:var(--sp-2) 0;color:var(--ink-soft);
  font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;
}
.lp-o::before,.lp-o::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- Bloques de contenido ---------------------------------------- */
.lp-sec{padding:var(--sp-5) 0}
.lp-sec.alt{background:var(--bg-alt);border-block:1px solid var(--line)}
.lp-sec h2{
  font-family:var(--font-display);font-weight:600;
  font-size:var(--fs-h2);line-height:1.14;
  letter-spacing:var(--track-display);color:var(--ink);
  margin-bottom:var(--sp-2);
}
.lp-sec .head{max-width:62ch;margin-bottom:var(--sp-4)}

/* Los tres pasos de la visita */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}
.paso{
  background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--r-md);padding:var(--sp-3);
}
.paso .n{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  background:var(--accent);color:#fff;
  font-family:var(--font-display);font-weight:600;font-size:1.15rem;
  margin-bottom:var(--sp-2);
}
.paso h3{
  font-family:var(--font-display);font-weight:600;
  font-size:var(--fs-h3);color:var(--ink);margin-bottom:.4rem;
}
.paso p{font-size:var(--fs-body);color:var(--ink-soft)}

/* Datos que ya se saben antes de venir */
.lp-datos{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--sp-3)}
.lp-panel{
  background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--r-md);padding:var(--sp-3);
}
.lp-panel h3{
  font-family:var(--font-display);font-weight:600;
  font-size:var(--fs-h3);color:var(--ink);margin-bottom:var(--sp-2);
}
.lp-panel table{width:100%;border-collapse:collapse;font-size:var(--fs-body)}
.lp-panel th{
  text-align:left;font-size:var(--fs-micro);letter-spacing:.09em;
  text-transform:uppercase;color:var(--brand);font-weight:700;
  padding-bottom:.5rem;border-bottom:1.5px solid var(--line);
}
.lp-panel th+th,.lp-panel td+td{text-align:right}
.lp-panel td{padding:.62rem 0;border-bottom:1px solid var(--line);color:var(--ink-soft)}
.lp-panel td:first-child{color:var(--ink);font-weight:600}
.lp-panel td .mes{display:block;font-size:var(--fs-micro);font-weight:400;color:var(--ink-soft)}
.lp-panel tr:last-child td{border-bottom:none}
.lp-pill{
  margin-top:var(--sp-2);background:var(--bg);border-radius:var(--r-sm);
  padding:.8rem 1rem;font-size:var(--fs-small);color:var(--ink-soft);
}
.lp-pill b{color:var(--ink)}
.lp-lista{list-style:none;display:grid;gap:.55rem}
.lp-lista li{
  display:flex;justify-content:space-between;gap:var(--sp-2);
  align-items:baseline;font-size:var(--fs-body);
  color:var(--ink-soft);padding-bottom:.55rem;
  border-bottom:1px solid var(--line);
}
.lp-lista li:last-child{border-bottom:none;padding-bottom:0}
.lp-lista b{color:var(--ink);text-align:right}

/* Preguntas frecuentes, sin JavaScript */
.faq{display:grid;gap:.7rem;max-width:none}
.faq details{
  background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;
}
.faq details[open]{border-color:var(--brand-2)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.05rem var(--sp-3);
  font-weight:700;color:var(--ink);font-size:var(--fs-body);
  display:flex;justify-content:space-between;gap:var(--sp-2);align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:0 0 auto;width:12px;height:12px;
  border-right:2.4px solid var(--brand);border-bottom:2.4px solid var(--brand);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .18s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.faq .r{padding:0 var(--sp-3) 1.15rem;color:var(--ink-soft);font-size:var(--fs-body)}
.faq .r a{color:var(--brand)}

/* Ubicación */
.lp-mapa{
  border-radius:var(--r-md);overflow:hidden;
  border:1.5px solid var(--line);background:var(--mapa-bg);
  min-height:300px;
}
.lp-mapa iframe{display:block;width:100%;height:100%;min-height:300px;border:0}

/* Cierre */
.lp-cierre{
  text-align:center;background:var(--cta-bg);color:var(--cta-on);
  border-radius:var(--r-lg);padding:var(--sp-5) var(--sp-3);
}
.lp-cierre h2{color:var(--cta-on);margin-bottom:var(--sp-2)}
.lp-cierre p{
  color:var(--cta-on);opacity:.9;max-width:56ch;
  margin:0 auto var(--sp-3);font-size:var(--fs-lead);
}
.lp-cierre .btn--primary{background:var(--sunrise);color:var(--ink);border-color:var(--sunrise)}

/* Pie mínimo */
.lp-footer{
  padding:var(--sp-3) 0 92px;border-top:1px solid var(--line);  /* 92px: espacio del botón flotante de WhatsApp */
  font-size:var(--fs-micro);color:var(--ink-soft);text-align:center;
}
.lp-footer a{color:var(--ink-soft)}
/* Firma de autoría sobre fondo claro */
.lp-footer .credito b{color:var(--ink)}

/* ---------- Página de gracias ------------------------------------------- */
.lp-gracias{
  min-height:76vh;display:flex;align-items:center;
  padding:var(--sp-5) 0;
  background:
    radial-gradient(56% 80% at 84% 12%, rgba(0,172,110,.16), transparent 62%),
    var(--bg);
}
.lp-gracias .caja{max-width:66ch;margin:0 auto;text-align:center}
.lp-gracias .tic{
  width:76px;height:76px;border-radius:50%;
  background:var(--forest);margin:0 auto var(--sp-3);
  display:flex;align-items:center;justify-content:center;
}
.lp-gracias .tic svg{
  width:38px;height:38px;fill:none;stroke:#fff;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;
}
.lp-gracias h1{
  font-family:var(--font-display);font-weight:600;
  font-size:var(--fs-h2);line-height:1.14;color:var(--ink);
  letter-spacing:var(--track-display);margin-bottom:var(--sp-2);
}
.lp-gracias .cta-row{justify-content:center}
.lp-pasos-g{
  display:grid;gap:var(--sp-2);text-align:left;
  margin:var(--sp-4) auto 0;max-width:52ch;
}
.lp-pasos-g li{
  display:flex;gap:var(--sp-2);align-items:flex-start;
  background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--r-sm);padding:1rem 1.1rem;
  font-size:var(--fs-body);color:var(--ink-soft);list-style:none;
}
.lp-pasos-g .b{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:var(--bg);color:var(--brand);font-weight:700;
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-small);
}
.lp-pasos-g b{color:var(--ink)}

/* ---------- Adaptación a pantallas chicas ------------------------------- */
@media (max-width:980px){
  .lp-hero .wrap{grid-template-columns:1fr;gap:var(--sp-4)}
  .lp-form-card{position:static}
  .pasos{grid-template-columns:1fr}
  .lp-datos{grid-template-columns:1fr}
}
@media (max-width:560px){
  .lp-hero{padding:var(--sp-3) 0 var(--sp-4)}
  .lp-header .wrap{min-height:58px}
  .lp-logo{width:124px;height:28px}
  .lp-tel{font-size:var(--fs-small)}
  .campo-2{grid-template-columns:1fr}
  .lp-form-card{padding:var(--sp-2);border-radius:var(--r-md)}
  .lp-cierre{padding:var(--sp-4) var(--sp-2)}
}

/* ---------- Barra fija de acción en celular -----------------------------
   En pantalla chica el formulario queda debajo del texto del hero, fuera
   de la primera vista. Esta barra mantiene la acción siempre a un toque.
   En escritorio no aparece: ahí el formulario ya se ve de entrada.        */
.lp-bar{display:none}

@media (max-width:980px){
  .lp-bar{
    display:flex;gap:.6rem;align-items:center;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
    background:rgba(249,245,234,.97);
    backdrop-filter:saturate(1.4) blur(8px);
    border-top:1px solid var(--line);
    box-shadow:0 -6px 22px rgba(74,46,38,.10);
  }
  .lp-bar .btn{flex:1;justify-content:center;margin:0}
  .lp-bar .btn--wa{flex:0 0 auto;width:52px;padding:.85rem 0}
  .lp-bar .btn--wa span{display:none}
  .lp-bar .btn--wa svg{width:22px;height:22px;fill:currentColor}

  /* El botón flotante de WhatsApp estorbaría con la barra */
  .wa-float{display:none !important}

  /* Espacio para que la barra no tape el final de la página */
  body{padding-bottom:76px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}

/* ================= CCS · la beca de cuidado infantil =================
   Va debajo de las colegiaturas, que es donde una familia se pregunta si
   el costo le alcanza. El enlace sale al sitio oficial del estado: la
   solicitud no se llena aqui ni la resuelve el centro. El acento es azul
   cielo a proposito, para no confundirse con el verde de WhatsApp. ==== */
.campo-ccs{
  display:flex;gap:.75rem;align-items:flex-start;cursor:pointer;
  background:var(--bg);border:1.5px solid var(--line);
  border-radius:var(--r-sm);padding:.9rem 1rem;margin:0 0 var(--sp-2);
}
.campo-ccs:hover{border-color:var(--brand-2)}
.campo-ccs input{
  flex:none;width:1.15rem;height:1.15rem;margin-top:.15rem;
  accent-color:var(--brand);cursor:pointer;
}
.campo-ccs span{font-size:var(--fs-small);color:var(--ink);font-weight:600}
.campo-ccs em{
  display:block;font-style:normal;font-weight:400;
  font-size:var(--fs-micro);color:var(--ink-soft);margin-top:.25rem;
}

.lp-ccs{
  margin-top:var(--sp-3);background:var(--surface);
  border:1.5px solid var(--line);border-left:5px solid var(--razon-2);
  border-radius:var(--r-md);padding:var(--sp-3);
  display:grid;grid-template-columns:1.35fr .65fr;gap:var(--sp-3);align-items:center;
}
.lp-ccs h3{
  font-family:var(--font-display);font-weight:600;
  font-size:var(--fs-h3);color:var(--ink);margin-bottom:var(--sp-1);
}
.lp-ccs p{font-size:var(--fs-body);color:var(--ink-soft);margin-bottom:.75rem}
.lp-ccs p:last-child{margin-bottom:0}
.lp-ccs ul{list-style:none;display:grid;gap:.45rem;margin:0 0 .9rem}
.lp-ccs li{
  font-size:var(--fs-small);color:var(--ink-soft);
  padding-left:1.35rem;position:relative;
}
.lp-ccs li::before{
  content:"";position:absolute;left:0;top:.5em;
  width:.5rem;height:.5rem;border-radius:50%;background:var(--razon-2);
}
.lp-ccs-cta{display:grid;justify-items:center;gap:.65rem;text-align:center}
.lp-ccs-cta .fuente{font-size:var(--fs-micro);color:var(--ink-soft);line-height:1.5}
/* .btn es inline-flex sin justify-content: sin esto la etiqueta se recarga
   a un lado en cuanto el boton crece. Cafe solido, no contorno: contra el
   panel blanco el contorno se lavaba y no se leia como boton. */
.btn--ccs{
  justify-content:center;background:var(--ink);color:var(--cotton);
  border:2px solid var(--ink);
}
.btn--ccs:hover{background:var(--brand);border-color:var(--brand);color:var(--cotton)}
@media (max-width:820px){ .lp-ccs{grid-template-columns:1fr;gap:var(--sp-2)} }

/* ============ Despues de la escuela · escuelas cercanas ==============
   Las distancias son en linea recta, calculadas con las coordenadas de
   OpenStreetMap contra 1600 W Canton Rd. Se etiquetan como aproximadas
   a proposito: manejando siempre da un poco mas. El mapa es una busqueda
   de escuelas centrada en el centro, asi se actualiza solo. ========== */
.lp-escuelas{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);align-items:start}
.lp-esc-lista{list-style:none;display:grid;gap:0;margin:var(--sp-2) 0 0}
.lp-esc-lista li{
  display:flex;align-items:baseline;gap:var(--sp-2);
  padding:.7rem 0;border-bottom:1px solid var(--line);
}
.lp-esc-lista li:last-child{border-bottom:none}
.lp-esc-lista .km{
  flex:none;min-width:4.4rem;font-size:var(--fs-micro);font-weight:700;
  color:var(--brand);letter-spacing:.02em;
}
.lp-esc-lista .esc{font-size:var(--fs-small);color:var(--ink);font-weight:600}
.lp-esc-lista .calle{display:block;font-size:var(--fs-micro);font-weight:400;color:var(--ink-soft)}
.lp-esc-mapa{
  border-radius:var(--r-md);overflow:hidden;border:1.5px solid var(--line);
  background:var(--surface);
}
.lp-esc-mapa iframe{display:block;width:100%;height:420px;border:0}
.lp-esc-pie{
  margin-top:var(--sp-2);font-size:var(--fs-micro);
  color:var(--ink-soft);line-height:1.55;
}
@media (max-width:900px){
  .lp-escuelas{grid-template-columns:1fr;gap:var(--sp-3)}
  .lp-esc-mapa iframe{height:300px}
}