/* Mathis Laurent — "Perfil de etapa ciclista": roadbook impreso. Papel, tinta, rojo de categoria, amarillo de maillot (solo como fondo). */
:root{
  --paper:#F2ECDF; --sheet:#FBF8F1; --paper-2:#E6DCC6; --ink:#1D1B17; --soft:#4E493F; --line:rgba(29,27,23,.18); --line-soft:rgba(29,27,23,.09);
  --red:#A8231B; --yellow:#F4C21A; --foot-txt:#EDE6D6; --foot-soft:#CFC6B4;
  --display:'Barlow Condensed','Arial Narrow','Roboto Condensed',system-ui,sans-serif; --body:'Spectral',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:1.07rem; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
img{display:block; max-width:100%; height:auto;}
a{color:inherit;}
p{margin:0 0 1em;}
.wrap{max-width:1140px; margin:0 auto; padding:0 24px;}
h1,h2,h3{font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:.005em; line-height:.98; margin:0 0 .4em;}
h1{font-size:clamp(3rem,7.4vw,5.6rem);}
h2{font-size:clamp(2rem,4vw,3rem);}
h3{font-size:1.3rem; font-weight:700; line-height:1.1;}
.lede{color:var(--soft); max-width:44rem;}
.label{font-family:var(--mono); font-size:.74rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--red); margin:0 0 12px;}
.sheet{background:var(--sheet); border:1px solid var(--line); border-radius:3px; box-shadow:0 1px 0 rgba(29,27,23,.05), 0 14px 30px -26px rgba(29,27,23,.5);}
.skip{position:absolute; left:-999px; top:8px; z-index:100; background:var(--ink); color:var(--sheet); padding:8px 14px;}
.skip:focus{left:8px;}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--red); outline-offset:3px;}

/* --- cabecera: roadbook --- */
.rb{background:var(--sheet); border-bottom:3px solid var(--ink);}
.rb-top{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 0 12px; border-bottom:1px dashed var(--line);}
.plate{display:flex; align-items:center; gap:12px; text-decoration:none; min-width:0;}
.plate-no{display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; background:var(--ink); color:var(--sheet); font-family:var(--display); font-weight:800; font-size:1.7rem; line-height:1;}
.plate-txt{display:flex; flex-direction:column; line-height:1.1; min-width:0;}
.plate-txt b{font-family:var(--display); font-weight:800; font-size:1.55rem; text-transform:uppercase; letter-spacing:.01em;}
.plate-txt small{font-family:var(--mono); font-size:.7rem; color:var(--soft); margin-top:3px;}
.bibs{display:flex; gap:12px; flex-shrink:0;}
.bib{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; width:70px; height:54px; padding-top:2px;
  background:#fff radial-gradient(circle at 7px 7px,#8C8578 2.2px,transparent 2.8px), #fff; text-decoration:none; color:var(--soft);
  border:1.5px solid #8C8578; font-family:var(--display); font-weight:800; font-size:1.45rem; line-height:1; transition:transform .15s;}
.bib::before,.bib::after{content:""; position:absolute; top:5px; width:5px; height:5px; border-radius:50%; background:#8C8578;}
.bib::before{left:5px;} .bib::after{right:5px;}
.bib small{font-family:var(--mono); font-weight:500; font-size:.56rem; letter-spacing:.03em; color:var(--soft); margin-bottom:3px;}
.bib:hover{transform:rotate(-2deg);}
.bib.on{color:var(--red); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); transform:rotate(-3deg);}
.bib.on::before,.bib.on::after{background:var(--ink);}
.bib.on small{color:var(--ink);}

.route{position:relative; padding-top:100px; margin:8px 0 0;}
.prof{position:relative; height:150px;}
.prof-svg{position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible;}
.prof-svg .area{fill:var(--paper-2);}
.prof-svg .climb{fill:rgba(168,35,27,.17);}
.prof-svg .line{fill:none; stroke:var(--ink); stroke-width:2.5; stroke-linejoin:round; vector-effect:non-scaling-stroke;}
.prof-svg .grid{stroke:rgba(29,27,23,.22); stroke-width:1; stroke-dasharray:3 6; vector-effect:non-scaling-stroke;}
.elev{position:absolute; left:19%; transform:translateY(-120%); font-family:var(--mono); font-size:.62rem; color:var(--soft);}
.mk{position:absolute; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:var(--sheet); border:2.5px solid var(--ink); z-index:2;}
.mk.on{width:22px; height:22px; margin:-11px 0 0 -11px; background:var(--yellow); box-shadow:0 0 0 3px var(--sheet);}
.ruler{display:flex; justify-content:space-between; padding:10px 0 12px; border-top:2px solid var(--ink); font-family:var(--mono); font-size:.66rem; color:var(--soft);
  background:repeating-linear-gradient(90deg,var(--ink) 0 1.5px,transparent 1.5px 6.0976%) top left/100% 7px no-repeat;}
.hitos{list-style:none; margin:0; padding:0; position:absolute; left:0; right:0; top:0; height:250px; pointer-events:none;}
.hito{position:absolute; top:0; left:var(--x); pointer-events:auto;}
.hito::after{content:""; position:absolute; left:-1px; top:80px; height:calc(20px + var(--py) * 150px); border-left:2px dotted var(--ink); pointer-events:none;}
.hito a{position:absolute; top:0; left:0; transform:translateX(-50%); display:flex; flex-direction:column; justify-content:center; height:80px; min-width:132px; width:max-content;
  padding:6px 14px; background:var(--sheet); border:1.5px solid var(--ink); border-top-width:4px; text-decoration:none; color:var(--ink); transition:background .15s;}
.hito.first a{transform:none;} .hito.last a{transform:translateX(-100%);}
.hito.first::after{left:0;} .hito.last::after{left:-2px;}
.hito a:hover{background:var(--paper-2);}
.hito a[aria-current]{background:var(--yellow);}
.km{display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:.68rem; font-weight:600; color:var(--soft);}
.hito a[aria-current] .km{color:var(--ink);}
.hito b{display:flex; align-items:center; gap:6px; font-family:var(--display); font-weight:800; font-size:1.5rem; text-transform:uppercase; line-height:1.05;}
.lab{font-family:var(--mono); font-size:.64rem; color:var(--soft);}
.jersey{width:20px; height:18px; fill:var(--ink);}
.cat{display:inline-grid; place-items:center; min-width:20px; height:16px; padding:0 3px; font-family:var(--mono); font-size:.6rem; font-weight:600; line-height:1; border:1.5px solid var(--red); color:var(--red);}
.cat.hc,.cat.c1{background:var(--ink); color:var(--sheet); border-color:var(--ink);}
.cat.start{min-width:0; width:0; height:0; padding:0; border:0; border-left:11px solid var(--ink); border-top:7px solid transparent; border-bottom:7px solid transparent;}
.cat.fin{min-width:16px; width:16px; padding:0; border:1.5px solid var(--ink); background:repeating-conic-gradient(var(--ink) 0 25%,#fff 0 50%) 0 0/8px 8px;}
.hito a[aria-current] .cat.c3{color:var(--ink); border-color:var(--ink);}

/* --- portada --- */
.hero{padding:52px 0 60px;}
.hero-grid{display:grid; grid-template-columns:1.3fr .7fr; gap:28px; align-items:stretch;}
.intro{padding:30px 36px 28px; display:flex; flex-direction:column;}
.sheet-top{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--soft);
  padding-bottom:14px; margin-bottom:24px; border-bottom:2px solid var(--ink);}
.role{display:inline-block; align-self:flex-start; font-family:var(--display); font-weight:700; font-size:1.25rem; text-transform:uppercase; letter-spacing:.02em; background:var(--yellow); color:var(--ink); padding:2px 10px; margin-bottom:18px;}
.sf{display:grid; grid-template-columns:repeat(4,1fr); margin:auto 0 0; border-top:2px solid var(--ink); padding-top:2px;}
.sf div{padding:12px 12px 2px 0; border-right:1px dashed var(--line);}
.sf div + div{padding-left:12px;}
.sf div:last-child{border-right:0;}
.sf dt{font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:var(--soft);}
.sf dd{margin:2px 0 0; font-family:var(--display); font-weight:700; font-size:1.2rem; text-transform:uppercase; line-height:1.1;}
.photo{margin:0; padding:10px; display:flex; flex-direction:column;}
.photo img{width:100%; flex:1; object-fit:cover; object-position:50% 25%; min-height:0; aspect-ratio:4/5;}
.photo figcaption{display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.72rem; color:var(--soft); padding:10px 2px 0;}
.dot-y{width:12px; height:12px; border-radius:50%; background:var(--yellow); border:2px solid var(--ink); flex-shrink:0;}

.sec{padding:64px 0; border-top:1px solid var(--line);}
.sec.last{padding-bottom:88px;}
.duo{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:28px;}
.slot{margin:0; padding:20px 22px 18px;}
.slot-h{display:flex; align-items:center; gap:12px; margin-bottom:12px;}
.slot-h h3{margin:0;}
.chart-box{height:180px; border-bottom:2px solid var(--ink);}
.chart{width:100%; height:100%; display:block;}
.chart .area{fill:var(--paper-2);}
.slot.b .chart .area{fill:rgba(168,35,27,.16);}
.chart .line{fill:none; stroke:var(--ink); stroke-width:2; stroke-linejoin:round; vector-effect:non-scaling-stroke;}
.chart .zero{stroke:var(--red); stroke-width:1.5; stroke-dasharray:5 5; vector-effect:non-scaling-stroke;}
.axis{display:flex; justify-content:space-between; font-family:var(--mono); font-size:.64rem; color:var(--soft); padding-top:4px;}
.slot figcaption{font-family:var(--mono); font-size:.76rem; color:var(--soft); margin-top:10px;}
.note{font-size:.9rem; color:var(--soft); margin:16px 0 0; max-width:44rem;}
.sp{display:inline-flex; flex-direction:column; align-items:center; justify-content:center; width:54px; height:54px; flex-shrink:0; background:var(--ink); color:var(--sheet);
  font-family:var(--display); font-weight:800; font-size:1.6rem; line-height:1;}
.sp small{font-family:var(--mono); font-weight:500; font-size:.54rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:2px;}
.sp.mini{width:54px; height:50px; font-size:1.4rem;}
.sp.tt{background:var(--yellow); color:var(--ink); border:2px solid var(--ink);}
.cps{list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 40px;}
.cps li{display:grid; grid-template-columns:70px 1fr; gap:16px; padding:18px 0; border-top:2px solid var(--ink);}
.cp-km{font-family:var(--mono); font-weight:600; font-size:.8rem; color:var(--red); padding-top:3px;}
.cps h3{margin:0 0 4px;}
.cps p{margin:0; color:var(--soft);}
.two{display:grid; grid-template-columns:1fr 1fr; gap:40px; margin:26px 0 30px;}
.sub-h{font-size:1.35rem; margin:0 0 14px; display:flex; flex-wrap:wrap; align-items:center; gap:10px;}
.tag-tt{font-family:var(--mono); font-size:.66rem; font-weight:600; letter-spacing:.05em; background:var(--yellow); color:var(--ink); padding:3px 7px;}
.stages{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
.stages.full{margin-bottom:38px;}
.srow{display:grid; grid-template-columns:54px 1fr; gap:16px; padding:16px 18px; background:var(--sheet); border:1px solid var(--line); border-left:4px solid var(--ink);}
.srow h3{margin:0 0 2px;}
.when{display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--soft); margin:0 0 4px;}
.cat-l{display:inline-flex; align-items:center; gap:6px;}
.org{font-family:var(--mono); font-size:.8rem; color:var(--soft); margin:0;}
.srow p:last-child{margin-bottom:0;}
.stages.full .org{margin-bottom:8px;}
.shelf{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:30px 0 28px;}
.shelf-item{display:block; text-decoration:none; transition:transform .2s;}
.shelf-item:hover{transform:translateY(-3px);}
.shelf-item .cover{width:100%; border:1px solid var(--line); box-shadow:0 16px 30px -24px rgba(29,27,23,.6); margin-bottom:14px;}
.shelf-item h3{margin-bottom:4px;}
.meta{font-family:var(--mono); font-size:.74rem; color:var(--soft); margin:0;}
.off-grid{display:grid; grid-template-columns:1fr 360px; gap:48px; align-items:center;}
.facts{margin:6px 0 30px; padding:4px 28px;}
.fact{display:grid; grid-template-columns:200px 1fr; gap:24px; padding:13px 0; border-bottom:1px dashed var(--line);}
.fact:last-child{border-bottom:0;}
.fact dt{font-family:var(--mono); font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--red); padding-top:4px;}
.fact dd{margin:0;}
.btn{display:inline-flex; align-items:center; gap:10px; background:var(--ink); color:var(--sheet); border:2px solid var(--ink); padding:12px 22px; font-family:var(--display); font-weight:700; font-size:1.12rem; text-transform:uppercase; letter-spacing:.03em; text-decoration:none; cursor:pointer; transition:background .15s,color .15s;}
.btn::before{content:""; width:16px; height:16px; border:1.5px solid currentColor; background:repeating-conic-gradient(currentColor 0 25%,transparent 0 50%) 0 0/8px 8px;}
.btn:hover{background:var(--yellow); color:var(--ink);}
.btn.ghost{background:transparent; color:var(--ink);}
.btn.ghost::before{display:none;}
.btn.ghost:hover{background:var(--yellow);}

/* --- paginas --- */
.page-hero{padding-bottom:34px;}
.page-hero h1{font-size:clamp(2.5rem,6vw,4.4rem);}
.wide-photo{margin:0 0 26px; padding:10px;}
.wide-photo img{width:100%; aspect-ratio:16/7; object-fit:cover; object-position:50% 28%;}
.book-list{display:flex; flex-direction:column; gap:22px;}
.book{display:grid; grid-template-columns:220px 1fr; gap:34px; align-items:start; padding:28px; border-top:4px solid var(--ink); scroll-margin-top:24px;}
.book .cover{width:100%; border:1px solid var(--line);}
.book-sub{color:var(--soft); font-style:italic;}
.mini{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:0 0 18px; max-width:420px; border-top:2px solid var(--ink); border-bottom:1px dashed var(--line);}
.mini div{padding:6px 10px 6px 0;}
.mini dt{font-family:var(--mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.05em; color:var(--soft);}
.mini dd{margin:0; font-family:var(--display); font-weight:700; font-size:1.15rem; text-transform:uppercase;}
.parts{margin:0; padding-left:22px; color:var(--soft);}
.career-grid{display:grid; grid-template-columns:1fr 340px; gap:48px; align-items:start;}
.contact-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:28px; align-items:start;}
.form{padding:28px; border-top:4px solid var(--ink);}
.form label{display:block; font-family:var(--display); font-weight:700; font-size:1.05rem; text-transform:uppercase; letter-spacing:.02em; margin:14px 0 6px;}
.form input[type=text],.form input[type=email],.form textarea{width:100%; font:inherit; font-size:1rem; padding:11px 14px; border:1.5px solid #8C8578; border-radius:0; background:#fff; color:var(--ink);}
.form input:focus,.form textarea:focus{border-color:var(--ink);}
.consent{display:flex; gap:10px; align-items:flex-start; margin:18px 0 20px;}
.consent input{margin-top:6px; accent-color:var(--ink);}
.consent label{margin:0; font-family:var(--body); font-weight:400; font-size:.95rem; text-transform:none; letter-spacing:0; color:var(--soft);}
.form a,.legal a,.c-card a,.nf .lede a{color:var(--red); text-underline-offset:3px;}
.contact-cards{display:flex; flex-direction:column; gap:16px;}
.c-card{padding:20px 22px;}
.c-card p:last-child{margin:0;}
.contact-cards .photo img{aspect-ratio:4/3;}
.legal{max-width:48rem; padding:34px; border-top:4px solid var(--ink);}
.legal h2{font-size:1.45rem; margin:28px 0 8px;}
.legal p{color:var(--soft);}
.cut{display:inline-flex; flex-direction:column; align-items:flex-start; padding:12px 22px 14px; margin-bottom:22px; border:3px solid var(--ink); transform:rotate(-2deg);}
.cut-k{font-family:var(--display); font-weight:800; font-size:3.6rem; line-height:1;}
.cut-t{font-family:var(--mono); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; background:var(--yellow); color:var(--ink); padding:2px 8px; margin-top:4px;}
.nf .lede{margin-top:10px;}

/* --- pie: linea de meta --- */
.foot{position:relative; background:var(--ink); color:var(--foot-txt); padding:44px 0 40px;}
.foot::before{content:""; position:absolute; left:0; right:0; top:0; height:16px; background:repeating-conic-gradient(var(--ink) 0 25%,var(--sheet) 0 50%) 0 0/16px 16px;}
.foot-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px 28px; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid rgba(237,230,214,.2);}
.foot-c{display:flex; align-items:center; gap:10px; margin:0; font-family:var(--mono); font-size:.78rem; color:var(--foot-soft);}
.flag{width:16px; height:16px; border:1.5px solid var(--foot-txt); background:repeating-conic-gradient(var(--foot-txt) 0 25%,transparent 0 50%) 0 0/8px 8px;}
.foot-links{display:flex; flex-wrap:wrap; gap:8px 22px; margin:0;}
.foot-links a{text-decoration:none; font-family:var(--display); font-weight:700; font-size:1.05rem; text-transform:uppercase; letter-spacing:.03em; color:var(--foot-txt);}
.foot-links a:hover{text-decoration:underline; text-underline-offset:4px;}
.fine{font-size:.86rem; color:var(--foot-soft); margin:6px 0 0;}
.foot a:focus-visible,.foot button:focus-visible{outline-color:var(--yellow);}
.foot .kc-foot{max-width:1140px; margin:14px auto 0; padding:0 24px; font-size:.86rem; color:var(--foot-soft);}

@media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition:none!important;} html{scroll-behavior:auto;} .bib.on{transform:none;} .cut{transform:none;} }

/* --- responsive --- */
@media (max-width:980px){
  .hero-grid,.off-grid,.career-grid,.contact-grid{grid-template-columns:1fr;}
  .hero .photo,.off-grid .photo,.side{max-width:440px;}
  .shelf{grid-template-columns:repeat(2,1fr);}
  .duo,.two{grid-template-columns:1fr;}
  .hito a{min-width:0; padding:6px 10px;}
  .hito b{font-size:1.25rem;}
}
@media (max-width:760px){
  .route{padding-top:0;}
  .prof{height:96px;}
  .elev{display:none;}
  .hitos{position:static; height:auto; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin:0 0 14px;}
  .hito{position:static;}
  .hito::after{display:none;}
  .hito a{position:static; transform:none!important; width:auto; height:auto; padding:6px 7px 7px; border-top-width:3px;}
  .hito b{font-size:1.02rem;}
  .km{font-size:.6rem; gap:4px; flex-wrap:wrap;}
  .lab{display:none;}
  .jersey{display:none;}
  .cps{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .wrap{padding:0 16px;}
  .plate-no{width:38px; height:38px; font-size:1.4rem;}
  .plate-txt b{font-size:1.25rem;}
  .plate-txt small{font-size:.62rem;}
  .bibs{gap:8px;}
  .bib{width:52px; height:46px; font-size:1.2rem;}
  .bib small{font-size:.5rem;}
  .hero{padding:30px 0 44px;}
  .intro{padding:22px 18px;}
  .sf{grid-template-columns:1fr 1fr;}
  .sf div{border-right:0; padding-left:0!important; border-bottom:1px dashed var(--line);}
  .sec{padding:52px 0;}
  .slot{padding:16px 14px;}
  .chart-box{height:150px;}
  .shelf{grid-template-columns:1fr; max-width:320px;}
  .book{grid-template-columns:1fr; padding:20px;}
  .book .cover{max-width:200px;}
  .fact{grid-template-columns:1fr; gap:2px;}
  .facts{padding:4px 18px;}
  .form{padding:22px 18px;}
  .srow{grid-template-columns:46px 1fr; gap:12px; padding:14px;}
  .srow .sp{width:46px; height:46px; font-size:1.35rem;}
  .wide-photo img{aspect-ratio:4/3;}
  .foot .kc-foot{padding:0 16px;}
}
@media (max-width:480px){
  .hitos{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hito b{font-size:1.1rem;}
}
@media (max-width:400px){
  .plate-txt small{display:none;}
}