/* ==========================================================================
   Gantenbein Group — capa de marca sobre la plantilla consTimes
   Se carga DESPUÉS de style.css y responsive.css.
   Sólo contiene: (1) tokens de marca, (2) tipografía, (3) ajustes de header
   y (4) componentes propios que la plantilla no traía.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens de marca
   -------------------------------------------------------------------------- */
:root {
    /* Sobrescriben las variables de la plantilla */
    --color-black: #29252c;   /* gris oscuro corporativo */
    --color-orange: #ab8320;  /* dorado corporativo */
    --color-orange2: #c99b2b; /* dorado claro (acentos/hover) */

    /* Grises de texto de la plantilla: los originales (#616670, #333f4d)
       tiran a azul y desentonan con la paleta negra. Mismos valores en
       neutro. */
    --color-gBlack: #66626b;
    --color-gBlack2: #3a3540;

    /* Propias */
    --gb-dark: #29252c;       /* gris oscuro: cabecera, hero, secciones */
    --gb-black: #000000;      /* negro puro: barra superior y pie */
    --gb-gold: #ab8320;
    --gb-gold-light: #c99b2b;
    --gb-gray: #f2f1f3;
    --gb-error: #c0392b;      /* rojo de validación */
    --gb-titulo: "Montserrat", sans-serif;
    --gb-texto: "Open Sans", sans-serif;
}

/* --------------------------------------------------------------------------
   2. Tipografía de marca
   -------------------------------------------------------------------------- */
body,
p,
a,
li,
input,
textarea,
button,
.btn-anime,
.link-anime {
    font-family: var(--gb-texto);
}

h1, h2, h3, h4, h5, h6,
.section-title h2,
.section-title-center h2 {
    font-family: var(--gb-titulo);
    letter-spacing: -0.01em;
}

.section-title h6,
.section-title-center h6 {
    font-family: var(--gb-titulo);
    font-weight: 700;
    letter-spacing: 0.12em;
}

/* Párrafo introductorio bajo un titular centrado */
.section-title-center > p {
    max-width: 850px;
    margin: 18px auto 0;
}

/* La plantilla aplica text-transform: capitalize a varios titulares. En inglés
   funciona; en español convierte "Gestión de la infraestructura" en "Gestión De
   La Infraestructura". Respetamos el texto tal como se escribe. */
h1, h2, h3, h4, h5,
.section-title h2,
.section-title-center h2,
.breadcum-content h1,
.gb-card-body h4 {
    text-transform: none;
}

/* Un <h1> por página (SEO). La plantilla estiliza como <h2> el titular del
   hero y el del encabezado de las páginas internas; estas reglas copian las
   suyas (style.css y responsive.css) para que el cambio de etiqueta no se vea. */
.banner .banner-content h1,
.breadcum .breadcum-content h1 {
    color: var(--color-white);
    font-weight: 700;
}

.banner .banner-content h1 {
    font-size: 48px;
    line-height: 50px;
}

.banner .banner-content h6 ~ h1,
.banner .banner-content h1 ~ p {
    margin-top: 30px;
}

.breadcum .breadcum-content h1 {
    font-size: 38px;
    line-height: 48px;
}

.breadcum .breadcum-content h1 ~ ul {
    margin-top: 10px;
}

@media (min-width: 1200px) {
    .banner .banner-content h1 {
        font-size: 68px;
        line-height: 90px;
    }

    .banner .banner-content h6 ~ h1 {
        margin-top: 10px;
    }

    .banner .banner-content h1 ~ p {
        margin-top: 5px;
    }
}

/* --------------------------------------------------------------------------
   3. Header — fondo oscuro porque el logotipo es blanco
   -------------------------------------------------------------------------- */
.top-bar.v2 {
    background: var(--gb-black);
}

.top-bar.v2 p,
.top-bar.v2 p a,
.top-bar.v2 .info-link .my-icon,
.top-bar.v2 .social-link a {
    color: #ffffff;
}

.top-bar.v2 p a:hover,
.top-bar.v2 .social-link a:hover {
    color: var(--gb-gold-light);
}

.menu-bar.v2 {
    background: var(--gb-dark);
}

.menu-bar.v2 .main-menu > ul > li > a {
    color: #ffffff;
}

.menu-bar.v2 .main-menu > ul > li > a:hover,
.menu-bar.v2 .main-menu ul a.active {
    color: var(--gb-gold-light);
}

.menu-bar.v2 .right-contact .text-content p {
    color: rgba(255, 255, 255, 0.7);
}

.menu-bar.v2 .right-contact .text-content h4 a {
    color: #ffffff;
}

.menu-bar.v2 .right-contact .text-content h4 a:hover {
    color: var(--gb-gold-light);
}

.menu-bar .mobile-menu-btn span {
    background: #ffffff;
}

.menu-logo a img,
.footer-logo a img {
    max-width: 210px;
    height: auto;
}

/* La plantilla limita el enlace del logo a 150px (180px desde 1400px) */
.menu-bar .menu-logo a {
    max-width: 180px;
}

.menu-bar .menu-logo a img {
    max-width: 100%;
}

@media (min-width: 1400px) {
    .menu-bar .menu-logo a {
        max-width: 215px;
    }
}

/* El menú móvil clona el logo dentro de un panel blanco: le damos fondo */
/* La plantilla pinta todo el pie con --color-black. Lo llevamos al negro puro
   para cerrar la página con el tono más oscuro de la paleta. */
.info-footer,
.footer-main {
    background: var(--gb-black);
}

.menu-bar .mobile-menu .mobile-logo {
    background: var(--gb-dark);
    padding: 14px 20px;
    border-radius: 6px;
    margin: 12px 0 12px 20px;
}

/* --------------------------------------------------------------------------
   4. Banner
   -------------------------------------------------------------------------- */
.banner.v2 {
    background-color: var(--gb-dark);
}

/* Fuera la onda dorada y los puntos de la plantilla: el hero se resuelve con
   la foto y el degradado oscuro. */
.banner.v2::after {
    display: none;
}

/* Tipografía del hero. Va antes que las medias queries de abajo: las reglas
   tienen la misma especificidad, así que manda el orden en el archivo. */
.banner.v2 .banner-left h1 {
    font-size: 52px;
    line-height: 1.08;
}

.banner.v2 .banner-left h6 {
    color: var(--gb-gold-light);
}

.banner.v2 .banner-left h1,
.banner.v2 .banner-left p {
    color: #ffffff;
}

/* El párrafo no necesita todo el ancho del titular: una medida más corta se
   lee mejor y marca la jerarquía. La plantilla además lo pegaba al titular
   (5px de separación), que con un titular grande queda apretado. */
.banner.v2 .banner-left p {
    max-width: 620px;
}

.banner.v2 .banner-left h1 ~ p {
    margin-top: 24px;
}

@media (min-width: 992px) {
    /* La foto llega hasta el borde izquierdo en vez de ocupar sólo el 70%
       derecho. */
    .banner.v2 {
        background-position: center center;
        background-size: cover;
    }

    /* La plantilla pintaba un bloque sólido de color en la mitad izquierda;
       lo cambiamos por un degradado para que la foto se vea por debajo y el
       titular siga siendo legible. Los cortes acompañan al ancho del texto:
       oscuro donde está el titular, y la foto limpia a partir del 90%. */
    .banner.v2::before {
        width: 100%;
        left: 0;
        background: linear-gradient(90deg,
            rgba(41, 37, 44, 0.97) 0%,
            rgba(41, 37, 44, 0.94) 48%,
            rgba(41, 37, 44, 0.55) 68%,
            rgba(41, 37, 44, 0) 90%);
    }

    /* La plantilla reserva al texto el 50% (y sólo el 40% desde 1200px). Con
       un claim de nueve palabras eso obliga a partirlo en cuatro líneas y a
       encoger el cuerpo, así que el hero queda apretado contra el borde
       izquierdo. Le damos bastante más sitio. */
    .banner.v2 .banner-content {
        width: 70%;
    }
}

@media (min-width: 1200px) {
    .banner.v2 .banner-content {
        width: 58%;
    }

    /* Con el bloque ancho ya cabe un titular de verdad: la plantilla usa 68px
       en este breakpoint y aquí el claim entra en tres líneas a 64px. */
    .banner.v2 .banner-left h1 {
        font-size: 64px;
    }
}

/* --------------------------------------------------------------------------
   5. Componentes propios
   -------------------------------------------------------------------------- */

/* 5.0 Tarjetas de servicio de la plantilla: alto uniforme e imágenes
   recortadas a una misma proporción (las nuestras vienen de orígenes
   distintos y sin esto la fila queda desalineada). */
.services.v2 .row > [class*="col-"] {
    display: flex;
}

.services.v2 .row > [class*="col-"] {
    margin-bottom: 30px;
}

.services.v2 .services-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: 0;
}

.services.v2 .services-card .services-img {
    aspect-ratio: 16 / 11;
    overflow: hidden;
}

.services.v2 .services-card .services-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.services.v2 .services-card > p:last-child {
    margin-top: auto;
}

/* Tarjetas de proceso (servicios y metodología) también a la misma altura */
.our-simple-step .row > [class*="col-"] {
    display: flex;
}

.our-simple-step .process-card {
    width: 100%;
}

/* La plantilla separa las filas con un margin-top: 30px en la tarjeta y lo va
   anulando elemento por elemento según el breakpoint: el primero siempre, el
   segundo desde 768px y el tercero desde 1200px. La regla del cuarto sólo
   existe para .our-simple-step.v1, y nuestras cuatro fases son .v2, así que la
   cuarta tarjeta se quedaba 30px más abajo y —al estirarse la columna a la
   altura de la fila— 30px más baja que las otras tres.
   Lo acotamos a .col-xl-3 (las fases de metodología y servicios); la fila de
   publicaciones usa .col-xl-4 y sí necesita ese margen para separar filas. */
@media (min-width: 1200px) {
    .our-simple-step .row > .col-xl-3:nth-child(4) .process-card {
        margin-top: 0;
    }
}

/* 5.1 Franja de cita / lema */
.gb-lema {
    padding: 70px 0;
    background: var(--gb-dark);
    text-align: center;
}

.gb-lema blockquote {
    margin: 0 auto;
    max-width: 820px;
}

.gb-lema blockquote p {
    font-family: var(--gb-titulo);
    font-size: 32px;
    font-weight: 600;
    line-height: 1.35;
    color: #ffffff;
}

.gb-lema blockquote cite {
    display: block;
    margin-top: 18px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gb-gold-light);
}

/* 5.2 Áreas de trabajo */
.gb-areas {
    padding: 100px 0;
    background: var(--gb-gray);
}

/* Ocho sectores en dos filas de cuatro, igual que los pilares. Las cuatro
   columnas solo desde 1200px: en tablet las palabras largas («Hospitalidad»)
   no caben junto al número y la rejilla se salía del contenedor. */
.gb-areas-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 45px;
}

@media (min-width: 1200px) {
    .gb-areas-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.gb-area {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    border-radius: 10px;
    background: var(--gb-dark);
    transition: transform 0.3s ease, background 0.3s ease;
}

.gb-area:hover {
    transform: translateY(-4px);
    background: var(--gb-black);
}

.gb-area .gb-area-num {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #ffffff;
    font-family: var(--gb-titulo);
    font-size: 20px;
    font-style: italic;
    font-weight: 700;
    color: var(--gb-dark);
}

.gb-area h4 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    color: #ffffff;
}

/* 5.3 Listado de normas ISO */
.gb-normas {
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.gb-normas li {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border);
}

.gb-normas li:last-child {
    border-bottom: 0;
}

.gb-normas .my-icon {
    color: var(--gb-gold);
    font-size: 20px;
    line-height: 1.4;
}

.gb-normas h4 {
    margin: 0 0 4px;
    font-size: 17px;
}

.gb-normas p {
    margin: 0;
    font-weight: 600;
    color: var(--gb-gold);
}

/* 5.35 Componentes propios dentro de la banda oscura de la plantilla
   (.company-benefits pinta fondo oscuro y texto blanco). */
.company-benefits .gb-normas li {
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

.company-benefits .gb-normas h4 {
    color: #ffffff;
}

.company-benefits .gb-normas p,
.company-benefits .gb-normas .my-icon {
    color: var(--gb-gold-light);
}

.company-benefits .gb-verdes-lista li {
    border-color: rgba(255, 255, 255, 0.35);
    color: #ffffff;
}

/* Las fotos de sección vienen en proporciones muy distintas (algunas
   verticales); las acotamos para que no dominen el bloque. */
.company-benefits .box-img img,
.gb-areas .box-img img {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    border-radius: 12px;
}

/* Diagramas y mapas: se muestran completos, sin recorte. */
.box-img img.es-contenida {
    object-fit: contain;
    background: transparent;
}

/* La plantilla dibuja un rectángulo claro de 50vw justo debajo de la imagen
   (.box-img::before). Tiene sentido en su diseño original, donde la foto se
   sale por el borde derecho y ese bloque le hace de base; aquí, con la imagen
   contenida dentro de la columna, queda un recuadro blanco suelto tapando el
   cuarto inferior derecho de la banda oscura. Lo quitamos. */
.company-benefits .box-img::before {
    display: none;
}

/* El mapa de presencia es marcadamente vertical (630×910) y viene con fondo
   transparente. Con el max-height general de la banda (520px) se quedaba
   pequeño y con mucho aire a los lados, así que lo dimensionamos por altura y
   lo centramos en su columna. */
.gb-presencia .box-img img.es-contenida {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 730px;
    margin: 0 auto;
}

/* 5.4 Tecnologías verdes */
.gb-verdes {
    padding: 100px 0;
}

.gb-verdes .gb-verdes-img {
    margin-top: 35px;
}

.gb-verdes .gb-verdes-img img {
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.gb-verdes-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 25px 0 0;
    padding: 0;
    list-style: none;
}

.gb-verdes-lista li {
    padding: 10px 18px;
    border: 1px solid var(--gb-gold);
    border-radius: 40px;
    font-weight: 600;
    color: var(--gb-dark);
}

/* 5.5 Tarjetas de capacitación / publicación */
.gb-card {
    height: 100%;
    overflow: hidden;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gb-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14);
}

/* Las filas de tarjetas se estiran para que todas midan lo mismo y el CTA
   quede alineado abajo, sin importar el largo del texto. */
.row > [class*="col-"] > .gb-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.gb-card .gb-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.gb-card .gb-card-body > .link-anime:last-child {
    margin-top: auto;
    align-self: flex-start;
}

.gb-card-img {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.gb-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Los afiches de conferencias son cuadrados (ocho de los diez son 1:1 exactos;
   dos vienen en 4:5). Antes iban contenidos dentro de un marco 4:3, que les
   dejaba bandas grises a los lados. Con el marco cuadrado los ocho encajan al
   milímetro sin perder nada, y sólo los dos verticales se recortan por arriba
   y por abajo, repartido a partes iguales. */
.gb-card-img.es-afiche {
    aspect-ratio: 1 / 1;
}

/* Los afiches verticales (4:5) se recortan desde arriba: ahí van el nombre
   del evento y la fecha; abajo suelen quedar los patrocinadores. A los
   cuadrados no les afecta. */
.gb-card-img.es-afiche img {
    object-fit: cover;
    object-position: center top;
}

.gb-card-body {
    padding: 28px;
}

.gb-card-body h4 {
    margin: 0 0 12px;
    font-size: 22px;
    color: var(--gb-dark);
}

.gb-card-meta {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gb-gold);
}

.gb-card-temas {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.gb-card-temas li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 8px;
}

.gb-card-temas li::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gb-gold);
}

/* 5.55 Pilares de excelencia operacional */
/* Ocho pilares en dos filas de cuatro. */
.gb-pilares {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 50px;
}

@media (min-width: 768px) {
    .gb-pilares {
        grid-template-columns: repeat(4, 1fr);
    }
}

.gb-pilar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 32px 22px;
    text-align: center;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: #ffffff;
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.gb-pilar:hover {
    transform: translateY(-4px);
    border-color: var(--gb-gold);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.1);
}

.gb-pilar .my-icon {
    font-size: 40px;
    line-height: 1;
    color: var(--gb-gold);
}

.gb-pilar h4 {
    margin: 0;
    font-size: 17px;
    line-height: 1.35;
    color: var(--gb-dark);
}

/* En teléfonos de 320–400px las palabras largas no cabían en media columna */
@media (max-width: 400px) {
    .gb-pilar {
        padding: 26px 12px;
    }

    .gb-pilar h4 {
        font-size: 15px;
    }
}

/* 5.56 Clientes de referencia */
.gb-clientes {
    padding: 100px 0;
}

.gb-clientes-slider {
    margin-top: 50px;
}

/* Swiper iguala la altura de las diapositivas al alto del contenedor; aquí
   queremos lo contrario: que la tarjeta mida lo que mide y todas se estiren
   por igual, porque los nombres ocupan una o dos líneas. */
.gb-clientes-slider .swiper-slide {
    height: auto;
}

/* El avance es continuo (autoplay con delay 0), así que la transición no puede
   acelerar y frenar en cada paso: tiene que ser lineal o se nota el tirón. */
.gb-clientes-slider .swiper-wrapper {
    transition-timing-function: linear;
}

.gb-cliente {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 30px 22px 26px;
    text-align: center;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: #ffffff;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.gb-cliente:hover {
    border-color: var(--gb-gold);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.1);
}

/* Los logotipos vienen recortados a su contenido, sin márgenes, y cada marca
   tiene su proporción: la caja es apaisada para que los logos alargados usen
   el ancho de la tarjeta, y object-fit los encaja sin deformarlos. No subir de
   170px: los archivos de origen miden 150px de ancho y se verían borrosos. */
.gb-cliente img {
    width: 100%;
    max-width: 170px;
    height: 110px;
    margin-bottom: 18px;
    object-fit: contain;
}

.gb-cliente figcaption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.gb-cliente h4 {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    color: var(--gb-dark);
}

.gb-cliente-pais {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gb-gold);
}

/* 5.57 Perfil de la fundadora */
.gb-perfil-foto {
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16);
}

.gb-perfil-foto img {
    display: block;
    width: 100%;
    height: auto;
}

.gb-perfil-texto {
    padding-left: 10px;
}

.gb-perfil-texto p {
    margin-bottom: 14px;
}

@media (max-width: 991px) {
    .gb-perfil-texto {
        margin-top: 35px;
        padding-left: 0;
    }
}

/* 5.6 Bloque de objetivo */
.gb-objetivo {
    padding: 90px 0;
    background: var(--gb-gold);
}

.gb-objetivo .gb-objetivo-box {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.gb-objetivo h6 {
    margin-bottom: 14px;
    font-family: var(--gb-titulo);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gb-dark);
}

.gb-objetivo p {
    font-family: var(--gb-titulo);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.45;
    color: #ffffff;
}

/* 5.7 Footer */

/* Filete dorado bajo los tres titulares de columna. */
.info-footer .our-link > h4,
.info-footer .news-letter > h4 {
    position: relative;
    padding-bottom: 14px;
}

.info-footer .our-link > h4::after,
.info-footer .news-letter > h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 46px;
    height: 3px;
    border-radius: 2px;
    background: var(--gb-gold);
}

/* Triangulito dorado como viñeta de cada enlace. El padding-left mantiene
   alineadas las líneas de los títulos de servicio que ocupan dos renglones. */
.info-footer .our-link li {
    position: relative;
    padding-left: 18px;
}

.info-footer .our-link li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid var(--gb-gold);
    transition: border-left-color 0.3s ease, transform 0.3s ease;
}

.info-footer .our-link li:hover::before {
    border-left-color: var(--gb-gold-light);
    transform: translateX(3px);
}

.footer-contacto {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-contacto li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.75);
}

.footer-contacto li .my-icon {
    color: var(--gb-gold);
}

.footer-contacto li a {
    color: rgba(255, 255, 255, 0.75);
}

.footer-contacto li a:hover {
    color: var(--gb-gold-light);
}

/* 5.8 Formulario compartido
   La plantilla traía dos marcados distintos (talk-to-us y contact-form con
   .input-box). Usamos un único partial, así que damos estilo aquí al marcado
   simple cuando vive dentro de .contact-form. */
.gb-form .group-box {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.gb-form .group-box > .gb-par {
    display: flex;
    flex-direction: column;
    flex: 1 1 200px;
    min-width: 0;
}

/* Espaciado uniforme entre campos (la plantilla sólo contemplaba input~input) */
.talk-to-us .right-content form .group-box ~ input,
.talk-to-us .right-content form .group-box ~ textarea {
    margin-top: 20px;
}

.contact-us .contact-form .gb-form input,
.contact-us .contact-form .gb-form textarea {
    width: 100%;
    height: 60px;
    padding: 0 20px;
    margin-bottom: 20px;
    font-size: 16px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background: #ffffff;
}

.contact-us .contact-form .gb-form input:focus,
.contact-us .contact-form .gb-form textarea:focus {
    outline: none;
    border-color: var(--gb-gold);
}

.contact-us .contact-form .gb-form .group-box > .gb-par > input {
    /* El margen lo pone .gb-par: si lo llevara el input, el mensaje de error
       caería 20px por debajo y parecería de otro campo. */
    margin-bottom: 0;
}

.contact-us .contact-form .gb-form .group-box > .gb-par {
    margin-bottom: 20px;
}

.contact-us .contact-form .gb-form textarea {
    height: 150px;
    padding: 20px;
}

.contact-us .contact-form .gb-form .btn-anime {
    width: 100%;
    color: var(--gb-dark);
}

.contact-us .contact-form .gb-form .btn-anime:hover {
    color: #ffffff;
}

/* La honeypot no debe ocupar espacio ni recibir estilos del formulario */
.gb-form input[name="sitio_web"] {
    display: none !important;
}

/* 5.8.1 Formulario de la home
   Va sobre fondo claro para no confundirse con la franja de CTA y el footer,
   que son oscuros. Reutiliza .contact-us .contact-form (los campos quedan
   idénticos a los de la página de contacto) y ocupa todo el contenedor, con
   los campos repartidos en dos columnas para que no se estiren.

   El fondo de la sección es la foto de rascacielos (la pone bgImg() de la
   plantilla desde data-background). El gris se queda como color de respaldo:
   el promedio de la imagen es #eef3f8, casi el mismo tono, así que no se nota
   el cambio mientras carga ni si el JS no llega a correr. */
.gb-contacto-home {
    padding: 100px 0;
    background-color: var(--gb-gray);
}

/* Sobre el gris plano la tarjeta blanca se distinguía sola; sobre una foto
   casi blanca se fundiría con el fondo, así que la levantamos con sombra. */
.gb-contacto-home .contact-form {
    margin-top: 45px;
    padding: 45px 50px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.12);
}

.gb-contacto-home .gb-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 20px;
    /* Sólo queda una fila con dos controles distintos (botón y nota legal):
       los alineamos por abajo. */
    align-items: end;
}

/* El motivo es el único campo con etiqueta encima: si comparte fila con un
   input sin etiqueta queda descuadrado (el input se hunde 27px). Va a ancho
   completo, igual que el nombre, y las parejas las forman los .group-box. */
.gb-contacto-home .gb-form .gb-campo,
.gb-contacto-home .gb-form input[name="nombre"] {
    grid-column: 1 / -1;
}

.gb-contacto-home .gb-form .gb-campo {
    margin-bottom: 20px;
}

.gb-contacto-home .gb-form input,
.gb-contacto-home .gb-form textarea {
    margin-bottom: 0;
}

.gb-contacto-home .gb-form .group-box,
.gb-contacto-home .gb-form textarea,
.gb-contacto-home .gb-form > .gb-error {
    grid-column: 1 / -1;
}

/* En la rejilla el hueco entre filas lo pone el gap, no los márgenes. */
.gb-contacto-home .gb-form > .gb-error {
    margin: 0;
}

.gb-contacto-home .gb-form .btn-anime {
    width: auto;
    min-width: 240px;
    justify-self: start;
}

.gb-contacto-home .gb-form .gb-form-nota {
    margin-top: 0;
    align-self: center;
}

@media (max-width: 767px) {
    .gb-contacto-home {
        padding: 70px 0;
    }

    .gb-contacto-home .contact-form {
        padding: 30px 22px;
    }

    .gb-contacto-home .gb-form {
        grid-template-columns: 1fr;
    }

    .gb-contacto-home .gb-form .btn-anime {
        width: 100%;
    }
}

/* 5.9 Datos de contacto (página contacto)
   El formulario ocupa el lugar donde la plantilla ponía el mapa, así que hereda
   su ancho de columna. */
.gb-contacto-datos li a {
    word-break: break-word;
}

@media (min-width: 1200px) {
    .contact-us .contact-info-map > .contact-form {
        width: calc(70% - 15px);
        margin-top: 0;
    }
}

/* --------------------------------------------------------------------------
   6. Capa comercial (estrategia de contenidos 2026)

   Componentes que convierten el sitio de informativo a comercial: propuesta
   de valor, bloque de costo de la ineficiencia, servicios en detalle,
   diferenciadores, casos, metodología OPPERA y llamados a la acción.
   -------------------------------------------------------------------------- */

/* 6.1 CTA dentro del menú
   Vive como <li> del <ul> porque el menú móvil se construye clonando el HTML
   de .main-menu; así aparece también en el panel lateral. */
.menu-bar.v2 .main-menu > ul > li.gb-menu-cta > a {
    padding: 12px 22px;
    border-radius: 6px;
    background: var(--gb-gold);
    color: #FFF;
    font-weight: 700;
    white-space: nowrap;
}

.menu-bar.v2 .main-menu > ul > li.gb-menu-cta > a:hover {
    background: var(--gb-gold-light);
    color: var(--gb-dark);
}

.mobile-menu .gb-menu-cta a {
    display: inline-block;
    margin-top: 10px;
    padding: 12px 22px;
    border-radius: 6px;
    background: var(--gb-gold);
    color: var(--gb-dark);
    font-weight: 700;
}

/* 6.2 CTA del banner */
.gb-banner-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 30px;
}

.gb-banner-cta li {
    list-style: none;
}

/* 6.3 Botones

   La plantilla declara .btn-anime con padding pero sin `display`. Le bastaba
   porque sólo lo usaba en <button> (que ya es inline-block). Nosotros lo usamos
   en <a> para los CTA: como enlace queda `inline`, el padding vertical no ocupa
   espacio y el botón se monta sobre el texto de al lado. */
a.btn-anime {
    display: inline-block;
    text-align: center;
    line-height: 1.4;
}

/* Las etiquetas de CTA son largas ("Solicitar una Evaluación Estratégica
   Operativa"). En mayúsculas y con el espaciado de la plantilla se iban de
   ancho; lo reducimos para que quepan en una o dos líneas. */
.btn-anime,
.link-anime {
    letter-spacing: 0.5px;
}

/* Cuando un botón envuelve a dos líneas, el padding vertical original (23.2px)
   lo deja desproporcionado. */
a.btn-anime {
    padding-top: 19px;
    padding-bottom: 19px;
}

/* Enlace claro sobre fondo oscuro (hero y bandas oscuras), como alternativa al
   segundo botón sólido: dos bloques dorados juntos compiten entre sí. */
.gb-link-claro {
    display: inline-block;
    padding-bottom: 3px;
    font-weight: 600;
    color: #ffffff;
    border-bottom: 2px solid var(--gb-gold);
    transition: color 0.25s ease, border-color 0.25s ease;
}

.gb-link-claro:hover {
    color: var(--gb-gold-light);
    border-color: rgba(255, 255, 255, 0.6);
}

/* 6.3.1 Enlace de acción secundaria (acompaña siempre a un botón sólido) */
.gb-cta-alt {
    display: inline-block;
    font-weight: 600;
    color: var(--gb-dark);
    border-bottom: 2px solid var(--gb-gold);
    padding-bottom: 2px;
    transition: color 0.25s ease, border-color 0.25s ease;
}

.gb-cta-alt:hover {
    color: var(--gb-gold);
    border-color: var(--gb-dark);
}

.gb-servicio-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    margin-top: 28px;
}

/* 6.4 Propuesta de valor: qué / cómo / para qué */
.gb-propuesta {
    padding: 80px 0;
    background: var(--gb-dark);
}

.gb-propuesta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.gb-propuesta-item {
    padding-left: 22px;
    border-left: 3px solid var(--gb-gold);
}

.gb-propuesta-eti {
    display: block;
    margin-bottom: 12px;
    font-family: var(--gb-titulo);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gb-gold-light);
}

.gb-propuesta-item p {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
}

/* En la home: OPPERA® y su alcance, centrado */
.gb-propuesta-resumen {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    font-family: var(--gb-titulo);
    font-size: 24px;
    line-height: 1.5;
    color: #ffffff;
}

.gb-propuesta-resumen p {
    margin: 0;
    font: inherit;
    color: inherit;
    text-wrap: balance; /* sin palabras sueltas en la última línea */
}

.gb-propuesta-resumen p + p {
    margin-top: 22px;
}

.gb-propuesta-letras {
    font-weight: 700;
    color: var(--gb-gold-light);
}

/* 6.5 El costo de una operación ineficiente */
.gb-dolor {
    padding: 100px 0;
    background: var(--gb-gray);
}

/* Son seis síntomas: con auto-fit entraban cuatro por fila y la segunda
   quedaba coja (4+2). Fijamos tres columnas para que salgan 3+3.

   grid-auto-rows: 1fr iguala la altura de todas las filas, no sólo la de las
   tarjetas dentro de una misma fila (eso ya lo hacía el stretch por defecto):
   los seis bloques miden lo que el de texto más largo. */
.gb-dolor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 22px;
    margin-top: 50px;
}

.gb-dolor-item {
    padding: 28px;
    border-radius: 12px;
    background: #ffffff;
    border-top: 4px solid var(--gb-gold);
}

.gb-dolor-item h4 {
    margin: 0 0 10px;
    font-size: 19px;
    line-height: 1.3;
    color: var(--gb-dark);
}

.gb-dolor-item p {
    margin: 0;
    font-size: 15px;
}

/* Versión de la home: solo títulos */
.gb-dolor-grid.es-compacta .gb-dolor-item {
    padding: 22px 26px;
}

.gb-dolor-grid.es-compacta .gb-dolor-item h4 {
    margin: 0;
}

/* El cierre del bloque es una franja horizontal, no un remate de párrafos:
   a la izquierda las tres frases en columnas, a la derecha la pregunta y el
   botón. Repite la lógica de .gb-cta-box pero sobre fondo oscuro propio. */
.gb-dolor-cierre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 44px;
    margin-top: 55px;
    padding: 44px 48px;
    border-radius: 14px;
    background: var(--gb-dark);
}

.gb-dolor-cierre-lineas {
    flex: 1 1 520px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.gb-dolor-cierre-lineas p {
    margin: 0;
    padding-top: 16px;
    border-top: 2px solid var(--gb-gold);
    font-family: var(--gb-titulo);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.92);
}

.gb-dolor-cierre-accion {
    flex: 1 1 300px;
    padding-left: 44px;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.gb-dolor-cierre-accion h3 {
    margin: 0 0 22px;
    font-size: 26px;
    line-height: 1.3;
    color: var(--gb-gold-light);
}

.gb-dolor-cierre-accion .btn-anime {
    width: 100%;
}

/* 6.6 Tarjetas de servicio de la home */
.gb-servicios-home {
    padding: 100px 0;
}

.gb-servicios-home .row > [class*="col-"] {
    display: flex;
}

.gb-servicio-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 34px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid var(--color-border);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.gb-servicio-card:hover {
    transform: translateY(-6px);
    border-color: var(--gb-gold);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.12);
}

.gb-servicio-icono .my-icon {
    font-size: 42px;
    line-height: 1;
    color: var(--gb-gold);
    margin-bottom: 18px;
}

.gb-servicio-card h4 {
    margin: 0 0 12px;
    font-size: 23px;
    color: var(--gb-dark);
}

.gb-servicio-gancho {
    font-family: var(--gb-titulo);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--gb-dark);
}

.gb-servicio-card .gb-servicio-acciones {
    margin-top: auto;
    padding-top: 22px;
}

/* Tarjeta de la home: cuatro por fila, sin texto largo */
.gb-servicio-card.es-compacta {
    padding: 28px 24px;
}

.gb-servicio-card.es-compacta h4 {
    font-size: 20px;
    line-height: 1.3;
}

.gb-servicio-card.es-compacta .gb-servicio-gancho {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
}

/* 6.7 Diferenciadores */
/* grid-auto-rows: 1fr iguala también las filas entre sí: el estirado por
   defecto sólo empareja las tarjetas de una misma fila. */
.gb-difs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-auto-rows: 1fr;
    gap: 24px;
    margin-top: 50px;
}

/* Por debajo de 768px el contenedor ya no da para dos columnas y la rejilla
   cae a una: ahí igualar alturas sólo añadiría hueco vacío. */
@media (max-width: 767px) {
    .gb-difs-grid {
        grid-auto-rows: auto;
    }
}

/* Home: solo títulos, 4+4 */
.gb-difs-grid.es-compacta {
    grid-template-columns: repeat(4, 1fr);
}

.gb-difs-grid.es-compacta .gb-dif {
    padding: 26px 24px;
}

.gb-difs-grid.es-compacta .gb-dif h4 {
    margin: 0;
}

@media (max-width: 991px) {
    .gb-difs-grid.es-compacta {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .gb-difs-grid.es-compacta {
        grid-template-columns: 1fr;
    }
}

.gb-dif {
    padding: 30px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid var(--color-border);
}

.gb-dif .my-icon {
    font-size: 38px;
    line-height: 1;
    color: var(--gb-gold);
    margin-bottom: 16px;
}

.gb-dif h4 {
    margin: 0 0 10px;
    font-size: 19px;
    line-height: 1.3;
    color: var(--gb-dark);
}

.gb-dif p {
    margin: 0;
    font-size: 15px;
}

/* 6.8 Beneficios y resultados esperados
   grid-auto-rows: 1fr iguala también las filas entre sí: sin eso, el estirado
   por defecto sólo empareja las tarjetas de una misma fila y las dos filas
   quedan de distinto alto según lo largo de sus textos. */
.gb-beneficios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-auto-rows: 1fr;
    gap: 22px;
    margin-top: 50px;
}

/* Por debajo de 768px el contenedor ya no da para dos columnas y la rejilla
   cae a una: ahí igualar alturas sólo añadiría hueco vacío. */
@media (max-width: 767px) {
    .gb-beneficios-grid {
        grid-auto-rows: auto;
    }
}

/* Variante de tres columnas. La misma rejilla sirve para los ocho beneficios
   del home (que deben quedar 4+4) y para los seis logros de OPPERA® en
   metodología, donde auto-fit metía cuatro y dejaba la segunda fila coja. */
.gb-beneficios-grid.es-tres-columnas {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 991px) {
    .gb-beneficios-grid.es-tres-columnas {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Esta variante sigue teniendo dos columnas por debajo de 768px, así que aquí
   sí conviene igualar alturas (la regla de arriba las suelta a esa anchura). */
@media (max-width: 767px) {
    .gb-beneficios-grid.es-tres-columnas {
        grid-auto-rows: 1fr;
    }
}

@media (max-width: 575px) {
    .gb-beneficios-grid.es-tres-columnas {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }
}

.gb-beneficio {
    display: flex;
    gap: 16px;
    padding: 24px 26px;
    border-radius: 12px;
    background: #ffffff;
}

.gb-beneficio .my-icon {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1.5;
    color: var(--gb-gold);
}

.gb-beneficio h4 {
    margin: 0 0 6px;
    font-size: 18px;
    line-height: 1.35;
    color: var(--gb-dark);
}

.gb-beneficio p {
    margin: 0;
    font-size: 15px;
}

/* 6.9 Casos de aplicación */
.gb-casos {
    padding: 100px 0;
}

.gb-casos .row > [class*="col-"] {
    display: flex;
}

.gb-caso {
    width: 100%;
    padding: 32px;
    border-radius: 12px;
    background: var(--gb-gray);
    border-left: 4px solid var(--gb-gold);
}

.gb-caso .my-icon {
    font-size: 36px;
    line-height: 1;
    color: var(--gb-gold);
    margin-bottom: 14px;
}

.gb-caso h4 {
    margin: 0 0 16px;
    font-size: 20px;
    color: var(--gb-dark);
}

.gb-caso p {
    font-size: 15px;
}

.gb-caso-etiqueta {
    margin: 16px 0 4px;
    font-size: 12px !important;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gb-gold);
}

/* 6.10 Sectores: ahora cada uno lleva una línea de contexto */
.gb-area p {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.75);
}

.gb-area {
    align-items: flex-start;
}

.gb-area .gb-area-num {
    margin-top: 2px;
}

/* 6.11 Introducción de página + índice de anclas */
.gb-servicios-intro {
    padding: 90px 0 60px;
}

.gb-indice {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}

.gb-indice a {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid var(--color-border);
    border-radius: 40px;
    font-size: 15px;
    font-weight: 600;
    color: var(--gb-dark);
    transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.gb-indice a:hover {
    border-color: var(--gb-gold);
    background: var(--gb-gold);
    color: var(--gb-dark);
}

/* 6.12 Servicio en detalle
   Las anclas necesitan margen superior: el header es fijo y taparía el título. */
.gb-servicio-detalle,
.gb-post {
    padding: 90px 0;
    scroll-margin-top: 120px;
}

.gb-servicio-detalle.es-alterno,
.gb-post.es-alterno {
    background: var(--gb-gray);
}

.gb-servicio-foto,
.gb-post-foto {
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14);
}

.gb-servicio-foto img,
.gb-post-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Los diagramas se muestran completos y sobre fondo blanco */
.gb-post-foto.es-diagrama {
    background: #ffffff;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.10);
}

.gb-post-foto.es-diagrama img {
    object-fit: contain;
    max-height: none;
}

.gb-servicio-texto,
.gb-post-texto {
    padding-left: 20px;
}

.gb-servicio-texto h2,
.gb-post-texto h2 {
    margin: 0 0 14px;
    font-size: 34px;
    line-height: 1.2;
    color: var(--gb-dark);
}

.gb-servicio-texto h5,
.gb-post-texto h5 {
    margin: 26px 0 4px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gb-gold);
}

.gb-servicio-problema {
    margin: 22px 0;
    padding: 20px 24px;
    border-left: 4px solid var(--gb-gold);
    background: rgba(171, 131, 32, 0.09);
}

.gb-servicio-problema span {
    display: block;
    margin-bottom: 6px;
    font-family: var(--gb-titulo);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gb-dark);
}

.gb-servicio-problema p {
    margin: 0;
    font-weight: 600;
    color: var(--gb-dark);
}

.gb-post-entrada {
    font-family: var(--gb-titulo);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--gb-dark);
}

/* Lista de resultados esperados */
.gb-resultados {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.gb-resultados li {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
    line-height: 1.5;
}

.gb-resultados .my-icon {
    flex: 0 0 auto;
    font-size: 16px;
    line-height: 1.6;
    color: var(--gb-gold);
}

/* 6.13 Metodología OPPERA */
.gb-oppera {
    padding: 100px 0;
    background: var(--gb-gray);
}

/* Son seis dimensiones: con auto-fit entraban cuatro por fila y la segunda
   quedaba coja (4+2). Fijamos tres columnas para que salgan 3+3. */
.gb-oppera-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 22px;
    margin-top: 50px;
}

@media (max-width: 991px) {
    .gb-oppera-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* En una sola columna igualar alturas sólo añadiría hueco vacío. */
@media (max-width: 575px) {
    .gb-oppera-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }
}

.gb-oppera-item {
    position: relative;
    padding: 30px 30px 30px 84px;
    border-radius: 12px;
    background: #ffffff;
}

.gb-oppera-letra {
    position: absolute;
    top: 26px;
    left: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--gb-dark);
    font-family: var(--gb-titulo);
    font-size: 20px;
    font-weight: 700;
    color: var(--gb-gold-light);
}

.gb-oppera-item h4 {
    margin: 0 0 8px;
    font-size: 19px;
    color: var(--gb-dark);
}

.gb-oppera-item p {
    margin: 0;
    font-size: 15px;
}

/* Pentágono de estandarización (home, banda oscura). Sustituye a la
   diapositiva en PNG: las porciones son dorado translúcido sobre el gris de
   la banda. Cada número abre su tarjeta al pasar el cursor, al tocarlo o al
   enfocarlo con el teclado. */
.gb-pentagono {
    margin: 30px 0 0;
}

/* El lienzo mide lo mismo que el SVG, así las tarjetas se colocan en % sobre
   las mismas coordenadas que los números. */
.gb-pentagono-lienzo {
    position: relative;
    max-width: 380px;
    margin: 0 auto;
}

.gb-pentagono svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.gb-pentagono-seg {
    cursor: pointer;
    outline: none;
}

.gb-pentagono-seg polygon {
    fill: url(#gb-pentagono-luz);
    stroke: var(--gb-dark);
    stroke-width: 5;
    stroke-linejoin: round;
    transition: fill 0.3s ease;
}

.gb-pentagono-luz-centro {
    stop-color: var(--gb-gold);
    stop-opacity: 0.08;
}

.gb-pentagono-luz-borde {
    stop-color: var(--gb-gold);
    stop-opacity: 0.42;
}

/* Filo dorado por fuera, a medio trazo de distancia de las porciones. */
.gb-pentagono-contorno {
    fill: none;
    stroke: var(--gb-gold);
    stroke-width: 1.5;
    stroke-linejoin: round;
    transform: scale(1.05);
    transform-origin: 200px 210px;
    opacity: 0.6;
}

.gb-pentagono-seg text {
    font-family: var(--gb-titulo);
    font-size: 22px;
    font-weight: 700;
    fill: var(--gb-gold-light);
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
    transition: fill 0.3s ease;
}

.gb-pentagono-seg:hover polygon,
.gb-pentagono-seg:focus polygon {
    fill: var(--gb-gold);
}

.gb-pentagono-seg:hover text,
.gb-pentagono-seg:focus text {
    fill: var(--gb-dark);
}

.gb-pentagono-nucleo {
    fill: var(--gb-dark);
    stroke: var(--gb-gold);
    stroke-width: 2;
    pointer-events: none;
}

.gb-pentagono-marca {
    font-family: var(--gb-titulo);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.5px;
    fill: #ffffff;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}

/* Tarjeta: cuelga encima de su número. Oculta con opacidad (no con
   display/visibility) para que los lectores de pantalla la sigan leyendo. */
.gb-pentagono-tarjeta {
    --desplazar: -50%;
    --flecha: 50%;
    position: absolute;
    z-index: 3;
    width: 250px;
    padding: 16px 18px;
    border: 1px solid var(--gb-gold);
    border-radius: 10px;
    background: var(--gb-black);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transform: translate(var(--desplazar), calc(-100% - 30px)) translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.gb-pentagono-tarjeta.es-izq {
    --desplazar: -22%;
    --flecha: 22%;
}

.gb-pentagono-tarjeta.es-der {
    --desplazar: -78%;
    --flecha: 78%;
}

.gb-pentagono-tarjeta::after {
    position: absolute;
    bottom: -7px;
    left: var(--flecha);
    width: 12px;
    height: 12px;
    margin-left: -6px;
    border-right: 1px solid var(--gb-gold);
    border-bottom: 1px solid var(--gb-gold);
    background: var(--gb-black);
    transform: rotate(45deg);
    content: "";
}

.gb-pentagono:has(.gb-pentagono-seg[data-n="1"]:is(:hover, :focus)) .gb-pentagono-tarjeta[data-n="1"],
.gb-pentagono:has(.gb-pentagono-seg[data-n="2"]:is(:hover, :focus)) .gb-pentagono-tarjeta[data-n="2"],
.gb-pentagono:has(.gb-pentagono-seg[data-n="3"]:is(:hover, :focus)) .gb-pentagono-tarjeta[data-n="3"],
.gb-pentagono:has(.gb-pentagono-seg[data-n="4"]:is(:hover, :focus)) .gb-pentagono-tarjeta[data-n="4"],
.gb-pentagono:has(.gb-pentagono-seg[data-n="5"]:is(:hover, :focus)) .gb-pentagono-tarjeta[data-n="5"] {
    opacity: 1;
    transform: translate(var(--desplazar), calc(-100% - 30px));
}

.gb-pentagono-num {
    display: block;
    margin-bottom: 4px;
    font-family: var(--gb-titulo);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--gb-gold-light);
}

.gb-pentagono-tarjeta h4 {
    margin: 0 0 6px;
    font-size: 16px;
    line-height: 1.3;
    color: #ffffff;
}

.gb-pentagono-tarjeta p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
}

.gb-pentagono figcaption {
    margin: 18px 0 0;
    font-family: var(--gb-titulo);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
    color: var(--gb-gold-light);
}

.gb-pentagono figcaption span {
    display: block;
    margin-top: 6px;
    font-family: var(--gb-texto);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255, 255, 255, 0.55);
}

/* Numeración del framework de transformación */
.gb-paso-num {
    flex: 0 0 auto;
    font-family: var(--gb-titulo);
    font-size: 18px;
    font-weight: 700;
    font-style: italic;
    color: var(--gb-gold);
}

/* 6.14 Franja de llamado a la acción */
.gb-cta {
    padding: 80px 0;
    background: var(--gb-dark);
}

.gb-cta-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
}

.gb-cta-texto {
    flex: 1 1 420px;
}

/* La plantilla sólo pone font-weight: 700 a los h2 que viven dentro de
   .section-title, así que este heredaba el 400 del body y se leía como un
   párrafo grande. Lo alineamos con los titulares de sección (Montserrat 700,
   interlineado corto) y separamos el párrafo de apoyo, que baja a 16px y
   pierde algo de contraste para que la jerarquía se vea. */
.gb-cta-texto h2 {
    margin: 0 0 14px;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
}

.gb-cta-texto p {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.72);
}

.gb-cta-acciones {
    flex: 0 1 380px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

/* La etiqueta completa del CTA no cabe en una línea de 380px: en lugar de
   dejarla desbordar, el botón ocupa toda la columna y centra el texto. */
.gb-cta-acciones .btn-anime {
    width: 100%;
}

.gb-cta .gb-cta-alt {
    color: #ffffff;
}

.gb-cta .gb-cta-alt:hover {
    color: var(--gb-gold-light);
    border-color: rgba(255, 255, 255, 0.5);
}

.gb-cta-directo {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.65);
}

.gb-cta-directo a {
    color: var(--gb-gold-light);
}

.gb-cta-directo a:hover {
    color: #ffffff;
}

/* 6.15 Vías de conversión (página de contacto) */
.gb-vias {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    margin-top: 45px;
}

.gb-via {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 26px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: #ffffff;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.gb-via:hover,
.gb-via.es-activa {
    transform: translateY(-4px);
    border-color: var(--gb-gold);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.1);
}

.gb-via.es-activa {
    background: rgba(171, 131, 32, 0.1);
}

.gb-via .my-icon {
    font-size: 26px;
    line-height: 1;
    color: var(--gb-gold);
}

.gb-via h4 {
    margin: 0;
    font-size: 17px;
    line-height: 1.35;
    color: var(--gb-dark);
}

/* 6.16 Perfil del curso */
.gb-curso-perfil {
    margin-top: 12px;
    font-size: 14px;
    color: var(--gb-dark);
}

/* 6.17 Formulario: motivo de contacto y nota legal */
.gb-campo {
    display: block;
    margin-bottom: 20px;
}

.gb-campo > span {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--gb-dark);
}

/* Sin appearance:none el navegador dibuja su propio control (otra tipografía,
   otra altura real, la flecha del sistema) y no cuadra con los inputs. Lo
   apagamos y repetimos el padding y el borde de la plantilla, con una flecha
   propia a la derecha. */
.gb-campo select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 60px;
    padding: 0 48px 0 20px;
    font-size: 16px;
    font-family: var(--gb-texto);
    line-height: normal;
    color: var(--gb-dark);
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23003049' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    cursor: pointer;
    text-overflow: ellipsis;
}

.gb-campo select:focus {
    outline: none;
    border-color: var(--gb-gold);
}

/* Dentro de la banda oscura de .talk-to-us.v1 el desplegable tiene que
   igualar a los inputs de la plantilla: fondo oscuro, texto claro y 65px. */
.talk-to-us.v1 .right-content .gb-campo > span {
    color: rgba(255, 255, 255, 0.8);
}

.talk-to-us .right-content .gb-campo select {
    height: 65px;
}

.talk-to-us.v1 .right-content .gb-campo select {
    color: #ffffff;
    border: 1px solid #4a454f;
    background-color: var(--gb-dark);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.talk-to-us.v1 .right-content .gb-campo select option {
    color: var(--gb-dark);
    background: #ffffff;
}

.talk-to-us.v1 .right-content .gb-form-nota {
    color: rgba(255, 255, 255, 0.7);
}

.gb-form-nota {
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.6;
    opacity: 0.75;
}

/* 6.18 Footer: lista de llamados a la acción */
.footer-ctas {
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.footer-ctas li {
    margin-bottom: 10px;
}

.footer-ctas a {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.8);
}

.footer-ctas a:hover {
    color: var(--gb-gold-light);
}

.footer-ctas .my-icon {
    color: var(--gb-gold);
}

/* 6.19 Aliados estratégicos
   Los cuatro logotipos vienen en lienzos de 250x140 pero cada marca ocupa una
   proporción distinta del suyo: la altura fija más object-fit los deja
   ópticamente del mismo tamaño sin deformarlos. Van a color; son marcas
   ajenas y no se les cambia el tono. La sección queda sobre el gris claro
   porque arriba (casos de aplicación) y abajo (franja de CTA) el fondo es
   blanco y oscuro respectivamente. */
.gb-aliados {
    padding: 100px 0;
    background: var(--gb-gray);
}

.gb-aliados-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin: 50px 0 0;
    padding: 0;
    list-style: none;
}

.gb-aliado {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 132px;
    padding: 26px 24px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: #ffffff;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.gb-aliado:hover {
    border-color: var(--gb-gold);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.1);
}

.gb-aliado img {
    width: 100%;
    max-width: 190px;
    height: 66px;
    object-fit: contain;
}

/* --------------------------------------------------------------------------
   7. Responsive
   -------------------------------------------------------------------------- */
/* El menú tiene siete entradas más el botón de CTA. Desde 1200px caben en una
   línea junto al logo; entre 992 y 1199px el contenedor es de 960px y no: el
   logo quedaba en una fila y el menú en otra. En ese tramo (iPad horizontal,
   portátiles pequeños) se usa el menú hamburguesa, como en tablet. */
@media (min-width: 1200px) {
    .menu-bar.v2 .main-menu > ul {
        gap: 22px;
    }

    .menu-bar.v2 .main-menu > ul > li > a {
        font-size: 16px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .menu-bar {
        padding: 20px 0;
    }

    .menu-bar .main-menu {
        display: none;
    }

    .menu-bar .mobile-menu-btn {
        display: block;
    }
}

@media (max-width: 991px) {
    .gb-aliados-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gb-lema blockquote p {
        font-size: 24px;
    }

    .gb-objetivo p {
        font-size: 21px;
    }

    .gb-servicio-texto,
    .gb-post-texto {
        margin-top: 35px;
        padding-left: 0;
    }

    .gb-servicio-texto h2,
    .gb-post-texto h2 {
        font-size: 28px;
    }

    .gb-cta-texto h2 {
        font-size: 28px;
    }

    .gb-dolor-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gb-dolor-cierre {
        padding: 36px 30px;
        gap: 30px;
    }

    .gb-dolor-cierre-accion {
        padding-left: 0;
        padding-top: 30px;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.18);
    }

    .gb-dolor-cierre-accion h3 {
        font-size: 23px;
    }
}

@media (max-width: 575px) {
    .gb-aliados {
        padding: 70px 0;
    }

    .gb-aliados-grid {
        grid-template-columns: 1fr;
    }

    .gb-areas-grid {
        grid-template-columns: 1fr;
    }

    .gb-dolor-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .gb-dolor-cierre {
        padding: 30px 24px;
    }

    .gb-dolor-cierre-lineas {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .gb-lema blockquote p {
        font-size: 20px;
    }

    .gb-banner-cta,
    .gb-servicio-acciones {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* --------------------------------------------------------------------------
   9. Formulario: validación, botón de envío y avisos
   just-validate escribe el mensaje dentro del <span class="gb-error"> que
   acompaña a cada campo; SweetAlert2 se encarga del resultado del envío.
   -------------------------------------------------------------------------- */

/* 9.1 Mensaje bajo el campo */
.gb-error {
    display: block;
    margin-top: 7px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--gb-error, #c0392b);
}

/* Sin error no hay hueco: mientras está vacío el span no ocupa nada, ni
   siquiera una fila de la rejilla de la home. */
.gb-error:empty {
    display: none;
}

/* Los campos llevan 20px de margen inferior, así que un mensaje colocado
   después quedaría flotando entre dos campos y no se sabría de cuál habla.
   Cuando hay mensaje, el campo cede su margen y lo repone el mensaje. */
.gb-form input:has(+ .gb-error:not(:empty)),
.gb-form textarea:has(+ .gb-error:not(:empty)),
.gb-form .gb-par > input:has(+ .gb-error:not(:empty)) {
    margin-bottom: 0;
}

.gb-form > .gb-error {
    margin-bottom: 20px;
}

/* just-validate mete su propio contenedor; no debe añadir más separación. */
.gb-error .just-validate-error-label {
    display: block;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* 9.2 Campo inválido */
.gb-form .gb-invalido,
.contact-us .contact-form .gb-form .gb-invalido {
    border-color: var(--gb-error, #c0392b);
    background-color: #fdf6f5;
}

.gb-form .gb-invalido:focus,
.contact-us .contact-form .gb-form .gb-invalido:focus {
    border-color: var(--gb-error, #c0392b);
}

/* 9.3 Botón mientras envía */
.gb-enviar {
    position: relative;
}

.gb-enviar[disabled] {
    cursor: progress;
    opacity: 0.75;
}

.gb-enviar-spinner {
    display: none;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    vertical-align: -2px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: gb-girar 0.7s linear infinite;
}

.gb-enviar.gb-enviando .gb-enviar-spinner {
    display: inline-block;
}

@keyframes gb-girar {
    to {
        transform: rotate(360deg);
    }
}

/* Quien pide menos movimiento recibe el disco sin girar, no un botón mudo. */
@media (prefers-reduced-motion: reduce) {
    .gb-enviar-spinner {
        animation: none;
        border-top-color: currentColor;
        opacity: 0.5;
    }
}

/* 9.4 SweetAlert2 con la paleta del sitio */
.gb-swal {
    border-radius: 10px;
    border-top: 4px solid var(--gb-gold);
    font-family: var(--gb-texto);
}

.gb-swal .gb-swal-titulo {
    font-family: var(--gb-titulo);
    font-size: 22px;
    font-weight: 700;
    color: var(--gb-dark);
    text-transform: none;
}

.gb-swal .gb-swal-texto {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-gBlack);
}

.gb-swal .gb-swal-boton {
    min-width: 150px;
    padding: 13px 28px;
    border: 0;
    border-radius: 5px;
    background: var(--gb-gold);
    color: #ffffff;
    font-family: var(--gb-titulo);
    font-size: 15px;
    font-weight: 600;
    box-shadow: none;
}

.gb-swal .gb-swal-boton:hover,
.gb-swal .gb-swal-boton:focus {
    background: var(--gb-gold-light);
    box-shadow: none;
}

.gb-swal .gb-swal-boton:focus-visible {
    outline: 2px solid var(--gb-dark);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   10. Bloque destacado dentro de un servicio
   Sólo lo usa el servicio que trae la clave 'destacado' en config.php. Va en
   oscuro, al revés que el recuadro de «El problema», para que se lea como una
   pieza aparte y no como un párrafo más del servicio.
   -------------------------------------------------------------------------- */
.gb-servicio-destacado {
    margin: 30px 0;
    padding: 28px 30px;
    border-radius: 6px;
    border-top: 3px solid var(--gb-gold);
    background: var(--gb-dark);
    color: #ffffff;
}

.gb-destacado-etiqueta {
    display: block;
    margin-bottom: 10px;
    font-family: var(--gb-titulo);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gb-gold-light);
}

.gb-servicio-destacado h4 {
    margin: 0 0 14px;
    font-size: 21px;
    line-height: 1.3;
    color: #ffffff;
}

.gb-servicio-destacado p {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.82);
}

.gb-servicio-destacado ul {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.gb-servicio-destacado ul li {
    position: relative;
    padding-left: 22px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
}

/* Cuadrito dorado en vez de viñeta: la plantilla no trae un icono claro
   sobre fondo oscuro. */
.gb-servicio-destacado ul li::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    width: 7px;
    height: 7px;
    background: var(--gb-gold-light);
}

.gb-servicio-destacado > a {
    display: inline-block;
    font-family: var(--gb-titulo);
    font-size: 14px;
    font-weight: 600;
    color: var(--gb-gold-light);
    border-bottom: 1px solid rgba(201, 155, 43, 0.45);
    padding-bottom: 2px;
}

.gb-servicio-destacado > a:hover,
.gb-servicio-destacado > a:focus-visible {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

/* En la sección alterna el fondo ya es gris: el bloque sigue en oscuro, pero
   necesita separarse del borde de la caja en móvil. */
@media (max-width: 575px) {
    .gb-servicio-destacado {
        padding: 22px 20px;
    }
}

/* --------------------------------------------------------------------------
   11. Cobótica (servicios.php)
   Banda oscura entre las ocho líneas de servicio y la metodología. Va en
   oscuro a propósito: es una capacidad transversal, no un servicio más, y en
   claro se leería como el noveno de la lista.
   -------------------------------------------------------------------------- */
.gb-cobotica {
    padding: 100px 0;
    background: var(--gb-dark);
}

.gb-cobotica .section-title-center h6 {
    color: var(--gb-gold-light);
}

.gb-cobotica .section-title-center h2 {
    color: #ffffff;
}

.gb-cobotica-intro {
    max-width: 820px;
    margin: 0 auto 50px;
    text-align: center;
}

.gb-cobotica-intro p {
    margin: 0 0 16px;
    font-size: 17px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.78);
}

.gb-cobotica-intro p:last-child {
    margin-bottom: 0;
}

/* 11.1 Las cuatro tarjetas */
.gb-cobotica .row > [class*="col-"] {
    display: flex;
}

.gb-cobotica-card {
    width: 100%;
    margin-bottom: 30px;
    padding: 30px 26px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    transition: border-color 0.25s ease, background 0.25s ease;
}

.gb-cobotica-card:hover {
    border-color: rgba(201, 155, 43, 0.55);
    background: rgba(255, 255, 255, 0.07);
}

.gb-cobotica-card .my-icon {
    margin-bottom: 18px;
    font-size: 40px;
    line-height: 1;
    color: var(--gb-gold-light);
}

.gb-cobotica-card h4 {
    margin: 0 0 10px;
    font-size: 18px;
    line-height: 1.35;
    color: #ffffff;
}

.gb-cobotica-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
}

/* 11.2 Cómo lo trabajamos + aliado */
.gb-cobotica-detalle {
    margin-top: 30px;
}

/* El display:flex de 11.1 iguala la altura de las tarjetas, pero aquí ponía
   el título, el párrafo y la lista uno al lado del otro. Vuelven a apilarse. */
.gb-cobotica .gb-cobotica-detalle > [class*="col-"] {
    display: block;
}

@media (min-width: 992px) {
    .gb-cobotica-detalle > [class*="col-"]:first-child {
        padding-right: 40px;
    }
}

.gb-cobotica-detalle h3 {
    margin: 0 0 12px;
    font-size: 24px;
    color: #ffffff;
}

.gb-cobotica-detalle > [class*="col-"] > p {
    margin: 0 0 22px;
    color: rgba(255, 255, 255, 0.78);
}

.gb-cobotica-pasos {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: paso;
    display: grid;
    gap: 14px;
}

.gb-cobotica-pasos li {
    position: relative;
    padding-left: 42px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
}

/* Numeración propia: el orden importa, es una secuencia de trabajo. */
.gb-cobotica-pasos li::before {
    counter-increment: paso;
    content: counter(paso, decimal-leading-zero);
    position: absolute;
    top: 0;
    left: 0;
    font-family: var(--gb-titulo);
    font-size: 14px;
    font-weight: 700;
    color: var(--gb-gold-light);
}

.gb-cobotica-aliado {
    padding: 30px;
    border-radius: 6px;
    border-top: 3px solid var(--gb-gold);
    background: rgba(0, 0, 0, 0.35);
}

.gb-cobotica-aliado img {
    display: block;
    width: auto;
    max-width: 190px;
    height: auto;
    margin: 4px 0 18px;
}

.gb-cobotica-aliado p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.78);
}

.gb-cobotica-acciones {
    margin-top: 45px;
    text-align: center;
}

@media (max-width: 991px) {
    .gb-cobotica {
        padding: 70px 0;
    }

    .gb-cobotica-aliado {
        margin-top: 30px;
    }
}

/* --------------------------------------------------------------------------
   12. Aliado citado dentro de un servicio
   Línea compacta bajo el texto del servicio, en la tarjeta de la home y en la
   ficha de servicios.php. Sólo aparece si el servicio trae la clave 'aliados'.
   -------------------------------------------------------------------------- */
.gb-servicio-aliado {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid rgba(171, 131, 32, 0.28);
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-gBlack);
}

.gb-servicio-aliado span {
    font-family: var(--gb-titulo);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gb-gold);
    margin-right: 4px;
}

.gb-servicio-aliado strong {
    color: var(--gb-dark);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   13. Loader de página
   Sustituye al .preloder de la plantilla. Logo sobre el gris de marca y una
   línea dorada que recorre su base. Entra visible y se desvanece al cargar;
   gantenbein.js lo vuelve a mostrar al seguir un enlace interno.
   -------------------------------------------------------------------------- */
.gb-loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gb-dark);
    transition: opacity 0.45s ease, visibility 0s linear 0s;
}

.gb-loader.es-oculto {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

/* Al salir hacia otra página, aparece algo más rápido de lo que se va. */
.gb-loader:not(.es-oculto) {
    transition-duration: 0.3s;
}

.gb-loader-marca {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    transition: transform 0.45s ease;
}

.gb-loader.es-oculto .gb-loader-marca {
    transform: translateY(-6px);
}

.gb-loader-marca img {
    display: block;
    width: 170px;
    height: auto;
    animation: gb-loader-latido 2.4s ease-in-out infinite;
}

.gb-loader-linea {
    position: relative;
    display: block;
    width: 120px;
    height: 2px;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.12);
}

.gb-loader-linea::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    border-radius: 2px;
    background: var(--gb-gold);
    animation: gb-loader-recorrido 1.3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
    content: "";
}

@keyframes gb-loader-recorrido {
    from { transform: translateX(-100%); }
    to   { transform: translateX(250%); }
}

@keyframes gb-loader-latido {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
    .gb-loader-marca img,
    .gb-loader-linea::after {
        animation: none;
    }

    .gb-loader-linea::after {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Revisión responsive (octubre 2026)
   -------------------------------------------------------------------------- */
/* En teléfono el titular del hero a 52px partía «Transformamos» por la mitad,
   y los titulares de sección a 40px ocupaban cuatro líneas. */
@media (max-width: 575px) {
    .banner.v2 .banner-left h1 {
        font-size: 38px;
        line-height: 1.1;
    }

    .section-title h2,
    .section-title-center h2 {
        font-size: 30px;
        line-height: 1.25;
    }

    .gb-propuesta {
        padding: 60px 0;
    }

    .gb-propuesta-resumen {
        font-size: 20px;
    }

    /* Diferenciadores de la home: icono al lado del título, para que las
       ocho tarjetas no ocupen una pantalla cada dos */
    .gb-difs-grid.es-compacta {
        gap: 12px;
        margin-top: 35px;
    }

    .gb-difs-grid.es-compacta .gb-dif {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 18px 20px;
    }

    .gb-difs-grid.es-compacta .gb-dif .my-icon {
        flex: 0 0 auto;
        margin: 0;
        font-size: 32px;
    }

    .gb-difs-grid.es-compacta .gb-dif h4 {
        font-size: 17px;
    }

    .gb-dolor-grid.es-compacta {
        gap: 12px;
        margin-top: 35px;
    }

    .gb-dolor-grid.es-compacta .gb-dolor-item {
        padding: 18px 22px;
    }

    .contact-us .contact-form h2 {
        font-size: 28px;
        line-height: 1.25;
    }
}

/* Teléfonos estrechos (320–400px): el titular del hero y el del encabezado
   de las páginas interiores («METODOLOGÍA OPPERA®») aún no cabían. */
@media (max-width: 400px) {
    .banner.v2 .banner-left h1 {
        font-size: 33px;
    }

    .breadcum .breadcum-content h1 {
        font-size: 30px;
    }

    .gb-contacto-datos p {
        font-size: 14px;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .banner.v2 .banner-left h1 {
        font-size: 46px;
    }
}

/* Párrafos justificados de «Sobre nosotros»: solo en escritorio. En una
   columna de teléfono el justificado abre huecos grandes entre palabras. */
@media (min-width: 992px) {
    .gb-justificado {
        text-align: justify;
        hyphens: auto;
    }
}

/* Con las columnas apiladas, el texto que va bajo una imagen necesita aire */
@media (max-width: 991px) {
    .gb-areas .row > [class*="col-"] + [class*="col-"] .content-box {
        margin-top: 35px;
    }
}

/* --------------------------------------------------------------------------
   Preguntas frecuentes (/preguntas-frecuentes/)
   <details> nativo: sin JavaScript y con las respuestas siempre en el HTML.
   -------------------------------------------------------------------------- */
.gb-faq {
    padding: 100px 0;
}

.gb-faq-lista {
    max-width: 900px;
    margin: 40px auto 0;
}

.gb-faq-item {
    border-radius: 12px;
    background: var(--gb-gray);
    border-left: 4px solid var(--gb-gold);
}

.gb-faq-item + .gb-faq-item {
    margin-top: 14px;
}

.gb-faq-item summary {
    position: relative;
    padding: 22px 60px 22px 28px;
    cursor: pointer;
    list-style: none;
}

.gb-faq-item summary::-webkit-details-marker {
    display: none;
}

/* Signo + que gira a × al abrir */
.gb-faq-item summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 26px;
    transform: translateY(-50%);
    font-family: var(--gb-titulo);
    font-size: 28px;
    font-weight: 500;
    line-height: 1;
    color: var(--gb-gold);
    transition: transform 0.2s ease;
}

.gb-faq-item[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
}

.gb-faq-item summary:focus-visible {
    outline: 2px solid var(--gb-gold);
    outline-offset: 2px;
    border-radius: 12px;
}

.gb-faq-item summary h3 {
    margin: 0;
    font-family: var(--gb-titulo);
    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
    color: var(--gb-dark);
}

.gb-faq-item p {
    padding: 0 28px 24px;
    margin: 0;
}

@media (max-width: 575px) {
    .gb-faq {
        padding: 70px 0;
    }

    .gb-faq-item summary {
        padding: 18px 52px 18px 20px;
    }

    .gb-faq-item summary::after {
        right: 20px;
    }

    .gb-faq-item summary h3 {
        font-size: 16px;
    }

    .gb-faq-item p {
        padding: 0 20px 20px;
    }
}