/* Semblanza, por Reyes Project. Piloto: Yxela Reyes García. Ronda 2: línea y precisión.
   Paleta tomada de su banner de LinkedIn: mármol, pizarra y oro apagado.
   Firma visual: la línea de contrato, un trazo de oro que baja por el riel izquierdo y se dibuja con el desplazamiento,
   con un tramo horizontal en cada título; en la trayectoria se vuelve el eje de la línea de tiempo. */
@font-face{font-family:"Literata";src:url(/f/literata-latin-400-normal.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Literata";src:url(/f/literata-latin-500-normal.woff2)format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Literata";src:url(/f/literata-latin-400-italic.woff2)format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Plex";src:url(/f/ibm-plex-sans-latin-400-normal.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex";src:url(/f/ibm-plex-sans-latin-500-normal.woff2)format("woff2");font-weight:500;font-display:swap}

:root{
  --marmol:#F4F4F3;--banda:#E6E7E6;--pizarra:#263236;--gris:#5F6669;--oro:#AE9E88;--oro-t:#76664F;
  --tinta:#1D262A;
  --riel:clamp(18px,9vw,128px);        /* eje de la línea de contrato */
  --sangria:calc(var(--riel) + clamp(22px,4vw,56px));
  --der:clamp(18px,6vw,96px);
  --medida:66ch;
  --serif:"Literata",Georgia,"Times New Roman",serif;
  --sans:"Plex","IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --lento:900ms cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%;scroll-padding-top:56px}
html.listo{scroll-behavior:smooth}
body{margin:0;background:var(--marmol);color:var(--tinta);font:400 1.0625rem/1.65 var(--serif);overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-color:var(--oro);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--oro-t)}
:focus-visible{outline:2px solid var(--oro-t);outline-offset:3px}
h1,h2,h3{font-weight:500;letter-spacing:-.005em;margin:0;text-wrap:balance}
p{margin:0}
p,li,dd,figcaption{text-wrap:pretty}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:-200vw;top:8px;background:var(--pizarra);color:var(--marmol);padding:.5rem .9rem;font-family:var(--sans);z-index:50}
.saltar:focus{left:8px}
small,.meta,.rol,time,.pre,.nota,.sans{font-family:var(--sans)}

/* Franja de mármol: arriba y abajo */
.franja{height:14px;background:url(/i/marmol-franja.webp) center/cover;border-bottom:1px solid var(--banda)}
.franja.baja{border-bottom:0;border-top:1px solid var(--banda)}

/* Línea de contrato, el trazo de oro que recorre todo */
.contrato{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:1;overflow:visible}
.contrato path{fill:none;stroke:var(--oro);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.contrato .base{stroke:var(--banda);stroke-width:1}
main{position:relative}

/* Menú lateral (escritorio) y barra fina (móvil) */
.nav{position:fixed;z-index:40;font-family:var(--sans);font-size:.8125rem}
.nav ol{list-style:none;margin:0;padding:0}
.nav a{text-decoration:none;color:var(--gris)}
.nav .idioma{color:var(--oro-t);letter-spacing:.08em;text-transform:uppercase;font-size:.75rem;font-weight:500}
.nav .idioma:hover,.nav .idioma:focus-visible{text-decoration:underline;text-decoration-color:var(--oro)}
@media (min-width:900px){
  :root{--der:calc(clamp(18px,6vw,96px) + 72px)}
  .nav{right:34px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;gap:34px}
  .nav .marca{display:none}
  .nav ol{display:flex;flex-direction:column;gap:22px;align-items:flex-end}
  .nav li{position:relative}
  .nav ol a{display:flex;align-items:center;gap:14px;height:14px}
  .nav a span.e{opacity:0;transform:translateX(6px);transition:opacity .4s,transform .4s;white-space:nowrap}
  .nav a i{display:block;width:7px;height:7px;border-radius:50%;background:var(--banda);border:1px solid var(--oro);transition:transform .4s,background .4s}
  .nav a[aria-current="true"] i,.nav a:hover i{background:var(--oro);transform:scale(1.35)}
  .nav a[aria-current="true"] span.e,.nav a:hover span.e,.nav a:focus-visible span.e{opacity:1;transform:none;color:var(--oro-t)}
  .nav .idioma{padding:4px 0}
}
@media (max-width:899px){
  .nav{left:0;right:0;top:0;height:46px;background:rgba(244,244,243,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--banda);display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 18px;transition:transform .45s var(--lento)}
  .nav.escondida{transform:translateY(-100%)}
  .nav .marca{color:var(--tinta);text-decoration:none;font-weight:500;white-space:nowrap;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .nav ol,.nav .idioma{flex:none}
  .nav ol{display:flex;gap:16px;margin-left:auto}
  .nav ol a{display:inline-block;padding:12px 0}
  .nav a i{display:none}
  .nav a[aria-current="true"]{color:var(--oro-t);box-shadow:inset 0 -1px 0 var(--oro)}
  .nav li:nth-child(n+4){display:none}
  .nav .idioma{padding:12px 0 12px 12px;border-left:1px solid var(--banda)}
}
@media (max-width:360px){
  .nav li:nth-child(n+3){display:none}
}

/* Portada */
.portada{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,34vw);gap:clamp(28px,5vw,80px);padding:clamp(72px,11vh,140px) var(--der) clamp(56px,8vh,110px) var(--sangria);align-items:end;min-height:88vh;position:relative}
.portada .texto{max-width:var(--medida)}
.pre{display:block;color:var(--oro-t);font-size:1rem;letter-spacing:.02em;margin-bottom:.6rem}
h1{font-size:clamp(2.6rem,7.2vw,6.4rem);line-height:.98;color:var(--pizarra)}
h1 span{display:block}
.esp{margin-top:clamp(20px,3vh,36px);font-size:clamp(1.15rem,1.9vw,1.5rem);color:var(--oro-t)}
.valor{margin-top:.9rem;font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.55;max-width:52ch;color:var(--tinta)}
.cargo{margin-top:1.6rem;font-family:var(--sans);font-size:.95rem;color:var(--gris);line-height:1.5}
.cargo strong{color:var(--tinta);font-weight:500}
.acciones{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:2rem;font-family:var(--sans);font-size:.95rem}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:.62rem 1.25rem;border:1px solid var(--pizarra);color:var(--pizarra);text-decoration:none;transition:background .3s,color .3s;font:inherit;cursor:pointer}
.btn:hover{background:var(--pizarra);color:var(--marmol)}
.btn.lleno{background:var(--pizarra);color:var(--marmol)}
.btn.lleno:hover{background:var(--tinta)}
.retrato{margin:0;position:relative;align-self:end}
.retrato .marco{overflow:hidden;aspect-ratio:4/5;background:var(--banda)}
.retrato img{width:100%;height:100%;object-fit:cover;transform-origin:50% 35%;animation:respira 14s ease-in-out infinite alternate}
@keyframes respira{from{transform:scale(1)}to{transform:scale(1.03)}}
.retrato figcaption{font-family:var(--sans);font-size:.8rem;color:var(--gris);margin-top:.7rem;display:flex;justify-content:space-between;gap:12px}
.retrato figcaption::before{content:"";flex:1;align-self:center;height:1px;background:var(--oro);order:2;opacity:.6}
.retrato figcaption span:last-child{order:3}

/* Cifras */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);padding:clamp(40px,6vh,72px) var(--der) clamp(40px,6vh,72px) var(--sangria);border-top:1px solid var(--banda);border-bottom:1px solid var(--banda);gap:0 clamp(16px,3vw,48px);margin:0;list-style:none}
.cifras li{padding-right:12px;border-left:1px solid var(--banda);padding-left:clamp(14px,1.8vw,28px)}
.cifras li:first-child{border-left:0;padding-left:0}
.cifras b{display:block;font-weight:500;font-size:clamp(3rem,6.4vw,6rem);line-height:1;color:var(--pizarra);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.02em}
.cifras b small{font-family:var(--sans);font-size:.3em;font-weight:400;color:var(--oro-t);vertical-align:top;margin-top:.5em;display:inline-block;letter-spacing:0}
.cifras span.t{display:block;margin-top:.9rem;font-family:var(--sans);font-size:.9rem;line-height:1.45;color:var(--gris);max-width:22ch}

/* Secciones claras */
.sec{position:relative;padding:clamp(72px,11vh,150px) var(--der) clamp(48px,7vh,100px) var(--sangria)}
.sec h2,.cabeza h2{font-size:clamp(1.75rem,3.3vw,2.75rem);color:var(--pizarra);line-height:1.12;max-width:20ch}
.sin-js .sec h2::before,.sin-js .cabeza h2::before{content:"";position:absolute;left:var(--riel);width:calc(var(--sangria) - var(--riel) - 14px);height:1px;background:var(--oro);margin-top:.68em}
.sec .cuerpo{margin-top:clamp(28px,4vh,52px)}
.lead{font-size:clamp(1.2rem,1.9vw,1.55rem);line-height:1.5;max-width:var(--medida);color:var(--tinta)}
.par{max-width:var(--medida);margin-top:1.4rem;color:var(--gris)}
.par p+p{margin-top:1rem}
.oficio{margin:clamp(40px,6vh,72px) 0 0;max-width:calc(var(--medida) + 18ch);padding:0}
.oficio div{display:grid;grid-template-columns:minmax(12ch,18ch) 1fr;gap:12px clamp(20px,3vw,48px);padding:1.25rem 0;border-top:1px solid var(--banda)}
.oficio div:last-child{border-bottom:1px solid var(--banda)}
.oficio dt{font-weight:500;color:var(--pizarra);font-size:1.05rem}
.oficio dd{margin:0;color:var(--gris);font-size:1rem}

/* Obra principal, pizarra a pantalla completa */
.principal{position:relative;min-height:100vh;background:var(--pizarra);color:var(--marmol);display:grid;align-content:center;padding:clamp(80px,12vh,160px) var(--der) clamp(80px,12vh,160px) var(--sangria);overflow:hidden}
.principal .fondo{position:absolute;right:var(--der);bottom:8%;font-family:var(--sans);font-weight:400;font-size:clamp(7rem,26vw,24rem);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(174,158,136,.38);letter-spacing:-.04em;user-select:none;white-space:nowrap}
.principal .cuerpo{position:relative;max-width:calc(var(--medida) + 8ch)}
.principal .meta{color:var(--oro);font-size:.95rem;letter-spacing:.01em}
.principal h2{color:var(--marmol);font-size:clamp(2.2rem,5vw,4.4rem);line-height:1.04;margin-top:.5rem;max-width:16ch}
.principal h2::before{display:none}
.principal .d{margin-top:1.8rem;font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.55;color:rgba(244,244,243,.86);max-width:52ch}
.principal .ficha{display:flex;flex-wrap:wrap;gap:18px clamp(24px,5vw,72px);margin:2.8rem 0 0;padding:1.4rem 0 0;list-style:none;border-top:1px solid rgba(174,158,136,.5);font-family:var(--sans);font-size:.9rem;color:rgba(244,244,243,.72)}
.principal .ficha b{display:block;font-weight:500;color:var(--marmol);font-size:1.05rem}
.principal .regla{position:absolute;left:var(--riel);top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent,rgba(174,158,136,.5) 20%,rgba(174,158,136,.5) 80%,transparent)}

/* Obras restantes, con profundidad */
.obras{list-style:none;margin:0;padding:0;max-width:calc(var(--medida) + 26ch)}
.obras li{display:grid;grid-template-columns:minmax(11ch,15ch) 1fr;gap:10px clamp(20px,3.5vw,56px);padding:clamp(28px,4vh,44px) 0;border-top:1px solid var(--banda);align-items:start}
.obras li:last-child{border-bottom:1px solid var(--banda)}
.obras .meta{color:var(--oro-t);font-size:.9rem;line-height:1.45;will-change:transform}
.obras .meta span{display:block;color:var(--gris)}
.obras h3{font-size:clamp(1.25rem,2vw,1.6rem);color:var(--pizarra)}
.obras p.d{margin-top:.6rem;color:var(--gris);max-width:58ch}
.mas{margin-top:clamp(28px,4vh,48px);max-width:calc(var(--medida) + 26ch)}
.mas summary{cursor:pointer;font-family:var(--sans);color:var(--oro-t);list-style:none;display:flex;align-items:center;gap:14px;padding:.6rem 0;min-height:44px}
.mas summary::-webkit-details-marker{display:none}
.mas summary::after{content:"";width:34px;height:1px;background:var(--oro);transition:width .4s}
.mas[open] summary::after{width:90px}
.mas ul{margin:1rem 0 0;padding:0;list-style:none;columns:2;column-gap:clamp(24px,4vw,56px);color:var(--gris);font-size:.98rem}
.mas li{break-inside:avoid;padding:.45rem 0;border-top:1px solid var(--banda)}

/* Trayectoria: la línea de contrato se vuelve eje */
.hitos{list-style:none;margin:0;padding:0;max-width:calc(var(--medida) + 10ch)}
.hito{position:relative;padding:clamp(22px,3.4vh,36px) 0 clamp(22px,3.4vh,36px) 0}
.hito+.hito{border-top:1px solid var(--banda)}
.hito .anio{position:absolute;right:calc(100% + (var(--sangria) - var(--riel)) + 14px);top:clamp(22px,3.4vh,36px);text-align:right;font-family:var(--sans);line-height:1.2;white-space:nowrap}
.hito time{display:block;font-size:1.25rem;font-weight:500;color:var(--pizarra);font-variant-numeric:tabular-nums}
.hito .hasta{display:block;font-size:.8rem;color:var(--gris)}
.hito .nodo{position:absolute;left:calc(-1 * (var(--sangria) - var(--riel)) - 4.5px);top:calc(clamp(22px,3.4vh,36px) + .55rem);width:9px;height:9px;border-radius:50%;background:var(--marmol);border:1.5px solid var(--oro);transition:background .5s,transform .5s}
.hito.visible .nodo{background:var(--oro);transform:scale(1.1)}
.hito h3{font-size:1.2rem;color:var(--pizarra)}
.hito .rol{color:var(--oro-t);font-size:.9rem;margin-top:.15rem}
.hito .txt{margin-top:.6rem;color:var(--gris);max-width:58ch}
.hito.largo{background:linear-gradient(to right,rgba(230,231,230,.55),transparent 70%);margin-left:-18px;padding-left:18px}
@media (max-width:899px){
  .hito .anio{position:static;text-align:left;display:flex;gap:8px;align-items:baseline;margin-bottom:.4rem}
  .hito time{font-size:1.05rem}
}

/* Recomendaciones */
.recos{max-width:calc(var(--medida) + 14ch)}
.recos figure{margin:0}
.recos blockquote{margin:0}
.reco-mayor blockquote p{font-size:clamp(1.3rem,2.2vw,1.8rem);line-height:1.42;color:var(--pizarra);text-indent:-.45em}
.reco-mayor blockquote p::before{content:"\201C";color:var(--oro)}
.reco-mayor blockquote p::after{content:"\201D";color:var(--oro)}
.recos figcaption{margin-top:1rem;font-family:var(--sans);font-size:.9rem;color:var(--gris)}
.recos figcaption b{font-weight:500;color:var(--tinta);display:block}
.otras{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(20px,3vw,48px);margin-top:clamp(36px,5vh,64px);padding-top:1.6rem;border-top:1px solid var(--banda)}
.otras blockquote p{color:var(--tinta);font-size:1.02rem}
.otras blockquote p::before{content:"\201C";color:var(--oro)}
.otras blockquote p::after{content:"\201D";color:var(--oro)}
.trad{margin-top:.6rem;color:var(--gris);font-size:.92rem}
.trad span{font-family:var(--sans);color:var(--oro-t);font-size:.82rem}
.cabeza{position:relative;margin-top:clamp(64px,10vh,120px)}
.form{margin:clamp(24px,4vh,40px) 0 0;max-width:calc(var(--medida) + 18ch)}
.form div{display:grid;grid-template-columns:minmax(12ch,18ch) 1fr;gap:8px clamp(20px,3vw,48px);padding:1.1rem 0;border-top:1px solid var(--banda)}
.form div:last-child{border-bottom:1px solid var(--banda)}
.form dt{font-family:var(--sans);color:var(--oro-t);font-size:.95rem;padding-top:.15rem}
.form dd{margin:0;color:var(--tinta)}

/* Cierre y bóveda */
.cierre{background:var(--banda);position:relative}
.cierre .in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:clamp(40px,7vw,120px);padding:clamp(72px,11vh,140px) var(--der) clamp(56px,8vh,100px) var(--sangria);position:relative}
.cierre h2{font-size:clamp(1.9rem,3.6vw,3rem);color:var(--pizarra);line-height:1.1;max-width:16ch}
.cierre h2::before{content:"";position:absolute;left:var(--riel);width:calc(var(--sangria) - var(--riel) - 14px);height:1px;background:var(--oro);margin-top:.68em}
.cierre .acciones{margin-top:1.8rem}
.cierre .btn{border-color:var(--pizarra)}
.cita-cierre{margin:clamp(40px,6vh,64px) 0 0;max-width:52ch}
.cita-cierre blockquote{margin:0}
.cita-cierre p{font-style:italic;color:var(--gris);font-size:1.05rem;line-height:1.6}
.cita-cierre figcaption{margin-top:.8rem;font-family:var(--sans);font-size:.85rem;color:var(--gris)}
.boveda{position:relative;background:var(--pizarra);color:var(--marmol);padding:clamp(28px,3.5vw,44px);align-self:start}
.boveda::before{content:"";position:absolute;inset:10px;border:1px solid rgba(174,158,136,.55);pointer-events:none}
.boveda .tit{font-size:1.3rem;font-weight:500;display:flex;align-items:center;justify-content:space-between;gap:16px}
.boveda .dial{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--oro);position:relative;flex:none;transition:transform .9s var(--lento)}
.boveda .dial::before{content:"";position:absolute;left:50%;top:3px;width:1.5px;height:11px;background:var(--oro);margin-left:-.75px}
.boveda .dial::after{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--oro)}
.boveda:focus-within .dial{transform:rotate(150deg)}
.boveda .estado-cerrada{font-family:var(--sans);font-size:.82rem;color:var(--oro);margin-top:.4rem}
.boveda label{display:block;margin-top:1.6rem;font-family:var(--sans);font-size:.9rem;color:rgba(244,244,243,.8)}
.boveda input{display:block;width:100%;margin-top:.5rem;background:transparent;border:0;border-bottom:1px solid var(--oro);color:var(--marmol);font:1.2rem var(--sans);padding:.5rem 0;letter-spacing:.3em;border-radius:0}
.boveda input:focus-visible{outline:none;border-bottom-color:var(--marmol)}
.boveda input[aria-invalid="true"]{border-bottom-color:#E0B9A6}
.boveda .dos{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:1.4rem;font-family:var(--sans);font-size:.92rem}
.boveda .btn{border-color:var(--oro);color:var(--marmol);background:transparent}
.boveda .btn.lleno{background:var(--oro);color:var(--pizarra);border-color:var(--oro)}
.boveda .btn.lleno:hover{background:var(--marmol);border-color:var(--marmol)}
.boveda .btn:hover{background:rgba(174,158,136,.18)}
.boveda .btn.lleno:hover{background:var(--marmol)}
.boveda .btn[aria-disabled="true"]{opacity:.6;cursor:progress}
.boveda .nota{margin-top:1.2rem;font-size:.85rem;color:rgba(244,244,243,.7)}
.boveda .nota a{color:var(--marmol)}
.boveda .nota.aviso{margin-top:.6rem;font-family:var(--sans);color:var(--marmol);letter-spacing:.02em}
.boveda .estado{margin-top:.6rem;font-family:var(--sans);font-size:.9rem;color:var(--marmol);min-height:1.4em}
.pie{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:20px var(--der) 22px var(--sangria);border-top:1px solid rgba(38,50,54,.12);font-family:var(--sans);font-size:.85rem;color:var(--gris)}
.pie .casa{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:var(--pizarra)}
.pie .casa:hover{text-decoration:underline}
.pie .casa img{width:16px;height:16px;border-radius:50%}
.pie .enlaces{display:flex;flex-wrap:wrap;align-items:center;gap:0 28px}
.pie .llamado{color:var(--pizarra);font-weight:500;text-decoration:underline;text-decoration-color:var(--oro);text-underline-offset:.22em}

/* Aparición continua */
.sube{opacity:0;transform:translateY(14px);transition:opacity var(--lento),transform var(--lento)}
.sube.visible{opacity:1;transform:none}
.sin-js .sube{opacity:1;transform:none}
.sin-js .contrato{display:none}

@media (max-width:899px){
  .portada{grid-template-columns:1fr;min-height:0;padding-top:88px;align-items:start}
  .retrato{order:-1;max-width:62vw}
  .cifras{grid-template-columns:1fr 1fr;gap:28px clamp(16px,3vw,48px)}
  .cifras li:nth-child(3){border-left:0;padding-left:0}
  .otras{grid-template-columns:1fr;gap:24px 0}
  .mas ul{columns:1}
  .cierre .in{grid-template-columns:1fr}
  .obras li,.oficio div,.form div{grid-template-columns:1fr}
  .principal .fondo{bottom:3%;right:auto;left:var(--sangria);font-size:clamp(6rem,30vw,10rem)}
}
@media (max-width:480px){
  .cifras{grid-template-columns:1fr}
  .cifras li{border-left:0;padding-left:0}
  .retrato{max-width:72vw}
  h1{font-size:clamp(2.3rem,13vw,3.2rem)}
}
@media (prefers-reduced-motion:reduce){
  html,html.listo{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .sube{opacity:1;transform:none}
  .contrato path{stroke-dasharray:none!important;stroke-dashoffset:0!important}
  .obras .meta,.principal .fondo,.retrato img{transform:none!important}
}
@media print{
  .nav,.contrato,.boveda,.saltar,.franja,.principal .fondo,.principal .regla{display:none!important}
  body{color:#000;background:#fff;font-size:11pt}
  .principal{background:#fff;color:#000;min-height:0;padding:24pt 0}
  .principal h2,.principal .d,.principal .ficha dd{color:#000}
  .sec,.portada,.cifras,.cierre .in,.pie{padding-left:0;padding-right:0}
  .sube{opacity:1;transform:none}
  .cierre{background:#fff}
  .mas ul{display:block}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
}