/* ==========================================================================
   LUMINDOR — estilos
   Paleta original conservada: navy, navy-deep, gold, gold-soft, ivory, slate, ink
   ========================================================================== */

:root{
  --navy:#12263A;
  --navy-deep:#0D1B2A;
  --gold:#E9B44C;
  --gold-soft:#F7D9A0;
  --gold-deep:#B8862E;
  --ivory:#F6F1E7;
  --slate:#5A6B7B;
  --ink:#1a2b3d;

  --serif:'Fraunces',Georgia,serif;
  --sans:'Manrope',system-ui,sans-serif;
  --wrap:1180px;

  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);

  /* escala de capas */
  --z-grain:20;
  --z-menu:30;
  --z-nav:40;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html.menu-open{overflow:hidden}
body{
  font-family:var(--sans);
  color:var(--ivory);
  background:var(--navy-deep);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.06;letter-spacing:-.02em;text-wrap:balance}
p{text-wrap:pretty}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.eyebrow{
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:700;color:var(--gold);
}
.star{display:inline-block;line-height:0}
.star svg{display:block}

/* grano fijo: rompe la planitud digital */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:var(--z-grain);opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.skip{
  position:fixed;left:16px;top:-80px;z-index:60;
  background:var(--gold);color:var(--navy-deep);font-weight:700;
  padding:10px 18px;border-radius:999px;transition:top .3s var(--ease-out);
}
.skip:focus{top:14px}

/* ==========================================================================
   Botones (con icono anidado)
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--sans);font-size:.92rem;font-weight:700;letter-spacing:.005em;
  padding:6px 6px 6px 24px;border-radius:999px;cursor:pointer;
  border:1px solid transparent;background:none;
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),background-color .3s,border-color .3s,color .3s;
}
.btn .ico{
  width:36px;height:36px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  transition:transform .5s var(--ease-out),background-color .3s;
}
.btn .ico svg{width:15px;height:15px}
.btn:active{transform:scale(.97)}
.btn-gold{background:var(--gold);color:var(--navy-deep)}
.btn-gold .ico{background:rgba(13,27,42,.13)}
.btn-ghost{border-color:rgba(246,241,231,.3);color:var(--ivory)}
.btn-ghost .ico{background:rgba(246,241,231,.1)}
.btn-sm{padding:3px 3px 3px 16px;font-size:.84rem;gap:10px}
.btn-sm .ico{width:28px;height:28px}
.btn-sm .ico svg{width:12px;height:12px}
@media (hover:hover) and (pointer:fine){
  .btn-gold:hover{box-shadow:0 14px 36px -10px rgba(233,180,76,.65)}
  .btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
  .btn:hover .ico{transform:translate(2px,-1px) scale(1.07)}
}

/* ==========================================================================
   Navegación: isla de cristal flotante
   ========================================================================== */
.site-header{
  position:fixed;top:14px;left:0;right:0;z-index:var(--z-nav);
  display:flex;justify-content:center;padding:0 12px;pointer-events:none;
}
.navpill{
  pointer-events:auto;display:flex;align-items:center;gap:40px;
  padding:7px 8px 7px 22px;border-radius:999px;max-width:100%;
  background:rgba(13,27,42,.28);
  border:1px solid rgba(246,241,231,.09);
  transition:background-color .6s var(--ease-drawer),border-color .6s var(--ease-drawer),box-shadow .6s var(--ease-drawer);
}
.site-header.scrolled .navpill{
  background:rgba(13,27,42,.74);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  border-color:rgba(233,180,76,.2);
  box-shadow:0 14px 34px -18px rgba(13,27,42,.55),inset 0 1px 0 rgba(247,217,160,.08);
}
.brand{
  display:flex;align-items:center;gap:11px;position:relative;z-index:1;
  font-family:var(--serif);font-size:1.22rem;letter-spacing:.16em;font-weight:500;
}
.mark{display:inline-flex;align-items:center;justify-content:center;height:26px;width:26px;line-height:0}
.mark img{height:100%;width:100%;object-fit:contain}
.links{display:flex;align-items:center;gap:30px}
.links a.link{font-size:.9rem;font-weight:500;color:rgba(246,241,231,.78);transition:color .25s}
@media (hover:hover){.links a.link:hover{color:var(--gold)}}

.menu-toggle{
  display:none;position:relative;z-index:1;width:44px;height:44px;border-radius:50%;
  background:rgba(246,241,231,.06);border:1px solid rgba(246,241,231,.12);cursor:pointer;
}
.menu-toggle span{
  position:absolute;left:13px;right:13px;top:50%;height:1.5px;background:var(--ivory);border-radius:2px;
  transition:transform .6s var(--ease-drawer);
}
.menu-toggle span:nth-child(1){transform:translateY(-4px)}
.menu-toggle span:nth-child(2){transform:translateY(4px)}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){transform:rotate(-45deg)}

.menu{display:none}

/* ==========================================================================
   Escenarios (zonas tipo video): canvas generativo + video opcional
   ========================================================================== */
.stage{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.stage canvas,.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage canvas{transform-origin:50% 18%;animation:breathe 44s ease-in-out infinite alternate}
.stage video{opacity:0;transition:opacity 1.8s ease;mix-blend-mode:screen}
.stage video.ready{opacity:.6}
@keyframes breathe{
  from{transform:scale(1) translate3d(0,0,0)}
  to{transform:scale(1.13) translate3d(-1.2%,1.2%,0)}
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100dvh;display:grid;place-items:center;padding:150px 0 120px;
  background:radial-gradient(ellipse 60% 55% at 50% 30%,rgba(233,180,76,.14),transparent 70%),var(--navy-deep);
}
.hero .stage::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(13,27,42,.55),rgba(13,27,42,0) 28%,rgba(13,27,42,0) 62%,var(--navy-deep) 100%),
    radial-gradient(ellipse 70% 60% at 50% 40%,transparent 40%,rgba(13,27,42,.6) 100%);
}
.glow{
  position:absolute;top:24%;left:50%;width:560px;height:560px;margin:-280px 0 0 -280px;
  border-radius:50%;z-index:1;pointer-events:none;
  background:radial-gradient(circle,rgba(247,217,160,.32),rgba(233,180,76,.08) 40%,transparent 68%);
  animation:pulse 6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.7;scale:1}50%{opacity:1;scale:1.08}}

.hero-inner{position:relative;z-index:2;text-align:center;max-width:800px;margin:0 auto;will-change:transform,opacity}
.hero-inner > *{animation:rise 1.1s var(--ease-out) both;animation-delay:calc(var(--k,0)*95ms + 120ms)}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.halo{position:relative;width:72px;height:72px;margin:0 auto 34px;--k:0}
.halo-move{position:absolute;inset:0;perspective:900px}
.halo .star{
  position:relative;z-index:1;width:72px;height:72px;
  filter:drop-shadow(0 0 28px rgba(233,180,76,.6));
  animation:float 7s ease-in-out infinite;
}
.halo .star svg,.halo .star img{width:72px;height:72px;object-fit:contain}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.ring{
  position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none;
  background:
    conic-gradient(from 0deg,rgba(233,180,76,0) 0 58%,rgba(247,217,160,.95) 86%,rgba(233,180,76,0) 87%),
    linear-gradient(rgba(233,180,76,.22),rgba(233,180,76,.22));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.2px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.2px));
  transform:translate(-50%,-50%) rotateX(74deg) rotateZ(0deg);
  animation:orbit var(--t) linear infinite;
}
.r1{width:170px;height:170px;--t:20s}
.r2{width:280px;height:280px;--t:32s;animation-direction:reverse;opacity:.7}
.r3{width:420px;height:420px;--t:48s;opacity:.4}
@keyframes orbit{to{transform:translate(-50%,-50%) rotateX(74deg) rotateZ(360deg)}}

.hero .eyebrow{--k:1}
.hero h1{--k:2;font-size:clamp(3.1rem,8.4vw,6.3rem);margin:16px 0 24px;letter-spacing:-.03em}
.hero h1 em{font-style:italic;color:var(--gold-soft);font-weight:400}
.hero p.lead{
  --k:3;font-size:clamp(1.05rem,1.9vw,1.26rem);color:rgba(246,241,231,.84);
  max-width:620px;margin:0 auto 40px;
}
.hero-cta{--k:4;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

.scroll-hint{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:2;
  font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  color:rgba(246,241,231,.45);display:flex;flex-direction:column;align-items:center;gap:10px;
}
.scroll-hint .line{width:1px;height:42px;background:linear-gradient(var(--gold),transparent);animation:drop 2.2s var(--ease-out) infinite}
@keyframes drop{0%{opacity:0;transform:scaleY(.3);transform-origin:top}50%{opacity:1}100%{opacity:0;transform:scaleY(1);transform-origin:top}}

/* ==========================================================================
   Historia: texto que se enciende palabra por palabra al hacer scroll
   ========================================================================== */
.story{
  position:relative;height:250vh;
  background:linear-gradient(180deg,var(--navy-deep) 0,var(--navy) 24%,var(--navy) 100%);
}
.story-pin{
  position:sticky;top:0;height:100dvh;display:grid;place-items:center;overflow:hidden;isolation:isolate;
}
.story-pin .stage::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 70% at 50% 50%,transparent 30%,rgba(18,38,58,.78) 100%);
}
.story-copy{position:relative;z-index:2;max-width:880px;text-align:center;padding-top:64px}
.story h2{font-size:clamp(2.1rem,min(5.6vw,9vh),4.4rem);margin-bottom:clamp(18px,3.4vh,34px)}
.story h2 .hl{color:var(--gold)}
.story p{
  font-size:clamp(.98rem,min(1.7vw,2.3vh),1.22rem);color:rgba(246,241,231,.82);
  max-width:700px;margin:0 auto clamp(12px,1.8vh,18px);
}
.story p .accent{color:var(--gold-soft);font-family:var(--serif);font-style:italic;font-size:1.12em}

.js .w{opacity:.16;transition:opacity .7s var(--ease-out),text-shadow .7s var(--ease-out)}
.js .w.near{opacity:.42}
.js .w.lit{opacity:1}
.js .story .hl .w.lit{text-shadow:0 0 30px rgba(233,180,76,.55)}

.transition{height:160px;background:linear-gradient(var(--navy),var(--ivory))}

/* ==========================================================================
   Servicios: bento asimétrico con inclinación 3D y borde de luz
   ========================================================================== */
.light{background:var(--ivory);color:var(--ink)}
.services{position:relative;overflow:hidden;padding:40px 0 140px}
.ghost-star{
  position:absolute;right:-10%;top:6%;width:min(560px,64vw);aspect-ratio:1;
  opacity:.07;pointer-events:none;will-change:transform;
}
.ghost-star svg{width:100%;height:100%}
.sec-head{text-align:center;max-width:680px;margin:0 auto 70px;position:relative}
.sec-head .eyebrow{color:var(--gold-deep)}
.sec-head h2{font-size:clamp(2.1rem,4.8vw,3.3rem);color:var(--navy);margin:16px 0 16px}
.sec-head p{color:var(--slate);font-size:1.05rem}
.lang-note{
  display:inline-flex;align-items:center;gap:10px;margin-top:26px;
  padding:10px 20px;border-radius:999px;
  background:rgba(18,38,58,.06);border:1px solid rgba(233,180,76,.5);
  color:var(--navy);font-size:.92rem;font-weight:600;
}

.svc-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:22px;perspective:1400px;position:relative}
.svc{grid-column:span 6}
.svc:nth-child(1){grid-column:span 7}
.svc:nth-child(2){grid-column:span 5}
.svc:nth-child(3){grid-column:span 5}
.svc:nth-child(4){grid-column:span 7}

.svc-shell{
  height:100%;padding:6px;border-radius:30px;
  background:
    radial-gradient(320px circle at var(--px,50%) var(--py,-20%),rgba(233,180,76,.0),transparent 70%),
    rgba(18,38,58,.05);
  box-shadow:inset 0 0 0 1px rgba(18,38,58,.07);
  transform-style:preserve-3d;
  transition:transform .7s var(--ease-out),background-color .4s;
}
.svc-core{
  position:relative;height:100%;min-height:300px;overflow:hidden;
  border-radius:24px;padding:38px 36px;background:#fff;
  box-shadow:inset 0 1px 0 #fff,0 34px 60px -38px rgba(18,38,58,.4);
}
.svc-core::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s var(--ease-out);
  background:radial-gradient(420px circle at var(--px,50%) var(--py,0%),rgba(233,180,76,.17),transparent 62%);
}
.svc-core::after{
  content:"";position:absolute;left:0;top:28px;bottom:28px;width:3px;border-radius:0 3px 3px 0;
  background:var(--gold);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .svc-shell:hover{
    background:
      radial-gradient(260px circle at var(--px,50%) var(--py,50%),rgba(233,180,76,.9),transparent 70%),
      rgba(18,38,58,.05);
  }
  .svc-shell:hover .svc-core::before{opacity:1}
  .svc-shell:hover .svc-core::after{transform:scaleY(1)}
}
.svc .ico{
  position:relative;z-index:1;width:54px;height:54px;border-radius:50%;background:var(--navy);
  display:flex;align-items:center;justify-content:center;margin-bottom:26px;
  box-shadow:0 12px 24px -10px rgba(18,38,58,.55);
}
.svc h3{position:relative;z-index:1;font-size:1.42rem;color:var(--navy);margin-bottom:12px;max-width:20ch}
.svc p{position:relative;z-index:1;color:var(--slate);font-size:.98rem;max-width:46ch}

/* motivos decorativos animados */
.motif{position:absolute;right:28px;top:26px;width:132px;height:96px;pointer-events:none}
.motif svg{width:100%;height:100%;overflow:visible}
.m-line{stroke:rgba(18,38,58,.22);fill:none;stroke-width:1.6;stroke-linecap:round}
.m-gold{stroke:var(--gold);fill:none;stroke-width:2.2;stroke-linecap:round}
.m-fill{fill:rgba(18,38,58,.12)}
.m-dot{fill:var(--gold)}
.js .reveal:not(.in) .bar{transform:scaleY(0)}
.bar{transform-origin:50% 100%;transform-box:fill-box;fill:rgba(18,38,58,.16);transition:transform 1s var(--ease-out)}
.bar:nth-child(1){transition-delay:.45s}.bar:nth-child(2){transition-delay:.55s}
.bar:nth-child(3){transition-delay:.65s}.bar:nth-child(4){transition-delay:.75s}
.bar.hot{fill:var(--gold)}
.js .reveal:not(.in) .trace{stroke-dashoffset:140}
.trace{stroke-dasharray:140;stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--ease-out) .5s}
.ping{transform-box:fill-box;transform-origin:center;animation:ping 2.8s var(--ease-out) infinite}
.ping.p2{animation-delay:1.1s}
@keyframes ping{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.scan{animation:scan 3.6s ease-in-out infinite alternate}
@keyframes scan{from{transform:translateX(0)}to{transform:translateX(34px)}}

/* ==========================================================================
   Pilares: tarjetas que se apilan con profundidad
   ========================================================================== */
.pillars{
  position:relative;color:var(--ink);padding:130px 0 150px;
  background:linear-gradient(180deg,var(--ivory),#F0E4CE);
}
.pill-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:80px;align-items:start}
.pill-intro{position:sticky;top:140px}
.pill-intro .eyebrow{color:var(--gold-deep)}
.pill-intro h2{font-size:clamp(2.3rem,5vw,3.7rem);color:var(--navy);margin-top:16px;max-width:11ch}
.stack{display:flex;flex-direction:column}
.pill{
  position:sticky;top:calc(130px + var(--i,0)*26px);margin-bottom:24vh;
  transform-origin:50% 0;transform:scale(calc(1 - .06*var(--t,0)));
  will-change:transform;
}
.pill:last-child{margin-bottom:0}
.pill-core{
  position:relative;overflow:hidden;min-height:268px;padding:42px 40px;border-radius:30px;color:var(--ivory);
  background:
    radial-gradient(120% 90% at 100% 0%,rgba(233,180,76,.2),transparent 60%),
    linear-gradient(160deg,#193450,var(--navy-deep));
  box-shadow:inset 0 1px 0 rgba(247,217,160,.16),inset 0 0 0 1px rgba(247,217,160,.07),0 44px 70px -42px rgba(13,27,42,.8);
}
.pill-core::after{
  content:"";position:absolute;inset:0;background:var(--navy-deep);pointer-events:none;
  opacity:calc(var(--t,0)*.5);
}
.pill .ico{
  width:58px;height:58px;margin-bottom:28px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--gold);border-radius:50%;
  box-shadow:0 0 28px -4px rgba(233,180,76,.45);
}
.pill h3{font-size:1.7rem;color:var(--ivory);margin-bottom:10px}
.pill p{color:rgba(246,241,231,.76);font-size:1.02rem;max-width:40ch}

/* ==========================================================================
   Contacto
   ========================================================================== */
.contact{position:relative;isolation:isolate;overflow:hidden;background:var(--navy-deep);padding:140px 0}
.contact .stage::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--navy-deep),rgba(13,27,42,.2) 30%,rgba(13,27,42,.2) 70%,var(--navy-deep));
}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;position:relative;z-index:2;align-items:start}
.contact h2{font-size:clamp(2.2rem,4.8vw,3.4rem);margin:16px 0 20px}
.contact .lead{color:rgba(246,241,231,.8);margin-bottom:36px;font-size:1.06rem;max-width:44ch}
.direct{margin-top:36px;display:flex;flex-direction:column;gap:18px}
.direct a{display:flex;align-items:center;gap:16px;color:rgba(246,241,231,.92);font-size:1.02rem;font-weight:500;transition:color .25s}
.direct .d-ico{
  width:48px;height:48px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(233,180,76,.42);background:rgba(13,27,42,.5);
  transition:transform .5s var(--ease-out),border-color .3s,box-shadow .5s;
}
.direct .d-ico svg{stroke:var(--gold)}
.direct small{display:block;color:rgba(246,241,231,.5);font-size:.78rem;letter-spacing:.04em;font-weight:500}
@media (hover:hover){
  .direct a:hover{color:var(--gold)}
  .direct a:hover .d-ico{transform:scale(1.07);box-shadow:0 0 26px -4px rgba(233,180,76,.5)}
}

.form-shell{padding:6px;border-radius:32px;background:rgba(246,241,231,.04);box-shadow:inset 0 0 0 1px rgba(246,241,231,.1)}
.form-core{
  border-radius:26px;padding:34px;background:rgba(13,27,42,.82);
  box-shadow:inset 0 1px 0 rgba(247,217,160,.13),0 40px 70px -40px rgba(0,0,0,.8);
}
form{display:flex;flex-direction:column;gap:18px}
.field label{
  display:block;font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;font-weight:600;
  color:rgba(246,241,231,.62);margin-bottom:8px;
}
.field input,.field textarea{
  width:100%;background:rgba(246,241,231,.05);border:1px solid rgba(246,241,231,.16);
  border-radius:14px;padding:14px 16px;color:var(--ivory);font-family:var(--sans);font-size:1rem;
  transition:border-color .25s,background-color .25s,box-shadow .35s var(--ease-out);
}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);background:rgba(246,241,231,.08);
  box-shadow:0 0 0 4px rgba(233,180,76,.16);
}
.field [aria-invalid="true"]{border-color:#E8967D;box-shadow:0 0 0 4px rgba(232,150,125,.14)}
.field textarea{resize:vertical;min-height:120px}
.err{display:block;min-height:0;margin-top:7px;font-size:.84rem;color:#F0AE9A}
.err:empty{display:none}
form .btn-gold{justify-content:space-between;margin-top:6px;padding-left:28px}
.form-note{font-size:.8rem;color:rgba(246,241,231,.5);margin-top:2px;line-height:1.6}
.form-note a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.form-ok{
  display:none;background:rgba(233,180,76,.12);border:1px solid rgba(233,180,76,.4);
  border-radius:14px;padding:15px 17px;color:var(--gold-soft);font-size:.92rem;
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer{background:var(--navy-deep);border-top:1px solid rgba(233,180,76,.12);padding:48px 0}
.foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot .brand{font-size:1.15rem;margin-bottom:4px}
.foot .mark{height:22px;width:22px}
.foot .tag{color:var(--gold);font-family:var(--serif);font-style:italic;font-size:1rem}
.foot small{color:var(--slate);font-size:.82rem;line-height:1.9;text-align:right}
.foot small a{text-decoration:underline;text-underline-offset:3px}

/* ==========================================================================
   Revelado al hacer scroll
   ========================================================================== */
.js .reveal{
  opacity:0;transform:translateY(30px);
  transition:opacity .95s var(--ease-out) var(--d,0s),transform .95s var(--ease-out) var(--d,0s);
}
.js .reveal.in{opacity:1;transform:none}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1020px){
  .pill-layout{grid-template-columns:1fr;gap:44px}
  .pill-intro{position:relative;top:0}
  .pill-intro h2{max-width:none}
}
@media (max-width:820px){
  .links{display:none}
  .menu-toggle{display:block}
  .navpill{width:100%;justify-content:space-between;padding:6px 6px 6px 18px}

  .menu{
    position:fixed;inset:0;z-index:var(--z-menu);display:flex;flex-direction:column;justify-content:center;
    gap:4px;padding:110px 30px 40px;
    background:rgba(13,27,42,.95);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
    visibility:hidden;opacity:0;
    transition:opacity .55s var(--ease-drawer),visibility 0s .55s;
  }
  .menu.open{visibility:visible;opacity:1;transition:opacity .55s var(--ease-drawer),visibility 0s}
  .menu a{
    font-family:var(--serif);font-size:2.3rem;letter-spacing:-.01em;padding:8px 0;
    opacity:0;transform:translateY(34px);
    transition:transform .8s var(--ease-drawer),opacity .6s var(--ease-drawer),color .25s;
  }
  .menu.open a{opacity:1;transform:none;transition-delay:calc(var(--k)*70ms + 120ms)}
  .menu a.cta{
    margin-top:22px;align-self:flex-start;font-family:var(--sans);font-size:1rem;font-weight:700;
    background:var(--gold);color:var(--navy-deep);padding:15px 28px;border-radius:999px;
  }

  .hero{padding:130px 0 110px}
  .r3{display:none}
  .r2{width:240px;height:240px}
  .svc-grid{grid-template-columns:1fr}
  .svc,.svc:nth-child(n){grid-column:auto}
  .svc-core{min-height:0;padding:32px 28px}
  .motif{width:96px;height:70px;right:20px;top:22px}
  .contact-grid{grid-template-columns:1fr;gap:48px}
  .foot small{text-align:left}

  /* sin pin: la historia fluye como una sección normal */
  .story{height:auto;padding:130px 0}
  .story-pin{position:relative;height:auto;overflow:visible;display:block}
  .story-pin .stage{overflow:hidden}
  .pill{top:calc(96px + var(--i,0)*14px);margin-bottom:12vh}
  .pill-core{padding:34px 28px;min-height:230px}
}
@media (max-height:719px) and (min-width:821px){
  .story{height:auto;padding:130px 0}
  .story-pin{position:relative;height:auto;overflow:visible;display:block}
}
@media (max-width:440px){
  .wrap{padding:0 18px}
  .form-core{padding:26px 20px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
  .js .w{opacity:1!important}
  .js .reveal:not(.in) .bar{transform:none}
  .js .reveal:not(.in) .trace{stroke-dashoffset:0}
  .hero-inner > *{opacity:1;transform:none}
}