/* GENERADO desde tools/site.src.css — edita el .src y ejecuta tools/build-css.py */
/* =========================================================
   COGUOX STUDIO — sitio público
   Unidades: calc(1*var(--u)) = 1px del diseño PSD a 1000px de ancho.
   (tools/build-css.py convierte "Nu" en calc(N * var(--u)))
   ========================================================= */
@font-face{font-family:"Host Grotesk";font-style:normal;font-weight:300 800;font-display:swap;
  src:url(../fonts/host-grotesk-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Host Grotesk";font-style:italic;font-weight:300 800;font-display:swap;
  src:url(../fonts/host-grotesk-latin-wght-italic.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Host Grotesk";font-style:normal;font-weight:300 800;font-display:swap;
  src:url(../fonts/host-grotesk-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Host Grotesk";font-style:italic;font-weight:300 800;font-display:swap;
  src:url(../fonts/host-grotesk-latin-ext-wght-italic.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --u: min(0.1vw, 1.15px);           /* JS lo recalcula con el ancho real (sin scrollbar) */
  --bg:#00211d;
  --card:rgba(255,255,255,.15);
  --card-solid:#26423f;
  --white:#fff;
  --grey:#ccc;
  --ink:#0d0d0d;
  --red:#e7292d;
  --ff:"Host Grotesk", "Helvetica Neue", Arial, sans-serif;
  --ls:-0.022em;                    /* tracking del PSD */
  color-scheme: dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--white);font-family:var(--ff);font-weight:420;
  letter-spacing:var(--ls);overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;letter-spacing:inherit;background:none;border:0;padding:0;cursor:pointer}
input,textarea{font:inherit;letter-spacing:inherit}
p,h1,h2,h3{margin:0;font-weight:inherit}
em{font-style:italic}
[hidden]{display:none !important}
:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ---------- Fondo low-poly (extraído del PSD) ---------- */
.bg-lowpoly{position:absolute;inset:0 0 auto 0;height:calc(1600*var(--u));z-index:0;pointer-events:none;
  background:url(../img/bg-lowpoly.jpg) center top / max(100%, calc(1000*var(--u))) auto no-repeat, var(--bg);
  -webkit-mask-image:linear-gradient(#000 88%, transparent);mask-image:linear-gradient(#000 88%, transparent)}
.page{position:relative;z-index:1;width:calc(1000*var(--u));margin:0 auto}

/* ---------- Header ---------- */
.hdr{position:absolute;inset:0 0 auto 0;height:calc(150*var(--u));z-index:5}
.hdr-logo{position:absolute;left:calc(45.5*var(--u));top:calc(50.5*var(--u));width:calc(194*var(--u))}
.hdr-logo img{width:100%;height:auto}
.hdr-nav{position:absolute;left:calc(388.6*var(--u));top:calc(75.6*var(--u));display:flex;align-items:center;gap:calc(13.1*var(--u));
  font-weight:700;font-size:calc(21*var(--u));line-height:calc(21*var(--u));text-transform:uppercase;letter-spacing:-0.012em}
.hdr-nav a{transition:opacity .2s}
.hdr-nav a:hover{opacity:.7}
.hdr-nav .dot{width:calc(3.7*var(--u));height:calc(3.7*var(--u));background:#fff;flex:none}
.hdr-cta{position:absolute;left:calc(786*var(--u));top:calc(69*var(--u));width:calc(121*var(--u));height:calc(32*var(--u));background:#fff;color:var(--ink);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:calc(18*var(--u));line-height:1;text-transform:uppercase;
  letter-spacing:-0.01em;transition:background .2s,color .2s}
.hdr-cta:hover{background:var(--bg);color:#fff;box-shadow:inset 0 0 0 1px #fff}
.hdr-burger{position:absolute;left:calc(932*var(--u));top:calc(73.8*var(--u));width:calc(19*var(--u));height:calc(22.4*var(--u))}
.hdr-burger span{position:absolute;left:0;width:100%;height:max(1px,calc(1*var(--u)));background:#fff;transition:transform .3s,opacity .3s}
.hdr-burger span:nth-child(1){top:0}
.hdr-burger span:nth-child(2){top:calc(10.7*var(--u))}
.hdr-burger span:nth-child(3){top:calc(21.4*var(--u))}
.hdr-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(calc(10.7*var(--u))) rotate(45deg)}
.hdr-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hdr-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(calc(-10.7*var(--u))) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{padding-top:calc(170*var(--u))}
.hero-card{position:relative;margin-left:calc(70*var(--u));width:calc(860*var(--u));height:calc(516*var(--u));border-radius:calc(30*var(--u));background:var(--card);overflow:hidden;isolation:isolate}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(20deg,rgba(0,0,0,.55),rgba(0,0,0,0) 60%)}
.hero-play{position:absolute;left:calc(404*var(--u));top:calc(188.6*var(--u));width:calc(52*var(--u));height:calc(52*var(--u));border-radius:50%}
.hero-play svg{width:100%;height:100%;overflow:visible}
.hero-play circle{fill:none;stroke-width:.5}
.ring-track{stroke:rgba(255,255,255,.28)}
.ring-prog{stroke:#fff;stroke-dasharray:42 100;transform:rotate(-90deg);transform-origin:26px 26px;stroke-width:.55!important}
.ico-pause rect{fill:#fff}
.ico-play{fill:#fff;display:none}
.hero-play.is-paused .ico-pause{display:none}
.hero-play.is-paused .ico-play{display:block}
.hero-text{position:absolute;left:calc(55*var(--u));top:calc(317.4*var(--u));font-size:calc(27*var(--u));line-height:calc(24.5*var(--u));font-weight:420;letter-spacing:-0.056em}
.hero-text em{letter-spacing:-0.04em}
.tagline{margin-top:calc(47.9*var(--u));text-align:center;font-style:italic;font-size:calc(31*var(--u));line-height:calc(31*var(--u));font-weight:420;letter-spacing:-0.048em}

/* ---------- Encabezados de sección ---------- */
.h-sec{font-size:calc(46*var(--u));line-height:calc(46*var(--u));font-weight:420;letter-spacing:-0.03em}
.h-sec em{letter-spacing:-0.035em}

/* ---------- Proyectos ---------- */
.proyectos{margin-top:calc(73.2*var(--u))}
.proyectos .h-sec{margin-left:calc(70.2*var(--u))}
.cf{position:relative}
.cf-proj{margin-top:calc(5.9*var(--u));height:calc(590*var(--u));width:100vw;margin-left:calc(50% - 50vw);overflow:hidden}
.cf-stage{position:absolute;left:0;top:0;width:1000px;height:590px;transform-origin:0 0}
.cf-card{position:absolute;left:0;top:0;transform-origin:0 0;border-radius:26px;background:var(--card);overflow:hidden;
  cursor:pointer;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cf-card img.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
.cf-card img.cover.is-in{opacity:1}
.cf-card .ph{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px}
.cf-card .ph svg{width:100%;height:100%}
.cf-card.has-img .ph{display:none}
.cf-card .shade{position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(transparent,rgba(0,20,17,.72));opacity:0;transition:opacity .4s}
.cf-card.has-img.is-center .shade{opacity:1}
.cf-card .play-badge{position:absolute;right:18px;top:18px;width:34px;height:34px;border:1px solid rgba(255,255,255,.8);border-radius:50%;display:none}
.cf-card .play-badge::after{content:"";position:absolute;left:13px;top:10px;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.cf-card.is-video .play-badge{display:block}
.cf-caption{position:absolute;left:calc(50% - calc(163.4*var(--u)));top:calc(429.8*var(--u));pointer-events:none;transition:opacity .35s}
.cf-caption.is-out{opacity:0}
.cf-title{font-weight:700;font-size:calc(20*var(--u));line-height:calc(20*var(--u));text-transform:uppercase;letter-spacing:-0.009em;white-space:nowrap}
.cf-sub{margin-top:calc(1.5*var(--u));font-style:italic;font-size:calc(14.4*var(--u));line-height:calc(14*var(--u));letter-spacing:-0.005em}
.cf-empty{position:absolute;left:0;right:0;top:40%;text-align:center;color:var(--grey);font-size:calc(20*var(--u))}

/* ---------- Nosotros ---------- */
.nosotros{margin-top:calc(39.25*var(--u))}
.nos-top{position:relative;height:calc(465.55*var(--u))}
.nos-top .h-sec{position:absolute;left:calc(78.6*var(--u));top:0;line-height:calc(46.7*var(--u))}
.nos-copy{position:absolute;left:calc(532*var(--u));top:calc(122.25*var(--u));width:calc(400*var(--u))}
.nos-lead{font-size:calc(31*var(--u));line-height:calc(30.8*var(--u));font-weight:450;letter-spacing:-0.03em}
.nos-sub{margin-top:calc(10.5*var(--u));max-width:calc(345*var(--u));color:var(--grey);font-size:calc(22*var(--u));line-height:calc(25*var(--u));letter-spacing:-0.02em}
.team{display:flex;flex-wrap:wrap;gap:calc(26.5*var(--u)) calc(30.5*var(--u));margin-left:calc(72*var(--u));width:calc(864.5*var(--u))}
.member{position:relative;height:calc(348.5*var(--u));border-radius:calc(30*var(--u));background:var(--card-solid);overflow:hidden;flex:none}
.member:nth-child(4n+1),.member:nth-child(4n+4){width:calc(462*var(--u))}
.member:nth-child(4n+2),.member:nth-child(4n+3){width:calc(372*var(--u))}
.member img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.member.has-img::after{content:"";position:absolute;inset:auto 0 0 0;height:50%;background:linear-gradient(transparent,rgba(0,24,20,.8))}
.member .ph{position:absolute;left:50%;top:50%;width:calc(54*var(--u));height:calc(54*var(--u));transform:translate(-50%,-50%)}
.member.has-img .ph{display:none}
.member-info{position:absolute;left:calc(52.5*var(--u));bottom:calc(31.2*var(--u));z-index:1}
.member-name{font-weight:700;font-size:calc(20.5*var(--u));line-height:calc(20.5*var(--u));letter-spacing:-0.02em}
.member-role{margin-top:calc(1.2*var(--u));font-style:italic;font-size:calc(14.5*var(--u));line-height:calc(14.5*var(--u));letter-spacing:-0.01em}

/* ---------- Archivo ---------- */
.archivo{margin-top:calc(87.1*var(--u))}
.archivo .h-sec{margin-left:calc(79.6*var(--u))}
.arc-grid{position:relative;height:calc(390*var(--u));margin-top:calc(13.1*var(--u))}
.cf-arc{position:absolute;left:0;top:0;width:calc(515*var(--u));height:calc(390*var(--u));overflow:hidden}
.cf-arc .cf-stage{width:515px;height:390px}
.cf-arc .cf-card{border-radius:26px}
.cf-arc .arc-label{position:absolute;left:22px;bottom:20px;right:22px;font-weight:700;font-size:17px;line-height:1.05;opacity:0;transition:opacity .3s;z-index:2}
.cf-arc .arc-date{display:block;font-weight:400;font-style:italic;font-size:12px;margin-top:3px}
.cf-arc .cf-card.is-center:hover .arc-label,.cf-arc .cf-card.is-center:focus-visible .arc-label{opacity:1}
.cf-arc .cf-card.is-center:hover .shade{opacity:1}
.arc-search{position:absolute;left:calc(531.5*var(--u));top:calc(120.8*var(--u));width:calc(393.5*var(--u))}
.arc-title{padding-left:calc(2*var(--u));font-size:calc(32*var(--u));line-height:calc(32*var(--u));font-weight:430;letter-spacing:-0.021em}
.arc-sub{padding-left:calc(2.5*var(--u));margin-top:calc(13*var(--u));color:var(--grey);font-size:calc(23*var(--u));line-height:calc(25*var(--u));letter-spacing:-0.031em}
.search{position:relative;margin-top:calc(32.75*var(--u));height:calc(32*var(--u));background:#fff}
.search input{width:100%;height:100%;border:0;border-radius:0;background:transparent;padding:0 calc(44*var(--u)) 0 calc(22*var(--u));color:var(--ink);
  font-weight:700;font-size:calc(18*var(--u));outline:none;-webkit-appearance:none;appearance:none}
.search input::placeholder{color:var(--ink);opacity:1}
.search input::-webkit-search-cancel-button{display:none}
.search button{position:absolute;left:calc(352.25*var(--u));top:calc(2.75*var(--u));width:calc(24*var(--u));height:calc(24*var(--u))}
.search svg{width:100%;height:100%;fill:none;stroke:#111;stroke-width:.9}
.search-results{position:absolute;left:0;right:0;top:100%;margin:0;padding:0;list-style:none;background:#fff;color:var(--ink);z-index:20;
  max-height:calc(300*var(--u));overflow:auto;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.search-results li{display:flex;justify-content:space-between;gap:calc(12*var(--u));padding:calc(10*var(--u)) calc(22*var(--u));font-size:calc(16*var(--u));cursor:pointer;border-top:1px solid #e6e6e6}
.search-results li:hover,.search-results li[aria-selected="true"]{background:#e9efee}
.search-results li small{color:#6b7775;font-style:italic;white-space:nowrap}
.search-results li.none{cursor:default;color:#6b7775}
.arc-direct{margin-top:calc(18*var(--u));margin-left:calc(2*var(--u));font-size:calc(15*var(--u));color:var(--grey);text-decoration:underline;text-underline-offset:3px}
.arc-direct:hover{color:#fff}

/* ---------- Contacto ---------- */
.contacto{position:relative;margin-top:calc(83.8*var(--u));height:calc(391*var(--u))}
.ct-copy{position:absolute;left:calc(78.8*var(--u));top:0;width:calc(430*var(--u))}
.h-lg{font-size:calc(48*var(--u));line-height:calc(47*var(--u));letter-spacing:-0.046em}
.ct-text{margin-top:calc(23.55*var(--u));font-size:calc(31*var(--u));line-height:calc(31*var(--u));font-weight:450;letter-spacing:-0.02em}
.ct-text span{color:var(--grey)}
.ct-form{position:absolute;left:calc(531.8*var(--u));top:calc(53.05*var(--u));width:calc(392.2*var(--u))}
.ct-form label{display:block;font-size:calc(21*var(--u));line-height:calc(21*var(--u));padding-left:calc(2.5*var(--u));letter-spacing:-0.04em}
.ct-form label + label{margin-top:calc(34.65*var(--u))}
.ct-form input,.ct-form textarea{display:block;width:100%;height:calc(31.7*var(--u));margin:calc(10.65*var(--u)) 0 0 calc(-2.5*var(--u));width:calc(100% + calc(2.5*var(--u)));border:0;border-radius:0;background:#fff;
  color:var(--ink);padding:0 calc(21.7*var(--u));font-weight:700;font-size:calc(18*var(--u));line-height:calc(31.7*var(--u));outline:none;resize:none;overflow:hidden}
.ct-form textarea{padding-top:0;padding-bottom:0;min-height:calc(31.7*var(--u));height:calc(31.7*var(--u))}
.ct-form textarea.grow{height:auto;line-height:1.35;padding-top:calc(6*var(--u));padding-bottom:calc(6*var(--u))}
.ct-form input::placeholder,.ct-form textarea::placeholder{color:var(--ink);opacity:1}
.ct-form input:focus,.ct-form textarea:focus{box-shadow:inset 0 0 0 2px var(--card-solid)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.btn-send{display:block;width:100%;height:calc(31.8*var(--u));margin-top:calc(47*var(--u));border-radius:calc(40*var(--u));background:var(--card-solid);color:#fff;
  font-weight:700;font-size:calc(17.5*var(--u));letter-spacing:.01em;transition:background .2s}
.btn-send:hover{background:#34524e}
.btn-send[disabled]{opacity:.6;cursor:wait}
.form-msg{min-height:calc(20*var(--u));margin-top:calc(10*var(--u));font-size:calc(15*var(--u));color:var(--grey)}
.form-msg.ok{color:#9fe0c6}
.form-msg.err{color:#ff9d9f}

/* botón Cotizar (fuera del PSD: alineado con ENVIAR) */
.ct-quote{position:absolute;left:calc(79.8*var(--u));top:calc(359.2*var(--u));height:calc(31.8*var(--u));padding:0 calc(18*var(--u));background:#fff;color:var(--ink);font-weight:700;font-size:calc(16*var(--u));letter-spacing:-0.005em;transition:background .2s,color .2s}
.ct-quote span{display:inline-block;transition:transform .2s}
.ct-quote:hover{background:var(--red);color:#fff}
.ct-quote:hover span{transform:translateX(3px)}

/* ---------- Footer ---------- */
.ftr{position:relative;padding-bottom:calc(93*var(--u))}
/* acceso discreto al panel del estudio */
.ftr-staff{position:absolute;right:calc(76*var(--u));bottom:calc(34*var(--u));width:calc(28*var(--u));height:calc(28*var(--u));display:flex;align-items:center;justify-content:center;border-radius:50%;opacity:.22;transition:opacity .25s,background .25s}
.ftr-staff svg{width:calc(15*var(--u));height:calc(15*var(--u));fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ftr-staff:hover,.ftr-staff:focus-visible{opacity:1;background:rgba(255,255,255,.1)}
.ftr-line{margin:calc(92.2*var(--u)) 0 0 calc(50*var(--u));width:calc(875*var(--u));border:0;height:1px;background:rgba(255,255,255,.9)}
.ftr-row{position:relative;height:calc(185*var(--u))}
.ftr-logo{position:absolute;left:calc(94.8*var(--u));top:calc(89.3*var(--u));width:calc(271*var(--u));height:auto}
.ftr-contact{position:absolute;left:calc(531.8*var(--u));top:calc(93.3*var(--u));width:calc(392.2*var(--u));height:calc(80.8*var(--u));border-top:1px solid rgba(255,255,255,.9);border-bottom:1px solid rgba(255,255,255,.9);
  display:flex;align-items:center}
.ftr-label{width:calc(143.5*var(--u));padding-left:calc(1.5*var(--u));font-size:calc(21*var(--u))}
.ftr-links{display:flex;flex-direction:column;gap:calc(8*var(--u));font-size:calc(21*var(--u));line-height:calc(24*var(--u));letter-spacing:-0.04em}
.ftr-links a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- Menú overlay ---------- */
.menu{position:fixed;inset:0;z-index:40;background:rgba(0,33,29,.97);display:flex;align-items:center;justify-content:center;animation:fade .25s}
.menu nav{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.menu a,.menu button{font-weight:700;font-size:clamp(34px,6vw,64px);line-height:1;text-transform:uppercase;letter-spacing:-0.02em}
.menu a:hover,.menu button:hover{color:var(--red)}
.menu-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.menu .menu-actions button{font-size:clamp(15px,1.8vw,19px);padding:10px 18px;border:1px solid #fff}
.menu .menu-client{background:#fff;color:var(--ink)}
.menu .menu-actions button:hover{background:var(--red);border-color:var(--red);color:#fff}
html.is-locked{overflow:hidden}
.menu{flex-direction:column}
.menu-top{position:absolute;inset:0 0 auto 0;display:flex;justify-content:space-between;align-items:flex-start;width:calc(1000*var(--u));max-width:100%;margin:0 auto;padding:calc(50.5*var(--u)) calc(49*var(--u)) 0 calc(45.5*var(--u))}
.menu-logo{width:calc(194*var(--u))}
.menu-x{position:relative;width:44px;height:44px;margin:-4px -10px 0 0;border-radius:50%;transition:background .2s}
.menu-x:hover{background:rgba(255,255,255,.12)}
.menu-x span{position:absolute;left:10px;top:21px;width:24px;height:1.5px;background:#fff;transform:rotate(45deg)}
.menu-x span + span{transform:rotate(-45deg)}

/* ---------- Modal login ---------- */
.modal{position:fixed;inset:0;z-index:60;background:rgba(0,12,10,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:20px;animation:fade .2s}
.modal-box{position:relative;width:min(440px,100%);background:var(--bg);border:1px solid rgba(255,255,255,.14);border-radius:26px;padding:34px 34px 26px;
  box-shadow:0 30px 80px rgba(0,0,0,.5);animation:rise .3s cubic-bezier(.2,.8,.2,1)}
.modal-x{position:absolute;right:14px;top:10px;width:40px;height:40px;font-size:30px;line-height:1;opacity:.8}
.modal-x:hover{opacity:1}
.login-cover{height:0;margin:-34px -34px 22px;border-radius:26px 26px 0 0;background:var(--card-solid) center/cover no-repeat;overflow:hidden}
.login-cover.on{height:150px}
.login-kicker{font-style:italic;color:var(--grey);font-size:15px}
.login-title{font-size:30px;line-height:1.02;margin:4px 0 22px;letter-spacing:-0.03em}
.login-form label{display:block;font-size:16px;margin-bottom:14px}
.login-form input{display:block;width:100%;height:40px;margin-top:6px;border:0;background:#fff;color:var(--ink);padding:0 14px;font-weight:700;font-size:16px;outline:none;border-radius:0}
.login-form input:focus{box-shadow:inset 0 0 0 2px var(--card-solid)}
.login-form .btn-send{height:42px;margin-top:22px;font-size:16px}
.login-form .form-msg{font-size:14px;min-height:18px}
.demo-hint{margin-top:6px;font-size:13px;color:#9fe0c6}

/* ---------- Cotización ---------- */
.quote-box{width:min(600px,100%);max-height:calc(100vh - 40px);overflow:auto}
.quote-form label{display:block;font-size:15px;margin-bottom:14px}
.quote-form input,.quote-form select,.quote-form textarea{display:block;width:100%;margin-top:6px;border:0;border-radius:0;background:#fff;color:var(--ink);
  padding:0 12px;height:40px;font-weight:600;font-size:15px;outline:none;letter-spacing:0}
.quote-form select{appearance:none;-webkit-appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center;padding-right:30px}
.quote-form textarea{height:auto;min-height:96px;padding:10px 12px;line-height:1.4;resize:vertical}
.quote-form :is(input,select,textarea):focus{box-shadow:inset 0 0 0 2px var(--card-solid)}
.quote-form :is(input,select,textarea)[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--red)}
.q-2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.quote-form .btn-send{height:44px;margin-top:8px;font-size:15px}
.quote-form .form-msg{font-size:14px}
.quote-done{text-align:center;padding:10px 0 4px}
.quote-done h4{font-size:26px;letter-spacing:-0.03em;margin-bottom:8px}
.quote-done p{color:var(--grey);font-size:15px;line-height:1.4}

/* ---------- Visor de proyecto ---------- */
.viewer{position:fixed;inset:0;z-index:55;background:var(--bg);overflow:auto;padding:36px max(24px,6vw) 60px;animation:fade .25s}
.viewer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;max-width:1400px;margin:0 auto}
.viewer-head .modal-x{position:static;flex:none}
.viewer-num{font-weight:700;font-size:15px;letter-spacing:.02em;color:var(--grey)}
.viewer-title{font-size:clamp(34px,5vw,64px);line-height:1;letter-spacing:-0.03em;text-transform:uppercase;margin-top:6px}
.viewer-cat{font-style:italic;margin-top:8px;color:var(--grey)}
.viewer-desc{max-width:1400px;margin:18px auto 0;color:var(--grey);font-size:18px;line-height:1.35}
.viewer-desc:empty{display:none}
.masonry{max-width:1400px;margin:30px auto 0;columns:3 300px;column-gap:14px}
.m-item{position:relative;break-inside:avoid;margin-bottom:14px;border-radius:16px;overflow:hidden;background:var(--card-solid);cursor:zoom-in;display:block;width:100%}
.m-item img{width:100%;height:auto;min-height:120px;object-fit:cover;background:var(--card-solid);transition:transform .5s}
.m-item:hover img{transform:scale(1.02)}
.m-item .vid{position:absolute;left:14px;top:14px;font-size:12px;font-weight:700;background:rgba(0,0,0,.55);padding:4px 8px;border-radius:20px}
.m-item.ph-tile{aspect-ratio:4/5;display:flex;align-items:center;justify-content:center}
.m-item.ph-tile svg{width:54px}
.loading{padding:40px 0;text-align:center;color:var(--grey)}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:70;background:rgba(0,10,8,.96);display:flex;align-items:center;justify-content:center;animation:fade .2s}
.lb-media{max-width:calc(100vw - 140px);max-height:calc(100vh - 110px);display:flex;align-items:center;justify-content:center}
.lb-media img,.lb-media video{max-width:100%;max-height:calc(100vh - 110px);width:auto;height:auto;border-radius:6px}
.lb-media iframe{width:min(1100px,calc(100vw - 140px));aspect-ratio:16/9;border:0;border-radius:6px}
.lb-x{position:absolute;right:18px;top:12px;font-size:40px;width:50px;height:50px;line-height:1}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);font-size:54px;width:60px;height:90px;opacity:.75}
.lb-prev{left:6px}.lb-next{right:6px}
.lb-prev:hover,.lb-next:hover{opacity:1}
.lb-bar{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 22px;font-size:14px;color:var(--grey)}
.lb-dl{background:#fff;color:var(--ink);font-weight:700;padding:8px 14px;font-size:13px}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:90;background:#fff;color:var(--ink);font-weight:700;padding:12px 18px;font-size:15px;
  box-shadow:0 12px 30px rgba(0,0,0,.35);animation:rise .3s}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
.toast{transform:translateX(-50%)}

/* ---------- Demo ribbon ---------- */
.demo-ribbon{position:fixed;left:12px;bottom:12px;z-index:30;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:6px 12px;font-size:12px;color:#ddd;letter-spacing:0}

/* =========================================================
   MÓVIL / TABLET  (≤ 760px)
   ========================================================= */
@media (max-width: 760px){
  :root{--m:calc(100vw / 390)}
  .page{width:100%}
  .bg-lowpoly{height:calc(var(--m) * 1180);background-image:url(../img/bg-lowpoly-m.jpg);background-size:auto 100%;background-position:78% top}
  .hdr{height:auto}
  .hdr-logo{left:18px;top:22px;width:138px}
  .hdr-nav,.hdr-cta{display:none}
  .hdr-burger{left:auto;right:20px;top:36px;width:24px;height:20px}
  .hdr-burger span:nth-child(2){top:9.5px}
  .hdr-burger span:nth-child(3){top:19px}
  .hdr-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(9.5px) rotate(45deg)}
  .hdr-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-9.5px) rotate(-45deg)}
  .menu-top{width:100%;padding:22px 10px 0 18px}
  .menu-logo{width:138px}
  .menu-x{margin:6px 0 0}

  .hero{padding-top:100px}
  .hero-card{margin:0 16px;width:auto;height:auto;aspect-ratio:4/5;max-height:78vh;border-radius:24px}
  .hero-play{left:50%;top:30%;width:52px;height:52px;margin-left:-26px}
  .hero-text{left:24px;right:24px;top:auto;bottom:28px;font-size:clamp(22px,6.4vw,27px);line-height:1.02}
  .br-d{display:none}
  .tagline{margin-top:34px;font-size:clamp(22px,6.6vw,30px);line-height:1}

  .proyectos{margin-top:56px}
  .h-sec{font-size:clamp(34px,10vw,46px);line-height:1}
  .proyectos .h-sec,.archivo .h-sec{margin-left:18px}
  .cf-proj{height:calc(100vw * 1.06);margin-top:8px}
  .cf-caption{left:0!important;right:0;top:auto!important;bottom:6px;text-align:center}
  .cf-title{font-size:17px;line-height:1.1;white-space:normal;padding:0 24px}
  .cf-sub{font-size:13px;line-height:1.2}

  .nosotros{margin-top:50px}
  .nos-top{height:auto;padding:0 18px}
  .nos-top .h-sec{position:static;line-height:1}
  .nos-copy{position:static;width:auto;margin-top:26px}
  .nos-lead{font-size:clamp(22px,6.4vw,28px);line-height:1.02}
  .nos-sub{font-size:17px;line-height:1.2;margin-top:12px;max-width:none}
  .team{margin:34px 16px 0;width:auto;gap:14px}
  .member,.member:nth-child(n){width:100%;height:auto;aspect-ratio:462/348.5;border-radius:22px}
  .member:nth-child(even){width:100%}
  .member .ph{width:48px;height:48px}
  .member-info{left:24px;bottom:22px}
  .member-name{font-size:19px;line-height:1.05}
  .member-role{font-size:14px;line-height:1.1}

  .archivo{margin-top:64px}
  .arc-grid{height:auto;margin-top:10px}
  .cf-arc{position:relative;width:100%;height:calc(100vw * .82)}
  .arc-search{position:static;width:auto;padding:26px 18px 0}
  .arc-title{font-size:28px;line-height:1.05;padding:0}
  .arc-sub{font-size:18px;line-height:1.2;padding:0;margin-top:8px}
  .search{height:42px;margin-top:20px}
  .search input{font-size:16px;padding:0 48px 0 16px}
  .search button{left:auto;right:10px;top:9px;width:24px;height:24px}
  .search-results{max-height:280px}
  .search-results li{font-size:15px;padding:12px 16px}
  .arc-direct{font-size:15px;margin:16px 0 0}

  .contacto{height:auto;margin-top:70px;padding:0 18px}
  .ct-copy,.ct-form{position:static;width:auto}
  .h-lg{font-size:clamp(38px,11vw,48px);line-height:.98}
  .ct-text{font-size:clamp(21px,6vw,27px);line-height:1.05;margin-top:16px}
  .ct-form{margin-top:36px}
  .ct-form label{font-size:17px;line-height:1;padding:0}
  .ct-form label + label{margin-top:22px}
  .ct-form input,.ct-form textarea{height:42px;margin:8px 0 0;width:100%;font-size:16px;padding:0 14px;line-height:42px}
  .ct-form textarea{min-height:42px;height:42px}
  .btn-send{height:44px;margin-top:30px;font-size:16px}
  .ct-quote{position:static;display:inline-flex;align-items:center;gap:8px;height:44px;margin-top:24px;padding:0 18px;font-size:15px}
  .q-2{grid-template-columns:1fr}
  .form-msg{font-size:14px}

  .ftr{padding:40px 18px 50px}
  .ftr-staff{right:14px;bottom:14px;width:36px;height:36px}
  .ftr-staff svg{width:16px;height:16px}
  .ftr-line{margin:0;width:100%}
  .ftr-row{height:auto;display:flex;flex-direction:column;gap:34px;padding-top:40px}
  .ftr-logo,.ftr-contact{position:static}
  .ftr-logo{width:200px}
  .ftr-contact{width:100%;height:auto;padding:16px 0;align-items:flex-start}
  .ftr-label{width:34%;font-size:16px}
  .ftr-links{font-size:16px;line-height:1.3;gap:4px;min-width:0;word-break:break-all}

  .lb-prev,.lb-next{top:auto;bottom:54px;transform:none;font-size:44px}
  .lb-media{max-width:100vw;max-height:calc(100vh - 150px)}
  .lb-media img,.lb-media video{max-height:calc(100vh - 150px);border-radius:0}
  .lb-media iframe{width:100vw}
  .masonry{columns:2 150px;column-gap:8px}
  .m-item{margin-bottom:8px;border-radius:10px}
  .viewer{padding:24px 14px 50px}
}

/* =========================================================
   PORTAL DE CLIENTES
   ========================================================= */
.bg-short{height:calc(900*var(--u))}
.portal .bg-short{-webkit-mask-image:linear-gradient(#000 30%, transparent);mask-image:linear-gradient(#000 30%, transparent)}
.portal{display:flex;flex-direction:column}
.p-hdr{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:calc(50.5*var(--u)) calc(70*var(--u)) 0 calc(45.5*var(--u))}
.p-logo{width:calc(194*var(--u));flex:none}
.p-hdr-right{display:flex;align-items:center;gap:calc(22*var(--u))}
.p-user{font-style:italic;font-size:calc(18*var(--u));color:rgba(255,255,255,.85);max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-out{height:calc(32*var(--u));padding:0 calc(18*var(--u));background:#fff;color:var(--ink);font-weight:700;font-size:calc(18*var(--u));letter-spacing:-0.01em}
.p-out:hover{background:var(--red);color:#fff}
.p-main{position:relative;z-index:1;flex:1;width:min(1400px,100% - calc(140*var(--u)));margin:0 auto;padding:calc(80*var(--u)) 0 calc(60*var(--u))}
.p-kicker{font-style:italic;color:var(--grey);font-size:calc(20*var(--u))}
.p-title{margin-top:calc(6*var(--u));font-size:calc(64*var(--u));line-height:.98;letter-spacing:-0.035em;text-transform:uppercase;font-weight:420;max-width:calc(900*var(--u))}
.p-meta{margin-top:calc(14*var(--u));font-size:calc(20*var(--u));color:var(--grey)}
.p-actions{display:flex;flex-wrap:wrap;gap:calc(12*var(--u));margin-top:calc(30*var(--u))}
.p-btn{height:calc(36*var(--u));padding:0 calc(20*var(--u));border:1px solid rgba(255,255,255,.85);color:#fff;font-weight:700;font-size:calc(16*var(--u));letter-spacing:.01em;transition:background .2s,color .2s}
.p-btn:hover{background:#fff;color:var(--ink)}
.p-btn-white{background:#fff;color:var(--ink);border-color:#fff}
.p-btn-white:hover{background:var(--red);border-color:var(--red);color:#fff}
.p-btn[disabled]{opacity:.5;cursor:default}
.p-bell{display:inline-flex;align-items:center;gap:calc(8*var(--u))}
.p-bell-ico{width:calc(14*var(--u));height:calc(14*var(--u));background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22a2.5 2.5 0 0 0 2.4-2h-4.8a2.5 2.5 0 0 0 2.4 2zm7-6V11a7 7 0 0 0-5-6.7V3a2 2 0 0 0-4 0v1.3A7 7 0 0 0 5 11v5l-2 2v1h18v-1z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22a2.5 2.5 0 0 0 2.4-2h-4.8a2.5 2.5 0 0 0 2.4 2zm7-6V11a7 7 0 0 0-5-6.7V3a2 2 0 0 0-4 0v1.3A7 7 0 0 0 5 11v5l-2 2v1h18v-1z'/%3E%3C/svg%3E") center/contain no-repeat}
.p-bell.is-on{background:rgba(255,255,255,.14)}
.p-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:calc(10*var(--u));margin-top:calc(34*var(--u));font-size:calc(18*var(--u));color:var(--grey)}
.p-crumbs button{text-decoration:underline;text-underline-offset:3px;color:var(--grey)}
.p-crumbs button:hover{color:#fff}
.p-crumbs strong{color:#fff;font-weight:700}
.p-folders{display:flex;flex-wrap:wrap;gap:calc(12*var(--u));margin-top:calc(24*var(--u))}
.p-folders:empty{display:none}
.p-folder{display:flex;align-items:center;gap:calc(10*var(--u));height:calc(54*var(--u));padding:0 calc(22*var(--u)) 0 calc(18*var(--u));border-radius:calc(16*var(--u));background:var(--card);font-size:calc(18*var(--u));transition:background .2s}
.p-folder svg{width:calc(22*var(--u));height:calc(22*var(--u))}
.p-folder:hover{background:rgba(255,255,255,.25)}
.p-grid{max-width:none;margin-top:calc(34*var(--u))}
.p-tile{cursor:zoom-in;margin:0 0 14px}
.p-tile img.err{min-height:160px;opacity:.25}
.p-tile figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:30px 12px 10px;
  background:linear-gradient(transparent,rgba(0,15,12,.8));font-size:13px;opacity:0;transition:opacity .25s}
.p-tile figcaption span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-tile:hover figcaption,.p-tile:focus-within figcaption{opacity:1}
.p-dl{flex:none;width:36px;height:36px;border-radius:50%;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center}
.p-dl svg{width:18px;height:18px}
.p-dl:hover{background:var(--red);color:#fff}
.p-check{position:absolute;right:12px;top:12px;width:28px;height:28px;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.25);display:none;align-items:center;justify-content:center;color:transparent}
.p-check svg{width:16px;height:16px}
body.is-selecting .p-tile{cursor:pointer}
body.is-selecting .p-check{display:flex}
body.is-selecting .p-tile figcaption{display:none}
.p-tile.is-sel .p-check{background:#fff;color:var(--ink)}
.p-tile.is-sel img{opacity:.7;transform:scale(.97)}
.p-file{aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;cursor:pointer}
.p-ext{font-weight:700;font-size:26px;letter-spacing:.04em;color:rgba(255,255,255,.75)}
.p-more{display:flex;justify-content:center;padding:20px 0}
.p-empty{text-align:center;color:var(--grey);padding:40px 0}
.p-ftr{position:relative;z-index:1;display:flex;justify-content:space-between;gap:16px;padding:26px calc(70*var(--u)) 34px;border-top:1px solid rgba(255,255,255,.15);font-size:14px;color:var(--grey)}
.p-ftr a:hover{color:#fff}
@media (max-width:760px){
  .bg-short{height:520px}
  .p-hdr{padding:22px 16px 0 18px}
  .p-logo{width:128px}
  .p-user{display:none}
  .p-out{height:34px;font-size:14px;padding:0 14px}
  .p-main{width:auto;padding:46px 14px 40px}
  .p-kicker{font-size:15px}
  .p-title{font-size:clamp(32px,10vw,46px)}
  .p-meta{font-size:15px;margin-top:10px}
  .p-actions{gap:8px;margin-top:22px}
  .p-btn{height:40px;font-size:13px;padding:0 14px}
  .p-bell{gap:6px}.p-bell-ico{width:14px;height:14px}
  .p-crumbs{font-size:15px;margin-top:22px;gap:8px}
  .p-folders{gap:8px;margin-top:16px}
  .p-folder{height:46px;font-size:15px;border-radius:12px;padding:0 16px 0 12px;gap:8px}
  .p-folder svg{width:20px;height:20px}
  .p-grid{margin-top:22px}
  .p-tile{margin-bottom:8px}
  .p-tile figcaption{opacity:1;padding:18px 8px 6px;background:linear-gradient(transparent,rgba(0,15,12,.6))}
  .p-tile figcaption span{display:none}
  .p-tile figcaption{justify-content:flex-end}
  .p-dl{width:32px;height:32px}
  .p-ftr{flex-direction:column;padding:22px 16px 30px}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}