/* ============================================================
   ONBRAND361° — pages.css
   Bloques de página: héroe, divisiones, sectores, método,
   casos, puertas de tienda, contacto.
   ============================================================ */

/* ---------------------------------------------------------
   1. HÉROE
   --------------------------------------------------------- */
.hero{
  position:relative;overflow:hidden;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;
  padding-top:var(--header-h);
  background:var(--navy-deep);
}
.hero__media{
  position:absolute;inset:0;z-index:0;
  pointer-events:none;
}
.hero__media img{
  width:100%;height:100%;object-fit:cover;
  object-position:72% center;
}
/* Velos: aquí van los degradados que se sacaron del vídeo para aligerarlo */
.hero__veil{position:absolute;inset:0;z-index:1;pointer-events:none;}
.hero__veil::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(8,17,34,.97) 0%,
    rgba(8,17,34,.92) 26%,
    rgba(8,17,34,.55) 48%,
    rgba(8,17,34,.12) 68%,
    rgba(8,17,34,.42) 100%);
}
.hero__veil::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,
    rgba(8,17,34,.85) 0%, rgba(8,17,34,0) 22%,
    rgba(8,17,34,0) 62%, rgba(8,17,34,.92) 100%);
}
.hero__in{
  position:relative;z-index:2;
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(1.5rem,3.4vh,2.6rem);
}
.hero__eyebrow{margin-bottom:clamp(1rem,2vw,1.5rem);}
.hero__title{
  font-size:var(--t-mega);line-height:.87;letter-spacing:-.048em;
  color:#fff;max-width:15ch;
}
.hero__title .on{
  position:relative;color:var(--orange);white-space:nowrap;
}
.hero__title .on::after{
  content:'';position:absolute;left:0;right:0;bottom:.06em;height:.055em;
  background:var(--orange);transform:scaleX(0);transform-origin:left;
  animation:underOn 1s var(--e-out) 1.15s forwards;
}
@keyframes underOn{to{transform:scaleX(1);}}
.hero__lead{
  margin-top:clamp(1.1rem,2vw,1.5rem);
  color:#B9C4D6;max-width:46ch;
  font-size:clamp(1rem,1.05vw,1.11rem);line-height:1.58;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:clamp(1.5rem,2.6vw,2rem);}
.hero__foot{
  position:relative;z-index:2;
  border-top:1px solid rgba(255,255,255,.13);
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2.2rem;
  padding-block:1.1rem;
}
.hero__stat{display:flex;align-items:baseline;gap:.65rem;color:#93A2BC;font-size:var(--t-xs);}
.hero__stat b{
  font-family:var(--f-display);font-weight:700;font-size:1.35rem;
  color:#fff;letter-spacing:-.03em;line-height:1;
}
.hero__stat i{font-style:normal;color:var(--orange);}
.hero__scroll{margin-left:auto;display:inline-flex;align-items:center;gap:.7rem;color:#93A2BC;font-size:var(--t-micro);letter-spacing:.19em;text-transform:uppercase;}
.hero__scroll span{
  width:22px;height:34px;border:1px solid rgba(255,255,255,.3);border-radius:var(--r-pill);
  position:relative;flex:none;
}
.hero__scroll span::after{
  content:'';position:absolute;left:50%;top:7px;width:2px;height:6px;border-radius:2px;
  background:var(--orange);transform:translateX(-50%);
  animation:scrollDot 1.9s var(--e-io) infinite;
}
@keyframes scrollDot{0%{transform:translate(-50%,0);opacity:0;}25%{opacity:1;}75%{transform:translate(-50%,13px);opacity:0;}100%{opacity:0;}}
@media(max-width:860px){
  /* En vertical, la composición a tercios no cabe: el bucle pasa a ser
     una banda centrada detrás del titular, a escala 1:1 y bajada de opacidad. */
  .hero__media{
    inset:50% 0 auto 0;height:auto;aspect-ratio:16/9;
    transform:translateY(-50%);opacity:.45;
  }
  .hero__media img{height:100%;object-position:68% center;}
  .hero__veil::before{
    background:linear-gradient(to bottom,
      rgba(8,17,34,.92) 0%, rgba(8,17,34,.55) 38%,
      rgba(8,17,34,.72) 68%, rgba(8,17,34,.97) 100%);
  }
  .hero__title{max-width:100%;}
  .hero__scroll{display:none;}
  .hero__foot{gap:.7rem 1.6rem;}
  .hero__stat{font-size:var(--t-micro);}
}
@media(max-width:560px){
  .hero__cta .btn{flex:1 1 100%;}
  .hero__lead{font-size:1rem;}
}

/* Dial de progreso 361° — lector fijo en el borde */
.dial{
  position:fixed;right:clamp(.8rem,2vw,1.7rem);bottom:clamp(.8rem,2vw,1.7rem);
  z-index:780;width:74px;height:74px;pointer-events:none;
  opacity:0;transform:scale(.85);
  transition:opacity var(--d-2) var(--e-out),transform var(--d-2) var(--e-out);
}
.dial[data-on='1']{opacity:1;transform:none;}
.dial svg{width:100%;height:100%;overflow:visible;}
.dial__track{fill:none;stroke:rgba(17,30,56,.16);stroke-width:2;}
.is-dark-zone .dial__track{stroke:rgba(255,255,255,.18);}
.dial__bar{fill:none;stroke:var(--orange);stroke-width:2.6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;}
.dial__txt{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.02em;color:var(--navy);
  font-variant-numeric:tabular-nums;
}
.is-dark-zone .dial__txt{color:#fff;}
@media(max-width:720px){.dial{display:none;}}

/* ---------------------------------------------------------
   2. BLOQUE MANIFIESTO / TEXTO GRANDE
   --------------------------------------------------------- */
.manifesto{font-size:clamp(1.6rem,4.2vw,3.3rem);line-height:1.14;letter-spacing:-.035em;font-family:var(--f-display);font-weight:700;max-width:19ch;}
.manifesto em{font-style:normal;color:var(--ink-3);}
.statline{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);}
.statline > div{background:var(--bg);padding:clamp(1.4rem,2.6vw,2.1rem);}
.statline b{display:block;font-family:var(--f-display);font-weight:700;font-size:clamp(2.1rem,4.4vw,3.2rem);letter-spacing:-.04em;line-height:1;color:var(--ink);}
.statline b i{font-style:normal;color:var(--accent-ink);}
.statline span{display:block;margin-top:.7rem;font-size:var(--t-xs);color:var(--ink-2);line-height:1.5;}

/* ---------------------------------------------------------
   3. LAS DOS DIVISIONES — cortina arrastrable
   --------------------------------------------------------- */
.split{
  position:relative;overflow:hidden;
  min-height:min(88vh,780px);
  background:var(--soft);
  --split:50%;
  touch-action:pan-y;
}
.split__layer{position:absolute;inset:0;display:flex;align-items:center;}
.split__layer--b{
  background:var(--navy);color:#fff;
  clip-path:inset(0 0 0 var(--split));
  will-change:clip-path;
}
.split__layer--a{background:var(--soft);color:var(--navy);}
.split__pane{
  width:min(100% - (var(--gut)*2),var(--maxw));margin-inline:auto;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);
  padding-block:clamp(3.5rem,7vw,5.5rem);
}
.split__card{max-width:44ch;}
.split__layer--b .split__pane > div:first-child{grid-column:2;}
.split__num{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.16em;color:var(--accent-ink);}
.split__t{font-size:clamp(2rem,4.6vw,3.5rem);line-height:.98;letter-spacing:-.04em;margin-top:1rem;}
.split__role{margin-top:1.15rem;font-size:var(--t-md);line-height:1.36;letter-spacing:-.015em;font-family:var(--f-brand);font-weight:700;}
.split__layer--a .split__role{color:var(--gray-tech);}
.split__layer--b .split__role{color:#A9B5CA;}
.split__list{margin-top:1.6rem;display:flex;flex-direction:column;}
.split__list li{
  padding:.72rem 0;border-top:1px solid;font-size:var(--t-sm);
  display:flex;align-items:flex-start;gap:.8rem;
}
.split__layer--a .split__list li{border-color:var(--gray-line);color:var(--gray-tech);}
.split__layer--b .split__list li{border-color:rgba(255,255,255,.14);color:#B9C4D6;}
.split__list li::before{content:'';width:6px;height:6px;background:var(--orange);flex:none;margin-top:.62em;}
.split__cta{margin-top:1.9rem;}

/* Tirador */
.split__handle{
  position:absolute;top:0;bottom:0;left:var(--split);width:2px;z-index:5;
  background:var(--orange);transform:translateX(-1px);
  cursor:ew-resize;touch-action:none;
}
.split__grip{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;
  background:var(--orange);color:#fff;display:grid;place-items:center;
  box-shadow:0 10px 34px rgba(255,94,19,.36);
  transition:transform var(--d-2) var(--e-spring);
}
.split__handle:hover .split__grip,.split__handle:focus-visible .split__grip{transform:translate(-50%,-50%) scale(1.09);}
.split__grip svg{width:24px;height:24px;}
.split__hint{
  position:absolute;left:50%;bottom:1.3rem;transform:translateX(-50%);
  z-index:6;font-size:var(--t-micro);letter-spacing:.18em;text-transform:uppercase;
  color:var(--gray-mid);background:rgba(255,255,255,.9);padding:.45rem .95rem;border-radius:var(--r-pill);
  white-space:nowrap;pointer-events:none;
}
@media(max-width:1024px){
  .split{min-height:0;--split:50%;}
  .split__layer{position:relative;inset:auto;}
  .split__layer--b{clip-path:none !important;}
  .split__pane{grid-template-columns:1fr;}
  .split__layer--b .split__pane > div:first-child{grid-column:1;}
  .split__handle,.split__hint{display:none;}
}

/* ---------------------------------------------------------
   4. PACK TIEMPO ZERO — reloj de fases
   --------------------------------------------------------- */
.zero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(2.5rem,6vw,5rem);align-items:center;}
@media(max-width:980px){.zero{grid-template-columns:1fr;}}
.clock{position:relative;aspect-ratio:1;max-width:440px;width:100%;margin-inline:auto;}
.clock svg{width:100%;height:100%;overflow:visible;}
.clock__ring{fill:none;stroke:var(--rule);stroke-width:1.5;}
.clock__seg{fill:none;stroke-width:16;stroke-linecap:butt;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke var(--d-2),opacity var(--d-2);}
.clock__seg--1{stroke:var(--navy);}
.clock__seg--2{stroke:var(--orange);}
.clock__seg--3{stroke:var(--gray-line);}
.clock__tick{stroke:var(--rule);stroke-width:1;}
.clock__center{position:absolute;inset:0;display:grid;place-content:center;text-align:center;}
.clock__big{font-family:var(--f-display);font-weight:700;font-size:clamp(3.4rem,9vw,5.4rem);line-height:.85;letter-spacing:-.05em;color:var(--ink);}
.clock__big i{font-style:normal;color:var(--accent-ink);font-size:.42em;vertical-align:.9em;letter-spacing:0;}
.clock__sub{font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-top:.9rem;}
.phase{display:grid;grid-template-columns:auto 1fr auto;gap:.4rem 1.3rem;align-items:baseline;padding:1.35rem 0;border-top:1px solid var(--rule);transition:background var(--d-1);}
.phase:last-child{border-bottom:1px solid var(--rule);}
.phase__n{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--accent-ink);letter-spacing:.1em;}
.phase__t{font-family:var(--f-brand);font-weight:700;font-size:var(--t-md);letter-spacing:-.02em;line-height:1.25;}
.phase__time{font-family:var(--f-display);font-weight:700;font-size:1.5rem;letter-spacing:-.03em;color:var(--ink);white-space:nowrap;}
.phase__time small{font-size:.55em;color:var(--ink-3);font-weight:500;letter-spacing:0;}
.phase__d{grid-column:2/-1;color:var(--ink-2);font-size:var(--t-sm);margin-top:.35rem;line-height:1.6;}
.phase[data-active='1']{background:color-mix(in srgb,var(--orange) 6%,transparent);}
@media(max-width:560px){
  .phase{grid-template-columns:auto 1fr;}
  .phase__time{grid-column:2;justify-self:start;font-size:1.25rem;}
  .phase__d{grid-column:1/-1;}
}

/* ---------------------------------------------------------
   5. SECTORES — lista con panel que sigue al cursor
   --------------------------------------------------------- */
.sect{position:relative;}
.sect__list{border-top:1px solid var(--rule);}
.sect__row{
  position:relative;display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:1rem clamp(1rem,3vw,2.6rem);
  padding:clamp(1.5rem,3.2vw,2.4rem) 0;border-bottom:1px solid var(--rule);
  transition:padding-left var(--d-2) var(--e-out),color var(--d-2);
}
.sect__row:hover{padding-left:clamp(.6rem,1.6vw,1.5rem);}
.sect__row::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--orange);
  transform:scaleY(0);transform-origin:bottom;transition:transform var(--d-2) var(--e-out);
}
.sect__row:hover::before{transform:scaleY(1);transform-origin:top;}
.sect__n{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--accent-ink);letter-spacing:.1em;}
.sect__t{font-size:clamp(1.4rem,3.4vw,2.5rem);line-height:1.02;letter-spacing:-.035em;font-family:var(--f-display);font-weight:700;}
.sect__meta{display:flex;flex-direction:column;gap:.35rem;text-align:right;max-width:32ch;}
.sect__pain{font-size:var(--t-xs);color:var(--ink-3);}
.sect__fix{font-size:var(--t-sm);color:var(--ink-2);}
.sect__go{width:44px;height:44px;border:1px solid var(--rule);display:grid;place-items:center;flex:none;transition:all var(--d-2) var(--e-out);}
.sect__row:hover .sect__go{background:var(--orange);border-color:var(--orange);color:#fff;}
.sect__go svg{width:15px;height:15px;}
@media(max-width:900px){
  .sect__row{grid-template-columns:auto 1fr;}
  .sect__meta{grid-column:1/-1;text-align:left;max-width:none;}
  .sect__go{grid-row:1;grid-column:2;justify-self:end;}
}
/* Panel flotante que acompaña al cursor */
.sect__peek{
  position:absolute;top:0;left:0;width:340px;aspect-ratio:4/3;z-index:4;
  pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.94);
  transition:opacity .3s var(--e-out),transform .45s var(--e-out);
  box-shadow:var(--sh-3);overflow:hidden;background:var(--navy);
}
.sect__peek[data-on='1']{opacity:1;transform:translate(-50%,-50%) scale(1);}
.sect__peek img{width:100%;height:100%;object-fit:cover;}
@media(max-width:1100px),(pointer:coarse){.sect__peek{display:none;}}

/* ---------------------------------------------------------
   6. PILARES / MÉTODO
   --------------------------------------------------------- */
.pillar{position:relative;padding-top:2.2rem;border-top:2px solid var(--ink);}
.pillar__n{
  position:absolute;top:-.06em;right:0;
  font-family:var(--f-display);font-weight:700;font-size:clamp(3.2rem,7vw,5.6rem);
  line-height:1;letter-spacing:-.05em;color:color-mix(in srgb,var(--ink) 8%,transparent);
  pointer-events:none;
}
.pillar__t{font-size:var(--t-lg);margin-bottom:.9rem;position:relative;max-width:14ch;}
.pillar__d{color:var(--ink-2);font-size:var(--t-sm);line-height:1.68;}
.pillar__d + .pillar__d{margin-top:.85rem;}

/* Pasos numerados verticales */
.steps{counter-reset:st;}
.step{
  position:relative;display:grid;grid-template-columns:auto 1fr;gap:1.4rem clamp(1.2rem,3vw,2.4rem);
  padding-block:clamp(1.6rem,3.2vw,2.4rem);border-top:1px solid var(--rule);
}
.step__dot{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--rule);
  display:grid;place-items:center;font-family:var(--f-mono);font-size:var(--t-xs);
  color:var(--ink-3);background:var(--bg);flex:none;
  transition:all var(--d-2) var(--e-out);
}
.step.rv-in .step__dot{border-color:var(--orange);color:var(--orange);}
.step__t{font-family:var(--f-brand);font-weight:700;font-size:var(--t-md);letter-spacing:-.02em;margin-bottom:.5rem;}
.step__d{color:var(--ink-2);font-size:var(--t-sm);line-height:1.68;max-width:62ch;}

/* ---------------------------------------------------------
   7. CASOS
   --------------------------------------------------------- */
.case{position:relative;display:flex;flex-direction:column;background:var(--bg);min-width:0;}
.case__fig{
  position:relative;overflow:hidden;background:var(--navy);
  aspect-ratio:4/3;border:1px solid var(--rule);
}
.case__fig img{width:100%;height:100%;object-fit:cover;transition:transform .85s var(--e-out);}
.case:hover .case__fig img{transform:scale(1.035);}
.case__tag{position:absolute;left:1rem;top:1rem;z-index:2;}
.case__body{padding-top:1.35rem;}
.case__t{font-size:var(--t-md);letter-spacing:-.022em;margin-bottom:.5rem;}
.case__d{color:var(--ink-2);font-size:var(--t-sm);line-height:1.62;}
.case__specs{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem;}
.case__specs span{font-family:var(--f-mono);font-size:var(--t-micro);color:var(--ink-3);border:1px solid var(--rule);padding:.3rem .55rem;}

/* Figura con pie técnico */
.figure{margin:0;position:relative;}
.figure img,.figure .illus{width:100%;display:block;}
.figure figcaption{
  display:flex;gap:.8rem;align-items:baseline;justify-content:space-between;
  margin-top:.8rem;font-family:var(--f-mono);font-size:var(--t-micro);
  color:var(--ink-3);letter-spacing:.05em;border-top:1px solid var(--rule);padding-top:.6rem;
}
.figure figcaption b{color:var(--accent-ink);font-weight:400;}

/* ---------------------------------------------------------
   8. PUERTAS DE TIENDA
   --------------------------------------------------------- */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);}
@media(max-width:860px){.doors{grid-template-columns:1fr;}}
.door{
  position:relative;background:var(--bg);padding:clamp(1.8rem,4vw,3.2rem);
  display:flex;flex-direction:column;min-height:340px;overflow:hidden;
  transition:background var(--d-2) var(--e-out),color var(--d-2);
}
.door::before{
  content:'';position:absolute;inset:0;z-index:0;background:var(--navy);
  transform:translateY(100%);transition:transform .55s var(--e-out);
}
.door:hover::before{transform:translateY(0);}
.door:hover{color:#fff;}
.door:hover .door__t,.door:hover .door__d,.door:hover .door__list li{color:inherit;}
.door > *{position:relative;z-index:1;}
.door__ic{width:52px;height:52px;color:var(--orange);margin-bottom:1.5rem;}
.door__t{font-size:var(--t-lg);margin-bottom:.7rem;transition:color var(--d-2);}
.door__d{color:var(--ink-2);font-size:var(--t-sm);max-width:38ch;transition:color var(--d-2);}
.door__list{margin-top:1.5rem;display:flex;flex-direction:column;gap:.55rem;}
.door__list li{font-size:var(--t-sm);color:var(--ink-2);display:flex;gap:.7rem;align-items:flex-start;transition:color var(--d-2);}
.door__list li::before{content:'';width:5px;height:5px;background:var(--orange);flex:none;margin-top:.6em;}
.door__foot{margin-top:auto;padding-top:2rem;}

/* Aviso de fase Odoo */
.phase-note{
  display:flex;gap:1rem;align-items:flex-start;
  border:1px dashed var(--rule);padding:1.2rem 1.4rem;
  font-size:var(--t-sm);color:var(--ink-2);line-height:1.6;
}
.phase-note svg{width:22px;height:22px;color:var(--orange);flex:none;margin-top:2px;}

/* ---------------------------------------------------------
   9. CTA FINAL
   --------------------------------------------------------- */
.cta-end{position:relative;overflow:hidden;background:var(--orange);color:#fff;}
.cta-end .wrap{position:relative;z-index:2;padding-block:clamp(4rem,9vw,7.5rem);}
.cta-end__t{font-size:clamp(2.3rem,6.6vw,5.2rem);line-height:.95;letter-spacing:-.045em;color:#fff;max-width:16ch;}
/* Sobre naranja, el blanco solo alcanza 3,06:1: válido para texto grande,
   no para cuerpo. Por eso este párrafo sube a 19 px y semibold, y los
   botones secundarios pasan a navy (5,3:1). */
.cta-end__d{
  margin-top:1.4rem;color:#fff;max-width:46ch;
  font-size:clamp(1.19rem,1.3vw,1.32rem);font-weight:600;line-height:1.5;
}
.cta-end__row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.4rem;}
.cta-end .btn--light::before{background:var(--navy);}
.cta-end .btn--light:hover{color:#fff;border-color:var(--navy);}
.cta-end .btn--ghost{--btn-fg:var(--navy);--btn-bd:rgba(17,30,56,.5);}
.cta-end .btn--ghost::before{background:var(--navy);}
.cta-end .btn--ghost:hover{color:#fff;border-color:var(--navy);}
.cta-end__glyph{
  position:absolute;right:-6%;top:50%;transform:translateY(-50%);
  width:min(46vw,540px);opacity:.13;color:#fff;z-index:1;pointer-events:none;
}
@media(max-width:860px){.cta-end__glyph{right:-22%;opacity:.09;}}

/* ---------------------------------------------------------
   10. CABECERA DE PÁGINA INTERIOR
   --------------------------------------------------------- */
.phead{
  position:relative;background:var(--navy);color:#fff;overflow:hidden;
  padding-top:calc(var(--header-h) + clamp(3rem,7vw,6rem));
  padding-bottom:clamp(3rem,7vw,5.5rem);
}
.phead::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:75px 75px;
  mask-image:radial-gradient(ellipse 90% 80% at 78% 50%,#000 10%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 78% 50%,#000 10%,transparent 72%);
}
.phead .wrap{position:relative;z-index:2;}
.phead__t{font-size:var(--t-xxl);color:#fff;max-width:17ch;margin-top:1.4rem;}
.phead__d{margin-top:1.5rem;color:#A9B5CA;max-width:56ch;font-size:clamp(1.02rem,1.1vw,1.16rem);line-height:1.62;}
.phead__grid{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--gut);align-items:end;}
@media(max-width:900px){.phead__grid{grid-template-columns:1fr;}}
.phead__aside{display:flex;flex-direction:column;gap:.1rem;}
.phead__aside .spec{border-color:rgba(255,255,255,.15);}
.phead__aside .spec dt{color:#7A8AA6;}
.phead__aside .spec dd{color:#fff;}

/* ---------------------------------------------------------
   11. CONTACTO
   --------------------------------------------------------- */
.contact{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(2.5rem,6vw,5rem);align-items:start;}
@media(max-width:980px){.contact{grid-template-columns:1fr;}}
.contact__aside{position:sticky;top:calc(var(--header-h) + 2rem);}
@media(max-width:980px){.contact__aside{position:static;}}
.contact__block + .contact__block{margin-top:2.2rem;padding-top:2.2rem;border-top:1px solid var(--rule);}
.contact__block .h-micro{font-size:var(--t-micro);letter-spacing:.19em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:.9rem;font-family:var(--f-body);}
.contact__block p,.contact__block a{font-size:var(--t-sm);color:var(--ink-2);}
.contact__block a:hover{color:var(--accent-ink);}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 1.2rem;}
@media(max-width:640px){.form-grid{grid-template-columns:1fr;}}
.form-grid .field--full{grid-column:1/-1;}

/* ---------------------------------------------------------
   12. UTILIDADES DE PÁGINA
   --------------------------------------------------------- */
/* El grado extra: inclinación de 1° como firma del sistema */
.tilt{transform:rotate(-1deg);}
.tilt-r{transform:rotate(1deg);}
.tilt-box{position:relative;}
.tilt-box::before{
  content:'';position:absolute;inset:0;border:1px solid var(--orange);
  transform:rotate(1deg);pointer-events:none;opacity:.45;
}

/* Cita destacada */
.quote{
  position:relative;padding-left:clamp(1.4rem,3vw,2.6rem);
  border-left:2px solid var(--orange);
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(1.24rem,2.5vw,1.85rem);line-height:1.32;letter-spacing:-.025em;
  color:var(--ink);max-width:34ch;
}
.quote cite{display:block;margin-top:1.2rem;font-family:var(--f-body);font-style:normal;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600;}

/* Banda de logos/atributos */
.strip{display:flex;flex-wrap:wrap;gap:1px;background:var(--rule);border-block:1px solid var(--rule);}
.strip > div{flex:1 1 190px;background:var(--bg);padding:1.3rem 1.5rem;font-size:var(--t-xs);color:var(--ink-2);display:flex;align-items:center;gap:.75rem;}
.strip svg{width:20px;height:20px;color:var(--orange);flex:none;}

/* Ilustraciones SVG embebidas */
.illus{width:100%;height:auto;display:block;background:var(--navy);}
.illus--light{background:var(--soft);}

/* ---------------------------------------------------------
   13. VARIANTES DE APERTURA DE SECCIÓN
   El patrón base (etiqueta + titular a la izquierda, lead a la
   derecha) es sólido, pero repetido siete veces seguidas mata
   el ritmo. Estas tres variantes lo rompen.
   --------------------------------------------------------- */

/* A sangre: el titular ocupa todo el ancho y el lead baja debajo */
.sec-head--wide{display:block;}
.sec-head--wide .sec-head__t{max-width:17ch;}
.sec-head--wide .sec-head__row{
  display:grid;grid-template-columns:minmax(0,1.15fr) auto;
  gap:var(--gut);align-items:end;
  margin-top:clamp(1.8rem,3.4vw,3rem);
}
@media(max-width:860px){
  .sec-head--wide .sec-head__row{grid-template-columns:1fr;align-items:start;}
}

/* Espejo: el lead entra primero por la izquierda y el titular cierra */
.sec-head--mirror{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);}
.sec-head--mirror > *:first-child{order:2;}
@media(max-width:860px){.sec-head--mirror > *:first-child{order:0;}}

/* Desnuda: solo etiqueta y titular; el texto de apoyo va después */
.sec-head--bare{grid-template-columns:1fr;margin-bottom:clamp(1.8rem,3.6vw,3rem);}

/* Nota de cierre bajo una rejilla, alineada a la derecha */
.sec-note{
  margin-top:clamp(2rem,4vw,3rem);padding-top:1.3rem;
  border-top:1px solid var(--rule);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--gut);
  align-items:start;
}
.sec-note p{color:var(--ink-2);font-size:var(--t-sm);line-height:1.7;}
@media(max-width:860px){.sec-note{grid-template-columns:1fr;}}

/* Respiración variable: no todas las secciones al mismo ritmo */
.section--airy{padding-block:clamp(5.5rem,12vw,11rem);}

/* Selector de entrada de la cortina.
   Arrastrar solo recortaba; esto convierte la sección en lo que de
   verdad tiene que hacer: encaminar al visitante a una de las dos
   divisiones. Al posar el cursor, la cortina se abre hacia ese lado;
   al pulsar, se entra. */
.split__pick{
  position:absolute;left:50%;bottom:clamp(1.1rem,2.4vw,2rem);transform:translateX(-50%);
  z-index:6;display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;
}
.split__pickbtn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:var(--t-xs);font-weight:600;white-space:nowrap;
  padding:.8rem 1.15rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.92);color:var(--navy);
  border:1px solid rgba(17,30,56,.14);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background var(--d-1),color var(--d-1),border-color var(--d-1),transform var(--d-1) var(--e-out);
}
.split__pickbtn:hover,.split__pickbtn:focus-visible{
  background:var(--orange);border-color:var(--orange);color:var(--navy);transform:translateY(-2px);
}
.split__pickbtn svg{width:.9em;height:.9em;transition:transform var(--d-2) var(--e-out);}
.split__pickbtn:hover svg{transform:translateX(3px);}
@media(max-width:1024px){
  .split__pick{
    position:static;transform:none;padding:0 var(--gut) clamp(2rem,5vw,3rem);
    justify-content:flex-start;background:var(--navy);
  }
  .split__pickbtn{font-size:var(--t-sm);}
}

/* ---------------------------------------------------------
   14. REDES SOCIALES — «mira cómo trabajamos»
   --------------------------------------------------------- */
.redes{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);}
@media(max-width:1080px){.redes{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.redes{grid-template-columns:1fr;}}
.red{
  position:relative;background:var(--bg);
  padding:clamp(1.5rem,2.8vw,2.2rem);
  display:flex;flex-direction:column;gap:.9rem;overflow:hidden;
  transition:background var(--d-2) var(--e-out);
}
.red::before{
  content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--red,var(--orange));transform:scaleX(0);transform-origin:left;
  transition:transform var(--d-2) var(--e-out);
}
.red:hover::before{transform:scaleX(1);}
.red:hover{background:var(--bg-alt);}
.red__ic{width:38px;height:38px;color:var(--red,var(--orange));}
.red__n{font-family:var(--f-display);font-weight:700;font-size:var(--t-md);letter-spacing:-.025em;line-height:1;}
.red__h{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--ink-3);letter-spacing:.03em;}
.red__d{font-size:var(--t-sm);color:var(--ink-2);line-height:1.62;flex:1;}
.red__go{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:.4rem;
  font-size:var(--t-xs);font-weight:600;color:var(--ink);
}
.red:hover .red__go{color:var(--accent-ink);}
.red__go svg{width:.9em;height:.9em;transition:transform var(--d-2) var(--e-out);}
.red:hover .red__go svg{transform:translateX(4px);}