/* ISYSNT · portafolio de Isabel Fuertes · dirección de arte «El corte» (aprobada el 17-10-2026)
   Las piezas propias: el corte (las dos líneas rojas del logo), la esquina cortada a 45°, la cápsula y el filo. */

/* ===== Fuente: Archivo variable (ancho 62–125 %, grosor 100–900) ===== */
@font-face{font-family:"Archivo";src:url(../fonts/archivo-latin.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";src:url(../fonts/archivo-latin-ext.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ===== Tokens ===== */
:root{
  --niebla:#E8E8E8; --perla:#D6D6D6; --pizarra:#444444; --negro:#020101; --corte:#E30916;
  --bg:var(--niebla); --surface:var(--perla); --ink:var(--negro); --muted:var(--pizarra);
  --cta:var(--negro); --cta-ink:var(--niebla); --cta-hover:#262626;
  --line:rgba(2,1,1,.16);
  --font:"Archivo",Arial,system-ui,sans-serif;
  --ancho:125%;
  --h1:clamp(46px,13.4vw,212px);
  --ch:clamp(12px,2.2vw,26px);
  --chaflan:polygon(0 0,calc(100% - var(--ch)) 0,100% var(--ch),100% 100%,0 100%);
  --ease:cubic-bezier(.12,.9,.18,1); --ease-io:cubic-bezier(.8,0,.12,1);
  --dur:.8s; --dist:56px; --t-hover:.45s;
  --gutter:clamp(16px,4vw,56px); --maxw:1440px; --section-y:clamp(88px,11vw,168px);
  --barra-h:64px;
  --cinta-h:290px; --cw:42vw; --tilt:-4deg;
}
@media (max-width:699px){:root{--h1:14vw;--section-y:72px}}
@media (min-width:700px){:root{--cinta-h:clamp(250px,24vw,360px);--cw:clamp(170px,15.5vw,250px);--barra-h:80px}}

/* ===== Base ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--barra-h);overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--font);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:fixed;left:12px;top:-60px;z-index:200;padding:12px 18px;background:var(--ink);color:var(--niebla);text-decoration:none;font-weight:650}
.saltar:focus{top:12px}
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth iframe{pointer-events:none}
.marcador{background:#FFE14D;color:#000;padding:0 .3em;font-weight:700}

/* ===== Logo (sprite con piezas separadas) ===== */
.logo{overflow:visible}
.logo .lg-l{fill:currentColor}
.logo .lg-cut{fill:var(--corte)}

/* ===== Piezas de la marca ===== */
.ceja{font-size:13px;font-weight:600;font-stretch:112%;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.capsula{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 14px;border:1.5px solid currentColor;border-radius:999px;
  font:600 12px/1 var(--font);font-stretch:112%;letter-spacing:.07em;text-transform:uppercase;background:none;color:inherit;text-decoration:none;white-space:nowrap}
a.capsula,button.capsula{min-height:44px;padding:0 20px;cursor:pointer;transition:background-color var(--t-hover) var(--ease),color var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease)}
@media (hover:hover){a.capsula:hover,button.capsula:hover{background:var(--ink);color:var(--niebla);border-color:var(--ink)}}
.filo{display:block;height:4px;width:100%;background:var(--ink);clip-path:polygon(0 0,100% 50%,0 100%)}
.corte-ico{width:16px;height:15px;flex:none;fill:var(--corte);overflow:visible}

/* Botón principal */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:12px;min-height:54px;padding:0 28px 0 22px;color:var(--cta-ink);text-decoration:none;
  font:650 15px/1 var(--font);font-stretch:115%;letter-spacing:.04em;text-transform:uppercase;transition:scale .15s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--cta);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);transition:background-color var(--t-hover) var(--ease)}
.btn__corte{width:20px;height:18px;flex:none;fill:var(--corte);overflow:visible;transition:scale var(--t-hover) var(--ease)}
.btn__txt{display:block;overflow:hidden;height:1.25em;line-height:1.25em}
.btn__txt span{display:block;transition:translate var(--t-hover) var(--ease)}
.btn__txt span::after{content:attr(data-t);display:block}
@media (hover:hover){.btn:hover::before{background:var(--cta-hover)}.btn:hover .btn__txt span{translate:0 -100%}.btn:hover .btn__corte{scale:1.4}}
.btn:active{scale:.97}
.enlace{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:650;font-stretch:115%;font-size:14px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.enlace svg{transition:scale var(--t-hover) var(--ease)}
@media (hover:hover){.enlace:hover svg{scale:1.5}}

/* ===== Barra superior ===== */
.barra{position:fixed;inset:0 0 auto;z-index:50;height:var(--barra-h);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 var(--gutter);
  background:rgba(232,232,232,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:translate .5s var(--ease),background-color .3s}
.barra--oculta{translate:0 -100%}
.barra--arriba{background:rgba(232,232,232,0);-webkit-backdrop-filter:none;backdrop-filter:none}
.barra__logo{display:block;color:var(--ink)}
.barra__logo .logo{height:34px;width:auto}
@media (min-width:700px){.barra__logo .logo{height:43px}}
.barra__nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px)}
.barra__nav a:not(.capsula){display:none;min-height:44px;align-items:center;text-decoration:none;font-size:13px;font-weight:600;font-stretch:112%;letter-spacing:.09em;text-transform:uppercase;
  background:linear-gradient(var(--corte),var(--corte)) 0 100%/0 2px no-repeat;transition:background-size var(--t-hover) var(--ease)}
@media (min-width:900px){.barra__nav a:not(.capsula){display:inline-flex}}
@media (hover:hover){.barra__nav a:not(.capsula):hover{background-size:100% 2px}}
.barra__nav a[aria-current]{background-size:100% 2px}

/* ===== Entrada: el corte ===== */
.pre{display:none}
.js .pre{display:block;position:fixed;inset:0;z-index:100;cursor:pointer;animation:preFuera 0s 6s forwards}
@keyframes preFuera{to{visibility:hidden;pointer-events:none}}
.pre__base,.pre__mitad{position:absolute;inset:0;background:var(--pizarra)}
.pre__mitad{visibility:hidden}
.pre__logo{position:absolute;left:50%;top:50%;width:min(68vw,420px);height:auto;translate:-50% -50%;color:#fff}
.js .pre__logo{opacity:0}
.pre__corte{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.pre__corte line{stroke:var(--corte);stroke-linecap:butt}
.pre__saltar{position:absolute;right:var(--gutter);bottom:24px;color:rgba(255,255,255,.7);font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}

/* ===== Portada ===== */
.portada{position:relative;min-height:100svh;display:flex;flex-direction:column;gap:14px;padding:calc(var(--barra-h) + 8px) var(--gutter) clamp(22px,3vw,40px)}
.titular-caja{flex:1;display:flex;align-items:center}
.titular-wrap{position:relative;width:100%}
.titular{font-size:var(--h1);font-weight:780;font-stretch:var(--ancho);line-height:.86;letter-spacing:-.04em;text-transform:uppercase}
.renglon{display:block}
.renglon .in{display:inline-block;transform-origin:50% 100%}
.l1{margin-bottom:calc(var(--cinta-h) + 28px)}
.l2{text-align:right}
.portada__pie{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 32px}
.quien{max-width:34ch;font-size:15px;line-height:1.45;color:var(--muted)}
.quien b{color:var(--ink);font-weight:650}
.portada__acciones{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.cinta{position:absolute;left:calc(var(--gutter) * -1);right:calc(var(--gutter) * -1);top:calc(var(--h1) * .86 + 14px);height:var(--cinta-h)}
.cinta__pista{display:flex;gap:12px;height:100%;align-items:center;overflow-x:auto;padding:0 var(--gutter);scrollbar-width:none}
.cinta__item{flex:0 0 auto;width:var(--cw);aspect-ratio:3/4;margin:0;background:var(--surface);overflow:hidden}
.cinta__item a{display:block;width:100%;height:100%}
.cinta__item img,.cinta__item video{width:100%;height:100%;object-fit:cover}
.js .cinta{perspective:1250px;perspective-origin:50% 45%;overflow-x:clip}
.js .cinta__pista{display:block;position:absolute;inset:0;overflow:visible;padding:0;transform-style:preserve-3d;transform:rotateX(5deg) rotateZ(var(--tilt))}
.js .cinta__item{position:absolute;left:50%;top:50%;margin:calc(var(--cw) * -.6667) 0 0 calc(var(--cw) * -.5);backface-visibility:hidden}

/* ===== Secciones ===== */
.sec{max-width:var(--maxw);margin:0 auto;padding:var(--section-y) var(--gutter) 0}
.sec > .filo{margin-bottom:26px}
.sec__cab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 40px}
.sec__cab .ceja{flex-basis:100%;margin-bottom:-4px}
.h2{max-width:20ch;font-size:clamp(32px,6.2vw,84px);font-weight:740;font-stretch:118%;line-height:1.02;letter-spacing:-.03em}
.entrada{max-width:52ch;margin-top:18px;font-size:clamp(17px,1.5vw,19px);line-height:1.55;color:var(--muted)}
.linea{padding:.15em .12em .15em 0;margin:-.15em -.12em -.15em 0}
.nota{margin-top:22px;font-size:13px;line-height:1.5;color:var(--muted)}

/* Medios con esquina cortada */
.medio{position:relative;display:block;width:100%;background:var(--surface);overflow:hidden}
.medio img,.medio video{width:100%;height:100%;object-fit:cover}
.medio__in{display:block;width:100%;height:100%}
.r-43{aspect-ratio:4/3}.r-169{aspect-ratio:16/9}.r-1610{aspect-ratio:16/10}.r-45{aspect-ratio:4/5}.r-916{aspect-ratio:9/16}.r-11{aspect-ratio:1}.r-32{aspect-ratio:3/2}
.medio__btn{position:absolute;left:14px;bottom:14px;z-index:2;background:rgba(232,232,232,.92);color:var(--ink);border-color:var(--ink)}

/* ===== 02 · Reel ===== */
.reel{margin-top:40px}
.reel__controles{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}

/* ===== 03 · Cifras ===== */
.cifras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 28px;margin-top:40px}
@media (min-width:700px){.cifras{grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 44px}}
@media (min-width:1100px){.cifras{grid-template-columns:repeat(5,minmax(0,1fr));gap:0 48px}}
.cifra{border-top:1.5px solid var(--ink);padding-top:18px;container-type:inline-size}
.cifra__num{display:block;font-size:clamp(38px,22cqi,96px);font-weight:780;font-stretch:112%;line-height:.9;letter-spacing:-.035em;white-space:nowrap}
.cifra__txt{display:block;margin-top:14px;max-width:24ch;font-size:15px;line-height:1.45;color:var(--muted)}

/* ===== 04 · Trabajo ===== */
.obras{display:grid;gap:64px;margin-top:44px}
.obra__info{margin-top:18px}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.obra__titulo{margin-top:16px;font-size:clamp(30px,5vw,64px);font-weight:780;font-stretch:125%;line-height:.95;letter-spacing:-.035em;text-transform:uppercase}
.obra__titulo a{text-decoration:none}
.obra__texto{margin-top:12px;max-width:44ch;font-size:16px;line-height:1.5;color:var(--muted)}
.obra .enlace{margin-top:6px}
.obra .medio img,.obra .medio video{transition:scale .9s var(--ease)}
@media (hover:hover){.obra:hover .medio img,.obra:hover .medio video{scale:1.04}.obra:hover .enlace svg{scale:1.5}}
@media (min-width:900px){
  .obras{grid-template-columns:repeat(12,minmax(0,1fr));gap:0 32px}
  .obra:nth-child(1){grid-column:1 / span 7}
  .obra:nth-child(2){grid-column:9 / span 4;margin-top:15vw}
  .obra:nth-child(3){grid-column:2 / span 4;margin-top:6vw}
  .obra:nth-child(4){grid-column:7 / span 6;margin-top:11vw}
  .obra:nth-child(5){grid-column:1 / span 6;margin-top:7vw}
  .obra:nth-child(6){grid-column:8 / span 4;margin-top:14vw}
}
/* Índice del resto de proyectos */
.mas{margin-top:clamp(88px,10vw,150px)}
.mas__titulo{font-size:clamp(22px,2.6vw,32px);font-weight:720;font-stretch:118%;letter-spacing:-.02em}
.indice{margin-top:22px;border-bottom:1.5px solid var(--ink)}
.indice__fila{border-top:1.5px solid var(--ink)}
.indice__fila a{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:6px 16px;padding:18px 0;text-decoration:none}
.indice__mini{grid-row:span 2;width:56px;height:72px;align-self:center;object-fit:cover;background:var(--surface)}
.indice__nombre{font-size:clamp(24px,4.2vw,58px);font-weight:780;font-stretch:125%;line-height:1;letter-spacing:-.035em;text-transform:uppercase;transition:translate var(--t-hover) var(--ease)}
.indice__meta{grid-column:2;font-size:13px;font-weight:600;font-stretch:112%;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.indice__fila .corte-ico{grid-column:3;grid-row:1 / span 2;width:22px;height:20px;transition:scale var(--t-hover) var(--ease)}
@media (min-width:900px){
  .indice__fila a{grid-template-columns:minmax(0,1fr) 260px 90px 30px;padding:24px 0}
  .indice__mini{display:none}
  .indice__meta{grid-column:auto}
  .indice__anio{text-align:right}
  .indice__fila .corte-ico{grid-column:auto;grid-row:auto}
}
@media (max-width:899px){.indice__anio{display:none}}
@media (hover:hover) and (pointer:fine){
  .indice__fila a:hover .indice__nombre{translate:18px 0}
  .indice__fila a:hover .corte-ico{scale:1.5}
}
.flota{position:fixed;left:0;top:0;z-index:40;width:240px;aspect-ratio:3/4;pointer-events:none;opacity:0;background:var(--surface)}
.flota img{width:100%;height:100%;object-fit:cover}

/* ===== 05 · Servicios ===== */
.servicios{margin-top:44px;border-bottom:1.5px solid var(--ink)}
.servicio{display:grid;gap:14px 40px;padding:30px 0 34px;border-top:1.5px solid var(--ink)}
.servicio__num{font-size:13px;font-weight:650;font-stretch:112%;letter-spacing:.08em;color:var(--muted)}
.servicio__nombre{font-size:clamp(28px,3.7vw,54px);font-weight:780;font-stretch:125%;line-height:.95;letter-spacing:-.035em;text-transform:uppercase}
.servicio__lista{display:grid;gap:10px}
.servicio__lista li{display:flex;gap:12px;align-items:baseline;font-size:17px;line-height:1.4}
.servicio__lista li::before{content:"";flex:none;width:11px;height:10px;background:var(--corte);clip-path:polygon(0 100%,87% 0,100% 0,13% 100%);translate:0 1px}
.servicio .enlace{margin-top:8px}
@media (min-width:900px){
  .servicio{grid-template-columns:90px minmax(0,1.35fr) minmax(0,1fr);align-items:start}
  .servicio__lista{grid-column:3}
  .servicio .enlace{grid-column:3}
}

/* ===== 06 · Proceso ===== */
.pasos{display:grid;gap:40px;margin-top:44px;counter-reset:paso}
@media (min-width:700px){.pasos{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 32px}}
@media (min-width:1100px){.pasos{grid-template-columns:repeat(4,minmax(0,1fr))}}
.paso .filo{margin-bottom:20px}
.paso__num{display:block;font-size:clamp(54px,6vw,96px);font-weight:780;font-stretch:125%;line-height:.85;letter-spacing:-.05em;color:var(--perla);-webkit-text-stroke:1.5px var(--ink)}
.paso__titulo{margin-top:16px;font-size:clamp(22px,2.2vw,28px);font-weight:740;font-stretch:118%;letter-spacing:-.02em;text-transform:uppercase}
.paso__texto{margin-top:10px;max-width:34ch;font-size:16px;line-height:1.5;color:var(--muted)}

/* ===== 07 · Sobre mí ===== */
.sobre{display:grid;gap:40px;margin-top:44px}
@media (min-width:900px){.sobre{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}}
.sobre__foto figcaption{margin-top:10px;font-size:13px;color:var(--muted)}
.sobre__texto p{max-width:54ch;font-size:clamp(17px,1.5vw,20px);line-height:1.6}
.sobre__texto p + p{margin-top:16px}
.sobre__cita{margin-top:30px;padding-left:20px;border-left:4px solid var(--corte);font-size:clamp(20px,2vw,26px);font-weight:600;font-stretch:110%;line-height:1.35;max-width:36ch}
.sobre__cita cite{display:block;margin-top:10px;font-size:13px;font-style:normal;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.habilidades{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.exp{margin-top:44px}
.exp__titulo{font-size:13px;font-weight:600;font-stretch:112%;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.exp ol{margin-top:12px;border-bottom:1.5px solid var(--line)}
.exp li{display:grid;gap:4px 24px;padding:16px 0;border-top:1.5px solid var(--line)}
.exp__fecha{font-size:13px;font-weight:650;font-stretch:112%;letter-spacing:.06em;color:var(--muted)}
.exp__rol{font-size:18px;font-weight:650;line-height:1.35}
.exp__lugar{font-size:15px;color:var(--muted)}
@media (min-width:700px){.exp li{grid-template-columns:150px minmax(0,1fr)}.exp__lugar{grid-column:2}}

/* ===== 08 · ISYSNT y canales ===== */
.canales{display:grid;gap:40px;margin-top:44px}
@media (min-width:900px){.canales{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;align-items:center}}
.canales .medio{max-width:420px}
.canal{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;padding:22px 0;border-top:1.5px solid var(--ink);text-decoration:none}
.canales__lista{border-bottom:1.5px solid var(--ink)}
.canal__red{font-size:13px;font-weight:600;font-stretch:112%;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.canal__nombre{grid-column:1;font-size:clamp(24px,3.4vw,44px);font-weight:780;font-stretch:125%;line-height:1;letter-spacing:-.035em}
.canal__txt{grid-column:1;max-width:48ch;font-size:16px;line-height:1.5;color:var(--muted)}
.canal .corte-ico{grid-column:2;grid-row:1 / span 3;align-self:center;width:22px;height:20px;transition:scale var(--t-hover) var(--ease)}
@media (hover:hover){.canal:hover .corte-ico{scale:1.5}}
.canales__resumen{max-width:56ch;margin-bottom:26px;font-size:clamp(17px,1.5vw,20px);line-height:1.6}

/* ===== 09 · Preguntas ===== */
.preguntas{margin-top:44px;border-bottom:1.5px solid var(--ink)}
.pregunta{border-top:1.5px solid var(--ink)}
.pregunta summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px;padding:18px 0;cursor:pointer;list-style:none;
  font-size:clamp(19px,2vw,26px);font-weight:700;font-stretch:115%;line-height:1.25;letter-spacing:-.01em}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta__signo{position:relative;flex:none;width:24px;height:24px}
.pregunta__signo::before,.pregunta__signo::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:2.5px;background:var(--ink);translate:-50% -50%;transition:rotate var(--t-hover) var(--ease),background-color var(--t-hover)}
.pregunta__signo::after{rotate:90deg}
.pregunta[open] .pregunta__signo::before{rotate:-45.6deg;background:var(--corte)}
.pregunta[open] .pregunta__signo::after{rotate:-45.6deg;background:var(--corte)}
.pregunta__resp{padding:0 0 26px;max-width:62ch;font-size:17px;line-height:1.6;color:var(--muted)}
.pregunta__resp p + p,.pregunta__resp ul{margin-top:10px}
.pregunta__resp li{padding-left:18px;position:relative}
.pregunta__resp li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--corte)}
.preguntas + .enlace{margin-top:18px}

/* ===== 10 · Contacto y pie ===== */
.contacto{max-width:var(--maxw);margin:0 auto;padding:var(--section-y) var(--gutter) 0}
.contacto > .filo{margin-bottom:26px}
.contacto__titulo{max-width:13ch;margin-top:14px;font-size:clamp(40px,8.4vw,128px);font-weight:780;font-stretch:125%;line-height:.92;letter-spacing:-.04em;text-transform:uppercase}
.contacto__txt{max-width:46ch;margin-top:22px;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--muted)}
.contacto__acciones{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:30px}
.contacto__mail{display:inline-flex;align-items:center;min-height:44px;font-size:clamp(17px,1.6vw,22px);font-weight:600;text-underline-offset:5px}
.contacto__donde{margin-top:18px;font-size:14px;color:var(--muted)}
.pie{max-width:var(--maxw);margin:0 auto;padding:clamp(56px,9vw,120px) var(--gutter) 28px}
.pie__logo{width:100%;height:auto;color:var(--ink)}
.pie__fila{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px;margin-top:28px;padding-top:18px;border-top:1.5px solid var(--line);font-size:14px;color:var(--muted)}
.pie__fila nav{display:flex;flex-wrap:wrap;gap:6px 22px}
.pie__fila a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--ink);font-weight:600}
.pie__fila p{display:flex;align-items:center;min-height:44px}

/* Barra fija del celular */
.fija{position:fixed;left:12px;right:12px;bottom:12px;z-index:45;display:flex;justify-content:center;transition:translate .5s var(--ease),opacity .3s}
.fija .btn{width:100%;justify-content:center;min-height:56px}
.fija--fuera{translate:0 140%;opacity:0;pointer-events:none}
@media (min-width:900px){.fija{display:none}}

/* ===== Páginas de cada caso ===== */
.caso-hero{max-width:var(--maxw);margin:0 auto;padding:calc(var(--barra-h) + clamp(28px,6vw,90px)) var(--gutter) 0}
.caso-hero__vuelta{margin-bottom:18px}
.caso-hero__titulo{margin-top:16px;font-size:min(clamp(46px,11.5vw,180px),calc((100vw - 2 * var(--gutter) - 16px) / var(--ancho,6)));font-weight:780;font-stretch:125%;line-height:.88;letter-spacing:-.045em;text-transform:uppercase;overflow-wrap:anywhere}
.caso-hero__lead{max-width:40ch;margin-top:26px;font-size:clamp(19px,2vw,26px);font-weight:500;line-height:1.4}
.caso-meta{display:grid;gap:22px;margin-top:40px;padding-top:22px;border-top:1.5px solid var(--ink)}
@media (min-width:900px){.caso-meta{grid-template-columns:repeat(3,minmax(0,1fr))}}
.caso-meta dt{font-size:12px;font-weight:600;font-stretch:112%;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.caso-meta dd{margin-top:8px;font-size:16px;line-height:1.5}
.caso-meta .tags{margin-top:10px}
.caso-portada{max-width:var(--maxw);margin:clamp(40px,6vw,80px) auto 0;padding:0 var(--gutter)}
.caso-texto{max-width:var(--maxw);margin:0 auto;padding:clamp(64px,9vw,130px) var(--gutter) 0;display:grid;gap:22px}
@media (min-width:900px){.caso-texto{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px}}
.caso-texto__cuerpo p{max-width:58ch;font-size:clamp(17px,1.5vw,20px);line-height:1.6}
.caso-texto__cuerpo p + p{margin-top:16px}
.caso-texto__cuerpo .enlace{margin-top:14px}
.entregas{display:grid;gap:10px;margin-top:4px}
.entregas li{display:flex;gap:12px;align-items:baseline;font-size:17px;line-height:1.4}
.entregas li::before{content:"";flex:none;width:11px;height:10px;background:var(--corte);clip-path:polygon(0 100%,87% 0,100% 0,13% 100%);translate:0 1px}
.bloque{max-width:var(--maxw);margin:0 auto;padding:clamp(64px,9vw,130px) var(--gutter) 0}
.bloque > .filo{margin-bottom:22px}
.bloque__titulo{font-size:clamp(26px,3.6vw,48px);font-weight:740;font-stretch:118%;line-height:1.05;letter-spacing:-.03em}
.galeria{display:grid;gap:16px;margin-top:30px}
@media (min-width:700px){.galeria{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}}
@media (min-width:1100px){.galeria--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.galeria .ancho{grid-column:1 / -1}
.pieza figcaption{margin-top:10px;font-size:14px;line-height:1.45;color:var(--muted)}
.siguiente{max-width:var(--maxw);margin:clamp(88px,10vw,150px) auto 0;padding:0 var(--gutter)}
.siguiente a{display:grid;gap:22px;padding-top:22px;border-top:1.5px solid var(--ink);text-decoration:none}
@media (min-width:900px){.siguiente a{grid-template-columns:minmax(0,1fr) minmax(0,420px);align-items:end}}
.siguiente__nombre{display:block;margin-top:10px;font-size:clamp(40px,8vw,120px);font-weight:780;font-stretch:125%;line-height:.9;letter-spacing:-.045em;text-transform:uppercase;transition:translate var(--t-hover) var(--ease)}
@media (hover:hover){.siguiente a:hover .siguiente__nombre{translate:20px 0}}
.caso-cta{max-width:var(--maxw);margin:clamp(72px,9vw,130px) auto 0;padding:0 var(--gutter);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.caso-cta p{max-width:30ch;font-size:clamp(22px,2.6vw,34px);font-weight:720;font-stretch:118%;line-height:1.15;letter-spacing:-.02em}

/* ===== Menos movimiento ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js .pre{display:none}
}