/* ==========================================================================
   Grupo Comar. Hoja de estilos unica del sitio.
   Sistema Comar v1.0. Los valores salen de las secciones 4 y 7 del CLAUDE.md.
   Ningun valor de color va suelto: todo sale de un token.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tipografia
   -------------------------------------------------------------------------- */
@font-face{font-family:'Instrument Sans';src:url('../fonts/InstrumentSans-Regular.woff2') format('woff2'),url('../fonts/InstrumentSans-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('../fonts/InstrumentSans-SemiBold.woff2') format('woff2'),url('../fonts/InstrumentSans-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('../fonts/InstrumentSans-Bold.woff2') format('woff2'),url('../fonts/InstrumentSans-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* Color. Seccion 4. El rojo es acento, nunca fondo de seccion ni parrafo. */
  --gc-red:#D93315;
  --gc-red-press:#B62A10;
  --gc-carbon:#141414;
  --gc-carbon-2:#1E1E1E;
  --gc-white:#FFFFFF;
  --gc-gray:#F4F4F3;
  --gc-line-on-light:rgb(20 20 20 / .22);
  --gc-line-on-dark:rgb(255 255 255 / .18);
  --gc-muted-on-light:rgb(20 20 20 / .64);
  --gc-muted-on-dark:rgb(255 255 255 / .64);

  /* Espaciado. Seccion 4. */
  --esp-1:8px;  --esp-2:16px; --esp-3:24px; --esp-4:32px;
  --esp-5:48px; --esp-6:72px; --esp-7:96px; --esp-8:144px;
  --margen-pagina:clamp(20px,5vw,96px);
  --ancho-max:1440px;

  /* Escala tipografica.
     El manual prohibe construir jerarquia por color, asi que el tamaño y el
     peso tienen que hacer todo el trabajo. Antes habia seis tamaños entre 11 y
     17 px, o sea seis niveles que a la vista eran uno solo. La escala usa razon
     1,25 entre pasos, que es el minimo para que un salto se lea como salto.

       12 -> 15 -> 19 -> 24    (1,25  1,27  1,26)

     Los tres primeros cubren interfaz, texto corrido y destacado. De 24 para
     arriba son titulares, y ahi la escala pasa a ser fluida. */
  --txt-1:12px;   /* etiquetas en mayuscula, legales, contador */
  --txt-2:15px;   /* interfaz: navegacion, botones, datos de ficha */
  --txt-3:19px;   /* texto corrido y campos de formulario */
  --txt-4:24px;   /* destacado: titulo de cada obra */
  --txt-5:clamp(30px,2.6vw,40px);   /* titulo de seccion secundario */
  --txt-6:clamp(38px,3.6vw,56px);   /* titulo de seccion */
  --txt-7:clamp(40px,6.4vw,92px);   /* titular del hero */
  --txt-cifra:clamp(32px,2.9vw,44px);

  /* Los tres pesos de Instrument Sans y nada mas. */
  --peso-texto:400;
  --peso-medio:600;
  --peso-fuerte:700;

  /* Movimiento. Seccion 7. Ninguna curva tiene sobreimpulso. */
  --mov-salida:cubic-bezier(.22,.61,.36,1);
  --mov-lineal:linear;
  --mov-suave:cubic-bezier(.4,0,.2,1);
  --dur-1:120ms;
  --dur-2:180ms;
  --dur-3:280ms;
  --dur-4:420ms;
  --mov-y:12px;
  --mov-y-hero:16px;

  /* Alto del header pegajoso. Lo usan los destinos de ancla. */
  --alto-header:76px;

  /* Color contextual. El rojo de marca da 4,6:1 sobre blanco y 4:1 sobre
     carbon, o sea que sobre oscuro incumple. En vez de pisarlo con una regla
     mas especifica, que deja el rojo sobre carbon vivo en la hoja, se declara
     un token y cada superficie oscura lo redefine. */
  --enlace-hover:var(--gc-red);
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
html{scroll-behavior:smooth}
body{margin:0;background:var(--gc-white);color:var(--gc-carbon);font-family:'Instrument Sans',sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--gc-carbon);text-decoration:none;transition:color var(--dur-1) var(--mov-lineal)}
input,textarea{font-family:'Instrument Sans',sans-serif}

/* Efecto 11. Foco. Un solo criterio para todo el sitio, sin transicion: el
   foco tiene que aparecer instantaneo, no llegar tarde. */
:focus-visible{outline:2px solid var(--gc-red);outline-offset:3px}
input::placeholder,textarea::placeholder{color:rgb(20 20 20 / .4)}
img{max-width:100%}

/* El header pegajoso tapa el destino de un ancla si el navegador lo deja al
   borde superior. Con esto el foco queda visible al saltar. */
:target,#contenido,#inicio,#grupo,#unidades,#obras,#clientes,#contacto{scroll-margin-top:calc(var(--alto-header) + var(--esp-2))}

/* Enlace de salto. Fuera de pantalla hasta que recibe el foco, asi no altera
   el diseño pero esta disponible para quien navega con teclado. */
.salto-contenido{position:absolute;top:0;left:-9999px;z-index:200;background:var(--gc-carbon);color:var(--gc-white);padding:var(--esp-2) var(--esp-3);font-size:var(--txt-2);font-weight:var(--peso-medio)}
.salto-contenido:focus{left:0}

/* --------------------------------------------------------------------------
   4. Contenedores
   -------------------------------------------------------------------------- */
.envoltura{max-width:var(--ancho-max);margin:0 auto;padding-inline:var(--margen-pagina)}
.esp-hero{padding-block:clamp(48px,8vw,120px)}
.esp-cifras{padding-block:clamp(48px,6vw,88px)}
.esp-grupo{padding-block:clamp(72px,10vw,160px)}
.esp-seccion{padding-block:clamp(72px,9vw,140px)}
.esp-obras-cabecera{padding-block:clamp(72px,9vw,140px) 0}
.esp-obras-lista{padding-block:clamp(56px,7vw,104px)}
.esp-footer{padding-block:clamp(64px,8vw,112px)}

.fondo-blanco{background:var(--gc-white)}
/* Grilla tecnica de la seccion 8. No es una textura: son dos gradientes
   repetidos de 1px cada 48px, generados con CSS, sin una sola peticion. Remite
   al plano de obra, que es el registro visual correcto para una constructora
   industrial. Al 3,5% de opacidad se percibe como trama, no como lineas. */
.fondo-gris{
  background-color:var(--gc-gray);
  background-image:
    repeating-linear-gradient(0deg,  rgb(20 20 20 / .035) 0 1px, transparent 1px var(--esp-5)),
    repeating-linear-gradient(90deg, rgb(20 20 20 / .035) 0 1px, transparent 1px var(--esp-5));
}

/* --------------------------------------------------------------------------
   5. Header y navegacion
   -------------------------------------------------------------------------- */
/* Efecto 6. Al pasar el hero el header se compacta de 76px a 64px y devuelve
   esos 12px de pantalla. No se anima nada: min-height dispara layout y la regla
   de animar solo opacity, transform y clip-path manda sobre el catalogo.
   La linea inferior esta siempre, no aparece: un header flotando sin separacion
   sobre una foto es gesto de web moderna, no de industria. */
.header{position:sticky;top:0;z-index:50;background:var(--gc-white);border-bottom:1px solid var(--gc-line-on-light)}
.header.compacto .header-barra{min-height:64px}
/* El gap es de 8px y no de 24 porque en celular la barra se envuelve en tres
   filas: logo, enlaces y Contacto. Con 24px entre filas el header se comia el
   16% de la pantalla de forma permanente. En escritorio no cambia nada, porque
   ahi es una sola fila con space-between. */
.header-barra{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-1);min-height:var(--alto-header);flex-wrap:wrap;padding-block:0}
.header-logo{display:flex;align-items:center}
.header-logo img{height:34px;width:auto;display:block}
/* Compacto tambien achica el lockup. Sigue muy por encima del minimo de 120px
   de ancho que fija el manual para el lockup completo. */
.header.compacto .header-logo img{height:26px}
.nav{display:flex;align-items:center;gap:clamp(16px,2.4vw,36px);flex-wrap:wrap}
/* El texto mide 19px de alto y cumple WCAG por la excepcion de espaciado,
   pero es incomodo con el pulgar. El min-height lleva el area tactil a 44px,
   la vara de las guias de plataforma. Como el nav centra sus items y el header
   mide 76px, o 64px compacto, el texto no se mueve ni un pixel. */
.nav-enlace{display:flex;align-items:center;min-height:44px;font-size:var(--txt-2);font-weight:var(--peso-medio);letter-spacing:.01em}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;overflow:hidden}
.hero-contenido{position:relative;width:100%}
.hero-logo{height:clamp(44px,5vw,64px);width:auto;display:block;margin-bottom:clamp(28px,4vw,48px)}
.hero-titulo{margin:0;font-weight:var(--peso-fuerte);font-size:var(--txt-7);line-height:1.05;letter-spacing:-0.02em;max-width:14ch;text-wrap:pretty}

/* Foto de fondo: va como etiqueta de imagen detras del contenido, no como
   background-image. Asi entra en la negociacion de formato de picture y puede
   servirse en AVIF. Aca height:100% es deliberado, la foto llena la seccion y
   se recorta con object-fit. La regla de height:auto aplica a las fotos con
   proporcion declarada 16:9. */
.foto-fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* El velo de contraste del hero, plano, en una capa propia. */
.velo-contraste{position:absolute;inset:0;background:rgb(255 255 255 / .66)}

/* --------------------------------------------------------------------------
   7. Franja de cifras
   -------------------------------------------------------------------------- */
.franja-cifras{background:var(--gc-white);border-bottom:1px solid var(--gc-line-on-light)}
.cifras-grilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(28px,4vw,64px)}
.cifra-bloque{border-top:2px solid var(--gc-red);padding-top:var(--esp-3)}
.cifra{font-weight:var(--peso-fuerte);font-size:var(--txt-cifra);letter-spacing:-0.02em;line-height:1.05;white-space:nowrap}
.cifra-pie{margin-top:var(--esp-1);font-size:var(--txt-2);color:var(--gc-muted-on-light)}

/* --------------------------------------------------------------------------
   8. Titulares y texto
   -------------------------------------------------------------------------- */
.titulo-grande{margin:0;font-weight:var(--peso-fuerte);font-size:var(--txt-6);line-height:1.05;letter-spacing:-0.02em;text-wrap:pretty}
.titulo-seccion{margin:0 0 clamp(40px,5vw,72px);font-weight:var(--peso-fuerte);font-size:var(--txt-6);letter-spacing:-0.02em}
.titulo-seccion-chico{margin:0 0 clamp(40px,5vw,72px);font-weight:var(--peso-fuerte);font-size:var(--txt-5);letter-spacing:-0.02em}
.titulo-contacto{margin:0;font-weight:var(--peso-fuerte);font-size:var(--txt-6);letter-spacing:-0.02em}
.grupo-grilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(32px,5vw,96px);align-items:start}
.grupo-textos{display:flex;flex-direction:column;gap:var(--esp-3);max-width:56ch}
.parrafo{margin:0;font-size:var(--txt-3);line-height:1.6}
.parrafo-suave{margin:0;font-size:var(--txt-3);line-height:1.6;color:var(--gc-muted-on-light)}

/* --------------------------------------------------------------------------
   9. Unidades de negocio
   -------------------------------------------------------------------------- */
.unidades-grilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(28px,3.5vw,56px)}
.unidad{display:flex;flex-direction:column;gap:var(--esp-3)}
.unidad-logo{height:40px;width:auto;align-self:flex-start}
.unidad-texto{margin:0;font-size:var(--txt-3);line-height:1.6;color:var(--gc-muted-on-light);max-width:52ch}
.galpones{margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--gc-line-on-light);padding-top:clamp(28px,3.5vw,48px);display:flex;flex-wrap:wrap;align-items:center;gap:clamp(24px,4vw,64px)}
.galpones-logos{display:flex;flex-wrap:wrap;align-items:flex-start;gap:clamp(24px,4vw,64px)}
.galpones-texto{margin:0;font-size:var(--txt-2);line-height:1.6;color:var(--gc-muted-on-light);max-width:52ch}
.logo-galpon{filter:grayscale(1);opacity:.6;height:30px;width:auto;display:block;transition:opacity var(--dur-1) var(--mov-lineal)}
.link-galpon{display:flex;flex-direction:column;gap:var(--esp-1)}
.callout-galpon{font-size:var(--txt-1);font-weight:var(--peso-medio);color:var(--gc-muted-on-light);transition:color var(--dur-1) var(--mov-lineal)}

/* --------------------------------------------------------------------------
   10. Franja fotografica
   -------------------------------------------------------------------------- */
.franja-foto{position:relative;height:clamp(320px,52vw,620px);overflow:hidden}

/* --------------------------------------------------------------------------
   11. Obras
   -------------------------------------------------------------------------- */
.obras-lista{display:grid;grid-template-columns:1fr;gap:clamp(48px,6vw,88px)}
.obra-figura{margin:0;cursor:pointer}
.obra-figura img{transition:opacity var(--dur-1) var(--mov-lineal)}
/* Trampa conocida: con el atributo height presente, aspect-ratio sin height:auto
   no gana. El height:auto es obligatorio, no decorativo. */
.foto-16-9{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.obra-pie{padding-top:var(--esp-3)}
.obra-pie-ancha{max-width:var(--ancho-max);margin:0 auto;padding:var(--esp-3) var(--margen-pagina) clamp(56px,7vw,104px);border-bottom:1px solid var(--gc-line-on-light)}
.obra-titulo{position:relative;font-size:var(--txt-4);font-weight:var(--peso-fuerte);letter-spacing:-0.01em;line-height:1.2;margin-bottom:var(--esp-2)}
/* Efecto 5. Linea de 1px que crece de izquierda a derecha bajo el titulo. */
.obra-titulo::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--gc-red);transform:scaleX(0);transform-origin:left center;transition:transform var(--dur-2) var(--mov-suave)}
.obra-figura:focus-visible .obra-titulo::after{transform:scaleX(1)}
.ficha-grilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--esp-2)}
.ficha-grilla-ancha{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--esp-3)}
.ficha-etiqueta{font-size:var(--txt-1);font-weight:var(--peso-medio);letter-spacing:.08em;text-transform:uppercase;color:var(--gc-muted-on-light);margin-bottom:var(--esp-1)}
.ficha-dato{font-size:var(--txt-2);font-weight:var(--peso-medio)}
.ficha-dato-destacado{font-size:var(--txt-2);font-weight:var(--peso-medio)}

/* --------------------------------------------------------------------------
   12. Clientes
   -------------------------------------------------------------------------- */
.grid-clientes{display:grid;gap:1px;background:var(--gc-line-on-light);border:1px solid var(--gc-line-on-light);grid-template-columns:repeat(6,1fr)}
@media (max-width:900px){.grid-clientes{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.grid-clientes{grid-template-columns:repeat(2,1fr)}}
.celda-cliente{background:var(--gc-gray);min-height:calc(var(--esp-7) + var(--esp-2));padding:var(--esp-3) var(--esp-2);display:flex;align-items:center;justify-content:center}
/* El <picture> tiene que desaparecer como caja. Cuando se sumo el AVIF, el
   picture paso a ser el hijo flexible de la celda y el max-width:70% del logo
   dejo de resolverse contra la celda para resolverse contra el propio picture,
   que a su vez se dimensiona por el logo. Esa dependencia circular aplastaba
   los dieciocho logos y los corria a la izquierda. Con display:contents el
   picture no genera caja y la imagen vuelve a ser el hijo flexible, como antes.
   Son marcas de terceros: un logo deformado es un problema de marca. */
.celda-cliente picture{display:contents}
.logo-cliente{filter:grayscale(1);opacity:.72;max-height:52px;width:auto;max-width:70%;object-fit:contain}

/* --------------------------------------------------------------------------
   13. Contacto y formulario
   -------------------------------------------------------------------------- */
.contacto-grilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:clamp(40px,6vw,96px)}
.contacto-columna{display:flex;flex-direction:column;gap:var(--esp-4)}
.contacto-datos{display:flex;flex-direction:column;gap:var(--esp-2);font-size:var(--txt-3);line-height:1.6}
.etiqueta{font-size:var(--txt-1);font-weight:var(--peso-medio);letter-spacing:.08em;text-transform:uppercase;color:var(--gc-muted-on-light)}
.etiqueta-contacto{margin-bottom:var(--esp-1)}
.contacto-whatsapp{align-self:flex-start}
.form-contacto{display:flex;flex-direction:column;gap:var(--esp-3);align-self:start}
/* En escritorio el formulario va a dos columnas, agrupando por afinidad:
   nombre y empresa, correo y telefono, ubicacion y plazo. Motivo y mensaje
   ocupan el ancho completo. Ocho campos apilados en una sola columna hacian la
   seccion enorme. En celular vuelve a una columna, sin tocar los 44px de area
   tactil ni los rotulos. */
@media (min-width: 720px){
  .form-contacto{display:grid;grid-template-columns:1fr 1fr;gap:var(--esp-3);align-items:start}
  .form-nota,.campo-ancho,.form-aviso,.trampa,.form-contacto>button{grid-column:1 / -1}
  /* En grilla el align-self del boton no alcanza: sin justify-self se estira a
     las dos columnas y el boton oscuro pasa a ser una barra de lado a lado. */
  .form-contacto>button{justify-self:start}
}
.campo-bloque{display:flex;flex-direction:column;gap:var(--esp-1)}
.campo{border:1px solid var(--gc-line-on-light);border-radius:0;padding:var(--esp-2);font-size:var(--txt-3);color:var(--gc-carbon);background:var(--gc-white);transition:border-color var(--dur-1) var(--mov-lineal)}
.campo:focus{border-color:var(--gc-red)}
.campo-alto{resize:vertical}
select.campo{appearance:none;background-image:none}
.form-nota{margin:0;font-size:var(--txt-2);color:var(--gc-muted-on-light)}
/* Los rotulos del formulario no van en mayusculas. La etiqueta en versalita es
   para datos cortos de ficha, CLIENTE o ANIO, donde funciona. Un rotulo como
   "Motivo de la consulta" en mayusculas a 12px son 21 caracteres sin altura de
   equis que distinga las letras, y se lee peor justo donde hay que completar. */
.etiqueta-campo{font-size:var(--txt-2);font-weight:var(--peso-medio);letter-spacing:0;text-transform:none;color:var(--gc-carbon)}
/* Obligatorio y opcional se dicen con palabras, no con un asterisco ni con
   color: un asterisco rojo no significa nada para quien no ve el color. */
.marca-obligatorio,.marca-opcional{font-weight:var(--peso-texto);text-transform:none;letter-spacing:0}
.marca-obligatorio{color:var(--gc-red)}
.marca-opcional{color:var(--gc-muted-on-light)}
.campo-error{margin:0;font-size:var(--txt-2);font-weight:var(--peso-medio);color:var(--gc-red)}
.campo[aria-invalid="true"]{border-color:var(--gc-red);border-width:2px}
.form-aviso{margin:0;font-size:var(--txt-2);font-weight:var(--peso-medio);color:var(--gc-carbon)}
.form-aviso[data-estado="error"]{color:var(--gc-red)}
/* El campo trampa vive fuera de la pantalla, no con display:none: hay robots
   que descartan lo que esta oculto de esa forma. */
.trampa{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* --------------------------------------------------------------------------
   14. Botones
   -------------------------------------------------------------------------- */
.btn-red{background:var(--gc-red);color:var(--gc-white);padding:var(--esp-1) var(--esp-3);font-size:var(--txt-2);font-weight:var(--peso-medio);transition:background var(--dur-1) var(--mov-lineal)}
.btn-red-lg{background:var(--gc-red);color:var(--gc-white);padding:var(--esp-2) var(--esp-4);font-size:var(--txt-2);font-weight:var(--peso-medio);transition:background var(--dur-1) var(--mov-lineal)}
.btn-dark{align-self:flex-start;background:var(--gc-carbon);color:var(--gc-white);border:none;padding:var(--esp-2) var(--esp-4);font-size:var(--txt-2);font-weight:var(--peso-medio);font-family:'Instrument Sans',sans-serif;cursor:pointer;transition:background var(--dur-1) var(--mov-lineal)}
@media (max-width:600px){
.nav-contacto{background:none;padding:0;color:var(--gc-red)}
}

/* --------------------------------------------------------------------------
   15. Footer. Unica franja oscura del sitio.
   -------------------------------------------------------------------------- */
/* Superficie oscura: el hover de enlace pasa a blanco para toda la franja. */
.footer{background:var(--gc-carbon);color:var(--gc-white);--enlace-hover:var(--gc-white)}
.footer-cuerpo{display:flex;flex-direction:column;gap:clamp(40px,6vw,72px)}
.footer-logo{height:44px;width:auto;align-self:flex-start}
.footer-fila{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--esp-4);border-top:1px solid var(--gc-line-on-dark);padding-top:var(--esp-4)}
.footer-direccion{font-size:var(--txt-2);line-height:1.7;color:var(--gc-muted-on-dark)}
.footer-enlaces{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,40px);font-size:var(--txt-2)}
/* Las casillas por area van en letra chica y separadas de la via comercial,
   para que no compitan con ella. La direccion comercial es info@ y vive en la
   seccion Contacto, no aca. */
.footer-otras{display:flex;flex-wrap:wrap;gap:var(--esp-2) var(--esp-6);font-size:var(--txt-1)}
.footer-otra{display:flex;flex-direction:column;gap:var(--esp-1)}
.footer-otra-rotulo{color:var(--gc-muted-on-dark);text-transform:none;letter-spacing:.04em}
.footer-legal{font-size:var(--txt-1);color:var(--gc-muted-on-dark)}
/* El hover lo resuelve el token --enlace-hover del footer, no hace falta una
   regla propia por clase. */
.link-footer{color:var(--gc-muted-on-dark)}

/* --------------------------------------------------------------------------
   16. Lightbox
   -------------------------------------------------------------------------- */
.lb{position:fixed;inset:0;z-index:100;background:var(--gc-carbon);display:none;align-items:center;justify-content:center}
.lb.abierto{display:flex}
.lb-img{max-width:calc(100vw - 32px);max-height:calc(100vh - 120px);display:block;margin:auto;user-select:none;-webkit-user-drag:none}
.lb-btn{position:absolute;background:none;border:none;color:var(--gc-white);font-family:'Instrument Sans',sans-serif;cursor:pointer;padding:var(--esp-2);line-height:1;transition:color var(--dur-1) var(--mov-lineal)}
.lb-btn svg{display:block}
.lb-cerrar{top:var(--esp-2);right:var(--esp-2)}
.lb-ant{left:var(--esp-1);top:50%;transform:translateY(-50%)}
.lb-sig{right:var(--esp-1);top:50%;transform:translateY(-50%)}
.lb-barra{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:var(--esp-3) var(--esp-6) var(--esp-3) var(--esp-3);color:var(--gc-white);pointer-events:none}
.lb-titulo{font-size:var(--txt-2);font-weight:var(--peso-medio);color:rgb(255 255 255 / .9)}
.lb-contador{position:absolute;bottom:var(--esp-3);left:50%;transform:translateX(-50%);color:var(--gc-muted-on-dark);font-size:var(--txt-1);font-weight:var(--peso-medio);letter-spacing:.04em}
@media (max-width:720px){
.lb-ant,.lb-sig{padding:var(--esp-2)}
.lb-barra{padding:var(--esp-2) var(--esp-6) var(--esp-2) var(--esp-2)}
}

/* --------------------------------------------------------------------------
   17. Movimiento. Efectos 1 a 4 del catalogo de la seccion 7.

   Patron no-motion-first: todo lo que sigue vive dentro de
   @media (prefers-reduced-motion: no-preference). El estado por defecto del
   sitio es sin movimiento. Un navegador que no entienda la consulta de medios
   no recibe ninguna animacion, que es el resultado seguro.

   Los bloques que dependen del scroll van ademas dentro de
   @supports (animation-timeline: view()). Ningun elemento declara opacity:0 ni
   clip-path fuera de ese bloque: el estado final es el estado por defecto. Si
   el navegador no soporta animation-timeline, ve el sitio entero, no una
   pagina en blanco.

   Solo se animan opacity, transform y clip-path. Ninguna dispara layout.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){

  /* Efecto 1. Hero al cargar. No depende del scroll, corre una sola vez. */
  @keyframes gc-entrada-hero{
    from{opacity:0;transform:translateY(var(--mov-y-hero))}
    to{opacity:1;transform:none}
  }
  .hero-logo{animation:gc-entrada-hero var(--dur-4) var(--mov-salida) both}
  .hero-titulo{animation:gc-entrada-hero var(--dur-4) var(--mov-salida) 80ms both}

  @supports (animation-timeline: view()){

    /* Efecto 3. Revelado de seccion al entrar en vista. */
    @keyframes gc-revelar{
      from{opacity:0;transform:translateY(var(--mov-y))}
      to{opacity:1;transform:none}
    }
    #grupo,#unidades,#obras,#clientes,#contacto{
      animation:gc-revelar var(--dur-3) var(--mov-salida) both;
      animation-timeline:view();
      animation-range:entry 0% cover 30%;
    }

    /* Efecto 2. Franja de cifras, las cuatro escalonadas.
       En una linea de tiempo de progreso el animation-delay no aplica, asi que
       el escalonado se expresa corriendo el rango de cada bloque. El desfase
       equivale a los 60ms del catalogo. Son cuatro, el maximo permitido. */
    .cifra-bloque{
      animation:gc-revelar var(--dur-3) var(--mov-salida) both;
      animation-timeline:view();
    }
    .cifras-grilla>.cifra-bloque:nth-child(1){animation-range:entry 0% cover 22%}
    .cifras-grilla>.cifra-bloque:nth-child(2){animation-range:entry 3% cover 25%}
    .cifras-grilla>.cifra-bloque:nth-child(3){animation-range:entry 6% cover 28%}
    .cifras-grilla>.cifra-bloque:nth-child(4){animation-range:entry 9% cover 31%}

    /* Efecto 4. Foto de obra, revelado por mascara de abajo hacia arriba.
       inset(100% 0 0 0) esconde la foto empujando el borde superior hasta
       abajo. Al ir a inset(0) la foto se descubre como un plano que se
       despliega. */
    @keyframes gc-revelar-foto{
      from{clip-path:inset(100% 0 0 0)}
      to{clip-path:inset(0 0 0 0)}
    }
    .obra-figura .foto-16-9{
      animation:gc-revelar-foto var(--dur-4) var(--mov-salida) both;
      animation-timeline:view();
      animation-range:entry 0% cover 35%;
    }
  }


  /* Efecto 8. Apertura y cierre del lightbox. El cierre se anima gracias a
     allow-discrete, que mantiene el display hasta que termina la transicion.
     Sin soporte, abre y cierra de golpe, que es el comportamiento de siempre. */
  /* La duracion base es la del cierre. Al abrir manda la de .abierto.
     Cerrar mas rapido que abrir: al cerrar el usuario ya decidio y solo espera. */
  .lb{opacity:0;transform:scale(.98);transition:opacity var(--dur-1) var(--mov-suave),transform var(--dur-1) var(--mov-suave),display var(--dur-1) allow-discrete}
  .lb.abierto{opacity:1;transform:scale(1);transition-duration:var(--dur-2)}
  @starting-style{
    .lb.abierto{opacity:0;transform:scale(.98)}
  }

  /* Efecto 9. Transicion entre paginas, fundido de --dur-2. Hoy el sitio tiene
     una sola pagina, asi que no se percibe todavia, pero queda declarado para
     cuando se sumen obras, capacidades y nosotros. */
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:var(--dur-2);animation-timing-function:var(--mov-suave)}

  @supports (animation-timeline: view()){

    /* Efecto 7. Logos de clientes, escalonados por fila. Cada celda usa su
       propia linea de tiempo, y como las de una misma fila comparten posicion,
       entran juntas y las filas se escalonan solas. Son tres filas en
       escritorio, por debajo del tope de cuatro elementos seguidos. */
    .celda-cliente{
      animation:gc-revelar var(--dur-3) var(--mov-salida) both;
      animation-timeline:view();
      animation-range:entry 0% cover 25%;
    }
  }
}

/* --------------------------------------------------------------------------
   17 bis. Estados con mouse y estados presionados.

   Todo el hover vive aca dentro. En un celular el toque dispara :hover y el
   estado queda pegado hasta que se toca otra cosa: la linea roja de una obra
   se enciende sola y no se apaga. La consulta de medios lo evita.

   El foco y el estado presionado quedan fuera: los necesita cualquier
   dispositivo, y el presionado es justamente la respuesta al toque.
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine){
  a:hover{color:var(--enlace-hover)}
  .btn-red:hover{background:var(--gc-red-press);color:var(--gc-white)}
  .btn-red-lg:hover{background:var(--gc-red-press);color:var(--gc-white)}
  .btn-dark:hover{background:var(--gc-red)}
  .link-galpon:hover .logo-galpon{opacity:.85}
  .link-galpon:hover .callout-galpon{color:var(--gc-red)}
  .obra-figura:hover img{opacity:.92}
  .obra-figura:hover .obra-titulo::after{transform:scaleX(1)}
  .lb-btn:hover{color:var(--gc-red)}
  @media (max-width:600px){
    .nav-contacto:hover{background:none;color:var(--gc-red-press)}
  }
}

/* Efecto 10b. Estado presionado: inversion de figura y fondo, sin escalado.
   El boton rojo pasa a carbon. El boton carbon, cuyo hover ya es rojo, pasa al
   rojo presionado. Son cambios planos de color, que es lo que admite el manual. */
.btn-red:active,.btn-red-lg:active,.nav-contacto:active{background:var(--gc-carbon);color:var(--gc-white)}
.btn-dark:active{background:var(--gc-red-press)}

/* --------------------------------------------------------------------------
   18. Red de seguridad de movimiento. Seccion 7.
   Duracion casi cero en vez de none, para no romper los eventos animationend.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
scroll-behavior:auto !important;
}
::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}