/* Heredado de la landing de Mi Primera Web, que tiene su CSS inline.
   Aca vive en archivo propio: la pagina del workshop es otra cosa y no
   deberia arrastrar cambios de aquella sin querer. */

/* ==========================================================================
   Mi Primera Web con IA · página de venta
   Estilo editorial: crema, serif de titular, coral de acento, navy de banda.

   TRES COSAS QUE COSTARON Y NO HAY QUE DESHACER:

   1. La clase que revela el contenido es .visible, NO .listo. La pone el
      JavaScript (IntersectionObserver y el chat). Estilizar .aparece.listo
      deja los 42 bloques con class="aparece" en opacity:0 para siempre, o
      sea media página invisible, y en pantalla se lee como texto cortado.
   2. .precio es una TARJETA centrada dentro de section#precio, no la sección.
      Al lado va .costo. Tratarla como sección descuadra todo el bloque.
   3. .miedos, .incluye, .pasos y .tpl SON las grillas, no contenedores.
      Las bandas de fondo van en section / section.alt.
   ========================================================================== */

:root{
  color-scheme:light;

  /* Blanco y grises azulados, igual que la portada de sics.app. El crema
     de la landing salio: con azul al lado se leia amarillento. */
  --crema:#ffffff;          /* el fondo general */
  --crema-banda:#f2f6fa;    /* las secciones alternas y las cajas */
  --papel:#ffffff;
  --borde:#dde5ee;
  --borde-suave:#edf2f7;

  --tinta:#23272f;
  --tinta-2:#4b5563;
  --tinta-3:#6b7280;

  --navy:#3d5a80;
  --navy-hondo:#2e4460;
  /* En la landing esto valia #1c1e2e, casi negro, para calzar con la imagen
     del hero. Aca no hay esa imagen, asi que la banda usa el navy de la
     marca y el conjunto queda azul de verdad. */
  --navy-noche:#2e4460;
  --navy-claro:#7fa3cc;

  --coral:#ee6c4d;
  --coral-hondo:#d95b3e;
  /* El acento de los textos chicos: rotulos, vinetas, horas. Va en navy
     porque la regla de marca reserva el coral para los botones de accion,
     y con coral en todo el boton dejaba de destacar.
     Se llama --acento y no --coral-texto: valia coral y ahora vale azul. */
  --acento:#31527d;
  --coral-texto:#b8481f;   /* queda para lo que sí es urgencia */
  --cian:#8fd4de;

  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  --ancho:1140px;
  --aire:clamp(64px,8vw,116px);
  /* Alto real del nav, medido. Lo usa el hero para saber cuanta pantalla le
     queda y caber entero debajo. Si el nav cambia de alto, actualizar aca. */
  --alto-nav:69px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--crema);color:var(--tinta);
  font-family:var(--sans);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 24px}
a:focus-visible,button:focus-visible{outline:2px solid var(--coral);outline-offset:3px}

/* --- Tipografía editorial ------------------------------------------------ */
h1,h2{font-family:var(--serif);font-weight:700;color:var(--tinta);margin:0}
h1{font-size:clamp(2.3rem,5.2vw,4.1rem);line-height:1.07;letter-spacing:-.015em}
h2{font-size:clamp(1.8rem,3.6vw,2.8rem);line-height:1.15;letter-spacing:-.01em}
h3{font-family:var(--sans);font-size:1.1rem;font-weight:700;line-height:1.38;margin:0}
p{margin:0 0 1.05em}
code{
  font-family:ui-monospace,'Cascadia Code',Consolas,monospace;font-size:.88em;
  background:var(--crema-banda);padding:2px 7px;border-radius:2px;color:var(--navy-hondo);
}
.marca{font-style:italic;color:var(--coral);font-weight:700}

.cabeza{margin-bottom:clamp(34px,4vw,54px);max-width:760px}
.cabeza-eyebrow{
  font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--acento);margin:0 0 15px;
}
.cabeza-sub{color:var(--tinta-2);font-size:1.08rem;margin-top:16px;max-width:660px}

/* --- Nav: opaco a propósito, sin backdrop-filter (regla web-cliente) ------ */
nav{position:sticky;top:0;z-index:50;background:var(--crema);border-bottom:1px solid var(--borde)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.logo{
  font-family:var(--serif);font-size:1.12rem;font-weight:700;
  display:flex;align-items:center;gap:9px;line-height:1.2;
}
.logo .punto,.punto{width:9px;height:9px;border-radius:50%;background:var(--navy);flex:none}
.nav-cta{
  text-decoration:none;font-size:.88rem;font-weight:600;padding:9px 18px;white-space:nowrap;
  border:1px solid var(--tinta);border-radius:2px;transition:background .18s,color .18s;
}
.nav-cta:hover{background:var(--tinta);color:var(--crema)}

/* --- Hero ---------------------------------------------------------------- */
/* La imagen ocupa la pantalla completa con un margen fino: es lo primero
   que se ve y tiene que impactar. Ojo: con esto el titular queda bajo el
   pliegue, y es una decision tomada a conciencia por Alvaro. */
.hero{position:relative;overflow:hidden;background:var(--navy-noche);padding:14px 14px 0}
/* El hero es a sangre: hay que anular el ancho maximo del contenedor. */
.hero .wrap{max-width:none;padding:0}
.hero-luz{
  position:absolute;right:-12%;top:16%;width:62%;height:82%;
  background:radial-gradient(circle,rgba(89,185,199,.24),transparent 68%);
  pointer-events:none;z-index:1;
}
/* La caja lleva la proporción EXACTA de la imagen (1600x893). Así `cover` no
   tiene nada que recortar y se ve completa en cualquier monitor.

   Antes la altura salía del viewport, así que la proporción de la caja cambiaba
   con cada pantalla: si quedaba más ancha que la imagen se comía el monograma
   de abajo, y si quedaba más angosta se comía el logo por los lados. En 16:9
   esto ocupa la pantalla igual de completo que antes, porque es la proporción
   de casi todos los monitores. */
.hero-imagen{
  position:relative;z-index:2;margin:0 auto;
  aspect-ratio:1600/893;
  height:auto;
  /* Cabe entera bajo el nav. Se limita el ANCHO y no el alto a propósito: con
     max-height la caja se ensancharía, la proporción dejaría de calzar y
     `cover` volvería a comerse el monograma. Limitando el ancho, el alto sale
     de la proporción y la imagen se ve completa, sólo que con aire a los lados
     en las pantallas anchas y bajas.

     Antes se salía 50px por abajo en 1920x1080: la caja medía 1048px de alto,
     empezaba en 83 (nav 69 + padding 14) y la pantalla llega a 1080. */
  max-width:calc((100svh - var(--alto-nav) - 14px) * 1600 / 893);
}
.hero-imagen img{
  width:100%;height:100%;object-fit:cover;object-position:center;border-radius:3px;
}
.hero-texto{background:var(--navy-noche);padding:clamp(24px,3.2vw,38px) 0 var(--aire)}
.hero-copy{max-width:800px}
.hero-texto h1{color:#fff}
.hero-texto h1 .marca{color:var(--cian)}
.hero-copy .hero-sub,.hero-sub{
  color:#c3ccd8;font-size:clamp(1rem,1.35vw,1.15rem);margin-top:18px;max-width:640px;
}
.hero-copy .hero-ctas,.hero-ctas{display:flex;flex-wrap:wrap;gap:13px;margin-top:26px}
.confianza{margin-top:18px;font-size:.88rem;color:#8d99a8}

/* --- Botones ------------------------------------------------------------- */
.btn{
  display:inline-block;text-decoration:none;font-weight:600;font-size:1rem;
  padding:15px 30px;border-radius:2px;border:1px solid transparent;cursor:pointer;
  font-family:var(--sans);line-height:1.3;text-align:center;
  transition:background .18s,border-color .18s,color .18s;
}
.btn-principal{background:var(--coral);color:#fff}
.btn-principal:hover{background:var(--coral-hondo)}
.btn-linea{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.btn-linea:hover{border-color:#fff}
.btn-secundario{background:transparent;color:var(--tinta);border-color:var(--tinta)}
.btn-secundario:hover{background:var(--tinta);color:var(--crema)}

/* --- Bandas de sección --------------------------------------------------- */
section{padding:var(--aire) 0}
section.alt{background:var(--crema-banda)}

/* --- Miedos: filas anchas, la objeción entre comillas y en cursiva -------- */
.miedos{display:grid;grid-template-columns:1fr;gap:0}
.miedo{
  display:grid;grid-template-columns:1fr 1.3fr;gap:40px;align-items:start;
  padding:30px 0;border-top:1px solid var(--borde);
}
.miedo:last-child{border-bottom:1px solid var(--borde)}
.miedo-dice{
  font-family:var(--serif);font-style:italic;color:var(--tinta);
  font-size:clamp(1.2rem,2vw,1.62rem);line-height:1.32;
}
.miedo-dice::before{content:"\201C"}
.miedo-dice::after{content:"\201D"}
.miedo-resp{color:var(--tinta-2);margin:0}

/* --- Lo que incluye ------------------------------------------------------ */
.incluye{display:grid;grid-template-columns:repeat(2,1fr);gap:34px 46px}
.item{padding-top:19px;border-top:1px solid var(--borde)}
.item-icono{
  font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--acento);margin-bottom:10px;
}
.item h3{margin-bottom:7px}
.item p{color:var(--tinta-2);margin:0;font-size:.96rem}
.item .etiqueta{
  display:inline-block;font-size:.7rem;font-weight:700;color:var(--acento);
  letter-spacing:.14em;text-transform:uppercase;margin:0 0 8px;
}
.item .requisito{
  margin-top:12px;padding:11px 0 0;border-top:1px solid var(--borde-suave);
  border-left:0;background:none;font-size:.88rem;color:var(--tinta-3);
}

/* --- Pasos: número serif coral a la izquierda ---------------------------- */
.pasos{display:grid;grid-template-columns:1fr;gap:0}
.paso{
  display:grid;grid-template-columns:74px 1fr;gap:22px;align-items:start;
  padding:26px 0;border-top:1px solid var(--borde);
}
.paso:last-child{border-bottom:1px solid var(--borde)}
.paso-num{font-family:var(--serif);font-size:2.4rem;line-height:1;color:var(--coral);font-weight:400}
.paso h3{margin-bottom:7px}
.paso p{color:var(--tinta-2);font-size:.97rem;margin:0}

/* --- Plantillas ---------------------------------------------------------- */
.tpl{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tpl-card{
  background:var(--papel);border:1px solid var(--borde);overflow:hidden;
  transition:border-color .2s,transform .2s;
}
.tpl-card:hover{border-color:var(--coral);transform:translateY(-3px)}
.tpl-card img{width:100%;border-bottom:1px solid var(--borde-suave)}
.tpl-pie{padding:15px 17px}
.tpl-pie h3{font-size:.98rem;margin-bottom:2px}
.tpl-pie p{margin:0;font-size:.87rem;color:var(--tinta-3)}
.tpl-pie span{display:block;font-weight:400;font-size:.8rem;color:var(--tinta-3);margin-top:3px}

/* --- Precio: TARJETA centrada, no sección -------------------------------- */
.precio{
  max-width:470px;margin:0 auto;background:var(--papel);
  border:1px solid var(--borde);padding:38px 32px;text-align:center;
}

/* --- Las dos ofertas, parejas -------------------------------------------
   Mismo ancho y mismo alto: si una fuera mas grande dejaria de ser una
   eleccion y pasaria a ser una recomendacion.                            */
/* Quedo una sola oferta. Se mantiene el contenedor para no tocar el
   resto del CSS, con el ancho de una tarjeta. */
.dos-ofertas{max-width:470px;margin:0 auto}
.dos-ofertas .precio{max-width:none;margin:0;display:flex;flex-direction:column}
/* La lista empuja el boton al fondo: las dos listas tienen largo distinto y
   sin esto los botones quedan a distinta altura. */
.dos-ofertas .precio-lista{flex:1}
/* Rotulo que parte la lista en dos: lo de la clase y lo del pack. Sin el,
   nueve vinetas seguidas se leen como una sola bolsa y se pierde cual es la
   parte que se paga de mas. */
.lista-rotulo{
  font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-3);margin:16px 0 2px;
}
.lista-rotulo::before{content:none !important}
.oferta-tag{
  display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:5px 11px;border-radius:2px;margin-bottom:4px;
}
.tag-clase{background:var(--coral);color:#fff}
.tag-pack{background:var(--crema-banda);color:var(--tinta-3)}
.oferta-cuando{
  font-size:.86rem;color:var(--tinta-2);margin:-14px 0 22px;line-height:1.5;
}
.oferta-cuando b{color:var(--tinta)}
.oferta-cuando .porconfirmar{color:var(--acento);font-weight:700}

/* El formulario de inscripcion, dentro de la tarjeta de la clase. */
.insc-aviso{
  background:var(--crema-banda);border-radius:3px;padding:12px 15px;
  font-size:.88rem;color:var(--tinta-2);margin-bottom:18px;line-height:1.55;
  text-align:left;
}
.insc-aviso b{color:var(--tinta)}
.campo{
  width:100%;padding:13px 14px;font-size:1rem;font-family:inherit;
  border:1px solid var(--borde);border-radius:3px;background:var(--crema);
  color:var(--tinta);margin-bottom:11px;
}
.campo:focus{outline:2px solid var(--coral);outline-offset:1px;border-color:var(--coral)}
.acepto{
  display:flex;gap:9px;text-align:left;font-size:.82rem;
  color:var(--tinta-3);line-height:1.5;margin-bottom:14px;
}
.acepto input{margin-top:3px;flex:none}
.acepto a{color:var(--navy)}
.cf-turnstile{display:flex;justify-content:center;margin-bottom:14px;min-height:65px}
.insc-error{color:#b03a2e;font-size:.86rem;margin-top:11px;min-height:1.1em}
.dentro{text-align:center;padding:18px 0}
.dentro .tic{
  width:52px;height:52px;border-radius:50%;background:var(--coral);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.6rem;
  margin:0 auto 16px;
}
.dentro h3{font-family:var(--serif);font-size:1.45rem;margin-bottom:10px}
.dentro p{color:var(--tinta-2);margin-bottom:9px;font-size:.95rem}
.dentro .fino{font-size:.83rem;color:var(--tinta-3)}
.precio .cabeza-eyebrow{margin-bottom:10px}
.precio-monto{
  font-family:var(--serif);font-weight:700;font-size:clamp(2.6rem,5vw,3.3rem);
  letter-spacing:-.03em;line-height:1.05;margin:10px 0 4px;color:var(--tinta);
}
.precio-nota{
  color:var(--tinta-3);font-size:.76rem;margin-bottom:24px;
  letter-spacing:.14em;text-transform:uppercase;
}
.precio-lista{text-align:left;display:flex;flex-direction:column;gap:11px;margin-bottom:26px}
.precio-lista div{display:flex;gap:11px;font-size:.95rem;color:var(--tinta-2);align-items:baseline}
.precio-lista div::before{content:"\2713";color:var(--acento);font-weight:700;flex-shrink:0}
.precio .btn{width:100%}
.precio-medio{color:var(--tinta-3);font-size:.82rem;margin-top:10px;line-height:1.5}
.precio-medio a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.precio-legal{color:var(--tinta-3);font-size:.82rem;margin-top:14px;line-height:1.5}
.precio-legal a{color:var(--navy)}
.precio-legal strong{color:var(--tinta)}
.requisito{
  border-left:2px solid var(--coral);padding:13px 17px;margin:22px 0;
  background:var(--papel);font-size:.93rem;color:var(--tinta-2);text-align:left;
}

/* --- Desglose del costo -------------------------------------------------- */
.costo{
  background:var(--papel);border:1px solid var(--borde);padding:28px;
  max-width:640px;margin:34px auto 0;
}
.costo-fila{
  display:flex;justify-content:space-between;gap:24px;padding:13px 0;
  border-bottom:1px solid var(--borde-suave);align-items:baseline;
}
.costo-fila span:first-child{color:var(--tinta-2);font-size:.95rem}
.costo-fila span:last-child{font-weight:600;white-space:nowrap;flex:none}
/* La descripción va DENTRO del primer <span>: sin esto se lee
   "Este packLa guía, las 7 plantillas..." todo pegado. */
.costo-fila small{display:block;color:var(--tinta-3);font-size:.84rem;margin-top:3px;line-height:1.45}
.costo-total{
  display:flex;justify-content:space-between;gap:24px;padding:17px 0 0;
  font-weight:700;font-size:1.1rem;font-family:var(--serif);
}
.costo-total span:last-child{color:var(--coral);white-space:nowrap;flex:none}
.costo-remate{margin:16px 0 0;color:var(--tinta-2);font-size:.93rem}
.costo-remate strong{color:var(--tinta)}

/* --- Franja de autor ----------------------------------------------------- */
/* La franja es una CAJA dentro del .wrap, no una banda a sangre: necesita su
   propio padding por los cuatro lados. Con `padding: var(--aire) 0` el texto
   quedaba pegado al borde izquierdo del bloque navy. */
.franja{
  background:var(--navy-hondo);color:#e7ecf3;border-radius:3px;
  padding:clamp(30px,3.6vw,50px);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,34px);
  align-items:center;
}
.franja h2{color:#fff}
.franja h3{font-family:var(--serif);font-size:1.18rem;margin-bottom:8px;color:#fff}
.franja p{color:#c3ccd8;margin-bottom:0}
.franja .marca{color:var(--cian)}
/* 78px y no 50: adentro van dos líneas de texto. En 50 se desbordaban y se
   leían como tres renglones sueltos encima del círculo. */
.franja-icono{
  width:78px;height:78px;border-radius:50%;background:var(--coral);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-weight:700;font-size:.72rem;line-height:1.3;letter-spacing:.03em;
  text-align:center;flex:none;margin:0;
}
@media (max-width:620px){
  .franja{grid-template-columns:1fr;gap:18px}
}
.yo{color:#c3ccd8}

/* --- FAQ ----------------------------------------------------------------- */
.faq-item{border-bottom:1px solid var(--borde)}
.faq-item:last-child{border-bottom:0}
.faq-q{
  width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:21px 42px 21px 0;position:relative;font-family:var(--sans);
  font-size:1.02rem;font-weight:600;color:var(--tinta);line-height:1.45;
}
.faq-q:hover{color:var(--coral)}
.faq-q .mas,.mas{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-size:1.4rem;color:var(--coral);line-height:1;font-weight:400;transition:transform .22s;
}
.faq-item.abierta .mas{transform:translateY(-50%) rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a-dentro{padding:0 42px 22px 0;color:var(--tinta-2)}
.faq-a code{
  font-family:ui-monospace,Consolas,monospace;font-size:.88em;
  background:var(--crema-banda);padding:1px 6px;border-radius:2px;
}

/* --- Chat animado -------------------------------------------------------- */
/* margin:0 auto o la caja se queda pegada a la izquierda del .wrap. */
.chat{background:var(--papel);border:1px solid var(--borde);max-width:560px;margin:0 auto;overflow:hidden}
.chat-barra{
  display:flex;align-items:center;gap:11px;padding:13px 17px;
  border-bottom:1px solid var(--borde-suave);background:var(--crema);
}
.chat-avatar{
  width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.74rem;font-weight:700;flex:none;
}
.chat-quien{font-size:.9rem;font-weight:600}
.chat-estado{font-size:.75rem;color:var(--tinta-3);margin-left:auto;display:flex;align-items:center;gap:6px}
.chat-estado::before{content:"";width:7px;height:7px;border-radius:50%;background:#4ba36a;flex:none}
.chat-cuerpo{padding:19px;display:flex;flex-direction:column;gap:11px;min-height:290px}
.burbuja{
  max-width:82%;padding:12px 16px;border-radius:14px;font-size:.94rem;line-height:1.5;
  opacity:0;transform:translateY(8px);transition:opacity .32s ease,transform .32s ease;
}
.burbuja.visible{opacity:1;transform:none}
/* El JS considera de la IA a las que tienen .ia O .listo: las dos van igual. */
.burbuja.ia,.burbuja.listo{background:var(--crema-banda);color:var(--tinta);align-self:flex-start;border-bottom-left-radius:4px}
.burbuja.yo{background:var(--navy);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
/* Los tres puntitos de "escribiendo": los inserta el JS y los saca solo. */
.escribiendo{
  align-self:flex-start;background:var(--crema-banda);border:1px solid var(--borde-suave);
  border-radius:14px;border-bottom-left-radius:4px;padding:12px 16px;
  display:flex;gap:5px;align-items:center;opacity:0;transition:opacity .25s ease;
}
.escribiendo.visible{opacity:1}
.escribiendo span{
  width:6px;height:6px;border-radius:50%;background:var(--tinta-3);
  animation:punto 1.1s infinite ease-in-out;
}
.escribiendo span:nth-child(2){animation-delay:.15s}
.escribiendo span:nth-child(3){animation-delay:.3s}
@keyframes punto{
  0%,60%,100%{transform:translateY(0);opacity:.4}
  30%{transform:translateY(-4px);opacity:1}
}
.chat-abajo{
  padding:12px 17px;border-top:1px solid var(--borde-suave);
  font-size:.82rem;color:var(--tinta-3);background:var(--crema);
}

/* --- Cierre y pie -------------------------------------------------------- */
/* OJO: la sección es <section class="cierre alt">. Con solo .cierre, la
   regla section.alt (crema) gana por especificidad y el titular blanco
   queda ilegible sobre fondo claro. Por eso va calificado con section. */
section.cierre{background:var(--navy-noche);color:#fff;text-align:center}
section.cierre h2{color:#fff;margin-bottom:16px}
section.cierre p,section.cierre .hero-sub{color:#c3ccd8;max-width:560px;margin:0 auto 30px;text-align:center}
.etiqueta{
  display:inline-block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--coral);margin-bottom:15px;font-weight:600;
}
footer{background:var(--navy-noche);color:#8d99a8;padding:0 0 40px}
footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.pie-links{display:flex;gap:20px;flex-wrap:wrap}
.pie-links a{color:#c3ccd8;text-decoration:none;font-size:.87rem}
.pie-links a:hover{color:var(--coral)}
.pie-txt{font-size:.82rem;margin:0}
/* Credito SICS: discreto y sin subrayado por defecto, como manda la regla
   de marca. Va claro porque el pie es oscuro. */
.pie-txt a{color:#dfe5ec;text-decoration:none}
.pie-txt a:hover{text-decoration:underline;text-underline-offset:3px}

/* --- Modales: son <dialog> nativos --------------------------------------
   Sin estas reglas Chrome les pinta su borde negro y no atenúa el fondo. */
dialog,#modal-correo,#modal-espera{
  border:0;padding:0;background:transparent;color:var(--tinta);
  max-width:min(92vw,470px);
}
dialog::backdrop,#modal-correo::backdrop,#modal-espera::backdrop{background:rgba(28,30,46,.62)}
.modal-caja{background:var(--papel);border:1px solid var(--borde);padding:30px;width:100%}
.modal-caja h3{font-family:var(--serif);font-size:1.4rem;margin-bottom:10px}
.modal-caja p{color:var(--tinta-2);font-size:.96rem}
.modal-caja input{
  width:100%;padding:13px 15px;font-size:1rem;font-family:var(--sans);
  border:1px solid var(--borde);border-radius:2px;background:var(--crema);color:var(--tinta);
}
.modal-caja input:focus{outline:2px solid var(--coral);outline-offset:1px;border-color:transparent}
.modal-botones{display:flex;gap:11px;margin-top:20px;flex-wrap:wrap}
.modal-botones .btn{flex:1;min-width:130px;padding:13px 20px}
.modal-error{color:var(--coral-hondo);font-size:.87rem;margin-top:9px;min-height:1.2em}
.modal-escape{margin:16px 0 0;font-size:.85rem;color:var(--tinta-3);text-align:center}
.modal-escape a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
#estado-pago{font-size:.87rem;color:var(--tinta-3);margin-top:12px;min-height:1.2em}

/* --- Entrada al hacer scroll --------------------------------------------
   OJO: la clase que pone el JS es .visible. Con .listo esto queda invisible. */
.aparece{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.aparece.visible{opacity:1;transform:none}

/* --- Tablet y celular ---------------------------------------------------- */
@media (max-width:960px){
  .tpl{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .miedo{grid-template-columns:1fr;gap:10px}
}
@media (max-width:760px){
  body{font-size:16px}
  .incluye{grid-template-columns:1fr;gap:28px}
  .paso{grid-template-columns:52px 1fr;gap:15px}
  .paso-num{font-size:1.9rem}
  .hero-ctas .btn{width:100%}
  .costo{padding:20px}
  .precio{padding:30px 22px}
  footer .wrap{flex-direction:column;text-align:center}
  .pie-links{justify-content:center}
}
@media (max-width:760px){
  .hero{padding:10px 10px 0}
  /* La imagen es 16:9 y el hueco en un celular es vertical: con altura de
     pantalla, `cover` recortaba el 71% del ancho y del logo "SICS" sobrevivía
     un pedazo. Con proporción 4:3 el logo entra completo y la imagen sigue
     siendo grande. */
  /* En vertical sobra alto, así que el límite de ancho del escritorio no
     aplica: anularlo o la imagen se achicaría sin motivo. */
  .hero-imagen{height:auto;aspect-ratio:4/3;max-height:none;min-height:0;max-width:none}
}
@media (max-width:520px){
  .tpl{grid-template-columns:1fr}
}

/* --- Respeto por quien pidió menos animación ----------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .aparece,.burbuja,.escribiendo{transition:none;opacity:1;transform:none}
  .escribiendo span{animation:none}
}