/* Mentoria Neuroafirmativa. Fondo blanco y la paleta de 6 colores de la franja del logo
   definitivo (IMAGENES/Logo/logo_definitivo.jpeg). No van todos en cada pagina: cada uno tiene un
   rol. Si la paleta cambia, se cambia aca y en ningun otro lado. */
:root{
  /* la paleta del logo */
  --naranja:#FAA107; --rojo:#F92029; --magenta:#D81C97; --violeta:#602DA4; --petroleo:#016483; --verde:#1EAD75;
  /* roles: el violeta en titulos, el magenta en la accion (boton, foco), el petroleo en etiquetas,
     el naranja en detalles (franja de arriba, etiqueta "Para profesionales"). Naranja, verde y
     rojo no van como letra sobre blanco: no llegan al contraste (2,1:1, 2,9:1 y 4:1). El rojo
     queda para los errores, en un tono mas oscuro. */
  --texto:#2A1F45; --suave:#5D5578;
  /* letra dentro de los campos del formulario: mas clara que --suave y todavia 4,9:1 sobre blanco */
  --tenue:#736D8C;
  --magenta-hover:#B8167F; --sobre-magenta:#FFFFFF; --rojo-texto:#C8161E;
  --fondo:#FFFFFF; --superficie:#F7F5FB; --linea:#E6E1EF;
  /* fondo del recuadro del formulario: un tono mas que --superficie, para que los campos blancos se recorten */
  --recuadro:#ECE7F5;
  --cuerpo:"Literata",Georgia,"Times New Roman",serif;
  /* letra de interfaz: titulos chicos, botones, etiquetas, formulario */
  --titulos:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* solo el pie: distingue i, l y 1 */
  --legible:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* el logo: monograma MN (imagen) + nombre en texto. Colores y letra tomados del logo
     definitivo; la letra parece Poppins Bold */
  --logo-letra:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --logo-violeta:#740584; --logo-fucsia:#FF03FF;
  --ancho:68rem; --radio:10px;
  /* "only" le pide al navegador que no invierta los colores cuando fuerza el modo oscuro: el sitio es solo claro */
  color-scheme:only light;
}
*,*::before,*::after{box-sizing:border-box}
html{touch-action:manipulation;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--texto);font-family:var(--cuerpo);font-size:1.0625rem;line-height:1.65}
img{max-width:100%;height:auto}
h1,h2,h3{font-family:var(--titulos);line-height:1.12;margin:0;text-wrap:balance;color:var(--violeta)}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--magenta);outline-offset:3px}
.contenedor{max-width:var(--ancho);margin:0 auto;padding-inline:clamp(16px,5vw,40px)}

/* Marca */
.marca{border-bottom:4px solid var(--naranja)}
.marca .contenedor{display:flex;align-items:center;gap:12px;padding-block:16px}
.marca-nombre{font-family:var(--titulos);font-weight:700;font-size:1.05rem;color:var(--violeta);text-decoration:none}

/* Portada */
.portada{padding-block:clamp(32px,7vw,72px) clamp(40px,8vw,80px)}
.portada .contenedor{display:grid;gap:clamp(28px,5vw,56px);grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}
.portada-texto{display:grid;gap:16px;min-width:0}
.para-quien{justify-self:start;font-family:var(--titulos);font-weight:700;font-size:.95rem;background:var(--naranja);color:var(--texto);padding:6px 14px;border-radius:999px;margin-bottom:clamp(16px,3vw,28px)}
.evento{font-family:var(--titulos);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--petroleo);font-weight:600}
.portada h1{font-size:clamp(1.8rem,4.4vw,2.4rem);font-weight:700;letter-spacing:-.01em}
.bajada{font-size:1.15rem;color:var(--suave);max-width:34rem}
.firmas{font-family:var(--titulos);font-size:.95rem;color:var(--suave)}

/* Formulario */
.formulario{background:var(--recuadro);border:1px solid var(--linea);border-radius:var(--radio);padding:clamp(20px,4vw,32px);display:grid;gap:10px;min-width:0}
.formulario h2{font-size:1.3rem}
/* Etiqueta adentro del campo, que sube al escribir: mismo formato que los formularios de las
   landings de Mariela. El input va ANTES del label para poder seleccionarlo con ~, y lleva
   placeholder=" " porque :placeholder-shown es lo que detecta si el campo esta vacio. */
.campo{position:relative}
.campo input,.campo select{font:inherit;font-size:1rem;color:var(--texto);background:var(--fondo);border:1.5px solid var(--linea);border-radius:999px;width:100%;min-height:50px}
.campo input{padding:20px 20px 6px}
.campo select{padding:0 20px;appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--suave) 50%),linear-gradient(135deg,var(--suave) 50%,transparent 50%);
  background-position:calc(100% - 26px) 50%,calc(100% - 20px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.campo select:has(option[value=""]:checked){color:var(--tenue)}
.campo label{position:absolute;left:21px;top:14px;font-size:1rem;color:var(--tenue);pointer-events:none;
  transition:top .16s ease,font-size .16s ease,color .16s ease}
.campo input:focus ~ label,
.campo input:not(:placeholder-shown) ~ label{top:5px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--violeta)}
.campo input:focus,.campo select:focus{border-color:var(--violeta);outline:none;box-shadow:0 0 0 3px rgba(216,28,151,.28)}
.error{color:var(--rojo-texto);font-size:.9rem;margin:-4px 0 0 23px}
.boton{display:inline-flex;align-items:center;justify-content:center;font-family:var(--titulos);font-weight:700;font-size:1.25rem;background:var(--magenta);color:var(--sobre-magenta);border:0;border-radius:999px;padding:14px 26px;min-height:52px;cursor:pointer;text-decoration:none;transition:background-color .2s ease}
.boton:hover{background:var(--magenta-hover)}
.formulario .boton{width:100%}
.letra-chica{font-size:.85rem;color:var(--suave)}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Bienvenida de /gracias/: una columna. Lo que manda es el boton; el titulo y el
   video quedan por debajo en peso visual. */
.portada .bienvenida{grid-template-columns:minmax(0,1fr);max-width:44rem;gap:clamp(20px,4vw,32px)}
.bienvenida h1{font-size:clamp(1.8rem,4.4vw,2.4rem)}
.unirse{display:grid}
.invitacion{font-family:var(--titulos);font-weight:600;font-size:1.1rem;color:var(--violeta);max-width:34rem}
.unirse{justify-items:start}
.boton-grande{font-size:1.25rem;padding:16px 28px;min-height:58px;min-width:min(100%,260px);box-shadow:0 10px 24px -10px rgba(216,28,151,.55)}
.video{aspect-ratio:16/9;width:100%;max-width:100%;border-radius:var(--radio);border:1.5px dashed var(--linea);background:var(--superficie);display:grid;place-items:center;font-family:var(--titulos);font-weight:600;font-size:1rem;color:var(--suave)}

/* /info/: texto a la izquierda, formulario a la derecha. En el celular, una columna. */
.portada .dos-columnas{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(28px,5vw,64px)}
.columna-texto{display:grid;gap:clamp(20px,3vw,28px);min-width:0}
.dos-columnas h1{font-size:clamp(1.8rem,4.4vw,2.4rem)}
.columna-texto .unirse{justify-items:center}

/* El logo, en sus dos armados: el nombre al costado del monograma (por defecto) o debajo
   (.vertical). .adaptable pasa de al costado a debajo cuando no entra en una linea. El tamano
   se maneja con font-size del contenedor: el monograma mide 3em de alto. */
.logo-mn{display:inline-flex;align-items:center;gap:.45em;margin:0;font-family:var(--logo-letra);font-weight:700;line-height:1;font-size:clamp(1rem,2.2vw,1.3rem)}
.logo-mn img{height:3em;width:auto;flex:none}
.logo-mn-texto{white-space:nowrap;letter-spacing:.01em}
.logo-mn-texto span:first-child{color:var(--logo-violeta)}
.logo-mn-texto span:last-child{color:var(--logo-fucsia)}
.logo-mn.vertical{flex-direction:column;gap:.3em;font-size:.75rem}
.logo-mn.chico{font-size:.8rem}
/* Gana sobre los tamanos generales de h1 de la portada */
.portada h1.logo-mn{font-size:clamp(1rem,2.2vw,1.3rem);letter-spacing:0}
@media (max-width:480px){.logo-mn.adaptable{flex-direction:column;align-items:flex-start;gap:.3em}}

/* /gracias/: el contenido centrado en la pantalla, sin pie */
body.confirmacion{min-height:100dvh;display:flex;flex-direction:column}
body.confirmacion main{flex:1;display:grid;place-items:center}
body.confirmacion .portada .bienvenida{justify-items:center;text-align:center}
body.confirmacion .portada-texto{justify-items:center}
@media (max-width:480px){body.confirmacion .logo-mn.adaptable{align-items:center}}

/* Secciones */
.seccion{padding-block:clamp(48px,8vw,80px);border-top:1px solid var(--linea)}
.seccion h2{font-size:clamp(1.5rem,3.4vw,2rem);margin-bottom:24px}
.principios{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,5vw,56px);counter-reset:p}
.principios li{counter-increment:p;display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:12px;align-items:baseline;padding-block:14px;border-bottom:1px solid var(--linea);font-family:var(--titulos);font-size:1.08rem;font-weight:600}
.principios li::before{content:counter(p);font-size:1.5rem;font-weight:700;color:var(--magenta);text-align:right}
.personas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,5vw,56px)}
.persona{display:grid;gap:6px;min-width:0}
.persona h3{font-size:1.25rem}
.persona .rol{font-family:var(--titulos);font-weight:600;color:var(--petroleo)}
.persona p{color:var(--suave)}

/* Texto legal: mismo formato que las paginas legales de la home de Mariela. Prosa justificada,
   densa, titulos de seccion del mismo tamano que el texto. */
main.legal{padding-block:clamp(40px,6vh,64px) clamp(56px,9vh,88px);font-size:.9rem;line-height:1.66;text-align:justify;hyphens:auto}
main.legal .contenedor{max-width:54rem}
main.legal .logo-mn{margin-bottom:24px}
main.legal h1{font-size:clamp(1.6rem,3vw,2.1rem);margin:10px 0 6px;text-align:left}
main.legal .fecha{font-size:.8rem;color:var(--suave);margin-bottom:30px;text-align:left}
main.legal .apertura{margin:0 0 30px}
main.legal h2{font-family:var(--titulos);font-size:.9rem;font-weight:600;color:var(--texto);margin:26px 0 6px;text-align:left;letter-spacing:.01em}
main.legal p{margin:0 0 12px}
.etiqueta{font-family:var(--titulos);font-weight:700;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--petroleo)}

/* Pie */
.pie{border-top:1px solid var(--linea)}
.pie .contenedor{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:24px;font-family:var(--legible);font-size:.95rem;color:var(--suave)}
.pie a{color:var(--suave)}

@media (max-width:760px){
  .portada .contenedor,.principios,.personas{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Logo al pie de /info/ */
.logo .contenedor{display:grid;justify-items:center}


/* ===================== Landing /mentoria/ =====================
   Roles de la paleta en esta pagina: violeta en titulos y en la banda del cierre, magenta en los
   botones, petroleo en etiquetas, y naranja, magenta y violeta marcan las 3 areas de la mentoria. */
.lp-cabecera{padding-block:20px}
.lp-cabecera .logo-mn{font-size:.95rem}
.lp-hero{padding-block:clamp(24px,5vw,56px) clamp(48px,8vw,88px)}
.lp-hero .contenedor{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,72px);align-items:center}
.lp-hero h1{font-family:var(--titulos);font-weight:800;font-size:clamp(2rem,4.6vw,3.25rem);line-height:1.08;letter-spacing:-.02em;color:var(--texto)}
.lp-hero h1 em{font-style:normal;color:var(--violeta)}
.lp-hero .bajada{font-size:1.15rem;max-width:36rem;color:var(--texto)}
.lp-accion{display:grid;gap:10px;justify-items:start;margin-top:6px}
.lp-nota{font-family:var(--titulos);font-size:.95rem;font-weight:600;color:var(--petroleo)}

.dos-columnas-lp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}



/* Bloques */
.lp-bloque{padding-block:clamp(56px,9vw,104px)}
.lp-bloque.sin-arriba{padding-top:0}
.lp-bloque h2{font-family:var(--titulos);font-weight:800;font-size:clamp(1.6rem,3.6vw,2.4rem);line-height:1.12;letter-spacing:-.01em;color:var(--texto);max-width:46rem}
.lp-bloque h2 em{font-style:normal;color:var(--violeta)}
.lp-bloque .intro{margin-top:18px;font-size:1.1rem;max-width:44rem;color:var(--texto)}

/* Listas con tilde */
.lista-check{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.lista-check li{position:relative;padding-left:34px}
.lista-check li::before{content:"";position:absolute;left:0;top:.35em;width:20px;height:20px;border-radius:50%;background:var(--c,var(--magenta))}
.lista-check li::after{content:"";position:absolute;left:6px;top:calc(.35em + 5px);width:8px;height:5px;border-left:2.5px solid #FFFFFF;border-bottom:2.5px solid #FFFFFF;transform:rotate(-45deg)}
.lista-dos-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 40px;margin-top:28px}

/* Las 3 areas */
.areas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:28px}
.area{border:1px solid var(--linea);border-top:6px solid var(--c);border-radius:var(--radio);padding:24px;display:grid;gap:12px;align-content:start;min-width:0}
.area-numero{font-family:var(--titulos);font-weight:800;font-size:2rem;line-height:1;color:var(--cn,var(--c))}
.area h3{font-family:var(--titulos);font-weight:800;font-size:1.25rem;color:var(--texto)}
.area p{color:var(--suave)}

/* Quienes */
.quienes-lp .contenedor{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,64px);align-items:center}
.quienes-lp img{width:100%;height:auto;border-radius:var(--radio);display:block}
.quienes-lp figcaption{font-family:var(--legible);font-size:.85rem;color:var(--suave);margin-top:8px}
.personas-lp{display:grid;gap:22px;margin-top:24px}
.persona-lp h3{font-family:var(--titulos);font-weight:800;font-size:1.2rem;color:var(--texto)}
.persona-lp p{color:var(--suave);margin-top:6px}
.cita-ia{margin:28px 0 0;padding:22px 26px;border-left:5px solid var(--magenta);background:var(--superficie);border-radius:0 var(--radio) var(--radio) 0;font-family:var(--titulos);font-weight:700;font-size:clamp(1.05rem,2.2vw,1.3rem);line-height:1.4;color:var(--texto)}



/* Lista de espera (cierre) */
.cierre-lp{background:var(--violeta);color:#FFFFFF}
.cierre-lp .contenedor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.cierre-lp h2{color:#FFFFFF}
.cierre-lp .intro{color:#FFFFFF;opacity:.95}
.cierre-lp .lp-nota{color:#FFFFFF;opacity:.9;margin-top:18px;display:block}
.cierre-lp .formulario{color:var(--texto);border:0}

/* Preguntas */
.preguntas{margin-top:28px;display:grid;gap:12px;max-width:48rem}
.preguntas details{border:1px solid var(--linea);border-radius:var(--radio);padding:18px 22px}
.preguntas summary{font-family:var(--titulos);font-weight:700;font-size:1.05rem;cursor:pointer;color:var(--texto)}
.preguntas details p{margin-top:10px;color:var(--suave)}

@media (max-width:860px){
  .lp-hero .contenedor,.dos-columnas-lp,.quienes-lp .contenedor,.cierre-lp .contenedor{grid-template-columns:minmax(0,1fr)}
}

/* ===================== /mentoria/: redisenio =====================
   Titulos en Literata (serif): la pagina le habla a profesionales que escriben informes, y la letra
   de libro le da el registro de la clinica. La firma de la pagina es la ficha de la portada: lo que
   dice el informe frente a lo que pasa en casa. Casi sin cajas grises: el espacio y las lineas
   ordenan; el color queda para la ficha, la pregunta nueva, la columna "despues" y la banda final. */
body.lp .lp-problema h1,body.lp .lp-bloque h2{font-family:var(--cuerpo);font-weight:600;letter-spacing:-.015em;color:var(--texto)}
.lp-problema{padding-block:0 clamp(64px,10vw,128px)}
.lp-problema .contenedor{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr);gap:clamp(32px,6vw,80px);align-items:end}
.problema-texto{display:grid;gap:22px}
.lp-problema h1{font-size:clamp(2.1rem,4.2vw,3.3rem);line-height:1.1;text-wrap:pretty}

.ficha{margin:0;border:1px solid var(--linea);border-radius:14px;background:#FFFFFF;box-shadow:0 24px 48px -32px rgba(42,31,69,.45);overflow:hidden}
.ficha-fila{position:relative;display:grid;gap:6px;padding:22px 24px}
.ficha-fila + .ficha-fila{border-top:1px dashed var(--linea)}
.ficha-casa{gap:0}
.ficha-rotulo{font-family:var(--legible);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--suave)}
.ficha-fila p{font-family:var(--cuerpo);font-size:1.25rem;color:var(--texto);padding-right:96px}
.ficha-sello{position:absolute;right:18px;top:50%;transform:translateY(-50%) rotate(-8deg);font-family:var(--titulos);font-weight:800;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--petroleo);border:2px solid var(--petroleo);border-radius:6px;padding:4px 8px}
.ficha-casa{background:var(--magenta)}
/* En la parte rosa, las dos lineas van con la misma letra, tamano y peso que "Sostiene la mirada" */
.ficha-casa .ficha-rotulo{color:#FFFFFF;font-family:var(--cuerpo);font-size:1.25rem;font-weight:400;line-height:1.65;letter-spacing:0;text-transform:none}
.ficha-casa p{color:#FFFFFF;font-weight:400;font-size:1.25rem;line-height:1.65}
/* El sello de abajo: lo que paso en casa no llega al informe. Blanco sobre magenta, torcido al
   reves que el "Logrado" para que se lean como un par. */
.sello-falta{color:#FFFFFF;border-color:#FFFFFF;transform:translateY(-50%) rotate(7deg);max-width:7.5rem;text-align:center;line-height:1.2}
.ficha-casa .ficha-rotulo{padding-right:128px}
.ficha-casa p{padding-right:0}

.dudas-lp{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,4vw,48px)}
.dudas-lp li{border-top:3px solid var(--naranja);padding-top:16px;font-size:1.08rem;line-height:1.55}

.dos-columnas-lp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.dos-preguntas{display:grid;gap:28px}
.pregunta-vieja,.pregunta-nueva{display:grid;gap:8px;font-family:var(--cuerpo);font-size:clamp(1.15rem,2.2vw,1.4rem);line-height:1.4}
.pregunta-vieja span,.pregunta-nueva span{font-family:var(--titulos);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.pregunta-vieja{color:var(--suave)}
.pregunta-vieja s{text-decoration-color:rgba(93,85,120,.5);text-decoration-thickness:1.5px}
.pregunta-nueva{color:var(--violeta);font-weight:600;border-left:4px solid var(--magenta);padding-left:20px}
.pregunta-nueva span{color:var(--magenta);font-weight:800}

.salida{border-top:1px solid var(--linea)}
.antes-despues{margin-top:36px;max-width:64rem;border-top:1px solid var(--linea)}
.ad-fila{display:grid;grid-template-columns:9rem minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:baseline;border-bottom:1px solid var(--linea);padding-block:18px}
.ad-fila span:nth-child(1){font-family:var(--titulos);font-weight:800;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--petroleo)}
.ad-fila span:nth-child(2){color:var(--suave);font-size:1.02rem}
.ad-fila span:nth-child(3){font-family:var(--cuerpo);font-weight:600;font-size:1.08rem;color:var(--violeta)}
.ad-encabezado{padding-block:10px}
.ad-encabezado span:nth-child(2),.ad-encabezado span:nth-child(3){font-family:var(--titulos);font-weight:800;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase}
.ad-encabezado span:nth-child(2){color:var(--suave)}
.ad-encabezado span:nth-child(3){color:var(--magenta)}

@media (max-width:860px){
  .lp-problema .contenedor,.dudas-lp,.dos-columnas-lp{grid-template-columns:minmax(0,1fr)}
  .dudas-lp{gap:22px}
  .ad-fila{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 16px}
  .ad-fila span:nth-child(1){grid-column:1 / -1}
  .ad-encabezado span:nth-child(1){display:none}
}
body.lp .cierre-lp h2{color:#FFFFFF}

/* La frase de cierre de la seccion del cuadro, separada de la tabla */
.salida .antes-despues + .intro{margin-top:44px}

/* El boton entre las dos preguntas y la seccion del cuadro */
.boton-previo{padding-bottom:clamp(48px,7vw,80px);justify-items:center}

/* El recorrido: hoy, en la mentoria, despues. La flecha marca que la mentoria es el paso del medio. */
.recorrido{border-top:1px solid var(--linea)}
.pasos-lp{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px}
.pasos-lp li{position:relative;border-top:5px solid var(--c);padding-top:18px;display:grid;gap:10px;align-content:start}
.pasos-lp li + li::before{content:"\2192";position:absolute;left:-44px;top:4px;font-family:var(--titulos);font-weight:800;font-size:1.8rem;line-height:1;color:var(--magenta)}
.paso-lp-rotulo{font-family:var(--titulos);font-weight:800;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--petroleo)}
.pasos-lp p{font-family:var(--cuerpo);font-size:1.15rem;line-height:1.45;color:var(--texto)}
.pasos-lp li:last-child p{font-weight:600;color:var(--violeta)}
.recorrido-cierre{margin-top:48px;max-width:none;font-family:var(--cuerpo);font-weight:600;font-size:clamp(1.25rem,2.6vw,1.6rem);line-height:1.4;color:var(--texto)}
@media (max-width:860px){
  .pasos-lp{grid-template-columns:minmax(0,1fr);gap:44px}
  .pasos-lp li + li::before{content:"\2193";left:0;top:-40px}
}

/* Portada: el boton arriba de la ficha */
.ficha-columna{display:grid;gap:64px;justify-items:center}
.ficha-columna .boton-grande{font-size:1.05rem;padding:12px 24px;min-height:48px}
.ficha-columna .ficha{width:100%}

/* El bonus de la lista de espera, separado del texto y con un icono de regalo */
.bonus-lp{margin-top:20px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;padding:16px 20px;border:2px dashed var(--naranja);border-radius:var(--radio);color:#FFFFFF;font-size:1.05rem;line-height:1.5}
.bonus-icono{color:var(--naranja)}
.bonus-lp strong{color:var(--naranja);font-weight:600}

/* Opt-in obligatorio del formulario */
.consentimiento{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;font-size:.9rem;line-height:1.5;color:var(--suave);cursor:pointer}
.consentimiento input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--magenta);cursor:pointer}
.consentimiento a{color:var(--suave)}

/* /gracias/: el boton a la mentoria, chico y separado del mensaje */
.gracias-accion{justify-items:center;margin-top:48px}
.gracias-accion .boton{font-size:1rem;padding:10px 22px;min-height:44px}

/* Remate del cuadro: frase gancho y desarrollo */
.gancho{margin-top:80px;max-width:46rem;display:grid;gap:10px}
.gancho-titulo{font-family:var(--cuerpo);font-weight:600;font-size:clamp(1.5rem,3.2vw,2.1rem);line-height:1.2;color:var(--texto)}
.gancho p:last-child{font-size:1.1rem;color:var(--suave)}