/* ==========================================================================
   ASCENDA GROUP
   Palette sampled from the brand mark (#031A3C navy, #1D5A52 green) and from
   the hero footage's golden-hour Santiago grade.
   ========================================================================== */

:root{
  --canvas:#08111F;
  --canvas-deep:#050B14;
  --panel:#0E1B2E;
  --panel-2:#12233A;
  --line:#1C2E48;
  --accent:#3EA89A;          /* 6.6:1 on canvas */
  --accent-hover:#4FBCAD;
  --accent-deep:#1D5A52;     /* the true brand green: CTA fill */
  --accent-muted:rgba(62,168,154,.22);
  --warm:#E8C89A;
  --text-primary:#EEF2F7;    /* 16.6:1 */
  --text-secondary:#9FB0C4;  /* 8.5:1  */

  --display:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body:"Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.33,.02,.18,1);

  --tshadow:0 1px 2px rgba(3,8,16,.95),0 3px 12px rgba(3,8,16,.78),0 10px 44px rgba(3,8,16,.8);
  --gutter:clamp(20px,5vw,72px);
  --maxw:1240px;
}

*,*::before,*::after{box-sizing:border-box}

html,body{
  overflow-x:hidden;
  overflow-x:clip;
}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--body);
  font-size:clamp(16px,1.02vw,17.5px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  animation:pageIn .9s var(--ease) both;
}
@keyframes pageIn{from{opacity:0}to{opacity:1}}

img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.02;letter-spacing:-.028em;margin:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

.mono{font-family:var(--mono);font-weight:500;letter-spacing:.14em;text-transform:uppercase}

.skip{
  position:absolute;left:-9999px;top:12px;z-index:200;
  background:var(--accent-deep);color:var(--text-primary);
  padding:12px 20px;border-radius:8px;text-decoration:none;font-weight:500;
}
.skip:focus{left:12px}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---------- the one fixed environment layer ---------- */
.env{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 44% at 82% 8%, rgba(62,168,154,.09), transparent 68%),
    radial-gradient(70% 50% at 12% 82%, rgba(232,200,154,.055), transparent 70%),
    var(--canvas-deep);
  animation:envDrift 78s var(--ease-soft) -22s infinite alternate;
}
@keyframes envDrift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(0,-2.2%,0) scale(1.07)}
}

/* ============================ NAV ============================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;gap:clamp(16px,3vw,44px);
  padding:14px var(--gutter);
  background:linear-gradient(to bottom,rgba(5,11,20,.86),rgba(5,11,20,.5) 62%,transparent);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  transition:background .5s var(--ease);
}
.nav-brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;flex:0 0 auto}
.nav-brand img{width:44px;height:auto}
.nav-word{display:flex;flex-direction:column;line-height:1}
.nav-word b{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.22em}
.nav-word i{font-family:var(--mono);font-style:normal;font-size:9.5px;letter-spacing:.42em;color:var(--accent);margin-top:3px}

.nav-links{display:flex;gap:clamp(14px,2.1vw,30px);margin-left:auto}
.nav-links a{
  color:var(--text-secondary);text-decoration:none;font-size:14.5px;font-weight:500;
  padding:6px 2px;position:relative;transition:color .35s var(--ease);
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:var(--accent);transition:right .45s var(--ease);
}
.nav-links a:hover{color:var(--text-primary)}
.nav-links a:hover::after{right:0}

/* ============================ BUTTONS ============================ */
.btn{
  display:inline-block;
  background:var(--accent-deep);color:#F4FAF8;
  font-family:var(--body);font-weight:500;font-size:15.5px;letter-spacing:.01em;
  padding:14px 30px;border-radius:9px;border:0;
  text-decoration:none;cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,.09) inset, 0 10px 30px rgba(3,8,16,.42);
  transition:background .38s var(--ease),transform .38s var(--ease),box-shadow .38s var(--ease);
}
.btn:hover{background:#256E63;transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 16px 38px rgba(3,8,16,.5)}
.btn:active{transform:translateY(0)}
.btn-sm{padding:10px 20px;font-size:14px;flex:0 0 auto}
.btn-full{width:100%;text-align:center;padding:16px 24px;font-size:16px}
.band .btn{text-shadow:none}

@media (pointer:coarse){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .nav-links a{min-height:44px;display:inline-flex;align-items:center}
}

/* ============================ HERO ============================ */
/* Scroll distance, not seconds, is what sets the felt speed of the scrub. 1100vh gives
   1000vh of travel for a 6 second shot, so a normal flick moves the footage gently. */
.hero{position:relative;height:1100vh}

.stage{
  position:sticky;top:0;height:100vh;width:100%;
  overflow:hidden;background:var(--canvas-deep);
}

.poster{
  position:absolute;inset:0;
  background-size:cover;background-position:58% 50%;
  transition:opacity .9s var(--ease);
}

#hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:58% 50%;
  opacity:0;transition:opacity .8s var(--ease);
  will-change:transform;transform:translateZ(0);
}
.stage.video-ready #hero-video{opacity:1}
.stage.video-failed #hero-video{display:none}
/* the loop cut: the video dips out fast and returns on the slow fade. The poster behind
   it is frame one, which is exactly where the flight restarts, so the dip hides the jump */
.stage.flight-cut #hero-video{opacity:0;transition:opacity .2s var(--ease)}

/* 1. the global base scrim: no frame is ever raw behind the page */
/* The bottom of this gradient lands on the exact canvas colour, so the stage dissolves
   into the page instead of ending on a hard edge. That is what makes the hero hand over
   to the services section as one move rather than a cut. */
.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 128% 92% at 62% 46%, rgba(4,9,18,0) 34%, rgba(4,9,18,.6) 100%),
    linear-gradient(to bottom,
      rgba(4,9,18,.5) 0%, rgba(4,9,18,0) 22%,
      rgba(4,9,18,0) 66%, rgba(8,17,31,.72) 90%, #08111F 100%);
}

/* the honest loading ring */
.ring{
  position:absolute;right:calc(var(--gutter) - 4px);bottom:calc(var(--gutter) - 4px);
  width:42px;height:42px;color:var(--accent);
  transform:rotate(-90deg);opacity:.85;
  transition:opacity .5s var(--ease);
}
.stage.video-ready .ring{opacity:0}
.ring circle{transition:stroke-dashoffset .18s linear}

/* the scroll cue: it appears once the drone flight is under way and leaves the moment
   the visitor takes the controls */
.cue{
  position:absolute;right:var(--gutter);bottom:var(--gutter);
  width:34px;height:34px;color:var(--accent);opacity:0;pointer-events:none;
  transition:opacity .7s var(--ease);
  animation:cueBob 2.6s var(--ease-soft) -.6s infinite;
}
.stage.video-ready .cue,.stage.video-failed .cue{opacity:.85}
.stage.scrolled .cue{opacity:0}
@keyframes cueBob{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}

/* ---------- caption bands ---------- */
.bands{position:absolute;inset:0;pointer-events:none}

.band{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 var(--gutter);
  opacity:0;
  text-shadow:var(--tshadow);
}
.band > *{position:relative;z-index:2;max-width:min(52%,760px)}
.band .btn,.band a{pointer-events:auto}

/* 2. the per-band scrim, anchored on the text column so the tower stays bright */
.band::before{
  content:"";position:absolute;inset:-4%;pointer-events:none;z-index:1;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 60% 68% at 29% 50%,
    rgba(4,8,16,.74) 0%, rgba(4,8,16,.52) 46%, rgba(4,8,16,0) 76%);
}
.band-top{justify-content:flex-start;padding-top:19vh}
/* band one sits over the snow line, the brightest region of the whole journey, so it
   carries the deepest peak alpha. Tuned against its worst frame, not its average. */
/* Peak alphas tuned against the Seedance footage's WORST frame per band, not its average.
   That footage is brighter than the first cut, so every band needed a deeper scrim. */
.band-top::before{background:radial-gradient(ellipse 64% 62% at 29% 30%,rgba(4,8,16,.9) 0%,rgba(4,8,16,.68) 48%,rgba(4,8,16,0) 80%)}
.band-mid::before{background:radial-gradient(ellipse 64% 66% at 28% 50%,rgba(4,8,16,.9) 0%,rgba(4,8,16,.68) 48%,rgba(4,8,16,0) 80%)}
.band-low{justify-content:flex-end;padding-bottom:22vh}
.band-low::before{background:radial-gradient(ellipse 64% 64% at 29% 70%,rgba(4,8,16,.9) 0%,rgba(4,8,16,.66) 48%,rgba(4,8,16,0) 80%)}
.band-settle::before{background:radial-gradient(ellipse 66% 74% at 31% 50%,rgba(4,8,16,.88) 0%,rgba(4,8,16,.66) 48%,rgba(4,8,16,0) 80%)}

/* ch is measured on the text element itself, so it resolves against the display face */
.band h1{font-size:clamp(2.5rem,6.2vw,5.4rem);max-width:min(14ch,52vw)}
.band .h2{
  font-family:var(--display);font-weight:800;line-height:1.03;letter-spacing:-.028em;
  font-size:clamp(1.95rem,4.5vw,3.85rem);max-width:min(17ch,52vw);
}

/* 4. the chip scrim for small text over footage */
.chip{
  display:inline-block;align-self:flex-start;
  font-size:10.5px;color:var(--accent);
  background:rgba(6,12,22,.55);
  border:1px solid rgba(62,168,154,.3);
  border-radius:10px;padding:7px 14px;margin-bottom:22px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  text-shadow:0 1px 3px rgba(3,8,16,.85);
}

.settle-sub{
  margin-top:22px;color:var(--text-secondary);
  font-size:clamp(15.5px,1.5vw,18.5px);max-width:44ch;
  opacity:var(--ks,1);
}
.settle-cta{margin-top:30px;opacity:var(--kb,1)}

/* ---------- word split + the entrance per beat ---------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.vis{display:block}
.w{display:inline-block;white-space:pre;padding:.06em 0 .14em}

/* (g) approach-from-depth: the descent begins far away */
.band[data-entrance="depth"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:scale(calc(.84 + .16*var(--kc)));
}
/* (f) drift-down: echoes the fall past the floors */
.band[data-entrance="drift"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * -26px));
}
/* (c) blur-to-sharp: echoes focus arriving at the glass */
.band[data-entrance="blur"] .split{position:relative;display:block}
.band[data-entrance="blur"] .vis-soft{
  position:absolute;inset:0;filter:blur(11px);
  opacity:calc(1 - var(--k,0));
}
.band[data-entrance="blur"] .vis{opacity:var(--k,0)}
/* (e) word-by-word rise into a staged settle */
.band[data-entrance="rise"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.9,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 30px));
}

/* ---------- the static hero, a designed layout and not an apology ---------- */
.static-hero{display:none}
.static-inner{max-width:var(--maxw);margin:0 auto}
.static-h{font-size:clamp(2.05rem,7.6vw,3.4rem);max-width:15ch;margin-bottom:18px}
.static-sub{color:var(--text-secondary);max-width:40ch;margin-bottom:28px;font-size:16px}

/* THE FIVE STATIC-HERO GATES. These five strings are duplicated verbatim in main.js. */
@media (max-width: 720px),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce){
  .hero{height:auto}
  .stage{display:none}
  .static-hero{
    display:flex;align-items:flex-end;
    min-height:min(92vh,760px);
    padding:120px var(--gutter) clamp(48px,9vh,86px);
    background-image:linear-gradient(to bottom,rgba(5,11,20,.72) 0%,rgba(5,11,20,.3) 34%,rgba(5,11,20,.82) 84%,var(--canvas) 100%),url("hero-ending.jpg");
    background-size:cover;background-position:62% 50%;
  }
}

/* a scrub-capable screen that is merely short has no room for the overlays */
@media (max-height:560px){.ring,.cue{display:none}}

/* ============================ BELOW THE FOLD ============================ */
.below{position:relative}

.spine-rail{
  position:absolute;left:clamp(10px,2.4vw,40px);top:0;bottom:0;width:88px;
  color:var(--accent);pointer-events:none;z-index:0;
}
.spine{width:88px;height:100%;overflow:visible}
.spine-path{opacity:.42}
.spine-node{fill:var(--accent);opacity:0}
@media (max-width:1180px){.spine-rail{display:none}}

.sec{
  position:relative;z-index:1;
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(80px,11vh,140px) var(--gutter);
}
.sec-head{margin-bottom:clamp(38px,5.4vh,64px);max-width:var(--maxw)}
.sec-head-center{text-align:center;margin-left:auto;margin-right:auto}
.sec-head-center h2{margin-left:auto;margin-right:auto}
.kicker{font-size:10.5px;color:var(--accent);margin-bottom:16px}
.sec h2{font-size:clamp(1.85rem,3.9vw,3.05rem);max-width:19ch}
.lede{color:var(--text-secondary);font-size:clamp(16px,1.3vw,18.5px);max-width:56ch;margin-top:18px}
.lede.strong{color:var(--text-primary);font-weight:500}

/* ---------- reveal choreography ---------- */
.reveal .sec-head,.reveal .card,.reveal .step,.reveal .law,
.reveal .porque-text,.reveal .porque-art,.reveal .prop,.reveal .props-note,.reveal .materia,
.reveal .admin-intro,.reveal .admin-art,.reveal .pilar,.reveal .admin-cierre,
.reveal .faq details,.reveal .contacto-intro,.reveal .form,.reveal .laws-close{
  opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
}
.reveal.in .sec-head,.reveal.in .card,.reveal.in .step,.reveal.in .law,
.reveal.in .porque-text,.reveal.in .porque-art,.reveal.in .prop,.reveal.in .props-note,.reveal.in .materia,
.reveal.in .admin-intro,.reveal.in .admin-art,.reveal.in .pilar,.reveal.in .admin-cierre,
.reveal.in .faq details,.reveal.in .contacto-intro,.reveal.in .form,.reveal.in .laws-close{
  opacity:1;transform:none;
}
.reveal .card:nth-child(2),.reveal .step:nth-child(2),.reveal .law:nth-child(2),
.reveal .pilar:nth-child(2),
.reveal .materia:nth-child(2),.reveal .faq details:nth-child(2){transition-delay:.09s}
.reveal .card:nth-child(3),.reveal .step:nth-child(3),.reveal .pilar:nth-child(3),
.reveal .materia:nth-child(3),.reveal .faq details:nth-child(3){transition-delay:.18s}
.reveal .card:nth-child(4),.reveal .materia:nth-child(4),
.reveal .faq details:nth-child(4){transition-delay:.27s}
.reveal .materia:nth-child(5),.reveal .faq details:nth-child(5){transition-delay:.36s}
/* retire the stagger so later siblings do not hover late forever.
   The selectors repeat :nth-child so they match the delay rules' specificity. */
.reveal.done .card:nth-child(2),.reveal.done .step:nth-child(2),.reveal.done .law:nth-child(2),
.reveal.done .faq details:nth-child(2),
.reveal.done .card:nth-child(3),.reveal.done .step:nth-child(3),
.reveal.done .pilar:nth-child(2),.reveal.done .pilar:nth-child(3),
.reveal.done .materia:nth-child(3),.reveal.done .faq details:nth-child(3),
.reveal.done .card:nth-child(4),.reveal.done .materia:nth-child(4),
.reveal.done .faq details:nth-child(4),
.reveal.done .materia:nth-child(2),.reveal.done .materia:nth-child(5),
.reveal.done .faq details:nth-child(5){transition-delay:0s}

/* ---------- SERVICIOS ---------- */
/* four services in a 2x2 grid: bigger cards read more considered than four thin columns */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,28px)}
.card{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease);
}
.card-n{
  position:absolute;top:16px;left:18px;z-index:2;
  font-size:10.5px;color:var(--accent);
  background:rgba(6,12,22,.62);border:1px solid rgba(62,168,154,.32);
  border-radius:8px;padding:5px 10px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.card:hover{border-color:rgba(62,168,154,.44);transform:translateY(-5px);box-shadow:0 22px 54px rgba(3,8,16,.5)}
.card-img{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--canvas-deep)}
.card-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(8,17,31,0) 42%,rgba(14,27,46,.9) 100%);
}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.card:hover .card-img img{transform:scale(1.045)}
.card-body{padding:clamp(20px,2vw,28px);display:flex;flex-direction:column;gap:12px}
.card h3{font-size:clamp(1.12rem,1.5vw,1.36rem);letter-spacing:-.02em;line-height:1.16;max-width:20ch}
.card p{color:var(--text-secondary);font-size:15.2px;max-width:40ch}

/* ---------- POR QUÉ ---------- */
.sec-porque{padding-top:clamp(40px,6vh,70px)}
.porque-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4.6vw,72px);align-items:center}
.porque-art{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.porque-art img{width:100%;display:block;filter:saturate(.94)}
.porque-art::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(150deg,rgba(29,90,82,.24),rgba(8,17,31,.55));
}
.motes{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.5}
.motes::before,.motes::after{
  content:"";position:absolute;inset:-30%;
  background-image:
    radial-gradient(1.6px 1.6px at 18% 30%,var(--accent),transparent),
    radial-gradient(1.4px 1.4px at 62% 18%,var(--accent),transparent),
    radial-gradient(1.8px 1.8px at 82% 62%,var(--accent),transparent),
    radial-gradient(1.3px 1.3px at 34% 74%,var(--accent),transparent),
    radial-gradient(1.5px 1.5px at 72% 88%,var(--accent),transparent);
  animation:moteDrift 68s linear -14s infinite;
}
.motes::after{animation-duration:92s;animation-delay:-40s;opacity:.6}
@keyframes moteDrift{from{transform:translate3d(0,6%,0)}to{transform:translate3d(3%,-8%,0)}}
/* animation-play-state does not inherit, so the pause targets the pseudo-elements directly */
.porque-art.off .motes::before,.porque-art.off .motes::after{animation-play-state:paused}

/* ---------- PROPIEDADES ---------- */
.props-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:clamp(18px,3vw,44px);flex-wrap:wrap;
  margin-bottom:clamp(20px,3vh,32px);
}
.props-head h2{max-width:16ch}

.filters{display:flex;gap:9px;flex-wrap:wrap}
.filt{
  background:transparent;color:var(--text-secondary);
  border:1px solid var(--line);border-radius:9px;
  padding:10px 18px;min-height:42px;
  font-family:var(--body);font-size:14.5px;font-weight:500;cursor:pointer;
  transition:color .38s var(--ease),border-color .38s var(--ease),background .38s var(--ease);
}
.filt:hover{color:var(--text-primary);border-color:rgba(62,168,154,.5)}
.filt.is-on{background:var(--accent-deep);border-color:var(--accent-deep);color:#F4FAF8}
@media (pointer:coarse){.filt{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

.props-note{
  display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;
  background:rgba(29,90,82,.14);border:1px solid rgba(62,168,154,.28);
  border-radius:11px;padding:14px 18px;
  color:var(--text-secondary);font-size:14.4px;
  margin-bottom:clamp(24px,3.4vh,38px);
}
.props-note-tag{
  font-size:10px;color:var(--accent);
  border:1px solid rgba(62,168,154,.4);border-radius:6px;padding:3px 8px;flex:0 0 auto;
}

.props{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.9vw,24px)}
.prop{
  background:var(--panel);border:1px solid var(--line);
  border-radius:15px;overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease),opacity .4s var(--ease);
}
.prop:hover{border-color:rgba(62,168,154,.44);transform:translateY(-4px);box-shadow:0 20px 48px rgba(3,8,16,.48)}
.prop[hidden]{display:none}
.prop-img{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--canvas-deep)}
.prop-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.prop:hover .prop-img img{transform:scale(1.05)}
.prop-tag{
  position:absolute;top:12px;right:12px;z-index:2;
  font-size:9.5px;color:var(--text-primary);
  background:rgba(6,12,22,.72);border:1px solid rgba(159,176,196,.28);
  border-radius:7px;padding:5px 10px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.prop-body{padding:clamp(16px,1.7vw,22px);display:flex;flex-direction:column;gap:11px}
.prop-body h3{font-size:clamp(1.02rem,1.3vw,1.18rem);line-height:1.2;letter-spacing:-.018em;max-width:22ch}
.prop-price{
  font-size:clamp(1.12rem,1.5vw,1.34rem);color:var(--accent);
  font-weight:500;letter-spacing:.01em;display:flex;align-items:baseline;gap:9px;
}
.prop-price span{
  font-size:10px;color:var(--text-secondary);letter-spacing:.14em;text-transform:uppercase;
}
.specs{display:flex;flex-wrap:wrap;gap:7px}
.specs li{
  font-size:10px;color:var(--text-secondary);
  border:1px solid var(--line);border-radius:7px;padding:5px 9px;
}
.prop-desc{color:var(--text-secondary);font-size:14.4px;max-width:38ch}

.prop-more{
  margin-top:4px;align-self:flex-start;
  background:transparent;color:var(--accent);
  border:1px solid rgba(62,168,154,.4);border-radius:8px;
  padding:9px 16px;min-height:40px;
  font-family:var(--body);font-size:14px;font-weight:500;cursor:pointer;
  transition:background .38s var(--ease),border-color .38s var(--ease),color .38s var(--ease);
}
.prop-more:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#F4FAF8}
@media (pointer:coarse){.prop-more{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

.props-empty{
  text-align:center;color:var(--text-secondary);font-size:15.5px;
  padding:44px 0;
}
.props-cta{margin-top:clamp(28px,3.6vh,44px);text-align:center}

/* ---------- THE PROPERTY SHEET ---------- */
.sheet{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center}
.sheet[hidden]{display:none}
.sheet-scrim{position:absolute;inset:0;background:rgba(3,7,14,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sheet-panel{
  position:relative;
  width:min(1180px,calc(100vw - 2 * clamp(12px,3vw,48px)));
  max-height:calc(100vh - 2 * clamp(12px,3vh,48px));
  background:var(--canvas);
  border:1px solid var(--line);border-radius:18px;
  box-shadow:0 40px 110px rgba(2,5,11,.7);
  overflow:hidden;
  animation:sheetIn .45s var(--ease) both;
}
@keyframes sheetIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.sheet-scroll{max-height:inherit;overflow-y:auto;overscroll-behavior:contain;padding:clamp(20px,2.6vw,36px)}

.sheet-x{
  position:absolute;top:14px;right:14px;z-index:4;
  width:40px;height:40px;border-radius:10px;
  background:rgba(6,12,22,.78);border:1px solid var(--line);color:var(--text-primary);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:border-color .35s var(--ease),color .35s var(--ease);
}
.sheet-x:hover{border-color:var(--accent);color:var(--accent)}
.sheet-x svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

.sheet-head{margin-bottom:clamp(16px,2vh,24px);padding-right:52px}
.sheet-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.sheet-tags .prop-tag{position:static}
.sheet-head h3{font-size:clamp(1.5rem,3vw,2.3rem);letter-spacing:-.026em;line-height:1.08;max-width:24ch}

.sheet-grid{display:grid;grid-template-columns:1.55fr .95fr;gap:clamp(18px,2.4vw,32px);align-items:start}

.gal-stage{position:relative;border-radius:13px;overflow:hidden;background:var(--canvas-deep);aspect-ratio:3/2}
.gal-stage img{width:100%;height:100%;object-fit:cover;display:block}
.gal-count{
  position:absolute;left:12px;bottom:12px;
  font-size:10px;color:var(--text-primary);
  background:rgba(6,12,22,.72);border:1px solid rgba(159,176,196,.24);
  border-radius:7px;padding:5px 10px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.gal-nav{
  position:absolute;top:50%;margin-top:-21px;
  width:42px;height:42px;border-radius:11px;
  background:rgba(6,12,22,.66);border:1px solid rgba(159,176,196,.24);color:var(--text-primary);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
.gal-nav:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.gal-nav svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gal-prev{left:12px}
.gal-next{right:12px}

.gal-thumbs{display:flex;gap:9px;margin-top:11px;overflow-x:auto;padding-bottom:4px}
.gal-thumb{
  flex:0 0 auto;width:96px;aspect-ratio:3/2;
  border-radius:8px;overflow:hidden;cursor:pointer;
  border:1px solid var(--line);background:var(--canvas-deep);padding:0;
  opacity:.55;transition:opacity .35s var(--ease),border-color .35s var(--ease);
}
.gal-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gal-thumb:hover{opacity:.85}
.gal-thumb.is-on{opacity:1;border-color:var(--accent)}

.sheet-block{margin-top:clamp(22px,2.8vh,34px)}
.sheet-block h4,.sheet-card h4{
  font-family:var(--display);font-weight:700;letter-spacing:-.018em;
  font-size:clamp(1rem,1.3vw,1.15rem);margin-bottom:14px;
  padding-left:12px;border-left:2px solid var(--accent);
}
.sheet-desc{color:var(--text-secondary);font-size:15.4px;line-height:1.68;max-width:66ch}

.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.feat{
  background:var(--panel);border:1px solid var(--line);border-radius:11px;
  padding:13px 15px;display:flex;flex-direction:column;gap:4px;
}
.feat-k{font-size:9.5px;color:var(--text-secondary);font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase}
.feat-v{font-size:16.5px;color:var(--text-primary);font-weight:500}

/* ---------- ubicación y entorno ---------- */
.mapa{
  position:relative;border-radius:13px;overflow:hidden;
  border:1px solid var(--line);background:var(--canvas-deep);
  aspect-ratio:16/9;margin-bottom:20px;
}
.mapa iframe{
  width:100%;height:100%;border:0;display:block;
  /* the tiles ship light; this turns them into the site's own night map */
  filter:invert(1) hue-rotate(185deg) saturate(.62) brightness(.92) contrast(1.05);
}
/* our own pin sits over the map, so it keeps the brand green instead of inverting */
.mapa-pin{
  position:absolute;left:50%;top:50%;
  width:26px;height:34px;margin:-34px 0 0 -13px;
  color:var(--accent);pointer-events:none;
  filter:drop-shadow(0 4px 10px rgba(3,8,16,.75));
}
.mapa-pin svg{width:100%;height:100%;fill:currentColor}
.mapa-pin svg circle{fill:var(--canvas-deep)}
/* top left, so it never sits on OpenStreetMap's attribution bar, which must stay readable */
.mapa-nota{
  position:absolute;left:10px;top:10px;
  font-size:9px;color:var(--text-primary);
  background:rgba(6,12,22,.78);border:1px solid rgba(159,176,196,.24);
  border-radius:7px;padding:5px 9px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
@media (prefers-reduced-motion: reduce){.mapa iframe{filter:invert(1) hue-rotate(185deg) saturate(.62)}}

.zona-donde{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  color:var(--text-primary);font-size:16px;margin-bottom:14px;
}
.zona-lbl,.zona-sub{font-size:9.5px;color:var(--accent);flex:0 0 auto}
.zona-sub{display:block;margin:22px 0 12px}

.cerca{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.cerca li{
  display:flex;align-items:center;gap:12px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:11px 14px;
}
.cerca-ico{flex:0 0 auto;width:20px;height:20px;color:var(--accent)}
.cerca-ico svg{
  width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.cerca-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.cerca-n{color:var(--text-primary);font-size:14.4px;line-height:1.25}
.cerca-t{color:var(--text-secondary);font-size:12.4px;font-family:var(--mono);letter-spacing:.04em}
.zona-map{margin-top:16px}
.zona-map .share-b{flex:0 0 auto;padding-left:22px;padding-right:22px}

@media (max-width:620px){.cerca{grid-template-columns:1fr}}

.sheet-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:0}
.sheet-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:clamp(16px,1.8vw,22px)}
.sheet-op{font-size:9.5px;color:var(--accent);margin-bottom:6px}
.sheet-price{
  font-size:clamp(1.5rem,2.4vw,2rem);color:var(--text-primary);font-weight:500;
  letter-spacing:-.01em;margin-bottom:18px;
  padding-bottom:16px;border-bottom:1px solid var(--line);
}
.sheet-note{color:var(--text-secondary);font-size:14px;margin-bottom:14px}
.sheet-form{display:flex;flex-direction:column;gap:12px}
.sheet-reply{font-size:9px;color:var(--text-secondary);text-align:center;margin-top:2px}

.share{display:flex;gap:9px;flex-wrap:wrap}
.share-b{
  flex:1 1 auto;text-align:center;
  background:transparent;color:var(--text-secondary);
  border:1px solid var(--line);border-radius:9px;
  padding:11px 14px;min-height:42px;
  font-family:var(--body);font-size:14px;font-weight:500;
  text-decoration:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.share-b:hover{color:var(--accent);border-color:rgba(62,168,154,.5)}

@media (max-width:900px){
  .sheet-grid{grid-template-columns:1fr}
  .sheet-side{position:static}
  .feats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .sheet-panel{width:100vw;max-height:100vh;border-radius:0;border:0}
  .sheet-scroll{max-height:100vh}
  .feats{grid-template-columns:1fr}
  .gal-nav{width:38px;height:38px;margin-top:-19px}
}
body.sheet-open{overflow:hidden}

/* ---------- MATERIAS LEGALES ---------- */
.materias{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,1.9vw,24px);align-items:start}
.materia{
  background:var(--panel);
  border:1px solid var(--line);
  border-left:2px solid var(--accent-deep);
  border-radius:15px;
  padding:clamp(22px,2.3vw,30px);
  transition:border-left-color .5s var(--ease),border-color .5s var(--ease),transform .5s var(--ease);
}
.materia:hover{border-left-color:var(--accent);border-color:rgba(62,168,154,.34);transform:translateX(3px)}
.materia-wide{grid-column:1 / -1}

.materia-top{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.materia-ico{flex:0 0 auto;width:34px;height:34px;color:var(--accent);display:block}
.materia-ico svg{
  width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
.materia h3{font-size:clamp(1.08rem,1.4vw,1.28rem);letter-spacing:-.02em;line-height:1.18;max-width:20ch}

.materia-list{display:flex;flex-direction:column;gap:11px}
.materia-list li{
  position:relative;padding-left:26px;
  color:var(--text-secondary);font-size:15.2px;line-height:1.45;
}
/* the tick is drawn from two borders, so it stays crisp and takes the accent exactly */
.materia-list li::before{
  content:"";position:absolute;left:2px;top:.42em;
  width:5px;height:9px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);
}
.materia-wide .materia-list{flex-direction:row;flex-wrap:wrap;gap:11px 34px}

.materias-cta{margin-top:clamp(28px,3.6vh,44px)}

/* ---------- ADMINISTRACIÓN ----------
   Deliberately not the boxed-card skeleton the materias section uses: open columns
   under a hairline, so two nearby sections never read as the same template.        */
.admin-top{
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(26px,4vw,64px);align-items:center;
  margin-bottom:clamp(38px,5.4vh,68px);
}
.admin-art{position:relative;border-radius:15px;overflow:hidden;border:1px solid var(--line)}
.admin-art img{width:100%;display:block;filter:saturate(.92)}
.admin-art::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(150deg,rgba(29,90,82,.22),rgba(8,17,31,.5));
}

.pilares{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,48px)}
.pilar{position:relative;padding-top:22px;border-top:1px solid var(--line)}
.pilar::before{
  content:"";position:absolute;top:-1px;left:0;width:44px;height:2px;background:var(--accent);
}
.pilar-n{font-size:10.5px;color:var(--accent);margin-bottom:12px}
.pilar h3{
  font-size:clamp(1.16rem,1.6vw,1.42rem);letter-spacing:-.02em;
  margin-bottom:16px;max-width:14ch;
}
.pilar .materia-list{gap:13px}
.pilar .materia-list li{font-size:14.8px;max-width:34ch}

.admin-cierre{
  margin-top:clamp(34px,4.6vh,58px);
  display:flex;align-items:center;gap:clamp(20px,3vw,48px);flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:clamp(26px,3.4vh,38px);
}
.admin-nota{
  flex:1 1 380px;color:var(--text-secondary);
  font-size:15px;line-height:1.62;max-width:62ch;
}

@media (max-width:1000px){
  .admin-top{grid-template-columns:1fr}
  .admin-art{order:-1}
  .pilares{grid-template-columns:1fr;gap:30px}
  .pilar .materia-list li{max-width:none}
}

/* ---------- CÓMO TRABAJAMOS ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px)}
.step{position:relative;padding-top:8px}
.step-art{width:76px;height:76px;margin-bottom:20px}
.step-art svg{width:100%;height:100%;overflow:visible}
/* the marks are human now: a conversation, a handshake, an open eye */
.step-art .dr{
  fill:none;stroke:var(--accent);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len,160);stroke-dashoffset:var(--len,160);
}
.step-art .nd{fill:none;stroke:var(--accent);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.reveal.in .step-art .dr{animation:drawLine 1.15s var(--ease) forwards}
.reveal.in .step:nth-child(2) .step-art .dr{animation-delay:.13s}
.reveal.in .step:nth-child(3) .step-art .dr{animation-delay:.26s}
.reveal.in .step-art .nd{animation:nodeIn .5s var(--ease) .78s forwards}
@keyframes drawLine{to{stroke-dashoffset:0}}
@keyframes nodeIn{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
.step-n{font-size:10.5px;color:var(--text-secondary);margin-bottom:10px}
.step h3{font-size:clamp(1.16rem,1.6vw,1.42rem);margin-bottom:12px;max-width:16ch}
.step p{color:var(--text-secondary);font-size:15.2px;max-width:34ch}

/* ---------- LEYES ---------- */
.sec-leyes{position:relative}
.laws{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,26px)}
.law{
  position:relative;
  background:linear-gradient(160deg,rgba(29,90,82,.16),rgba(14,27,46,.9));
  border:1px solid var(--line);border-left:2px solid var(--accent-deep);
  border-radius:14px;padding:clamp(22px,2.4vw,34px);
  transition:border-left-color .5s var(--ease),transform .5s var(--ease);
}
.law:hover{border-left-color:var(--accent);transform:translateX(3px)}
.law-id{font-size:11px;color:var(--accent);margin-bottom:12px}
.law h3{font-size:clamp(1.1rem,1.4vw,1.3rem);margin-bottom:13px;max-width:22ch}
.law p{color:var(--text-secondary);font-size:15.2px;max-width:46ch}
.laws-close{
  margin-top:clamp(26px,3.4vh,40px);
  font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.15rem,2vw,1.6rem);color:var(--text-primary);
}

/* ---------- PREGUNTAS ---------- */
.faq{border-top:1px solid var(--line);max-width:900px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;
  padding:22px 44px 22px 2px;position:relative;
  font-family:var(--display);font-weight:700;letter-spacing:-.018em;
  font-size:clamp(1.02rem,1.5vw,1.22rem);line-height:1.34;
  transition:color .4s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;
  width:11px;height:11px;margin-top:-7px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform .42s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq details p{padding:0 44px 24px 2px;color:var(--text-secondary);font-size:15.6px;max-width:62ch}

/* ---------- CONTACTO ---------- */
.sec-contacto{padding-bottom:clamp(70px,9vh,110px)}
.contacto-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,4.4vw,68px);align-items:start}
.wa-line{margin-top:26px}
.wa{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;
  color:var(--accent);text-decoration:none;font-weight:500;font-size:15.5px;
  border-bottom:1px solid rgba(62,168,154,.4);padding-bottom:2px;
  transition:color .4s var(--ease),border-color .4s var(--ease);
}
.wa:hover{color:var(--accent-hover);border-color:var(--accent-hover)}

.contact-direct{margin-top:32px;display:flex;flex-direction:column;gap:15px}
.contact-direct li{display:flex;flex-direction:column;gap:4px}
.contact-lbl{font-size:9.5px;color:var(--text-secondary)}
.contact-direct a,.contact-plain{
  color:var(--text-primary);text-decoration:none;font-size:16px;
  transition:color .35s var(--ease);
}
.contact-direct a{width:fit-content}
.contact-direct a:hover{color:var(--accent)}

.foot-contact{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px}
.foot-contact a{
  color:var(--accent);text-decoration:none;font-size:14.6px;
  transition:color .35s var(--ease);
}
.foot-contact a:hover{color:var(--accent-hover)}
@media (pointer:coarse){
  .contact-direct a,.foot-contact a{min-height:44px;display:inline-flex;align-items:center}
}

.form{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:clamp(22px,2.6vw,34px);
  display:flex;flex-direction:column;gap:16px;
  box-shadow:0 26px 70px rgba(3,8,16,.4);
}
.field{display:flex;flex-direction:column;gap:7px;flex:1 1 0;min-width:0}
.field-row{display:flex;gap:16px}
.field label{font-size:12.5px;color:var(--text-secondary);font-weight:500;letter-spacing:.01em}
.field input,.field select,.field textarea{
  background:var(--canvas);color:var(--text-primary);
  border:1px solid var(--line);border-radius:9px;
  padding:13px 14px;min-height:46px;
  font-family:var(--body);font-size:15.4px;width:100%;
  transition:border-color .38s var(--ease),background .38s var(--ease);
}
.field textarea{min-height:104px;resize:vertical;line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:#6C7E93}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent);background:#0A1524;outline:none;
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.field select{appearance:none;cursor:pointer;padding-right:42px;text-overflow:ellipsis;
  background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px,calc(100% - 13px) 21px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#C4675F}
.form-done{
  margin-top:2px;text-align:center;font-size:15px;color:var(--accent);
  background:rgba(29,90,82,.2);border:1px solid rgba(62,168,154,.34);
  border-radius:9px;padding:14px 16px;
}

/* ---------- FOOTER ---------- */
.foot{
  position:relative;z-index:1;
  border-top:1px solid var(--line);
  padding:clamp(48px,7vh,80px) var(--gutter) 34px;
  background:linear-gradient(to bottom,rgba(5,11,20,.5),rgba(5,11,20,.92));
}
.foot-grid{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(28px,4vw,64px);
}
.foot-brand img{width:52px;margin-bottom:16px}
.foot-word{font-size:11px;color:var(--text-primary);margin-bottom:12px}
.foot-line{color:var(--text-secondary);font-size:14.4px;max-width:46ch}
.foot-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 22px;align-content:start}
.foot-nav a{
  color:var(--text-secondary);text-decoration:none;font-size:14.4px;
  transition:color .35s var(--ease);
}
.foot-nav a:hover{color:var(--accent)}
.foot-fine{
  max-width:var(--maxw);margin:clamp(34px,4.6vh,52px) auto 0;
  padding-top:22px;border-top:1px solid var(--line);
  color:#7387A0;font-size:12.6px;
}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1120px){
  .props{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1000px){
  .cards,.steps{grid-template-columns:1fr}
  .laws,.materias{grid-template-columns:1fr}
  .props-head{align-items:flex-start}
  .porque-grid,.contacto-grid{grid-template-columns:1fr}
  .porque-art{order:-1}
  .foot-grid{grid-template-columns:1fr}
  .nav-links{display:none}
  .nav{gap:12px}
  .btn-sm{margin-left:auto}
  .card p,.step p,.law p{max-width:none}
}
@media (max-width:620px){
  .field-row{flex-direction:column;gap:16px}
  .foot-nav{grid-template-columns:1fr}
  .props{grid-template-columns:1fr}
  .prop-desc{max-width:none}
}

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0s !important;
    scroll-behavior:auto !important;
  }
  body{animation:none;opacity:1}
  .reveal .sec-head,.reveal .card,.reveal .step,.reveal .law,
  .reveal .porque-text,.reveal .porque-art,.reveal .prop,.reveal .props-note,.reveal .materia,
.reveal .admin-intro,.reveal .admin-art,.reveal .pilar,.reveal .admin-cierre,
  .reveal .faq details,.reveal .contacto-intro,.reveal .form,.reveal .laws-close{
    opacity:1;transform:none;
  }
  .step-art .dr{stroke-dashoffset:0}
  .step-art .nd{opacity:1}
  .spine-path{opacity:.42}
  .spine-node{opacity:1}
  .env{animation:none}
  /* positional transforms are re-declared, never blanket-cleared */
  .ring{transform:rotate(-90deg)}
}

/* pinned by JS when reduced motion is switched on mid-session */
body.pinned .step-art .dr{stroke-dashoffset:0 !important;animation:none !important}
body.pinned .step-art .nd{opacity:1 !important;animation:none !important}
body.pinned .spine-node{opacity:1 !important}

/* off-screen and hidden-tab pauses */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* the spam trap: never seen, never focused, never read aloud. Only bots fill it. */
.trampa{
  position:absolute;left:-9999px;top:auto;
  width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;
}