/* ==========================================================================
   CAPACITA+ — Landing de promoción
   Identidad propia de la promoción, independiente del sitio que la aloja
   (corre igual en NextGen y en AtomicTraining): verde corporativo profundo
   sobre papel claro, acento verde para el "+" de la marca y rojo reservado
   únicamente para las llamadas a la acción principales. Este archivo es
   deliberadamente idéntico al de NextGen — no se retoca al copiarlo.

   Mobile first: todo el archivo se escribe para el ancho chico y las media
   queries de abajo escalan hacia escritorio.
   ========================================================================== */

:root{
  /* Verdes de marca */
  --green-900:  #072A20;
  --green-800:  #0B3B2C;
  --green-700:  #10513A;
  --green-600:  #14684A;
  --green-500:  #1FA463;
  --green-300:  #7ED0A5;
  --mint-100:   #E9F4EE;
  --mint-50:    #F2F8F4;

  /* Neutros */
  --navy:       #12283A;
  --ink:        #1C2B24;
  --muted:      #5D6E66;
  --muted-2:    #8A9992;
  --line:       #DCE5E0;
  --line-soft:  #EBF1ED;
  --paper:      #FFFFFF;
  --paper-2:    #F4F7F5;

  /* Rojo de acción. Solo botones primarios: si aparece en más lugares deja
     de leerse como "aquí se hace clic". */
  --red:        #C62B27;
  --red-hi:     #A82320;

  /* Tipografía */
  --f-display:  "Montserrat", "Segoe UI", system-ui, sans-serif;
  --f-body:     "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-script:   "Caveat", cursive;

  /* Métricas */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --wrap: 1200px;
  --nav-h: 72px;
  --shadow-sm: 0 2px 10px rgba(7,42,32,.06);
  --shadow-md: 0 18px 44px -22px rgba(7,42,32,.35);
  --shadow-lg: 0 40px 90px -40px rgba(7,42,32,.55);
}

/* ------------------------------------------------------------------ Base -- */
*, *::before, *::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 12px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

/* El atributo hidden solo lo aplica la hoja del navegador, con
   [hidden]{display:none}, y cualquier regla de autor le gana por precedencia.
   Basta con que una clase declare su propio display para que el atributo deje
   de servir en silencio: el elemento sigue en el DOM, sigue diciendo hidden, y
   se ve. Esta linea lo blinda para toda la hoja.

   No es hipotetico: el pop-up de exito declaraba display:flex y se pintaba solo
   al cargar la pagina, sin que nadie enviara el formulario. */
[hidden]{ display:none !important; }

h1, h2, h3{
  font-family:var(--f-display);
  color:var(--green-800);
  line-height:1.15;
  letter-spacing:-.01em;
  margin:0;
}

p{ margin:0; }
ul, ol{ margin:0; padding:0; list-style:none; }

a{ color:var(--green-600); }

:focus-visible{
  outline:3px solid var(--green-500);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:20px;
}

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--green-800); color:#fff;
  padding:12px 20px; font-weight:600; text-decoration:none;
}
.skip-link:focus{ left:0; }

/* --------------------------------------------------------------- Marca --- */
.wordmark{ display:flex; flex-direction:column; gap:2px; }

.wordmark-name{
  font-family:var(--f-display);
  font-weight:900;
  letter-spacing:-.025em;
  color:var(--green-800);
  line-height:1;
  white-space:nowrap;
}

.wordmark-plus{ color:var(--green-500); }

.wordmark-tag{
  font-size:8.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:600;
}

/* ------------------------------------------------------------- Botones --- */
.btn{
  --btn-bg:   var(--green-700);
  --btn-fg:   #fff;
  --btn-bg-h: var(--green-800);

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 26px;
  border:0;
  border-radius:999px;
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-family:var(--f-body);
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  box-shadow:var(--shadow-md);
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.btn:hover{ background:var(--btn-bg-h); transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn i{ font-size:1.05em; }

.btn-red{   --btn-bg:var(--red);       --btn-bg-h:var(--red-hi); }
.btn-green{ --btn-bg:var(--green-500); --btn-bg-h:var(--green-600); }
.btn-ink{   --btn-bg:var(--green-800); --btn-bg-h:var(--green-900); }

.btn-sm{ padding:10px 18px; font-size:12px; box-shadow:none; }
.btn-lg{ padding:17px 34px; font-size:15px; }
.btn-block{ width:100%; }

.btn[disabled], .btn[aria-busy="true"]{
  opacity:.6; cursor:progress; transform:none;
}

/* ---------------------------------------------------------- Navegación --- */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line-soft);
}

.nav-in{
  min-height:var(--nav-h);
  display:flex;
  align-items:center;
  gap:16px;
}

.nav-logo{ text-decoration:none; flex:0 0 auto; }
.nav-logo .wordmark-name{ font-size:26px; }

.nav-toggle{
  margin-left:auto;
  width:44px; height:44px;
  display:grid; place-items:center;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--paper);
  color:var(--green-800);
  font-size:22px;
  cursor:pointer;
}

.nav-menu{
  display:none;
  position:absolute; left:0; right:0; top:100%;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-md);
  padding:12px 20px 22px;
}
.nav-menu.is-open{ display:block; }

.nav-menu ul{ display:flex; flex-direction:column; }

/* Acotado a `ul a` a proposito. Un `.nav-menu a` suelto tambien alcanza al
   boton de accion que vive dentro del panel, y como pesa mas que su propia
   clase le sobreescribe el display: el boton reaparece en escritorio por
   detras de la regla que deberia ocultarlo. */
.nav-menu ul a{
  display:block;
  padding:13px 4px;
  color:var(--ink);
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid var(--line-soft);
}
.nav-menu ul a:hover{ color:var(--green-600); }

.nav-menu ul a.is-active{ color:var(--green-600); }

.nav-cta{ display:none; }
.nav-cta-movil{ margin-top:16px; width:100%; }

/* ------------------------------------------------------- Banners --------- */
/* Los dos bloques fotograficos son banners cerrados: el texto viene dentro de
   la imagen por decision de diseno. De ahi sale la unica regla que importa
   aqui: NO SE RECORTAN. Nada de background-size:cover ni de alturas fijas — un
   recorte se come parte del mensaje.

   La imagen se sirve a ancho completo y la altura la marca su proporcion. Los
   atributos width/height del <img> reservan el espacio antes de que cargue, asi
   que el resto de la pagina no da el salto que provocaria el reflow. */

.banner-seccion{ background:var(--green-800); }

.banner{
  display:block;
  width:100%;
  text-decoration:none;
}

.banner img{
  display:block;
  width:100%;
  height:auto;
}

/* El <h1> existe para que el documento tenga encabezado: el mensaje real vive
   en el alt de la imagen, que es lo unico que le queda a Google y a un lector
   de pantalla cuando el texto es un mapa de bits. */
.banner-titulo{ margin:0; font-size:0; line-height:0; }

/* Marcador para cuando el archivo todavia no existe. Conserva la proporcion del
   banner para que la pagina no cambie de alto al llegar la imagen. */
.banner-slot{
  display:grid;
  place-items:center;
  aspect-ratio:2400 / 1100;
  background-image:repeating-linear-gradient(
    135deg,
    rgba(255,255,255,.045) 0 12px,
    rgba(255,255,255,0)   12px 24px
  );
}

.slot-nota{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:14px 18px;
  border:2px dashed rgba(255,255,255,.45);
  border-radius:var(--r-md);
  color:rgba(255,255,255,.92);
  font-size:12px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  text-align:center;
}
.slot-nota small{
  font-size:10.5px; font-weight:500;
  letter-spacing:.03em; text-transform:none;
  color:rgba(255,255,255,.72);
}
.slot-nota i{ font-size:18px; }

/* ----------------------------------------------------------- Secciones --- */
.seccion{ padding:64px 0; }
.seccion-alt{ background:var(--paper-2); }

.seccion-head{ text-align:center; margin-bottom:44px; }

.seccion-head h2{
  font-size:clamp(26px, 7vw, 38px);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.01em;
}
.seccion-head h2 em{ font-style:normal; color:var(--green-500); }

.seccion-head p{
  margin-top:12px;
  color:var(--muted);
  font-size:16px;
}

/* --------------------------------------------------------------- Pasos --- */
.pasos-fila{
  display:flex; flex-direction:column; gap:40px;
}

.pasos{
  flex:1 1 auto;
  display:flex; flex-direction:column; gap:34px;
}

.paso{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  gap:10px;
  text-align:center;
  padding-top:8px;
}

.paso-num{
  display:grid; place-items:center;
  width:40px; height:40px;
  border-radius:50%;
  background:var(--navy);
  color:#fff;
  font-family:var(--f-display);
  font-size:17px; font-weight:800;
}

.paso-icono{ font-size:40px; color:var(--green-600); line-height:1; }

.paso h3{
  font-size:17px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--green-600);
}

.paso p{ color:var(--muted); font-size:14.5px; max-width:30ch; }
.paso strong{ color:var(--ink); }

.paso-flecha{
  display:none;
  align-self:center;
  color:var(--navy);
  font-size:30px;
  opacity:.4;
}

.script-aside{
  font-family:var(--f-script);
  font-size:clamp(26px, 7vw, 34px);
  line-height:1.15;
  color:var(--green-800);
  text-align:center;
  padding-top:24px;
  border-top:2px solid var(--line);
}

/* -------------------------------------------------------------- Grid 2 --- */
.grid-2{
  display:grid;
  grid-template-columns:1fr;
  gap:26px;
  align-items:start;
}

/* Un item de grid vale por defecto min-width:auto, o sea "nunca mas angosto
   que mi contenido". La tabla de beneficios declara min-width:440px, asi que
   sin esto la columna se planta en 440 px, la pagina entera se ensancha por
   encima del viewport y en movil el contenido se sale por la derecha. Con
   min-width:0 la columna puede encogerse y la tabla hace su propio scroll,
   que es justo para lo que .tabla-scroll existe. */
.grid-2 > *{ min-width:0; }

.panel{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:28px 22px;
  box-shadow:var(--shadow-sm);
}

.panel-title{
  display:flex; align-items:center; gap:12px;
  font-size:clamp(20px, 5.4vw, 26px);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.005em;
  margin-bottom:6px;
}

.panel-icono{ font-size:1.3em; color:var(--green-600); flex:0 0 auto; }

.panel-sub{ color:var(--muted); margin-bottom:18px; }

.panel-texto{ color:var(--muted); font-size:15px; margin-bottom:24px; }
.panel-texto strong{ color:var(--ink); }

/* --------------------------------------------------------------- Tabla --- */
/* La tabla es el único bloque que no cabe en 320 px sin encogerse hasta ser
   ilegible, así que se le da su propio scroll horizontal en vez de dejar que
   arrastre toda la página. */
.tabla-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:var(--r-md);
  border:1px solid var(--line);
}

.tabla-beneficio{
  width:100%;
  min-width:440px;
  border-collapse:collapse;
  font-size:14.5px;
}

.tabla-beneficio th,
.tabla-beneficio td{
  padding:13px 16px;
  text-align:center;
  border-bottom:1px solid var(--line-soft);
}

.tabla-beneficio thead th{
  background:var(--green-700);
  color:#fff;
  font-family:var(--f-display);
  font-size:13px;
  font-weight:700;
  border-bottom:0;
}

.tabla-beneficio tbody th{
  font-weight:700;
  color:var(--ink);
  background:var(--mint-50);
}

.tabla-beneficio tbody td{ color:var(--ink); font-weight:600; background:var(--paper); }
.tabla-beneficio tbody tr:last-child th,
.tabla-beneficio tbody tr:last-child td{ border-bottom:0; }

.ejemplo{
  display:flex; align-items:flex-start; gap:14px;
  margin-top:20px;
  padding:18px 20px;
  border-radius:var(--r-md);
  background:var(--mint-100);
  border:1px solid var(--green-300);
}

.ejemplo i{ font-size:30px; color:var(--green-600); line-height:1; }
.ejemplo strong{ display:block; color:var(--green-800); font-size:15px; }
.ejemplo span{ display:block; color:var(--muted); font-size:14px; margin-top:2px; }
.ejemplo span strong{ display:inline; color:var(--green-700); }

/* ---------------------------------------------------------------- Bono --- */
.bono-badges{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));
  gap:18px;
  text-align:center;
}

.bono-badges li{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.bono-badges i{ font-size:34px; color:var(--green-500); }

.bono-badges strong{
  font-family:var(--f-display);
  font-size:17px; font-weight:800;
  color:var(--green-700);
  line-height:1.2;
}

.bono-badges span{ font-size:12.5px; color:var(--muted); line-height:1.4; }

/* ------------------------------------------------------------ Términos --- */
.terminos{ display:flex; flex-direction:column; gap:11px; margin-top:8px; }

.terminos li{
  position:relative;
  padding-left:22px;
  font-size:14px;
  color:var(--muted);
  line-height:1.55;
}

.terminos li::before{
  content:"";
  position:absolute; left:4px; top:.6em;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--green-500);
}

/* ----------------------------------------------------- Banda invertir --- */
.banda-invertir{
  background:var(--mint-100);
  border-top:1px solid var(--green-300);
  border-bottom:1px solid var(--green-300);
  padding:26px 0;
}

.banda-invertir-in{
  display:flex; align-items:center; justify-content:center;
  gap:16px;
  text-align:center;
}

.banda-invertir i{ font-size:32px; color:var(--green-500); flex:0 0 auto; }

.banda-invertir p{
  font-family:var(--f-display);
  font-size:clamp(16px, 4.4vw, 24px);
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--green-800);
}
.banda-invertir strong{ color:var(--green-500); }

/* ----------------------------------------------------------- Footer ------ */
.footer{
  background:var(--paper);
  border-top:1px solid var(--line);
  padding:44px 0 32px;
}

.footer-servicios{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:26px 18px;
  padding-bottom:32px;
  border-bottom:1px solid var(--line-soft);
  text-align:center;
}

.footer-servicios li{
  display:flex; flex-direction:column; align-items:center; gap:9px;
}

.footer-servicios i{ font-size:30px; color:var(--green-600); }

.footer-servicios span{
  font-size:10.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
  line-height:1.5;
}

.footer-marca{ grid-column:1 / -1; }
.footer-marca img{ margin-inline:auto; }

.footer-legal{
  display:flex; flex-direction:column; gap:14px;
  padding-top:24px;
  text-align:center;
}

.footer-copy{ font-size:13px; color:var(--muted-2); }

.footer-links{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px;
}

.footer-links a{
  font-size:13px;
  color:var(--muted);
  text-decoration:none;
}
.footer-links a:hover{ color:var(--green-600); text-decoration:underline; }

/* -------------------------------------------------------- WhatsApp ------- */
/* El bottom NO es un numero arbitrario: deja libre la esquina inferior derecha,
   donde reCAPTCHA v3 ancla su distintivo. Con el valor de 16px el boton lo
   tapaba, y ese distintivo no es decorativo — las condiciones de Google exigen
   mostrarlo o, en su defecto, incluir el aviso legal en texto. Si alguien baja
   este valor, vuelve a taparlo. */
.wa-float{
  position:fixed; right:16px; bottom:79px; z-index:120;
  width:54px; height:54px;
  display:grid; place-items:center;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  font-size:27px;
  text-decoration:none;
  box-shadow:0 12px 30px -8px rgba(37,211,102,.7);
  transition:transform .18s ease;
}
.wa-float:hover{ transform:scale(1.07); }

/* ============================================================ Formulario ==
   El formulario es el objetivo de toda la página, así que se le da más peso
   visual que a los demás paneles: borde verde y sombra propia.
   ========================================================================= */

.panel-form{
  border:2px solid var(--green-300);
  box-shadow:var(--shadow-md);
  background:var(--mint-50);
}

.form-head{
  display:flex; align-items:flex-start; gap:14px;
  margin-bottom:22px;
}

.form-head-icono{ font-size:32px; color:var(--green-600); line-height:1; }

.form-title{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px;
  font-size:clamp(17px, 4.6vw, 21px);
  font-weight:800;
  text-transform:uppercase;
}
.form-title .wordmark-name{ font-size:1.15em; }

.form-sub{ margin-top:6px; font-size:14px; color:var(--muted); }

.form-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px 18px;
}

.campo{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.campo-full{ margin-top:16px; }

.campo label{
  font-size:13px;
  font-weight:600;
  color:var(--ink);
}

.req{ color:var(--red); font-weight:700; }

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo input[type="number"],
.campo select{
  width:100%;
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:14.5px;
  transition:border-color .15s ease, box-shadow .15s ease;
}

.campo input::placeholder{ color:var(--muted-2); }

.campo input:focus,
.campo select:focus{
  outline:0;
  border-color:var(--green-500);
  box-shadow:0 0 0 3px rgba(31,164,99,.18);
}

.campo.is-error input,
.campo.is-error select{ border-color:var(--red); }
.campo.is-error input:focus,
.campo.is-error select:focus{ box-shadow:0 0 0 3px rgba(198,43,39,.16); }

.campo-error{ font-size:12.5px; color:var(--red); font-weight:600; }

/* La flecha nativa del select cambia de forma en cada sistema operativo. Se
   oculta y se dibuja una propia para que el control se vea igual en todos. */
.select-wrap{ position:relative; }
.select-wrap select{ appearance:none; -webkit-appearance:none; padding-right:38px; }
.select-wrap i{
  position:absolute; right:14px; top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  color:var(--green-600);
  font-size:13px;
}

.campo-submit{ justify-content:flex-end; }
.campo-submit .btn{ margin-top:2px; }

.check{
  display:flex; align-items:flex-start; gap:10px;
  font-size:13px; font-weight:400;
  color:var(--muted);
  line-height:1.5;
  cursor:pointer;
}
.check input{
  flex:0 0 auto;
  width:17px; height:17px;
  margin-top:2px;
  accent-color:var(--green-500);
  cursor:pointer;
}
.check a{ color:var(--green-600); }

.form-nota{ margin-top:14px; font-size:12px; color:var(--muted-2); }

.form-estado{
  margin-top:16px;
  padding:12px 16px;
  border-radius:var(--r-sm);
  font-size:14px;
  font-weight:600;
}
.form-estado.is-error{ background:#FCECEB; color:var(--red-hi); border:1px solid #F3C9C7; }
.form-estado.is-ok{    background:var(--mint-100); color:var(--green-700); border:1px solid var(--green-300); }

.form-demo{
  display:flex; align-items:center; gap:10px;
  margin-top:18px;
  padding:11px 15px;
  border:1px dashed var(--muted-2);
  border-radius:var(--r-sm);
  font-size:12.5px;
  color:var(--muted);
}
.form-demo i{ font-size:16px; color:var(--green-600); }

/* El honeypot se saca de la pantalla en vez de usar display:none, porque hay
   bots que descartan de entrada todo lo que está oculto con display. */
.hp{
  position:absolute !important;
  left:-9999px !important;
  width:1px; height:1px; overflow:hidden;
}

/* ==================================================== Pop-up de éxito ====
   Diálogo propio en lugar de un modal de Bootstrap: la landing no carga
   Bootstrap ni jQuery, y traerlos completos para un solo diálogo costaría más
   que toda la hoja de estilos.
   ========================================================================= */

.modal-ok{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}

.modal-ok-fondo{
  position:absolute; inset:0;
  background:rgba(7,42,32,.72);
  backdrop-filter:blur(3px);
}

.modal-ok-caja{
  position:relative;
  width:100%; max-width:460px;
  max-height:calc(100vh - 40px);
  overflow-y:auto;
  background:var(--paper);
  border-radius:var(--r-lg);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6);
  animation:modal-entra .22s ease-out;
}

@keyframes modal-entra{
  from{ opacity:0; transform:translateY(14px) scale(.98); }
  to  { opacity:1; transform:none; }
}

.modal-ok-head{
  display:flex; align-items:center; gap:12px;
  padding:22px 26px;
  background:var(--green-800);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  color:#fff;
}

.modal-ok-head i{ font-size:28px; color:var(--green-300); }

.modal-ok-head h2{
  margin:0;
  color:#fff;
  font-size:20px;
  font-weight:800;
}

.modal-ok-cuerpo{ padding:24px 26px 8px; }

.modal-ok-lead{
  font-family:var(--f-display);
  font-size:17px; font-weight:800;
  color:var(--green-700);
  margin-bottom:10px;
}

.modal-ok-cuerpo p{ color:var(--muted); font-size:14.5px; }
.modal-ok-cuerpo strong{ color:var(--ink); }

.modal-ok-wa{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:18px;
  padding:12px 22px;
  border-radius:999px;
  background:#25D366;
  color:#fff;
  font-size:14px; font-weight:700;
  text-decoration:none;
}
.modal-ok-wa:hover{ background:#1FB855; }

.modal-ok-horario{ margin-top:12px; font-size:12.5px; color:var(--muted-2); }

.modal-ok-pie{
  padding:18px 26px 26px;
  text-align:right;
}

/* Mientras el diálogo está abierto el fondo no debe poder desplazarse: en móvil
   es lo que hace que el usuario "pierda" el diálogo al hacer scroll. */
body.modal-abierto{ overflow:hidden; }

/* ------------------------------------------------------- Aparición ------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .55s ease, transform .55s ease;
}
.reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .btn:hover, .wa-float:hover{ transform:none; }
}

/* ========================================================================
   Escritorio
   ======================================================================== */

@media (min-width: 720px){
  .wrap{ padding-inline:32px; }

  .seccion{ padding:80px 0; }

  .form-grid{ grid-template-columns:1fr 1fr; }
  .panel{ padding:32px 30px; }

  /* Cinco columnas y no cuatro: los cuatro servicios mas el bloque de marca
     comparten fila, como en el diseno. Con cuatro, la marca cae sola a una
     segunda linea y el pie se parte en dos. */
  .footer-servicios{ grid-template-columns:repeat(5, 1fr); align-items:center; }
  .footer-marca{ grid-column:auto; }

  .footer-legal{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    text-align:left;
  }
  .footer-links{ justify-content:flex-end; }

}

@media (min-width: 992px){
  .nav-toggle{ display:none; }
  .nav-cta{ display:inline-flex; margin-left:auto; }
  .nav-cta-movil{ display:none; }

  .nav-menu{
    display:block;
    position:static;
    background:none;
    border:0;
    box-shadow:none;
    padding:0;
    margin-left:24px;
  }
  .nav-menu ul{ flex-direction:row; gap:26px; }
  .nav-menu ul a{
    padding:6px 0;
    border-bottom:2px solid transparent;
    font-size:14px;
  }
  .nav-menu ul a.is-active{ border-bottom-color:var(--green-500); }

  .pasos-fila{ flex-direction:row; align-items:center; gap:40px; }
  .pasos{ flex-direction:row; align-items:flex-start; gap:8px; flex:1 1 auto; }
  .paso{ flex:1 1 0; }
  .paso-flecha{ display:block; flex:0 0 auto; padding-top:60px; }

  .script-aside{
    flex:0 0 210px;
    padding-top:0;
    padding-left:36px;
    border-top:0;
    border-left:2px solid var(--line);
    text-align:left;
  }

  .grid-2{ grid-template-columns:1fr 1fr; gap:32px; }
  /* El formulario pesa más que la tabla que lo acompaña: se le da la columna
     ancha para que los campos no queden estrangulados en dos por fila. */
  .grid-2-form{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr); }

  .bono-badges{ grid-template-columns:repeat(3, 1fr); }
}

@media (min-width: 1200px){
  .cta{ padding:96px 0 72px; }
}