/* EXP-001 · landing v2 · Dirección 3 «30 días»
   Fuente autoalojada (OFL): Atkinson Hyperlegible 400/700, diseñada para baja visión. */
@font-face{font-family:"Atkinson";src:url(fuentes/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson";src:url(fuentes/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --papel:#f6f5ee; --hoja:#fff; --tinta:#1b1d14; --tinta-2:#4b4f3f;
  --campo:#d6dd96;              /* verde aviso: solo como fondo, nunca como texto */
  --oliva:#465a0e; --oliva-d:#2f3d06;               /* el acento que sí va en texto (AA sobre papel y campo) */
  --noche:#1d1f16; --noche-t:#eeeedf;
  --linea:rgba(27,29,20,.15); --linea-2:rgba(27,29,20,.45);
  --sans:"Atkinson",ui-sans-serif,system-ui,sans-serif;
  /* escala: 14 · 18 · 22 · 30 · 42 · 64 */
  --t-xs:.875rem; --t-s:1.125rem; --t-m:1.375rem; --t-l:1.875rem; --t-xl:2.625rem; --t-xxl:4rem;
  --r-s:3px; --r-m:8px; --r-l:16px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;font:400 var(--t-s)/1.55 var(--sans);color:var(--tinta);background:var(--papel)}
a{color:var(--oliva);text-underline-offset:.18em;text-decoration-thickness:1.5px;transition:color .15s var(--ease)}
a:hover{color:var(--oliva-d);text-decoration-thickness:2.5px}
:focus-visible{outline:3px solid var(--tinta);outline-offset:3px;border-radius:var(--r-s)}
p{margin:0 0 1em}
h1,h2,h3{margin:0;font-weight:700}
.wrap{max-width:72rem;margin:0 auto;padding:0 1.25rem}


.topbar{position:sticky;top:0;z-index:10;background:rgba(246,245,238,.97);border-bottom:1px solid var(--linea)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3.5rem}
.brand{font-weight:700;color:var(--tinta);text-decoration:none}
.brand:hover{color:var(--tinta)}

.btn{display:inline-flex;align-items:center;min-height:3.25rem;background:var(--tinta);color:var(--papel);border:0;border-radius:var(--r-m);padding:.75rem 1.3rem;font:700 var(--t-s)/1.25 var(--sans);text-decoration:none;cursor:pointer;transition:background-color .15s var(--ease),transform .15s var(--ease)}
.btn:hover{background:#000;color:#fff;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn[disabled]{background:var(--linea-2);cursor:not-allowed}
.btn-sm{min-height:2.5rem;padding:.4rem .9rem;font-size:var(--t-xs)}

/* portada sobre el campo de color */
.hero{background:var(--campo);padding:2.5rem 0 3.25rem}
.para{font-size:var(--t-xs);font-weight:700;margin:0 0 1.1rem;color:var(--tinta)}
h1{font-size:var(--t-xl);line-height:1.04;letter-spacing:-.03em;max-width:15ch;margin-bottom:1.25rem}
.lead{font-size:var(--t-m);line-height:1.45;max-width:34rem;margin-bottom:1.75rem}
.hero .btn{width:100%;justify-content:center;text-align:center}
.indice{margin-top:2.5rem;border-bottom:2px solid var(--tinta)}
.indice a{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:.75rem;align-items:baseline;padding:.7rem 0;border-top:2px solid var(--tinta);color:var(--tinta);text-decoration:none;transition:background-color .15s var(--ease)}
.indice a:hover{background:rgba(27,29,20,.06)}
.indice-n{font-size:var(--t-m);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.indice-n small{font-size:var(--t-xs);letter-spacing:.02em;margin-right:.15rem}
@media (min-width:40rem){.hero .btn{width:auto}}
@media (min-width:60rem){
  .hero{padding:4.5rem 0 5rem}
  .hero .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:4rem;align-items:end}
  h1{font-size:var(--t-xxl);letter-spacing:-.035em}
  .indice{margin:0}
  .indice a{grid-template-columns:10.5rem minmax(0,1fr);padding:.9rem 0}
  .indice-n{font-size:var(--t-xl);line-height:1}
}

/* el recorrido: los días son la estructura de la página */
.recorrido{padding:3rem 0 1.5rem}
.recorrido>.wrap>h2{font-size:var(--t-l);letter-spacing:-.02em;line-height:1.1;margin-bottom:2rem}
.linea{list-style:none;margin:0;padding:0}
.tramo{position:relative;padding:0 0 2.75rem 1.75rem;border-left:2px solid var(--tinta);margin-left:.4rem}
.tramo:last-child{border-left-color:transparent;padding-bottom:1rem}
.tramo::before{content:"";position:absolute;left:-.55rem;top:.15rem;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--campo);border:2px solid var(--tinta)}
.dia{font-size:var(--t-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--oliva);margin:0 0 .5rem}
.tramo h3{font-size:var(--t-m);line-height:1.2;letter-spacing:-.01em;margin-bottom:.75rem}
.tramo-cuerpo>p{max-width:38rem}
.nota{color:var(--tinta-2);font-size:var(--t-xs);margin-top:1rem}
.problemas{list-style:none;margin:0;padding:0}
.problemas li{font-size:var(--t-m);line-height:1.25;font-weight:700;letter-spacing:-.01em;padding:.6rem 0;border-top:1px solid var(--linea)}
.problemas li:last-child{border-bottom:1px solid var(--linea)}
@media (min-width:60rem){
  .problemas li{font-size:var(--t-l);padding:.8rem 0}
  .recorrido{padding:5rem 0 2rem}
  .recorrido>.wrap>h2{font-size:var(--t-xl);margin-bottom:3rem}
  .tramo{display:grid;grid-template-columns:13rem minmax(0,1fr);gap:2rem;padding:0 0 4rem 2.5rem;margin-left:.6rem}
  .tramo::before{left:-.7rem;top:.6rem;width:1.3rem;height:1.3rem}
  .dia{font-size:var(--t-xl);letter-spacing:-.03em;text-transform:none;color:var(--tinta);line-height:1;margin:0}
  .tramo-cuerpo{max-width:46rem;padding-top:.35rem}
  .tramo h3{font-size:var(--t-l)}
}

/* ejemplo ficticio */
.ejemplo{margin:1.5rem 0 0}
.ej-marca{margin:0;padding:.7rem 1rem;background:var(--tinta);color:var(--noche-t);border-radius:var(--r-l) var(--r-l) 0 0;font-size:var(--t-xs);display:flex;flex-wrap:wrap;gap:.15rem .6rem;align-items:baseline}
.ej-marca strong{color:var(--campo);text-transform:uppercase;letter-spacing:.08em}
.ej-hoja{background:var(--hoja);border:2px solid var(--tinta);border-top:0;border-radius:0 0 var(--r-l) var(--r-l);padding:1rem 1rem .25rem}
.ej-cab{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.2rem 1rem;padding-bottom:.75rem;border-bottom:2px solid var(--tinta)}
.ej-titulo{font-weight:700;margin:0}
.ej-meta{font-size:var(--t-xs);color:var(--tinta-2);margin:0;align-self:center}
.ej-lista{list-style:none;margin:0;padding:0}
.aviso{padding:.9rem 0;border-bottom:1px solid var(--linea)}
.aviso p{margin:0}
.aviso-estado{display:inline-block;font-size:var(--t-xs);font-weight:700;border:1.5px solid var(--tinta);border-radius:var(--r-s);padding:0 .4rem;margin-bottom:.4rem!important}
.aviso-estado span{font-weight:400;margin-left:.25rem}
.aviso-urgente .aviso-estado{background:var(--campo)}
.aviso-incompleto .aviso-estado{border-style:dashed}
.aviso-que{font-weight:700;line-height:1.35}
.aviso-donde,.aviso-datos{font-size:var(--t-xs);color:var(--tinta-2);line-height:1.5}
.aviso-donde{margin-top:.15rem!important}
time{font-variant-numeric:tabular-nums;font-weight:700;color:var(--tinta)}
.ej-pie{font-size:var(--t-xs);color:var(--tinta-2);padding:.85rem 0 .75rem;margin:0}
@media (min-width:40rem){
  .ej-marca{padding:.75rem 1.5rem}
  .ej-hoja{padding:1.25rem 1.5rem .4rem}
  .aviso{display:grid;grid-template-columns:10rem minmax(0,1fr);column-gap:1rem}
  .aviso-estado{grid-row:1/4;align-self:start;justify-self:start}
}

/* persona: dentro del contacto, es quien contesta */
.persona{display:flex;gap:1.25rem;align-items:flex-start;max-width:30rem;border-top:2px solid var(--tinta);padding-top:1rem;margin-top:1.5rem}
.persona-nombre{font-weight:700;margin-bottom:.35rem}
.persona-linea{margin-bottom:.75rem}
.persona-enlaces{margin:0}
.persona-foto{flex:none;width:5.5rem;height:5.5rem;border-radius:var(--r-m);object-fit:cover}

/* preguntas */
.faq{padding:3rem 0}
.faq>.wrap>h2{font-size:var(--t-l);letter-spacing:-.02em;margin-bottom:1.5rem}
.faq-grupo+.faq-grupo{margin-top:2rem}
.faq-grupo h3{font-size:var(--t-xs);letter-spacing:.04em;text-transform:uppercase;color:var(--oliva);margin-bottom:.4rem}
details{border-top:1px solid var(--linea-2)}
.faq-grupo details:last-child{border-bottom:1px solid var(--linea-2)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center;min-height:3.25rem;padding:.7rem 0;font-weight:400;line-height:1.35;transition:color .15s var(--ease)}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:.8rem;height:.8rem;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 100% no-repeat;transition:transform .2s var(--ease)}
details[open]>summary::after{transform:rotate(45deg)}
details[open]>summary{font-weight:700}
summary:hover{color:var(--oliva)}
details>p{margin:0 0 1.1rem;color:var(--tinta-2)}
@media (min-width:60rem){
  .faq{padding:5rem 0}
  .faq>.wrap>h2{font-size:var(--t-xl);margin-bottom:2.5rem}
  .faq-grupo{display:grid;grid-template-columns:13rem minmax(0,1fr);column-gap:4.5rem;max-width:62rem}
  .faq-grupo h3{grid-row:1/span 20;padding-top:1rem}
  .faq-grupo details{grid-column:2}
  .faq-grupo+.faq-grupo{margin-top:3rem}
}

/* contacto: vuelve el campo de color, cierra el círculo */
.contacto{background:var(--campo);padding:3rem 0 3.5rem}
.contacto .dia{color:var(--tinta)}
.contacto h2{font-size:var(--t-l);line-height:1.1;letter-spacing:-.02em;margin-bottom:0;max-width:16ch}
.contacto-form{margin-top:2rem}
.form{background:var(--hoja);border:2px solid var(--tinta);border-radius:var(--r-l);padding:1.25rem 1rem}
.estado{display:flex;gap:.7rem;align-items:flex-start;border:1.5px dashed var(--tinta);border-radius:var(--r-m);padding:.75rem .85rem;margin-bottom:1.5rem}
.estado::before{content:"";flex:none;width:.85rem;height:.85rem;margin-top:.25rem;border-radius:50%;border:2px solid var(--tinta);background:linear-gradient(90deg,var(--tinta) 50%,transparent 50%)}
.estado p{margin:0;font-size:var(--t-xs);line-height:1.5}
.campo{margin-bottom:1.2rem}
label{display:block;font-weight:700;margin-bottom:.35rem;line-height:1.3}
.opcional{font-weight:400;font-size:var(--t-xs);color:var(--tinta-2);margin-left:.35rem}
.ayuda{font-size:var(--t-xs);color:var(--tinta-2);margin:-.1rem 0 .45rem}
input[type=text],input[type=number],textarea{width:100%;font:inherit;color:var(--tinta);background:#fff;padding:.7rem .8rem;min-height:3.25rem;border:1.5px solid var(--tinta-2);border-radius:var(--r-s);transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
textarea{resize:vertical;line-height:1.5}
input:hover,textarea:hover{border-color:var(--tinta)}
input:focus-visible,textarea:focus-visible{outline:3px solid var(--tinta);outline-offset:2px;border-color:var(--tinta)}
.check{display:flex;gap:.7rem;align-items:flex-start;font-weight:400;margin:.25rem 0 1.25rem}
.check input{margin:.2rem 0 0;width:1.3rem;height:1.3rem;flex:none;accent-color:var(--tinta)}
.btn-enviar{width:100%;justify-content:center}
.hint{font-size:var(--t-xs);color:var(--tinta-2);line-height:1.5}
.contacto .hint{color:var(--tinta)}
#msg:empty{display:none}
#msg{margin:.85rem 0 0}
.despues{margin-top:1.5rem}
.canales{list-style:none;margin:0 0 1.25rem;padding:0}
.canales li{display:flex;flex-wrap:wrap;gap:.25rem 1rem;align-items:baseline;padding:.7rem 0;border-top:1px solid var(--linea-2);border-bottom:1px solid var(--linea-2)}
.canal{font-weight:700;min-width:5.5rem}
@media (min-width:40rem){.form{padding:1.75rem}.btn-enviar{width:auto}}
@media (min-width:60rem){
  .contacto{padding:5rem 0}
  .contacto .wrap{display:grid;grid-template-columns:5fr 7fr;gap:3rem;align-items:start}
  .contacto-form{margin-top:0}
  .contacto-intro{position:sticky;top:6rem}
  .contacto h2{font-size:var(--t-xl)}
  .contacto .dia{font-size:var(--t-xs);border:0;padding:0;margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.04em}
}

/* pendientes */
.ph{color:var(--tinta);background:rgba(27,29,20,.04);border:1.5px dashed rgba(27,29,20,.55);border-radius:var(--r-s);padding:0 .3em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

footer{border-top:1px solid var(--linea-2);padding:1.5rem 0 3rem;font-size:var(--t-xs)}
footer p{margin:0 0 .5rem}
footer a{margin-right:1.25rem;color:var(--tinta)}

/* páginas legales */
.draft{background:var(--tinta);color:var(--papel);font-size:var(--t-xs);font-weight:700;padding:.6rem 0}
.legal{padding-bottom:3rem}
.legal .wrap{max-width:44rem}
.legal h1{font-size:var(--t-l);margin:2.5rem 0 1rem}
.legal h2{font-size:var(--t-m);margin:2rem 0 .6rem}
.legal table{border-collapse:collapse;width:100%;font-size:var(--t-xs)}
.legal td,.legal th{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:.6rem .5rem .6rem 0;text-align:left;vertical-align:top}
ul.plain{padding-left:1.2rem;margin:0 0 1em}
ul.plain li{margin-bottom:.4rem}

/* landing-v2 (Dev): controles que el formulario ampliado necesita, con los mismos tokens del diseño */
.aviso-avisado{font-size:var(--t-xs);font-weight:700;color:var(--tinta);margin-top:.35rem!important}
@media (min-width:40rem){.aviso>p:not(.aviso-estado){grid-column:2}}
select{width:100%;font:inherit;color:var(--tinta);background:#fff;padding:.7rem 2.4rem .7rem .8rem;min-height:3.25rem;border:1.5px solid var(--tinta-2);border-radius:var(--r-s);-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--tinta) 50%),linear-gradient(135deg,var(--tinta) 50%,transparent 50%);background-position:calc(100% - 1.15rem) 50%,calc(100% - .8rem) 50%;background-size:.35rem .35rem;background-repeat:no-repeat;transition:border-color .15s var(--ease)}
select:hover{border-color:var(--tinta)}
select:focus-visible{outline:3px solid var(--tinta);outline-offset:2px;border-color:var(--tinta)}
.grupo-opciones{border:0;margin:0 0 1.2rem;padding:0;min-width:0}
.grupo-opciones legend{font-weight:700;margin-bottom:.35rem;line-height:1.3;padding:0}
.opciones{display:flex;flex-wrap:wrap;gap:.5rem}
.opciones label{display:flex;gap:.5rem;align-items:center;font-weight:400;margin:0;min-height:2.75rem;padding:.35rem .8rem;border:1.5px solid var(--tinta-2);border-radius:var(--r-s);cursor:pointer}
.opciones label:hover{border-color:var(--tinta)}
.opciones input{margin:0;width:1.2rem;height:1.2rem;flex:none;accent-color:var(--tinta)}
.rgpd{font-size:var(--t-xs);color:var(--tinta-2);line-height:1.5;margin:0 0 1rem}
.trampa{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
[hidden]{display:none!important}