/* ============================================================
   GEOMARINE SYSTEM — COMPONENTES "TERMINALES MARÍTIMOS"
   ------------------------------------------------------------
   Bloques reutilizables construidos sobre css/gm-tokens.css.

   El sitio es HTML estático sin build step, así que un
   "componente" es aquí un bloque CSS con su patrón de marcado
   documentado. Cada bloque lleva su marcado de referencia en el
   comentario que lo encabeza: copiarlo tal cual conserva la
   semántica y la accesibilidad.

   Índice
     0. Base, utilidades y salto de contenido
     1. gm-hero .............. encabezado con foto o video
     2. gm-secuencia ......... las 7 etapas del servicio
     3. gm-tabla-tecnica ..... tabla que se vuelve tarjetas
     4. gm-alcances .......... columnas / acordeón
     5. gm-destacado ......... cita de propuesta de valor
     6. gm-galeria ........... galería con lightbox
     7. gm-form-proyecto ..... formulario de proyecto
     8. gm-cta-banner ........ llamado a la acción
     9. gm-figura y piezas de apoyo
   ============================================================ */


/* ============================================================
   0. BASE, UTILIDADES Y SALTO DE CONTENIDO
   ============================================================ */

/* Enlace de salto: invisible hasta recibir el foco por teclado. */
.gm-skip-link {
    position: absolute;
    left: var(--gm-space-16);
    top: -100px;
    z-index: calc(var(--gm-z-header) + 10);
    display: inline-block;
    padding: var(--gm-space-12) var(--gm-space-24);
    background: var(--gm-white);
    color: var(--gm-primary);
    font-weight: var(--gm-fw-bold);
    font-size: var(--gm-fs-sm);
    text-decoration: none;
    border-radius: var(--gm-radius-sm);
    box-shadow: var(--gm-shadow-rest);
    transition: top var(--gm-dur) var(--gm-ease);
}
.gm-skip-link:focus {
    top: var(--gm-space-16);
    color: var(--gm-primary);
}

/* Solo para lectores de pantalla. */
.gm-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Ancho de lectura cómodo: 60–75 caracteres. */
.gm-prosa       { max-width: var(--gm-measure); }
.gm-prosa p     {
    font-size: var(--gm-fs-body);
    line-height: var(--gm-lh-body);
    color: var(--gm-ink);
    margin-bottom: var(--gm-space-24);
}
.gm-prosa p:last-child { margin-bottom: 0; }
.gm-prosa--centrada { margin-inline: auto; }

.gm-lede {
    font-size: var(--gm-fs-lede);
    line-height: var(--gm-lh-lede);
    color: var(--gm-ink);
    max-width: var(--gm-measure);
}

/* Antetítulo de sección. */
.gm-eyebrow {
    display: block;
    font-size: var(--gm-fs-label);
    font-weight: var(--gm-fw-bold);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gm-signal);
    margin-bottom: var(--gm-space-12);
}
.gm-eyebrow--sobre-oscuro { color: var(--gm-signal-light); }

/* Ritmo vertical extra para los bloques más densos. */
.gm-seccion-amplia {
    padding-top: var(--gm-section-y-lg) !important;
    padding-bottom: var(--gm-section-y-lg) !important;
}

/* Foco visible y consistente en todo el componente. */
.gm-terminales :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--gm-focus-ring);
    outline-offset: var(--gm-focus-offset);
    border-radius: var(--gm-radius-sm);
}


/* ============================================================
   1. GM-HERO — encabezado con foto o video
   ------------------------------------------------------------
   Se monta sobre .page-header del tema para heredar altura,
   degradado y tipografía, y reemplaza su fondo fijo por un
   <img> real con srcset (mejor LCP que un background-image).

   <section class="page-header gm-hero">
     <picture class="gm-hero__media">
       <source type="image/avif" srcset="..." sizes="100vw">
       <source type="image/webp" srcset="..." sizes="100vw">
       <img src="...-1280.jpg" alt="..." width="2048" height="945"
            fetchpriority="high" decoding="async">
     </picture>
     <div class="container"> ... </div>
   </section>
   ============================================================ */

.gm-hero {
    background-image: none !important;
    background-color: var(--gm-navy) !important;
}

.gm-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
}
.gm-hero__media img,
.gm-hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 58%; /* mantiene la boya y el muelle en cuadro */
    display: block;
}

/* Velo de contraste: garantiza AA del texto blanco sobre la foto. */
.gm-hero::before {
    background: linear-gradient(
        105deg,
        rgba(4, 30, 66, .88) 0%,
        rgba(4, 30, 66, .70) 45%,
        rgba(4, 30, 66, .42) 100%) !important;
    z-index: 1 !important;
}

.gm-hero .container { position: relative; z-index: 3; }

.gm-hero__titulo {
    max-width: 17ch; /* la frase principal cae en tres líneas parejas */
}

.gm-hero__lede {
    max-width: 60ch !important;
}

.gm-hero__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gm-space-16);
    margin-top: var(--gm-space-32);
}

/* Quien pide menos movimiento no recibe video: se congela en el póster. */
@media (prefers-reduced-motion: reduce) {
    .gm-hero__video { display: none; }
    .gm-hero__media { display: block; }
}


/* ============================================================
   2. GM-SECUENCIA — las 7 etapas del servicio
   ------------------------------------------------------------
   Pieza central de la página: es el diagrama del servicio
   integral, no un listado de productos.

   Riel horizontal con nodos numerados en escritorio; riel
   vertical a la izquierda en móvil. Todo es texto real en un
   <ol>: seleccionable, indexable y accesible. El riel es un
   pseudo-elemento decorativo, nunca una imagen.

   <ol class="gm-secuencia">
     <li class="gm-secuencia__etapa">
       <span class="gm-secuencia__nodo" aria-hidden="true">1</span>
       <h3 class="gm-secuencia__titulo">Levantamientos y antecedentes</h3>
       <p class="gm-secuencia__detalle">…</p>
     </li>
   </ol>
   ============================================================ */

.gm-secuencia {
    /* Diámetro del nodo y separación entre columnas. El riel se calcula
       a partir de estos dos valores, así que cambiarlos aquí lo reajusta
       solo, sin tocar la geometría. */
    --gm-nodo: 52px;
    --gm-nodo-radio: 26px;
    --gm-sec-gap: var(--gm-space-16);

    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    display: grid;
    gap: var(--gm-space-32) var(--gm-sec-gap);
}

.gm-secuencia__etapa { position: relative; }

.gm-secuencia__nodo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--gm-nodo);
    height: var(--gm-nodo);
    flex: 0 0 var(--gm-nodo);
    border-radius: var(--gm-radius-circle);
    background: var(--gm-grad-signal);
    color: var(--gm-white);
    font-size: 1.15rem;
    font-weight: var(--gm-fw-display);
    font-variant-numeric: tabular-nums;
    box-shadow: var(--gm-shadow-icon);
    position: relative;
    z-index: 2;
}

.gm-secuencia__titulo {
    font-size: 1rem !important;
    font-weight: var(--gm-fw-bold) !important;
    line-height: 1.3 !important;
    color: var(--gm-primary) !important;
    margin: 0 0 var(--gm-space-8) !important;
}

/* La regla `.content-section p` del tema (0,1,1) gana por especificidad
   a una clase sola (0,1,0) y le reimpone --medium-gray. Se antepone el
   contenedor para que el token de este componente prevalezca. */
.gm-secuencia .gm-secuencia__detalle {
    font-size: var(--gm-fs-sm);
    line-height: 1.6;
    color: var(--gm-slate);
    margin: 0;
}

/* ── Móvil y tablet: riel vertical a la izquierda ── */
@media (max-width: 991.98px) {
    .gm-secuencia { gap: var(--gm-space-32); }

    .gm-secuencia__etapa {
        display: grid;
        grid-template-columns: var(--gm-nodo) 1fr;
        column-gap: var(--gm-space-16);
        align-items: start;
    }
    /* Ubicación explícita de los tres hijos. Sin esto el navegador
       autoubica y el párrafo cae bajo el nodo, en una columna de 52 px
       que lo parte en una palabra por línea. */
    .gm-secuencia__nodo     { grid-column: 1; grid-row: 1; }
    .gm-secuencia__titulo   { grid-column: 2; grid-row: 1; }
    .gm-secuencia__detalle  { grid-column: 2; grid-row: 2; padding-top: var(--gm-space-4); }
    /* Tramo de riel que baja desde cada nodo hasta el siguiente. */
    .gm-secuencia__etapa::before {
        content: '';
        position: absolute;
        left: calc(var(--gm-nodo-radio) - 1px);
        top: var(--gm-nodo);
        bottom: calc(var(--gm-space-32) * -1);
        width: 2px;
        background: linear-gradient(
            to bottom, var(--gm-signal), var(--gm-border));
    }
    .gm-secuencia__etapa:last-child::before { display: none; }

    .gm-secuencia__titulo               { font-size: 1.05rem !important; }
    .gm-secuencia .gm-secuencia__detalle { font-size: var(--gm-fs-body); }
}

/* ── Escritorio: riel horizontal con las 7 etapas en fila ── */
@media (min-width: 992px) {
    .gm-secuencia {
        --gm-sec-gap: var(--gm-space-12);
        grid-template-columns: repeat(7, 1fr);
        gap: var(--gm-space-24) var(--gm-sec-gap);
        padding-top: var(--gm-space-4);
    }

    /* Riel horizontal, tramo a tramo.
       El nodo no está centrado en su columna: es una caja fija de 52 px
       apoyada al inicio, así que su centro cae a 26 px del borde
       izquierdo de la celda, no a la mitad de ella. Cada tramo va del
       centro de un nodo al centro del siguiente, que está a
       (ancho de columna + separación) de distancia. Como el borde
       derecho de la celda ya está a "ancho de columna", basta con
       extenderlo en negativo (separación + 26 px). */
    .gm-secuencia__etapa::before {
        content: '';
        position: absolute;
        top: calc(var(--gm-nodo-radio) - 1px);
        left: var(--gm-nodo-radio);
        right: calc(-1 * (var(--gm-sec-gap) + var(--gm-nodo-radio)));
        height: 2px;
        background: var(--gm-signal-light);
        z-index: 0;
    }
    .gm-secuencia__etapa:first-child::before { background: var(--gm-signal); }
    .gm-secuencia__etapa:nth-last-child(2)::before {
        background: linear-gradient(to right, var(--gm-signal-light), var(--gm-border));
    }
    /* La última etapa cierra la fila: no hay nodo siguiente al que ir. */
    .gm-secuencia__etapa:last-child::before { display: none; }

    .gm-secuencia__nodo { margin-bottom: var(--gm-space-16); }
}

@media (min-width: 1200px) {
    .gm-secuencia { --gm-sec-gap: var(--gm-space-24); }
    .gm-secuencia .gm-secuencia__detalle { font-size: .86rem; }
}


/* ============================================================
   3. GM-TABLA-TECNICA — tabla que se vuelve tarjetas
   ------------------------------------------------------------
   En móvil cada fila se apila como tarjeta; nunca hay scroll
   horizontal. Como el cambio a display:block rompería la
   semántica de tabla, el marcado declara los roles ARIA
   explícitos para conservarla en ambos modos.

   Cada <td> necesita data-label con el encabezado de su columna:
   es lo que se muestra como rótulo en el modo tarjeta.

   <div class="gm-tabla-tecnica">
     <table role="table">
       <caption>Texto de la tabla…</caption>
       <thead role="rowgroup">
         <tr role="row">
           <th role="columnheader" scope="col">Tipo</th> …
         </tr>
       </thead>
       <tbody role="rowgroup">
         <tr role="row">
           <th role="rowheader" scope="row">Con contrete</th>
           <td role="cell" data-label="Descripción">…</td>
         </tr>
       </tbody>
     </table>
   </div>
   ============================================================ */

.gm-tabla-tecnica { margin: 0 0 var(--gm-space-24); }

.gm-tabla-tecnica table {
    width: 100%;
    border-collapse: collapse;
    background: var(--gm-white);
    font-size: var(--gm-fs-sm);
}

.gm-tabla-tecnica caption {
    caption-side: top;
    text-align: left;
    font-size: var(--gm-fs-sm);
    line-height: 1.6;
    color: var(--gm-slate);
    padding: 0 0 var(--gm-space-16);
    max-width: var(--gm-measure);
}

.gm-tabla-tecnica thead th {
    background: var(--gm-primary);
    color: var(--gm-on-dark);
    font-size: var(--gm-fs-label);
    font-weight: var(--gm-fw-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: left;
    padding: var(--gm-space-16);
    vertical-align: bottom;
}
.gm-tabla-tecnica thead th:first-child { border-top-left-radius:  var(--gm-radius-sm); }
.gm-tabla-tecnica thead th:last-child  { border-top-right-radius: var(--gm-radius-sm); }

.gm-tabla-tecnica tbody th,
.gm-tabla-tecnica tbody td {
    padding: var(--gm-space-16);
    border-bottom: 1px solid var(--gm-border);
    line-height: 1.6;
    vertical-align: top;
    text-align: left;
}
.gm-tabla-tecnica tbody th {
    font-weight: var(--gm-fw-bold);
    color: var(--gm-primary);
    white-space: normal;
}
.gm-tabla-tecnica tbody td { color: var(--gm-ink); }

.gm-tabla-tecnica tbody tr:nth-child(even) { background: var(--gm-surface); }
.gm-tabla-tecnica tbody tr:last-child th,
.gm-tabla-tecnica tbody tr:last-child td { border-bottom: none; }

/* El rótulo del modo tarjeta permanece oculto mientras haya tabla. */
.gm-tabla-tecnica td::before { display: none; }

/* ── Móvil: cada fila es una tarjeta apilada ── */
@media (max-width: 767.98px) {
    .gm-tabla-tecnica table,
    .gm-tabla-tecnica thead,
    .gm-tabla-tecnica tbody,
    .gm-tabla-tecnica tr,
    .gm-tabla-tecnica th,
    .gm-tabla-tecnica td { display: block; }

    /* El caption debe volverse bloque junto con la tabla. Si conserva
       display:table-caption dentro de un contenedor ya convertido a
       bloque, el navegador lo envuelve en una tabla anónima ajustada al
       contenido y el texto cae en una columna de una palabra de ancho. */
    .gm-tabla-tecnica caption {
        display: block;
        width: 100%;
    }

    /* El encabezado se oculta a la vista pero sigue anunciándose. */
    .gm-tabla-tecnica thead {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .gm-tabla-tecnica tbody tr {
        background: var(--gm-white) !important;
        border: 1px solid var(--gm-border);
        border-radius: var(--gm-radius);
        box-shadow: var(--gm-shadow-sm);
        padding: var(--gm-space-16) var(--gm-space-16) var(--gm-space-8);
        margin-bottom: var(--gm-space-16);
    }
    .gm-tabla-tecnica tbody tr:last-child { margin-bottom: 0; }

    /* La celda de encabezado de fila es el título de la tarjeta. */
    .gm-tabla-tecnica tbody th {
        padding: 0 0 var(--gm-space-12);
        margin-bottom: var(--gm-space-12);
        font-size: 1.02rem;
        border-bottom: 2px solid var(--gm-signal);
    }

    .gm-tabla-tecnica tbody td {
        padding: 0 0 var(--gm-space-12);
        border-bottom: none;
    }
    .gm-tabla-tecnica tbody td::before {
        content: attr(data-label);
        display: block;
        font-size: var(--gm-fs-label);
        font-weight: var(--gm-fw-bold);
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--gm-slate);
        margin-bottom: var(--gm-space-4);
    }
}


/* ============================================================
   4. GM-ALCANCES — columnas en escritorio, acordeón en móvil
   ------------------------------------------------------------
   Usa <details>/<summary> nativos: el acordeón funciona sin
   JavaScript y ya es accesible por teclado. En escritorio los
   grupos se abren por CSS y el marcador se oculta.

   <div class="gm-alcances">
     <details class="gm-alcances__grupo" open>
       <summary class="gm-alcances__titulo">5.1 Estudios…</summary>
       <ul class="gm-alcances__lista"><li>…</li></ul>
     </details>
   </div>
   ============================================================ */

.gm-alcances {
    display: grid;
    gap: var(--gm-space-24);
}

.gm-alcances__grupo {
    background: var(--gm-white);
    border: 1px solid var(--gm-border);
    border-radius: var(--gm-radius);
    box-shadow: var(--gm-shadow-sm);
    overflow: hidden;
}

.gm-alcances__titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gm-space-12);
    padding: var(--gm-space-24);
    font-size: 1.05rem;
    font-weight: var(--gm-fw-bold);
    color: var(--gm-primary);
    cursor: pointer;
    list-style: none;
    transition: background var(--gm-dur) var(--gm-ease);
}
.gm-alcances__titulo::-webkit-details-marker { display: none; }
.gm-alcances__titulo:hover { background: var(--gm-surface); }

/* Cheurón propio, que gira al abrir. */
.gm-alcances__titulo::after {
    content: '';
    flex: 0 0 auto;
    width: 10px; height: 10px;
    border-right: 2px solid var(--gm-signal);
    border-bottom: 2px solid var(--gm-signal);
    transform: rotate(45deg);
    transform-origin: center;
    transition: transform var(--gm-dur) var(--gm-ease);
}
.gm-alcances__grupo[open] > .gm-alcances__titulo::after {
    transform: rotate(-135deg);
}

.gm-alcances__lista {
    list-style: none;
    margin: 0;
    padding: 0 var(--gm-space-24) var(--gm-space-24);
}
.gm-alcances__lista li {
    position: relative;
    padding-left: var(--gm-space-32);
    margin-bottom: var(--gm-space-12);
    font-size: var(--gm-fs-sm);
    line-height: 1.6;
    color: var(--gm-ink);
}
.gm-alcances__lista li:last-child { margin-bottom: 0; }

/* Checkmark azul dibujado en CSS, no una viñeta genérica. */
.gm-alcances__lista li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: .42em;
    width: 6px; height: 11px;
    border-right: 2px solid var(--gm-signal);
    border-bottom: 2px solid var(--gm-signal);
    transform: rotate(45deg);
}

/* ── Escritorio: tres columnas, todas desplegadas ── */
@media (min-width: 992px) {
    .gm-alcances { grid-template-columns: repeat(3, 1fr); align-items: start; }
    .gm-alcances__titulo { cursor: default; padding-bottom: var(--gm-space-16); }
    .gm-alcances__titulo::after { display: none; }
    .gm-alcances__grupo  { height: 100%; }
}


/* ============================================================
   5. GM-DESTACADO — cita de propuesta de valor
   ------------------------------------------------------------
   Para los párrafos que en el documento aprobado aparecen
   dentro de recuadros.

   <blockquote class="gm-destacado">
     <p>Navegación, hidrografía y oceanografía…</p>
   </blockquote>

   Se resuelve como cita editorial, no como tarjeta con pestaña de
   color al costado: el acento lo pone la comilla de apertura en
   Merriweather, que DESIGN.md reserva para contrapeso editorial en
   páginas internas.

   Variante centrada:            .gm-destacado--centrado
   Variante sobre fondo oscuro:  .gm-destacado--sobre-oscuro
   Variante compacta para notas: .gm-destacado--nota
   ============================================================ */

.gm-destacado {
    position: relative;
    margin: var(--gm-space-32) 0;
    padding: var(--gm-space-40) var(--gm-space-40) var(--gm-space-40) var(--gm-space-64);
    background: var(--gm-surface);
    border: none;
    border-radius: var(--gm-radius);
    max-width: var(--gm-measure);
}

/* Comilla de apertura como marca de cita. */
.gm-destacado::before {
    content: '\201C';
    position: absolute;
    left: var(--gm-space-24);
    top: var(--gm-space-16);
    font-family: var(--gm-font-editorial);
    font-size: 3.4rem;
    line-height: 1;
    color: var(--gm-signal);
    opacity: .55;
    pointer-events: none;
}

.gm-destacado p {
    margin: 0 0 var(--gm-space-16);
    font-size: var(--gm-fs-lede);
    line-height: var(--gm-lh-lede);
    color: var(--gm-primary);
    font-weight: var(--gm-fw-medium);
}
.gm-destacado p:last-child { margin-bottom: 0; }

.gm-destacado--centrado {
    margin-inline: auto;
    text-align: center;
    padding: var(--gm-space-64) var(--gm-space-40) var(--gm-space-40);
}
.gm-destacado--centrado::before {
    left: 50%;
    transform: translateX(-50%);
    top: var(--gm-space-24);
}

.gm-destacado--sobre-oscuro { background: rgba(255, 255, 255, .07); }
.gm-destacado--sobre-oscuro::before { color: var(--gm-signal-light); opacity: .7; }
.gm-destacado--sobre-oscuro p      { color: var(--gm-on-dark); }

/* Nota técnica: menor jerarquía, misma visibilidad. Sin comilla,
   porque no es una cita sino una advertencia de criterio. */
.gm-destacado--nota {
    padding: var(--gm-space-24) var(--gm-space-32);
    background: var(--gm-white);
    box-shadow: var(--gm-shadow-sm);
}
.gm-destacado--nota::before { content: none; }
.gm-destacado--nota p {
    font-size: var(--gm-fs-sm);
    line-height: 1.7;
    font-weight: var(--gm-fw-body);
    color: var(--gm-ink);
}
.gm-destacado--nota strong { color: var(--gm-primary); }

@media (max-width: 575.98px) {
    .gm-destacado {
        padding: var(--gm-space-48) var(--gm-space-24) var(--gm-space-24);
    }
    .gm-destacado::before { top: var(--gm-space-8); left: var(--gm-space-16); }
    .gm-destacado--nota   { padding: var(--gm-space-24); }
}


/* ============================================================
   6. GM-GALERIA — galería con lightbox
   ------------------------------------------------------------
   Cuadrícula de <figure> con pie de foto. Cada miniatura es un
   <button> que abre un <dialog> nativo: el atrapado de foco y
   el cierre con Escape los aporta el navegador. El JS solo
   cambia de imagen y sincroniza el pie.

   <ul class="gm-galeria"> <li><figure class="gm-galeria__item">
     <button class="gm-galeria__disparador" type="button"
             data-gm-lightbox="0" aria-haspopup="dialog">
       <picture>…<img loading="lazy" width height alt></picture>
     </button>
     <figcaption class="gm-galeria__pie">…</figcaption>
   </figure></li> </ul>
   ============================================================ */

.gm-galeria {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--gm-card-gap);
}

.gm-galeria__item {
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.gm-galeria__disparador {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: zoom-in;
    border-radius: var(--gm-radius);
    overflow: hidden;
    box-shadow: var(--gm-shadow-rest);
    transition: transform var(--gm-dur) var(--gm-ease),
                box-shadow var(--gm-dur) var(--gm-ease);
}
.gm-galeria__disparador:hover,
.gm-galeria__disparador:focus-visible {
    transform: translateY(-6px);
    box-shadow: var(--gm-shadow-hover);
}
.gm-galeria__disparador img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.gm-galeria__pie {
    padding-top: var(--gm-space-12);
    font-size: var(--gm-fs-sm);
    line-height: 1.55;
    color: var(--gm-slate);
}

/* ── Lightbox ── */
.gm-lightbox {
    width: min(96vw, 1200px);
    max-width: 96vw;
    max-height: 94vh;
    padding: 0;
    border: none;
    border-radius: var(--gm-radius);
    background: var(--gm-navy);
    color: var(--gm-on-dark);
    overflow: hidden;
}
.gm-lightbox::backdrop { background: rgba(4, 30, 66, .88); }

.gm-lightbox__figura {
    margin: 0;
    display: flex;
    flex-direction: column;
}
.gm-lightbox__img {
    display: block;
    width: 100%;
    max-height: 76vh;
    object-fit: contain;
    background: var(--gm-navy);
}
.gm-lightbox__pie {
    padding: var(--gm-space-16) var(--gm-space-24);
    font-size: var(--gm-fs-sm);
    line-height: 1.6;
    color: var(--gm-on-dark-muted);
}

.gm-lightbox__cerrar,
.gm-lightbox__nav {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: var(--gm-radius-circle);
    background: rgba(4, 30, 66, .72);
    color: var(--gm-on-dark);
    font-size: 1.1rem;
    cursor: pointer;
    transition: background var(--gm-dur) var(--gm-ease);
}
.gm-lightbox__cerrar:hover,
.gm-lightbox__nav:hover { background: var(--gm-signal); }

.gm-lightbox__cerrar { top: var(--gm-space-12); right: var(--gm-space-12); }
.gm-lightbox__nav    { top: calc(38vh - 22px); }
.gm-lightbox__nav--prev { left:  var(--gm-space-12); }
.gm-lightbox__nav--next { right: var(--gm-space-12); }

@media (max-width: 575.98px) {
    .gm-galeria { grid-template-columns: 1fr; }
    .gm-lightbox__nav { top: auto; bottom: 68px; }
}


/* ============================================================
   7. GM-FORM-PROYECTO — formulario orientado a proyectos
   ------------------------------------------------------------
   Errores accesibles: cada campo inválido recibe aria-invalid
   y apunta con aria-describedby al <p class="gm-campo__error">
   correspondiente, que se anuncia por su role="alert".
   ============================================================ */

.gm-form-proyecto {
    background: var(--gm-white);
    border-radius: var(--gm-radius-lg);
    box-shadow: var(--gm-shadow-rest);
    padding: var(--gm-space-40);
}

.gm-form-proyecto fieldset {
    border: none;
    padding: 0;
    margin: 0 0 var(--gm-space-32);
}
.gm-form-proyecto fieldset:last-of-type { margin-bottom: var(--gm-space-24); }

.gm-form-proyecto legend {
    width: 100%;
    padding: 0 0 var(--gm-space-16);
    margin-bottom: var(--gm-space-24);
    border-bottom: 1px solid var(--gm-border);
    font-size: var(--gm-fs-label);
    font-weight: var(--gm-fw-bold);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gm-signal);
    float: none;
}

.gm-form-proyecto__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gm-space-24);
}
.gm-campo--ancho { grid-column: 1 / -1; }

@media (max-width: 767.98px) {
    .gm-form-proyecto { padding: var(--gm-space-24); }
    .gm-form-proyecto__grid { grid-template-columns: 1fr; }
}

.gm-campo { display: flex; flex-direction: column; }

.gm-campo__label {
    font-size: var(--gm-fs-sm);
    font-weight: var(--gm-fw-semi);
    color: var(--gm-primary);
    margin-bottom: var(--gm-space-8);
}
.gm-campo__opcional {
    font-weight: var(--gm-fw-body);
    color: var(--gm-slate);
}

.gm-campo__control {
    width: 100%;
    padding: var(--gm-space-12) var(--gm-space-16);
    font-family: var(--gm-font-sans);
    font-size: var(--gm-fs-body);
    color: var(--gm-ink);
    background: var(--gm-white);
    border: 1px solid var(--gm-border);
    border-radius: var(--gm-radius-sm);
    transition: border-color var(--gm-dur) var(--gm-ease),
                box-shadow var(--gm-dur) var(--gm-ease);
}
.gm-campo__control:hover { border-color: var(--gm-signal-light); }
.gm-campo__control:focus {
    outline: none;
    border-color: var(--gm-signal);
    box-shadow: 0 0 0 3px var(--gm-signal-ring);
}
.gm-campo__control:focus-visible {
    outline: var(--gm-focus-ring);
    outline-offset: 1px;
}
textarea.gm-campo__control { min-height: 140px; resize: vertical; }
select.gm-campo__control   { appearance: none; background-image: none; padding-right: var(--gm-space-40); }

/* Cheurón del select, dibujado sobre el contenedor. */
.gm-campo--select { position: relative; }
.gm-campo--select::after {
    content: '';
    position: absolute;
    right: var(--gm-space-16);
    bottom: 20px;
    width: 8px; height: 8px;
    border-right: 2px solid var(--gm-slate);
    border-bottom: 2px solid var(--gm-slate);
    transform: rotate(45deg);
    pointer-events: none;
}
.gm-campo--select.gm-campo--con-ayuda::after { bottom: 46px; }

/* Misma razón que en gm-secuencia__detalle: se antepone el contenedor
   para ganarle a `.content-section p` del tema. */
.gm-form-proyecto .gm-campo__ayuda,
.gm-campo .gm-campo__ayuda {
    margin: var(--gm-space-8) 0 0;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--gm-slate);
}

.gm-campo__error {
    margin: var(--gm-space-8) 0 0;
    font-size: .82rem;
    font-weight: var(--gm-fw-semi);
    line-height: 1.5;
    color: var(--gm-danger);
}
.gm-campo__error:empty { display: none; }

.gm-campo__control[aria-invalid="true"] {
    border-color: var(--gm-danger);
    background: var(--gm-danger-bg);
}
.gm-campo__control[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px var(--gm-danger-ring);
}

/* Grupo de radios: estado del proyecto. */
.gm-radios {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gm-space-8);
}
.gm-radios input {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
}
.gm-radios label {
    display: inline-block;
    padding: var(--gm-space-8) var(--gm-space-16);
    font-size: var(--gm-fs-sm);
    font-weight: var(--gm-fw-medium);
    color: var(--gm-ink);
    background: var(--gm-white);
    border: 1px solid var(--gm-border);
    border-radius: var(--gm-radius-pill);
    cursor: pointer;
    transition: all var(--gm-dur) var(--gm-ease);
}
.gm-radios label:hover { border-color: var(--gm-signal); color: var(--gm-signal); }
.gm-radios input:checked + label {
    background: var(--gm-signal);
    border-color: var(--gm-signal);
    color: var(--gm-white);
}
.gm-radios input:focus-visible + label {
    outline: var(--gm-focus-ring);
    outline-offset: var(--gm-focus-offset);
}

/* Adjunto de planos y términos de referencia. */
.gm-adjunto__control {
    padding: var(--gm-space-12);
    border-style: dashed;
    cursor: pointer;
}
.gm-adjunto__control::file-selector-button {
    margin-right: var(--gm-space-16);
    padding: var(--gm-space-8) var(--gm-space-16);
    font-family: inherit;
    font-size: var(--gm-fs-sm);
    font-weight: var(--gm-fw-semi);
    color: var(--gm-white);
    background: var(--gm-ocean);
    border: none;
    border-radius: var(--gm-radius-sm);
    cursor: pointer;
}

/* Botón de envío. */
.gm-form-proyecto__enviar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gm-space-12);
    padding: var(--gm-space-16) var(--gm-space-40);
    font-family: var(--gm-font-sans);
    font-size: var(--gm-fs-sm);
    font-weight: var(--gm-fw-bold);
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--gm-white);
    background: var(--gm-grad-signal);
    border: none;
    border-radius: var(--gm-radius-btn);
    cursor: pointer;
    transition: transform var(--gm-dur) var(--gm-ease),
                box-shadow var(--gm-dur) var(--gm-ease);
}
.gm-form-proyecto__enviar:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--gm-shadow-icon);
}
.gm-form-proyecto__enviar:disabled { opacity: .65; cursor: progress; }

/* Indicador de carga. */
.gm-spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: var(--gm-white);
    border-radius: var(--gm-radius-circle);
    animation: gm-girar .7s linear infinite;
}
@keyframes gm-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .gm-spinner { animation-duration: 2s; }
}

/* Mensaje global de estado del envío. */
.gm-form-proyecto__estado {
    margin-top: var(--gm-space-24);
    padding: var(--gm-space-16) var(--gm-space-24);
    border-radius: var(--gm-radius-sm);
    font-size: var(--gm-fs-sm);
    line-height: 1.6;
}
.gm-form-proyecto__estado:empty { display: none; }
.gm-form-proyecto__estado[data-estado="ok"] {
    background: var(--gm-success-bg);
    color: var(--gm-success-text);
    border: 1px solid var(--gm-success-line);
}
.gm-form-proyecto__estado[data-estado="error"] {
    background: var(--gm-danger-bg);
    color: var(--gm-danger);
    border: 1px solid var(--gm-danger-line);
}

/* Trampa anti-spam: fuera de la vista y del orden de tabulación. */
.gm-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
}


/* ============================================================
   8. GM-CTA-BANNER — llamado a la acción reutilizable
   ------------------------------------------------------------
   <section class="gm-cta-banner">
     <div class="container gm-cta-banner__cuerpo">
       <p class="gm-cta-banner__pregunta">…</p>
       <h2 class="gm-cta-banner__titulo">…</h2>
       <p class="gm-cta-banner__texto">…</p>
       <div class="gm-cta-banner__acciones"> <a class="gm-btn">…</a> </div>
     </div>
   </section>
   ============================================================ */

.gm-cta-banner {
    background: var(--gm-grad-navy);
    color: var(--gm-on-dark);
    padding: var(--gm-section-y) 0;
    position: relative;
    overflow: hidden;
}

.gm-cta-banner__cuerpo {
    position: relative;
    z-index: 2;
    max-width: 820px;
    text-align: center;
}

.gm-cta-banner__pregunta {
    font-size: var(--gm-fs-label);
    font-weight: var(--gm-fw-bold);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gm-signal-light);
    margin-bottom: var(--gm-space-16);
}

.gm-cta-banner__titulo {
    font-size: var(--gm-fs-h2) !important;
    font-weight: var(--gm-fw-display) !important;
    line-height: var(--gm-lh-heading) !important;
    color: var(--gm-on-dark) !important;
    margin-bottom: var(--gm-space-24) !important;
}

.gm-cta-banner__texto {
    font-size: var(--gm-fs-lede);
    line-height: var(--gm-lh-body);
    color: var(--gm-on-dark-muted);
    max-width: 62ch;
    margin: 0 auto var(--gm-space-40);
}

.gm-cta-banner__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gm-space-16);
    justify-content: center;
}

/* Botón del sistema. Rectangular de 4px, igual que .btn-monitoring. */
.gm-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--gm-space-8);
    padding: var(--gm-space-16) var(--gm-space-32);
    font-size: var(--gm-fs-sm);
    font-weight: var(--gm-fw-bold);
    letter-spacing: .5px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--gm-radius-btn);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--gm-dur) var(--gm-ease),
                box-shadow var(--gm-dur) var(--gm-ease),
                background var(--gm-dur) var(--gm-ease);
}
.gm-btn:hover { transform: translateY(-2px); }

.gm-btn--primario {
    background: var(--gm-grad-signal);
    color: var(--gm-white);
}
.gm-btn--primario:hover { color: var(--gm-white); box-shadow: var(--gm-shadow-icon); }

.gm-btn--fantasma {
    background: transparent;
    color: var(--gm-on-dark);
    border-color: rgba(255, 255, 255, .55);
}
.gm-btn--fantasma:hover {
    color: var(--gm-navy);
    background: var(--gm-white);
    border-color: var(--gm-white);
}

/* Sobre fondo claro. */
.gm-btn--contorno {
    background: transparent;
    color: var(--gm-signal);
    border-color: var(--gm-signal);
}
.gm-btn--contorno:hover { background: var(--gm-signal); color: var(--gm-white); }


/* ============================================================
   9. GM-FIGURA Y PIEZAS DE APOYO
   ============================================================ */

.gm-figura {
    margin: 0;
    border-radius: var(--gm-radius);
    overflow: hidden;
    background: var(--gm-white);
    box-shadow: var(--gm-shadow-media);
}
.gm-figura img {
    display: block;
    width: 100%;
    height: auto;
}
.gm-figura figcaption {
    padding: var(--gm-space-16) var(--gm-space-24);
    font-size: var(--gm-fs-sm);
    line-height: 1.55;
    color: var(--gm-slate);
}

/* Retrato vertical: se limita la altura para que no domine la fila. */
.gm-figura--retrato img { max-height: 720px; object-fit: cover; }

/* Media a tamaño medio, por resolución del original. */
.gm-figura--medio { max-width: 800px; margin-inline: auto; }

/* Distintivo de imagen referencial de fabricante. */
.gm-etiqueta-ref {
    display: inline-block;
    padding: 3px var(--gm-space-12);
    margin-bottom: var(--gm-space-8);
    font-size: .68rem;
    font-weight: var(--gm-fw-bold);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gm-slate);
    background: var(--gm-surface);
    border: 1px solid var(--gm-border);
    border-radius: var(--gm-radius-pill);
}

/* Par de columnas texto + media, con la media opcionalmente primero. */
.gm-duo {
    display: grid;
    gap: var(--gm-space-48);
    align-items: center;
}
@media (min-width: 992px) {
    .gm-duo { grid-template-columns: 1fr 1fr; gap: var(--gm-space-64); }
    .gm-duo--media-izq .gm-duo__media { order: -1; }
    .gm-duo--7-5 { grid-template-columns: 7fr 5fr; }
    .gm-duo--5-7 { grid-template-columns: 5fr 7fr; }
}

/* Rejilla genérica de tarjetas de contenido. */
.gm-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--gm-card-gap);
}
.gm-tarjeta {
    background: var(--gm-white);
    border: 1px solid var(--gm-border);
    border-radius: var(--gm-radius);
    padding: var(--gm-space-32);
    box-shadow: var(--gm-shadow-sm);
    height: 100%;
}
.gm-tarjeta__icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    margin-bottom: var(--gm-space-24);
    border-radius: var(--gm-radius-circle);
    background: var(--gm-grad-signal);
    color: var(--gm-white);
    font-size: 1.25rem;
    box-shadow: var(--gm-shadow-icon);
}
.gm-tarjeta h3 {
    font-size: 1.15rem !important;
    font-weight: var(--gm-fw-bold) !important;
    color: var(--gm-primary) !important;
    margin-bottom: var(--gm-space-12) !important;
    line-height: 1.3 !important;
}
.gm-tarjeta p {
    font-size: var(--gm-fs-sm);
    line-height: 1.65;
    color: var(--gm-slate);
    margin: 0;
}

/* Encabezado de sección alineado a la izquierda, para bloques
   de lectura larga donde centrar perjudica el barrido. */
.gm-section-header--izq {
    max-width: var(--gm-measure-wide);
    margin: 0 0 var(--gm-header-gap) !important;
    text-align: left !important;
}

/* El tema dibuja bajo cada h2 de sección una barra de acento de 52 px
   con `margin: 18px auto`, es decir centrada. En un encabezado alineado
   a la izquierda queda flotando en medio del bloque, desconectada del
   título. Se ancla al margen izquierdo.
   (La clase `no-accent-bar` que usan las demás páginas no existe en
   ninguna hoja: no suprime nada. Se documenta en el informe.) */
.gm-section-header--izq h2::after {
    margin-left: 0 !important;
    margin-right: auto !important;
}