/* ============================================================
   NAKATOMI ESTUDIOS — hoja compartida (páginas internas)
   Coherente con el home/filosofía: mismos tokens y componentes.
   Mobile-first.
   ============================================================ */
:root{
  --tinta:#131210;
  --tinta-2:#1c1a17;
  --crema:#EDE5D4;
  --crema-2:#e3d9c4;
  --crema-soft:#cdc4ae;
  --sol:#FF3B1D;
  --granate:#9E2417;
  --hormigon:#9b958a;
  --blanco:#ffffff;
  --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --lh-display:.92;  /* títulos Anton grandes */
  --lh-title:1;      /* títulos Anton medios */
  --lh-hero:1.08;    /* h1 de page-hero: multilínea con tildes (Ó) — necesita aire o se cortan */
  --lh-text:1.6;     /* texto corrido */
  --section-y:clamp(72px,9vw,120px);
  --gutter:clamp(20px,3vw,32px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{
  background:var(--tinta);
  color:var(--crema);
  font-family:'Archivo',sans-serif;
  font-size:17px;
  line-height:var(--lh-text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
::selection{background:var(--sol);color:var(--tinta)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus{outline:none}
:focus-visible{outline:2px solid var(--sol);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--sol);color:var(--tinta);
      font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;
      text-transform:uppercase;padding:12px 18px;z-index:999}
.skip:focus{left:16px;top:16px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.u{text-transform:none;font-weight:inherit;font-style:inherit}   /* unidades métricas: siempre en minúscula */
.mono{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.16em;font-size:12.5px}
.display{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;line-height:var(--lh-display);letter-spacing:-.005em}
.sol-txt{color:var(--sol)}
.tabular{font-variant-numeric:tabular-nums}

/* ---------- SCROLL PROGRESS ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--sol);z-index:200;
          transition:width .12s linear;will-change:width}

/* ---------- NAV ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:100;
       transition:background .35s var(--ease),border-color .35s var(--ease);
       border-bottom:1px solid transparent}
header.scrolled{background:rgba(19,18,16,.85);backdrop-filter:blur(14px) saturate(120%);
                -webkit-backdrop-filter:blur(14px) saturate(120%);
                border-bottom:1px solid rgba(237,229,212,.1)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{font-family:'Anton',sans-serif;font-size:25px;letter-spacing:.04em;text-transform:uppercase;
      display:flex;align-items:flex-end;gap:8px;color:var(--crema);transition:opacity .2s var(--ease)}
.logo:hover{opacity:.82}
.logo .sunmark{width:18px;height:9px;background:var(--sol);border-radius:18px 18px 0 0;margin-bottom:4px}
.logo-img{height:clamp(20px,3.2vw,23px);width:auto;display:block}
.logo-foot{height:clamp(74px,11vw,104px);width:auto;display:block}
.navlinks{display:flex;gap:32px;align-items:center}
.navlinks a.mono{position:relative;transition:color .2s var(--ease);padding:6px 0}
.navlinks a.mono::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
                        background:var(--sol);transform:scaleX(0);transform-origin:left;
                        transition:transform .35s var(--ease-out)}
.navlinks a.mono:hover{color:var(--sol)}
.navlinks a.mono:hover::after{transform:scaleX(1)}
.navlinks a.mono.active{color:var(--sol)}
.navlinks a.mono.active::after{transform:scaleX(1)}
.btn{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.14em;
     font-size:12.5px;font-weight:700;background:var(--sol);color:var(--tinta);
     padding:14px 22px;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;
     transition:transform .25s var(--ease-out),background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease);
     box-shadow:0 0 0 0 rgba(255,59,29,0)}
.btn:hover{background:var(--blanco);transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(255,59,29,.45)}
.btn:active{transform:translateY(0)}
.btn .arr{display:inline-block;transition:transform .3s var(--ease-out)}
.btn:hover .arr{transform:translateX(4px)}
.btn.ghost{background:transparent;color:var(--crema);border:1px solid rgba(237,229,212,.4);box-shadow:none}
.btn.ghost:hover{background:var(--crema);color:var(--tinta);box-shadow:none}
.btn.dark{background:var(--tinta);color:var(--crema);box-shadow:none}
.btn.dark:hover{background:var(--sol);color:var(--tinta);box-shadow:none}
.burger{display:none;background:none;border:1px solid rgba(237,229,212,.2);color:var(--crema);
        width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center;
        padding:0;transition:border-color .2s var(--ease),background .2s var(--ease)}
.burger:hover{border-color:var(--sol)}
.burger svg{display:block}

/* ---------- switch de idioma ES/EN ---------- */
.langsw{display:inline-flex;align-items:center;gap:5px;padding:6px 0;font-family:'JetBrains Mono',monospace;
  font-size:12px;letter-spacing:.1em;color:var(--hormigon)}
.langsw .lang{background:none;border:0;color:var(--hormigon);cursor:pointer;font:inherit;text-transform:uppercase;
  padding:2px 3px;transition:color .2s var(--ease)}
.langsw .lang:hover{color:var(--crema)}
.langsw .lang.on{color:var(--sol)}
.langsw .sep{opacity:.5}
.ig-link{display:inline-flex;align-items:center;margin-left:7px;color:var(--hormigon);transition:color .2s var(--ease)}
.ig-link:hover{color:var(--sol)}
.ig-link svg{display:block}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
/* Lightbox de galería */
.lightbox{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;
  background:rgba(19,18,16,.93);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:clamp(14px,4vw,52px);cursor:zoom-out}
.lightbox.open{display:flex;animation:lbIn .25s var(--ease)}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lightbox__img{max-width:100%;max-height:100%;object-fit:contain;cursor:default;
  box-shadow:0 24px 90px rgba(0,0,0,.55);animation:lbZoom .3s var(--ease-out)}
@keyframes lbZoom{from{transform:scale(.94);opacity:.4}to{transform:scale(1);opacity:1}}
.lightbox__close{position:absolute;top:clamp(12px,2.2vw,24px);right:clamp(12px,2.2vw,24px);
  width:46px;height:46px;border:1px solid rgba(237,229,212,.32);background:rgba(19,18,16,.55);
  color:var(--crema);font-size:26px;line-height:1;cursor:pointer;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.lightbox__close:hover{background:var(--sol);color:var(--tinta);border-color:var(--sol)}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;
  border:1px solid rgba(237,229,212,.3);background:rgba(19,18,16,.5);color:var(--crema);
  font-size:32px;line-height:1;cursor:pointer;border-radius:50%;
  display:flex;align-items:center;justify-content:center;padding-bottom:3px;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.lightbox__nav:hover{background:var(--sol);color:var(--tinta);border-color:var(--sol)}
.lightbox__prev{left:clamp(10px,2vw,26px)}
.lightbox__next{right:clamp(10px,2vw,26px)}
@media(max-width:560px){.lightbox__nav{width:44px;height:44px;font-size:26px}
  .lightbox__prev{left:8px}.lightbox__next{right:8px}}

/* ---------- submenú desplegable (Platós) ---------- */
.has-sub{position:relative;align-self:stretch;display:inline-flex;align-items:center}
.has-sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:18px}
.submenu{position:absolute;top:100%;left:-14px;min-width:212px;display:flex;flex-direction:column;
  background:rgba(19,18,16,.97);backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%);
  border:1px solid rgba(237,229,212,.12);padding:8px 0;opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease-out);z-index:120}
.has-sub:hover .submenu,.has-sub:focus-within .submenu{opacity:1;transform:none;pointer-events:auto}
.submenu a{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.14em;font-size:11.5px;
  color:var(--crema-soft);padding:11px 22px;white-space:nowrap;transition:color .2s var(--ease),background .2s var(--ease)}
.submenu a:hover{color:var(--sol);background:rgba(255,59,29,.06)}
@media(max-width:880px){
  .has-sub{display:block;align-self:auto;width:100%}
  .has-sub::after{display:none}
  .submenu{position:static;opacity:1;transform:none;pointer-events:auto;min-width:0;
    background:none;border:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0 0 6px}
  .submenu a{padding:12px 0 12px 48px;font-size:12px;color:var(--hormigon)}
}

/* ---------- shared eyebrow tag ---------- */
.sect-tag{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.16em;font-size:12.5px;
          color:var(--granate);margin-bottom:30px;display:flex;align-items:center;gap:12px}
.sect-tag.light{color:var(--sol)}
.sect-tag .dot{width:9px;height:9px;background:var(--sol);border-radius:50%;flex-shrink:0}

/* ---------- breadcrumbs ---------- */
.crumbs{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
        color:var(--hormigon);display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:24px}
.crumbs a{transition:color .2s var(--ease)}
.crumbs a:hover{color:var(--sol)}
.crumbs .sep{opacity:.45}
.crumbs [aria-current]{color:var(--crema)}

/* ============================================================
   PAGE HERO (compacto, oscuro, tipográfico)
   ============================================================ */
.page-hero{position:relative;overflow:hidden;
           padding:clamp(118px,17vh,176px) 0 clamp(40px,6vw,72px)}
.page-hero .grid-bg{position:absolute;inset:0;z-index:0;opacity:.05;pointer-events:none;
  background-image:linear-gradient(var(--crema) 1px,transparent 1px),linear-gradient(90deg,var(--crema) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(110% 100% at 18% 12%,#000 30%,transparent 80%);
          mask-image:radial-gradient(110% 100% at 18% 12%,#000 30%,transparent 80%)}
.page-hero .glow{position:absolute;right:-10%;top:-30%;width:60vw;height:60vw;max-width:760px;max-height:760px;z-index:0;
  background:radial-gradient(closest-side,rgba(255,59,29,.16),transparent 70%);pointer-events:none}
.page-hero .wrap{position:relative;z-index:2}
/* Vídeo de fondo del hero (desktop; en móvil se muestra el póster vía JS) */
.page-hero .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  z-index:0;background:var(--tinta)}
/* desktop: vídeo desplazado a la derecha (el texto va sobre el negro de la izquierda) */
@media(min-width:768px){.page-hero .hero-video{object-position:right center;transform:translateX(14%)}}
/* velo coherente con el home: negro a la izquierda + degradado a negro por abajo (ambas versiones) */
.page-hero .hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 52%,rgba(19,18,16,.5) 80%,var(--tinta) 100%),
    linear-gradient(100deg,rgba(19,18,16,.96) 24%,rgba(19,18,16,.72) 52%,rgba(19,18,16,.30) 100%)}
.page-hero.has-video .grid-bg{opacity:.04}
.ph-eyebrow{display:inline-flex;align-items:center;gap:14px;color:var(--crema-soft);margin-bottom:24px}
.ph-eyebrow .ln{height:1px;width:40px;background:var(--sol)}
.page-hero h1{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;line-height:var(--lh-hero);
  letter-spacing:-.01em;font-size:clamp(40px,8vw,108px);max-width:16ch}
.page-hero h1 .sol{color:var(--sol)}
.page-hero .lead{max-width:56ch;margin-top:clamp(22px,2.6vw,32px);font-size:clamp(16px,1.45vw,21px);color:var(--crema-soft)}
.page-hero .lead em{color:var(--crema);font-style:normal;font-weight:600}
.page-hero .ph-meta{margin-top:clamp(26px,3vw,38px);display:flex;gap:clamp(20px,3vw,44px);flex-wrap:wrap}
.page-hero .ph-meta .m{display:flex;flex-direction:column;gap:6px}
.page-hero .ph-meta .mv{font-family:'Anton',sans-serif;font-size:clamp(28px,3vw,42px);line-height:var(--lh-title);
        color:var(--crema);font-variant-numeric:tabular-nums}
.page-hero .ph-meta .mv b{color:var(--sol);font-weight:400}
.page-hero .ph-meta .ml{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;
        text-transform:uppercase;color:var(--hormigon)}

/* ============================================================
   SECTION SHELLS
   ============================================================ */
.sect{padding:var(--section-y) 0}
.sect.cream{background:var(--crema);color:var(--tinta)}
.sect.dark{background:var(--tinta);color:var(--crema)}
.sect h2{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;line-height:var(--lh-title);
         letter-spacing:-.01em;font-size:clamp(34px,5vw,72px)}
.sect.cream h2{color:var(--tinta)}
.sect.dark h2{color:var(--crema)}
.sect h2 .sol{color:var(--sol)}
.sect .intro{max-width:60ch;margin-top:22px;font-size:clamp(16px,1.3vw,19px)}
.sect.cream .intro{color:#3a352d}
.sect.dark .intro{color:var(--crema-soft)}

/* ============================================================
   PLATÓS — overview grid (índice)
   ============================================================ */
.plato-index{display:grid;grid-template-columns:1fr;gap:18px}
.plato-card{display:flex;flex-direction:column;overflow:hidden;color:var(--tinta);
  background:var(--crema);border:1px solid rgba(19,18,16,.12);
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.plato-card:hover{transform:translateY(-6px);border-color:rgba(255,59,29,.45);
  box-shadow:0 30px 64px -30px rgba(0,0,0,.75)}
.plato-card .media{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--tinta)}
.plato-card .media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--ease-out)}
.plato-card:hover .media img{transform:scale(1.05)}
.plato-card .media .idx{position:absolute;top:14px;right:14px;color:var(--crema);
  background:rgba(19,18,16,.5);padding:5px 11px;backdrop-filter:blur(5px)}
.plato-card .body{display:flex;flex-direction:column;flex:1;padding:clamp(22px,2.4vw,32px)}
.plato-card .ptag{color:var(--sol);margin-bottom:8px}
.plato-card .pname{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(30px,3.6vw,48px);line-height:var(--lh-title);letter-spacing:-.005em}
.plato-card p{color:#3a352d;font-size:clamp(14px,1.1vw,16px);max-width:48ch;margin-top:12px}
.plato-card .specs{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}
.plato-card .spec{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid rgba(19,18,16,.2);padding:6px 11px;color:#3a352d;transition:border-color .3s var(--ease)}
.plato-card:hover .spec{border-color:rgba(255,59,29,.5)}
.plato-card .arrow{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--sol);margin-top:auto;
  padding-top:22px;display:inline-flex;align-items:center;gap:10px;letter-spacing:.1em;text-transform:uppercase}
.plato-card .arrow::after{content:"";display:inline-block;width:24px;height:1px;background:currentColor;
  transition:width .3s var(--ease-out)}
.plato-card:hover .arrow::after{width:40px}
@media(min-width:760px){
  /* todas las cards en formato horizontal (imagen + texto) */
  .plato-card{flex-direction:row;min-height:clamp(280px,27vw,360px)}
  .plato-card .media{flex:1 1 54%;aspect-ratio:auto}
  .plato-card .body{flex:1 1 46%;justify-content:center}
}

/* ============================================================
   PLATÓ DETAIL — specs + features + gallery
   ============================================================ */
.spec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(237,229,212,.12);
  border:1px solid rgba(237,229,212,.12)}
.spec-grid .cell{background:var(--tinta);padding:clamp(22px,2.6vw,34px) clamp(18px,2vw,26px);
  transition:background .35s var(--ease)}
.spec-grid .cell:hover{background:rgba(255,59,29,.05)}
.spec-grid .sv{font-family:'Anton',sans-serif;font-size:clamp(30px,3.4vw,50px);line-height:var(--lh-display);color:var(--crema);
  font-variant-numeric:tabular-nums}
.spec-grid .sv b{color:var(--sol);font-weight:400}
.spec-grid .sl{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--hormigon);margin-top:12px}

.feature-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:8px}
.feature{display:flex;gap:16px;align-items:flex-start;padding:clamp(22px,2.4vw,30px) clamp(6px,1.6vw,30px);
  border-top:1px solid rgba(19,18,16,.16)}
.sect.dark .feature{border-top-color:rgba(237,229,212,.14)}
.feature:nth-child(odd){border-right:1px solid rgba(19,18,16,.16)}
.sect.dark .feature:nth-child(odd){border-right-color:rgba(237,229,212,.14)}
.feature .fi{flex-shrink:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--sol);color:var(--sol);border-radius:50%;font-family:'JetBrains Mono',monospace;font-size:12px;
  transition:background .25s var(--ease),color .25s var(--ease)}
/* iconos SVG de "Qué incluye" (los .fi de servicios siguen siendo texto: 01—04) */
.feature .fi svg{width:15px;height:15px;display:block}
.feature:hover .fi{background:var(--sol);color:var(--tinta)}
.feature h3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(18px,1.7vw,24px);
  line-height:var(--lh-title);margin-bottom:8px}
.feature p{font-size:clamp(14px,1.1vw,16px);max-width:40ch}
.sect.cream .feature p{color:#3a352d}
.sect.dark .feature p{color:var(--crema-soft)}

/* gallery */
/* galería: paneles que se expanden al hover (borde cuadrado) */
.gallery{display:flex;gap:10px;height:clamp(300px,40vw,500px)}
.gallery a{position:relative;flex:1 1 0;min-width:0;overflow:hidden;display:block;background:var(--tinta-2);
  border-radius:0;transition:flex-grow .55s var(--ease-out)}
.gallery a:hover{flex-grow:3.6}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.gallery a:hover img{transform:scale(1.05)}
.gallery .cap{position:absolute;left:14px;bottom:12px;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--crema);background:rgba(19,18,16,.6);
  padding:6px 10px;backdrop-filter:blur(4px);white-space:nowrap;
  opacity:0;transform:translateY(5px);transition:opacity .4s var(--ease),transform .4s var(--ease-out)}
.gallery a:hover .cap{opacity:1;transform:none}

/* ============================================================
   PLANOS técnicos (sección reutilizable)
   ============================================================ */
.planos-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.plano-card{background:var(--crema);padding:clamp(16px,2vw,26px);border:1px solid rgba(237,229,212,.1);
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease)}
.plano-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -28px rgba(0,0,0,.6)}
.plano-card img{width:100%;height:auto;display:block}
.plano-card figcaption{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta);margin-top:14px;display:flex;align-items:center;gap:10px}
.plano-card figcaption::before{content:"";width:8px;height:8px;background:var(--sol);border-radius:50%;flex-shrink:0}
@media(max-width:720px){.planos-grid{grid-template-columns:1fr}}

/* ============================================================
   BACKSTAGE · filas de espacios (zigzag imagen/texto)
   ============================================================ */
.bs-spaces{display:flex;flex-direction:column;gap:clamp(44px,6vw,84px);margin-top:clamp(40px,5vw,64px)}
.bs-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,64px);align-items:center}
.bs-row .media{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--tinta-2);border:1px solid rgba(237,229,212,.1)}
.bs-row .media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease-out)}
.bs-row .media:hover img{transform:scale(1.04)}
.bs-row .ix{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--sol)}
.bs-row h3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;line-height:var(--lh-title);
  letter-spacing:-.005em;font-size:clamp(28px,3.4vw,46px);color:var(--crema);margin:14px 0 16px}
.bs-row p{color:var(--crema-soft);font-size:clamp(15px,1.2vw,18px);max-width:46ch}
.bs-row:nth-of-type(even) .media{order:2}
@media(max-width:760px){
  .bs-row{grid-template-columns:1fr;gap:20px}
  .bs-row:nth-of-type(even) .media{order:0}
}

/* prev/next plató nav */
.plato-pager{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:clamp(36px,4vw,56px)}
.plato-pager a{border:1px solid rgba(237,229,212,.16);padding:clamp(22px,2.4vw,30px);
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.plato-pager a:hover{border-color:rgba(255,59,29,.5);background:rgba(255,59,29,.04)}
.plato-pager .pl{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--hormigon)}
.plato-pager .pt{font-family:'Anton',sans-serif;font-size:clamp(22px,2.4vw,32px);text-transform:uppercase;color:var(--crema);margin-top:8px}
.plato-pager a.next{text-align:right}

/* ============================================================
   SERVICIOS grid
   ============================================================ */
.serv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.serv-card{border:1px solid rgba(237,229,212,.14);padding:clamp(26px,2.8vw,38px);
  min-height:clamp(190px,22vw,240px);display:flex;flex-direction:column;
  transition:border-color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease-out)}
.serv-card:hover{border-color:rgba(255,59,29,.5);background:rgba(255,59,29,.04);transform:translateY(-4px)}
.serv-card .sn{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;color:var(--hormigon)}
.serv-card h3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(22px,2.1vw,30px);
  line-height:var(--lh-title);color:var(--crema);margin-top:auto;padding-top:26px}
.serv-card p{color:var(--crema-soft);font-size:clamp(14px,1.1vw,16px);margin-top:14px;max-width:38ch}

/* ============================================================
   CONTACTO
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:start}
.contact-info .ci-block{padding:24px 0;border-top:1px solid rgba(237,229,212,.14)}
.contact-info .ci-block:first-of-type{border-top:none;padding-top:0}
.contact-info .cil{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--hormigon);margin-bottom:10px}
.contact-info .civ{font-size:clamp(18px,1.6vw,22px);color:var(--crema)}
.contact-info .civ a{transition:color .2s var(--ease)}
.contact-info .civ a:hover{color:var(--sol)}
.contact-info address{font-style:normal}

.form{display:grid;gap:18px}
.form .field{display:flex;flex-direction:column;gap:8px}
.form label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--hormigon)}
.form input,.form textarea{background:var(--tinta-2);border:1px solid rgba(237,229,212,.18);color:var(--crema);
  font-family:'Archivo',sans-serif;font-size:16px;padding:14px 16px;transition:border-color .25s var(--ease),background .25s var(--ease)}
.form input:focus,.form textarea:focus{border-color:var(--sol);background:#211e1a;outline:none}
.form textarea{resize:vertical;min-height:130px}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form .send{justify-self:start;margin-top:6px}
.form .note{font-size:13px;color:var(--hormigon)}
.map-embed{position:relative;margin-top:clamp(40px,5vw,64px);border:1px solid rgba(19,18,16,.14);overflow:hidden;
  aspect-ratio:21/9;background:var(--crema)}
.map-illus svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.map-photo{aspect-ratio:2353/1009}
.map-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.map-pin-layer{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:1}
.map-go{position:absolute;right:clamp(14px,2vw,22px);bottom:clamp(14px,2vw,22px);z-index:2}
.map-mk-pulse{transform-box:fill-box;transform-origin:center;animation:mkPulse 2.6s var(--ease) infinite}
@keyframes mkPulse{0%{transform:scale(.5);opacity:.55}70%{transform:scale(1.7);opacity:0}100%{opacity:0}}

/* ============================================================
   MARQUEE (compartido)
   ============================================================ */
.marquee{background:var(--crema);color:var(--tinta);border-top:1px solid rgba(19,18,16,.12);
         border-bottom:1px solid rgba(19,18,16,.12);overflow:hidden;padding:18px 0;position:relative}
.marquee-track{display:flex;gap:48px;animation:marq 38s linear infinite;width:max-content;will-change:transform}
.marquee-track span{font-family:'Anton',sans-serif;font-size:clamp(22px,2.4vw,34px);text-transform:uppercase;
                    letter-spacing:.02em;line-height:var(--lh-title);display:inline-flex;align-items:center;gap:48px;white-space:nowrap}
.marquee-track i{display:inline-block;width:10px;height:10px;background:var(--sol);border-radius:50%;font-style:normal}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   CTA (cierre, oscuro)
   ============================================================ */
.cta{background:var(--tinta);padding:clamp(70px,10vw,130px) 0;position:relative;overflow:hidden;text-align:center}
.cta .glow{position:absolute;left:50%;bottom:-40%;transform:translateX(-50%);width:120vw;height:80vh;z-index:0;
  background:radial-gradient(closest-side,rgba(255,59,29,.16),transparent 70%);pointer-events:none}
.cta .wrap{position:relative;z-index:1}
.cta .big{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;line-height:var(--lh-display);
  letter-spacing:-.01em;font-size:clamp(38px,6.4vw,96px);color:var(--crema)}
.cta .big .sol{color:var(--sol)}
.cta .actions{margin-top:clamp(30px,4vw,48px);display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- FOOTER ---------- */
footer{background:var(--tinta);padding:64px 0 34px;border-top:1px solid rgba(237,229,212,.12)}
.foot-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:40px;margin-bottom:48px}
.foot-nav{display:flex;gap:60px;flex-wrap:wrap}
.foot-col a{display:block;color:var(--hormigon);margin-bottom:12px;font-family:'JetBrains Mono',monospace;font-size:12.5px;
            letter-spacing:.08em;text-transform:uppercase;transition:color .2s var(--ease),transform .2s var(--ease)}
.foot-col a:hover{color:var(--sol);transform:translateX(3px)}
.foot-col .ttl{color:var(--crema);font-weight:700;pointer-events:none}
.foot-col .ttl:hover{color:var(--crema);transform:none}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;padding-top:24px;
             border-top:1px solid rgba(237,229,212,.1);color:var(--hormigon)}
.foot-bottom a{transition:color .2s var(--ease)}
.foot-bottom a:hover{color:var(--sol)}
.foot-links{display:inline-flex;gap:8px;align-items:center}

/* ---------- páginas legales (prosa) ---------- */
.legal{max-width:760px}
.legal h2{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.005em;
  font-size:clamp(22px,2.4vw,32px);color:var(--crema);margin:36px 0 14px;line-height:var(--lh-title)}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{color:var(--crema-soft);margin-bottom:14px;font-size:16px;line-height:1.75}
.legal ul{padding-left:20px;margin-bottom:14px}
.legal strong{color:var(--crema)}
.legal a{color:var(--sol)}
.legal .disclaimer{border-left:2px solid var(--sol);padding:14px 18px;background:rgba(255,59,29,.05);
  color:var(--crema-soft);font-size:14px;margin-bottom:30px}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE (mobile-first → ampliaciones)
   ============================================================ */
@media(min-width:880px){
  .serv-grid{gap:14px}
}
@media(max-width:880px){
  .navlinks{position:fixed;inset:72px 0 auto 0;background:rgba(19,18,16,.97);backdrop-filter:blur(12px);
            flex-direction:column;gap:0;padding:8px 0 18px;display:flex;
            transform:translateY(-10px);opacity:0;pointer-events:none;
            transition:transform .35s var(--ease-out),opacity .35s var(--ease);
            border-bottom:1px solid rgba(237,229,212,.12)}
  .navlinks.open{transform:none;opacity:1;pointer-events:auto}
  .navlinks a.mono{padding:18px 28px;width:100%}
  .navlinks a.mono::after{display:none}
  .navlinks .btn{margin:16px 28px 4px;text-align:center;justify-content:center}
  .burger{display:inline-flex}
  .serv-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr;gap:48px}
}
@media(max-width:640px){
  .feature-list{grid-template-columns:1fr}
  .feature:nth-child(odd){border-right:none}
  .serv-grid{grid-template-columns:1fr}
  .spec-grid{grid-template-columns:repeat(2,1fr)}
  .gallery{display:grid;grid-template-columns:1fr;grid-auto-rows:clamp(200px,58vw,300px);height:auto}
  .gallery a{flex:none}
  .gallery .cap{opacity:1;transform:none}
  .form .row2{grid-template-columns:1fr}
  .plato-pager{grid-template-columns:1fr}
  .plato-pager a.next{text-align:left}
  .foot-nav{gap:32px}
}

/* ---------- MÓVIL · menú (Anton centrado + bounce) + footer ---------- */
@media(max-width:880px){
  .navlinks{align-items:center;padding:26px 0 36px;background:rgba(19,18,16,.98);
    backdrop-filter:blur(16px) saturate(120%);-webkit-backdrop-filter:blur(16px) saturate(120%);
    transform-origin:top center}
  .navlinks.open{animation:navBounce .55s cubic-bezier(.2,.85,.3,1.15) both}
  .has-sub{text-align:center;width:100%}
  .navlinks a.mono{font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(28px,8vw,40px);
    letter-spacing:.02em;text-transform:uppercase;text-align:center;width:100%;padding:12px 24px;color:var(--crema)}
  .navlinks a.mono:hover,.navlinks a.mono:active,.navlinks a.mono.active{color:var(--sol)}
  .has-sub .submenu a{font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.02em;text-transform:uppercase;
    text-align:center;width:100%;padding:9px 0;font-size:19px;color:var(--crema-soft)}
  .has-sub .submenu a:hover,.has-sub .submenu a:active{color:var(--sol)}
  .navlinks .btn{margin:20px auto 6px}
  .foot-top{flex-direction:column;gap:30px}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:12px}
  .logo-foot{height:84px}
}
@keyframes navBounce{
  0%{transform:translateY(-18px) scale(.97);opacity:0}
  55%{transform:translateY(7px) scale(1.015);opacity:1}
  100%{transform:translateY(0) scale(1);opacity:1}
}

/* ---------- TRANSICIÓN ENTRE PÁGINAS (cortina + fade-in, universal) ---------- */
.page-fx{position:fixed;inset:0;z-index:9999;background:var(--tinta);pointer-events:none;
  transform:translateY(100%);display:flex;align-items:center;justify-content:center}
.page-fx.is-cover{transform:translateY(0);transition:transform .6s cubic-bezier(.6,.02,.2,1)}
.page-fx__sun{width:min(54vw,260px);height:min(27vw,130px);border-radius:999px 999px 0 0;
  background:radial-gradient(120% 150% at 50% 100%,#ff8a63,var(--sol) 55%,var(--granate));
  box-shadow:0 -30px 120px rgba(255,59,29,.4);
  opacity:0;transform:translateY(40px) scale(.6);
  transition:opacity .5s .08s var(--ease),transform .8s .05s var(--ease-out)}
.page-fx.is-cover .page-fx__sun{opacity:1;transform:none}
@keyframes pageIn{from{opacity:0} to{opacity:1}}   /* solo opacidad: no rompe sticky/fixed del home */
main{animation:pageIn .5s var(--ease) both}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
                       transition-duration:.001ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
  .marquee-track{animation:none}
  .page-fx{display:none}
  main{animation:none}
}