/* ==========================================================
   CREHAZ · home.css
   Portada: hero, marquee, tres puertas, quehacer, cartas, dividers.
   ========================================================== */
/* ============ 01 HERO ============ */
.hero{background:#0a0c1e;color:var(--paper);padding:40px var(--gutter) 90px;min-height:calc(110vh - 78px);position:relative;overflow:hidden;display:flex;flex-direction:column}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px, rgba(250,253,240,.14) 1px, transparent 1px);background-size:14px 14px;animation:gridDrift 22s linear infinite;z-index:0}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 760px 520px at 22% 36%, rgba(231,32,123,.62),transparent 62%),radial-gradient(ellipse 640px 460px at 82% 70%, rgba(49,186,210,.55),transparent 62%),radial-gradient(ellipse 580px 400px at 60% 14%, rgba(250,236,81,.28),transparent 60%);z-index:0;animation:glowDrift 9s ease-in-out infinite}
@keyframes gridDrift{0%{background-position:0 0}100%{background-position:140px 140px}}
@keyframes glowDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(22px,-12px)}}
.hero > *{position:relative;z-index:2}
/* meta-top removed per request */

.hero .lay{display:flex;flex-direction:column;padding-top:36px;position:relative;flex:1;justify-content:center}
.hero h1{font-family:var(--f-cond);font-weight:900;font-size:clamp(72px,11.2vw,200px);line-height:.86;letter-spacing:-.045em;text-transform:uppercase;color:var(--paper);width:100%}
.hero h1 .line{display:block;white-space:nowrap}
.hero h1 .y{color:var(--yellow)}
.hero h1 .m{color:var(--paper)}
.hero h1 .h{color:var(--magenta)}
.hero h1 .rot{display:inline-block;position:relative;color:var(--cyan);min-width:0;text-align:left;vertical-align:top;transition:width .45s cubic-bezier(.22,1,.36,1)}
.hero h1 .rot b{display:block;font-weight:inherit}
.hero h1 .rot b:not(.on){position:absolute;inset:0;opacity:0;pointer-events:none}
.hero h1 .rot b.on{animation:wordSlide .55s cubic-bezier(.22,1,.36,1) both}
@keyframes wordSlide{from{opacity:0;transform:translateY(.5em);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
.hero h1 .dot{color:var(--magenta);margin-left:-.02em;display:inline-block;transform:translateY(.04em)}

.hero .lead{margin-top:48px;display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center;width:100%}
.hero .lead p{font-family:var(--f-serif);font-style:italic;font-size:22px;line-height:1.55;color:rgba(255,253,240,.92);max-width:760px}
.hero .lead p em{color:var(--yellow);font-style:italic}
.hero-logo{width:100%;max-width:560px;justify-self:end;display:block;position:relative}
.hero-logo .logo-stage{position:relative;width:100%;aspect-ratio:1500/440;animation:logoFloat 6s ease-in-out infinite;will-change:transform}
.hero-logo .logo-wordmark{position:absolute;inset:0;animation:logoGlitch 2s steps(1,end) 5s infinite;will-change:transform,filter}
@keyframes logoGlitch{
  0%,70%,100%{transform:translate(0,0);filter:none;clip-path:none}
  72%{transform:translate(-2px,1px);filter:drop-shadow(2.5px 0 0 rgba(75,198,227,.85)) drop-shadow(-2.5px 0 0 rgba(231,32,123,.85));clip-path:inset(42% 0 54% 0)}
  76%{transform:translate(3px,-1px);filter:drop-shadow(-3px 0 0 rgba(75,198,227,.85)) drop-shadow(3px 0 0 rgba(231,32,123,.85));clip-path:inset(18% 0 76% 0)}
  80%{transform:translate(-1px,1px);filter:drop-shadow(2px 0 0 rgba(75,198,227,.7)) drop-shadow(-2px 0 0 rgba(231,32,123,.7));clip-path:inset(62% 0 32% 0)}
  84%{transform:translate(2px,0);filter:drop-shadow(-1.5px 0 0 rgba(75,198,227,.6)) drop-shadow(1.5px 0 0 rgba(231,32,123,.6));clip-path:inset(8% 0 86% 0)}
  88%{transform:translate(-1px,0);filter:none;clip-path:none}
}
.hero-logo .slice{position:absolute;inset:0;width:100%;height:auto;display:block;opacity:0;transform:translateY(40px) scale(.74);filter:blur(22px);animation:letterIn 1.4s cubic-bezier(.22,1,.36,1) forwards}
.hero-logo .slice.l1{clip-path:inset(0 85% 22% 0);animation-delay:.30s}
.hero-logo .slice.l2{clip-path:inset(0 69% 22% 15%);animation-delay:1.30s}
.hero-logo .slice.l3{clip-path:inset(0 51% 22% 31%);animation-delay:2.30s}
.hero-logo .slice.l4{clip-path:inset(0 35% 22% 49%);animation-delay:3.30s}
.hero-logo .slice.l5{clip-path:inset(0 18% 22% 65%);animation-delay:4.30s}
.hero-logo .slice.l6{clip-path:inset(0 0 22% 82%);animation-delay:5.30s}
.hero-logo .slice.eslogan{clip-path:inset(73% 0 0 0);animation-delay:6.60s;animation-duration:2.4s;transform:translateY(14px) scale(.96);filter:invert(1) brightness(1.18) contrast(1.15) blur(8px)}
.hero-logo .slice.eslogan.l-in{filter:invert(1) brightness(1.18) contrast(1.15)}
@keyframes letterIn{to{opacity:1;transform:none;filter:blur(0)}}
@keyframes eslogIn{to{opacity:1;transform:none;filter:invert(1) brightness(1.18) contrast(1.15)}}
.hero-logo .slice.eslogan{animation-name:eslogIn}
@keyframes logoFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-8px)}}

.hero .cta-row{margin-top:48px;display:flex;gap:24px;flex-wrap:wrap;align-items:center}
.hero .scroll-hint{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);font-family:var(--f-mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,253,240,.75);font-weight:800;display:flex;flex-direction:column;align-items:center;gap:12px;z-index:3}
.hero .scroll-hint .arrow{display:block;font-family:var(--f-rag);font-size:32px;color:var(--yellow);line-height:1;animation:arrowBob 1.4s cubic-bezier(.55,.05,.55,1) infinite}
@keyframes arrowBob{0%,100%{transform:translateY(0);opacity:.65}50%{transform:translateY(10px);opacity:1}}

/* ============ 02 MARQUEE (v1.0) ============ */
.marquee{background:var(--yellow);color:var(--ink);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:18px 0;overflow:hidden;position:relative}
.marquee .track{display:flex;gap:48px;width:max-content;animation:slide 38s linear infinite;font-family:var(--f-cond);font-weight:900;font-size:38px;letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap;align-items:center}
.marquee .track span{display:inline-flex;align-items:center;gap:48px}
.marquee .track .dot{width:18px;height:18px;border-radius:50%;background:var(--magenta);display:inline-block;flex:0 0 auto}
.marquee .track em{font-family:var(--f-rag);font-style:normal;font-weight:400;color:var(--magenta);font-size:42px}
.marquee.cyan{background:var(--cyan)}
.marquee.cyan .track em,.marquee.cyan .track .dot{color:var(--ink);background:var(--ink)}
.marquee.orange{background:var(--orange);color:var(--paper)}
.marquee.orange .track em{color:var(--yellow)}
.marquee.orange .track .dot{background:var(--yellow)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* =========================================================
   01 → 02 · Transición scroll-linked E + Marquee corte ink (6)
   Combo cerrado. Micro-tweaks via custom props en :root.
   --mq-h        altura del marquee (px)
   --mq-scale    % de sub-escala del wordmark a progress=1
   --mq-lift     px que sube el titular a progress=1
   --mq-track-sec seg del ciclo del marquee
   --mq-bar      grosor de la franja ink (proporción de --mq-h)
   --trans-progress  0..1 calculado por JS al pasar el hero
   ========================================================= */
:root{
  --mq-h:196px;
  --mq-scale:45;
  --mq-lift:62px;
  --mq-track-sec:68s;
  --mq-bar:.06;
  --trans-progress:0;
}

/* Hero scroll-linked: wordmark se sub-escala, titular sube, marquee crece */
.hero-logo{transform:scale(calc(1 - (var(--mq-scale) / 100) * var(--trans-progress)));transform-origin:50% 50%;filter:saturate(calc(1 - var(--trans-progress) * .35))}
.hero h1{transform:translateY(calc(0px - var(--mq-lift) * var(--trans-progress)));opacity:calc(1 - var(--trans-progress) * .35)}
.hero::after{opacity:calc(1 - var(--trans-progress) * .55)}
.hero .lead p{opacity:calc(1 - var(--trans-progress) * .55)}
.hero .cta-row{opacity:calc(1 - var(--trans-progress) * .65)}
.hero .scroll-hint{opacity:calc(1 - var(--trans-progress) * 1.5)}

/* Marquee — corte ink */
.marquee{min-height:var(--mq-h);padding:0;display:flex;align-items:center;position:relative;overflow:hidden;clip-path:inset(calc((1 - var(--trans-progress)) * 50%) 0 calc((1 - var(--trans-progress)) * 50%) 0)}
.marquee .v-corte{display:block;position:relative;height:100%;width:100%}
.marquee .v-corte .track{display:flex;gap:46px;width:max-content;white-space:nowrap;font-family:var(--f-cond);font-weight:900;text-transform:uppercase;align-items:center;animation:slide var(--mq-track-sec) linear infinite;font-size:clamp(58px,calc(var(--mq-h) * 1.55),152px);letter-spacing:-.035em;line-height:.92;position:absolute;top:50%;left:0;transform:translateY(-50%);color:var(--ink)}
.marquee .v-corte .track em{font-family:var(--f-rag);font-style:normal;font-weight:400;color:var(--magenta);font-size:1.05em;line-height:1}
.marquee .v-corte::after{content:"";position:absolute;left:0;right:0;top:50%;height:clamp(10px,calc(var(--mq-h) * var(--mq-bar)),28px);background:var(--ink);transform:translateY(-50%);z-index:3;pointer-events:none;border-top:2px solid var(--cyan);border-bottom:2px solid var(--magenta);box-sizing:content-box}
.marquee .v-corte::before{content:"02 · cre · haz";position:absolute;left:14px;top:6px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:800;color:var(--ink);opacity:.45;z-index:5;pointer-events:none}
.marquee.hide-label::before{display:none}
.marquee .v-corte .tk{position:absolute;right:14px;top:6px;display:flex;gap:0;z-index:5;pointer-events:none}
.marquee .v-corte .tk i{display:block;width:14px;height:6px}
.marquee .v-corte .tk i:nth-child(1){background:var(--cyan)}
.marquee .v-corte .tk i:nth-child(2){background:var(--magenta)}
.marquee .v-corte .tk i:nth-child(3){background:var(--ink)}
.marquee.hide-ticks .tk{display:none}

/* One-shot glitch flash cuando el marquee termina de revelarse */
.marquee.mq-flash{animation:mqFlash .42s steps(3,end) 1}
@keyframes mqFlash{
  0%{filter:none;transform:translateX(0)}
  20%{filter:drop-shadow(3px 0 0 var(--cyan)) drop-shadow(-3px 0 0 var(--magenta));transform:translateX(-3px)}
  45%{filter:drop-shadow(-3px 0 0 var(--cyan)) drop-shadow(3px 0 0 var(--magenta));transform:translateX(3px)}
  70%{filter:drop-shadow(2px 0 0 var(--cyan)) drop-shadow(-2px 0 0 var(--magenta));transform:translateX(-1px)}
  100%{filter:none;transform:translateX(0)}
}

/* ============ DIVIDER · Sierra vaivén ping-pong (SV3) entre Tres Puertas y Quehacer ============
   Sierra única recorre izda↔dcha con ease-in-out (5s). Spin reverses at midpoint.
   Línea discontinua marca el recorrido + dos flechas Ragtag alternantes + virutas. */
.crehaz-divider{position:relative;width:100%;height:96px;background:linear-gradient(180deg,#31BAD2 0%, var(--paper) 50%, var(--paper) 100%);overflow:hidden;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.crehaz-divider::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;background:linear-gradient(90deg,var(--cyan) 0 33%,var(--magenta) 33% 66%,var(--yellow) 66% 100%);transform:translateY(-50%);z-index:1}
@keyframes cdSawPing{0%{left:6%}48%{left:84%}50%{left:84%}98%{left:6%}100%{left:6%}}
@keyframes cdSawSpin{0%{transform:translateY(-50%) rotate(0)}50%{transform:translateY(-50%) rotate(1080deg)}100%{transform:translateY(-50%) rotate(0)}}
@keyframes cdChipFall{0%,8%{opacity:0;transform:translate(0,0) rotate(0)}14%{opacity:1}100%{opacity:0;transform:translate(var(--cx,25px),var(--cy,30px)) rotate(var(--cr,540deg))}}
@keyframes cdArrowL{0%,48%{opacity:0}50%,98%{opacity:.85}100%{opacity:0}}
@keyframes cdArrowR{0%,2%{opacity:0}3%,48%{opacity:.85}50%,100%{opacity:0}}
.crehaz-divider .saw{position:absolute;top:50%;width:58px;height:58px;filter:drop-shadow(3px 3px 0 var(--ink));animation:cdSawPing 5s ease-in-out infinite, cdSawSpin 5s linear infinite;z-index:4}
.crehaz-divider .marks{position:absolute;top:50%;left:6%;right:16%;height:1px;border-top:2px dashed var(--ink);opacity:.45;transform:translateY(-50%);z-index:2}
.crehaz-divider .arrow{position:absolute;top:14px;font-family:var(--f-rag);font-size:24px;color:var(--magenta);line-height:1;text-shadow:2px 2px 0 var(--ink);z-index:3}
.crehaz-divider .arrow.l{left:8%;animation:cdArrowL 5s ease-in-out infinite}
.crehaz-divider .arrow.r{right:14%;animation:cdArrowR 5s ease-in-out infinite}
.crehaz-divider .chip{position:absolute;top:50%;width:5px;height:7px;background:#a87842;border:1px solid var(--ink);animation:cdChipFall 1.4s linear infinite;z-index:5;pointer-events:none}
.crehaz-divider .chip.c1{left:30%;--cx:-8px;--cy:22px;--cr:540deg;animation-delay:0s}
.crehaz-divider .chip.c2{left:45%;background:#c89860;--cx:10px;--cy:26px;--cr:-720deg;animation-delay:.3s}
.crehaz-divider .chip.c3{left:60%;background:#8b5a2b;--cx:-6px;--cy:24px;--cr:720deg;animation-delay:.8s}
.crehaz-divider .chip.c4{left:72%;background:#c89860;--cx:12px;--cy:28px;--cr:-540deg;animation-delay:1.2s}
.crehaz-divider .lbl{position:absolute;top:10px;left:24px;font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:800;color:var(--paper);background:var(--ink);padding:4px 9px;border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--magenta);z-index:7}
@media (max-width:980px){
  .crehaz-divider{height:78px}
  .crehaz-divider .saw{width:44px;height:44px}
}

/* ============ 03 QUEHACER · paper block ============ */
.quehacer{padding:70px var(--gutter);background:var(--paper);position:relative;overflow:hidden;border-top:2px solid var(--ink)}
/* Pattern de logos: fullbleed, baja opacidad, escalable y pausable via tweaks */
.quehacer::before{content:"";position:absolute;inset:-100%;background:url(../img/pattern-logos-multicolor.png) center/var(--q3-pat-size,700px) repeat;opacity:var(--q3-pat-op,.30);transform:rotate(-6deg);pointer-events:none;z-index:0;animation:slowSpin var(--q3-pat-sec,75s) linear infinite;animation-play-state:var(--q3-pat-play,running);mix-blend-mode:multiply}
@keyframes slowSpin{from{transform:rotate(-6deg)}to{transform:rotate(354deg)}}
.quehacer .inner{max-width:1400px;margin:0 auto;position:relative;z-index:1}
.quehacer .hd{display:grid;grid-template-columns:1fr;align-items:end;gap:32px;margin-bottom:28px;padding-bottom:18px;border-bottom:2px solid var(--ink);position:relative}
.quehacer .hd .l{display:flex;flex-direction:column;gap:10px}
.quehacer .hd .r{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--stone);text-align:right;line-height:1.5}
.quehacer h2{font-family:var(--f-cond);font-weight:900;font-size:clamp(40px,5.4vw,84px);line-height:.92;letter-spacing:-.035em;text-transform:uppercase;max-width:none;text-wrap:balance}
/* "quehacer" — sube de tamaño, color magenta, glitch más agresivo */
.quehacer h2 em{font-family:var(--f-sans);font-weight:900;font-style:normal;color:var(--magenta);letter-spacing:-.025em;font-size:1.22em;line-height:.86;vertical-align:baseline;display:inline-block;position:relative;will-change:transform,filter,clip-path;animation:q3EmGlitch 2.8s steps(1,end) infinite;animation-delay:1.1s}
@keyframes q3EmGlitch{
  0%,62%,100%{transform:translate(0,0);filter:none;clip-path:none}
  64%{transform:translate(-4px,2px);filter:drop-shadow(4px 0 0 var(--cyan)) drop-shadow(-4px 0 0 var(--magenta));clip-path:inset(38% 0 54% 0)}
  68%{transform:translate(5px,-2px);filter:drop-shadow(-5px 0 0 var(--cyan)) drop-shadow(5px 0 0 var(--magenta));clip-path:inset(14% 0 76% 0)}
  72%{transform:translate(-3px,1px);filter:drop-shadow(3px 0 0 var(--cyan)) drop-shadow(-3px 0 0 var(--magenta));clip-path:inset(60% 0 30% 0)}
  76%{transform:translate(4px,0);filter:drop-shadow(-2.5px 0 0 var(--cyan)) drop-shadow(2.5px 0 0 var(--magenta));clip-path:inset(4% 0 84% 0)}
  80%{transform:translate(-2px,0);filter:drop-shadow(2px 0 0 var(--cyan)) drop-shadow(-2px 0 0 var(--magenta));clip-path:inset(46% 0 28% 0)}
  84%{transform:translate(2px,0);filter:none;clip-path:none}
}
.quehacer h2 .mark{background:var(--yellow);padding:0 .08em;display:inline-block;box-shadow:3px 3px 0 var(--ink);position:relative}
.quehacer h2 .mark::after{content:"";position:absolute;left:6px;right:6px;bottom:-5px;height:3px;background:linear-gradient(90deg,var(--cyan) 0 33.33%,var(--magenta) 33.33% 66.66%,var(--ink) 66.66% 100%)}

/* Diagrama: numeración + líneas conectoras en los párrafos */
.quehacer .grid{display:grid;grid-template-columns:1.55fr 1fr;gap:50px;align-items:start;margin-top:22px}
.quehacer .grid .col{position:relative;display:flex;flex-direction:column;gap:22px}
.quehacer .grid .blk{position:relative;padding-left:54px}
.quehacer .grid .blk .nn{position:absolute;left:0;top:4px;font-family:var(--f-cond);font-weight:900;font-size:30px;line-height:1;letter-spacing:-.02em;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:4px}
.quehacer .grid .blk .nn b{display:block}
.quehacer .grid .blk .nn::after{content:"";display:block;width:2px;height:26px;background:var(--ink);margin-top:6px}
.quehacer .grid .blk:last-child .nn::after{display:none}
.quehacer .grid .blk .nn .vb{display:none}
.quehacer .grid p{font-family:var(--f-serif);font-style:italic;font-size:17px;line-height:1.55;color:var(--ink);max-width:none}
.quehacer .grid p + p{margin-top:14px}
/* Highlights más bestias — amarillo con sombra hard + magenta con underline grueso */
.quehacer .grid .hi{font-style:italic;background:var(--yellow);padding:0 .12em;box-shadow:3px 3px 0 var(--ink);position:relative;display:inline-block;line-height:1.1;margin:0 .04em}
.quehacer .grid .magenta{color:var(--magenta);font-style:italic;text-decoration:underline;text-decoration-color:var(--cyan);text-decoration-thickness:2.5px;text-underline-offset:5px}
.quehacer .grid .hi-ink{color:var(--ink);font-style:italic;font-weight:700}
.quehacer .grid p em{font-family:var(--f-rag);font-style:normal;color:var(--magenta);font-weight:400;font-size:1.06em;line-height:1}

/* Aside Siro — Lama Sans Black con micro-glitch en "en el camino", carrusel opcional, bg semi-transparente */
.quehacer .grid .aside{padding:24px 22px 22px;background:rgba(250,236,81,.80);color:var(--ink);position:relative;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.quehacer .grid .aside .vz-body{display:contents}
.quehacer .grid .aside .tag{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:800;color:var(--magenta);margin-bottom:8px}
.quehacer .grid .aside h4{font-family:var(--f-cond);font-weight:900;font-size:22px;line-height:1.08;letter-spacing:-.02em;text-transform:none;margin-bottom:12px;color:var(--ink)}
.quehacer .grid .aside h4 em{text-transform:uppercase}
/* h4 em "en el camino" — Lama Sans Black amarillo + glitch sutil */
.quehacer .grid .aside h4 em{font-family:var(--f-sans);font-weight:900;font-style:normal;color:var(--magenta);letter-spacing:-.015em;display:inline-block;position:relative;animation:q3AsideEmGlitch 4.2s steps(1,end) infinite;animation-delay:2s;will-change:transform,filter,clip-path}
@keyframes q3AsideEmGlitch{
  0%,80%,100%{transform:translate(0,0);filter:none;clip-path:none}
  82%{transform:translate(-2px,1px);filter:drop-shadow(2px 0 0 var(--cyan)) drop-shadow(-2px 0 0 var(--ink));clip-path:inset(38% 0 54% 0)}
  86%{transform:translate(2px,-1px);filter:drop-shadow(-2px 0 0 var(--cyan)) drop-shadow(2px 0 0 var(--ink));clip-path:inset(20% 0 70% 0)}
  90%{transform:translate(-1px,0);filter:none;clip-path:none}
}
.quehacer .grid .aside p{font-family:var(--f-serif);font-style:italic;font-size:14.5px;line-height:1.55;color:var(--ink);margin:0}
.quehacer .grid .aside p + p{margin-top:10px}
.quehacer .grid .aside p em{font-family:var(--f-sans);font-style:italic;font-weight:700;color:var(--magenta)}
.quehacer .grid .aside p b{font-family:var(--f-cond);font-weight:900;font-style:normal;color:var(--magenta);letter-spacing:.01em;font-size:.94em}
.quehacer .grid .aside .sig{margin-top:14px;padding-top:12px;border-top:1px dashed rgba(14,16,34,.32);font-family:var(--f-sans);font-weight:900;font-size:16px;color:var(--ink);font-style:normal;letter-spacing:-.01em;display:flex;justify-content:space-between;align-items:baseline;gap:8px;line-height:1.1}
.quehacer .grid .aside .sig small{font-family:var(--f-mono);font-weight:800;font-size:9px;letter-spacing:.22em;color:rgba(14,16,34,.6);text-transform:uppercase}

/* Carrusel Voz — oculto por defecto, se muestra en variante D */
.quehacer .grid .aside .vz-photo{display:none;position:relative;overflow:hidden;border:2px solid var(--ink);background:#1a1c2e;align-self:stretch;min-height:120px}
.quehacer .grid .aside .vz-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease}
.quehacer .grid .aside .vz-photo img.on{opacity:1}
/* Tratamiento unificador para las 3 generaciones individuales — grayscale + contraste editorial */
/* Glitch RGB entre swaps del carrusel — mismo lenguaje del wordmark / marquee */
.quehacer .grid .aside .vz-photo.glitching{animation:vzCarouselGlitch .46s steps(3,end) 1}
@keyframes vzCarouselGlitch{
  0%{filter:none;transform:translateX(0)}
  18%{filter:drop-shadow(4px 0 0 var(--cyan)) drop-shadow(-4px 0 0 var(--magenta));transform:translateX(-3px)}
  38%{filter:drop-shadow(-4px 0 0 var(--cyan)) drop-shadow(4px 0 0 var(--magenta));transform:translateX(3px)}
  60%{filter:drop-shadow(3px 0 0 var(--cyan)) drop-shadow(-3px 0 0 var(--magenta));transform:translateX(-2px)}
  82%{filter:drop-shadow(-2px 0 0 var(--cyan)) drop-shadow(2px 0 0 var(--magenta));transform:translateX(1px)}
  100%{filter:none;transform:translateX(0)}
}
.quehacer .grid .aside .vz-photo img.trio{object-position:center 38%}
.quehacer .grid .aside .vz-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(14,16,34,.55) 100%);pointer-events:none;z-index:1}
.quehacer .grid .aside .vz-photo .pgs{position:absolute;left:8px;bottom:8px;display:flex;gap:5px;z-index:3}
.quehacer .grid .aside .vz-photo .pgs i{width:6px;height:6px;border-radius:50%;background:rgba(255,253,240,.45);border:1.5px solid var(--ink);box-sizing:content-box;transition:background .25s;cursor:pointer}
.quehacer .grid .aside .vz-photo .pgs i.on{background:var(--magenta)}
.quehacer .grid .aside .vz-photo .ph-cap{position:absolute;right:8px;bottom:6px;background:var(--ink);color:var(--paper);padding:3px 8px;font-family:var(--f-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;z-index:3;border:1.5px solid var(--ink);max-width:64%;text-align:right;line-height:1.3}

/* ------ Variant D · DÍPTICO: 2 fichas horizontales (sin 03), aside abajo con carrusel ------ */
[data-q3="D"] .quehacer .grid{grid-template-columns:1fr;gap:20px;align-items:stretch}
[data-q3="D"] .quehacer .grid .col{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
[data-q3="D"] .quehacer .grid .blk[data-num="03"]{display:none}
[data-q3="D"] .quehacer .grid .blk{padding:16px 18px 20px;background:var(--paper);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);position:relative;display:flex;flex-direction:column;gap:10px}
[data-q3="D"] .quehacer .grid .blk::after{content:"";position:absolute;top:-2px;left:-2px;right:-2px;height:6px;background:linear-gradient(90deg,var(--cyan) 0 33.33%,var(--magenta) 33.33% 66.66%,var(--yellow) 66.66% 100%)}
/* Quitamos números grandes — dejamos sólo el tag */
[data-q3="D"] .quehacer .grid .blk .nn{position:static;display:flex;justify-content:flex-start;align-items:center;font-family:var(--f-mono);font-weight:800;color:var(--magenta);text-transform:uppercase;font-size:11px;letter-spacing:.22em;padding-top:6px}
[data-q3="D"] .quehacer .grid .blk .nn b,
[data-q3="D"] .quehacer .grid .blk .nn .ln,
[data-q3="D"] .quehacer .grid .blk .nn::after,
[data-q3="D"] .quehacer .grid .blk .nn .vb{display:none}
[data-q3="D"] .quehacer .grid .blk .nn .tag{display:block;color:var(--magenta);font-size:11px;letter-spacing:.22em;font-weight:800;background:none;padding:0}
[data-q3="D"] .quehacer .grid .blk{padding-left:18px}
[data-q3="D"] .quehacer .grid p{font-size:15px;line-height:1.55;max-width:none;flex:1}
[data-q3="D"] .quehacer .grid .hi{box-shadow:2px 2px 0 var(--ink);font-size:.96em}

/* Aside (Voz 03) en variante D — grid horizontal, más ancho */
[data-q3="D"] .quehacer .grid .aside .vz-photo{display:block}
[data-q3="D"] .quehacer .grid .aside .vz-body{display:block}
[data-q3="D"] .quehacer .grid .aside{padding:0;align-items:stretch;box-shadow:6px 6px 0 var(--ink);background:rgba(250,236,81,.80)}

/* Voz=1 · Tarjeta postal — foto + texto arriba, firma en franja completa abajo (texto AMPLIADO) */
[data-q3="D"][data-voz="1"] .quehacer .grid .aside{display:grid;grid-template-columns:280px 1fr;grid-template-rows:1fr auto;grid-template-areas:"photo body" "sig sig";gap:0;padding:0}
[data-q3="D"][data-voz="1"] .quehacer .grid .aside .vz-photo{grid-area:photo;border-top:0;border-left:0;border-bottom:2px solid var(--ink);border-right:2px solid var(--ink);min-height:280px}
[data-q3="D"][data-voz="1"] .quehacer .grid .aside .vz-body{grid-area:body;display:flex;flex-direction:column;justify-content:center;padding:24px 28px;border-bottom:2px solid var(--ink)}
[data-q3="D"][data-voz="1"] .quehacer .grid .aside .vz-body h4{font-size:30px;line-height:1.08;margin-bottom:16px;color:var(--ink);width:100%}
[data-q3="D"][data-voz="1"] .quehacer .grid .aside .vz-body p{font-size:17px;line-height:1.55;color:var(--ink);width:100%}
[data-q3="D"][data-voz="1"] .quehacer .grid .aside .vz-body p + p{margin-top:10px}
[data-q3="D"][data-voz="1"] .quehacer .grid .aside .vz-body p b{font-family:var(--f-cond);font-weight:900;color:var(--magenta);font-style:normal;letter-spacing:.01em}
[data-q3="D"][data-voz="1"] .quehacer .grid .aside .vz-body p em{font-family:var(--f-sans);font-style:italic;font-weight:700;color:var(--magenta)}
[data-q3="D"][data-voz="1"] .quehacer .grid .aside .sig{grid-area:sig;margin:0;padding:18px 24px;border-top:0;display:flex;justify-content:center;align-items:center;text-align:center;background:rgba(14,16,34,.08);font-size:22px;letter-spacing:.02em;gap:14px;color:var(--ink)}
[data-q3="D"][data-voz="1"] .quehacer .grid .aside .sig::before,
[data-q3="D"][data-voz="1"] .quehacer .grid .aside .sig::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(14,16,34,.4) 50%,transparent 100%)}
[data-q3="D"][data-voz="1"] .quehacer .grid .aside .sig small{display:none}

/* In-view animations — stagger por letras en H2 + sello cae en palabras clave */
.quehacer h2 .letter{display:inline-block;opacity:0;transform:translateY(.4em);filter:blur(8px);animation:letterIn .7s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(var(--li,0) * .035s);will-change:transform,filter,opacity}
.quehacer .grid .blk .nn{opacity:0;transform:translateY(-8px);animation:selloDrop .35s cubic-bezier(.34,1.15,.64,1) forwards;animation-delay:calc(.4s + var(--bi,0) * .12s)}
@keyframes selloDrop{0%{opacity:0;transform:translateY(-10px) scale(.94)}60%{opacity:1;transform:translateY(2px) scale(1.02)}100%{opacity:1;transform:translateY(0) scale(1)}}

/* ============ 04 TRES PUERTAS · INK BLOCK · 3 variantes ============ */
.puertas{padding:48px var(--gutter) 48px;background:var(--paper);color:var(--ink);position:relative;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);overflow:hidden;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
/* Rejilla de puntos oscuros a la deriva — tono invertido */
.puertas::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(14,16,34,.12) 1px,transparent 1px);background-size:14px 14px;animation:puertasGridDrift 22s linear infinite;pointer-events:none;z-index:1}
@keyframes puertasGridDrift{0%{background-position:0 0}100%{background-position:140px 140px}}
.puertas::after{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--cyan) 0 33.33%,var(--magenta) 33.33% 66.66%,var(--yellow) 66.66% 100%);z-index:3}

/* ====== Animated bg · AURORA (PB3 cementada chat 06) ======
   Continuación orgánica del hero: navy + rejilla + glows CMYK
   estirados en 3 bandas verticales tipo aurora (screen+blur). */
.puertas .bg-fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.puertas .bg-fx .aurora{position:absolute;inset:-20% 0;mix-blend-mode:multiply;filter:blur(40px)}
.puertas .bg-fx .aurora .band{position:absolute;top:0;bottom:0;width:46%;background:linear-gradient(180deg,transparent 0%,var(--c,rgba(231,32,123,.5)) 45%,transparent 100%);animation:puertasAurora var(--d,16s) ease-in-out infinite}
.puertas .bg-fx .aurora .band.a1{left:-6%;--c:rgba(231,32,123,.72);--d:16s;animation-delay:0s}
.puertas .bg-fx .aurora .band.a2{left:30%;--c:rgba(49,186,210,.62);--d:20s;animation-delay:-4s}
.puertas .bg-fx .aurora .band.a3{left:62%;--c:rgba(250,236,81,.48);--d:24s;animation-delay:-9s}
@keyframes puertasAurora{
  0%,100%{transform:translateX(-12%) scaleY(1);opacity:.7}
  50%{transform:translateX(12%) scaleY(1.18);opacity:1}
}

.puertas .inner{max-width:1500px;margin:0 auto;position:relative;z-index:1}
.puertas .hd{display:block;text-align:left;align-items:end;margin-bottom:36px;padding-bottom:18px;border-bottom:1.5px solid rgba(255,253,240,.18)}
.puertas h2{font-family:var(--f-cond);font-weight:900;font-size:clamp(40px,6vw,108px);line-height:.86;letter-spacing:-.045em;text-transform:uppercase;color:#0E1022;white-space:nowrap;overflow:visible;width:100%;margin:0;text-shadow:0 0 1px rgba(250,236,81,.95),0 0 10px rgba(250,236,81,.6),0 2px 4px rgba(250,236,81,.35)}
.puertas h2 em{font-family:var(--f-sans);font-weight:900;font-style:normal;color:var(--magenta);background-color:#7FD9E6;letter-spacing:-.035em;font-size:1.5em;line-height:.82;display:inline-block;position:relative;vertical-align:baseline;padding:0 .14em;box-shadow:5px 5px 0 var(--ink);text-shadow:none;animation:casaGlitch 5s linear infinite, casaColor 20s linear infinite;will-change:transform,filter,color,background-color}
.puertas h2 em::after{content:"";position:absolute;left:.12em;right:.12em;bottom:-7px;height:4px;background:linear-gradient(90deg,var(--cyan) 0 33.33%,var(--magenta) 33.33% 66.66%,var(--yellow) 66.66% 100%);pointer-events:none}
@keyframes casaGlitch{
  0%,88%,100%{transform:translate(0,0);filter:none;clip-path:none}
  90%{transform:translate(-4px,2px);filter:drop-shadow(4px 0 0 var(--cyan)) drop-shadow(-4px 0 0 var(--magenta));clip-path:inset(35% 0 55% 0)}
  92%{transform:translate(5px,-1px);filter:drop-shadow(-5px 0 0 var(--yellow)) drop-shadow(5px 0 0 var(--magenta));clip-path:inset(60% 0 28% 0)}
  94%{transform:translate(-3px,1px);filter:drop-shadow(3px 0 0 var(--cyan)) drop-shadow(-3px 0 0 var(--orange));clip-path:inset(15% 0 70% 0)}
  96%{transform:translate(2px,0);filter:none;clip-path:none}
}
@keyframes casaColor{
  0%,24.99%{color:var(--magenta);background-color:#7FD9E6}
  25%,49.99%{color:var(--cyan);background-color:#F78B4A}
  50%,74.99%{color:var(--yellow);background-color:#F47FB1}
  75%,100%{color:var(--orange);background-color:#F7C948}
}
.puertas .hd .nm{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:800;color:rgba(255,253,240,.55);text-align:right;line-height:1.9}
.puertas .hd .nm b{color:var(--yellow);font-family:var(--f-cond);font-size:14px;letter-spacing:.06em;display:block}

/* ====== Banda full-ink · aviso de entrada (lead text · chat 06) ======
   Banner que rompe los gutters del .inner para tocar los bordes de la
   sección. Cinta amarilla rayada en las puntas, dot magenta pulsante,
   yellow <b> para verbos-acción, magenta italic <em> para el remate. */
.puertas .pre-grid{margin:0 calc(-1 * var(--gutter)) 34px;position:relative}
.puertas .pre-grid .banda{position:relative;background:var(--ink);color:var(--paper);padding:15px 32px;display:flex;align-items:center;gap:24px;width:100%;border-top:2px solid var(--magenta);border-bottom:2px solid var(--cyan);box-shadow:0 4px 0 var(--ink)}
.puertas .pre-grid .banda::before,
.puertas .pre-grid .banda::after{content:"";position:absolute;top:0;bottom:0;width:14px;background:repeating-linear-gradient(45deg,var(--yellow) 0 8px,var(--ink) 8px 16px)}
.puertas .pre-grid .banda::before{left:0}
.puertas .pre-grid .banda::after{right:0}
.puertas .pre-grid .banda .lbl{font-family:var(--f-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:800;color:var(--yellow);flex:0 0 auto;padding-left:28px;display:inline-flex;align-items:center;gap:8px}
.puertas .pre-grid .banda .lbl .d{width:8px;height:8px;border-radius:50%;background:var(--magenta);animation:puertasBandaDot 1.8s ease-in-out infinite;flex:0 0 auto}
@keyframes puertasBandaDot{0%,100%{box-shadow:0 0 0 0 var(--magenta);opacity:.5}50%{box-shadow:0 0 0 7px transparent;opacity:1}}
.puertas .pre-grid .banda .txt{font-family:var(--f-cond);font-weight:600;font-size:19px;line-height:1.35;color:var(--paper);padding-right:32px;letter-spacing:.005em}
.puertas .pre-grid .banda .txt b{color:var(--yellow);font-weight:900}
.puertas .pre-grid .banda .txt em{font-family:var(--f-sans);font-style:italic;color:var(--magenta);font-weight:700}

/* grid */
.puertas .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:18px 8px 24px;align-items:start;perspective:1800px}

/* ====== Hojas diagonales ====== */
.pc{position:relative;aspect-ratio:4/5;background:var(--c);border:3px solid var(--paper);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:20px 20px 22px;color:var(--paper);box-shadow:2px 2px 0 var(--yellow),4px 4px 0 var(--orange),6px 6px 0 var(--magenta),8px 8px 0 var(--cyan),10px 10px 0 var(--ink);transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s,opacity .35s;text-decoration:none}
.pc.p1{--c:var(--magenta);transform:rotate(0deg)}
.pc.p2{--c:var(--orange);transform:rotate(0deg)}
.pc.p3{--c:var(--cyan);transform:rotate(0deg)}
/* ====== Estampar · stamp press (IX3 cementada chat 06) ======
   Hover: la tarjeta se separa del "papel", las sombras crecen.
   Active: se hunde, las sombras colapsan, una mancha de tinta
   del color de la tarjeta se expande desde el centro.
   ============================================================ */
.pc:hover{transform:translate(-3px,-6px) rotate(0deg);box-shadow:5px 5px 0 var(--yellow),10px 10px 0 var(--orange),15px 15px 0 var(--magenta),20px 20px 0 var(--cyan),25px 25px 0 var(--ink);z-index:3;transition:transform .18s cubic-bezier(.4,1.4,.6,1),box-shadow .18s,filter .18s}
.pc:active{transform:translate(0,0) rotate(0deg) scale(.985);box-shadow:0 0 0 var(--yellow),0 0 0 var(--orange),0 0 0 var(--magenta),0 0 0 var(--cyan),2px 2px 0 var(--ink);transition:transform .08s cubic-bezier(.6,0,.4,1),box-shadow .08s}
/* Sibling dim — al hover una, las otras bajan opacidad sin desplazarse */
.puertas .grid:hover .pc:not(:hover){opacity:.62;filter:saturate(.85)}

/* ====== Duotone · foto grayscale + overlay sólido per-card en multiply
   (V6 cementada chat 06 · sustituye al Amanecer gradient)
   - ::before contiene la foto desaturada
   - ::after contiene el color sólido + vignette oscura inferior en multiply
   ====== */
.pc::before{content:"";position:absolute;inset:0;background:var(--bg) center/cover no-repeat;filter:grayscale(1) contrast(1.35) brightness(.92);pointer-events:none;z-index:0;transition:filter .4s cubic-bezier(.22,1,.36,1)}
.pc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,16,34,0) 35%,rgba(14,16,34,.55) 100%),var(--c);mix-blend-mode:multiply;pointer-events:none;z-index:1}
.pc:hover::before{filter:grayscale(1) contrast(1.45) brightness(1)}

/* Stamp ink-bleed · expande desde el centro al hacer click */
.pc .ink-bleed{position:absolute;left:50%;top:50%;width:0;height:0;border-radius:50%;background:radial-gradient(circle,var(--c) 0%,transparent 70%);transform:translate(-50%,-50%);pointer-events:none;opacity:0;z-index:6;mix-blend-mode:multiply}
.pc:active .ink-bleed{animation:pcInkBleed .6s ease-out 1}
@keyframes pcInkBleed{
  0%{width:0;height:0;opacity:.7}
  100%{width:240%;height:240%;opacity:0}
}

.pc > *{position:relative;z-index:2}
.pc .stamp{display:none}
/* ====== Title palette · cementada (paleta 5: Paper + Ink + Yellow desc) ====== */

.pc h3{font-family:var(--f-cond);font-weight:900;font-size:clamp(50px,4.6vw,86px);line-height:.84;letter-spacing:-.04em;text-transform:uppercase;color:#FFFDF0;text-shadow:5px 5px 0 #0E1022;margin-top:auto}
.pc h3 em{font-family:var(--f-cond);font-weight:600;font-style:normal;color:#FAEC51;font-size:.38em;letter-spacing:-.005em;display:block;margin-top:14px;line-height:1.18;text-shadow:none;text-transform:none;max-width:14em}
.pc:hover h3 em{animation:pcGlitch .5s steps(3,end) 1}
@keyframes pcGlitch{
  0%{filter:none;transform:translateX(0)}
  25%{filter:drop-shadow(3px 0 0 var(--cyan)) drop-shadow(-3px 0 0 var(--magenta));transform:translateX(-2px)}
  55%{filter:drop-shadow(-3px 0 0 var(--cyan)) drop-shadow(3px 0 0 var(--magenta));transform:translateX(2px)}
  100%{filter:none;transform:translateX(0)}
}
.pc .lead{font-family:var(--f-serif);font-style:italic;font-size:14.5px;line-height:1.45;color:var(--paper);max-width:280px;text-shadow:1px 1px 0 rgba(14,16,34,.55)}

/* ====== Ficha bar · sello CMYK — solo label ====== */
.pc .ficha{position:absolute;top:16px;left:16px;margin-top:0;align-self:auto;z-index:3;background:var(--paper);color:var(--ink);padding:10px 16px 9px;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);font-family:var(--f-cond);font-weight:900;font-size:16px;letter-spacing:.04em;text-transform:uppercase;line-height:1}
.pc .ficha::before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;height:5px;background:linear-gradient(90deg,var(--cyan) 0 33.33%,var(--magenta) 33.33% 66.66%,var(--yellow) 66.66% 100%)}
.pc .enter{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-cond);font-weight:900;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);align-self:flex-start;padding:6px 0 3px;border-bottom:1.5px solid var(--yellow);margin-top:10px;transition:gap .25s,color .25s}
.pc .enter .a{font-family:var(--f-rag);color:var(--yellow);font-size:16px;line-height:1;transition:transform .25s}
.pc:hover .enter{gap:16px;color:var(--yellow)}
.pc:hover .enter .a{transform:translateX(6px)}

/* ====== Per-card Display Types (sistema CREHAZ) ====== */
.pc .pc-fx{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.pc .pc-fx i{display:none;position:absolute}
.pc .pc-name{display:inline-block;position:relative}
.pc .pc-name .lt{display:inline-block}

/* CREAFT (p1) · 12 · Tícker — zoom-word aplicado a la palabra CREAFT */
.pc.p1 .pc-name{animation:tickerZoom 5s cubic-bezier(.5,0,.25,1) infinite}
@keyframes tickerZoom{
  0%{opacity:0;transform:scale(.3);letter-spacing:.3em;filter:blur(6px)}
  10%{opacity:1;transform:scale(1);letter-spacing:-.035em;filter:blur(0)}
  85%{opacity:1;transform:scale(1.04);letter-spacing:-.035em;filter:blur(0)}
  95%{opacity:0;transform:scale(1.3);filter:blur(4px)}
  100%{opacity:0}
}

/* CREAtelier (p2) · 08 · Tormenta — letras del nombre caen en cascada */
.pc.p2 .pc-name .lt{animation:tormentaDrop 3.6s cubic-bezier(.5,0,.2,1) infinite}
.pc.p2 .pc-name .lt:nth-child(1){animation-delay:0s}
.pc.p2 .pc-name .lt:nth-child(2){animation-delay:.08s}
.pc.p2 .pc-name .lt:nth-child(3){animation-delay:.16s}
.pc.p2 .pc-name .lt:nth-child(4){animation-delay:.24s}
.pc.p2 .pc-name .lt:nth-child(5){animation-delay:.32s}
.pc.p2 .pc-name .lt:nth-child(6){animation-delay:.40s}
.pc.p2 .pc-name .lt:nth-child(7){animation-delay:.48s}
.pc.p2 .pc-name .lt:nth-child(8){animation-delay:.56s}
.pc.p2 .pc-name .lt:nth-child(9){animation-delay:.64s}
.pc.p2 .pc-name .lt:nth-child(10){animation-delay:.72s}
@keyframes tormentaDrop{0%{transform:translateY(-120%) rotate(-12deg);opacity:0;filter:blur(2px)}30%{transform:translateY(0) rotate(0);opacity:1;filter:blur(0)}70%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(140%) rotate(14deg);opacity:0;filter:blur(2px)}}

/* CREACT (p3) · 07 · Talla — sello-stamp bounce + sombra hard amarillo */
.pc.p3 .pc-name{transform-origin:left center;animation:tallaStamp 3.6s cubic-bezier(.2,1.6,.3,1) infinite;text-shadow:5px 5px 0 #0E1022}
@keyframes tallaStamp{0%,6%{transform:scale(0) rotate(-12deg);opacity:0}14%{transform:scale(1.14) rotate(2deg);opacity:1}22%,100%{transform:scale(1) rotate(0);opacity:1}}

@media (max-width:980px){
  .puertas{min-height:0;padding:80px var(--gutter) 80px;display:block}
  .puertas h2{white-space:normal;font-size:clamp(40px,9vw,72px);text-wrap:balance}
  .puertas .pre-grid{margin:0 0 26px}
  .puertas .pre-grid .banda{flex-direction:column;align-items:flex-start;gap:8px;padding:14px 24px}
  .puertas .pre-grid .banda .lbl{padding-left:18px}
  .puertas .pre-grid .banda .txt{font-size:16px;padding-right:18px}
  .puertas .grid{grid-template-columns:1fr;gap:32px;perspective:none}
  .pc{aspect-ratio:auto;min-height:480px}
  .pc.p1,.pc.p2,.pc.p3{transform:none}
  .puertas .grid:has(.pc:hover) .pc.p1:not(:hover),.puertas .grid:has(.pc:hover) .pc.p2:not(:hover),.puertas .grid:has(.pc:hover) .pc.p3:not(:hover){transform:none;opacity:1}
}