/* AVT CAD CAM SRL — colores del logo: negro #1B1B18, lima #DFFF03 */
@font-face{font-family:Michroma;src:url(../fonts/Michroma-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:Barlow;font-weight:400;src:url(../fonts/Barlow-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:Barlow;font-weight:500;src:url(../fonts/Barlow-Medium.woff2) format("woff2");font-display:swap}
@font-face{font-family:Barlow;font-weight:600;src:url(../fonts/Barlow-SemiBold.woff2) format("woff2");font-display:swap}
:root{--ink:#1B1B18;--ink-2:#262622;--line:rgba(255,255,255,.16);--txt:#fff;--mute:#d2d2c6;--lime:#DFFF03;--cut:1rem;
--fd:Michroma,"Arial Black",Arial,sans-serif;--fb:Barlow,"Segoe UI",Arial,sans-serif;--p:0}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--txt);font:400 1.0625rem/1.6 var(--fb);-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.wrap{width:calc(100% - 2.5rem);max-width:73.75rem;width:min(73.75rem,100% - 2.5rem);margin-left:auto;margin-right:auto}
h1,h2,h3{font-family:var(--fd);font-weight:400;line-height:1.2;text-shadow:0 2px 1.5rem rgba(0,0,0,.6)}
h2{font-size:1.35rem;font-size:clamp(1.35rem,3vw,2.2rem);margin-bottom:.9rem}
.lead{color:var(--mute);max-width:58ch;margin-bottom:1.75rem;text-shadow:0 1px 0.875rem rgba(0,0,0,.7)}

/* Fondo: vídeo controlado por scroll */
#bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.veil{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,8,.45),rgba(10,10,8,.15) 30%,rgba(10,10,8,.7))}
.no-video #bg{display:none}
.no-video .veil{background:radial-gradient(circle at calc(15% + var(--p)*70%) 38%,rgba(223,255,3,.2),transparent 42%),
linear-gradient(180deg,rgba(27,27,24,.2),rgba(27,27,24,.92)),
repeating-linear-gradient(135deg,transparent 0 4.375rem,rgba(223,255,3,.08) 4.375rem 4.5625rem) calc(var(--p)*-1600px) 0/auto}

/* Logo flotante con luz trasera */
.logo{position:fixed;top:1.125rem;left:clamp(0.875rem,3vw,2.25rem);z-index:60;display:block;padding:0.625rem}
.logo::before{content:"";position:absolute;inset:-26px -34px;background:radial-gradient(closest-side,rgba(223,255,3,.38),transparent);filter:blur(0.625rem);z-index:-1}
.logo img{height:2.5rem;width:auto;filter:drop-shadow(0 0 0.5rem rgba(223,255,3,.7)) drop-shadow(0 0 1.625rem rgba(223,255,3,.45))}

/* Panel de navegación que se ilumina según el capítulo */
.dock{position:fixed;top:1.25rem;left:50%;transform:translateX(-50%);z-index:60;background:rgba(20,20,17,.42);backdrop-filter:blur(0.875rem);-webkit-backdrop-filter:blur(0.875rem);
box-shadow:inset 0 0 0 1px var(--line)}
.dock ul{display:flex;list-style:none;padding:0.375rem 0.5rem 0.5625rem;gap:2px}
.dock a{position:relative;display:block;padding:.5rem 1.05rem;text-decoration:none;font-weight:500;font-size:.98rem;--a:0;
color:color-mix(in srgb,var(--lime) calc(var(--a)*100%),#fff);text-shadow:0 0 calc(var(--a)*1rem) rgba(223,255,3,calc(var(--a)*.9))}
.dock a::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(223,255,3,calc(var(--a)*.13));box-shadow:inset 0 -2px 0 rgba(223,255,3,calc(var(--a)))}
.dock a>span{position:relative}
.btn{display:inline-block;background:var(--lime);color:var(--ink)!important;font:600 1rem var(--fb);padding:.85rem 1.7rem;text-decoration:none;border:0;cursor:pointer;
}
.btn:hover{background:#fff}
.btn.ghost{background:rgba(20,20,17,.45);color:var(--txt)!important;box-shadow:inset 0 0 0 2px var(--line)}
.btn.ghost:hover{background:rgba(255,255,255,.14)}
.cta{position:fixed;top:1.25rem;right:clamp(0.875rem,3vw,2.25rem);z-index:60;padding:.7rem 1.4rem;transition:box-shadow .3s}
.cta.on{background:#fff}
@media(max-width:760px){
.dock{top:auto;bottom:calc(0.875rem + env(safe-area-inset-bottom,0px))}
.dock a{padding:.5rem .55rem;font-size:.78rem}
.dock ul{padding:0.3125rem 4px 0.5rem}
.logo img{height:2rem}
.cta{padding:.55rem 1rem;font-size:.9rem}}

/* Escena: las secciones aparecen según el fotograma del vídeo */
.ch .in{width:calc(100% - 2.5rem);max-width:73.75rem;width:min(73.75rem,100% - 2.5rem);margin-left:auto;margin-right:auto;padding:5rem 0}
.hero h1{font-size:1.7rem;font-size:clamp(1.7rem,5.4vw,4rem);max-width:18ch;margin-bottom:1.1rem}
.hero p{max-width:54ch;font-size:1.2rem;color:#f0f0e6;margin-bottom:1.75rem;text-shadow:0 1px 0.875rem rgba(0,0,0,.7)}
.acts{display:flex;flex-wrap:wrap;gap:1rem}
.hint{margin-top:2rem;color:var(--mute);font-size:.95rem}
.hint::before{content:"";display:inline-block;width:2px;height:1.75rem;background:var(--lime);vertical-align:middle;margin-right:.8rem;box-shadow:0 0 0.625rem var(--lime);animation:hint 1.8s ease-in-out infinite}
@keyframes hint{50%{transform:scaleY(.4)}}
.scene .track{height:calc(var(--n,5)*160vh)}
.scene .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.scene .ch{position:absolute;top:0;right:0;bottom:0;left:0;will-change:opacity,transform}
.scene .ch .in{height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:6.875rem 0 6.25rem}
@media(max-width:760px){.scene .ch .in{padding-bottom:6.5rem}}

.tiles{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
.tiles a,.card{display:block;text-decoration:none;background:rgba(20,20,17,.5);backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem);box-shadow:inset 0 0 0 1px var(--line);padding:1.1rem 1.15rem;height:100%;transition:box-shadow .25s,background .25s}
.tiles b,.card h3{display:block;font:400 .95rem/1.3 var(--fd);margin-bottom:.4rem}
.tiles span,.card p{color:var(--mute);font-size:.98rem;line-height:1.45;display:block}
.card small{color:var(--lime);font-weight:600}
.tiles a:hover,.card:hover{background:rgba(223,255,3,.1);box-shadow:inset 0 0 0 1px var(--lime),0 0 1.75rem rgba(223,255,3,.25)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
.mes{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:end}
.ph{aspect-ratio:4/3;background:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 1.125rem,rgba(255,255,255,.02) 1.125rem 2.25rem);box-shadow:inset 0 0 0 1px var(--line)}
@media(max-width:900px){.tiles{grid-template-columns:repeat(2,1fr)}.tiles span{display:none}.grid{grid-template-columns:1fr}.card p{display:none}.mes{grid-template-columns:1fr}.mes .ph{display:none}.tiles a,.card{padding:.85rem 1rem}}

/* Contacto (flujo normal, sobre el último fotograma) */
.contact{padding:clamp(4rem,9vw,7rem) 0;background:linear-gradient(180deg,transparent,rgba(14,14,12,.9) 22%)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
@media(max-width:800px){.split{grid-template-columns:1fr;gap:2rem}}
form{display:grid;gap:1.1rem}
label{display:grid;gap:.35rem;font-weight:500}
input,select,textarea{font:inherit;color:var(--txt);background:rgba(38,38,34,.9);border:1px solid var(--line);padding:.8rem .9rem;border-radius:0;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--lime)}
textarea{min-height:8.75rem;resize:vertical}
.chk{display:flex;gap:.7rem;align-items:flex-start;font-weight:400;color:var(--mute);font-size:.95rem}
.chk input{width:auto;margin-top:.3rem;accent-color:var(--lime)}
.hp{position:absolute;left:-9999px}
#fs{min-height:1.5rem;color:var(--lime)}
.mail{font:400 1.1rem var(--fd);color:var(--lime);text-decoration:none;word-break:break-all}
footer{border-top:1px solid var(--line);background:#0e0e0c;padding:2.5rem 0 6.5rem;color:var(--mute);font-size:.95rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.5rem}
footer ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.5rem}
footer a{text-decoration:none}
footer a:hover{color:var(--lime)}
@media(min-width:761px){footer{padding-bottom:2.5rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* ===== Estilo iOS / cristal (glassmorphism) =====
   Radios concéntricos: radio exterior = radio interior + relleno (dock 30 = 24 + 6; formulario 30 = 12 + 18) */
:root{--g-bg:rgba(255,255,255,.09);--g-bd:rgba(255,255,255,.2);--g-blur:blur(1.625rem) saturate(180%);
--g-sh:inset 0 1px 0 rgba(255,255,255,.28),0 0.625rem 2.5rem rgba(0,0,0,.35);--r-lg:1.875rem;--r-md:1.5rem;--r-in:0.75rem}
.dock,.tiles a,.card,.btn.ghost,.ph{background:var(--g-bg);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-bd);box-shadow:var(--g-sh)}
.tiles a:hover,.card:hover{background:rgba(255,255,255,.16);border-color:rgba(223,255,3,.7);box-shadow:var(--g-sh),0 0 1.875rem rgba(223,255,3,.18)}
.tiles a,.card{border-radius:var(--r-md)}
.ph{border-radius:var(--r-lg)}
input,select,textarea{border-radius:var(--r-in);background:rgba(255,255,255,.08);border:1px solid var(--g-bd);padding:.85rem 1rem}
input:focus,select:focus,textarea:focus{border-color:var(--lime);box-shadow:0 0 0 3px rgba(223,255,3,.18);outline:0}
.chk input{border-radius:0.375rem}

/* Panel de navegación */
.dock{border-radius:var(--r-lg);padding:0.375rem}
.dock ul{padding:0;gap:4px}
.dock a{border-radius:var(--r-md);padding:.55rem 1.1rem}
.dock a::before{border-radius:inherit;background:rgba(223,255,3,calc(var(--a)*.16));box-shadow:inset 0 0 0 1px rgba(223,255,3,calc(var(--a)*.45))}
@media(max-width:760px){.dock{border-radius:1.625rem;padding:0.3125rem}.dock a{border-radius:1.3125rem;padding:.5rem .55rem}}

/* Botones redondos */
.btn{border-radius:62.4375rem;padding:.9rem 1.8rem;box-shadow:0 0.375rem 1.5rem rgba(223,255,3,.22),inset 0 1px 0 rgba(255,255,255,.55)}
.btn.ghost{color:var(--txt)!important}
.btn.ghost:hover{background:rgba(255,255,255,.2)}
.cta{padding:.7rem 1.4rem}

/* Logo: solo un borde verde ligeramente iluminado */
.logo::before{inset:-18px -26px;background:radial-gradient(closest-side,rgba(223,255,3,.05),transparent);filter:blur(0.75rem)}
.logo img{filter:drop-shadow(0 0 1px rgba(223,255,3,.45)) drop-shadow(0 0 0.375rem rgba(223,255,3,.14))}

/* ===== Barra superior alineada + progreso en el borde de la ventana ===== */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:70;background:rgba(255,255,255,.08)}
.progress b{display:block;height:100%;background:var(--lime);box-shadow:0 0 0.625rem var(--lime);transform-origin:0 0;transform:scaleX(var(--p))}
.topbar{--edge:clamp(1.25rem,4vw,3.25rem);position:fixed;top:0;left:0;right:0;z-index:60;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:1.25rem var(--edge);pointer-events:none}
.topbar>*{pointer-events:auto}
.topbar .logo,.topbar .cta,.topbar .dock{position:relative;top:auto;left:auto;right:auto;transform:none}
.topbar .logo{justify-self:start;display:flex;align-items:center;padding:0}
.topbar .cta{justify-self:end}
@media(max-width:760px){
.topbar{grid-template-columns:1fr 1fr;padding:1rem var(--edge)}
.topbar .dock{position:fixed;top:auto;left:50%;bottom:calc(0.875rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%)}}

/* ===== Zona de contacto ===== */
.cc{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,5vw,4.5rem);padding:clamp(1.4rem,4vw,3rem);border-radius:2rem;background:rgba(44,44,38,.62);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-bd);box-shadow:var(--g-sh)}
.eyebrow{letter-spacing:.18em;text-transform:uppercase;color:var(--mute);font-size:.95rem;margin-bottom:2.2rem}
.cc h2{font:600 clamp(2rem,4vw,3rem)/1.1 var(--fb);max-width:10ch;margin-bottom:1.1rem}
.cc .lead{margin-bottom:0}
.info{list-style:none;padding:0;display:grid;gap:1.1rem;margin-top:2rem}
.info li{display:flex;gap:0.875rem;align-items:center}
.info b{display:block;font-size:.95rem}
.info span:not(.ic),.info a{color:var(--mute);font-size:.95rem;text-decoration:none}
.info a:hover{color:var(--lime)}
.ic{width:2.125rem;height:2.125rem;border-radius:0.625rem;background:rgba(223,255,3,.14);display:grid;place-items:center;color:var(--lime);flex:none}
.cc label{font-size:.78rem;font-weight:600;color:var(--mute)}
.cc .chk{font-size:.9rem;font-weight:400}
.cc input,.cc select,.cc textarea{font-size:1rem;font-weight:400;border-radius:0.875rem}
.cc .chk input{border-radius:0.375rem}
::placeholder{color:rgba(255,255,255,.45)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.cc .btn{width:100%;padding:1rem;font-size:1.02rem}
@media(max-width:800px){.cc{grid-template-columns:1fr}.row2{grid-template-columns:1fr}.cc h2{max-width:none}}

/* ===== Páginas legales ===== */
.legal{padding:8.75rem 0 4rem}
.doc{width:calc(100% - 2.5rem);max-width:53.75rem;width:min(53.75rem,100% - 2.5rem);margin-left:auto;margin-right:auto;padding:clamp(1.4rem,4vw,3rem);border-radius:2rem;background:rgba(44,44,38,.62);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-bd);box-shadow:var(--g-sh)}
.doc h1{font-size:1.5rem;font-size:clamp(1.5rem,3.6vw,2.3rem);margin-bottom:.6rem}
.doc .upd{color:var(--mute);margin-bottom:1.5rem;font-size:.95rem}
.doc h2{font:600 1.25rem/1.3 var(--fb);margin:2rem 0 .6rem;text-shadow:none}
.doc p,.doc li{color:#e6e6dc;margin-bottom:.75rem}
.doc ul{padding-left:1.3rem}
.doc a{color:var(--lime)}
.doc table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.95rem}
.doc th,.doc td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--g-bd)}
.doc th{color:var(--mute);font-weight:600}
mark{background:rgba(223,255,3,.22);color:#fff;padding:0 .3em;border-radius:0.375rem}

/* ===== Páginas de servicio ===== */
.doc.svc{width:calc(100% - 2.5rem);max-width:61.25rem;width:min(61.25rem,100% - 2.5rem)}
.crumbs{font-size:.9rem;color:var(--mute);margin-bottom:1.4rem}
.crumbs ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.35rem .6rem}
.crumbs li{margin:0;color:var(--mute)}
.crumbs li+li::before{content:"›";margin-right:.6rem;color:var(--lime)}
.crumbs a{color:var(--mute);text-decoration:none}
.crumbs a:hover{color:var(--lime)}
.svc .lead{max-width:62ch;font-size:1.15rem;color:#f0f0e6;margin-bottom:1.5rem}
.svc h2{margin-top:2.4rem}
.svc h3{font:600 1.05rem/1.35 var(--fb);text-shadow:none;margin:1.2rem 0 .3rem}
.chips{list-style:none;padding:0!important;display:flex;flex-wrap:wrap;gap:.5rem;margin:.4rem 0 1rem}
.chips li{margin:0;padding:.4rem .95rem;border-radius:62.4375rem;background:rgba(223,255,3,.1);border:1px solid rgba(223,255,3,.35);color:#fff;font-weight:500;font-size:.95rem}
.checks{list-style:none;padding:0!important;display:grid;gap:.6rem}
.checks li{position:relative;padding-left:1.7rem;margin:0}
.checks li::before{content:"";position:absolute;left:0;top:.62em;width:.6rem;height:.6rem;border-radius:2px;background:var(--lime);box-shadow:0 0 0.625rem rgba(223,255,3,.6)}
.cta-band{margin:2.6rem 0 0;padding:1.5rem;border-radius:var(--r-md);background:rgba(223,255,3,.08);border:1px solid rgba(223,255,3,.35);display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;justify-content:space-between}
.cta-band p{margin:0;max-width:44ch;color:#fff}
.related{margin-top:2.4rem}
.related ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(13.125rem,1fr));gap:.8rem}
.related li{margin:0}
.related a{display:block;height:100%;text-decoration:none;color:#fff;padding:1rem 1.1rem;border-radius:var(--r-md);background:var(--g-bg);border:1px solid var(--g-bd);box-shadow:var(--g-sh);transition:background .25s,border-color .25s}
.related a:hover{background:rgba(255,255,255,.16);border-color:rgba(223,255,3,.7)}
.related b{display:block;font:400 .9rem/1.3 var(--fd);margin-bottom:.35rem}
.related span{color:var(--mute);font-size:.95rem;line-height:1.4;display:block}
div.card:hover{background:var(--g-bg);border-color:var(--g-bd);box-shadow:var(--g-sh)}

/* ===== Desplegable personalizado (servicio de interés) ===== */
.sel{position:relative}
.sel select{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.sel-btn{display:flex;align-items:center;justify-content:space-between;gap:.8rem;width:100%;text-align:left;font:400 1rem var(--fb);color:var(--txt);background:rgba(255,255,255,.08);border:1px solid var(--g-bd);border-radius:0.875rem;padding:.85rem 1rem;cursor:pointer}
.sel-btn[data-empty]{color:rgba(255,255,255,.45)}
.sel-btn:focus-visible,.sel.open .sel-btn{border-color:var(--lime);box-shadow:0 0 0 3px rgba(223,255,3,.18);outline:0}
.sel-btn svg{flex:none;transition:transform .2s;color:var(--lime)}
.sel.open .sel-btn svg{transform:rotate(180deg)}
.sel-list{position:absolute;z-index:80;left:0;right:0;top:calc(100% + 0.5rem);max-height:min(20rem,50vh);overflow:auto;list-style:none;padding:0.375rem;margin:0;border-radius:1.125rem;background:rgba(32,32,28,.97);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-bd);box-shadow:var(--g-sh),0 1.125rem 3.125rem rgba(0,0,0,.55)}
.sel.up .sel-list{top:auto;bottom:calc(100% + 0.5rem)}
.sel-list[hidden]{display:none}
.sel-list li{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.65rem .8rem;border-radius:0.75rem;color:#fff;font:400 1rem/1.35 var(--fb);cursor:pointer}
.sel-list li[aria-selected="true"]{color:var(--lime)}
.sel-list li[aria-selected="true"]::after{content:"✓";font-weight:600}
.sel-list li.act{background:rgba(223,255,3,.14);box-shadow:inset 0 0 0 1px rgba(223,255,3,.4)}
.cc .sel-btn{font-size:1rem;font-weight:400}
.cc .sel-btn{color:#fff}
.cc .sel-btn[data-empty]{color:rgba(255,255,255,.45)}

/* ===== Servicios: escena con vídeo de fondo y un panel por sección ===== */
.pnl{width:100%;max-width:47.5rem;width:min(47.5rem,100%);margin:0 auto}
.pnl.wide{width:100%;max-width:68.75rem;width:min(68.75rem,100%)}
.scene .pnl{max-height:calc(100svh - 11.875rem);overflow:auto}
.svc .pnl h2:first-child{margin-top:0}
.pnl h1{font-size:1.45rem;font-size:clamp(1.45rem,3.4vw,2.5rem);margin-bottom:.9rem}
.pnl .crumbs{margin-bottom:1rem}
.pnl .lead{margin-bottom:0}
.pnl>:last-child{margin-bottom:0}
.pnl .cta-band{margin:0 0 1.4rem}
.pnl .related{margin-top:0}
.pnl .related h2{font-size:1.05rem;margin:0 0 .8rem}
@media(max-width:760px){
.pnl{padding:1.15rem 1.2rem;border-radius:1.625rem;font-size:.98rem}
.svc .pnl h2{font-size:1.1rem}
.pnl .lead{font-size:1.02rem}
.pnl .cta-band{padding:1rem;margin-bottom:1rem}
.pnl .related ul{grid-template-columns:1fr;gap:.5rem}
.pnl .related a{padding:.7rem .9rem}
.pnl .related span{display:none}}

/* ===== Menú desplegable (Servicios, Proyectos, Blog) ===== */
.dock li{position:relative}
.dock .sub{position:absolute;top:100%;left:50%;transform:translate(-50%,0.375rem);padding-top:1rem;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s}
.dock .sub ul{display:block;min-width:15.625rem;max-width:22.5rem;padding:0.375rem;border-radius:var(--r-md);background:rgba(28,28,24,.94);border:1px solid var(--g-bd);box-shadow:0 1.125rem 3rem rgba(0,0,0,.5)}
.dock .has-sub:hover .sub,.dock .has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translate(-50%,0)}
.dock .sub a{display:block;--a:0;color:#fff;text-shadow:none;border-radius:1.125rem;padding:.6rem 1rem;font-size:.95rem;line-height:1.35}
.dock .sub a::before{display:none}
.dock .sub a:hover,.dock .sub a:focus-visible{background:rgba(223,255,3,.14);color:var(--lime)}
@media(max-width:760px){.dock .sub{display:none}}

/* ===== Listados (proyectos y blog) y acciones ===== */
.more{margin-top:1.25rem}
.dock .sub .all{margin-top:4px;padding-top:4px;border-top:1px solid var(--g-bd)}
.dock .sub .all a{color:var(--lime);font-weight:600}
.lst{width:calc(100% - 2.5rem);max-width:73.75rem;width:min(73.75rem,100% - 2.5rem);margin-left:auto;margin-right:auto}
.lst h1{font-size:1.6rem;font-size:clamp(1.6rem,4vw,2.6rem);margin:1rem 0 .8rem}
.lst .lead{margin-bottom:2rem}
.lstgrid{grid-template-columns:repeat(auto-fill,minmax(18.75rem,1fr))}
.lst .card p{display:block}
.card.soon{cursor:default;opacity:.8}
.card.soon:hover{background:var(--g-bg);border-color:var(--g-bd);box-shadow:var(--g-sh)}

/* ===== Pie de página siempre al final de la ventana en páginas cortas ===== */
.flat{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
.flat main{flex:1 0 auto}
.flat footer{margin-top:auto}
.fnote{font-size:.85rem;color:var(--mute);margin:-.2rem 0 0}
.fnote a{color:var(--lime)}

/* ===== Selector de idioma e imagen 3A-MES ===== */
.tb-right{justify-self:end;display:flex;align-items:center;gap:0.75rem}
.lang{display:flex;gap:2px;padding:4px;border-radius:62.4375rem;background:var(--g-bg);border:1px solid var(--g-bd);box-shadow:var(--g-sh)}
.lang a{padding:.32rem .7rem;border-radius:62.4375rem;font-size:.8rem;font-weight:600;text-decoration:none;color:#fff}
.lang a:hover{background:rgba(255,255,255,.14)}
.lang a[aria-current]{background:rgba(223,255,3,.16);color:var(--lime)}
.mes-img{width:100%;height:auto;display:block;filter:drop-shadow(0 1.125rem 2.5rem rgba(0,0,0,.45))}
@media(max-width:900px){.mes .mes-img{display:none}}
@media(max-width:760px){.tb-right{gap:0.5rem}.lang a{padding:.3rem .5rem;font-size:.72rem}}
.dock a>span{white-space:nowrap}
@media(max-width:380px){.dock a{padding:.5rem .45rem;font-size:.74rem}}

/* =====================================================================
   CAPA RESPONSIVE: móviles (iPhone/Android), plegables, tablets, portátiles, TV y 4K
   Principios: rem para escalar en pantallas grandes · menú inferior táctil hasta 1099px ·
   objetivos táctiles ≥ 44px · sin :hover en táctiles · alternativas para navegadores antiguos
   ===================================================================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;color-scheme:dark}
a,button{-webkit-tap-highlight-color:rgba(223,255,3,.18)}
h1,h2,h3,.tiles b,.card h3,.related b{overflow-wrap:break-word}
.tiles>li,.grid>*,.mes>*,.cc>*,.row2>*,.related li{min-width:0}
.doc{overflow-wrap:anywhere}
.doc table{display:block;max-width:100%;overflow-x:auto}
body{overflow-x:hidden}
@supports (overflow:clip){body{overflow-x:clip}}

/* Sin backdrop-filter (TV y navegadores antiguos): fondos más opacos para mantener la legibilidad */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.dock,.tiles a,.card,.btn.ghost,.doc,.cc,.lang,.related a,.pnl,.sel-list{background:rgba(32,32,28,.94)}}

/* Pantallas grandes y TV: toda la interfaz escala con el tamaño base */
@media(min-width:1600px){html{font-size:112.5%}}
@media(min-width:2200px){html{font-size:137.5%}}
@media(min-width:3000px){html{font-size:175%}}
@media(min-width:3700px){html{font-size:200%}}

/* Sin escena fija (altura pequeña, zoom alto, movimiento reducido o sin JS): el contenido fluye en columna */
html:not(.scene) .ch .in{padding:4.5rem 0 1.5rem}
html:not(.scene) .hero .in{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:6rem 0 6rem}
html:not(.scene) .svc .ch .in{padding:.6rem 0}
html:not(.scene) .svc .ch:first-child .in{padding-top:6rem}
html:not(.scene) .svc .ch:last-child .in{padding-bottom:6rem}
html:not(.scene) .topbar::before{content:"";position:absolute;top:0;right:0;left:0;height:100%;background:linear-gradient(180deg,rgba(14,14,12,.92),rgba(14,14,12,.6) 60%,rgba(14,14,12,0));pointer-events:none;z-index:-1}
.flat .topbar::before{content:"";position:absolute;top:0;right:0;left:0;height:100%;background:linear-gradient(180deg,rgba(14,14,12,.92),rgba(14,14,12,.6) 60%,rgba(14,14,12,0));pointer-events:none;z-index:-1}
.scene .pnl{max-height:calc(100vh - 11rem);max-height:calc(100svh - 11rem)}

/* ---- Tablets y móviles (≤1099px): menú inferior estilo iOS, barra superior solo con logo, idioma y contacto ---- */
@media(max-width:1099px){
.topbar{grid-template-columns:auto 1fr;gap:.5rem;padding-top:max(.7rem,env(safe-area-inset-top));padding-bottom:.45rem;
padding-left:max(var(--edge),env(safe-area-inset-left));padding-right:max(var(--edge),env(safe-area-inset-right))}
.topbar .dock{position:fixed;top:auto;left:50%;bottom:calc(.75rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);max-width:calc(100% - 1rem)}
.dock{border-radius:1.7rem;padding:5px}
.dock ul{gap:2px;justify-content:center;flex-wrap:nowrap}
.dock a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 .8rem;font-size:.9rem;border-radius:1.3rem;white-space:nowrap}
.dock .sub{display:none}
.logo img{height:2rem}
.tb-right{gap:.5rem}
.lang{padding:3px}
.lang a{display:flex;align-items:center;justify-content:center;min-height:40px;min-width:40px;padding:0 .6rem;font-size:.78rem}
.topbar .cta{display:flex;align-items:center;justify-content:center;min-height:46px;padding:0 1.15rem;font-size:.92rem}
footer{padding-bottom:calc(6.5rem + env(safe-area-inset-bottom,0px))}
.legal{padding-top:6rem}
.scene .ch .in{padding:4.9rem 0 6rem}
}
/* Tablet vertical o plegable abierto con altura de sobra: se muestran las descripciones y la imagen de 3A-MES */
@media(max-width:1099px) and (min-width:600px) and (min-height:760px){
.tiles span{display:block}.card p{display:block}.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px) and (min-width:600px) and (min-height:900px){
.mes .mes-img{display:block;width:auto;max-width:100%;max-height:36vh;margin:1.2rem auto 0;object-fit:contain}}

/* ---- Móviles (≤760px) ---- */
@media(max-width:760px){
.dock a{padding:0 .55rem;font-size:.8rem}
.lang a{padding:0 .5rem;font-size:.74rem;min-width:38px}
.topbar .cta{padding:0 1rem;font-size:.88rem;min-height:44px}
.logo img{height:1.9rem}
.hero p{font-size:1.05rem}
.cc{padding:1.2rem;border-radius:1.6rem}
.doc{padding:1.2rem;border-radius:1.6rem}
.lst h1,.doc h1{font-size:1.35rem}
}
@media(max-width:600px){.tiles b,.card h3{font-size:.86rem}.hero h1{font-size:clamp(1.45rem,7.4vw,2.2rem)}}

/* ---- Móviles pequeños (iPhone SE/mini, Android compactos) ---- */
@media(max-width:360px){
.dock a{padding:0 .38rem;font-size:.74rem}
.lang a{padding:0 .38rem;font-size:.75rem;min-width:32px;min-height:38px}
.topbar .cta{padding:0 .8rem;font-size:.82rem}
.topbar{padding-left:.75rem;padding-right:.75rem}
.logo img{height:1.65rem}
.tiles{grid-template-columns:1fr}
.pnl h1{font-size:1.15rem}
}
/* ---- Plegables cerrados y pantallas muy estrechas (≤300px) ---- */
@media(max-width:300px){
.dock a{padding:0 .3rem;font-size:.68rem}
.lang a{padding:0 .3rem;font-size:.66rem;min-width:30px;min-height:36px}
.topbar .cta{padding:0 .6rem;font-size:.76rem}
.logo img{height:1.4rem}
.topbar{gap:.25rem;padding-left:.5rem;padding-right:.5rem}
.tb-right{gap:.3rem}
h1,.hero h1{font-size:1.2rem}
}
/* ---- Móvil en horizontal / ventanas bajas ---- */
@media(max-height:520px){
.dock a{min-height:38px;font-size:.8rem}
.topbar .cta{min-height:40px}
.lang a{min-height:34px}
.logo img{height:1.6rem}
.legal{padding-top:5rem}
footer{padding-bottom:5rem}
}

/* ---- Pantallas táctiles: sin efectos :hover pegados, con respuesta al toque ---- */
@media(hover:none){
.btn:hover{background:var(--lime)}
.btn.ghost:hover{background:var(--g-bg)}
.tiles a:hover,.card:hover,.related a:hover{background:var(--g-bg);border-color:var(--g-bd);box-shadow:var(--g-sh)}
.lang a:not([aria-current]):hover{background:transparent}
.dock .sub{display:none}
.btn:active{transform:scale(.97)}
.tiles a:active,.card:active,.related a:active{background:rgba(255,255,255,.18);border-color:rgba(223,255,3,.7)}
}

/* Ajustes finales de la capa responsive */
.lstgrid{grid-template-columns:repeat(auto-fill,minmax(min(18.75rem,100%),1fr))}
@media(max-width:360px){.lstgrid{grid-template-columns:1fr}}
@media(max-width:1099px){.topbar .logo{min-height:44px;align-items:center}}
@media(max-width:300px){.dock a{font-size:.72rem;padding:0 .26rem}.lang a{font-size:.72rem;padding:0 .28rem;min-width:28px}}
@media(pointer:coarse){.lang a{min-height:40px;min-width:40px}.dock a{min-height:44px}.topbar .cta{min-height:44px}}
@media(pointer:coarse) and (max-width:360px){.lang a{min-width:30px}}
@media(max-height:520px){
.hero h1{font-size:clamp(1.4rem,4.6vw,2.3rem);max-width:none;margin-bottom:.6rem}
.hero p{font-size:1rem;margin-bottom:1rem}
.hint{display:none}
html:not(.scene) .hero .in{min-height:0;padding:5rem 0 5rem}
.cc{padding:1.2rem}
}
.info a[href^="tel"]{white-space:nowrap}
@media(max-width:1099px){.dock{background:rgba(30,30,26,.84)}}

/* ===== Fondos fotográficos de la portada: una imagen por apartado con fundido automático según el scroll ===== */
.bgs{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-2;overflow:hidden;background:var(--ink)}
.bgs picture{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;will-change:opacity,transform;transform-origin:50% 50%}
.bgs picture:first-child{opacity:1}
.bgs img{position:absolute;top:0;left:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block}
.bgs picture:nth-child(1) img{object-position:45% 50%}
.bgs picture:nth-child(2) img{object-position:42% 50%}
.bgs picture:nth-child(3) img{object-position:42% 50%}
.bgs picture:nth-child(4) img{object-position:38% 50%}
.bgs picture:nth-child(5) img{object-position:50% 50%}
/* Velo oscuro para que el texto y los paneles se lean sobre las fotos */
.has-bg .veil,.has-bg.no-video .veil{background:linear-gradient(180deg,rgba(14,14,12,.68) 0,rgba(14,14,12,.52) 30%,rgba(14,14,12,.8) 68%,rgba(14,14,12,.92) 100%)}
.has-bg .tiles a,.has-bg .card,.has-bg .btn.ghost{background:rgba(24,24,20,.66)}
.has-bg .tiles a:hover,.has-bg .card:hover{background:rgba(48,48,40,.78)}
/* Portada: texto fuera de paneles más grande, más grueso y con sombra de contraste (el fondo mantiene su tono original) */
.has-bg:not(.has-pbg) .hero h1,.has-bg:not(.has-pbg) .ch h2{color:#fff;-webkit-text-stroke:.035em #fff;paint-order:stroke fill;text-shadow:0 0 .9rem rgba(0,0,0,.95),0 .15rem 1.6rem rgba(0,0,0,.9),0 1px .2rem rgba(0,0,0,.95)}
.has-bg:not(.has-pbg) .hero h1{font-size:1.9rem;font-size:clamp(1.9rem,5.9vw,4.4rem)}
.has-bg:not(.has-pbg) .ch h2{font-size:1.5rem;font-size:clamp(1.5rem,3.3vw,2.4rem)}
.has-bg:not(.has-pbg) .hero p,.has-bg:not(.has-pbg) .ch .lead,.has-bg:not(.has-pbg) .ch>.in>p,.has-bg:not(.has-pbg) .hint{font-weight:600;color:#fff;font-size:1.3rem;text-shadow:0 0 .8rem rgba(0,0,0,.95),0 .1rem 1.2rem rgba(0,0,0,.9),0 1px .15rem rgba(0,0,0,.95)}
.has-bg:not(.has-pbg) .hint{font-size:1.05rem}
.has-bg:not(.has-pbg) .ch .lead{font-size:1.25rem}
.has-bg:not(.has-pbg) .btn.ghost,.has-bg:not(.has-pbg) .btn{font-weight:700}
@media(max-width:900px){.has-bg:not(.has-pbg) .hero p,.has-bg:not(.has-pbg) .ch .lead,.has-bg:not(.has-pbg) .ch>.in>p{font-size:1.12rem}}
@media(max-width:600px){.has-bg:not(.has-pbg) .hero h1{font-size:clamp(1.6rem,8.2vw,2.4rem)}.has-bg:not(.has-pbg) .ch h2{font-size:clamp(1.3rem,6.2vw,1.7rem)}.has-bg:not(.has-pbg) .hero p,.has-bg:not(.has-pbg) .ch .lead,.has-bg:not(.has-pbg) .ch>.in>p{font-size:1.02rem}}
@media(max-height:520px){.has-bg:not(.has-pbg) .hero h1{font-size:clamp(1.5rem,4.9vw,2.5rem)}.has-bg:not(.has-pbg) .hero p{font-size:1.02rem}}

/* Fondos de proyecto: imágenes ya encuadradas (pieza arriba, desenfoque alrededor); velo más ligero arriba y oscuro abajo, donde van los paneles */
.has-pbg .bgs img{object-position:50% 36%}
@media (max-aspect-ratio:1/1){.has-pbg .bgs img{object-position:50% 0}}
.has-pbg .veil,.has-pbg.no-video .veil{background:linear-gradient(180deg,rgba(14,14,12,.34) 0,rgba(14,14,12,.12) 28%,rgba(14,14,12,.3) 52%,rgba(14,14,12,.72) 74%,rgba(14,14,12,.9) 100%)}
.has-pbg .card,.has-pbg .btn.ghost{background:rgba(24,24,20,.66)}
/* Servicio con fotos de página completa: encuadre centrado y velo algo más ligero que en la portada */
.has-sbg .bgs img{object-position:50% 50%}
@media (max-aspect-ratio:1/1){.has-sbg .bgs img{object-position:50% 50%}}
.has-sbg .veil,.has-sbg.no-video .veil{background:linear-gradient(180deg,rgba(14,14,12,.4) 0,rgba(14,14,12,.22) 28%,rgba(14,14,12,.4) 55%,rgba(14,14,12,.74) 78%,rgba(14,14,12,.9) 100%)}

/* ===== Índices de Proyectos y Blog: foto fija de fondo (zona oscura a la izquierda para el texto) ===== */
.has-ibg .bgs img{object-position:50% 50%}
.has-ibg .veil,.has-ibg.no-video .veil{background:linear-gradient(90deg,rgba(14,14,12,.5) 0,rgba(14,14,12,.12) 55%,rgba(14,14,12,0) 100%),linear-gradient(180deg,rgba(14,14,12,.55) 0,rgba(14,14,12,.1) 22%,rgba(14,14,12,.12) 60%,rgba(14,14,12,.62) 100%)}
.has-ibg .lst h1,.has-ibg .lst .lead,.has-ibg .crumbs{text-shadow:0 0 .8rem rgba(0,0,0,.85),0 .1rem 1.1rem rgba(0,0,0,.8)}
.has-ibg .lst .lead{color:#fff;font-weight:500}
.has-ibg .card{background:rgba(24,24,20,.72)}
@media (max-aspect-ratio:1/1){.has-ibg .veil,.has-ibg.no-video .veil{background:linear-gradient(180deg,rgba(14,14,12,.6) 0,rgba(14,14,12,.3) 35%,rgba(14,14,12,.45) 70%,rgba(14,14,12,.75) 100%)}}