/* ══════════════════════════════════════════════════════════════════════════
   Cuerpo compartido por las dos paginas del programa de fundadores:
     /programa-fundadores/  · la pagina del programa (indexable)
     /fichar-un-senior/     · la landing de campana (noindex)

   Aqui vive TODO lo que las dos tienen igual. Lo que cambia entre una y otra
   -el chrome- se queda en el <style> inline de cada pagina: la retícula del
   heroe, la barra fija de movil y el badge de plazas.

   OJO: ninguna regla de chrome puede bajar a este fichero. En concreto
   `.nav .btn-nav{display:none}` y `body{padding-bottom}`, que son de la
   landing: aqui dejarian a la pagina general sin boton de nav en movil, y en
   silencio.
   ══════════════════════════════════════════════════════════════════════════ */

/* .btn de style.css esta escrito para <a> y no declara background: un <button>
   se quedaria con el fondo del sistema sobre el tema oscuro.
   Aqui iba tambien `font:inherit`, puesto para quitarle al boton la fuente del
   sistema. El problema es que `font` es un atajo y resetea TODO lo que no se
   nombra: como `button.btn` (0,1,1) le gana a `.btn` y a `.btn-solid` (0,1,0),
   el peso del boton acababa siendo el 300 del body y no el 500 que pide
   .btn-solid. Texto fino sobre ambar saturado: ilegible. La fuente ya la pone
   .btn, asi que el atajo sobra. */
button.btn{background:transparent;cursor:pointer;color:var(--ink)}
button.btn-solid{background:var(--amber);color:#1E1503;border-color:transparent}
button.btn-solid:hover{background:var(--amber-2)}
button.btn-nav{font-size:.82rem}

/* dato pendiente de rellenar: se ve a la legua a proposito */
.ph{color:var(--amber-2);border-bottom:1px dashed currentColor}

/* El cuerpo de estas paginas sube de contraste redefiniendo la variable dentro
   de main: al 58% son veinte pantallazos de texto gris en un movil a la luz del
   dia. Redefinir la custom property alcanza a todo lo que ya la usa, sin
   repetir el color regla por regla. */
main{--ink-dim:rgba(246,242,233,.75)}
.eyebrow{font-size:.875rem}

/* ── aparicion al hacer scroll ──
   Con prefers-reduced-motion el bloque entero no aplica: nada se oculta y nada
   se mueve, sin necesidad de comprobarlo tambien en JS. */
@media (prefers-reduced-motion:no-preference){
  .js [data-rv]{opacity:0;transform:translateY(20px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .js [data-rv].visto{opacity:1;transform:none}
}
/* al imprimir no hay scroll que dispare nada: se ve todo o salen folios en blanco */
@media print{.js [data-rv]{opacity:1!important;transform:none!important}}

/* ── heroe: lo que comparten las dos. La retícula es de cada pagina ──
   ojo con los espacios del clamp: en CSS el + de una expresion matematica los
   exige a los dos lados. Sin ellos la declaracion entera es invalida y se cae
   sin avisar. */
.blog-head{margin-bottom:0}
.blog-head .eyebrow{margin-top:2.5rem}
.blog-title{font-size:clamp(1.9rem, 1.4rem + 2.2vw, 3.1rem);max-width:22ch;margin-bottom:1rem}
.blog-title em{display:block;font-size:.6em;line-height:1.25;margin-top:.6rem;max-width:30ch}
.sub{color:var(--ink-dim);line-height:1.7;margin:0 0 1.4rem}
.sub-fuerte{color:var(--ink);font-size:1.05rem;line-height:1.6;max-width:46ch;margin:0 0 1.4rem}
.fine{font-size:.95rem;color:var(--ink-dim);line-height:1.6;margin-top:1rem;max-width:44ch}
.fine b{color:var(--ink);font-weight:500}

/* ── secciones de texto ── */
.sec{max-width:48rem;margin:clamp(4rem,9vh,6.5rem) auto 0}
/* el ritmo de la pagina: bloques de texto abierto alternando con paneles */
.sec.panel{max-width:56rem;background:var(--bg-2);border:1px solid var(--line);border-radius:20px;padding:clamp(1.8rem,4vw,2.8rem)}
/* dentro de un panel el ancho lo marca la caja, no el 62ch de .sec p: si no, el
   texto se pega a la izquierda y sobra un palmo de aire solo en el lado derecho */
.sec.panel p{max-width:none}
.sec h2{font-family:var(--font-d);font-weight:400;font-size:clamp(1.6rem, 1.3rem + 1.3vw, 2.25rem);line-height:1.15;letter-spacing:-.01em;margin-bottom:1.4rem;max-width:24ch}
/* Un titular que no cabe en las 24ch de siempre. A ese ancho partia por el peor
   sitio posible ("que salen / siempre") y text-wrap:balance no lo arregla: para
   el reparto ya estaba equilibrado, 26 caracteres contra 29. Asi que se le da
   el ancho justo (593px mide la primera frase) y el &nbsp; del HTML impide que
   "salen siempre" se separe. */
.sec h2.h2-ancho{max-width:38rem}
.sec h3{font-family:var(--font-d);font-weight:400;font-size:1.3rem;margin:2.6rem 0 1rem}
.sec p{color:var(--ink-dim);line-height:1.75;margin-bottom:1.1rem;max-width:62ch}
.sec p:last-child{margin-bottom:0}
.sec b{color:var(--ink);font-weight:500}
.punch{color:var(--ink);font-family:var(--font-d);font-size:clamp(1.3rem, 1.1rem + .8vw, 1.7rem);line-height:1.35;margin-top:1.8rem}
.lista{list-style:none;display:grid;gap:.75rem;color:var(--ink-dim);line-height:1.65;margin-top:1.2rem}
.lista li{padding-left:1.3rem;position:relative}
.lista li::before{content:"·";position:absolute;left:.25rem;color:var(--amber);font-weight:700}
.nota{font-size:.9rem;color:var(--ink-faint);line-height:1.7;margin-top:1.4rem}

/* ── salidas a conversion repartidas por la pagina ── */
.cta-blk{max-width:48rem;margin:2.2rem auto 0;text-align:center}
.cta-blk p{color:var(--ink);font-size:1.02rem;line-height:1.6;margin:0 auto 1.7rem;max-width:44ch}
/* la nota de debajo del boton es un <p>, asi que .cta-blk p (0,1,1) le ganaba a
   .vd-alt (0,1,0) y le dejaba el margen superior en cero: iba pegada al boton */
.cta-blk .vd-alt{margin:1.5rem auto 0}

/* ── copiar el guion del socio ── */
.pitch-copy{margin-top:1.1rem;background:none;border:1px solid var(--line-strong);color:var(--ink);font:inherit;font-size:.85rem;padding:.5rem 1rem;border-radius:99px;cursor:pointer}
.pitch-copy:hover{border-color:var(--amber);color:var(--amber-2)}

/* ── veredicto del formulario ── */
.vd-tag{display:inline-flex;align-items:center;gap:.55rem;padding:.3rem .9rem;border-radius:999px;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem}
.vd-si{color:#9CC49A;border:1px solid rgba(156,196,154,.45);background:rgba(156,196,154,.09)}
.vd-quiza{color:var(--amber-2);border:1px solid rgba(232,163,61,.45);background:rgba(232,163,61,.09)}
.vd-no{color:#E8823D;border:1px solid rgba(232,130,61,.45);background:rgba(232,130,61,.09)}
.vd h3{font-family:var(--font-d);font-weight:400;font-size:1.5rem;line-height:1.2;margin-bottom:.9rem}
.vd p{color:var(--ink-dim);line-height:1.7;margin-bottom:1rem}
.vd .vd-acc{margin-top:1.4rem}
.vd .btn{width:100%}
.vd-alt{display:block;text-align:center;font-size:.88rem;color:var(--ink-faint);margin-top:1rem}
.vd-alt a{color:var(--amber-2);text-decoration:underline}

/* La demostracion (.demo) vive en css/style.css: la home tambien la usa en el bloque 04. */
/* ── fases: raíl vertical con un punto por hito ── */
.fases{margin-top:2rem;padding-left:1.7rem;border-left:1px solid var(--line)}
.fase{position:relative;display:grid;grid-template-columns:12rem 1fr;gap:1.6rem;padding:0 0 2rem}
.fase:last-child{padding-bottom:0}
.fase::before{content:"";position:absolute;left:-1.7rem;top:.42rem;transform:translateX(-50%);width:9px;height:9px;border-radius:50%;background:var(--amber);box-shadow:0 0 12px var(--amber)}
.fase .w{font-family:var(--font-d);font-size:1rem;color:var(--amber)}
.fase p{margin:0;color:var(--ink-dim);line-height:1.7}
@media(max-width:640px){.fase{grid-template-columns:1fr;gap:.45rem}}

/* ── el intercambio ── */
.deal{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:1.4rem;margin-top:1.6rem}
.give .plan-list li::before{content:"→"}

/* ── el dinero: primero las tres lineas, luego el matiz ── */
.dinero{list-style:none;display:grid;gap:1rem;margin-bottom:1.8rem}
.dinero li{padding:1.1rem 1.3rem;background:var(--bg-3);border:1px solid var(--line);border-radius:12px;color:var(--ink-dim);line-height:1.65}
.dinero b{display:block;color:var(--ink);font-weight:500;font-size:1.05rem;margin-bottom:.3rem}

/* ── cuotas: la cifra es el argumento, no la frase que la envuelve ──
   Iban como dos listas de puntos y el numero (2.400, 30 GB) se perdia dentro
   del renglon. Aqui cada tope es una cifra grande con su etiqueta encima, y las
   dos columnas dejan comparar Starter contra Team de un vistazo.
   La del mes de prueba va aparte y con el borde discontinuo: no es un plan que
   se contrata, y mezclarla en la misma fila era justo la confusion a evitar. */
/* el minimo es 320px y no 240: con 240 la rejilla saca TRES columnas dentro del
   panel y las dos tarjetas de plan se quedan estrechas con un hueco al lado */
.cuotas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:1.2rem;margin-top:1.6rem}
.cuotas article{background:var(--bg-3);border:1px solid var(--line);border-radius:14px;padding:1.4rem 1.5rem}
.cuota-plan{font-family:var(--font-d);font-size:1.18rem;color:var(--ink);margin:0 0 1.2rem;line-height:1.3}
.cuota-plan span{display:block;font-family:var(--font-t);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-top:.3rem}
.cuotas dl{display:grid;gap:1.05rem;margin:0}
.cuotas dt{font-family:var(--font-t);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.2rem}
.cuotas dd{margin:0;font-family:var(--font-d);font-size:1.5rem;line-height:1.1;color:var(--amber-2)}
.cuotas dd small{display:block;font-family:var(--font-t);font-size:.86rem;line-height:1.5;color:var(--ink-dim);margin-top:.3rem}
/* ocupa la fila entera este a la izquierda o solo en la segunda: con auto-fit,
   una tercera tarjeta suelta se queda estrecha y del doble de alto */
/* `.cuotas article` pone `border:1px solid` y tiene mas especificidad (0,1,1)
   que `.cuota-prueba` a secas, asi que el discontinuo no llegaba a verse */
.cuotas .cuota-prueba{grid-column:1 / -1;border-style:dashed}
.cuota-prueba p{margin:0;color:var(--ink-dim);line-height:1.7}
/* ── en movil, sin marco ──
   Tres cajas apiladas dentro del panel eran tres marcos, y cada uno metia
   1.5rem por lado DENTRO del padding del panel, que ya esta dentro del margen
   de la pagina. Con 390px de pantalla eso deja una columna de texto de cuatro
   palabras por linea y tarjetas larguisimas. Aqui el marco no aporta: lo que
   separa una cuota de otra es un filete, y el texto se queda con el ancho
   entero. El de la prueba conserva el filete discontinuo, que es lo que decia
   que ese bloque no es un plan que se contrata. */
@media(max-width:640px){
  /* el panel tampoco: es la caja mas exterior de las tres y la que empieza a
     comerse la columna. Se queda el filete de arriba para que siga leyendose
     como un bloque aparte del texto que lo rodea. */
  .sec.panel{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:2.2rem 0 0}
  .cuotas{gap:0;margin-top:1.3rem}
  .cuotas article{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:1.3rem 0 0}
  /* con `.cuotas article` (0,1,1) delante, `.cuota-prueba` a secas (0,1,0) no
     recupera el discontinuo: hay que igualar la especificidad */
  .cuotas .cuota-prueba{border-top-style:dashed}
  .cuota-plan{margin-bottom:1rem}
}

/* ── datos: cinco tarjetas, que aquí un muro de texto no lo lee nadie ── */
.datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));gap:1.2rem;margin-top:1.7rem}
.datos article{background:var(--bg-3);border:1px solid var(--line);border-radius:14px;padding:1.5rem}
/* son cinco y la rejilla da dos columnas: sin esto la quinta se queda sola en
   media fila, estrecha y del doble de alto, con el hueco al lado */
.datos article:last-child{grid-column:1 / -1}
.datos h3{font-family:var(--font-d);font-weight:400;font-size:1.22rem;line-height:1.25;margin:0 0 .7rem;color:var(--ink)}
.datos p{color:var(--ink-dim);font-size:.93rem;line-height:1.7;margin:0}

/* ── descartes ── */
.no-list{list-style:none;display:grid;gap:1.1rem;color:var(--ink-dim);line-height:1.7;margin-top:1.4rem}
.no-list li{padding-left:1.5rem;position:relative}
.no-list li::before{content:"×";position:absolute;left:0;top:-.05rem;color:#E77;font-size:1.05rem}

/* ── el guion para el socio ── */
.pitch{max-width:48rem;margin:clamp(4rem,9vh,6.5rem) auto 0;border-left:2px solid var(--amber);background:rgba(232,163,61,.06);border-radius:0 12px 12px 0;padding:1.4rem 1.7rem}
.pitch .l{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin-bottom:.8rem}
.pitch p{color:var(--ink);line-height:1.75;margin:0}

/* ── faq desplegable ──
   Con <details> nativo y no con el acordeon de JS de la home: aqui las cuatro
   respuestas son largas y desplegadas empujaban el cierre (que es el unico
   sitio de la pagina que pide el clic) fuera de la pantalla. Nativo significa
   que abre y cierra sin JS, que Ctrl+F encuentra el texto cerrado en los
   navegadores que lo soportan, y que el teclado ya funciona sin escribir nada. */
.faq-l{margin-top:1.6rem;border-top:1px solid var(--line)}
.faq-l > details{border-bottom:1px solid var(--line)}
.faq-l summary{
  list-style:none;cursor:pointer;padding:1.35rem 0;
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.2rem;
}
.faq-l summary::-webkit-details-marker{display:none}
.faq-l h3{font-family:var(--font-d);font-weight:400;font-size:1.28rem;line-height:1.25;color:var(--ink);margin:0;transition:color .3s var(--ease)}
.faq-l summary:hover h3{color:var(--amber-2)}
.faq-l summary:focus-visible{outline:1px solid var(--amber);outline-offset:4px}
/* la flecha: media caja girada 45 grados, que un glifo de texto no se alinea
   igual en los tres navegadores */
.faq-l summary::after{
  content:"";flex:none;width:.5rem;height:.5rem;margin-top:.45rem;
  border-right:1.5px solid var(--ink-faint);border-bottom:1.5px solid var(--ink-faint);
  transform:rotate(45deg);transition:transform .35s var(--ease),border-color .3s;
}
.faq-l details[open] summary::after{transform:rotate(225deg);border-color:var(--amber)}
.faq-l p{margin:0;padding-bottom:1.45rem;line-height:1.75}
.faq-l a{color:var(--amber-2);text-decoration:underline}

/* ── los limites, plegados ──
   Son ocho parrafos y tres tarjetas entre el precio y el boton. La senal de
   honestidad la da que esten disponibles, no que haya que atravesarlos. Mismo
   <details> nativo que la FAQ, pero con el resumen en caja para que se vea que
   hay algo debajo y no parezca un titulo mas. */
.limites{margin-top:2.2rem;border:1px solid var(--line);border-radius:12px;background:var(--bg-3)}
.limites > summary{
  list-style:none;cursor:pointer;padding:1.1rem 1.3rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
}
.limites > summary::-webkit-details-marker{display:none}
.limites > summary h3{font-family:var(--font-d);font-weight:400;font-size:1.15rem;color:var(--ink);margin:0;transition:color .3s var(--ease)}
.limites > summary:hover h3{color:var(--amber-2)}
.limites > summary:focus-visible{outline:1px solid var(--amber);outline-offset:3px}
.limites > summary::after{
  content:"";flex:none;width:.5rem;height:.5rem;
  border-right:1.5px solid var(--ink-faint);border-bottom:1.5px solid var(--ink-faint);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .35s var(--ease),border-color .3s;
}
.limites[open] > summary::after{transform:rotate(225deg);border-color:var(--amber)}
/* el contenido respira dentro de la caja, y el summary se separa de el */
.limites > *:not(summary){padding-left:1.3rem;padding-right:1.3rem}
.limites > *:last-child{padding-bottom:1.4rem}
/* en movil esos 1.3rem por lado son 42px de columna comidos, encima de los que
   ya se lleva el panel. Va aqui abajo y no con el resto del bloque de movil
   porque estas reglas se declaran despues y ganarian por orden. */
@media(max-width:640px){
  .limites > summary{padding-left:.9rem;padding-right:.9rem}
  .limites > *:not(summary){padding-left:.9rem;padding-right:.9rem}
}

/* ── cierre ── */
/* Es el ultimo bloque de la pagina y el unico que pide el clic: iba mas
   pequeno que cualquier panel del cuerpo, asi que despues de leer 3.000
   palabras el cierre parecia una nota al pie. Ahora manda. */
.ask{max-width:46rem;margin:clamp(4rem,9vh,6.5rem) auto 0;text-align:center;background:var(--bg-2);border:1px solid var(--line);border-radius:20px;padding:clamp(2.6rem,5vw,3.8rem) clamp(1.6rem,4vw,3rem)}
.ask h2{font-family:var(--font-d);font-weight:400;font-size:clamp(1.9rem, 1.45rem + 1.9vw, 2.9rem);line-height:1.12;letter-spacing:-.015em;margin-bottom:1.1rem}
.ask p{color:var(--ink-dim);font-size:1.03rem;line-height:1.7;margin:0 auto 2.1rem;max-width:42ch}
.ask .btn{font-size:1.05rem;padding:1.05rem 2.4rem}
.ask .fine{font-size:.94rem;margin:1.5rem auto 0;max-width:48ch}

/* ── modal: <dialog> nativo (foco atrapado, Esc y ::backdrop de serie) ──
   margin:auto explicito porque el reset *{margin:0} de style.css tumba el
   centrado que el navegador le da de serie a un dialog abierto con showModal(). */
dialog.mod{margin:auto;width:min(34rem,calc(100vw - 2rem));max-height:calc(100dvh - 3rem);padding:0;color:var(--ink);background:var(--bg-2);border:1px solid var(--line-strong);border-radius:18px;overflow:auto}
dialog.mod::backdrop{background:rgba(6,10,7,.75)}
body:has(dialog[open]){overflow:hidden}
.mod-head{display:flex;align-items:center;gap:.9rem;padding:1.1rem 1.3rem;border-bottom:1px solid var(--line)}
.mod-n{font-family:var(--font-d);font-size:.9rem;color:var(--amber)}
.mod-n.dim{color:var(--ink-faint)}
.mod-bar{flex:1;height:2px;background:var(--line-strong);border-radius:2px;overflow:hidden}
.mod-bar i{display:block;height:100%;width:0;background:var(--amber);transition:width .3s var(--ease)}
.mod-x{background:none;border:0;color:var(--ink-faint);font-size:1.5rem;line-height:1;cursor:pointer;padding:0 .2rem}
.mod-x:hover{color:var(--ink)}
.mod-body{padding:1.7rem 1.4rem 1.6rem}
.qn{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint)}
.q{font-family:var(--font-d);font-weight:400;font-size:clamp(1.2rem, 1.05rem + .8vw, 1.5rem);line-height:1.3;margin:.8rem 0 1.4rem}
/* la aclaracion va dentro del <h2>: hereda su margen y no descuadra el hueco */
.qh{display:block;font-family:var(--font-t);font-weight:300;font-size:.86rem;line-height:1.5;color:var(--ink-faint);margin-top:.6rem}
.opts{display:grid;gap:.65rem}
.opt{text-align:left;font:inherit;font-size:.95rem;color:var(--ink);background:var(--bg-3);border:1px solid var(--line);border-radius:12px;padding:.85rem 1.1rem;cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.opt:hover,.opt:focus-visible{border-color:var(--amber);background:rgba(232,163,61,.07);transform:translateX(4px);outline:none}
.opt.on{border-color:var(--amber);background:rgba(232,163,61,.1)}
.mod-l{display:block;font-weight:500;font-size:.9rem;margin:1.2rem 0 .45rem;color:var(--ink)}
.mod-l:first-of-type{margin-top:0}
.mod-i{width:100%;padding:.85rem 1rem;font:inherit;font-size:1rem;color:var(--ink);background:var(--bg-3);border:1px solid var(--line-strong);border-radius:10px}
.mod-i:focus{outline:none;border-color:var(--amber)}
.mod-i::placeholder{color:var(--ink-faint)}
.mod-c{display:flex;gap:.7rem;align-items:flex-start;margin:1.5rem 0 1.3rem;font-size:.85rem;line-height:1.55;color:var(--ink-dim)}
.mod-c input{margin-top:.2rem;accent-color:var(--amber);flex:none}
.mod-c a{text-decoration:underline}
.mod-e{color:#E77;font-size:.88rem;margin:0 0 .9rem}
.mod-send{text-align:center;margin-top:1.6rem}
.mod-back{display:block;background:none;border:0;color:var(--ink-faint);font:inherit;font-size:.85rem;cursor:pointer;margin:1.4rem auto 0;padding:0}
.mod-back:hover{color:var(--ink)}
.mod-ok h3{font-family:var(--font-d);font-weight:400;font-size:1.35rem;margin-bottom:.8rem}
.mod-ok p{color:var(--ink-dim);line-height:1.7}
.mod-ok a{color:var(--amber-2);text-decoration:underline}

/* al final del fichero a proposito: .hidden pierde por orden contra
   cualquier regla posterior que declare display (.mod-back, .mod-head) */
.hidden{display:none}