/* Componentes de gobianas: cabecera, héroe, tarjetas, formulario y las piezas
   de las páginas de competencia. Los tokens viven en tokens.css. */
html{scroll-padding-top:calc(124px + env(safe-area-inset-top,0px));scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font);font-size:16px;line-height:26px;-webkit-font-smoothing:antialiased}
a{color:var(--brand-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:focus-visible,button:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-sm)}
.wrap{max-width:1040px;margin:0 auto;padding:0 var(--s16)}
@media (max-width:720px){.wrap{padding:0 var(--s6)}}

/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--surface);border-bottom:1px solid var(--line)}
.bar-wrap{position:relative;overflow:hidden}
.bar{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;
  height:76px;gap:var(--s4)}

/* Tres anillos concéntricos saliéndose por la derecha, como en el héroe y en el
   currículum: el mismo gesto de la marca, aquí en voz muy baja. */
.bar-wrap__filigrana{position:absolute;inset:0;pointer-events:none}
.bar-wrap__filigrana i{position:absolute;right:-60px;top:50%;translate:0 -50%;
  border-radius:50%;border:2px solid var(--brand);opacity:.22}
.bar-wrap__filigrana i:nth-child(1){width:150px;height:150px}
.bar-wrap__filigrana i:nth-child(2){width:240px;height:240px;opacity:.13}
.bar-wrap__filigrana i:nth-child(3){width:340px;height:340px;opacity:.08}

/* Segunda fila: el recorrido de la portada, repartido a todo lo ancho, con
   «Contacto» al final. */
.navbar{border-top:1px solid var(--line)}
.navbar nav{display:flex;align-items:center;gap:var(--s6);height:46px}
.menu{display:flex;flex:1;min-width:0}
.menu__panel{display:flex;flex:1;align-items:center;justify-content:space-between;gap:var(--s4);
  padding-right:var(--s6);min-width:0}
.menu__btn{display:none}

/* En pantalla estrecha los seis apartados se recogen en un desplegable y
   «Contacto» se queda fuera, siempre visible. La clase la pone nav.js: sin
   JavaScript no hay botón que pulsar, así que la fila se queda desplazable. */
@media (max-width:820px){
  .js-menu .menu{position:relative;flex:0 0 auto}
  .js-menu .menu__btn{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;
    font:600 13px/18px var(--font);letter-spacing:.01em;color:var(--ink);cursor:pointer;
    background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r-full)}
  .js-menu .menu__btn svg{transition:rotate .15s ease}
  .js-menu .menu__btn[aria-expanded="true"] svg{rotate:180deg}
  .js-menu .menu__panel{display:none;position:absolute;top:calc(100% + 8px);left:0;z-index:20;
    min-width:220px;flex-direction:column;gap:0;padding:var(--s2);
    background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r-md);
    box-shadow:0 8px 24px rgba(31,29,27,.14)}
  .js-menu .menu__panel.abierto{display:flex}
  .js-menu .menu__panel a.n{padding:9px 12px;border-radius:var(--r-sm)}
  .js-menu .menu__panel a.n:hover{background:var(--brand-soft)}
  .js-menu .menu__panel a.n::after{display:none}
  /* Sin JavaScript: la fila entera, desplazable con el dedo. */
  .navbar nav{gap:var(--s4)}
  .menu__panel{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-right:0}
  .menu__panel::-webkit-scrollbar{display:none}
}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo svg{display:block;height:30px;width:auto}
.logo .word{font-weight:700;font-size:25px;letter-spacing:-.02em;line-height:1}
.logo .word i{font-style:normal;position:relative}
nav{display:flex;gap:var(--s4);align-items:center}
.n{font-size:13px;line-height:18px;font-weight:600;letter-spacing:.01em;color:var(--ink);
  text-decoration:none;white-space:nowrap}
.n:hover{color:var(--brand-text)}
/* La sección por la que va el scroll se subraya en el color de marca. El borde
   transparente está siempre puesto para que al marcarse no se mueva nada. */
.n{transition:color .15s ease}
.n.on{color:var(--brand-text)}
.langs{display:flex;border:1px solid var(--line);border-radius:var(--r-full);padding:2px;
  background:var(--surface);position:relative;z-index:1}
.langs button{font:600 13px/18px var(--font);letter-spacing:.01em;background:none;border:0;color:var(--ink-muted);padding:4px 10px;border-radius:var(--r-full);cursor:pointer}
.langs button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
/* El subrayado cuelga del propio rótulo, siete píxeles por debajo de su línea
   base. Antes se medía desde el fondo del enlace, y como el enlace no llega a
   lo alto de la fila, el trazo acababa cruzando el texto. */
.navbar nav a.n{position:relative;top:-1px}  /* la mancha de letra queda algo
   baja dentro de la línea: un píxel arriba y centra a ojo */
.navbar nav a.n::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;
  border-radius:1px;background:transparent;transition:background .15s ease}
.navbar nav a.n.on::after{background:var(--brand)}

/* hero */
.hero-wrap{position:relative;background:#D97757;color:#1F1D1B;overflow:hidden;isolation:isolate}
.hero-wrap .hero{position:relative;z-index:1}
.hero-wrap .hero p.name{color:#fff}
.hero-wrap h1{color:#fff}
.hero-wrap .hero p.lead,.hero-wrap .hero p.lead span{color:#fff;font-size:20px;line-height:30px;font-weight:600}
.hero-wrap .btn.primary{background:#fff;color:#1F1D1B;border-color:#fff}
.hero-wrap .btn.secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.hero-wrap .btn:focus-visible{box-shadow:0 0 0 2px #D97757,0 0 0 4px #fff}
.waves{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.waves .layer{position:absolute;inset:-15% -5%;will-change:transform;transition:transform .12s linear}
.waves svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.waves .glow{position:absolute;right:-10%;top:-30%;width:60%;padding-top:60%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 60%)}
.waves path,.waves circle.o{fill:none;stroke:#fff;stroke-linecap:round;vector-effect:non-scaling-stroke}
.waves .dot{fill:#fff}
.waves .spin{transform-box:fill-box;transform-origin:center;animation:spin 90s linear infinite}
.waves .spin.r{animation-direction:reverse;animation-duration:140s}
.waves .breathe{transform-box:fill-box;transform-origin:center;animation:breathe 9s ease-in-out infinite alternate}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.15)}}
@media (prefers-reduced-motion: reduce){.waves .spin,.waves .breathe{animation:none}}
.hero{padding:var(--s24) 0 var(--s16)}
.hero .name{font-size:13px;line-height:18px;font-weight:600;letter-spacing:.01em;color:var(--ink-muted);margin:0 0 var(--s6)}
.hero h1{font-size:64px;line-height:64px;font-weight:700;letter-spacing:-.03em;margin:0;max-width:760px;text-wrap:balance}
.hero p.lead{font-size:18px;line-height:28px;font-weight:500;color:var(--ink);max-width:640px;margin:var(--s8) 0 0}
.hero p.lead span{color:var(--ink-muted);font-weight:400}
.hero .cta{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s8)}
.btn{display:inline-block;font:600 13px/18px var(--font);letter-spacing:.01em;padding:var(--s3) var(--s6);border-radius:var(--r-md);border:1px solid transparent;text-decoration:none;cursor:pointer}
.btn.primary{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.btn.secondary{background:var(--surface-raised);color:var(--ink);border-color:var(--line)}
@media (max-width:720px){.hero{padding:var(--s16) 0 var(--s12)}.hero h1{font-size:40px;line-height:44px;letter-spacing:-.02em}}

/* sections */
section{padding:var(--s24) 0;border-top:1px solid var(--line)}
@media (max-width:720px){section{padding:var(--s16) 0}}
.sec-grid{display:grid;grid-template-columns:160px 1fr;gap:var(--s12)}
@media (max-width:720px){.sec-grid{grid-template-columns:1fr;gap:var(--s6)}}
h2{font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.01em;margin:0;position:sticky;top:calc(96px + env(safe-area-inset-top,0px));align-self:start}
@media (max-width:720px){h2{position:static}}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.pillar{padding:0 var(--s6) 0 0;border-left:1px solid var(--line);padding-left:var(--s6)}
.pillar:first-child{border-left:0;padding-left:0}
.pillar h3{font-size:18px;line-height:28px;font-weight:600;margin:0 0 var(--s3);display:flex;align-items:center;gap:var(--s3)}
.pillar h3::before{content:"";width:9px;height:9px;border-radius:var(--r-full);background:var(--brand);flex:none}
.pillar p{margin:0;color:var(--ink-muted)}
@media (max-width:720px){.pillars{grid-template-columns:1fr;gap:var(--s6)}.pillar{border-left:0;padding-left:0;padding-top:var(--s6);border-top:1px solid var(--line)}.pillar:first-child{border-top:0;padding-top:0}}

/* numbers */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6);margin-top:var(--s12);padding-top:var(--s8);border-top:1px solid var(--line)}
.num b{display:block;font-size:40px;line-height:44px;font-weight:700;letter-spacing:-.02em;color:var(--brand-text)}
.num span{font-size:14px;line-height:22px;color:var(--ink-muted)}
@media (max-width:720px){.nums{grid-template-columns:1fr 1fr}}

/* experience */
.xp-list{display:flex;flex-direction:column;gap:var(--s8)}
.xp{display:grid;grid-template-columns:160px 1fr;gap:var(--s6);position:relative;padding-left:var(--s6)}
.xp::before{content:"";position:absolute;left:4px;top:10px;bottom:calc(-1 * var(--s8));width:1px;background:var(--line)}
.xp:last-child::before{bottom:0}
.xp::after{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:var(--r-full);background:var(--brand)}
.xp .meta{font-size:14px;line-height:22px;color:var(--ink-muted)}
.xp .meta b{display:block;font-weight:600;color:var(--ink)}
.xp .meta a.org,.edu a.org{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.xp .meta a.org:hover,.edu a.org:hover{border-color:var(--brand-text);color:var(--brand-text)}
/* Todos los logotipos ocupan la misma caja y se encajan dentro sin deformarse:
   así un escudo cuadrado y un logotipo alargado pesan lo mismo en la página.
   Cuando el fichero no existe, la caja se encoge al cuadrado de la inicial. */
.olg{display:flex;align-items:center;width:104px;height:32px;margin-bottom:var(--s2)}
.olg img{width:100%;height:100%;object-fit:contain;object-position:left center;display:block}
.olg.fb{width:32px;justify-content:center;border-radius:var(--r-sm);background:var(--brand-soft);color:var(--brand-text);font-weight:700;font-size:13px}
.edu .olg{margin-bottom:var(--s1)}
.xp h3{margin:0 0 var(--s2);font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.01em}
.xp p.ctx{margin:0 0 var(--s3);color:var(--ink-muted)}
.xp ul{margin:0;padding-left:18px}
.xp li+li{margin-top:var(--s1)}
@media (max-width:720px){.xp{grid-template-columns:1fr;gap:var(--s2)}.xp h3{font-size:20px;line-height:28px}}

.tools{margin:0;font-size:18px;line-height:28px;font-weight:500;max-width:720px}
.tools-p{margin:var(--s4) 0 0;color:var(--ink-muted);max-width:640px}
.apps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s8)}
.app{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-raised);text-decoration:none;color:var(--ink)}
.app:hover{border-color:var(--ink-muted)}
.app .lg{height:40px;min-width:40px;max-width:88px;flex:none;display:flex;align-items:center}
.app .lg img{max-height:40px;max-width:88px;display:block}
.app .lg.fb{width:40px;justify-content:center;border-radius:var(--r-sm);background:var(--brand-soft);color:var(--brand-text);font-weight:700;font-size:15px}
.app b{display:block;font-size:14px;line-height:20px;font-weight:600}
.app span{display:block;font-size:13px;line-height:18px;color:var(--ink-muted)}
@media (max-width:960px){.apps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.apps{grid-template-columns:1fr}}
/* education */
.edu{display:flex;flex-direction:column;gap:var(--s6)}
.edu div{padding-bottom:var(--s6);border-bottom:1px solid var(--line)}
.edu div:last-child{border-bottom:0;padding-bottom:0}
.edu h3{margin:0 0 var(--s1);font-size:18px;line-height:28px;font-weight:600}
.edu p{margin:0;color:var(--ink-muted)}
.tags{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s6)}
.tag{font:600 13px/18px var(--font);letter-spacing:.01em;color:var(--brand-text);background:var(--brand-soft);padding:var(--s2) var(--s3);border-radius:var(--r-full)}

/* contact */
#contacto{background:var(--brand-soft);border-top:0}
#contacto .contact h2{color:var(--ink)}
#contacto .contact p{color:var(--ink)}
#contacto .btn.secondary{background:var(--surface-raised)}
#contacto .links a{color:var(--brand-text)}
.contact{text-align:center}
.contact h2{position:static;font-size:40px;line-height:44px;font-weight:700;letter-spacing:-.02em;margin:0 0 var(--s4)}
.contact p{max-width:520px;margin:0 auto;color:var(--ink-muted)}
.contact .cta{display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap;margin-top:var(--s8)}
.contact .links{margin-top:var(--s8);display:flex;gap:var(--s6);justify-content:center;flex-wrap:wrap;font-size:14px;line-height:22px}
footer{border-top:1px solid var(--line);padding:var(--s6) 0 var(--s4);background:transparent;font-size:14px;line-height:22px;color:var(--ink-muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s3)}
/* El crédito, en su línea y en voz baja: no compite con lo de ella. */
.foot-credito{margin:0;text-align:center;font-size:13px;line-height:20px;
  color:var(--ink-muted);opacity:.65}
.foot-credito a{color:inherit;text-decoration-thickness:1px}
.foot-wrap{position:relative;background:var(--brand-soft)}
.foot-wrap--cierre{background:transparent}

/* El cierre: contacto y pie bajo el mismo color, con los anillos de fondo. Al
   ocupar los dos, la banda mide de sobra y los anillos suben enteros. */
.cierre{position:relative;overflow:hidden;background:var(--brand-soft)}
.cierre>*{position:relative;z-index:1}
.cierre #contacto{background:transparent}
.cierre__filigrana{position:absolute;inset:0;z-index:0;pointer-events:none}
.cierre__filigrana i{position:absolute;left:-150px;bottom:-140px;
  border-radius:50%;border:2px solid var(--brand);opacity:.28}
.cierre__filigrana i:nth-child(1){width:360px;height:360px}
.cierre__filigrana i:nth-child(2){width:520px;height:520px;opacity:.18}
.cierre__filigrana i:nth-child(3){width:680px;height:680px;opacity:.11}
.foot-wrap .wrap{position:relative;z-index:1}
.foot-wrap .wrap{position:relative;z-index:1}
/* Los mismos anillos de la cabecera, aquí por la izquierda. La franja se hace
   alta a propósito: es lo que les permite subir enteros en vez de quedar
   cortados por el borde de arriba, que era lo que parecía un error. Por la
   izquierda sí se salen, y eso se lee como que siguen. */
.foot-wrap__filigrana{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.foot-wrap__filigrana i{position:absolute;left:-40px;bottom:-10px;
  border-radius:50%;border:2px solid var(--brand);opacity:.30}
.foot-wrap__filigrana i:nth-child(1){width:140px;height:140px}
.foot-wrap__filigrana i:nth-child(2){width:200px;height:200px;opacity:.20}
.foot-wrap__filigrana i:nth-child(3){width:260px;height:260px;opacity:.12}
/* El imagotipo solo, sin el nombre: a estas alturas ya se sabe de quién es la
   web. Cierra la portada encima del «Contacto». */
.contact__marca{margin:0 0 var(--s4);display:flex;justify-content:center}
/* El dibujo ocupa el tercio central de su caja, así que el SVG mide el triple
   de lo que se ve: 60px dan una marca de unos 19, que es la que iba bien. */
.contact__marca svg{display:block;height:60px;width:auto}
@media (max-width:720px){.contact__marca svg{height:48px}}
.foot-wrap footer{border-top:1px solid rgba(169,80,47,.18)}
.langs a{font:600 13px/18px var(--font);letter-spacing:.01em;color:var(--ink-muted);padding:4px 10px;border-radius:var(--r-full);text-decoration:none}.langs a[aria-current="page"]{background:var(--ink);color:var(--surface)}
.crumbs{font-size:14px;line-height:22px;color:var(--ink-muted);margin:0 0 var(--s6)}.crumbs a{color:var(--ink-muted);text-decoration:none}.crumbs a:hover{color:var(--brand-text)}
.article{padding:var(--s16) 0 var(--s24)}.article .lead{font-size:18px;line-height:28px;font-weight:500;max-width:720px;margin:var(--s8) 0 0}
.article h1{font-size:40px;line-height:44px;font-weight:700;letter-spacing:-.02em;margin:0;max-width:760px;text-wrap:balance}
.article h2{position:static;font-size:24px;line-height:32px;margin:var(--s12) 0 var(--s4)}
.article p,.article li{max-width:720px}.article ul.ex{padding-left:20px;margin:0}.article ul.ex li+li{margin-top:var(--s3)}.article ul.ex li::marker{color:var(--brand)}
.article .tags{margin-top:var(--s2)}.article .tags a{text-decoration:none}
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);max-width:720px}.rel a{display:block;padding:var(--s4);border:1px solid var(--line);border-radius:var(--r-md);text-decoration:none;color:var(--ink);font-weight:600;font-size:15px;line-height:22px;background:var(--surface-raised)}.rel a:hover{border-color:var(--ink-muted)}
.faq details{border-top:1px solid var(--line);padding:var(--s3) 0;max-width:720px}.faq details:last-child{border-bottom:1px solid var(--line)}.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:var(--s4)}.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";color:var(--brand-text);font-weight:700}.faq details[open] summary::after{content:"–"}.faq p{margin:var(--s2) 0 0;color:var(--ink-muted)}
.cta-box{margin-top:var(--s16);padding:var(--s8);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-raised);max-width:720px}.cta-box h2{margin:0 0 var(--s2)}.cta-box p{margin:0 0 var(--s6);color:var(--ink-muted)}
.meta-line{font-size:14px;line-height:22px;color:var(--ink-muted);margin-top:var(--s12);max-width:720px}
.skill-list{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-top:var(--s8)}.skill-list a{display:block;padding:var(--s6);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-raised);text-decoration:none;color:var(--ink)}.skill-list a:hover{border-color:var(--ink-muted)}.skill-list b{display:block;font-size:18px;line-height:28px;font-weight:600;margin-bottom:var(--s1)}.skill-list span{color:var(--ink-muted);font-size:15px;line-height:24px}
.xp .meta b a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}.tags a.tag{text-decoration:none}.all-link{display:inline-block;margin-top:var(--s4);font-size:14px}
@media (max-width:720px){.article h1{font-size:32px;line-height:38px}.rel,.skill-list{grid-template-columns:1fr}}

/* formulario de contacto
   No existía en la web en HTML —el contacto era un mailto—, así que estas
   reglas son nuevas; los valores salen todos de los tokens, sin inventar
   ninguna medida ni ningún color. */
.form-box{margin-top:var(--s12);padding:var(--s8);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-raised);max-width:720px}
.form-box h2{position:static;font-size:24px;line-height:32px;margin:0 0 var(--s2)}
.form-box>p{margin:0 0 var(--s6);color:var(--ink-muted)}
.form-grid{display:grid;gap:var(--s4)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
@media (max-width:720px){.form-row{grid-template-columns:1fr}}
.field{margin:0;display:grid;gap:var(--s1)}
.field label{font-size:14px;line-height:22px;font-weight:600;color:var(--ink)}
.field input,.field textarea{width:100%;font:400 16px/26px var(--font);color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px var(--s3)}
.field textarea{resize:vertical;min-height:120px}
.field input:focus-visible,.field textarea:focus-visible{outline:none;border-color:var(--brand);box-shadow:var(--focus)}
.check{margin:0;font-size:14px;line-height:22px;color:var(--ink-muted)}
.check label{display:flex;gap:var(--s2);align-items:flex-start;cursor:pointer}
.check input{margin-top:4px;accent-color:var(--brand)}
/* La trampa de miel se esconde sin display:none, que algunos robots detectan. */
.trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.form-status{padding:var(--s3) var(--s4);border-radius:var(--r-sm);border:1px solid var(--line);margin:0 0 var(--s4)}
.form-status p{margin:0}
.form-status p+p{margin-top:var(--s1)}
.form-status--ok{border-color:var(--brand);background:var(--brand-soft);color:var(--ink)}
.form-status--error{border-color:var(--brand-text);color:var(--brand-text)}
.form-status--warn{border-style:dashed;color:var(--ink-muted)}

/* currículum
   La misma información de la portada, ordenada como un CV. Las reglas de
   impresión de más abajo son las que hacen que «Guardar como PDF» del
   navegador dé un documento limpio sin generar el PDF por nuestra cuenta. */
.cv h2{position:static;font-size:15px;line-height:22px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brand-text);margin:var(--s12) 0 var(--s4);
  padding-bottom:var(--s2);border-bottom:1px solid var(--line);max-width:720px}
.cv__head h1{margin-bottom:var(--s2)}
.cv__head .lead{margin:0 0 var(--s4)}
.cv__contact{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);
  font-size:15px;line-height:24px;color:var(--ink-muted);max-width:720px}
.cv__print{margin-top:var(--s6);display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.cv__hint{font-size:14px;line-height:22px;color:var(--ink-muted)}
.cv__item{margin-bottom:var(--s6);max-width:720px;break-inside:avoid}
.cv__item h3{font-size:17px;line-height:26px;font-weight:600;margin:0}
.cv__meta{font-size:15px;line-height:24px;color:var(--ink-muted);margin:0 0 var(--s1)}
.cv__ctx{font-size:15px;line-height:24px;color:var(--ink-muted);margin:0 0 var(--s2)}
.cv__item ul{padding-left:20px;margin:0}
.cv__item li+li{margin-top:var(--s1)}
.cv__item li::marker{color:var(--brand)}
.cv__cols{columns:2;column-gap:var(--s8);list-style:none;padding:0;margin:0;max-width:720px}
.cv__cols li{margin-bottom:var(--s1);break-inside:avoid}
@media (max-width:720px){.cv__cols{columns:1}}

@media print{
  /* Fuera todo lo que no es el documento. */
  header,.foot-wrap,.crumbs,.no-print,.waves{display:none!important}
  :root{--surface:#fff;--surface-raised:#fff}
  body{font-size:11pt;line-height:1.45}
  .wrap{max-width:none;padding:0}
  .cv h2{margin-top:18pt;color:#000;border-color:#999}
  .cv__head h1{font-size:22pt;line-height:1.1}
  .cv__head .lead{font-size:12pt}
  .cv__item,.cv__cols li{break-inside:avoid}
  a{color:inherit;text-decoration:none}
  /* Las direcciones sí se imprimen: un CV en papel tiene que poder copiarse. */
  .cv__contact a::after{content:""}
  @page{margin:16mm}
}

/* textos legales y aviso de cookies
   La prosa legal se lee de arriba abajo: una sola columna estrecha, titulares
   discretos y tablas que se pueden desplazar a lo ancho en el móvil. */
.prosa h2{position:static;font-size:19px;line-height:28px;margin:var(--s12) 0 var(--s3)}
.prosa h3{font-size:16px;line-height:24px;margin:var(--s6) 0 var(--s2)}
.prosa p,.prosa li{max-width:680px}
.prosa ul{padding-left:20px;margin:0 0 var(--s4)}
.prosa li+li{margin-top:var(--s2)}
.prosa li::marker{color:var(--brand)}
.prosa code{font-size:14px;background:var(--brand-soft);color:var(--brand-text);padding:1px 5px;border-radius:var(--r-sm)}
.tabla-scroll{overflow-x:auto;margin:0 0 var(--s6);max-width:680px}
.tabla-scroll table{width:100%;border-collapse:collapse;font-size:14px;line-height:22px}
.tabla-scroll th,.tabla-scroll td{text-align:left;padding:var(--s2) var(--s4) var(--s2) 0;
  border-bottom:1px solid var(--line);vertical-align:top}
.tabla-scroll thead th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.tabla-scroll tbody th{white-space:nowrap;color:var(--ink-muted);font-weight:600}
.foot-legal{display:flex;gap:var(--s4);flex-wrap:wrap}
.foot-legal a{color:var(--ink-muted)}

/* El aviso se queda abajo, sin tapar la página entera: una decisión de cookies
   no es una pantalla de bienvenida. */
.consent{position:fixed;left:var(--s4);right:var(--s4);bottom:var(--s4);z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s6);flex-wrap:wrap;
  max-width:880px;margin:0 auto;padding:var(--s4) var(--s6);
  background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:0 6px 24px rgba(31,29,27,.12)}
.consent[hidden]{display:none}
.consent h2{font-size:15px;line-height:22px;margin:0 0 var(--s1)}
.consent p{font-size:14px;line-height:21px;color:var(--ink-muted);margin:0;max-width:56ch}
.consent__acciones{display:flex;gap:var(--s2);flex-wrap:wrap}
.consent .btn{padding:8px 16px;font-size:14px}
@media (max-width:640px){.consent{left:var(--s3);right:var(--s3);bottom:var(--s3);padding:var(--s4)}}

/* índice de competencias
   Cada competencia con su icono, dibujado con la retícula de la marca y teñido
   con el color corporativo; el fondo pálido es el mismo de las etiquetas. */
.skill-list a{position:relative}
.skill-list__icon{display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  margin-bottom:var(--s3);border-radius:var(--r-md);background:var(--brand-soft);color:var(--brand-text)}
.skill-list__icon svg{width:22px;height:22px}
.skill-list a:hover .skill-list__icon{background:var(--brand);color:#fff}
.skill-langs__h{font-size:19px;line-height:28px;margin:var(--s12) 0 var(--s4)}

/* detalle de competencia
   La misma información de siempre, enseñada con más aire y con las piezas que
   ya tiene la marca: el icono de la competencia, las fichas de cada ejemplo y
   los logotipos de las herramientas. */
.skill-hero{position:relative;overflow:hidden;display:flex;gap:var(--s6);align-items:flex-start;
  margin:var(--s8) 0 var(--s12);padding:var(--s8);border-radius:var(--r-md);background:var(--brand-soft)}
.skill-hero>div{position:relative;z-index:1;min-width:0}
.skill-hero h1{margin:0}
.skill-hero .lead{margin:var(--s4) 0 0}
.skill-hero__icon{position:relative;z-index:1;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:var(--r-md);background:var(--surface-raised);color:var(--brand-text)}
.skill-hero__icon svg{width:34px;height:34px;stroke-width:1.4}
/* El eco de los círculos del héroe de la portada, en pequeño y sin moverse. */
.skill-hero__ring{position:absolute;right:-70px;top:-90px;width:230px;height:230px;border-radius:50%;
  border:14px solid var(--brand);opacity:.10;pointer-events:none}
@media (max-width:720px){
  .skill-hero{flex-direction:column;gap:var(--s4);padding:var(--s6)}
  .skill-hero__icon{width:52px;height:52px}
  .skill-hero__ring{right:-90px;top:-110px}
}

.skill-h2{display:flex;align-items:center;gap:var(--s3)}
.skill-h2__i{display:flex;align-items:center;justify-content:center;width:30px;height:30px;flex:0 0 auto;
  border-radius:var(--r-sm);background:var(--brand-soft);color:var(--brand-text)}
.skill-h2__i svg{width:18px;height:18px}

.casos{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);max-width:720px}
@media (max-width:720px){.casos{grid-template-columns:1fr}}
.caso{padding:var(--s6);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-raised)}
.caso__top{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;margin:0 0 var(--s2)}
.caso__top b{font-size:15px;line-height:22px;font-weight:700}
.caso__top span{font-size:13px;line-height:20px;color:var(--brand-text);font-weight:600;
  background:var(--brand-soft);padding:1px 8px;border-radius:var(--r-full);white-space:nowrap}
.caso__txt{margin:0;font-size:15px;line-height:24px;color:var(--ink-muted)}
/* El texto venía detrás de dos puntos y empieza en minúscula; suelto en su
   ficha, se lee mejor con la primera letra en alta. */
.caso__txt::first-letter{text-transform:uppercase}

.tools-grid{display:flex;flex-wrap:wrap;gap:var(--s2);max-width:720px}
.tool{display:flex;align-items:center;gap:var(--s2);padding:6px 12px 6px 8px;text-decoration:none;
  border:1px solid var(--line);border-radius:var(--r-full);background:var(--surface-raised);
  color:var(--ink);font-size:14px;line-height:22px;font-weight:600}
.tool:hover{border-color:var(--brand)}
.tool__lg{display:flex;align-items:center;justify-content:center;width:22px;height:22px;flex:0 0 auto}
.tool__lg img{max-width:100%;max-height:100%;object-fit:contain}

.rel a{display:flex;align-items:center;gap:var(--s3)}
.rel__i{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex:0 0 auto;
  border-radius:var(--r-sm);background:var(--brand-soft);color:var(--brand-text)}
.rel__i svg{width:19px;height:19px}
.rel a:hover .rel__i{background:var(--brand);color:#fff}

/* conóceme un poco más
   Nueve aficiones en fichas pequeñas: el dibujo manda, porque el rótulo de
   cada una es casi siempre una sola palabra. */
.prose-lead{font-size:18px;line-height:28px;font-weight:500;max-width:680px;margin:0 0 var(--s8)}
.gustos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);max-width:680px}
@media (max-width:720px){.gustos{grid-template-columns:repeat(2,1fr)}}
.gusto{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-raised);
  font-size:15px;line-height:22px;font-weight:600}
.gusto__i{display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 auto;
  border-radius:var(--r-sm);background:var(--brand-soft);color:var(--brand-text)}
.gusto__i svg{width:20px;height:20px}
.gustos__cierre{margin:var(--s8) 0 0;max-width:680px;font-size:18px;line-height:28px;
  font-weight:500;color:var(--brand-text);padding-left:var(--s4);border-left:3px solid var(--brand)}