@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap');
/* Helvetica Neue - variantes locales (WOFF2) */
@font-face{font-family:"Helvetica Neue";src:local("Helvetica Neue Thin"), local("HelveticaNeue-Thin"), url("/assets/fonts/HelveticaNeue-Thin.woff2") format("woff2");font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:"Helvetica Neue";src:local("Helvetica Neue Thin Italic"), local("HelveticaNeue-ThinItalic"), url("/assets/fonts/HelveticaNeue-ThinItalic.woff2") format("woff2");font-weight:100;font-style:italic;font-display:swap}
@font-face{font-family:"Helvetica Neue";src:local("Helvetica Neue UltraLight"), local("HelveticaNeue-UltraLight"), url("/assets/fonts/HelveticaNeue-UltraLight.woff2") format("woff2");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:"Helvetica Neue";src:local("Helvetica Neue UltraLight Italic"), local("HelveticaNeue-UltraLightItalic"), url("/assets/fonts/HelveticaNeue-UltraLightItalic.woff2") format("woff2");font-weight:200;font-style:italic;font-display:swap}
@font-face{font-family:"Helvetica Neue";src:local("Helvetica Neue Light"), local("HelveticaNeue-Light"), url("/assets/fonts/HelveticaNeue-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Helvetica Neue";src:local("Helvetica Neue Light Italic"), local("HelveticaNeue-LightItalic"), url("/assets/fonts/HelveticaNeue-LightItalic.woff2") format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Helvetica Neue";src:local("Helvetica Neue"), local("HelveticaNeue"), local("Helvetica Neue Roman"), url("/assets/fonts/HelveticaNeue-Roman.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Helvetica Neue";src:local("Helvetica Neue Italic"), local("HelveticaNeue-Italic"), url("/assets/fonts/HelveticaNeue-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Helvetica Neue";src:local("Helvetica Neue Medium"), local("HelveticaNeue-Medium"), url("/assets/fonts/HelveticaNeue-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Helvetica Neue";src:local("Helvetica Neue Medium Italic"), local("HelveticaNeue-MediumItalic"), url("/assets/fonts/HelveticaNeue-MediumItalic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Helvetica Neue";src:local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url("/assets/fonts/HelveticaNeue-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Helvetica Neue";src:local("Helvetica Neue Bold Italic"), local("HelveticaNeue-BoldItalic"), url("/assets/fonts/HelveticaNeue-BoldItalic.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Helvetica Neue";src:local("Helvetica Neue Heavy"), local("HelveticaNeue-Heavy"), url("/assets/fonts/HelveticaNeue-Heavy.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Helvetica Neue";src:local("Helvetica Neue Heavy Italic"), local("HelveticaNeue-HeavyItalic"), url("/assets/fonts/HelveticaNeue-HeavyItalic.woff2") format("woff2");font-weight:800;font-style:italic;font-display:swap}
@font-face{font-family:"Helvetica Neue";src:local("Helvetica Neue Black"), local("HelveticaNeue-Black"), url("/assets/fonts/HelveticaNeueBlack.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Helvetica Neue";src:local("Helvetica Neue Black Italic"), local("HelveticaNeue-BlackItalic"), url("/assets/fonts/HelveticaNeueBlackItalic.woff2") format("woff2");font-weight:900;font-style:italic;font-display:swap}
@font-face{font-family:"Montserrat";src:local("Montserrat Variable"), local("Montserrat-VariableFont_wght"), url("/assets/fonts/Montserrat-VariableFont_wght.woff2") format("woff2-variations"), url("/assets/fonts/Montserrat-VariableFont_wght.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --bg:#000000;
  --fg:#f5f5f5;
  --muted:#b3b3b3;
  --line:#1e1e1e;
  --accent:#ffffff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: "Montserrat", sans-serif;
  line-height:1.5;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}








.container{max-width:none;margin:10px auto}

.preloader{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#000;color:#fff;font-weight:800;letter-spacing:.08em;text-transform:uppercase;z-index:100;transition:none}
.preloader.hidden{opacity:0;visibility:hidden;transition:opacity .5s ease, visibility .5s ease}

@keyframes preloaderSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes preloaderShrink{from{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,-50%) scale(0);opacity:0}}
@keyframes preloaderFadeIn{from{opacity:0;transform:translate(-50%,-50%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.preloader::before{content:"";position:fixed;left:50%;top:50%;width:52px;height:52px;border:3px solid rgba(255,255,255,.25);border-top-color:var(--accent);border-radius:50%;transform:translate(-50%,-50%);animation:preloaderSpin .9s linear infinite}
.preloader::after{content:"";position:fixed;left:50%;top:50%;width:40px;height:40px;background:url('/assets/images/anagrama.avif') no-repeat center/contain;transform:translate(-50%,-50%);filter:drop-shadow(0 2px 10px rgba(0,0,0,.5));animation:preloaderFadeIn .5s ease .05s both}
.preloader.out::before{animation:preloaderShrink .5s ease forwards}
.preloader.out::after{animation:preloaderShrink .5s ease forwards}
/* Asegurar que el fondo negro se mantenga estable durante toda la precarga */
.preloader, .preloader.out{background:#000 !important}
/* ocultar visualmente el texto, mantener accesible para SR */
.preloader{color:transparent;text-shadow:none}

@media (max-width:640px){
  .preloader::before{width:42px;height:42px;border-width:3px}
  .preloader::after{width:32px;height:32px}
}

.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(0,0,0,.7);backdrop-filter:saturate(180%) blur(10px);
}
.site-header + main,
.site-header ~ main{padding-top:90px}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:90px;max-width:1230px;margin:0 auto}
.brand{display:inline-flex;align-items:flex-end;gap:5px;color:var(--fg);text-decoration:none;flex-direction: row-reverse;}
.brand img{display:block;height:51px;width:auto;padding-bottom:2px}
.brand .brand-text{display:flex;flex-direction:column;line-height:0.90}
.brand .brand-title{font-family:"Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif;font-weight:100;letter-spacing:.02em;font-size:23px;color:var(--fg)}
.brand .brand-title .arq{font-weight:300}
.brand .brand-subtitle{font-family:"Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif;font-weight:200;letter-spacing:0;font-size:16px;color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
.main-nav{display:flex;align-items:flex-end}
.main-nav a{margin-left:22px;text-decoration:none;color:#aaaaaa;letter-spacing:.06em;text-transform:uppercase;font-size:13px;font-family:"Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif}
.main-nav a:hover{opacity:.7}
.main-nav a.active{color:#ffffff;text-decoration-color:#ffffff;text-underline-offset:4px}
.nav-toggle{display:none;flex-direction:column;gap:4px;background:transparent;border:0;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--fg);transform-origin:center;transition:transform .25s ease, opacity .2s ease}
.nav-drawer{position:fixed;inset:0;background:rgba(0,0,0,.98);padding:24px;z-index:40;transform:translateX(100%);transition:transform .4s ease}
.nav-drawer.open{transform:translateX(0)}
.nav-drawer .drawer-links{display:flex;flex-direction:column;gap:18px;margin-top:24px}
.nav-drawer a{text-decoration:none;color:#8E8E8E;font-weight:200;letter-spacing:.08em;text-transform:uppercase;font-family:"Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif}
.nav-drawer a.active{color:#ffffff;text-decoration:underline;text-decoration-color:#ffffff;text-underline-offset:4px}
@media (max-width:1100px){.main-nav{display:none}.nav-toggle{display:flex}}
@media (max-width:900px){
  .brand img{height:64px}
  .brand .brand-title{font-size:24px}
  .brand .brand-subtitle{font-size:11px}
}

/* Ajustes específicos para móviles */
@media (max-width:640px){
  .site-header + main, .site-header ~ main{padding-top:75px}
  .header-inner{height:75px;padding:0 24px}
  .brand .brand-title{font-size:20px}
  .brand img{height:35px}
  .nav-toggle{width:40px;height:40px;align-items:center;justify-content:center;padding-top: 8px;}
  .nav-toggle span{width:24px;height:2px}
  .nav-drawer .drawer-links a{font-size:18px;padding:12px 0}
}

/* Rango 1100px → 640px: probar padding lateral 165px para header */
@media (min-width:641px) and (max-width:1100px){
  .header-inner{padding:0 165px}
}

/* Menú móvil simplificado: desplegable bajo el header */
@media (max-width:1100px){
  .header-inner{position:relative}
  .main-nav{
    display:flex;
    position:fixed;
    top:0;right:0;left:auto;
    width:190px;
    background:#1d1d1d;
    padding:75px 0 20px 24px;
    border-left:1px solid var(--line);
    z-index:40;
    flex-direction:column;
    align-items:flex-start;
    gap:15px;
    overflow:auto;
    height:100vh;
    transform:translateX(190px);
    transition:transform .32s cubic-bezier(.22,.61,.36,1);
  }
  /* Asegurar que el botón hamburguesa quede por encima del panel */
  .nav-toggle{position:relative;z-index:60}
  /* Animar hamburguesa → cruz cuando el menú está abierto */
  .nav-open .nav-toggle span:nth-child(1),
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav-open .nav-toggle span:nth-child(2),
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-open .nav-toggle span:nth-child(3),
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .main-nav.open{transform:translateX(0)}
  .main-nav a{margin:0;padding:0px 0px 0px 15px;font-size:14px;width:100%;display:block}
  .main-nav .nav-head{display:flex;width:100%;justify-content:flex-end;align-items:center}
  .main-nav .nav-close{color:#bfbfbf;text-decoration:none;font-size:18px;line-height:1;padding:6px 8px;border-radius:6px}
  .main-nav .nav-close:hover{color:#fff;background:rgba(255,255,255,.08)}
  /* Empujar contenido a la izquierda cuando el menú está abierto (no mover header para evitar separación) */
  .nav-open main,
  .nav-open .site-footer{transform:translateX(-190px) !important;transition:transform .32s cubic-bezier(.22,.61,.36,1);will-change:transform}
  main,
  .site-footer{transition:transform .32s cubic-bezier(.22,.61,.36,1);will-change:transform}
  /* Mantener header fijo sin desplazamiento */
  .site-header{transition:transform .32s cubic-bezier(.22,.61,.36,1)}
  .nav-open{overflow:hidden}
}

/* Ajustar el top del panel bajo el header en móviles pequeños */
@media (max-width:640px){
  .main-nav{padding-top:83px}
}


/* Ajustes de alineación y escala del header en ≤1100px */
@media (max-width:1100px){
  .header-inner{padding:0 18px}
}
@media (min-width:901px) and (max-width:1100px){
  .brand img{height:56px}
  .brand .brand-title{font-size:28px}
}

.hero{padding:80px 0 40px;border-bottom:1px solid var(--line);background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0))}
.hero h1{font-size:44px;margin:0 0 8px}
.hero .lead{font-size:18px;margin:0 0 8px;color:#e8e8e8}
.hero .locations{color:var(--muted);font-size:14px}

.section h2{text-align: center;}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

.mosaic{padding:1px 0 0 0}
.mosaic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;justify-content: center;}
.mosaic .container{display:block;max-width:1230px;margin:0 auto;padding:0 24px}
@media (min-width:1140px){.mosaic-grid{grid-template-columns:610px 1fr}.mosaic .container{padding:0}}
.featured-card{position:relative;overflow:hidden;background:#000;border:1px solid var(--line);aspect-ratio:1/1}
.featured-card .media{position:relative}
.featured-card .media,.featured-card .media img{position:absolute;inset:0}
/* Capa de degradado para oscurecer la imagen de fondo y mejorar legibilidad */
.featured-card .media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.8) 100%);z-index:1;pointer-events:none}
.featured-card img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1);transition:transform 1s cubic-bezier(.22,.61,.36,1)}
.featured-card:hover img{transform:scale(1.04)}
.featured-card .overlay{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto;gap:0;padding:22px 45px 35px 45px;z-index:2}
.featured-card .top-pill{align-self:flex-start;background:rgba(255,255,255,.9);color:#111;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
/* Eyebrow en la parte superior de featured-card (sustituye al top-pill) */
.featured-card .overlay > .eyebrow{align-self:flex-start;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.featured-card .bottom{color:#fff;text-shadow:0 4px 24px rgba(0,0,0,.5)}
.featured-card .bottom h3{margin:0 0 8px;font-size:28px}
.featured-card .bottom p{margin:0 0 10px;color:#e8e8e8}
.featured-card .bottom .btn{background:#fff;color:#000}
.featured-card .hero-text{max-width:680px}
.featured-card .hero-center{display:flex;align-items:center}
.featured-card .hero-center .headline{font-family:Raleway, Inter, sans-serif;font-weight:200;font-size:clamp(2vw, 2.5vw, 3vw);line-height:1.3;margin:0;color:#e8e8e8}
.featured-card .hero-center .headline .thin{font-weight:100}
.featured-card .hero-center .headline span{color:#fff}
.featured-card .hero-foot{overflow:hidden}
.featured-card .hero-foot .sub{font-size:clamp(16px, 2.2vw, 20px);margin:0 0 3px;color:#e8e8e8;font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;font-weight: 100;letter-spacing: 0.75px;}
.featured-card .hero-foot .locations{color:#c9c9c9;font-size:clamp(11px, 1.4vw, 13px);letter-spacing:.1em}

/* Ticker de localidades (no modifica paddings del overlay) */
.featured-card .hero-foot .locations-ticker{position:relative;overflow:hidden;margin-top:3px;display:block;max-width:100%;font-weight: 100;color:#e8e8e8}
.featured-card .hero-foot .locations-ticker .ticker-track{display:inline-block;white-space:nowrap;will-change:transform;animation:locationsMarquee 15s linear infinite}
.featured-card .hero-foot .locations-ticker .ticker-item{color:#cfcfcf;font-size:clamp(11px, 1.4vw, 13px);letter-spacing:.1em;font-size: 0.8rem;}
.featured-card .hero-foot .locations-ticker .sep{color:#6f6f6f;margin:0 10px}
@keyframes locationsMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.featured-card .hero-foot .locations-ticker .ticker-track{animation:none}}

/* (revertido) */



.mosaic-grid .stack{display:grid;grid-template-columns:repeat(2,300px);gap:10px;justify-content:inherit}

.section-grid .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:1024px){.section-grid .grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.section-grid .grid{grid-template-columns:1fr}}

.grid-cols-4{display:grid;grid-template-columns:repeat(4,300px);gap:10px;justify-content:center;width:calc(4*300px + 3*24px);margin:0 auto;padding-bottom: 20px;}
@media (max-width:1100px){.mosaic-grid{grid-template-columns:624px;justify-content:center}.mosaic-grid .stack{grid-template-columns:repeat(2,300px)}.grid-cols-4{grid-template-columns:repeat(2,300px);width:calc(2*300px + 1*24px)}}
@media (max-width:640px){.grid-cols-4{grid-template-columns:1fr}}

.card{position:relative;overflow:hidden;background:#000;width:300px;aspect-ratio:1/1;height:auto}
.card-media{position:relative;height:100%}
.card-media.dark-overlay::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.8) 100%);z-index:1;pointer-events:none}
.card-img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.0);transition:transform .8s cubic-bezier(.22,.61,.36,1);image-rendering:optimizeQuality}
.card-media .fade-overlay{position:absolute;inset:0;opacity:0;transition:opacity .8s cubic-bezier(0.4, 0, 0.2, 1);width:100%;height:100%;object-fit:cover;display:block;background:#000;will-change:opacity}
.card-media .fade-overlay.show{opacity:1}
.card[href^="/trabajos/"] .card-media::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:1;transition:opacity .3s ease;background:rgba(0,0,0,.40)}
.card[href^="/trabajos/"]:hover .card-media::before{opacity:0}
/* Activar efecto también por foco y en móviles mediante clase .is-hover */
.card[href^="/trabajos/"]:focus-visible .card-media::before{opacity:0}
.card[href^="/trabajos/"].is-hover .card-media::before{opacity:0}
.card-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:14px;pointer-events:none;z-index:2}
.overlay-top{align-self:flex-start;background:rgba(255,255,255,.4);padding:5px 5px 4px 5px;color:#0f0f0f;}
.overlay-top.logo{background:transparent;padding-top:3px;border-radius:0}
.overlay-top.logo img{display:block;height:28px;width:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}
.overlay-bottom{color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.overlay-bottom .card-title{font-family: "Montserrat", sans-serif;font-weight:300;margin:0 0 4px;font-size:13px;letter-spacing:0.05rem;line-height: 1.3;text-align: center;}
.overlay-bottom .link-cta{color:#fff;text-decoration:none;font-weight:700}
.card-overlay .overlay-bottom{pointer-events:auto;-webkit-user-select:text;user-select:text}
.card:hover .card-img{transform:scale(1.05)}
/* Equivalentes accesibles y para móviles */
.card:focus-visible .card-img{transform:scale(1.05)}
.card.is-hover .card-img{transform:scale(1.05)}
.virtual360-badge{position:absolute;top:14px;right:14px;background:rgba(0,0,0,0.8);color:#fff;padding:6px 10px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:0.5px;z-index:10;backdrop-filter:blur(10px)}

/* Filtro de trabajos */
.filter-card{display:flex;flex-direction:column}
.filter-card .filter-wrap{position:absolute;left:16px;top:16px;right:16px;bottom:auto;z-index:3;pointer-events:auto;display:flex;flex-direction:column;gap:10px}
.filter-card .filter-top{display:flex}
.filter-card .filter-list{margin:0;padding:0;list-style:none;color:#fff;display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:1px}
.filter-card .filter-list.two-cols{grid-template-columns:repeat(2, minmax(0, 1fr))}
.filter-card .filter-list li{margin-left:0}
.filter-card .filter-list a{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;filter:drop-shadow(0 2px 10px rgba(0,0,0,.5));padding:6px 6px;font-size:12px;font-weight:300;letter-spacing:.08em;}
.filter-card .filter-all{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;filter:drop-shadow(0 2px 10px rgba(0,0,0,.5));padding:6px 10px;font-size:16px;font-weight:300;letter-spacing:.08em;text-transform:uppercase;width:83%;justify-content:center}
.filter-card .filter-all::before{content:"";width:8px;height:8px;border:2px solid #fff;background:transparent;display:inline-block}
.filter-card .filter-all:hover{border-color:#fff}
.filter-card .filter-all.active{border-color:#fff;text-decoration:none}
.filter-card .filter-all.active::before{background:#fff}
.filter-card .filter-list a:hover{border-color:#fff}
.filter-card .filter-list a.active{border-color:#fff;text-decoration:none}
.filter-card .filter-list a::before{content:"";width:8px;height:8px;border:2px solid #fff;background:transparent;display:inline-block}
.filter-card .filter-list a.active::before{background:#fff}

/* Centrado de filter-wrap dentro de card-overlay en Trabajos */
.filter-card .card-overlay{justify-content:center;align-items:center}
.filter-card .filter-wrap{position:static;left:auto;top:auto;right:auto;bottom:auto;align-items:center;text-align:center;width:100%}
.filter-card .filter-top{display:flex;justify-content:center;width:100%}
.filter-card .filter-list{justify-items:left}

/* Animaciones de entrada y filtrado (página Trabajos) */
/* Aplicamos escala/opacidad al interior para no interferir con FLIP (translate) del contenedor */
#projects-grid .card .card-media{transition:opacity 1.2s cubic-bezier(.22,.61,.36,1), transform 1.2s cubic-bezier(.22,.61,.36,1);will-change:opacity, transform;transform-origin:center center}
#projects-grid .card.is-hidden .card-media{opacity:0;transform:translateY(8px) scale(0);pointer-events:none}
#projects-grid .card.is-visible .card-media{opacity:1;transform:translateY(0) scale(1)}
@media (prefers-reduced-motion: reduce){#projects-grid .card .card-media{transition:none}}

/* Overlays de duración para direcciones específicas */
#projects-grid .card.anim-out .card-media{transition-duration:.9s}
#projects-grid .card.anim-in .card-media{transition-duration:1.2s}

/* Grid flexible para redimensionar tarjetas según espacio disponible */
/* Layout fijo a 4 columnas máximo (definido arriba en .grid-cols-4) */

/* Sección de servicios */
#servicios{padding:0 0 0 0}
#servicios .container{max-width:1230px;margin:0 auto;}

/* Responsive servicios */
@media (max-width:1024px){
  #servicios .container{
    padding:0 24px}
  }



  @media (max-width: 1024px) {
    #servicios .hero-section {
        margin: 0px 18px 25px 18px;
    }}

/* Hero section */
#servicios .hero-section{
  margin-bottom:48px;
  
}
#servicios .hero-content{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:stretch;
}
#servicios .hero-text{
  text-align:left;
}
#servicios .hero-text,
#contacto .hero-text,
#nosotros .hero-text{
 /* border: 2px solid var(--line);*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 30px 30px 30px;
  justify-content: center;
}
#servicios .hero-text .hero-group,
#contacto .hero-text .hero-group{
  display: flex;
  flex-direction: column;
  row-gap: 6px;
}
#servicios .hero-video{
  display:flex;
  justify-content:center;
  align-items:center;
}
#servicios .hero-video video{
  width:100%;
  max-width:100%;
  aspect-ratio:1/1;
  box-shadow:0 8px 25px rgba(0,0,0,0.3);
  object-fit:cover;
}
/* Overlay de carga para video del hero (Servicios) */
#servicios .hero-video{position:relative}
#servicios .video-loading-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.6));z-index:2}
#servicios .video-loading-overlay[hidden]{display:none}
#servicios .video-loading-bar{width:min(360px, 70%);height:6px;background:rgba(255,255,255,.18);border-radius:999px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.08)}
#servicios .video-loading-bar > span{display:block;width:0%;height:100%;background:linear-gradient(90deg, #ffffff, #cfcfcf);border-radius:999px;transition:width .25s ease}
#servicios .video-loading-text{margin-top:10px;color:#ffffff;font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.9}
/* Límite de altura para plantilla banner-full */
#servicios.tpl-banner-full .hero-video video{
  max-height:552px;
}
#servicios .hero-section h1{


  margin:0 0 0;
  color:#fff;
  text-align: inherit;
}
#servicios .hero-section .subtitle{
  letter-spacing: 0.05em;
  color:#e8e8e8;
  text-transform: uppercase;
}
#servicios .hero-section .lead{
  
  color:#e8e8e8;
 
  line-height:1.6;
  text-align: inherit;
}
#servicios .hero-section p:not(.lead){
  
  margin:0;
  text-align: inherit;
}

/* Homogeneizar tipografía del hero en Nosotros (igual que Servicios/Contacto) */
#nosotros .hero-section h1{
  margin:0 0 0;
  color:#fff;
  text-align: center;
}
#nosotros .hero-section .subtitle{
  letter-spacing: 0.05em;
  color:#e8e8e8;
  text-transform: uppercase;
}
#nosotros .hero-section .lead{
  color:#e8e8e8;
  line-height:1.6;
  text-align: center;
}
#nosotros .hero-section p:not(.lead){
  margin:0;
  text-align: center;
}

/* Responsive para hero-section */
@media (max-width:1024px){
  #servicios .hero-content{
    grid-template-columns:1fr;
    gap:32px;
    text-align:center;
  }
  #servicios .hero-text{
    text-align:center;
  }
}

/* Line-height del subtítulo en móviles (sobrescribe inline del editor) */
@media (max-width:768px){
  #servicios .hero-section .subtitle,
  #nosotros .hero-section .subtitle,
  #contacto .hero-section .subtitle{
    line-height: 1.6rem !important;
  }
}

/* Nosotros: hero en columnas como contacto */
#nosotros{padding-bottom: 20px;}
#nosotros .container{max-width:1230px;margin:0 auto}
#nosotros .hero-section{margin-bottom:50px}
#nosotros .hero-content{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:stretch}
#nosotros .hero-text{text-align:left}
#nosotros .hero-text .hero-group{display:flex;flex-direction:column;row-gap:6px}
#nosotros .hero-video{display:flex;justify-content:center;align-items:center}
#nosotros .hero-video video{width:100%;max-width:100%;aspect-ratio:1/1;box-shadow:0 8px 25px rgba(0,0,0,0.3);object-fit:cover}
/* Asegurar hero imagen cuadrada en Nosotros */
#nosotros .hero-video{position:relative}
#nosotros .hero-video img#hero-image{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:1024px){
  #nosotros .hero-section {margin: 0px 18px 55px 18px;}
  #nosotros .hero-content{grid-template-columns:1fr;gap:32px;text-align:center}
  #nosotros .hero-text{text-align:center}
}



/* Grid de servicios */
#servicios .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:32px}
@media (max-width:1024px){#servicios .grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){#servicios .grid{grid-template-columns:1fr}}

/* Tarjetas de servicio */
/* Lista vertical de servicios */
#servicios .services-list{display:block;margin-top:50px}
#servicios .services-list .service-hero{margin:48px 0}
@media (max-width:640px){
  #servicios .services-list{padding-left:18px;padding-right:18px}
}
/* Bloques de servicio estilo hero */
.service-hero{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:stretch;margin:28px 0;border:1px solid var(--line);padding:24px;background:rgba(255,255,255,.02);grid-template-areas:'media content'}
.service-hero.reverse{grid-template-areas:'content media'}
.service-hero .media{display:flex;align-items:center;justify-content:center;border:1px solid var(--line);overflow:hidden;grid-area:media}
.service-hero .media img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1;display:block}
.service-hero .content{display:flex;flex-direction:column;justify-content:center;padding: 42px 42px 42px 42px;gap: 15px;grid-area:content}
.service-hero .content h3{margin:0 0 10px}
.service-hero .content ul{margin:0;padding-left:20px}
@media (max-width:1024px){
  .service-hero{grid-template-columns:1fr;gap:24px;grid-template-areas:'media' 'content'}
  .service-hero.reverse{grid-template-columns:1fr;grid-template-areas:'media' 'content'}
  .service-hero .content{text-align:center; padding: 0.1em 0.1em 0.1em 0.1em;}
}
/* Masonry gallery for Nosotros */
.masonry-gallery{column-count:2;column-gap:16px; padding: 15px 25px 15px 25px;margin-top: 50px}




.lightbox-overlay{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;z-index:10000}
.lightbox-overlay.show{display:flex}
.lightbox-img{max-width:92vw;max-height:92vh;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.lightbox-close{position:absolute;top:16px;right:16px;background:rgba(255,255,255,.15);color:#fff;border:none;border-radius:24px;padding:10px 14px;cursor:pointer}
.lightbox-prev,.lightbox-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.15);color:#fff;border:none;width:44px;height:44px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:24px}
.lightbox-prev{left:16px}
.lightbox-next{right:16px}
.lightbox-caption{position:absolute;left:16px;right:16px;bottom:16px;background:rgba(0,0,0,.35);color:#fff;padding:10px 14px;border-radius:8px;font-size:14px;line-height:1.4;text-align:center}

.masonry-gallery .masonry-item{break-inside:avoid;margin-bottom:16px;display:block}
.masonry-gallery .masonry-item img{width:100%;height:auto;display:block;border-radius:0}
@media (min-width:640px){.masonry-gallery{column-count:2;padding: 15px 25px 15px 25px;}}
@media (min-width:1024px){.masonry-gallery{column-count:2;padding: 0 0 0 0;}}
@media (min-width:1440px){.masonry-gallery{column-count:2;padding: 0 0 0 0;}}
.service-card{
  position:relative;
  background:#000;
  border:1px solid var(--line);
  padding:28px 15px 16px 13px;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 25px;
}
.service-card .service-card-banner{
  margin:-28px -28px 16px -28px;
  border-bottom:1px solid var(--line);
}
.service-card .service-card-banner img{
  display:block;
  width:100%;
  height:160px;
  object-fit:cover;
}
.service-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 25px rgba(0,0,0,0.3);
}
.service-card h3{
  margin:0 0 20px;
  color:#fff;
  text-align:center;
}
.service-card ul{
  margin:0;
  padding:0;
  list-style:none;
}
.service-card li{
  color:var(--muted);
  line-height:1.6;
  margin-bottom:8px;
  padding-left:16px;
  position:relative;
}
.service-card li:before{
  content:"•";
  color:#fff;
  position:absolute;
  left:0;
  top:0;
}
.service-card li:last-child{
  margin-bottom:0;
}

.budget{background:#0f0f0f;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
.budget .btn{margin-top:8px}

/* Estilos para la página de contacto */
#contacto{padding:0 0 0 0}
#contacto .container{max-width:1230px;margin:0 auto;padding:28px 0;}

/* Hero section de contacto */
#contacto .hero-section{
  margin-bottom:48px;
}
#contacto .hero-content{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:stretch;
}
#contacto .hero-text{
  text-align:left;
}
#contacto .hero-video{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
}
#contacto .hero-video video{
  width:100%;
  max-width:100%;
  aspect-ratio:1/1;
  box-shadow:0 8px 25px rgba(0,0,0,0.3);
  object-fit:cover;
}
#contacto .hero-section h1{
  margin:0 0 0;
  color:#fff;
  text-align: center;
}

#contacto .hero-section .subtitle{
  letter-spacing: 0.05em;
  color:#e8e8e8;
  text-transform: uppercase;
}

#contacto .hero-section .lead{
  color:#e8e8e8;
  line-height:1.6;
  text-align: center;
}

#contacto .hero-section p:not(.lead){
  margin:0;
}

/* Título del formulario (equivalente a architecture-title) */
#formulario-title,
#mapa-title{
  margin:50px 0 50px;
  text-align:center;
  color:#fff;
  font-family:Raleway, Inter, sans-serif;
  font-weight:800;
}

/* Responsive para hero-section de contacto */
@media (max-width:1024px){
  #contacto .hero-content{
    grid-template-columns:1fr;
    gap:32px;
    text-align:center;
  }
  #contacto .hero-text{
    text-align:center;
  }
}

/* Homogeneizar ancho de contenedores del hero (Servicios, Nosotros, Contacto) */
#servicios .container,
#nosotros .container,
#contacto .container{
  max-width:1230px;
  margin:0 auto;
  padding:0;
}


/* Layout del contenido de contacto */
.contact-content{
  display:grid;
  grid-template-columns:1fr;
  gap:48px;
  align-items:stretch;
  margin-bottom:32px;
}

/* Sección del formulario */
.contact-form-section{
  background:#0f0f0f;
  border:1px solid var(--line);
  padding:32px 32px 0px 32px;
  display:flex;
  flex-direction:column;
 
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.contact-form .field{
  display:flex;
  flex-direction:column;
}
.contact-form label{
  font-size:14px;
  color:var(--muted);
  margin-bottom:8px;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.contact-form input,
.contact-form textarea{
  background:var(--bg);
  border:1px solid var(--line);
  padding:12px 16px;
  font:inherit;
  color:var(--fg);
  transition:border-color 0.3s ease, box-shadow 0.3s ease;
}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,0.1);
}
.contact-form textarea{
  resize:vertical;
  min-height:120px;
}
.contact-form .btn{
  align-self:center;
  margin-top:25px;
  padding:15px 55px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:16px;
  background:var(--muted);
  color:#000;
  border:0;
  cursor:pointer;
  transition:all 0.3s ease;
  min-width:120px;
}
.contact-form .btn:hover{
  background:#e8e8e8;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(255,255,255,0.2);
}
.contact-form .btn:active{
  transform:translateY(0);
  box-shadow:0 2px 6px rgba(255,255,255,0.1);
}
.swal2-actions .swal-btn{
  align-self:center;
  margin-top:25px;
  padding:15px 55px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:16px;
  background:var(--muted);
  color:#000;
  border:0;
  cursor:pointer;
  transition:all 0.3s ease;
  min-width:120px;
}
.swal2-actions .swal-btn:hover{
  background:#e8e8e8;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(255,255,255,0.2);
}
.swal2-actions .swal-btn:active{
  transform:translateY(0);
  box-shadow:0 2px 6px rgba(255,255,255,0.1);
}
.contact-form .result{
  margin-top:12px;
  color:var(--muted);
  font-size:14px;
}

/* Overlay de información sobre el video/imagen del hero */
#contacto .contact-info-overlay{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  background:rgba(0, 0, 0, 0.7);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding:46px 46px 46px 46px;
  backdrop-filter:blur(2px);
}

#contacto .contact-info-overlay h3{
  margin:0 0 24px;
  color:#fff;
  font-size:22px;
  font-family:Raleway, Inter, sans-serif;
  text-align:left;
  text-transform:uppercase;
  letter-spacing:0.1em;
  border-bottom:none;
  padding-bottom:8px;
  width:100%;
  max-width:500px;
}

.contact-details{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:26px;
}

.contact-item{
  margin-bottom:0;
  padding-bottom:0;
}
.contact-item:last-child{
  border-bottom:none;
  margin-bottom:0;
  padding-bottom:0;
}

.contact-item strong{
  display:block;
  color:#fff;
  font-size:14px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:8px;
}

.contact-item p{
  margin:0;
  line-height:1.6;
}

/* Estilos tipográficos específicos para los párrafos del overlay de contacto */
#contacto .contact-info-overlay .contact-item p{
  font-family: Montserrat, Inter, sans-serif;
  font-size: clamp(1.3rem, 3vw, 1.5rem);
  font-weight: 100;
  text-align: left;
  letter-spacing: 0.48px;
  line-height: 1.3;
  text-transform: none;
  font-style: normal;
}

/* Ajuste tipográfico de los labels en overlay */
#contacto .contact-info-overlay .contact-item strong{
  font-family: Montserrat, Inter, sans-serif;
  text-align: left;
  font-weight: 400;
  margin-bottom: 0;
}

.contact-item a{
  color:#fff;
  text-decoration:none;
  transition:color 0.3s ease;
}
.contact-item a:hover{
  color:#e8e8e8;
}

/* Desactivar enlaces dentro del overlay del hero de contacto */
#contacto .contact-info-overlay a{
  pointer-events:none;
  cursor:default;
  text-decoration:none;
  color:inherit;
  font-weight:inherit;
  transition:none;
}

#contacto .contact-info-overlay a:hover{
  color:inherit;
  text-decoration:none;
}

/* Enlaces de redes sociales */
.social-links h4{
  margin:0 0 20px;
  color:#e8e8e8;
  font-size:16px;
  font-weight:400;
  line-height:1.6;
  text-align:center;
}

.social-buttons{
  display:flex;
  flex-direction:row;
  gap:16px;
  justify-content:center;
}

.social-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100px;
  height:80px;
  padding:12px;
 
  border-radius:13px;
  text-decoration:none;
  color:#fff;
  transition:all 0.3s ease;
  position:relative;
}

.social-btn.instagram{
  background:linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  color:#fff;
}

.social-btn.facebook{
  background:#1877f2;
  color:#fff;
}

.social-icon{
  width:32px;
  height:32px;
  margin-bottom:8px;
  transition:all 0.3s ease;
}

.social-label{
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  text-align:center;
  line-height:1.2;
}

.social-btn:hover{
  transform:translateY(-2px);
}

.social-btn.instagram:hover{
  box-shadow:0 4px 12px rgba(225,48,108,0.3);
}

.social-btn.facebook:hover{
  box-shadow:0 4px 12px rgba(24,119,242,0.3);
}

.social-btn:hover .social-icon{
  transform:scale(1.1);
}

/* Responsive design */
@media (max-width:1024px){
  #contacto .contact-info-overlay{
    padding:24px;
  }
}

@media (max-width:640px){
  #contacto .container{
    padding:0 18px;
  }
  
  #contacto .hero-section{
    margin-bottom:32px;
  }
  
  /* Reducir espacio entre información de contacto y mapa */
  .contact-content{
    margin-bottom:0;
  }
  
  /* Centrado perfecto del título respecto a la imagen en móviles */
  #contact-hero-banner #contact-title-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10;
  }
  #contact-hero-banner img{
    object-position:center center !important;
    object-fit:cover !important;
  }
  
  /* Recuadro para el texto inicial solo en móviles */
  #contacto .hero-text{
    display:flex;
    flex-direction:column;
    justify-content:center;
    
    padding:24px;
    background:#000;
  }
  
  .contact-form-section{
    padding:24px;
  }
  
  #contacto .contact-info-overlay{
    padding:16px;
    background:rgba(0, 0, 0, 0.8);
    justify-content:flex-start;
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
  }
  
  #contacto .contact-info-overlay h3,
  #contacto .contact-info-overlay .contact-details{
    max-width:100%;
  }

  #contacto .contact-info-overlay h3{
    font-size:18px;
    letter-spacing:0.08em;
    padding-bottom:6px;
    margin-bottom:16px;
    padding-top: 24px;
  }

  #contacto .contact-info-overlay .contact-details{
    gap:10px;
  }

  #contacto .contact-info-overlay .contact-item p{
    font-size: clamp(1rem, 4.5vw, 1.125rem);
    line-height: 1.4;
    overflow-wrap:anywhere;
  }
  
  .contact-form{
    gap:16px;
  }
  
  .social-buttons{
    gap:12px;
  }
  
  .social-btn{
    width:70px;
    height:70px;
    padding:10px;
  }
  
  .social-icon{
    width:28px;
    height:28px;
    margin-bottom:6px;
  }
  
  .social-label{
    font-size:10px;
  }
}


/* Cuando el iframe va directo dentro de map-section */
.map-section > iframe{
  width:100%;
  display:block;
}

.map-container{
  max-width:1000px;
  margin:0 auto;
}

.map-container h3{
  margin:0 0 24px;
  color:#fff;
  font-size:24px;
  font-weight:600;
  font-family:Raleway, Inter, sans-serif;
  text-align:center;
}

.map-wrapper{
  position:relative;
  border-radius:0;
  overflow:hidden;
  border:1px solid var(--line);
  margin-bottom:20px;
  box-shadow:0 8px 25px rgba(0,0,0,0.3);
}

.map-wrapper iframe{
  display:block;
  border-radius:0;
}

.map-info{
  text-align:center;
  padding:20px;
  background:#000;
  border:1px solid var(--line);
  border-radius:0;
}

.map-info p{
  margin:0 0 16px;
  color:var(--muted);
  line-height:1.6;
}

.map-info strong{
  color:#fff;
  font-weight:600;
}

.map-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 20px;
  background:var(--accent);
  color:#000;
  text-decoration:none;
  border-radius:6px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:13px;
  transition:all 0.3s ease;
}

.map-link:hover{
  background:#e8e8e8;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(255,255,255,0.2);
}

/* Responsive para el mapa */
@media (max-width:640px){
  .map-section{
    padding:8px 0 0 0;
  }
  .map-section > iframe{
    height:300px;
  }
  
  .map-container h3{
    font-size:20px;
    margin-bottom:20px;
  }
  
  .map-wrapper{
    margin-bottom:16px;
  }
  
  .map-wrapper iframe{
    height:300px;
  }
  
  .map-info{
    padding:20px 16px;
  }
  
  .map-link{
    padding:8px 16px;
    font-size:12px;
  }
}

.site-footer{border-top:1px solid var(--line);padding:15px 0;color:var(--muted);margin-top:auto;background:rgba(0,0,0,.7);backdrop-filter:saturate(180%) blur(10px);position:sticky;bottom:-1px;z-index:50}
.footer-inner{display:flex;flex-direction: column-reverse;align-items: center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:0 20px;max-width:1272px;margin:0 auto}
@media (min-width:1140px){.footer-inner{padding:0;flex-direction:inherit}}
.site-footer a{color:var(--muted);text-decoration:none}
.site-footer a:hover{color:#e0e0e0;text-decoration:none}
.site-footer, .site-footer *{font-weight:400}
.site-footer{font-size:12px;padding-right: 5px;}

/* Botón volver arriba */
.scroll-to-top{position:fixed;right:16px;bottom:72px;z-index:1200;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid var(--line);color:#fff;cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,0.06);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s ease, transform .25s ease, background .2s ease, box-shadow .2s ease}
.scroll-to-top::before{content:"";position:absolute;inset:-6px;filter:blur(18px);background:radial-gradient(closest-side, rgba(255,255,255,.18), transparent 70%);opacity:.0;transition:opacity .25s ease}
.scroll-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.scroll-to-top:hover{background:rgba(255,255,255,.12);box-shadow:0 18px 42px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,0.12)}
.scroll-to-top:hover::before{opacity:.8}
.scroll-to-top:active{transform:translateY(0) scale(0.98)}
.scroll-to-top svg{width:22px;height:22px;display:block}
.scroll-to-top .ring{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;pointer-events:none}
.scroll-to-top .ring .track{stroke:rgba(255,255,255,.15)}
.scroll-to-top .ring .progress{stroke:#fff;filter:drop-shadow(0 0 8px rgba(255,255,255,.45))}
@media (max-width:640px){.scroll-to-top{right:14px;bottom:99px;width:48px;height:48px}}

/* Lightbox legal */
.legal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.75);backdrop-filter:blur(2px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px}
.legal-modal{background:#0f0f0f;border:1px solid var(--line);color:#e8e8e8;width:min(980px, 96vw);max-height:90vh;border-radius:12px;box-shadow:0 30px 120px rgba(0,0,0,.6);display:flex;flex-direction:column;overflow:hidden}
.legal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
.legal-title{margin:0;font-size:16px;color:#fff}
.legal-close{background:transparent;border:1px solid rgba(255,255,255,0.2);color:#fff;border-radius:8px;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.legal-close:hover{background:rgba(255,255,255,0.08)}
.legal-content{padding:18px 16px;overflow:auto}
.legal-content h1,.legal-content h2,.legal-content h3{color:#fff}
.legal-content p, .legal-content li, .legal-content div{color:#e8e8e8}
.legal-loading{color:#cfcfcf}

/* Cookie banner */
.cookie-banner{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);max-width:720px;width:calc(100% - 40px);background:#0f0f0f;border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 80px rgba(0,0,0,.6);z-index:1000}
.cookie-content{display:flex;flex-direction:column;gap:18px;align-items:stretch;padding:24px}
.cookie-actions{display:flex;gap:8px}
.cookie-actions .link{display:inline-flex;align-items:center;gap:6px;color:#cfcfcf;text-decoration:underline;padding:10px 8px;border-radius:8px}
.cookie-actions .link:hover{color:#ffffff;background:#121212}
.cookie-actions .btn{margin-left:auto}
.cookie-modal{background:#1a1a1a;color:#f1f1f1;border:1px solid #262626;border-radius:12px;padding:16px}
.cookie-modal h3{color:#ffffff;margin-top:0}
.cookie-modal .switch{color:#f1f1f1}
.cookie-modal .btn-ghost{border-color:#3a3a3a;color:#f1f1f1}
.switch{display:block;margin:10px 0}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}

/* Botón flotante minimizado para reabrir preferencias de cookies */
.cookie-mini{position:fixed;right:16px;bottom:8px;background:#0f0f0f;border:1px solid var(--line);color:#fff;padding:10px 14px;border-radius:999px;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.3);z-index:1000}
.cookie-mini:hover{background:#121212}

/* Overlay oscuro para fondo al mostrar banner */
.cookie-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px);z-index:999}

/* Mejorar contraste y legibilidad dentro del banner */
.cookie-banner{color:#fff}
.cookie-banner .cookie-content > div{color:#e8e8e8;line-height:1.6}
.cookie-banner a{color:#fff;text-decoration:underline}
.cookie-banner .muted{color:#dddddd}
.cookie-banner .btn{background:#ffffff;color:#000;border:0}
.cookie-banner #cookie-accept.btn{background:#ffd600;color:#111}
.cookie-banner #cookie-accept.btn:hover{filter:brightness(0.95)}
.cookie-banner .btn-ghost{border-color:#444;color:#fff}

.btn{border:0;padding:10px 16px;cursor:pointer}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--fg)}
.btn:disabled{opacity:.6;cursor:not-allowed}

.muted{color:var(--muted)}

/* Iconos de redes sociales */
.social-icons {
  display: flex;
  align-items: flex-end;
}

.social-link {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 28px;
  color: #8E8E8E;
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 14px;
}

.social-link:hover {
  color: var(--fg);
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.social-link i {
  font-size: 14px;
  padding-right: 8px;
}

/* Responsive para iconos sociales */
@media (max-width: 900px) {
  .social-icons {
    margin-left: 0;
    margin-top: 16px;
    justify-content: center;
    gap: 12px;
  }
  
  .social-link {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  
  .social-link i {
    font-size: 16px;
  }
}

/* Ocultar bot 0n flotante de cookies (se usa enlace en el footer) */
.cookie-mini{display:none !important}

/* (retirado) Altura fija de tarjetas: ahora usamos 1:1 en todos los tamaños */

/* Ajustes de móvil para la página de inicio (#inicio) */
@media (max-width:640px){
  .mosaic .container{padding:0 16px}
  #trabajos .container{padding-left:16px;padding-right:16px;padding-bottom: 16px;}
  .mosaic-grid{grid-template-columns:1fr}
  .mosaic-grid .stack{grid-template-columns:1fr}
  .grid-cols-4{grid-template-columns:1fr;width:100%;justify-content:stretch;padding-left: 10px;
    padding-right: 10px;}
  .card{width:100%}
  .featured-card .overlay{padding:21px}
}
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}