:root{
  --bg:#0e1c17; --surface:#122620; --ink:#f2f1ec; --muted:#a9b8b0; --sub:#d3ddd7;
  --accent:#e8b04b; --accent-ink:#1c1400; --line:rgba(242,241,236,.14);
  --g1:#163026; --g2:#142822; --g3:#112420;
  --danger:#e85b4b;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:'Karla',sans-serif;-webkit-font-smoothing:antialiased}
body{position:relative}

img,svg{max-width:100%;display:block}
a{color:inherit}

header.top{position:sticky;bottom:0;left:0;right:0;z-index:30;display:flex;justify-content:space-between;align-items:center;
  padding:16px 6vw;max-width:1400px;margin:0 auto;background:transparent;
  transition:background .25s ease,backdrop-filter .25s ease,box-shadow .25s ease}
/* Fondo tenue desde el principio en TODAS las paginas menos la Home (peticion
   de Kamil 07/09): sin video/foto de hero detras, el menu transparente se
   volvia ilegible al mezclarse con el contenido normal de la pagina. La Home
   se queda igual que siempre (transparente hasta hacer scroll). */
body.sub-page header.top{background:rgba(14,28,23,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
header.top.scrolled{background:rgba(14,28,23,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 -1px 0 var(--line)}
@media (prefers-reduced-motion:reduce){header.top{transition:none}}
.brand{font-family:'Sora',sans-serif;font-weight:700;font-size:19px;text-decoration:none;letter-spacing:-.01em}
.brand-logo{display:inline-flex;align-items:center;background:#f2f1ec;border-radius:8px;padding:6px 10px;line-height:0;opacity:.96}
.brand-logo-flat{background:transparent;padding:0}
.brand-logo img{width:150px;height:auto;display:block}
@media (max-width:640px){.brand-logo img{width:118px}.brand-logo{padding:6px 10px}}
.top .phone{font-size:13px;color:var(--muted);text-decoration:none;display:flex;align-items:center;gap:6px}
/* Nulo en ordenadores de sobremesa (petición de Kamil 05/09: "tel:" no
   hace nada útil sin teléfono) — se oculta del todo con any-pointer:fine
   (ratón), el resto del menú ocupa el hueco. Sigue visible y funcional en
   móvil/tablet (any-pointer:coarse, toca y llama). */
@media (any-pointer: fine) { .top .phone { display: none; } }
.top nav{display:flex;gap:28px;font-size:14px;align-items:center}
/* Dorado y negrita por defecto, blanco al pasar el ratón (petición de Kamil
   05/09, corrigiendo el primer intento que no llegó a aplicarse). */
.top nav a{text-decoration:none;color:var(--accent);font-weight:700}
.top nav a:hover{color:var(--ink)}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:8px;width:40px;height:40px;
  color:var(--ink);align-items:center;justify-content:center;cursor:pointer;padding:0}
.nav-toggle svg{width:22px;height:22px}

/* ---------- WHATSAPP FLOAT ---------- */
.wa-float{position:fixed;bottom:42px;right:20px;z-index:40;width:50px;height:50px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px -8px rgba(0,0,0,.5);
  transition:transform .15s ease}
.wa-float:hover{transform:translateY(-3px) scale(1.04)}
.wa-float svg{width:30px;height:30px;color:#fff}
@media (prefers-reduced-motion:reduce){.wa-float{transition:none}}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:92svh;display:flex;flex-direction:column;justify-content:center;
  padding:0 6vw 0;overflow:hidden;
  background:
    linear-gradient(180deg, rgba(0,0,0,.15), var(--bg) 82%),
    radial-gradient(120% 90% at 50% 15%, color-mix(in srgb, var(--g1) 55%, transparent), transparent 60%),
    repeating-linear-gradient(115deg, var(--g2), var(--g2) 2px, var(--g3) 2px, var(--g3) 60px)}
.hero-inner{position:relative;padding-top:24px;padding-bottom:96px;max-width:1400px;margin:0 auto;width:100%}

.content{position:relative;text-align:center;max-width:900px;margin:0 auto;padding:70px 0 0}
/* Centrado vertical dentro del hueco reservado (petición de Kamil 06/09):
   con textos más cortos que el más largo de los 4, el min-height fijo
   (puesto por JS, ver el script del hero) dejaba un vacío abajo en vez de
   verse centrado. */
.hero-text-block{display:flex;flex-direction:column;justify-content:center}
.content>*{transition:opacity .4s ease}
/* Rotación de título+subtítulo del hero (petición de Kamil 05/09), dos
   modos elegibles desde /admin/hero.php:
   - "fundido": opacidad a 0 y de vuelta a 1 (clase .fundir).
   - "deslizar": "tensar el arco" antes de disparar — primero un empujón
     LENTO hacia la derecha (.tensar), luego el tirón RÁPIDO hacia la
     izquierda hasta salir de pantalla (.disparar); el texto entrante
     aparece ya fuera por la derecha SIN transición (.entrada-instantanea,
     forzando un reflow en JS antes de quitarla) y desde ahí sí recorre con
     transición hasta su sitio normal, a la misma velocidad rápida de salida. */
.hero-text-el{transition:transform .35s cubic-bezier(.55,0,.85,.35),opacity .3s ease .12s}
.hero-text-el.fundir{opacity:0}
.hero-text-el.tensar{transition:transform .6s ease;transform:translateX(3%)}
.hero-text-el.disparar{transform:translateX(-120%);opacity:0}
.hero-text-el.entrada-instantanea{transition:none!important;transform:translateX(120%);opacity:0}
.hero-photo{cursor:pointer}
.hero.peek .content>*:not(.ctas){opacity:.4}
.eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:22px}
h1{font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(2.4rem,6vw,4.4rem);line-height:1.05;
  letter-spacing:-.02em;text-wrap:balance}
.sub{margin:26px auto 0;max-width:52ch;color:var(--sub);font-size:17px;line-height:1.65}
/* Un poco más claro en el hero (petición de Kamil 05/09: se lee peor sobre
   el vídeo que sobre fondo liso) — el resto de .sub del sitio no cambia. */
.hero-photo .sub{color:var(--ink)}
.ctas{margin-top:38px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn{font-family:'Sora',sans-serif;font-weight:600;font-size:15px;padding:16px 30px;border-radius:8px;text-decoration:none;
  display:inline-block;transition:transform .15s ease;border:none;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--accent);border:1px solid var(--accent);color:var(--accent-ink)}
/* Mismo efecto de intercambio de colores al pasar el ratón que el botón de
   WhatsApp (petición de Kamil 05/09). */
.btn.primary:hover{background:transparent;color:var(--accent)}
.btn.ghost{border:1px solid rgba(242,241,236,.35);color:var(--ink);background:transparent}
/* Verde de marca de WhatsApp (petición de Kamil 05/09) — solo para el botón
   Hablar por WhatsApp del hero, se distingue del resto de botones ghost. */
.btn.whatsapp{background:#25D366;border-color:#25D366;color:#000}
.btn.whatsapp:hover{background:transparent;color:#25D366}
/* Dorado con el mismo intercambio de colores al pasar el ratón (petición de
   Kamil 05/09, para "Ver todos los proyectos"). */
.btn.gold{border-color:var(--accent);color:var(--accent)}
.btn.gold:hover{background:var(--accent);color:var(--accent-ink)}
.btn.small{padding:12px 22px;font-size:14px}
@media (prefers-reduced-motion:reduce){ .btn{transition:none} }

.stats{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:80px;
  background:var(--line);border-top:1px solid var(--line)}
.stats div{background:var(--bg);padding:26px 6vw;text-align:center}
.stats b{font-family:'Sora',sans-serif;font-weight:800;font-size:2rem;color:var(--accent);display:block}
.stats span{font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

/* ---------- SECTIONS ---------- */
section{padding:9vh 6vw;max-width:1400px;margin:0 auto}
/* Dos <section> seguidos suman su padding vertical (9vh abajo + 9vh arriba =
   18vh, el doble de lo que se ve entre cualquier otro par de bloques) —
   bug detectado por Kamil 06/09 en TODA la web, no solo en el CTA de
   contacto. El padding de cada section por separado sigue haciendo falta
   (primera section tras el header, ultima antes del footer), asi que en
   vez de tocar ese valor se cancela el solape especificamente cuando hay
   dos section pegados. */
section + section{margin-top:-9vh}
.section-head{max-width:640px;margin-bottom:52px}
.eyebrow-sm{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:14px}
h2{font-family:'Sora',sans-serif;font-weight:700;font-size:clamp(1.7rem,3vw,2.3rem);letter-spacing:-.01em;text-wrap:balance}
.section-head p{margin-top:14px;color:var(--muted);font-size:16px;line-height:1.6}

.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
.service-card{background:var(--surface);padding:32px 26px;text-decoration:none;transition:background .15s ease}
.service-card:hover{background:color-mix(in srgb, var(--surface) 80%, var(--accent) 8%)}
.service-card .icon{width:40px;height:40px;color:var(--accent);margin-bottom:22px}
.service-card b{font-family:'Sora',sans-serif;font-size:1.05rem;display:block;margin-bottom:8px;font-weight:600}
.service-card span{font-size:14px;color:var(--muted);line-height:1.5;display:block}

.projects-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.project-card{text-decoration:none;display:flex;flex-direction:column;gap:16px}
.project-frame{aspect-ratio:4/3;border-radius:10px;overflow:hidden;position:relative;
  background:linear-gradient(150deg,var(--g1),var(--g3))}
.project-frame svg{position:absolute;inset:0;width:100%;height:100%;opacity:.85}
.project-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.75);transition:filter .25s ease}
/* Foto un poco más oscura por defecto, brillo normal al pasar el ratón
   (petición de Kamil 05/09). */
.project-card:hover .project-frame img{filter:brightness(1)}
.project-hero-frame{aspect-ratio:16/7;margin-bottom:24px}
.project-body-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:start}
.project-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:44px}
.project-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;display:block}
.gallery-thumb{border:none;padding:0;background:none;cursor:pointer;display:block;border-radius:8px;overflow:hidden}
.gallery-thumb img{transition:filter .2s ease}
.gallery-thumb:hover img{filter:brightness(1.08)}

/* Visor de fotos (peticion de Kamil 06/09): controles fijos al viewport para
   que floten sobre la imagen sea cual sea su tamano, igual que cualquier
   lightbox estandar. */
#gallery-lightbox{margin:auto;border:none;padding:0;background:transparent;max-width:94vw;max-height:94vh;overflow:visible}
#gallery-lightbox::backdrop{background:rgba(0,0,0,.88)}
#gallery-lightbox-img{display:block;max-width:94vw;max-height:94vh;width:auto;height:auto;margin:0 auto;border-radius:8px;box-shadow:0 24px 60px -20px rgba(0,0,0,.6)}
#gallery-lightbox-close,#gallery-lightbox-prev,#gallery-lightbox-next{position:fixed;border:none;color:#fff;background:rgba(20,20,20,.6);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%}
#gallery-lightbox-close:hover,#gallery-lightbox-prev:hover,#gallery-lightbox-next:hover{background:rgba(20,20,20,.85)}
#gallery-lightbox-close{top:18px;right:22px;width:44px;height:44px;font-size:26px}
#gallery-lightbox-prev,#gallery-lightbox-next{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:20px}
#gallery-lightbox-prev{left:22px}
#gallery-lightbox-next{right:22px}
#gallery-lightbox-count{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.75);font-size:13px;letter-spacing:.04em}

@media (max-width:640px){.project-gallery{grid-template-columns:1fr 1fr}.project-hero-frame{aspect-ratio:4/3}.project-body-grid{grid-template-columns:1fr!important;gap:32px!important}}
/* Vídeo de fondo del hero (petición de Kamil 05/09, sustituye al pop-up de
   play que no le gustó): mismo tratamiento visual que la foto estática que
   sustituye — mismo encaje absoluto, mismo object-fit:cover y misma opacidad,
   para que el degradado oscuro de .hero-photo::after (justo debajo) siga
   garantizando la legibilidad del texto encima igual que antes. */
/* Ciclo foto→vídeo→vídeo→foto con fundido a oscuro entre cada uno (petición
   de Kamil 05/09) — clase compartida por la foto y el vídeo del hero, que se
   turnan mostrándose (.visible, opacidad .38, la que ya tenía el fondo) u
   ocultándose (opacidad 0) según el estado que lleva el script de index.php. */
.hero-media-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.hero-media-layer.visible{opacity:.5}
#hero-video-bg.visible{opacity:.68}
.hero-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(14,28,23,.72), rgba(14,28,23,.55) 45%, var(--bg) 96%)}
/* "Espiar" el vídeo (petición de Kamil 05/09): clic sobre el texto del hero
   lo atenúa y aclara el vídeo de detrás, para quien tenga curiosidad de ver
   la obra sin esperar al bucle completo. Cualquier tecla o scroll lo
   deshace (ver script al final de footer.php/index.php). */
.hero-photo::after{transition:opacity .4s ease}
.hero.peek.hero-photo::after{opacity:.08}
.hero.peek .hero-media-layer.visible{opacity:1}
.hero-photo .hero-inner{position:relative;z-index:2}
.project-card b{font-family:'Sora',sans-serif;font-size:1.02rem;font-weight:600}
.project-card span{font-size:13px;color:var(--muted)}
.project-card-resumen{font-size:13.5px;color:var(--sub);line-height:1.6;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.projects-more{text-align:center;margin-top:44px}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:40px}
.filters a{font-size:13.5px;padding:9px 16px;border-radius:100px;border:1px solid var(--line);text-decoration:none;color:var(--muted)}
.filters a.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}

.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.why-item .icon{width:36px;height:36px;color:var(--accent);margin-bottom:18px}
.why-item b{font-family:'Sora',sans-serif;font-size:1.05rem;font-weight:600;display:block;margin-bottom:10px}
.why-item span{font-size:14.5px;color:var(--muted);line-height:1.6}

.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.testi{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:30px 26px;position:relative}
.testi .tag{position:absolute;top:-10px;left:20px;background:var(--accent);color:var(--accent-ink);
  font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:100px}
.testi p{font-size:15px;line-height:1.65;color:var(--sub);font-style:italic;margin-bottom:18px}
.testi b{font-family:'Sora',sans-serif;font-size:14px;font-weight:600;display:block}
.testi span{font-size:12.5px;color:var(--muted)}

.blog-teaser{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:44px 6vw;
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.blog-teaser div b{font-family:'Sora',sans-serif;font-size:1.3rem;font-weight:700;display:block;margin-bottom:8px}
.blog-teaser div span{color:var(--muted);font-size:15px}

.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.blog-card{text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px;display:block}
.blog-card b{font-family:'Sora',sans-serif;font-size:1.05rem;display:block;margin-bottom:10px}
.blog-card span.date{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:10px}
.blog-card p{font-size:14px;color:var(--muted);line-height:1.6}

.cta-final{text-align:center;background:linear-gradient(150deg,var(--g1),var(--bg));border-radius:20px;
  padding:8vh 6vw}
.cta-final h2{margin-bottom:16px}
.cta-final p{color:var(--muted);max-width:48ch;margin:0 auto 34px}

footer{border-top:1px solid var(--line);padding:6vh 6vw;max-width:1400px;margin:0 auto}
.footer-grid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:32px}
.footer-brand{font-family:'Sora',sans-serif;font-weight:700;font-size:1.1rem;white-space:nowrap}
.footer-address{font-family:'Karla',sans-serif;font-weight:400;font-size:13px;color:var(--muted);margin-top:10px;line-height:1.6}
.footer-tagline{font-family:'Karla',sans-serif;font-weight:400;font-size:13px;color:var(--muted);margin-top:14px;padding-top:14px;border-top:1px solid var(--line);line-height:1.6;max-width:340px}
.footer-tagline a{color:var(--muted);text-decoration:none}
.footer-tagline a:hover{color:var(--accent)}
.footer-links,.footer-contact,.footer-hashtags{display:flex;flex-direction:column;gap:8px;font-size:14px}
.footer-hashtags span{color:var(--muted)}
.footer-links a,.footer-contact a{color:var(--muted);text-decoration:none}
.footer-links span{color:var(--muted)}
.footer-links a:hover,.footer-contact a:hover{color:var(--accent)}
.footer-social{display:flex;gap:14px;margin-top:22px}
.footer-social a{color:var(--muted);display:flex}
.footer-social a:hover{color:var(--accent)}
.footer-bottom{font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:24px}
.footer-legal{display:flex;gap:22px;flex-wrap:wrap;font-size:12.5px;margin-top:10px}
.footer-legal a{color:var(--muted);text-decoration:none}
.footer-legal a:hover{color:var(--ink)}
.legal-page{max-width:70ch}
.legal-page h2{font-family:'Sora',sans-serif;font-size:1.1rem;margin:32px 0 10px}
.legal-page p{color:var(--sub);line-height:1.7;margin-bottom:12px}
.legal-page ul{padding-left:20px;margin-bottom:12px}
.legal-page li{color:var(--sub);line-height:1.7;margin-bottom:6px}


/* breadcrumb / subpage header */
.crumb{font-size:13px;color:var(--muted);margin-bottom:20px}
.crumb a{text-decoration:none;color:var(--accent);font-weight:700}
.crumb a:hover{color:var(--ink)}
.page-hero{padding:6vh 6vw;max-width:1400px;margin:0 auto}
.page-hero .eyebrow{margin-bottom:18px}
.page-hero h1{font-size:clamp(2rem,4.6vw,3.2rem);text-align:left}
.page-hero p.sub{text-align:left;margin:22px 0 0;max-width:60ch}
.project-location{color:var(--muted);font-size:14px;margin:10px 0 0}
.project-resumen-link{cursor:pointer;margin:0}
.project-resumen-link:hover{color:var(--ink)}
.project-hero-row{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:22px;padding-right:6vw}
.project-hero-row .btn{flex-shrink:0}
.body-copy{max-width:68ch;font-size:16px;line-height:1.8;color:var(--sub)}
.body-copy h3{font-family:'Sora',sans-serif;font-size:1.2rem;margin:36px 0 14px;color:var(--ink)}
.body-copy ul{margin:14px 0 14px 22px}
.body-copy li{margin-bottom:8px}
.spec-list{display:grid;grid-template-columns:1fr 1fr;gap:16px 32px;margin:20px 0 0}
.spec-list div{border-top:1px solid var(--line);padding-top:12px}
.spec-list b{display:block;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}

/* ---------- FORM (contacto) ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:640px;margin:0 auto}
.form-grid .full{grid-column:1/-1}
label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em}
input,select,textarea{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:8px;
  padding:13px 14px;color:var(--ink);font-family:'Karla',sans-serif;font-size:15px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
textarea{resize:vertical;min-height:120px}
.form-msg{padding:16px 18px;border-radius:10px;margin-bottom:24px;font-size:14.5px}
.form-msg.ok{background:rgba(76,191,113,.12);border:1px solid rgba(76,191,113,.35);color:#8fe0aa}
.form-msg.err{background:rgba(232,91,75,.12);border:1px solid rgba(232,91,75,.35);color:#f0a89f}

@media (max-width:1100px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .projects-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:1fr}
  .testimonials{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .spec-list{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .services-grid{grid-template-columns:1fr}
  .projects-grid{grid-template-columns:1fr}
  header.top{flex-wrap:wrap}
  .nav-toggle{display:flex}
  /* En móvil el hueco de 120px por encima del texto del hero dejaba mucho
     espacio vacío bajo el botón flotante de WhatsApp (petición de Kamil
     06/09: el texto debe empezar justo debajo de ese icono, que acaba en
     22px+58px=80px desde arriba). */
  .content{padding-top:92px}
  /* Menos separación entre los CTAs y el bloque de cifras en móvil
     (petición de Kamil 06/09: "empezarse una línea antes"). */
  .stats{margin-top:40px}
  /* bottom:100% (no top:100%): header.top vive ANCLADO ABAJO de la
     pantalla (position:sticky;bottom:0, ver arriba) — un desplegable con
     top:100% se salía por debajo, fuera de la vista, y parecía que el
     hamburguesa "no hacía nada" (bug real visto por Kamil 06/09). */
  .top nav{display:none;position:absolute;bottom:100%;left:0;right:0;flex-direction:column;align-items:flex-start;
    gap:2px;background:var(--surface);border-top:1px solid var(--line);padding:8px 6vw 18px;
    box-shadow:0 -12px 28px -14px rgba(0,0,0,.6)}
  .top nav.open{display:flex}
  .top nav a{width:100%;padding:12px 0;border-bottom:1px solid var(--line)}
  .top nav a:last-child{border-bottom:none}
}

/* ---------- COOKIE BANNER ---------- */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:96px;z-index:50;max-width:520px;margin:0 auto;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px 22px;
  box-shadow:0 16px 40px -16px rgba(0,0,0,.6)}
.cookie-banner p{font-size:13.5px;line-height:1.6;color:var(--sub);margin-bottom:14px}
.cookie-banner a{color:var(--accent);text-decoration:underline}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie-actions button{font-size:13.5px;padding:9px 18px;border-radius:8px;cursor:pointer;font-family:'Karla',sans-serif;font-weight:600}
.cookie-actions .btn-primary{background:var(--accent);border:none;color:var(--accent-ink)}
.cookie-actions .btn-outline{background:transparent;border:1px solid var(--line);color:var(--ink)}


/* Pop-up de Aviso Legal/Privacidad/Cookies (petición de Kamil 05/09): fondo
   oscuro a juego con el sitio, franja dorada arriba, cierre arriba a la
   derecha, centrado (comportamiento nativo de <dialog>, no hace falta
   forzar posición porque aquí sí queremos que se recentre con el alto del
   contenido, a diferencia del hero). */
#legal-dialog{margin:auto;border:none;border-top:4px solid var(--accent);border-radius:14px;padding:32px;
  width:min(720px, calc(100vw - 48px));max-height:calc(100dvh - 64px);
  background:var(--bg);color:var(--ink);box-shadow:0 24px 60px -20px rgba(0,0,0,.6);overflow:hidden}
/* El scroll va en el body, no en el dialog entero (petición de Kamil 05/09:
   la X de cerrar tiene que verse siempre) — así la X, al vivir fuera del
   área que hace scroll, se queda fija en su sitio pase lo que pase. */
#legal-dialog-body{max-height:calc(100dvh - 128px);overflow-y:auto;scrollbar-color:var(--line) transparent}
#legal-dialog-body::-webkit-scrollbar{width:10px}
#legal-dialog-body::-webkit-scrollbar-track{background:transparent}
#legal-dialog-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
#legal-dialog-body::-webkit-scrollbar-thumb:hover{background:var(--muted)}
#legal-dialog::backdrop{background:rgba(0,0,0,.72)}
#legal-dialog-close{position:absolute;top:14px;right:14px;width:36px;height:36px;background:rgba(242,241,236,.08);
  border:none;border-radius:50%;color:var(--ink);font-size:22px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
#legal-dialog-close:hover{background:rgba(242,241,236,.16);color:var(--accent)}
#legal-dialog-body h2{font-family:'Sora',sans-serif;font-size:1.4rem;margin:0 0 20px;padding-right:36px}

/* Comparador antes/despues con hover (peticion de Kamil 07/09): al pasar el
   raton por una mitad, esa mitad se ensancha (flex-grow) y la otra se
   encoge, sin JS, con el selector :has() sobre el contenedor padre. */
.compare-hover{position:relative}
.compare-half{flex:1;position:relative;overflow:hidden;transition:flex-grow .35s cubic-bezier(.16,1,.3,1)}
.compare-half img{width:100%;height:100%;object-fit:cover;display:block}
.compare-hover:has(.compare-antes:hover) .compare-antes{flex:1 1 auto}
.compare-hover:has(.compare-antes:hover) .compare-despues{flex:0 0 27px}
.compare-hover:has(.compare-despues:hover) .compare-despues{flex:1 1 auto}
.compare-hover:has(.compare-despues:hover) .compare-antes{flex:0 0 27px}
/* Solo la mitad que se ve grande enseña su rotulo (peticion de Kamil
   07/09) — la que se encoge pierde el suyo del todo, no solo se corta. */
.compare-hover:has(.compare-antes:hover) .compare-despues .compare-label{display:none}
.compare-hover:has(.compare-despues:hover) .compare-antes .compare-label{display:none}
.compare-label{position:absolute;bottom:14px;left:14px;background:rgba(10,20,15,.72);color:#fff;
  font-family:'Sora',sans-serif;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 12px;border-radius:6px;white-space:nowrap;overflow:hidden;max-width:calc(100% - 28px)}
@media (prefers-reduced-motion:reduce){.compare-half{transition:none}}