/* HR Constructores — rediseño «Plano de obra»
   Hoja propia. No sobrescribe styles.css: la portada v2 no lo carga.
   Tokens y piezas reutilizables. Ver design-system/hr-constructores/MASTER.md */

/* ---------- Tipografía autohospedada. Sin Google Fonts en tiempo de carga --- */
@font-face{font-family:'Archivo';src:url('../assets/fonts/archivo-latin.woff2') format('woff2');
font-weight:500 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Public Sans';src:url('../assets/fonts/publicsans-latin.woff2') format('woff2');
font-weight:400 500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}

/* ---------- Tokens ---------------------------------------------------------- */
:root{
  /* Superficies. El logo es 80% negro; el sistema respeta esa proporcion. */
  --negro:#0A0A0A; --carbon:#141414; --carbon-alto:#1E1E1E; --linea:#2A2A2A;
  /* Dorado muestreado del logo real */
  --oro:#D0B070; --oro-profundo:#C0A060; --oro-claro:#E0C080;
  /* Texto */
  --texto:#F5F3EF; --texto-medio:#B8B4AC; --texto-tenue:#85817A;
  /* Estado editorial de obra */
  --en-proceso:#D0B070; --terminado:#B8B4AC;
  /* Retícula y ritmo */
  --ancho:1200px; --canal:24px;
  --salida:cubic-bezier(.23,1,.32,1);
  --r-chico:4px; --r-medio:8px;
  color-scheme:dark;
}

/* ---------- Base ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body.v2{margin:0;background:var(--negro);color:var(--texto);
font-family:'Public Sans',system-ui,sans-serif;font-size:17px;line-height:1.6;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
@media (max-width:719px){body.v2{font-size:16px;line-height:1.65}}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:'Archivo',system-ui,sans-serif;font-weight:700;
letter-spacing:-.02em;line-height:1.08;margin:0;text-wrap:balance}
p{margin:0}

/* Foco visible en todo lo interactivo. Nunca outline:none sin reemplazo. */
.v2 a:focus-visible,.v2 button:focus-visible{outline:2px solid var(--oro);outline-offset:3px;border-radius:var(--r-chico)}
.saltar{position:absolute;left:-9999px}
.saltar:focus{left:12px;top:12px;z-index:100;background:var(--oro);color:var(--negro);
padding:10px 16px;border-radius:var(--r-chico);font-weight:700}
.solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Retícula técnica: el andamio es el adorno ----------------------- */
.marco{max-width:var(--ancho);margin:0 auto;padding:0 var(--canal)}
.seccion{border-top:1px solid var(--linea);padding:72px 0}
@media (max-width:719px){.seccion{padding:48px 0}}
/* Sin rotulo sobre el encabezado. El brief manda eliminar la formula
   eyebrow + H2, no renombrarla; el detector la marca como kicker-above-heading.
   La separacion la dan el filete de 1px y el aire de seccion. */
.seccion h2{font-size:32px;margin-bottom:8px}
/* Acento de plano: filete dorado corto sobre el encabezado de seccion. */
.seccion h2::before{content:'';display:block;width:40px;height:2px;
background:var(--oro);margin-bottom:18px}
@media (max-width:719px){.seccion h2{font-size:26px}}
.seccion-nota{color:var(--texto-medio);max-width:62ch;margin-top:10px}

/* ---------- Botones --------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
min-height:48px;padding:12px 22px;border-radius:var(--r-chico);border:1px solid transparent;
font-family:'Archivo',sans-serif;font-weight:600;font-size:15px;text-decoration:none;
cursor:pointer;touch-action:manipulation;
transition:background-color 140ms var(--salida),color 140ms var(--salida),
border-color 140ms var(--salida),transform 140ms var(--salida)}
.btn-oro{background:var(--oro);color:var(--negro)}          /* 9.55:1 */
.btn-linea{background:transparent;color:var(--texto);border-color:var(--linea)}
@media (hover:hover) and (pointer:fine){
  .btn-oro:hover{background:var(--oro-claro)}
  .btn-linea:hover{border-color:var(--oro);color:var(--oro-claro)}
}
.btn:active{transform:scale(.97)}

/* ---------- Cabecera -------------------------------------------------------- */
.cabecera{position:sticky;top:0;z-index:20;background:rgba(10,10,10,.94);
backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.cabecera .marco{display:flex;align-items:center;gap:20px;min-height:72px}
.marca{display:flex;align-items:center;flex:0 0 auto;min-height:44px}
.marca img{width:58px;height:auto}
.menu{display:flex;gap:22px;margin-left:auto;font-family:'Archivo',sans-serif;
font-weight:500;font-size:14px}
.menu a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;
color:var(--texto-medio);transition:color 140ms var(--salida)}
@media (hover:hover) and (pointer:fine){.menu a:hover{color:var(--oro-claro)}}
.tel-cabecera{display:inline-flex;align-items:center;min-height:44px;
font-family:'Archivo',sans-serif;font-weight:600;font-size:14px;
text-decoration:none;color:var(--texto);white-space:nowrap}

/* ---------- Navegación en teléfono ------------------------------------------
   Por debajo de 920 px el menú se ocultaba y no quedaba forma de llegar a
   Obra, Trabajos, Servicios ni Contacto desde la cabecera. Ahora el mismo
   <nav> se convierte en panel y lo gobierna un botón.
   Sin degradado, sin píldora y sin animación: un panel que aparece de golpe
   no tiene estado intermedio que reducir ni que pueda quedarse a medias. */
.menu-boton{display:none;align-items:center;justify-content:center;
/* flex:0 0 44px, no solo width: la cabecera es una fila flexible y el boton
   se encogia a 38 px, por debajo del minimo tactil. Lo detecto la QA. */
flex:0 0 44px;width:44px;height:44px;padding:0;border:1px solid var(--linea);
border-radius:var(--r-chico);background:transparent;color:var(--texto);
cursor:pointer;touch-action:manipulation;
transition:border-color 140ms var(--salida),color 140ms var(--salida),
transform 140ms var(--salida)}
/* [hidden] tiene que ganarle a la media query: el botón nace oculto y solo
   js/menu-movil.js lo destapa. */
.menu-boton[hidden]{display:none}
.menu-icono{width:22px;height:22px;display:block}
.menu-cerrar{display:none}
.menu-boton[aria-expanded="true"] .menu-abrir{display:none}
.menu-boton[aria-expanded="true"] .menu-cerrar{display:block}
@media (hover:hover) and (pointer:fine){
  .menu-boton:hover{border-color:var(--oro-profundo);color:var(--oro-claro)}
}
.menu-boton:active{transform:scale(.97)}

@media (max-width:919px){
  /* El panel se ancla a la cabecera, no al documento. */
  .cabecera .marco{position:relative;flex-wrap:nowrap}
  .marca{order:1}
  .tel-cabecera{order:2;margin-left:auto}
  .canales{order:3}
  /* El botón va al final visualmente, pero antes del panel en el DOM, para
     que tabular avance marca -> botón -> enlaces del panel. */
  .menu-boton{display:inline-flex;order:4}
  .menu{display:none;position:absolute;top:100%;left:0;right:0;z-index:30;
  flex-direction:column;gap:0;margin:0;padding:4px var(--canal) 12px;
  background:var(--negro);border-bottom:1px solid var(--linea)}
  .menu[data-abierto]{display:flex}
  .menu a{min-height:48px;color:var(--texto);border-bottom:1px solid var(--linea)}
  .menu a:last-child{border-bottom:0}
}

/* ---------- Hero 7/5 -------------------------------------------------------- */
.hero{padding:56px 0 72px}
.hero .marco{display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:center}
.hero-figura{margin:0;position:relative;border:1px solid var(--linea);
border-radius:var(--r-medio);overflow:hidden}
.hero-figura:focus-visible{outline:2px solid var(--oro);outline-offset:3px}
/* Caja y proporcion fijas: el carrusel no puede mover la maquetacion. */
.hero-pista{display:flex;margin:0;padding:0;list-style:none;overflow-x:auto;
scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.hero-pista::-webkit-scrollbar{display:none}
.hero-lamina{flex:0 0 100%;scroll-snap-align:start;min-width:0}
.hero-figura img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.hero-controles{position:absolute;left:0;right:0;bottom:44px;display:flex;
align-items:center;justify-content:center;gap:12px;pointer-events:none}
.hero-controles[hidden]{display:none}
.hero-flecha{pointer-events:auto;width:44px;height:44px;display:flex;
align-items:center;justify-content:center;border-radius:50%;cursor:pointer;
touch-action:manipulation;font-size:20px;line-height:1;
border:1px solid rgba(245,243,239,.22);background:rgba(10,10,10,.72);color:var(--texto);
transition:background-color 140ms var(--salida),color 140ms var(--salida),transform 140ms var(--salida)}
.hero-flecha:disabled{opacity:.3;cursor:default}
.hero-pausa{font-size:12px;letter-spacing:.06em}
.hero-contador{pointer-events:auto;font-family:'Archivo',sans-serif;font-size:12px;
color:var(--texto);background:rgba(10,10,10,.72);border:1px solid rgba(245,243,239,.22);
border-radius:var(--r-chico);padding:6px 12px;font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){
  .hero-flecha:not(:disabled):hover{background:var(--oro);color:var(--negro)}
}
.hero-flecha:not(:disabled):active{transform:scale(.97)}

/* ---------- Canales de contacto: WhatsApp y Messenger ---------------------- */
.canales{display:flex;gap:12px;align-items:center}
.canal{display:inline-flex;align-items:center;justify-content:center;
width:52px;height:52px;border-radius:var(--r-chico);cursor:pointer;
touch-action:manipulation;border:1px solid var(--linea);background:var(--carbon);
transition:border-color 140ms var(--salida),background-color 140ms var(--salida),transform 140ms var(--salida)}
.canal svg{width:26px;height:26px}
@media (hover:hover) and (pointer:fine){
  .canal:hover{border-color:var(--oro-profundo);background:var(--carbon-alto)}
}
.canal:active{transform:scale(.97)}
.cabecera .canal{width:44px;height:44px}
.cabecera .canal svg{width:22px;height:22px}
/* Sin mayusculas: 47 caracteres en caja alta son texto corrido, y se leen peor.
   El caracter tecnico lo dan el tamano, el interletraje y el filete superior. */
.hero-pie{font-family:'Archivo',sans-serif;font-size:12px;
color:var(--texto-tenue);padding:10px 14px;
border-top:1px solid var(--linea);background:var(--carbon)}
.hero h1{font-size:clamp(2.25rem,3.4vw,3.25rem)}      /* techo 52px */
.hero-entrada{color:var(--texto-medio);margin-top:16px;max-width:46ch}
.hero-acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
/* Sin text-transform: la orden fija la capitalizacion exacta de esta linea. */
.confianza{margin-top:22px;padding-top:18px;border-top:1px solid var(--linea);
font-family:'Archivo',sans-serif;font-size:13px;letter-spacing:.04em;
color:var(--texto-medio)}
.confianza b{color:var(--oro-claro);font-weight:600}
@media (max-width:919px){
  .hero{padding:32px 0 44px}
  .hero .marco{grid-template-columns:1fr;gap:26px}   /* foto arriba, texto debajo */
  .hero h1{font-size:34px}
  .hero-figura img{aspect-ratio:4/5}
}

/* ---------- Obra reciente --------------------------------------------------- */
.obra-rejilla{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:28px}
.obra{border:1px solid var(--linea);border-radius:var(--r-medio);overflow:hidden;
background:var(--carbon);display:flex;flex-direction:column;
transition:border-color 160ms var(--salida)}
@media (hover:hover) and (pointer:fine){.obra:hover{border-color:var(--oro-profundo)}}
.obra-medio{aspect-ratio:4/3;background:var(--carbon-alto);overflow:hidden}
.obra-medio img{width:100%;height:100%;object-fit:cover}
.obra-sin{display:flex;align-items:center;justify-content:center;height:100%;
color:var(--texto-tenue);font-size:13px}
.obra-cuerpo{padding:14px 16px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.obra-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;
font-family:'Archivo',sans-serif;
font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.obra-meta span{white-space:nowrap}
.obra-num{color:var(--oro)}
.obra-estado{color:var(--terminado)}
.obra-estado[data-estado="in_progress"]{color:var(--en-proceso)}
.obra h3{font-size:17px;line-height:1.3}
.obra-enlace{margin-top:auto;font-family:'Archivo',sans-serif;font-size:13px;
font-weight:600;color:var(--oro-claro);text-decoration:none;
display:inline-flex;align-items:center;min-height:44px}
@media (max-width:1023px){.obra-rejilla{grid-template-columns:repeat(2,1fr)}}
@media (max-width:719px){
  .obra-rejilla{grid-auto-flow:column;grid-auto-columns:78vw;grid-template-columns:none;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--canal);scrollbar-width:none}
  .obra-rejilla::-webkit-scrollbar{display:none}
  .obra{scroll-snap-align:start}
}
.cargando{color:var(--texto-tenue);font-size:15px}

/* ---------- Qué hacemos: filas de plano, no seis cajas iguales -------------- */
.servicios{margin-top:26px;border-top:1px solid var(--linea)}
.servicio{display:grid;grid-template-columns:minmax(220px,3fr) 6fr auto;gap:24px;
align-items:baseline;padding:22px 0;border-bottom:1px solid var(--linea);
text-decoration:none;transition:background-color 160ms var(--salida)}
@media (hover:hover) and (pointer:fine){
  .servicio:hover{background:var(--carbon)}
  .servicio:hover .servicio-ir{color:var(--oro-claro)}
}
.servicio h3{font-size:20px}
.servicio p{color:var(--texto-medio);font-size:15px;line-height:1.55}
.servicio-ir{font-family:'Archivo',sans-serif;font-size:13px;font-weight:600;
color:var(--texto-tenue);white-space:nowrap;transition:color 160ms var(--salida)}
@media (max-width:719px){
  .servicio{grid-template-columns:1fr;gap:6px;padding:18px 0}
  .servicio-ir{margin-top:4px}
}

/* ---------- Cómo trabajamos ------------------------------------------------- */
.proceso{display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:center;margin-top:20px}
.proceso p{color:var(--texto-medio);max-width:54ch}
@media (max-width:919px){.proceso{grid-template-columns:1fr;gap:22px}}

/* ---------- Inspiración en video -------------------------------------------- */
.videos-nota{color:var(--texto-medio);max-width:62ch;margin-top:10px}
.videos-pista{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
.video-tarjeta{margin:0;min-width:0}
.video-marco{position:relative;overflow:hidden;border-radius:var(--r-medio);
border:1px solid var(--linea);background:var(--negro);aspect-ratio:9/16}
.video-marco img{width:100%;height:100%;object-fit:cover}
.video-marco video{width:100%;height:100%;object-fit:contain;background:var(--negro)}
.video-tarjeta.activo .video-play{display:none}
.video-play{position:absolute;inset:0;margin:auto;width:60px;height:60px;
display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;
cursor:pointer;touch-action:manipulation;background:rgba(10,10,10,.66);color:var(--texto);
transition:background-color 140ms var(--salida),color 140ms var(--salida),transform 140ms var(--salida)}
.video-play svg{width:26px;height:26px;margin-left:3px}
@media (hover:hover) and (pointer:fine){.video-play:hover{background:var(--oro);color:var(--negro)}}
.video-play:active{transform:scale(.97)}
.video-tarjeta h3{font-size:15px;margin-top:10px;font-weight:600;line-height:1.35}
@media (max-width:719px){
  .videos-pista{grid-auto-flow:column;grid-auto-columns:72vw;grid-template-columns:none;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--canal);scrollbar-width:none}
  .videos-pista::-webkit-scrollbar{display:none}
  .video-tarjeta{scroll-snap-align:start}
}

/* ---------- Contacto y pie -------------------------------------------------- */
.contacto-rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:26px}
.contacto-rejilla h3{font-family:'Archivo',sans-serif;font-size:12px;letter-spacing:.14em;
text-transform:uppercase;color:var(--oro);font-weight:600;margin-bottom:10px}
.contacto-rejilla a{display:flex;align-items:center;min-height:44px;color:var(--texto);text-decoration:none}
@media (hover:hover) and (pointer:fine){.contacto-rejilla a:hover{color:var(--oro-claro)}}
.contacto-rejilla span{display:block;color:var(--texto-medio);padding:3px 0}
@media (max-width:719px){.contacto-rejilla{grid-template-columns:1fr;gap:22px}}
.pie{border-top:1px solid var(--linea);padding:28px 0;color:var(--texto-tenue);font-size:14px}
.pie .marco{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.pie img{width:44px;height:auto}
/* Enlace suelto del pie. Los que van dentro de una frase se quedan en linea:
   estirarlos a 44px partiria el renglon (excepcion de WCAG 2.5.8). */
.pie-enlace{display:inline-flex;align-items:center;min-height:44px}

/* ---------- Movimiento reducido: más suave, no cero ------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .obra-rejilla,.videos-pista{scroll-behavior:auto}
  .btn,.video-play,.servicio,.obra{transition-property:background-color,border-color,color}
}

/* ===========================================================================
   PAGINAS INTERIORES: servicio, catalogo y ficha de trabajo
   ---------------------------------------------------------------------------
   Antes solo la portada usaba esta hoja. Las otras 11 paginas seguian con
   styles.css, o sea turquesa, Arial y Georgia: quien hacia clic desde la
   portada caia en una pagina que parecia de otra empresa.

   Las clases .project-card*, .gallery-*, .filter-button, .button* y los
   estados los EMITE el JavaScript (js/site.js, js/project.js, js/catalog.js),
   y ese marcado esta cubierto por tests. Asi que no se toca el JS: se
   redefinen aqui esos mismos nombres. El JS sigue igual, la piel cambia.
   =========================================================================== */

/* ---------- Encabezado de pagina -------------------------------------------- */
/* Migas de pan, no un rotulo decorativo. La formula eyebrow + titulo esta
   prohibida por el brief; una miga es navegacion real y si tiene funcion. */
.migas{font-family:'Archivo',sans-serif;font-size:13px;color:var(--texto-tenue);
padding:0;margin:0 0 14px}
.migas a{color:var(--texto-medio);text-decoration:none;
display:inline-flex;align-items:center;min-height:44px}
.migas span{padding:0 8px;color:var(--linea)}
@media (hover:hover) and (pointer:fine){.migas a:hover{color:var(--oro-claro)}}
/* En telefono la miga de la pagina actual repite el <h1> que va justo debajo,
   y con un titulo largo se parte en dos renglones. Se oculta esa sola, junto
   con el separador que la antecede; las de vuelta, que son las que sirven
   para navegar, se quedan. */
@media (max-width:719px){
  /* La miga actual es siempre el ultimo hijo y su separador el penultimo.
     Por posicion, no por atributo: :nth-last-of-type cuenta entre spans y el
     ultimo span es el aria-current, asi que el separador no casaba y quedaba
     una barra colgando al final. */
  .migas > :last-child,
  .migas > :nth-last-child(2){display:none}
  .migas{margin-bottom:10px}
}

.intro-pagina{padding:40px 0 8px}
.intro-pagina h1{font-size:clamp(2rem,3vw,2.75rem);max-width:24ch}
.intro-pagina .entrada{color:var(--texto-medio);margin-top:16px;max-width:60ch}
@media (max-width:719px){.intro-pagina{padding:26px 0 4px}.intro-pagina h1{font-size:29px}}

/* ---------- Cuerpo de servicio: lectura 7 / cierre 5 ------------------------ */
/* Antes el texto iba a 68ch y el panel de cierre se estiraba a los 1200px del
   marco, asi que la pagina parecia dos maquetas pegadas. Ahora comparten la
   reticula 7/5 de la portada y el cierre acompaña la lectura sin perseguirla. */
.servicio-cuerpo{display:grid;grid-template-columns:7fr 5fr;gap:48px;
align-items:start;margin-top:8px}
@media (max-width:919px){.servicio-cuerpo{grid-template-columns:1fr;gap:28px}
  .cta-servicio{position:static}}

/* ---------- Cuerpo de texto de servicio ------------------------------------- */
/* El filete dorado marca la seccion, no cada subtitulo: con cuatro h2 seguidos
   repetirlo convierte el acento en ruido. */
.copia{max-width:68ch;margin-top:20px}
.copia h2{font-size:23px;margin-top:38px;margin-bottom:10px}
.copia h2:first-child{margin-top:0}
.copia h2::before{content:none}
.copia p{color:var(--texto-medio);margin-bottom:12px}
.lista-servicio{margin:0 0 20px;padding-left:20px;display:grid;gap:7px;
color:var(--texto-medio)}
.lista-servicio li{line-height:1.55}
.lista-servicio li::marker{color:var(--oro-profundo)}

/* ---------- Cierre de servicio ---------------------------------------------- */
/* Sin filete dorado al costado: IMPECCABLE lo marca como «side-tab», el
   rasgo mas reconocible de interfaz hecha por IA. La superficie y el borde
   de 1px ya separan el panel; el adorno no hacia falta. */
.cta-servicio{position:sticky;top:96px;margin-top:20px;padding:26px;
background:var(--carbon);border:1px solid var(--linea);
border-radius:var(--r-medio)}
.cta-servicio h2{font-size:21px;margin:0 0 8px}
.cta-servicio h2::before{content:none}
.cta-servicio p{color:var(--texto-medio);margin-bottom:18px;max-width:52ch}

/* ---------- Otros servicios: fichas en linea -------------------------------- */
.enlaces-servicio{list-style:none;margin:24px 0 0;padding:0;
display:flex;flex-wrap:wrap;gap:10px}
.enlaces-servicio a{display:inline-flex;align-items:center;min-height:44px;
padding:0 16px;border:1px solid var(--linea);border-radius:var(--r-chico);
font-family:'Archivo',sans-serif;font-size:14px;font-weight:500;
color:var(--texto-medio);text-decoration:none;
transition:border-color 140ms var(--salida),color 140ms var(--salida)}
@media (hover:hover) and (pointer:fine){
  .enlaces-servicio a:hover{border-color:var(--oro-profundo);color:var(--oro-claro)}
}

/* ---------- Tarjetas de trabajo (las emite js/site.js) ---------------------- */
/* Misma geometria que .obra de la portada: un solo lenguaje de tarjeta. */
.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:20px;margin-top:26px}
.project-card{min-width:0;border:1px solid var(--linea);border-radius:var(--r-medio);
overflow:hidden;background:var(--carbon);display:flex;flex-direction:column;
transition:border-color 160ms var(--salida)}
@media (hover:hover) and (pointer:fine){
  .project-card:hover{border-color:var(--oro-profundo)}
}
.project-card-media{position:relative;display:block;aspect-ratio:4/3;
background:var(--carbon-alto);overflow:hidden}
.project-card-media img{width:100%;height:100%;object-fit:cover}
.project-card-body{padding:14px 16px 18px;display:flex;flex-direction:column;
gap:8px;flex:1}
/* nowrap por dato y wrap entre datos: sin esto «COMERCIAL E INDUSTRIAL» y
   «EN PROCESO» se parten a media frase y las tarjetas quedan disparejas. */
.card-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;
font-family:'Archivo',sans-serif;font-size:11px;letter-spacing:.14em;
text-transform:uppercase;color:var(--texto-tenue)}
.card-meta span{white-space:nowrap}
.card-meta span:first-child{color:var(--oro)}
.project-card h3{font-size:17px;line-height:1.3}
.project-card h3 a{text-decoration:none}
.project-card-body p{color:var(--texto-medio);font-size:15px;line-height:1.5}
.project-card-action{margin-top:auto;font-family:'Archivo',sans-serif;
font-size:13px;font-weight:600;color:var(--oro-claro);text-decoration:none;
display:inline-flex;align-items:center;min-height:44px}
@media (max-width:1023px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:719px){.project-grid{grid-template-columns:minmax(0,1fr)}}

/* Si una foto no carga, queda el titulo en su lugar. Nunca un hueco roto. */
.image-fallback{display:flex;align-items:center;justify-content:center;
height:100%;padding:16px;text-align:center;color:var(--texto-tenue);font-size:14px}

/* Encabezado de grupo del catalogo. Separa obra propia de inspiracion. */
.grupo-catalogo{font-size:23px;margin:40px 0 4px}
.grupo-catalogo:first-child{margin-top:28px}
.grupo-catalogo::before{content:'';display:block;width:40px;height:2px;
background:var(--oro);margin-bottom:16px}

/* ---------- Filtros del catalogo (los emite js/catalog.js) ------------------ */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.filter-button{display:inline-flex;align-items:center;min-height:44px;
padding:0 16px;border:1px solid var(--linea);border-radius:var(--r-chico);
background:transparent;color:var(--texto-medio);
font-family:'Archivo',sans-serif;font-size:14px;font-weight:500;
cursor:pointer;touch-action:manipulation;
transition:border-color 140ms var(--salida),color 140ms var(--salida),
background-color 140ms var(--salida),transform 140ms var(--salida)}
.filter-button.is-active{background:var(--oro);border-color:var(--oro);
color:var(--negro);font-weight:600}
@media (hover:hover) and (pointer:fine){
  .filter-button:not(.is-active):hover{border-color:var(--oro-profundo);color:var(--oro-claro)}
}
.filter-button:active{transform:scale(.97)}

/* ---------- Estados: se dicen con palabras, no con un hueco ---------------- */
/* Borde completo de 1px, como las tarjetas. Un filete grueso a un solo lado
   es el patron «side-tab» que IMPECCABLE marca como el rasgo mas reconocible
   de interfaz hecha por IA, y aqui no distinguia nada que la superficie no
   distinguiera ya. */
.loading,.empty-state,.error-state{grid-column:1/-1;margin:0;padding:16px 18px;
background:var(--carbon);border:1px solid var(--linea);
border-radius:var(--r-chico);color:var(--texto-medio);font-size:15px}
.error-state{border-color:var(--oro-profundo)}

/* ---------- Ficha de trabajo: galeria y texto ------------------------------- */
.project-detail{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);
gap:32px;align-items:start;margin-top:26px}
.project-copy{padding:20px;background:var(--carbon);border:1px solid var(--linea);
border-radius:var(--r-medio);color:var(--texto-medio)}
.project-copy p{margin-bottom:12px}
.project-copy .button{margin:4px 4px 4px 0}
@media (max-width:919px){
  .project-detail{grid-template-columns:minmax(0,1fr);gap:24px}
  .project-detail .gallery{order:-1}   /* la foto primero en telefono */
}

.gallery-stage{position:relative;display:grid;
grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;
background:var(--carbon-alto);border:1px solid var(--linea);
border-radius:var(--r-medio);overflow:hidden}
.gallery-open{grid-column:1/-1;grid-row:1;padding:0;border:0;
background:transparent;cursor:zoom-in;touch-action:manipulation}
/* contain, no cover: una foto de obra no se recorta para cuadrar la caja. */
.gallery-open img{width:100%;aspect-ratio:4/3;object-fit:contain;
background:var(--negro)}
.gallery-arrow{position:relative;grid-row:1;z-index:2;width:44px;height:44px;
display:flex;align-items:center;justify-content:center;border-radius:50%;
border:1px solid rgba(245,243,239,.22);background:rgba(10,10,10,.72);
color:var(--texto);font-size:19px;line-height:1;cursor:pointer;
touch-action:manipulation;
transition:background-color 140ms var(--salida),color 140ms var(--salida),
transform 140ms var(--salida)}
.gallery-previous{grid-column:1;justify-self:center}
.gallery-next{grid-column:3;justify-self:center}
.gallery-arrow:disabled{opacity:.3;cursor:default}
@media (hover:hover) and (pointer:fine){
  .gallery-arrow:not(:disabled):hover{background:var(--oro);color:var(--negro)}
}
.gallery-arrow:active{transform:scale(.97)}
.gallery-counter{grid-column:1/-1;grid-row:2;margin:0;padding:10px 0 12px;
text-align:center;font-family:'Archivo',sans-serif;font-size:12px;
color:var(--texto-tenue);font-variant-numeric:tabular-nums}
.gallery-thumbnails{display:flex;gap:10px;margin-top:12px;overflow-x:auto;
overscroll-behavior-x:contain;scrollbar-width:none}
.gallery-thumbnails::-webkit-scrollbar{display:none}
.gallery-thumbnails button{flex:0 0 auto;padding:0;width:84px;height:63px;
border:1px solid var(--linea);border-radius:var(--r-chico);overflow:hidden;
background:var(--carbon-alto);cursor:pointer;touch-action:manipulation;
transition:border-color 140ms var(--salida)}
.gallery-thumbnails img{width:100%;height:100%;object-fit:cover}
.gallery-thumbnails button[aria-current="true"]{border-color:var(--oro)}
@media (hover:hover) and (pointer:fine){
  .gallery-thumbnails button:hover{border-color:var(--oro-profundo)}
}

/* ---------- Vista ampliada --------------------------------------------------- */
#image-dialog{max-width:min(96vw,1400px);max-height:94vh;padding:0;border:0;
border-radius:var(--r-medio);background:var(--negro);color:var(--texto)}
#image-dialog::backdrop{background:rgba(10,10,10,.92)}
#image-dialog img{max-height:84vh;width:auto;margin:0 auto;object-fit:contain}
#image-dialog p{padding:12px 16px;color:var(--texto-medio);font-size:14px}
.dialog-close{position:absolute;top:10px;right:10px;width:44px;height:44px;
display:flex;align-items:center;justify-content:center;border-radius:50%;
border:1px solid rgba(245,243,239,.22);background:rgba(10,10,10,.72);
color:var(--texto);font-size:24px;line-height:1;cursor:pointer;
touch-action:manipulation;
transition:background-color 140ms var(--salida),color 140ms var(--salida),
transform 140ms var(--salida)}
@media (hover:hover) and (pointer:fine){
  .dialog-close:hover{background:var(--oro);color:var(--negro)}
}
.dialog-close:active{transform:scale(.97)}

/* ---------- Botones que emite el JS con los nombres viejos ------------------ */
/* js/site.js y las fichas escriben .button / .button--gold / .button--quiet.
   Se aceptan esos nombres en vez de tocar un JS que ya esta bajo test. */
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;
min-height:48px;padding:12px 22px;border-radius:var(--r-chico);
border:1px solid transparent;font-family:'Archivo',sans-serif;font-weight:600;
font-size:15px;text-decoration:none;cursor:pointer;touch-action:manipulation;
transition:background-color 140ms var(--salida),color 140ms var(--salida),
border-color 140ms var(--salida),transform 140ms var(--salida)}
.button--gold{background:var(--oro);color:var(--negro)}
.button--quiet{background:transparent;color:var(--texto);border-color:var(--linea)}
@media (hover:hover) and (pointer:fine){
  .button--gold:hover{background:var(--oro-claro)}
  .button--quiet:hover{border-color:var(--oro);color:var(--oro-claro)}
}
.button:active{transform:scale(.97)}

@media (prefers-reduced-motion:reduce){
  .project-card,.filter-button,.gallery-arrow,.dialog-close,.button,
  .enlaces-servicio a{transition-property:background-color,border-color,color}
  .gallery-thumbnails{scroll-behavior:auto}
}