/* Scrollytelling: tarjetas apiladas blancas sobre el hero coral. */
:root{ --wine:#6e1320; --red:#c12530; --bright:#e01515; --gold:#bd8b23; --coral:#f1a3b1; --cream:#f6e7d8; --ease:cubic-bezier(.16,1,.3,1); }
.stack{ position:relative; z-index:6; } /* sobre el canvas del hero (#stage z auto), bajo el nav (z 10) */
.hero-spacer{ height:100vh; } /* primera pantalla = el hero (canvas fijo detras) */
.card{ position:sticky; top:0; height:100vh; }
.card .inner{ position:relative; height:100%; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:#fff; border-radius:34px 34px 0 0; box-shadow:0 -22px 60px rgba(44,10,16,.18);
  transform-origin:top center; will-change:transform,filter; }
.pad{ width:100%; max-width:1180px; padding:0 6vw; }
.stitch{ position:absolute; top:0; left:50%; transform:translateX(-50%); z-index:5; }

.label{ font-family:'Jost',sans-serif; font-size:12px; letter-spacing:.34em; text-transform:uppercase; font-weight:500; opacity:.85; color:var(--wine); }
/* Bajada keyword dentro de un titular poetico (SEO/AIO): visible, discreta, sans, no italica.
   Convierte el H2 en portador de keyword sin tocar la linea de marca. */
.h-seo{ display:block; font-family:'Jost',sans-serif; font-weight:400; font-style:normal;
  text-transform:none; letter-spacing:.01em; font-size:clamp(13px,1.15vw,16px); line-height:1.4;
  margin-top:.7em; color:var(--wine); opacity:.7; }
.card .display{ font-family:'Paul Slab',serif; font-weight:700; line-height:.94; text-transform:uppercase; color:var(--bright); font-size:clamp(40px,7vw,108px); }
.card .body{ font-family:'Jost',sans-serif; font-weight:300; font-size:clamp(15px,1.4vw,19px); line-height:1.6; max-width:42ch; color:#8a3a45; margin-top:20px; }

/* Parallax de capas (motion on): al ENTRAR la tarjeta, su contenido llega con retardo y se
   asienta (--e, con easing desde scroll.js); al ser CUBIERTA, el contenido se hunde un poco mas
   que la superficie (--p). Dos velocidades = profundidad: rompe el plano sin JS nuevo. */
[data-motion="on"] .card .pad{ transform:translateY(calc((1 - var(--e,1)) * 9vh - var(--p,0) * 4vh)); will-change:transform; }
[data-motion="on"] #pain .pain-head{ transform:translate(-50%, calc((1 - var(--e,1)) * 13vh)); }
[data-motion="on"] #pain .fan{ transform:translateY(calc((1 - var(--e,1)) * 6vh - var(--p,0) * 3vh)); }
[data-motion="on"] #pain .pain-nav{ transform:translateY(calc((1 - var(--e,1)) * 17vh)); }

/* reveals (se activan con .is-in, que pone scroll.js) */
.rise{ opacity:0; transform:translateY(42px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.is-in .rise{ opacity:1; transform:none; }
[data-d="1"]{ transition-delay:.08s } [data-d="2"]{ transition-delay:.16s } [data-d="3"]{ transition-delay:.24s }
[data-d="4"]{ transition-delay:.32s } [data-d="5"]{ transition-delay:.40s }

/* layouts */
.pain-pad{ display:grid; grid-template-columns:1fr 1fr; gap:5vw; align-items:center; }
.approach-pad{ display:grid; grid-template-columns:1.05fr .95fr; gap:5vw; align-items:center; }
.t-thread{ min-height:240px; display:flex; align-items:center; justify-content:center; }
.atlas{ display:flex; flex-direction:column; gap:11px; margin-top:24px; }
.atlas .step{ display:flex; align-items:baseline; gap:14px; border-top:1px solid rgba(110,19,32,.16); padding-top:10px; }
.atlas .k{ font-family:'Paul Slab',serif; font-weight:700; color:var(--red); font-size:24px; width:1.3ch; }
.atlas .tt{ font-family:'Jost',sans-serif; font-size:13px; color:#8a3a45; }
.atlas .tt b{ text-transform:uppercase; letter-spacing:.13em; font-weight:600; color:var(--wine); }

/* Approach · The Loom: four hands (el método, sin precio; puente al pricing) */
/* Approach · el tejido que se cose detrás del copy (lo anima js/loom.js) */
.loom-weave{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.loom-weave line{ fill:none; stroke-width:2.5; stroke-linecap:round; stroke-dasharray:4 16; }
.loom-weave .red{ stroke:var(--red); opacity:.42; }
.loom-weave .gold{ stroke:var(--gold); opacity:.66; }
/* tarjeta blanca: el contenido flota sobre el tejido; la costura se ve en los márgenes */
.loom-pad{ position:relative; z-index:1; display:flex; flex-direction:column; gap:clamp(20px,3vh,38px);
  width:min(1080px,88vw); background:#fff; border-radius:22px; box-shadow:0 28px 80px rgba(44,10,16,.16);
  padding:clamp(30px,4.2vh,58px) clamp(32px,4.6vw,64px); }
/* Cabecera a 2 columnas: el bloque de texto (label+titulo+lead, hasta "...the loom") a la
   izquierda; las stats se mudan al hueco derecho, CENTRADAS en vertical frente a las manos.
   Asi mejora la jerarquia (titular limpio arriba, dato de respaldo aparte a la derecha). */
.loom-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); column-gap:clamp(30px,3.6vw,56px); align-items:center; }
.loom-headtext{ max-width:60ch; }
.loom-title{ font-family:'Paul Slab',serif; font-weight:700; text-transform:uppercase; color:var(--bright); line-height:.96; font-size:clamp(34px,5vw,68px); margin:.18em 0 0; }
.loom-title em{ display:block; font-style:normal; color:var(--wine); font-weight:400; letter-spacing:.005em; font-size:.34em; line-height:1.1; margin-top:.55em; }
.loom-lead{ font-family:'Jost',sans-serif; font-weight:300; font-size:clamp(15px,1.4vw,19px); line-height:1.6; color:#8a3a45; max-width:60ch; margin:14px 0 0; }
.loom-stats{ font-family:'Jost',sans-serif; font-size:clamp(13px,1.2vw,16px); line-height:1.6; color:#8a3a45; max-width:42ch; margin:0; }
.loom-stats b{ font-weight:600; color:var(--red); }
.loom-stats span{ opacity:.6; font-size:.85em; }
/* Tesis del metodo: linea completa a TODO el ancho, debajo de las dos columnas (cabecera + stats)
   y antes de las manos. Una sola linea (nowrap) en escritorio; en movil se permite que envuelva. */
.loom-thesis{ font-family:'Jost',sans-serif; font-weight:300; font-size:clamp(14px,1.5vw,21px); line-height:1.4; color:var(--wine); margin:0; white-space:nowrap; }
.loom-thesis b{ font-weight:600; color:var(--red); }
@media (max-width:900px){ .loom-thesis{ white-space:normal; } }
.hands{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.2vw,34px); }
.hand{ border-top:2px solid var(--red); padding-top:13px; }
.hand-n{ font-family:'Paul Slab',serif; font-weight:700; font-size:13px; color:var(--red); opacity:.7; }
.hand h3{ font-family:'Paul Slab',serif; font-weight:700; text-transform:uppercase; color:var(--wine); font-size:clamp(19px,1.7vw,26px); line-height:1; margin:.18em 0 .12em; }
.hand-role{ font-family:'Jost',sans-serif; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--red); opacity:.85; margin:0 0 .7em; }
.hand-get{ font-family:'Jost',sans-serif; font-size:13.5px; line-height:1.5; color:#8a3a45; margin:0; }
.loom-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; border-top:1px solid rgba(110,19,32,.16); padding-top:20px; }
.loom-cta p{ flex:1 1 360px; font-family:'Jost',sans-serif; font-size:clamp(14px,1.3vw,17px); line-height:1.5; color:var(--wine); margin:0; max-width:62ch; }
.loom-link{ font-family:'Jost',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:14px; color:#fff; background:var(--wine); padding:14px 26px; border-radius:30px; text-decoration:none; white-space:nowrap; transition:background .2s; }
.loom-link:hover{ background:var(--red); }
@media (max-width:820px){ .hands{ grid-template-columns:repeat(2,1fr); row-gap:22px; } }
@media (max-width:520px){ .hands{ grid-template-columns:1fr; } }

@media (max-width:820px){ .pain-pad,.approach-pad{ grid-template-columns:1fr; gap:6vh; } }
@media (prefers-reduced-motion:reduce){ .rise{ opacity:1; transform:none; transition:none; } }

/* Pain: el abanico de 5 dolores (estilos al final del archivo) */

/* Approach: el rojo esta de entrada; el dorado nace y se entrelaza segun --p */
#approach .weave .red{ stroke-dasharray:300; stroke-dashoffset:calc(300 - 300 * var(--p,0)); }
#approach .weave .gold{ opacity:calc(var(--p,0)); stroke-dasharray:300; stroke-dashoffset:calc(300 - 300 * var(--p,0)); }

/* Approach · VIAJE DE SCROLL (motion on): la seccion mide 300vh y su inner se ancla; el scroll
   recorre el metodo (--j 0..1 desde scroll.js): el tejido progresa atado al scroll y las cuatro
   manos se encienden una a una (las clases .jstep/.lit las pone js/loom.js). Con motion off la
   seccion vuelve a ser una tarjeta normal de 100vh y las manos se revelan como siempre. */
[data-motion="on"] #approach{ position:relative; top:auto; height:240vh; }
[data-motion="on"] #approach .inner{ position:sticky; top:0; height:100vh; }
/* la camara ORBITA el telar: el tejido de fondo rota despacio y se acerca segun avanza el viaje
   (--j); el contenido (loom-pad) queda quieto. El scale base 1.08 cubre las esquinas al rotar. */
[data-motion="on"] #approach .loom-weave{ transform:rotate(calc(var(--j,0) * 2.5deg)) scale(calc(1.08 + var(--j,0) * 0.05)); will-change:transform; }
[data-motion="on"] #approach .hand.jstep{ opacity:.32; transform:translateY(14px); border-top-color:rgba(193,37,48,.25);
  transition:opacity .7s var(--ease), transform .7s var(--ease), border-top-color .7s var(--ease); }
[data-motion="on"] #approach .hand.jstep.lit{ opacity:1; transform:none; border-top-color:var(--red); }

/* ----- Fase 2: About, Pricing, Contact ----- */
.lead{ font-family:'Jost',sans-serif; font-weight:300; font-size:clamp(17px,1.9vw,24px); line-height:1.5; max-width:34ch; color:var(--wine); margin-top:24px; }

/* About · McKinsey exhibit (The Weaver) */
.weaver{ display:flex; flex-direction:column; gap:clamp(10px,1.7vh,22px); text-align:left; }
.wx-head{ display:grid; grid-template-columns:1fr auto; gap:clamp(20px,4vw,56px); align-items:start; }
.wx-headtext{ min-width:0; }
.wx-name{ font-family:'Paul Slab',serif; font-weight:700; font-size:clamp(16px,1.55vw,22px); line-height:1; color:var(--red); margin:9px 0 0; }
/* LinkedIn junto al nombre (el ancla de identidad del exhibit) */
.wx-li{ display:inline-flex; vertical-align:-2px; margin-left:10px; color:var(--red); opacity:.7; transition:opacity .2s, color .2s, transform .2s; }
.wx-li svg{ width:17px; height:17px; }
.wx-li:hover{ color:var(--wine); opacity:1; transform:translateY(-1px); }
.wx-title{ font-family:'Paul Slab',serif; font-weight:700; color:var(--wine); line-height:1.04; font-size:clamp(25px,3vw,45px); margin:.22em 0 0; text-wrap:balance; }

.wx-exhibit{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid rgba(110,19,32,.18); border-bottom:1px solid rgba(110,19,32,.18); padding:clamp(13px,2vh,22px) 0; }
.wx-col{ display:flex; flex-direction:column; gap:6px; padding:0 clamp(13px,1.5vw,22px); }
.wx-col:first-child{ padding-left:0; }
.wx-col:last-child{ padding-right:0; }
.wx-col + .wx-col{ border-left:1px solid rgba(110,19,32,.12); }
.wx-num{ font-family:'Paul Slab',serif; font-weight:700; font-size:13px; color:var(--red); opacity:.7; letter-spacing:.04em; }
.wx-clabel{ font-family:'Jost',sans-serif; font-weight:600; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--wine); margin:1px 0 3px; }
.wx-route{ font-family:'Paul Slab',serif; font-weight:700; font-size:clamp(14px,1.25vw,17px); line-height:1.25; color:var(--wine); margin:0; }
.wx-route i{ font-style:normal; color:var(--gold); padding:0 1px; }
.wx-tags{ font-family:'Paul Slab',serif; font-weight:700; font-size:clamp(13px,1.05vw,15px); line-height:1.3; color:var(--wine); margin:0; }
.wx-brands{ font-family:'Jost',sans-serif; font-weight:300; font-size:clamp(12.5px,1vw,14px); line-height:1.55; color:#5d2730; margin:0; }
.wx-brands b{ font-weight:600; color:var(--wine); }
.tick{ font-family:'Jost',sans-serif; font-weight:600; font-size:10px; letter-spacing:.08em; color:var(--gold); white-space:nowrap; }
.wx-note{ font-family:'Jost',sans-serif; font-weight:300; font-size:clamp(13px,1.1vw,15px); line-height:1.45; color:#8a3a45; margin:5px 0 0; }

.wx-synth{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(20px,3vw,46px); align-items:center; text-align:left; }
.wx-synth-h{ font-family:'Paul Slab',serif; font-weight:700; font-size:clamp(18px,1.9vw,28px); color:var(--bright); line-height:1.08; margin:0; }
.wx-synth-b{ font-family:'Jost',sans-serif; font-weight:300; font-size:clamp(12.5px,1.1vw,15px); line-height:1.5; color:#8a3a45; margin:0; padding-left:clamp(20px,3vw,46px); border-left:1px solid rgba(110,19,32,.14); }

.wx-role{ display:flex; align-items:baseline; gap:clamp(14px,2vw,28px); border:1px solid rgba(189,139,35,.45); border-left:3px solid var(--gold); border-radius:4px; padding:clamp(11px,1.6vh,17px) clamp(16px,2vw,26px); background:rgba(189,139,35,.05); }
.wx-role-tag{ flex:0 0 auto; font-family:'Jost',sans-serif; font-weight:700; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.wx-role p{ margin:0; font-family:'Jost',sans-serif; font-weight:300; font-size:clamp(13px,1.2vw,16px); line-height:1.5; color:var(--wine); }

.wx-funfact{ display:flex; align-items:baseline; gap:clamp(12px,1.6vw,22px); }
.wx-ff-tag{ flex:0 0 auto; font-family:'Jost',sans-serif; font-weight:700; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--red); }
.wx-funfact p{ margin:0; font-family:'Jost',sans-serif; font-weight:300; font-size:clamp(11.5px,1vw,13.5px); line-height:1.5; color:#8a3a45; }
.wx-funfact b{ color:var(--wine); font-weight:600; }

.wx-source{ font-family:'Jost',sans-serif; font-style:italic; font-size:clamp(13px,1.1vw,15px); color:#8a3a45; opacity:.8; margin:0; text-align:center; }

/* Unmasking editorial (motion on): el retrato se ABRE con esquinas que se enderezan al entrar.
   El estado final usa inset negativo (animable) para no recortar nada alrededor. */
[data-motion="on"] .heads{ clip-path:inset(18% round 32px); transition:clip-path 1.15s var(--ease) .3s; }
[data-motion="on"] .is-in .heads{ clip-path:inset(-2% round 0px); }

/* floating heads · wink animation + print (imprenta) effect */
.wx-portrait{ position:relative; width:clamp(168px,16.5vw,256px); aspect-ratio:600/669; max-height:none; margin:0; flex:0 0 auto; align-self:start; }
.heads{ position:relative; width:100%; height:100%; transform:rotate(5deg); transform-origin:center; }
.heads .head{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; will-change:opacity; }
.head-wink{ opacity:0; }
.is-in .head-wink{ animation:wink 4.4s var(--ease) infinite; }
@keyframes wink{ 0%,88%,100%{ opacity:0 } 90%,95%{ opacity:1 } }
.heads.noimg{ background:linear-gradient(150deg,#cfcdcb,#9a9896); border-radius:3px; }
.heads.noimg .head{ display:none; }
@media (prefers-reduced-motion:reduce){ .is-in .head-wink{ animation:none; } }

/* doodles reales (del sheet): en loop, uno a la vez (se traza, se queda, se va; entra el siguiente) */
/* la tarjeta del About NO recorta (capa de doodles libre, sin caja imaginaria que corte) */
#about .inner{ overflow:visible; }
.dood{ position:absolute; pointer-events:none; z-index:6; display:block; height:auto; --r:0deg; opacity:0; transform:rotate(var(--r)) scale(.5); transform-origin:center; }
.dood-bulb{    width:24%; top:13%;  left:-7%;   --r:-7deg; }
.dood-heart{   width:18%; top:52%;  left:-10%;  --r:-4deg; }
.dood-speech{  width:30%; top:14%;  right:-7%;  --r:4deg; }
.dood-arrow{   width:28%; bottom:8%; right:-9%; --r:2deg; }
.dood-sorpres{ width:15%; top:40%;  right:-14%; --r:6deg; }
@media (prefers-reduced-motion:no-preference){
  .is-in .dood-bulb{    animation:dood0 7.5s var(--ease) infinite; }
  .is-in .dood-heart{   animation:dood1 7.5s var(--ease) infinite; }
  .is-in .dood-speech{  animation:dood2 7.5s var(--ease) infinite; }
  .is-in .dood-arrow{   animation:dood3 7.5s var(--ease) infinite; }
  .is-in .dood-sorpres{ animation:dood4 7.5s var(--ease) infinite; }
}
@media (prefers-reduced-motion:reduce){ .dood-bulb{ opacity:1; transform:rotate(var(--r)) scale(1); } .dood-heart,.dood-speech,.dood-arrow,.dood-sorpres{ display:none; } }
@keyframes dood0{ 0%{opacity:0;transform:rotate(calc(var(--r) - 12deg)) scale(.5)} 2%{opacity:.45;transform:rotate(calc(var(--r) - 6deg)) scale(.8)} 4%{opacity:1} 6%{transform:rotate(calc(var(--r) + 5deg)) scale(1.12)} 10%{transform:rotate(var(--r)) scale(1)} 16%{opacity:1;transform:rotate(var(--r)) scale(1)} 20%{opacity:0;transform:rotate(calc(var(--r) + 7deg)) scale(.7)} 100%{opacity:0;transform:rotate(calc(var(--r) + 7deg)) scale(.7)} }
@keyframes dood1{ 0%,20%{opacity:0;transform:rotate(calc(var(--r) - 12deg)) scale(.5)} 22%{opacity:.45;transform:rotate(calc(var(--r) - 6deg)) scale(.8)} 24%{opacity:1} 26%{transform:rotate(calc(var(--r) + 5deg)) scale(1.12)} 30%{transform:rotate(var(--r)) scale(1)} 36%{opacity:1;transform:rotate(var(--r)) scale(1)} 40%{opacity:0;transform:rotate(calc(var(--r) + 7deg)) scale(.7)} 100%{opacity:0;transform:rotate(calc(var(--r) + 7deg)) scale(.7)} }
@keyframes dood2{ 0%,40%{opacity:0;transform:rotate(calc(var(--r) - 12deg)) scale(.5)} 42%{opacity:.45;transform:rotate(calc(var(--r) - 6deg)) scale(.8)} 44%{opacity:1} 46%{transform:rotate(calc(var(--r) + 5deg)) scale(1.12)} 50%{transform:rotate(var(--r)) scale(1)} 56%{opacity:1;transform:rotate(var(--r)) scale(1)} 60%{opacity:0;transform:rotate(calc(var(--r) + 7deg)) scale(.7)} 100%{opacity:0;transform:rotate(calc(var(--r) + 7deg)) scale(.7)} }
@keyframes dood3{ 0%,60%{opacity:0;transform:rotate(calc(var(--r) - 12deg)) scale(.5)} 62%{opacity:.45;transform:rotate(calc(var(--r) - 6deg)) scale(.8)} 64%{opacity:1} 66%{transform:rotate(calc(var(--r) + 5deg)) scale(1.12)} 70%{transform:rotate(var(--r)) scale(1)} 76%{opacity:1;transform:rotate(var(--r)) scale(1)} 80%{opacity:0;transform:rotate(calc(var(--r) + 7deg)) scale(.7)} 100%{opacity:0;transform:rotate(calc(var(--r) + 7deg)) scale(.7)} }
@keyframes dood4{ 0%,80%{opacity:0;transform:rotate(calc(var(--r) - 12deg)) scale(.5)} 82%{opacity:.45;transform:rotate(calc(var(--r) - 6deg)) scale(.8)} 84%{opacity:1} 86%{transform:rotate(calc(var(--r) + 5deg)) scale(1.12)} 90%{transform:rotate(var(--r)) scale(1)} 96%{opacity:1;transform:rotate(var(--r)) scale(1)} 100%{opacity:0;transform:rotate(calc(var(--r) + 7deg)) scale(.7)} }

/* Pricing */
.pricing-pad{ text-align:center; max-width:1320px; position:relative; z-index:1; }
.gold-thread{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
#pricing .head{ display:flex; flex-direction:column; align-items:center; gap:7px; margin-bottom:62px; }
#pricing .head>*{ margin:0; }
/* pricing · oferta The Loom Sprint */
.p-intro{ font-family:'Jost',sans-serif; font-weight:300; font-size:clamp(15px,1.5vw,20px); line-height:1.5; color:#8a3a45; max-width:80ch; margin:8px auto 0; text-wrap:balance; }
.offer{ display:flex; flex-direction:column; gap:10px; text-align:left; }

/* pricing · pestañas claras (Position, Build, Monitoring) + tabla de entregables */
.tabbar{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:0; }
.tab{ flex:1 1 auto; min-width:140px; display:flex; flex-direction:column; align-items:flex-start; gap:3px; background:#fff; border:1px solid rgba(44,10,16,.14); border-bottom:none; border-radius:12px 12px 0 0; padding:11px 22px; cursor:pointer; text-align:left; transition:background .2s, border-color .2s, color .2s, transform .15s var(--ease); }
.thead{ display:flex; align-items:baseline; gap:9px; }
.tab .tn{ font-family:'Paul Slab',serif; font-weight:700; color:var(--red); font-size:14px; opacity:.7; }
.tab .tname{ font-family:'Paul Slab',serif; font-weight:700; text-transform:uppercase; color:var(--wine); font-size:clamp(20px,1.9vw,28px); line-height:1; }
.tab small{ font-family:'Jost',sans-serif; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#8a3a45; opacity:.8; }
.tab:active{ transform:scale(.97); }
.tab.active, .tab:hover{ background:var(--red); border-color:var(--red); }
.tab.active .tn, .tab.active .tname, .tab.active small, .tab:hover .tn, .tab:hover .tname, .tab:hover small{ color:#fff; }
.tab.active .tn, .tab.active small, .tab:hover .tn, .tab:hover small{ opacity:.85; }
.panels{ border:1px solid rgba(189,139,35,.45); border-radius:0 14px 14px 14px; padding:clamp(20px,2.2vw,34px); background:#fff; box-shadow:0 18px 50px rgba(189,139,35,.12); min-height:clamp(250px,26vh,310px); }
.panel{ display:none; }
.panel.active{ display:block; animation:panel-in .5s var(--ease); }
@keyframes panel-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
/* filas de entregables: entran en cascada al activar la pestana (motion on) */
[data-motion="on"] .panel.active .recv tr{ animation:row-in .5s var(--ease) backwards; }
[data-motion="on"] .panel.active .recv tr:nth-child(1){ animation-delay:.06s }
[data-motion="on"] .panel.active .recv tr:nth-child(2){ animation-delay:.12s }
[data-motion="on"] .panel.active .recv tr:nth-child(3){ animation-delay:.18s }
[data-motion="on"] .panel.active .recv tr:nth-child(4){ animation-delay:.24s }
[data-motion="on"] .panel.active .recv tr:nth-child(5){ animation-delay:.30s }
[data-motion="on"] .panel.active .recv tr:nth-child(6){ animation-delay:.36s }
@keyframes row-in{ from{ opacity:0; transform:translateY(9px); } }
.panel-lead{ font-family:'Jost',sans-serif; font-weight:300; font-size:clamp(15px,1.45vw,20px); line-height:1.5; color:#8a3a45; max-width:78ch; margin:0 0 16px; }
.recv{ width:100%; border-collapse:collapse; }
.recv tr{ border-top:1px solid rgba(44,10,16,.1); }
.recv tr:first-child{ border-top:none; }
.recv th{ text-align:left; vertical-align:top; width:32%; padding:9px 22px 9px 0; font-family:'Paul Slab',serif; font-weight:700; color:var(--wine); font-size:clamp(14px,1.25vw,18px); line-height:1.2; }
.recv td{ vertical-align:top; padding:9px 0; font-family:'Jost',sans-serif; font-size:clamp(14px,1.15vw,16.5px); line-height:1.45; color:#5d2730; }
/* pantallas BAJAS de escritorio: el Sprint compacta para caber entero en un scroll.
   Con el detalle del precio en el modal (#sprintdlg) basta UN escalon. */
@media (min-width:821px) and (max-height:900px){
  #pricing .head{ margin-bottom:clamp(12px,2vh,24px); }
  .p-intro{ font-size:clamp(13px,1.15vw,16px); margin-top:4px; }
  .panels{ min-height:0; padding:clamp(12px,1.6vw,20px); }
  .recv th, .recv td{ padding-top:4px; padding-bottom:4px; }
  .panel-lead{ margin-bottom:8px; font-size:clamp(13px,1.15vw,16px); }
  .tab{ padding:8px 18px; }
  .tab .tname{ font-size:clamp(17px,1.6vw,22px); }
  .offer{ gap:6px; }
  .sprint-cta{ padding:8px clamp(14px,1.6vw,20px); }
}

@media (max-width:720px){
  /* pestanas en filas completas: tres columnas no caben con MONITORING en Paul Slab */
  .tab{ min-width:0; flex:1 1 100%; flex-direction:row; align-items:baseline; justify-content:space-between; gap:8px; border-radius:10px; border-bottom:1px solid rgba(44,10,16,.14); padding:10px 16px; }
  .tab .tname{ font-size:17px; }
  .tabbar{ margin-bottom:8px; }
  .panels{ border-radius:14px; }
  .recv th{ width:auto; display:block; padding:10px 0 2px; }
  .recv td{ display:block; padding:0 0 12px; }
}
.proj-climax{ font-family:'Jost',sans-serif; font-size:clamp(12.5px,1.25vw,15px); line-height:1.5; color:var(--wine); background:rgba(189,139,35,.1); border:1px solid rgba(189,139,35,.22); border-radius:12px; padding:10px 14px; margin:0; }
/* Fila del precio + CTA (reemplaza a la banda exhibit .sprint-x): el PRECIO es el disparador
   del modal del detalle. Superficie SOLIDA a proposito: los hilos de goldweave pasan por
   detras y el precio tiene que leerse siempre (contraste primero, adorno despues). */
.sprint-cta{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:clamp(16px,2.6vw,38px); background:#fff; border:1px solid rgba(189,139,35,.45);
  border-radius:14px; box-shadow:0 18px 50px rgba(189,139,35,.1);
  padding:clamp(12px,1.8vh,18px) clamp(16px,2vw,26px); }
/* la fila tambien se abre al entrar (hereda el gesto de unmasking de la seccion) */
[data-motion="on"] .sprint-cta{ clip-path:inset(10% 4% round 26px); transition:clip-path 1s var(--ease) .35s; }
[data-motion="on"] .is-in .sprint-cta{ clip-path:inset(-20px round 0px); }
.price-flip{ appearance:none; background:none; border:0; margin:0; padding:6px 2px; cursor:pointer;
  display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left;
  transition:transform .2s var(--ease); }
.price-flip:hover{ transform:translateY(-1px); }
.price-flip:hover .price-more{ color:var(--wine); text-decoration-color:currentColor; }
.price-flip:focus-visible{ outline:2px solid var(--red); outline-offset:4px; border-radius:8px; }
/* el ancla de mercado pegada al numero: hace el trabajo de justificar sin explicar */
.sc-anchor{ font-family:'Jost',sans-serif; font-size:11.5px; letter-spacing:.04em; color:#8a3a45; opacity:.85; }
.price-more{ font-family:'Jost',sans-serif; font-weight:600; font-size:12px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--red); text-decoration:underline; text-underline-offset:4px;
  text-decoration-color:rgba(193,37,48,.35); transition:color .2s, text-decoration-color .2s; }
/* la garantia VISIBLE junto al precio (reversion de riesgo a la vista, no en un cajon) */
.sc-gx{ font-family:'Jost',sans-serif; font-size:13.5px; line-height:1.5; color:#5d2730; margin:0;
  max-width:36ch; text-align:left; border-left:1px solid rgba(110,19,32,.12); padding-left:clamp(14px,1.8vw,26px); }
.sc-gx b{ font-weight:600; color:var(--wine); }
@media (max-width:720px){
  .sprint-cta{ flex-direction:column; align-items:flex-start; gap:14px; }
  .sc-gx{ border-left:0; border-top:1px solid rgba(110,19,32,.12); padding-left:0; padding-top:12px; max-width:none; }
}
.price-line{ display:flex; align-items:baseline; gap:8px; }
.offer .price{ font-family:'Paul Slab',serif; font-weight:700; font-size:clamp(34px,3.4vw,48px); color:var(--gold); line-height:1; }
.price-tag{ font-family:'Jost',sans-serif; font-weight:600; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); border:1px solid rgba(189,139,35,.5); border-radius:12px; padding:3px 10px; white-space:nowrap; }
/* prueba prestada (NYSE, pase Hormozi): vive en el pie del modal, sobre el CTA */
.price-proof{ font-family:'Jost',sans-serif; font-size:12px; line-height:1.5; color:#8a3a45; opacity:.85; max-width:34ch; margin:0; text-align:center; }

/* Modal del precio explicado (#sprintdlg): tarjeta editorial sobre backdrop vino que entra
   con un FLIP (guino a las cartas del Pain). El dialog no scrollea; scrollea .sd-wrap
   (con data-lenis-prevent en el HTML), asi la X queda fija en la esquina. */
#sprintdlg{ border:0; border-radius:18px; padding:0; width:min(640px,92vw);
  background:#fffdf9; color:#5d2730; box-shadow:0 60px 140px rgba(44,10,16,.4); overflow:hidden; }
#sprintdlg::backdrop{ background:rgba(44,10,16,.52); backdrop-filter:blur(3px); }
@media (prefers-reduced-motion:no-preference){
  #sprintdlg[open]{ animation:sd-flip .55s var(--ease); }
  @keyframes sd-flip{
    from{ opacity:0; transform:perspective(1200px) rotateX(-16deg) translateY(26px) scale(.96); }
    60%{ opacity:1; }
    to{ transform:none; }
  }
}
.sd-wrap{ max-height:min(84vh,84svh); overflow-y:auto; overscroll-behavior:contain; padding:clamp(26px,4vw,48px); text-align:left; }
.sd-close{ position:absolute; top:12px; right:12px; z-index:2; width:44px; height:44px; border-radius:50%;
  background:#fff; border:1px solid rgba(44,10,16,.12); color:var(--wine); font-size:26px; line-height:1;
  cursor:pointer; box-shadow:0 6px 18px rgba(44,10,16,.12); transition:background .2s, color .2s, border-color .2s; }
.sd-close:hover{ background:var(--red); border-color:var(--red); color:#fff; }
.sd-close:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }
.sd-kicker{ font-family:'Jost',sans-serif; font-weight:700; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--red); margin:0; }
.sd-title{ font-family:'Paul Slab',serif; font-weight:700; color:var(--wine);
  font-size:clamp(28px,3.4vw,40px); line-height:1.05; margin:4px 0 10px; }
.sd-anchor{ font-family:'Jost',sans-serif; font-size:12.5px; letter-spacing:.04em; color:#8a3a45; opacity:.85; margin:0 0 6px; }
#sprintdlg .price{ font-family:'Paul Slab',serif; font-weight:700; font-size:clamp(36px,4.6vw,50px); color:var(--gold); line-height:1; }
.sd-head .price-line{ margin-bottom:8px; }
.sd-note{ font-family:'Jost',sans-serif; font-size:14px; line-height:1.55; color:#8a3a45; margin:0; max-width:56ch; }
.sd-block{ border-top:1px solid rgba(44,10,16,.12); margin-top:clamp(16px,2.4vh,24px); padding-top:clamp(12px,1.8vh,18px); }
.sd-h{ display:flex; align-items:baseline; gap:9px; margin:0 0 8px; }
.sd-h .tname{ font-family:'Paul Slab',serif; font-weight:700; text-transform:uppercase; color:var(--wine);
  font-size:clamp(17px,1.8vw,21px); line-height:1; }
.sd-term{ font-family:'Jost',sans-serif; font-size:14.5px; line-height:1.6; color:#5d2730; margin:0 0 10px; max-width:76ch; }
.sd-term b{ font-weight:600; color:var(--wine); }
.sd-term:last-child{ margin-bottom:0; }
#sprintdlg .proj-climax{ margin-top:clamp(16px,2.4vh,24px); font-size:14px; }
.sd-foot{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:clamp(16px,2.4vh,24px); }
@media (max-width:720px){
  .sd-wrap{ padding:22px 18px; }
}

/* Contact · postal puesta SOBRE la tarjeta blanca */
.contact-pad{ position:relative; display:flex; align-items:center; justify-content:center; text-align:left; }
.postcard{ position:relative; width:100%; max-width:900px; min-height:clamp(360px,52vh,500px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,2.6vw,40px); align-items:center; background:#f6dbe1; border:1px solid rgba(110,19,32,.14); border-radius:5px; padding:clamp(30px,3.4vh,50px) clamp(30px,3.2vw,48px); box-shadow:0 40px 100px rgba(44,10,16,.13), inset 0 0 0 1px rgba(255,255,255,.4); transform:rotate(-5deg); }
/* el reveal (.rise) no debe enderezar la postal: conservamos el giro en ambos estados */
.postcard.rise{ transform:translateY(42px) rotate(-5deg); }
.is-in .postcard.rise{ transform:rotate(-5deg); }
/* transicion de la postal (la usa el reveal .rise al entrar en viewport) */
.postcard{ transition:transform 1.05s var(--ease), opacity 1.05s var(--ease); }
.postcard::before{ content:""; position:absolute; left:50%; top:10%; bottom:10%; transform:translateX(-50%); border-left:2px dashed rgba(110,19,32,.22); pointer-events:none; }
/* padding-top da aire para que el sticker (esquina superior) no pise el wordmark */
.pc-left{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(10px,1.5vh,18px); height:100%; padding-top:clamp(44px,6vh,78px); }
.mw-anim{ display:block; width:100%; height:clamp(150px,24vh,250px); }
.pc-tag{ font-family:'Jost',sans-serif; font-weight:400; font-size:clamp(12px,1.05vw,14.5px); letter-spacing:.02em; color:var(--wine); opacity:.85; text-align:center; margin:0; }
.pc-social{ display:inline-flex; color:var(--wine); opacity:.75; transition:opacity .2s, color .2s, transform .2s; }
.pc-social svg{ width:23px; height:23px; }
.pc-social:hover{ color:var(--red); opacity:1; transform:translateY(-1px); }
.pc-stamp{ position:absolute; top:clamp(6px,1.2vh,18px); left:clamp(-8px,-0.6vw,2px); width:clamp(72px,7vw,98px); height:auto; transform:rotate(-5deg); z-index:3; }
.pc-right{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }

/* Contact calendar-first: invitacion + boton que abre el popup de Cal.com (reemplaza el form demo) */
.cbook{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; max-width:420px; }
.cbook-sub{ font-family:'Jost',sans-serif; font-weight:300; font-size:clamp(14px,1.15vw,16px); line-height:1.55; color:var(--wine); opacity:.9; margin:0; }

.cform-h{ font-family:'Paul Slab',serif; font-weight:700; font-size:clamp(26px,2.8vw,40px); color:var(--wine); line-height:1; margin:0 0 6px; }
.cform-btn{ align-self:flex-start; margin-top:6px; background:var(--bright); color:#fff; border:none; border-radius:26px; padding:13px 30px; font-family:'Jost',sans-serif; font-weight:600; font-size:13px; letter-spacing:.06em; cursor:pointer; transition:background .2s; }
.cform-btn:hover{ background:var(--wine); }

@media (max-width:820px){
  .wx-head{ grid-template-columns:1fr; gap:18px; }
  .wx-portrait{ order:-1; width:clamp(96px,28vw,140px); }
  .wx-exhibit{ grid-template-columns:1fr; gap:0; }
  .wx-col{ padding:14px 0; }
  .wx-col:first-child{ padding-top:0; }
  .wx-col + .wx-col{ border-left:0; border-top:1px solid rgba(110,19,32,.12); }
  .wx-role{ flex-direction:column; gap:6px; }
  .wx-synth{ grid-template-columns:1fr; gap:10px; }
  .wx-synth-b{ padding-left:0; border-left:0; }
  .wx-funfact{ flex-direction:column; gap:5px; }
  .postcard{ grid-template-columns:1fr; gap:22px; }
  .postcard::before{ display:none; }
}

/* ----- Pain: abanico de 5 dolores (seccion anclada con zona de scrub) ----- */
/* Pain: tarjeta normal (.card, 100vh); el abanico se navega con flechas, no con scroll */
/* Titular en pastilla blanca: pequena, solo envuelve el titulo. Va por encima de la madeja
   (z30 > enredo z3), asi el enredo queda DETRAS del titulo y no se le cae encima. Ancho
   shrink-to-fit (left:50% + translateX, sin right) para que la pastilla abrace el texto. */
.pain-head{ position:absolute; top:7vh; left:50%; transform:translateX(-50%); z-index:30; text-align:center; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:#fff; border-radius:20px; padding:23px 87px; border:1px solid rgba(44,10,16,.05); box-shadow:0 16px 46px rgba(44,10,16,.12); }
.pain-label{ margin:0; font-family:'Jost',sans-serif; font-size:12px; letter-spacing:.34em; text-transform:uppercase; font-weight:500; color:var(--wine); opacity:.85; }
.pain-hook{ margin:0; font-family:'Paul Slab',serif; font-weight:700; text-transform:none; color:var(--wine); font-size:clamp(19px,2.5vw,32px); line-height:1.02; }
/* z-index PROPIO: el transform del parallax convierte a .fan en stacking context y sin esto
   las cartas (z100 internas) caian DETRAS del enredo (z3) y la bola (z4). No quitar. */
.fan{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:10; }
.pcard{ position:absolute; top:50%; left:50%; width:400px; height:490px; z-index:10; will-change:transform; perspective:1400px; cursor:pointer; transition:transform .55s var(--ease), opacity .4s var(--ease); }
.pc-inner{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .75s var(--ease); }
.pcard.flipped .pc-inner{ transform:rotateY(180deg); }
.pc-face{ position:absolute; inset:0; backface-visibility:hidden; border-radius:22px; box-shadow:0 18px 50px rgba(44,10,16,.18); overflow:hidden; }
.pc-front{ background:#fff; border:1px solid rgba(44,10,16,.08); }
.pcard.active .pc-front{ background:linear-gradient(160deg,#e01515,#a60000); border-color:transparent; box-shadow:0 30px 70px rgba(110,19,32,.4); }
#pain .pnum{ position:absolute; top:20px; right:28px; z-index:2; font-family:'Paul Slab',serif; font-weight:700; font-size:15px; color:var(--red); opacity:.85; }
#pain .pcard.active .pnum{ color:#fff; }
#pain .ptitle{ display:flex; flex-direction:column; align-items:center; font-family:'Paul Slab',serif; font-weight:700; text-transform:uppercase; color:var(--wine); }
#pain .pcard.active .ptitle{ color:#fff; }
#pain .ptitle .big{ font-size:clamp(46px,5vw,66px); line-height:.84; }
#pain .ptitle .mid{ font-size:clamp(20px,2.4vw,28px); line-height:1; margin-top:.06em; }
#pain .ptitle .pre{ font-size:13px; line-height:1.2; font-weight:400; letter-spacing:.05em; opacity:.72; }
#pain .psub{ font-family:'Jost',sans-serif; font-size:15px; line-height:1.5; color:#8a3a45; opacity:0; transition:opacity .45s var(--ease); margin-top:18px; }
#pain .pcard.active .psub{ color:#ffd9df; opacity:1; }
.pc-inset{ position:absolute; top:52px; left:28px; right:28px; bottom:52px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:12px; padding:14px; }
#pain .ptitle .quote{ font-size:clamp(15px,1.8vw,21px); line-height:1.12; font-weight:400; text-transform:none; }
/* ajuste ES: las palabras clave del espanol son mas largas y se salian de la tarjeta.
   Solo cuando lang=es (en ingles caben a tamano completo). c4 "matando" -15%, c5 "estrategia" -20%. */
html[lang="es"] #pain .ptitle[data-i18n="pain.c4.title"] .big{ font-size:clamp(39px,4.25vw,56px); }
html[lang="es"] #pain .ptitle[data-i18n="pain.c5.title"] .big{ font-size:clamp(37px,4vw,53px); }
.pc-arrow{ position:absolute; bottom:18px; right:28px; z-index:2; font-family:'Jost',sans-serif; font-size:20px; line-height:1; color:#fff; opacity:0; transition:opacity .4s; }
#pain .pcard.active .pc-arrow{ opacity:.85; }
#pain .flipper{ font-family:'Jost',sans-serif; margin-top:auto; font-size:11px; letter-spacing:.18em; text-transform:uppercase; opacity:0; transition:opacity .45s; color:#fff; }
#pain .pcard.active .pc-front .flipper{ opacity:.85; }
.pc-back{ background:var(--cream); transform:rotateY(180deg); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:38px; }
#pain .pc-back .stat{ font-family:'Jost',sans-serif; font-size:15px; line-height:1.6; color:var(--wine); max-width:30ch; }
#pain .pc-back .stat b{ font-weight:600; color:var(--red); }
#pain .pc-back .flipper{ opacity:.7; color:var(--wine); position:absolute; bottom:24px; left:0; right:0; text-align:center; }
.pain-nav{ position:absolute; bottom:8vh; left:0; right:0; display:flex; justify-content:center; gap:16px; z-index:40; }
.pain-nav button{ width:50px; height:50px; border-radius:50%; border:1px solid rgba(110,19,32,.22); background:#fff; color:var(--wine); font-family:'Jost',sans-serif; font-size:20px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(44,10,16,.12); transition:background .2s, color .2s, opacity .2s, transform .15s var(--ease); }
.pain-nav button:hover{ background:var(--wine); color:#fff; }
.pain-nav button:active{ transform:scale(.9); }
.pain-nav button:disabled{ opacity:.3; cursor:default; box-shadow:none; }

/* Pain · capas separadas: nudo (abajo-izq), bola (borde derecho), lazo largo cruzando por
   abajo. El CSS las posiciona; js/tangle.js traza el lazo (px) y tensa la bola con el scroll. */
.pain-lazo{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; overflow:visible; }
.pain-lazo .edge{ fill:none; stroke:#8c3635; stroke-width:12; stroke-linecap:round; opacity:.85; }
.pain-lazo .core{ fill:none; stroke:#fff; stroke-width:6; stroke-linecap:round; opacity:.85; }
.pain-nudo-bg{ position:absolute; left:-3%; bottom:0; width:48%; height:54%; background:#fff; z-index:2; pointer-events:none; }
.pain-enredo{ position:absolute; left:-3%; bottom:0; width:82%; z-index:3; pointer-events:none; }
.pain-ball{ position:absolute; right:0; bottom:6%; width:20%; z-index:4; pointer-events:none; will-change:transform; }
.pain-ball img{ display:block; width:100%; position:relative; }

@media (max-width:820px){ .pcard{ width:84vw; max-width:380px; } }

/* ----- MOVIL (<=820px): el apilado sticky se DESACTIVA. En pantallas pequenas el contenido es
   mas alto que el viewport y el 100vh + overflow:hidden RECORTABA media seccion (About medida:
   1532px de contenido en 844 de tarjeta). Cada seccion fluye a su altura natural; la baraja 3D,
   el parallax interno y el viaje del Approach son gestos de desktop (scroll.js y loom.js tambien
   lo desactivan por matchMedia). Este bloque va al FINAL a proposito: gana a las reglas de arriba. ----- */
@media (max-width:820px){
  .card{ position:relative; top:auto; height:auto; }
  .card .inner{ height:auto; min-height:100vh; min-height:100svh; padding:9vh 0; }
  /* el Pain si necesita caja fija: su escenario (abanico, nudo, bola, flechas) es absoluto */
  #pain .inner{ height:100vh; height:100svh; padding:0; }
  /* viaje del Approach fuera: seccion normal (loom.js no activa .jstep en movil) */
  [data-motion="on"] #approach{ height:auto; }
  [data-motion="on"] #approach .inner{ position:relative; height:auto; min-height:100svh; }
  /* parallax interno y orbita del telar fuera: sin apilado ni viaje no hay profundidad que ganar */
  [data-motion="on"] .card .pad, [data-motion="on"] #pain .fan, [data-motion="on"] #pain .pain-nav,
  [data-motion="on"] #approach .loom-weave{ transform:none; }
  [data-motion="on"] #pain .pain-head{ transform:translateX(-50%); }
  /* desbordes horizontales: que nada fuerce la caja mas alla del viewport */
  .pad{ min-width:0; box-sizing:border-box; }
  .loom-pad{ width:100%; }
  .wx-route, .wx-tags, .loom-stats, .loom-thesis{ overflow-wrap:break-word; }

  /* El titular del Pain TAPABA el titulo de la tarjeta (medido a 390x844: "LOST" cortado por la
     mitad). Causa: .pain-head lleva padding lateral de 87px, pensado para desktop; en 390px de
     ancho eso deja al texto 112px utiles, asi que el bloque se compone en tiras de dos palabras,
     crece a lo alto y, como su z-index (30) gana al del abanico (10), se sienta encima de la
     carta. Aqui se le devuelve el ancho y se compacta la tipografia para que quepa arriba. */
  .pain-head{ top:78px; width:min(92vw,370px); padding:13px 18px; gap:4px; border-radius:16px; }
  .pain-label{ font-size:10px; letter-spacing:.2em; }
  .pain-hook{ font-size:20px; }
  .pain-hook .h-seo{ font-size:11.5px; margin-top:4px; }
  /* El titular vive en una banda fija entre la pastilla del menu y la carta, asi que el abanico
     baja. Y la carta deja de medir 490px CLAVADOS: en una pantalla corta (medido en 375x667) esos
     490 la empujaban hacia arriba hasta chocar con el titular otra vez. Ahora cede altura cuando
     no la hay, reservando la banda del titular arriba y la del ovillo y las flechas abajo. */
  #pain .pcard{ top:calc(50% + 30px); height:min(490px, calc(100svh - 300px)); }
}

/* ----- Latest project · social proof (UN caso, tratado con aire). Tarjeta entre About y Pricing:
   arco metodo -> quien -> PRUEBA -> oferta. Video auto-alojado a la izquierda (ritmo con el retrato
   de About, que va a la derecha), testimonio a la derecha. El quote usa .rise (no data-lines): es
   prosa en caja mixta, mas robusta que el enmascarado por linea de los titulares. ----- */
.proof-pad{ display:flex; flex-direction:column; gap:clamp(24px,3.6vh,46px); }
.proof-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,4.6vw,74px); align-items:center; }

/* Video: poster de marca + boton de play propio (nada de cromo de terceros).
   VERTICAL 9:16 (el testimonio se grabo con movil). Manda la ALTURA, no el ancho: a 9:16 el ancho
   de columna daria una pieza altisima que no cabe en la tarjeta de 100vh. Por eso max-height y
   width:auto, y se centra en su columna. */
.proof-video{ position:relative; margin:0 auto; border-radius:18px; overflow:hidden; background:var(--wine);
  aspect-ratio:9/16; max-height:min(64vh,540px); width:auto; max-width:100%;
  box-shadow:0 26px 70px rgba(44,10,16,.20); }
.pv-media{ display:block; width:100%; height:100%; object-fit:cover; cursor:pointer; }
.pv-play{ position:absolute; inset:0; margin:auto; width:84px; height:84px; padding:0; border:none; cursor:pointer;
  border-radius:50%; background:rgba(246,231,216,.94); color:var(--wine); display:grid; place-items:center;
  box-shadow:0 8px 30px rgba(44,10,16,.30); transition:transform .25s var(--ease), background .25s var(--ease); }
.pv-play svg{ width:32px; height:32px; margin-left:4px; } /* el triangulo optico un pelo a la derecha */
.pv-play:hover{ transform:scale(1.06); background:#fff; }
.pv-play:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
.proof-video.pv-playing .pv-play{ opacity:0; pointer-events:none; }
.pv-fallback{ display:none; }
/* Degradacion: si el archivo falla, se oculta el video y el quote de al lado ya carga la prueba. */
.proof-video.pv-error{ aspect-ratio:auto; }
.proof-video.pv-error .pv-media, .proof-video.pv-error .pv-play{ display:none; }
.proof-video.pv-error .pv-fallback{ display:block; padding:24px; color:var(--cream);
  font-family:'Jost',sans-serif; font-weight:300; font-size:15px; line-height:1.5; }

/* Testimonio: el pull-quote en Paul Slab es la estrella (la prueba que se LEE aunque nadie de play). */
.proof-quote{ font-family:'Paul Slab',serif; font-weight:700; color:var(--wine); line-height:1.06;
  font-size:clamp(26px,3.1vw,46px); margin:0; letter-spacing:.002em; }
.proof-attr{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px;
  margin-top:clamp(20px,2.8vh,32px); }
.pa-name{ font-family:'Jost',sans-serif; font-weight:600; font-style:normal; font-size:clamp(15px,1.3vw,18px);
  color:var(--red); letter-spacing:.01em; }
.pa-role{ font-family:'Jost',sans-serif; font-weight:300; font-size:clamp(13px,1.1vw,16px); color:#8a3a45; }
.pa-logo{ height:26px; width:auto; max-width:140px; margin-left:auto; opacity:.75;
  filter:grayscale(1); } /* discreto: el logo del cliente no compite con la marca */
/* (Aqui vivia .proof-outcome, la linea de contexto bajo la atribucion. RETIRADA: tres intentos y
   ninguno convencio a Josue. El quote y la atribucion cargan la prueba solos. En el historial de
   git esta el CSS por si algun dia vuelve el slot.) */
/* Enlace a la transcripcion completa: discreto, pero es el que evita que /testimonial quede
   huerfana (una pagina sin enlaces internos no se indexa). */
.proof-more{ margin:clamp(16px,2vh,22px) 0 0; font-family:'Jost',sans-serif; font-size:clamp(13px,1.1vw,15px); }
.proof-more a{ color:var(--red); text-decoration:none; border-bottom:1px solid rgba(193,37,48,.3);
  padding-bottom:2px; transition:border-color .25s var(--ease); }
.proof-more a:hover{ border-bottom-color:var(--red); }

/* Movil: video encima del quote, una sola columna (overrides DESPUES de las base, a proposito). */
@media (max-width:820px){
  .proof-grid{ grid-template-columns:1fr; gap:clamp(24px,4vh,34px); }
  .pa-logo{ margin-left:0; } /* en columna, el logo no se empuja al extremo */
  .proof-video{ max-height:min(46vh,400px); } /* apilado: el video cede altura al quote */
}

/* ----- Footer editorial: cierra el scrollytelling. Fondo wine, texto crema. z6 sobre el hero. ----- */
.site-footer{ position:relative; z-index:6; background:var(--wine); color:var(--cream); padding:clamp(44px,6vh,80px) 6vw clamp(24px,3vh,36px); }
.foot-in{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:clamp(28px,4vw,64px); align-items:start; }
.foot-logo{ display:block; width:clamp(116px,13vw,156px); height:auto; margin:0 0 4px; opacity:.92; }
.foot-line{ font-family:'Jost',sans-serif; font-weight:300; font-size:clamp(13px,1.1vw,15px); margin:8px 0 0; opacity:.9; }
.foot-loc{ font-family:'Jost',sans-serif; font-weight:400; font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin:14px 0 0; opacity:.55; }
.foot-nav{ display:flex; flex-direction:column; gap:11px; }
.foot-nav a{ font-family:'Jost',sans-serif; font-weight:400; font-size:14px; color:var(--cream); text-decoration:none; opacity:.85; transition:opacity .2s,color .2s; width:fit-content; }
.foot-nav a:hover{ opacity:1; color:var(--gold); }
.foot-connect{ display:flex; flex-direction:column; gap:18px; align-items:flex-start; }
.foot-cta{ font-family:'Jost',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:13px; color:var(--wine); background:var(--cream); padding:12px 22px; border-radius:26px; text-decoration:none; transition:background .2s,color .2s; }
.foot-cta:hover{ background:var(--gold); color:#fff; }
.foot-social{ display:flex; gap:14px; }
.foot-social a{ color:var(--cream); opacity:.8; transition:opacity .2s,color .2s,transform .2s; display:inline-flex; }
.foot-social svg{ width:22px; height:22px; }
.foot-social a:hover{ opacity:1; color:var(--gold); transform:translateY(-1px); }
.foot-legal{ max-width:1180px; margin:clamp(32px,4vh,52px) auto 0; padding-top:20px; border-top:1px solid rgba(246,231,216,.18); display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; justify-content:space-between; }
.foot-copy{ font-family:'Jost',sans-serif; font-size:12px; margin:0; opacity:.55; }
.foot-legal-links{ display:flex; gap:20px; }
.foot-legal-links a{ font-family:'Jost',sans-serif; font-size:12px; color:var(--cream); text-decoration:none; opacity:.7; transition:opacity .2s,color .2s; }
.foot-legal-links a:hover{ opacity:1; color:var(--gold); }
@media (max-width:760px){
  .foot-in{ grid-template-columns:1fr; gap:30px; }
  .foot-legal{ flex-direction:column; align-items:flex-start; }
}