/* ============================================================
   Estilos propios de George Growth
   (styles.css es el Tailwind compilado — no lo toques.
    Todo lo tuyo va aquí.)
   ============================================================ */

:root {
    --gg-azul:        oklch(0.488 0.243 264.376);
    --gg-azul-oscuro: oklch(0.400 0.243 264.376);
    --gg-azul-mas-oscuro: oklch(0.350 0.243 264.376);
    --gg-tinta:       #2C3347;
}

/* ---------- Color corporativo ---------- */
.gg-azul { color: var(--gg-azul); }

/* ---------- Banda oscura de las secciones ---------- */
.gg-banda-oscura {
    background-image: linear-gradient(to bottom right, #0f172a, #1e293b, #334155);
}

/* ---------- Rejillas de fondo ---------- */
.gg-rejilla {
    background-size: 30px 30px;
    pointer-events: none;
}
.gg-rejilla--radial,
.gg-rejilla--lineal {
    background-image:
        linear-gradient(rgba(44, 51, 71, 0.4) 1px, transparent 1px),
        linear-gradient(90deg, rgba(44, 51, 71, 0.4) 1px, transparent 1px);
}
.gg-rejilla--azul {
    background-image:
        linear-gradient(rgba(59, 130, 246, 0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.3) 1px, transparent 1px);
}
.gg-rejilla--radial,
.gg-rejilla--azul {
    -webkit-mask-image: radial-gradient(black 40%, transparent 80%);
            mask-image: radial-gradient(black 40%, transparent 80%);
}
.gg-rejilla--lineal {
    -webkit-mask-image: linear-gradient(transparent 0%, black 20%, black 80%, transparent 100%);
            mask-image: linear-gradient(transparent 0%, black 20%, black 80%, transparent 100%);
}

/* ---------- Botón degradado ---------- */
.gg-btn-degradado {
    background-image: linear-gradient(to right, var(--gg-azul), var(--gg-azul-oscuro));
    color: #fff;
    padding: 1rem 2rem;
    border-radius: 9999px;
    font-size: 1.25rem;
    font-weight: 700;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    transition: all .3s ease;
}
.gg-btn-degradado:hover {
    background-image: linear-gradient(to right, var(--gg-azul-oscuro), var(--gg-azul-mas-oscuro));
    transform: scale(1.05);
}

/* ---------- Círculo de plataformas (sección Servicios) ----------
   Tailwind traía w-96 = 384px fijo, más ancho que un móvil de 375.
   Aquí se limita al ancho de pantalla para que nunca desborde.      */
.gg-circulo {
    width:  min(24rem, 86vw);
    height: min(24rem, 86vw);
}

/* Los logos de dentro escalan con el círculo en vez de ir fijos a 10rem */
.gg-plataforma { height: min(10rem, 36vw); width: auto; }

/* ============================================================
   SECCIONES NUEVAS: qué hacemos · proceso · bio · FAQ
   ============================================================ */

/* Etiqueta pequeña que encabeza cada sección */
.gg-eyebrow {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gg-azul);
    margin-bottom: .6rem;
}

/* ============================================================
   MÉTODO (PPC Frame) · COMPARATIVA · PRECIO
   ============================================================ */

.gg-eyebrow--claro { color: #7dd3fc; }

/* ---------- El PPC Frame: cuatro lados ---------- */
.gg-frame {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: rgb(255 255 255 / .12);
    border: 1px solid rgb(255 255 255 / .12);
    border-radius: 1rem;
    overflow: hidden;
}
.gg-frame__lado {
    background: #131a2b;
    padding: 1.6rem 1.5rem;
}
.gg-frame__num {
    display: block;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .1em;
    color: #7dd3fc;
    margin-bottom: .75rem;
    font-variant-numeric: tabular-nums;
}
.gg-frame__cierre {
    margin-top: 2rem;
    font-size: 1.05rem;
    color: #e5e7eb;
    max-width: 46rem;
    border-left: 3px solid #7dd3fc;
    padding-left: 1.1rem;
}
@media (max-width: 720px) {
    .gg-frame { grid-template-columns: 1fr; }
    .gg-frame__lado { padding: 1.5rem 1.25rem; }
}

/* ---------- Comparativa: tarjetas escaneables ----------
   Con subgrid las cuatro tarjetas comparten las MISMAS filas: título,
   ventaja, pega y "tiene sentido si". Así el ✓ de una queda a la altura
   del ✓ de las otras y la comparación se lee en horizontal, que es
   para lo que existe la sección. Sin esto, el texto más largo
   desalineaba toda la fila. */
.gg-opciones-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto auto auto;
    gap: 1.25rem;
    padding-top: 1.25rem;
}
@media (max-width: 1000px) { .gg-opciones-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .gg-opciones-grid { grid-template-columns: 1fr; } }

.gg-opcion-card {
    position: relative;
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 1rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .9rem;
    padding: 1.5rem 1.35rem 1.3rem;
}
.gg-opcion-card.es-nuestra {
    border: 2px solid var(--gg-azul);
    box-shadow: 0 18px 36px -22px rgb(58 79 219 / .55);
}
.gg-opcion-card__sello {
    position: absolute;
    top: -.72rem;
    left: 1.2rem;
    background: var(--gg-azul);
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: .24rem .7rem;
    border-radius: 9999px;
}
.gg-opcion-card__titulo {
    font-size: 1.12rem;
    font-weight: 800;
    color: #111827;
    margin: 0;
    padding-bottom: .9rem;
    border-bottom: 1px solid #f3f4f6;
}
.es-nuestra .gg-opcion-card__titulo { color: var(--gg-azul); }

/* La lista desaparece como caja para que sus dos puntos sean
   hijos directos de la rejilla y puedan alinearse entre tarjetas. */
.gg-opcion-card__puntos { display: contents; }
.gg-opcion-card__puntos li {
    display: grid;
    grid-template-columns: 1.15rem 1fr;
    gap: .55rem;
    font-size: .9rem;
    line-height: 1.5;
    color: #4b5563;
    margin: 0;
}
.gg-marca { font-weight: 800; line-height: 1.45; }
.es-bueno .gg-marca { color: #16a34a; }
.es-malo  .gg-marca { color: #dc2626; }

.gg-opcion-card__cuando {
    align-self: end;
    font-size: .82rem;
    line-height: 1.5;
    color: #6b7280;
    background: #f9fafb;
    border-radius: .5rem;
    padding: .7rem .8rem;
    margin: 0;
}
.gg-opcion-card__cuando strong { color: #374151; display: block; margin-bottom: .15rem; }
.es-nuestra .gg-opcion-card__cuando { background: rgb(58 79 219 / .06); }

/* ---------- Precio ---------- */
.gg-precio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.5rem;
}
.gg-precio__bloque {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .9rem;
    padding: 1.6rem 1.5rem;
}
@media (max-width: 820px) { .gg-precio { grid-template-columns: 1fr; } }

.gg-precio__desde {
    margin-top: 2rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
}
.gg-precio__nota {
    margin-top: 1.75rem;
    color: #6b7280;
    font-size: .96rem;
    max-width: 46rem;
}

/* Auditoría de 1 € como reversión de riesgo */
.gg-prueba {
    margin-top: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    background: #fff;
    border: 2px solid var(--gg-azul);
    border-radius: 1rem;
    padding: 1.75rem;
}
.gg-prueba > div { flex: 1 1 22rem; }
.gg-prueba .gg-btn-degradado { flex-shrink: 0; white-space: nowrap; font-size: 1.05rem; }

/* ---------- Logos de clientes ---------- */
.gg-logos__titulo {
    text-align: center;
    margin-top: .5rem;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 2.25rem;
}
.gg-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .5rem 1rem;
}

/* Cada logo en una caja del MISMO tamaño y limitado por alto Y ancho.
   Sin esto, los logos anchos (Vodafone) aplastan a los finos
   (Clínica Londres) y la fila parece desordenada. */
.gg-logos__caja {
    flex: 0 0 auto;
    width: 10.5rem;
    height: 4.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem;
}
/* width/height al 100% de la caja + object-fit: contain.
   Con 'width: auto' la imagen medía 0 hasta decodificar, y una imagen
   de 0px con loading="lazy" nunca entra en viewport, así que no se
   cargaba nunca. Dando el tamaño desde la caja, el hueco existe desde
   el primer momento y además todos los logos quedan ópticamente
   igualados dentro del mismo marco. */
.gg-logos img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .6;
    transition: filter .25s ease, opacity .25s ease;
}
.gg-logos__caja:hover img { filter: grayscale(0); opacity: 1; }

@media (max-width: 640px) {
    .gg-logos__caja { width: 8rem; height: 3.5rem; }
    .gg-logos img { max-height: 1.8rem; }
}

@media (max-width: 900px) { .gg-logos { gap: 2rem 1.5rem; } }
@media (max-width: 520px) { .gg-logos { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1.25rem; } }

/* ---------- Cifras junto a los logos ---------- */
.gg-cifras {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.25rem 2.75rem;
}
.gg-cifra { text-align: center; }
.gg-cifra__valor {
    display: block;
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--gg-tinta);
    font-variant-numeric: tabular-nums;
}
.gg-cifra__texto {
    display: block;
    font-size: .82rem;
    color: #6b7280;
    margin-top: .15rem;
}
.gg-sellos {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-left: 2.75rem;
    border-left: 1px solid #e5e7eb;
}
@media (max-width: 760px) {
    .gg-sellos { padding-left: 0; border-left: 0; width: 100%; justify-content: center; }
}

/* En 2 columnas, flex-wrap NO alinea nada entre filas: cada fila se
   centra por separado según SU propio ancho total, así que "+15 M€"
   (fila 1) y "+10" (fila 2) no quedaban en la misma vertical aunque
   los dos estén "centrados". Una cuadrícula de verdad, con las dos
   columnas del mismo ancho, hace que cada cifra se centre dentro de
   SU columna, no de su fila — así sí coinciden entre sí. */
@media (max-width: 760px) {
    .gg-cifras {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.75rem 1rem;
    }
    .gg-sellos { grid-column: 1 / -1; }
}
.gg-sellos img { height: 2.75rem; width: auto; object-fit: contain; }

/* ---------- Plataformas en las que trabajamos ---------- */
/* Sin borde inferior: la lista de servicios ya abre con el suyo.
   Los dos juntos dibujaban dos rayas paralelas con un hueco muerto. */
.gg-plataformas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 2.5rem;
    padding: .5rem 0 2rem;
}
.gg-plataformas img {
    height: 3.25rem;
    width: auto;
    object-fit: contain;
}
@media (max-width: 640px) {
    .gg-plataformas { gap: 1rem 1.75rem; justify-content: center; }
    .gg-plataformas img { height: 2.5rem; }
}

/* ---------- Qué hacemos: filas, no tarjetas ---------- */
.gg-lista-servicios {
    display: grid;
    gap: 0;
    border-top: 1px solid #e5e7eb;
}
.gg-servicio {
    display: grid;
    grid-template-columns: 3.25rem 1fr;
    gap: 1.5rem;
    padding: 1.75rem 0;
    border-bottom: 1px solid #e5e7eb;
}
.gg-servicio__icono {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: .75rem;
    background: var(--gg-tinta);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
@media (max-width: 640px) {
    .gg-servicio { grid-template-columns: 1fr; gap: .9rem; }
}

/* ---------- Proceso: línea temporal ---------- */
.gg-proceso {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
    counter-reset: gg-paso;
}
.gg-paso-proceso {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: 1.5rem;
    padding-bottom: 2.25rem;
    position: relative;
}
.gg-paso-proceso:last-child { padding-bottom: 0; }

/* Círculo numerado + línea que une los pasos */
.gg-paso-proceso__marca {
    position: relative;
    width: 2.5rem;
    display: flex;
    justify-content: center;
}
.gg-paso-proceso__marca::before {
    counter-increment: gg-paso;
    content: counter(gg-paso);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--gg-azul);
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
}
.gg-paso-proceso:not(:last-child) .gg-paso-proceso__marca::after {
    content: '';
    position: absolute;
    top: 2.5rem;
    bottom: -2.25rem;
    width: 2px;
    background: #d1d5db;
}
.gg-paso-proceso__cuando {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: .35rem;
}
.gg-proceso__nota {
    margin-top: 2.5rem;
    padding: 1.15rem 1.4rem;
    background: rgb(59 130 246 / .07);
    border-left: 3px solid var(--gg-azul);
    border-radius: 0 .5rem .5rem 0;
    color: #374151;
    font-size: .98rem;
}

/* ---------- Bio ---------- */
.gg-bio {
    display: grid;
    grid-template-columns: 15rem 1fr;
    gap: 3rem;
    align-items: start;
}
.gg-bio__foto img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
}
.gg-bio__texto { display: flex; flex-direction: column; gap: 1rem; }
.gg-bio__cargo {
    color: var(--gg-azul);
    font-weight: 600;
    margin-top: -.5rem;
}
.gg-bio__enlaces { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
.gg-bio__enlaces a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.1rem;
    border: 2px solid #e5e7eb;
    border-radius: 9999px;
    font-weight: 600;
    color: #374151;
    transition: border-color .2s, color .2s;
}
.gg-bio__enlaces a:hover { border-color: var(--gg-azul); color: var(--gg-azul); }
@media (max-width: 768px) {
    .gg-bio { grid-template-columns: 1fr; gap: 1.75rem; }
    .gg-bio__foto { max-width: 11rem; }
}

/* ---------- FAQ ---------- */
.gg-faq { display: grid; gap: .75rem; }
.gg-faq__item {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    overflow: hidden;
}
.gg-faq__pregunta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.4rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: #111827;
    cursor: pointer;
    list-style: none;
}
.gg-faq__pregunta::-webkit-details-marker { display: none; }
.gg-faq__pregunta:hover { color: var(--gg-azul); }
.gg-faq__flecha {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    color: var(--gg-azul);
    transition: transform .25s ease;
}
.gg-faq__item[open] .gg-faq__flecha { transform: rotate(180deg); }
.gg-faq__respuesta {
    padding: 0 1.4rem 1.35rem;
    color: #4b5563;
    line-height: 1.65;
}

/* ---------- Índice de guías (/recursos/) ---------- */
.gg-biblioteca__saltos {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1rem;
}
.gg-biblioteca__salto {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .9rem .45rem .55rem;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    color: #111827;
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    transition: border-color .2s, background-color .2s;
}
.gg-biblioteca__salto:hover { border-color: var(--gg-azul); background: #eef2ff; }
.gg-biblioteca__salto img { width: 28px; height: 28px; object-fit: contain; }
.gg-biblioteca__cuenta {
    min-width: 1.5rem;
    padding: 0 .4rem;
    border-radius: 999px;
    background: #eef2ff;
    color: var(--gg-azul);
    font-size: .78rem;
    text-align: center;
}
.gg-biblioteca__bloque { padding-top: 3rem; scroll-margin-top: 1rem; }
.gg-biblioteca__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem 1.5rem;
}
.gg-biblioteca__bloque .gg-guias { margin-top: 1.25rem; }


/* ---------- Botón de play sobre el vídeo ---------- */
.gg-play[hidden] { display: none !important; }
.gg-play span { transition: transform .3s ease, opacity .3s ease; }
.gg-play:hover span { transform: scale(1.1); opacity: 1; }

/* ---------- CTA flotante en móvil ---------- */
.gg-sticky-cta {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 60;
    display: none;
    align-items: center;
    justify-content: center;
    padding: .9rem 1rem;
    border-radius: 9999px;
    color: #fff;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 20px 40px -12px rgb(0 0 0 / .45);
}
.gg-sticky-cta.is-visible { display: flex; }
@media (min-width: 768px) {
    .gg-sticky-cta { display: none !important; }
}

/* ============================================================
   BANNER DE COOKIES
   ============================================================ */

.gg-cookies {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 90;
    width: min(28rem, calc(100vw - 2rem));
}
.gg-cookies[hidden] { display: none !important; }

.gg-cookies__caja {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / .35);
    padding: 1.25rem;
    animation: gg-entrar .35s ease both;
}
.gg-cookies__caja[hidden] { display: none !important; }

.gg-cookies__titulo {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: .5rem;
}
.gg-cookies__texto {
    font-size: .85rem;
    line-height: 1.5;
    color: #4b5563;
    margin-bottom: 1rem;
}
.gg-cookies__texto a {
    color: var(--gg-azul);
    text-decoration: underline;
}

.gg-cookies__botones {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.gg-ck-btn {
    border: 0;
    border-radius: .5rem;
    padding: .6rem 1rem;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter .2s, background .2s;
}
.gg-ck-btn--ok    { background: var(--gg-azul); color: #fff; flex: 1 1 auto; }
.gg-ck-btn--ok:hover { filter: brightness(1.1); }
.gg-ck-btn--no    { background: #f3f4f6; color: #374151; flex: 1 1 auto; }
.gg-ck-btn--no:hover { background: #e5e7eb; }
.gg-ck-btn--texto { background: transparent; color: #6b7280; text-decoration: underline; padding: .6rem .4rem; }
.gg-ck-btn--texto:hover { color: #111827; }

/* ---- Lista de categorías ---- */
.gg-cookies__lista {
    max-height: 15rem;
    overflow-y: auto;
    margin-bottom: 1rem;
    display: grid;
    gap: .5rem;
}

.gg-ck-cat {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    border: 1px solid #e5e7eb;
    border-radius: .6rem;
    padding: .7rem;
    cursor: pointer;
}
.gg-ck-cat:has(input:disabled) { cursor: default; background: #f9fafb; }
.gg-ck-cat input { margin-top: .2rem; accent-color: var(--gg-azul); flex-shrink: 0; }
.gg-ck-cat__nombre {
    display: block;
    font-size: .85rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: .15rem;
}
.gg-ck-cat__nombre em {
    font-style: normal;
    font-weight: 500;
    font-size: .7rem;
    color: #9ca3af;
    margin-left: .3rem;
}
.gg-ck-cat__desc {
    display: block;
    font-size: .78rem;
    line-height: 1.45;
    color: #6b7280;
}

/* ---- Botón flotante para reabrir ---- */
.gg-cookies__reabrir {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 80;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    background: #fff;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 10px 20px -8px rgb(0 0 0 / .3);
    transition: transform .2s;
}
.gg-cookies__reabrir[hidden] { display: none !important; }
.gg-cookies__reabrir:hover { transform: scale(1.08); }

/* En móvil el CTA flotante ocupa abajo: el botón de cookies sube */
@media (max-width: 767px) {
    .gg-cookies__reabrir { bottom: 5rem; }
    .gg-cookies         { bottom: 5rem; }
}

/* ============================================================
   FORMULARIO POR PASOS
   ============================================================ */

.gg-form { max-width: 34rem; margin-inline: auto; }

/* Honeypot: invisible para personas, visible para bots */
.gg-hp {
    position: absolute !important;
    left: -9999px;
    opacity: 0;
    height: 0;
    width: 0;
}

.gg-paso { display: none; animation: gg-entrar .35s ease both; }
.gg-paso.is-active { display: block; }

@keyframes gg-entrar {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

.gg-paso__num {
    color: var(--gg-azul);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    margin-bottom: .75rem;
}

.gg-pregunta {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
    margin-bottom: .5rem;
}
.gg-pregunta span { color: #dc2626; }

.gg-subcopy {
    color: #6b7280;
    font-size: .9rem;
    margin-bottom: .75rem;
}

.gg-input {
    width: 100%;
    border: 0;
    border-bottom: 2px solid #d1d5db;
    background: transparent;
    padding: .6rem .2rem;
    font-size: 1.15rem;
    color: #111827;
    outline: none;
    transition: border-color .2s;
}
.gg-input:focus { border-bottom-color: var(--gg-azul); }
.gg-input--area {
    border: 2px solid #d1d5db;
    border-radius: .6rem;
    min-height: 7rem;
    padding: .75rem;
    resize: vertical;
}
.gg-input--area:focus { border-color: var(--gg-azul); }

.gg-opciones { display: grid; gap: .6rem; margin-top: 1rem; }
.gg-opciones--rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 480px) {
    .gg-opciones--rejilla { grid-template-columns: 1fr; }
}

.gg-opcion {
    display: flex;
    align-items: center;
    gap: .65rem;
    border: 2px solid #d1d5db;
    border-radius: .6rem;
    padding: .7rem .9rem;
    cursor: pointer;
    font-size: 1rem;
    color: #111827;
    transition: all .18s ease;
}
.gg-opcion:hover { border-color: var(--gg-azul); background: rgb(59 130 246 / .04); }
.gg-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.gg-opcion span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border: 1px solid #d1d5db;
    border-radius: .3rem;
    font-size: .8rem;
    font-weight: 700;
    flex-shrink: 0;
}
.gg-opcion:has(input:checked) {
    border-color: var(--gg-azul);
    background: rgb(59 130 246 / .08);
}
.gg-opcion:has(input:checked) span {
    background: var(--gg-azul);
    border-color: var(--gg-azul);
    color: #fff;
}

.gg-error {
    color: #dc2626;
    font-size: .85rem;
    min-height: 1.2rem;
    margin-top: .6rem;
}

.gg-controles {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: 1.5rem;
}

.gg-boton {
    border: 0;
    border-radius: .6rem;
    padding: .7rem 1.4rem;
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    background: var(--gg-azul);
    cursor: pointer;
    transition: filter .2s;
}
.gg-boton:hover { filter: brightness(1.1); }
.gg-boton--fantasma {
    background: transparent;
    color: #6b7280;
    border: 2px solid #d1d5db;
}
.gg-boton--fantasma:hover { color: #111827; filter: none; border-color: #9ca3af; }
.gg-boton--enviar { background: #16a34a; }
.gg-boton[hidden] { display: none; }

/* ---------- Panel de "no encajamos" ---------- */
.gg-nocualifica {
    max-width: 34rem;
    margin-inline: auto;
    animation: gg-entrar .4s ease both;
}
.gg-nocualifica[hidden] { display: none !important; }

.gg-nocualifica__titulo {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.25;
    margin-bottom: 1rem;
}
.gg-nocualifica__texto {
    font-size: 1rem;
    line-height: 1.6;
    color: #4b5563;
    margin-bottom: 1rem;
}

.gg-nocualifica__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    margin: .5rem 0 1rem;
    padding: .9rem 1.4rem;
    border-radius: 9999px;
    background: #ff0033;
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    box-shadow: 0 18px 32px -14px rgb(255 0 51 / .7);
    transition: transform .2s, filter .2s;
}
.gg-nocualifica__cta:hover { transform: scale(1.02); filter: brightness(1.08); }

/* Opción de pago: el descarte que se convierte en venta */
.gg-opcion-pago {
    position: relative;
    background: #fff;
    border: 2px solid var(--gg-azul);
    border-radius: .9rem;
    padding: 1.5rem 1.4rem 1.4rem;
    margin: 1.5rem 0 1.25rem;
}
.gg-opcion-pago__etiqueta {
    position: absolute;
    top: -.7rem;
    left: 1.2rem;
    background: var(--gg-azul);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .25rem .7rem;
    border-radius: 9999px;
}
.gg-opcion-pago__titulo {
    font-size: 1.25rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: .5rem;
}
.gg-opcion-pago__texto { color: #4b5563; font-size: .95rem; line-height: 1.6; }
.gg-opcion-pago__lista {
    list-style: none;
    margin: 1rem 0 1.25rem;
    padding: 0;
    display: grid;
    gap: .5rem;
}
.gg-opcion-pago__lista li {
    position: relative;
    padding-left: 1.6rem;
    font-size: .92rem;
    color: #374151;
}
.gg-opcion-pago__lista li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--gg-azul);
    font-weight: 800;
}
.gg-opcion-pago__cta {
    display: block;
    text-align: center;
    background: var(--gg-azul);
    color: #fff;
    font-weight: 700;
    padding: .85rem 1.2rem;
    border-radius: 9999px;
    transition: filter .2s;
}
.gg-opcion-pago__cta:hover { filter: brightness(1.1); }

/* Opción gratuita: presente pero secundaria */
.gg-opcion-gratis {
    border-top: 1px solid #e5e7eb;
    padding-top: 1.25rem;
    margin-bottom: .5rem;
}
.gg-opcion-gratis h4 { font-weight: 700; color: #111827; margin-bottom: .35rem; }
.gg-opcion-gratis p { color: #6b7280; font-size: .92rem; line-height: 1.6; margin-bottom: .75rem; }

.gg-nocualifica__volver { width: 100%; }

.gg-nocualifica__despedida {
    margin-top: 1.25rem;
    font-size: .9rem;
    font-style: italic;
    color: #9ca3af;
    text-align: center;
}


/* ---------- Reseñas destacadas ----------
   Aparte de la rejilla: son largas y tienen nombre completo, cargo y
   empresa. Eso las convierte en algo comprobable, no en un elogio suelto. */
.gg-destacados {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 3.5rem;
}
@media (max-width: 900px) { .gg-destacados { grid-template-columns: 1fr; } }

.gg-destacado {
    margin: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    padding: 2rem 1.9rem 1.6rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 28px -18px rgb(0 0 0 / .3);
}
.gg-destacado blockquote { margin: 0 0 1.5rem; flex: 1; }
.gg-destacado blockquote p {
    color: #374151;
    font-size: 1rem;
    line-height: 1.68;
    margin-bottom: .9rem;
}
.gg-destacado blockquote p:first-child::before { content: '«'; }
.gg-destacado blockquote p:last-child { margin-bottom: 0; }
.gg-destacado blockquote p:last-child::after { content: '»'; }

.gg-destacado__pie {
    display: flex;
    align-items: center;
    gap: .9rem;
    border-top: 1px solid #f3f4f6;
    padding-top: 1.1rem;
}
.gg-destacado__pie img,
.gg-destacado__inicial {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.gg-destacado__inicial {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gg-tinta);
    color: #fff;
    font-weight: 700;
    font-size: 1.2rem;
}
.gg-destacado__datos { display: flex; flex-direction: column; line-height: 1.35; }
.gg-destacado__datos strong { color: #111827; font-size: .98rem; }
.gg-destacado__datos > span { color: #6b7280; font-size: .85rem; }
.gg-destacado__fecha { color: #9ca3af !important; font-size: .78rem !important; }
.gg-destacado__fecha a { color: var(--gg-azul); text-decoration: underline; }

/* El emoji va sobre fondo claro, no sobre el azul oscuro de los SVG */

/* ---------- Reseñas ----------
   La persona va ARRIBA y todo alineado a la izquierda: así se lee
   como una reseña real. Centrado y con la cita en grande parecía
   un anuncio, que es justo lo contrario de lo que tiene que
   transmitir. Con foto y enlace al original, se puede comprobar. */
.gg-resena {
    margin: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .9rem;
    padding: 1.6rem 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.gg-resena__persona {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding-bottom: 1.1rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid #f3f4f6;
}
.gg-resena__persona img,
.gg-resena__inicial {
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.gg-resena__inicial {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gg-tinta);
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
}
.gg-resena__datos { display: flex; flex-direction: column; line-height: 1.32; min-width: 0; }
.gg-resena__datos strong { color: #111827; font-size: .96rem; }
.gg-resena__datos > span { color: #6b7280; font-size: .82rem; }
.gg-resena__empresa { color: #111827 !important; font-weight: 600; }

.gg-resena__texto {
    margin: 0;
    flex: 1;
    color: #374151;
    font-size: .97rem;
    line-height: 1.65;
}
.gg-resena__texto::before { content: '«'; }
.gg-resena__texto::after  { content: '»'; }

.gg-resena__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1.15rem;
    padding-top: .85rem;
    border-top: 1px solid #f3f4f6;
    font-size: .78rem;
    color: #9ca3af;
}
.gg-resena__pie a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--gg-azul);
    font-weight: 600;
}
.gg-resena__pie a:hover { text-decoration: underline; }

/* Enlace a todas las recomendaciones: es lo que las hace comprobables */
.gg-resenas-todas { text-align: center; margin-top: 2.25rem; }
.gg-resenas-todas a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.4rem;
    border: 2px solid #e5e7eb;
    border-radius: 9999px;
    color: #374151;
    font-weight: 600;
    font-size: .95rem;
    transition: border-color .2s, color .2s;
}
.gg-resenas-todas a:hover { border-color: var(--gg-azul); color: var(--gg-azul); }

/* Pausa del carrusel de reseñas. Antes solo paraba con mouseenter, que
   no existe al tacto: en móvil no había forma de detenerlo. Un botón
   real, junto a los puntos, funciona igual con el dedo que con el
   ratón y avisa en qué estado está. */
.gg-carrusel-pausa {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    border: 1.5px solid #d1d5db;
    color: #6b7280;
    flex-shrink: 0;
    transition: border-color .2s, color .2s, background-color .2s;
}
.gg-carrusel-pausa:hover {
    border-color: var(--gg-azul);
    color: var(--gg-azul);
    background-color: rgb(58 79 219 / .06);
}
.gg-carrusel-pausa svg { width: 1rem; height: 1rem; }

/* Diagramas del PPC Frame: explican, no decoran */
.gg-frame__dibujo {
    width: 4.5rem;
    height: 3.5rem;
    display: block;
    margin-bottom: 1rem;
}
@media (max-width: 720px) {
    .gg-frame__dibujo { width: 3.75rem; height: 2.9rem; margin-bottom: .75rem; }
}

/* ---------- Cita suelta bajo los logos ----------
   Credibilidad temprana sin mover el bloque de reseñas de su sitio. */
.gg-cita {
    margin: 2.5rem 0 0;
    padding-top: 2.25rem;
    border-top: 1px solid rgb(58 79 219 / .18);
    width: 100%;
    max-width: none;
    text-align: center;
}
.gg-cita blockquote {
    margin: 0 auto 1.1rem;
    max-width: 52rem;
    font-size: 1.22rem;
    line-height: 1.55;
    color: #1f2937;
    font-weight: 500;
    text-wrap: balance;
}
.gg-cita blockquote::before { content: '«'; }
.gg-cita blockquote::after  { content: '»'; }
.gg-cita figcaption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    font-size: .85rem;
    color: #6b7280;
}
.gg-cita figcaption img {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.gg-cita figcaption span { text-align: left; line-height: 1.35; }
.gg-cita figcaption strong { display: block; color: #111827; font-size: .92rem; }
@media (max-width: 560px) {
    .gg-cita blockquote { font-size: 1.08rem; }
}

/* ---------- Precio: la fórmula ----------
   Se lee antes que los párrafos, así quien no vaya a leerlos
   se lleva igualmente cómo se calcula el fee. */
.gg-formula {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: .75rem;
    margin-bottom: 3rem;
}
.gg-formula__parte {
    flex: 1 1 12rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: .8rem;
    padding: 1.1rem 1.2rem;
    text-align: center;
}
.gg-formula__parte strong {
    display: block;
    font-size: 1.15rem;
    color: #111827;
    margin-bottom: .2rem;
}
.gg-formula__parte em {
    font-style: normal;
    font-size: .84rem;
    color: #6b7280;
    line-height: 1.4;
    display: block;
}
.gg-formula__parte--total {
    background: rgb(58 79 219 / .07);
    border-color: var(--gg-azul);
}
.gg-formula__parte--total strong { color: var(--gg-azul); }
.gg-formula__signo {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #d1d5db;
    flex: 0 0 auto;
}
@media (max-width: 720px) {
    .gg-formula { flex-direction: column; }
    .gg-formula__signo { justify-content: center; }

    /* flex: 1 1 12rem estaba pensado para el ANCHO mínimo en fila
       (escritorio). Al pasar a columna aquí, ese mismo 12rem pasa a
       leerse como ALTURA mínima: cada caja quedaba forzada a casi
       200px de alto aunque el texto ocupara mucho menos, con un
       hueco vacío enorme debajo. auto deja que cada caja mida lo
       que su contenido necesita. */
    .gg-formula__parte { flex-basis: auto; }
}

/* ---------- Precio: el gráfico ---------- */
.gg-precio__figura {
    margin: 0 0 3rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    padding: 1.75rem 1.5rem 1.5rem;
}
.gg-precio__grafico {
    width: 100%;
    height: auto;
    max-width: 40rem;
    margin: 0 auto .25rem;
    display: block;
}
.gg-precio__figura figcaption {
    max-width: 44rem;
    margin: 0 auto;
    text-align: center;
    font-size: .93rem;
    line-height: 1.6;
    color: #6b7280;
}

/* ---------- Panel azul: cifras + reseña ----------
   Se separan del blanco de los logos para que se lean como el bloque
   de prueba que son, no como texto suelto. */
.gg-panel-datos {
    margin-top: 2.5rem;
    background: linear-gradient(135deg, rgb(58 79 219 / .07), rgb(58 79 219 / .04));
    border: 1px solid rgb(58 79 219 / .16);
    border-radius: 1.25rem;
    padding: 2.5rem 2.25rem;
}
@media (max-width: 640px) {
    .gg-panel-datos { padding: 1.75rem 1.25rem; border-radius: 1rem; }
}

/* Los sellos, sin la divisoria gris que ya no pega sobre azul */
.gg-panel-datos .gg-sellos { border-left-color: rgb(58 79 219 / .2); }


/* ============================================================
   ESPACIADO DE SECCIONES — una sola escala
   ============================================================
   Antes cada seccion traia su propia py-* de Tailwind y los huecos
   iban de 64 a 208 px sin patron. Peor: py-20, pt-24 y pb-28 NO
   existen en el Tailwind compilado, asi que 'precio' se quedaba con
   CERO relleno y 'casos' con 24 px.

   Ahora todas usan .gg-sec y el hueco entre dos secciones siempre
   es el mismo. Si hay que cambiar el ritmo, se cambia aqui y afecta
   a toda la pagina a la vez.
   ============================================================ */
.gg-sec {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
@media (min-width: 1024px) {
    .gg-sec { padding-top: 4.5rem; padding-bottom: 4.5rem; }
}
@media (max-width: 640px) {
    .gg-sec { padding-top: 2.75rem; padding-bottom: 2.75rem; }
}

/* El panel azul ya aporta su propio peso visual: la seccion de logos
   no necesita tanto colchon por abajo. */
.gg-sec-logos { padding-bottom: 3rem; }
@media (min-width: 1024px) { .gg-sec-logos { padding-bottom: 3.5rem; } }

/* El hero cierra con una nota en cursiva y los logos abren con una
   etiqueta pequena: dos textos menores seguidos. Con el espaciado
   estandar quedaba un vacio enorme entre ellos. */
.gg-sec-hero { padding-top: 4rem; padding-bottom: 2.5rem; }
@media (min-width: 1024px) { .gg-sec-hero { padding-top: 4.5rem; padding-bottom: 2.75rem; } }
@media (max-width: 640px)  { .gg-sec-hero { padding-top: 2.5rem; padding-bottom: 2rem; } }

.gg-sec-logos { padding-top: 2.75rem; }
@media (min-width: 1024px) { .gg-sec-logos { padding-top: 3rem; } }

/* Firma de la bio: remata el bloque y refuerza que aqui habla
   una persona, no la web. Con eso el salto de "nosotros" a "yo"
   se lee como intencionado. */
.gg-bio__firma {
    margin-top: .75rem;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 1.35rem;
    color: var(--gg-tinta);
    opacity: .85;
}

/* ============================================================
   Cabecera: logo centrado en móvil, propio en vez de clases de
   Tailwind
   ============================================================
   styles.css es Tailwind YA COMPILADO con solo las clases que se
   usaban en el diseño original (ver README, apartado 4): utilidades
   como "left-1/2", "-translate-x-1/2" o "md:static" no estaban ahí
   y se ignoraban en silencio, sin ningún aviso — el logo se quedaba
   quieto y el enlace de idioma acababa tapado justo debajo. Con
   clases propias no hay ese riesgo. */
.gg-logo-cabecera {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
@media (min-width: 768px) {
    .gg-logo-cabecera {
        position: static;
        transform: none;
    }
}

/* El logo, en móvil, deja de contar como hijo del flujo normal (está
   con position:absolute): sin esto, el hijo de la derecha con el
   selector de idioma sería el único que queda "en fila" y
   justify-between lo pegaría a la izquierda en vez de a la derecha. */
.gg-header-derecha {
    margin-left: auto;
}

/* Con el logo fuera del flujo, la cabecera se encoge a la altura de
   lo que quede DENTRO del flujo — en móvil, solo el enlace de idioma,
   mucho más bajo que el logo de 80px. El logo, centrado dentro de una
   caja más baja que él mismo, se salía por arriba (se veía cortado).
   Una altura mínima que sí quepa el logo con su aire (80px + el
   padding vertical de la cabecera) lo soluciona. */
.gg-cabecera { min-height: 7rem; }

/* ============================================================
   Selector de idioma (cabecera)
   ============================================================
   Un unico enlace al OTRO idioma (no un interruptor ES/EN con los
   dos): dice a donde lleva, no hace falta explicarlo. Se ve en movil
   tambien, donde el menu no existe: es el unico sitio desde el que
   se puede cambiar de idioma. */
.gg-idiomas {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: .4rem .85rem;
    border-radius: 999px;
    border: 1.5px solid var(--gg-azul);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--gg-azul);
    text-decoration: none;
    transition: color .2s, background-color .2s;

    /* Separacion del botón de CTA: sin esto quedaba pegado al botón
       azul, como si fuera parte del mismo control. */
    margin-left: 2rem;
}
.gg-idiomas:hover { color: #fff; background-color: var(--gg-azul); }

/* En movil no hay CTA justo al lado (el menu entero esta oculto),
   así que no hace falta el margen. */
@media (max-width: 767px) {
    .gg-idiomas { margin-left: 0; }
}

/* ============================================================
   Paginas legales
   ============================================================
   styles.css es el Tailwind compilado y su reset deja los titulares
   con el tamano del cuerpo, los margenes a cero y las listas sin
   vinetas. Sin estas reglas un texto legal se lee como un muro:
   hay que devolverle la estructura a mano. */
.gg-legal {
    color: #374151;
    font-size: 1.05rem;
    line-height: 1.75;
}
.gg-legal h2 {
    margin-top: 2.5rem;
    margin-bottom: .75rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: #000;
}
.gg-legal h3 {
    margin-top: 1.75rem;
    margin-bottom: .5rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--gg-tinta);
}
.gg-legal p  { margin-bottom: 1.1rem; }
.gg-legal ul,
.gg-legal ol {
    margin: 0 0 1.4rem;
    padding-left: 1.5rem;
    list-style: disc;
}
.gg-legal ol { list-style: decimal; }
.gg-legal li { margin-bottom: .5rem; }
.gg-legal strong, .gg-legal b { color: var(--gg-tinta); font-weight: 700; }
.gg-legal a { color: var(--gg-azul); text-decoration: underline; }

/* Las tablas de la politica de cookies. Con overflow propio para que
   en movil se desplacen ellas y no la pagina entera. */
.gg-legal table {
    display: block;
    width: 100%;
    overflow-x: auto;
    margin-bottom: 1.5rem;
    border-collapse: collapse;
    font-size: .92rem;
}
.gg-legal th,
.gg-legal td {
    border: 1px solid #e5e7eb;
    padding: .6rem .75rem;
    text-align: left;
    vertical-align: top;
}
.gg-legal thead th { background-color: #f9fafb; font-weight: 700; color: var(--gg-tinta); }
.gg-legal td p:last-child { margin-bottom: 0; }

/* Aviso de que el texto legal es una traduccion. Va antes del cuerpo
   y con borde lateral para que no se confunda con el propio texto. */
.gg-legal__aviso {
    margin-bottom: 2rem;
    padding: .9rem 1.1rem;
    border-left: 4px solid var(--gg-azul);
    background-color: #f9fafb;
    border-radius: 0 .5rem .5rem 0;
    font-size: .95rem;
    color: #4b5563;
}
.gg-legal__aviso a { color: var(--gg-azul); font-weight: 700; text-decoration: underline; }

/* Nota bajo el titular de las resenas: avisa de que estan traducidas.
   Discreta a proposito, no es un argumento de venta. */
.gg-resenas-nota {
    margin-top: .75rem;
    font-size: .9rem;
    color: #6b7280;
    font-style: italic;
}

/* ---------- Páginas de servicio: para quién tiene sentido ---------- */
.gg-encaje {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}
@media (max-width: 760px) { .gg-encaje { grid-template-columns: 1fr; } }

.gg-encaje__col {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .9rem;
    padding: 1.5rem 1.35rem;
}
.gg-encaje__col.es-bueno { border-top: 4px solid #16a34a; }
.gg-encaje__col.es-malo  { border-top: 4px solid #dc2626; }

.gg-encaje__titulo {
    font-size: 1.12rem;
    font-weight: 800;
    color: #111827;
    margin: 0 0 1rem;
}
.gg-encaje__lista { display: grid; gap: .8rem; }
.gg-encaje__lista li {
    display: grid;
    grid-template-columns: 1.15rem 1fr;
    gap: .55rem;
    line-height: 1.55;
    color: #4b5563;
}

/* ---------- Enlaces a las páginas de cada canal ---------- */
.gg-canales {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
/* En una página de canal quedan tres: que no dejen un hueco al final */
.gg-canales:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .gg-canales, .gg-canales:has(> :nth-child(3):last-child) { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .gg-canales, .gg-canales:has(> :nth-child(3):last-child) { grid-template-columns: 1fr; } }

.gg-canal {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .9rem;
    padding: 1.4rem 1.35rem 1.3rem;
    color: inherit;
    text-decoration: none;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.gg-canal:hover,
.gg-canal:focus-visible {
    border-color: var(--gg-azul);
    box-shadow: 0 18px 36px -22px rgb(58 79 219 / .55);
    transform: translateY(-2px);
}
.gg-canal__logo { height: 3.25rem; width: auto; object-fit: contain; align-self: flex-start; }
.gg-canal__nombre { font-size: 1.12rem; font-weight: 800; color: #111827; margin: .25rem 0 0; }
.gg-canal__texto { font-size: .92rem; line-height: 1.5; color: #4b5563; margin: 0; flex: 1; }
.gg-canal__mas { font-size: .88rem; font-weight: 700; color: var(--gg-azul); }

/* Nota bajo "Qué hacemos": el alcance del servicio (y lo que se
   presupuesta aparte). Con borde lateral, como el aviso legal, para que
   se lea como aclaración y no como un servicio más de la lista. */
.gg-que-hacemos__nota,
.gg-encaje__nota {
    margin-top: 2rem;
    padding: .9rem 1.1rem;
    border-left: 4px solid var(--gg-azul);
    background-color: #fff;
    border-radius: 0 .5rem .5rem 0;
    color: #4b5563;
    line-height: 1.55;
}

/* ============================================================
   GUÍAS (/<canal>/<slug>/)
   ============================================================
   Columna de lectura estrecha (max-w-3xl) y tipografía propia: aquí
   el contenido ES la página, así que se cuida como un artículo y no
   como una sección de venta. */
.gg-guia { padding: 2rem 0 4rem; }
@media (min-width: 1024px) { .gg-guia { padding: 2.5rem 0 4.5rem; } }

.gg-migas {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    font-size: .85rem;
    color: #6b7280;
    margin-bottom: 1.75rem;
}
.gg-migas a { color: var(--gg-azul); }
.gg-migas a:hover { text-decoration: underline; }

.gg-guia__cabecera { margin-bottom: 2rem; }
.gg-guia__titulo {
    font-size: 2rem;
    line-height: 1.15;
    font-weight: 800;
    color: #111827;
    margin: 0 0 1rem;
}
@media (min-width: 1024px) { .gg-guia__titulo { font-size: 2.6rem; } }
.gg-guia__entradilla { font-size: 1.2rem; line-height: 1.6; color: #374151; margin: 0 0 1rem; }
.gg-guia__firma { font-size: .9rem; color: #6b7280; }
.gg-guia__firma a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.gg-guia__video {
    position: relative;
    display: block;
    border-radius: .9rem;
    overflow: hidden;
    margin: 0 0 2.5rem;
    background: #0f172a;
}
.gg-guia__video img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; opacity: .85; transition: opacity .2s; }
.gg-guia__video:hover img { opacity: 1; }
.gg-guia__video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 9999px;
    background: var(--gg-azul);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 18px 36px -12px rgb(0 0 0 / .5);
}
.gg-guia__video-pie {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .75rem 1rem;
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    background: linear-gradient(to top, rgb(0 0 0 / .75), transparent);
}

.gg-guia__cuerpo { font-size: 1.08rem; line-height: 1.75; color: #374151; }
.gg-guia__cuerpo h2 {
    font-size: 1.55rem;
    line-height: 1.25;
    font-weight: 800;
    color: #111827;
    margin: 2.5rem 0 1rem;
}
.gg-guia__cuerpo p { margin: 0 0 1.1rem; }
.gg-guia__cuerpo strong { color: #111827; }
.gg-guia__cuerpo ul { list-style: disc; padding-left: 1.4rem; margin: 0 0 1.25rem; }
.gg-guia__cuerpo li { margin-bottom: .5rem; }

.gg-guia__tabla { overflow-x: auto; margin: 0 0 .75rem; border: 1px solid #e5e7eb; border-radius: .6rem; }
.gg-guia__tabla table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.gg-guia__tabla th,
.gg-guia__tabla td { padding: .6rem .8rem; text-align: left; border-bottom: 1px solid #e5e7eb; vertical-align: top; }
.gg-guia__tabla th { background: #f9fafb; font-weight: 700; color: #111827; white-space: nowrap; }
.gg-guia__tabla tr:last-child td { border-bottom: none; }
.gg-guia__fuente { font-size: .85rem; color: #6b7280; margin: 0 0 1.5rem; }

.gg-guia__nota {
    padding: .9rem 1.1rem;
    border-left: 4px solid var(--gg-azul);
    background: #f9fafb;
    border-radius: 0 .5rem .5rem 0;
    font-size: 1rem;
}

.gg-guia__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin-top: 3rem;
    padding: 1.5rem;
    border: 2px solid var(--gg-azul);
    border-radius: .9rem;
    background: rgb(58 79 219 / .04);
    color: #374151;
}
.gg-guia__cta > div { flex: 1 1 22rem; }
.gg-guia__cta-titulo { font-size: 1.2rem; font-weight: 800; color: #111827; margin-bottom: .3rem; }
.gg-guia__cta .gg-btn-degradado { font-size: 1rem; padding: .8rem 1.4rem; text-align: center; }

/* Listado de guías de un canal */
.gg-guias {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-top: 2rem;
}
@media (max-width: 760px) { .gg-guias { grid-template-columns: 1fr; } }
.gg-guias__item {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .9rem;
    padding: 1.3rem 1.35rem;
    color: inherit;
    text-decoration: none;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.gg-guias__item:hover,
.gg-guias__item:focus-visible {
    border-color: var(--gg-azul);
    box-shadow: 0 18px 36px -22px rgb(58 79 219 / .55);
    transform: translateY(-2px);
}
.gg-guias__titulo { font-size: 1.08rem; font-weight: 800; color: #111827; margin: 0; }
.gg-guias__texto { font-size: .92rem; line-height: 1.5; color: #4b5563; margin: 0; flex: 1; }

/* Enlaces internos dentro de un texto ([enlace=...] en el contenido) */
.gg-enlace { color: var(--gg-azul); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.gg-enlace:hover { color: var(--gg-azul-oscuro); }
@media (max-width: 560px) {
    .gg-guia__tabla table { font-size: .85rem; }
    .gg-guia__tabla th,
    .gg-guia__tabla td { padding: .5rem .6rem; }
}

/* ============================================================
   Menú principal (cabecera)
   ============================================================
   Un solo <nav> para los dos tamaños:
   - Desde 1100px: la fila de siempre, con "Servicios" desplegable
     (se abre al pasar el ratón, con el teclado o al pulsar).
   - Por debajo: botón de hamburguesa y el menú como panel bajo la
     cabecera, con los servicios ya desplegados dentro.
   Antes, por debajo de 768px no había menú ninguno y desde fuera
   de la home las anclas (#precio, #metodo...) no llevaban a nada.
   El corte está en 1100 y no en 768: con seis entradas más el botón
   de llamada, entre 768 y 1100 la fila no cabe. */

.gg-header-derecha { display: flex; align-items: center; }

.gg-nav__lista { list-style: none; margin: 0; padding: 0; }

.gg-nav__enlace {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    color: #374151;
    font: inherit;
    background: none;
    border: 0;
    padding: .25rem 0;
    cursor: pointer;
    text-decoration: none;
    transition: color .2s;
}
.gg-nav__enlace:hover,
.gg-nav__enlace.is-activo { color: #000; }
.gg-nav__enlace.is-activo { font-weight: 700; }
.gg-nav__flecha { width: 1rem; height: 1rem; transition: transform .2s; }
.gg-nav__boton[aria-expanded="true"] .gg-nav__flecha { transform: rotate(180deg); }

.gg-nav__sub { list-style: none; margin: 0; padding: 0; }
.gg-nav__subenlace {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .6rem .75rem;
    border-radius: 12px;
    color: #111827;
    text-decoration: none;
    transition: background-color .15s;
}
.gg-nav__subenlace:hover,
.gg-nav__subenlace:focus-visible,
.gg-nav__subenlace[aria-current="page"] { background-color: #eef2ff; }
.gg-nav__sublogo { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; }
.gg-nav__subtitulo { display: block; font-weight: 700; font-size: .95rem; }
.gg-nav__subdetalle { display: block; font-size: .8rem; color: #6b7280; line-height: 1.35; }

/* Botón de hamburguesa: tres rayas hechas con un span y sus pseudos */
.gg-menu-boton {
    display: none;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: none;
    cursor: pointer;
    position: relative;
    order: 3;
}
.gg-menu-boton__barras,
.gg-menu-boton__barras::before,
.gg-menu-boton__barras::after {
    position: absolute;
    left: 11px;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--gg-tinta);
    transition: transform .2s, opacity .2s;
    content: "";
}
.gg-menu-boton__barras { top: 21px; }
.gg-menu-boton__barras::before { left: 0; top: -7px; }
.gg-menu-boton__barras::after  { left: 0; top: 7px; }
.gg-menu-boton[aria-expanded="true"] .gg-menu-boton__barras { background: transparent; }
.gg-menu-boton[aria-expanded="true"] .gg-menu-boton__barras::before { transform: translateY(7px) rotate(45deg); }
.gg-menu-boton[aria-expanded="true"] .gg-menu-boton__barras::after  { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Escritorio ---------- */
@media (min-width: 1100px) {
    .gg-nav { display: flex; align-items: center; gap: 2rem; }
    .gg-nav__lista { display: flex; align-items: center; gap: 1.75rem; }
    .gg-nav__item--desplegable { position: relative; }

    /* El padding-top hace de "puente": sin él, el ratón pierde el
       hover en el hueco entre "Servicios" y el panel y este se cierra. */
    .gg-nav__sub {
        position: absolute;
        top: 100%;
        left: -1rem;
        z-index: 60;
        width: 21rem;
        padding-top: .75rem;
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: opacity .15s, transform .15s, visibility .15s;
    }
    .gg-nav__sub > li:first-child { margin-top: 0; }
    .gg-nav__sub::before {
        content: "";
        position: absolute;
        inset: .75rem 0 0 0;
        z-index: -1;
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 18px 40px -12px rgba(15, 23, 42, .25), 0 0 0 1px rgba(15, 23, 42, .06);
    }
    .gg-nav__sub > li { padding: 0 .4rem; }
    .gg-nav__sub > li:first-child { padding-top: .4rem; }
    .gg-nav__sub > li:last-child  { padding-bottom: .4rem; }

    .gg-nav__item--desplegable:hover .gg-nav__sub,
    .gg-nav__item--desplegable:focus-within .gg-nav__sub,
    .gg-nav__item--desplegable.is-abierto .gg-nav__sub {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    .gg-nav__item--desplegable:hover .gg-nav__flecha { transform: rotate(180deg); }
}

/* ---------- Tablet y móvil: hamburguesa + panel ---------- */
@media (max-width: 1099px) {
    .gg-menu-boton { display: inline-block; }

    .gg-nav {
        display: none;
        position: absolute;
        top: calc(100% - .5rem);
        left: 1rem;
        right: 1rem;
        z-index: 60;
        padding: 1rem;
        background: #fff;
        border-radius: 18px;
        box-shadow: 0 24px 50px -12px rgba(15, 23, 42, .3), 0 0 0 1px rgba(15, 23, 42, .06);
        max-height: calc(100vh - 8rem);
        overflow-y: auto;
    }
    .gg-nav.is-abierto { display: block; }

    .gg-nav__lista { display: flex; flex-direction: column; }
    .gg-nav__item { border-bottom: 1px solid #f1f5f9; }
    .gg-nav__enlace { width: 100%; padding: .85rem .5rem; font-size: 1.05rem; }

    /* En el panel los servicios van siempre a la vista: un desplegable
       dentro de otro desplegable, en el móvil, es un clic de más. El
       título "Servicios" queda como rótulo, no como botón. */
    .gg-nav__boton { pointer-events: none; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6b7280; padding-bottom: .25rem; }
    .gg-nav__flecha { display: none; }
    .gg-nav__sub { padding-bottom: .5rem; }
    .gg-nav__sub .gg-nav__subenlace { padding: .55rem .5rem; }

    .gg-nav__cta { display: flex; justify-content: center; margin-top: 1rem; }

    .gg-idiomas { margin-left: 0; margin-right: .25rem; }
}

/* ============================================================
   Pie: marca + Servicios + Guías + Legal
   ============================================================
   Las columnas de Servicios y Guías solo salen en español (sus
   páginas no existen en inglés): en inglés quedan dos columnas,
   marca y legal; en español, 2x2 en tablet y cuatro en escritorio. */
.gg-pie {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .gg-pie { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .gg-pie:has(> :nth-child(4)) { grid-template-columns: 1.2fr .8fr 1.6fr .9fr; }
}
.gg-pie__titulo {
    margin: 0 0 1rem;
    color: #000;
    font-weight: 700;
    font-size: 1.05rem;
}
.gg-pie__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.gg-pie__lista a {
    color: #374151;
    font-size: .95rem;
    line-height: 1.4;
    text-decoration: none;
    transition: color .2s;
}
.gg-pie__lista a:hover { color: var(--gg-azul); }
.gg-pie__lista .gg-pie__todas { color: var(--gg-azul); font-weight: 700; }

/* ============================================================
   Fuente de reserva ajustada a Lato (evita que la home "salte")
   ============================================================
   Mientras Lato no ha llegado, el navegador pinta con Arial, que es
   un 4-5 % más ancha: el titular de la home ocupaba 3 líneas y al
   llegar Lato pasaba a 2, y todo lo de debajo subía 60 px (CLS 0,16,
   por encima del 0,1 que Google da por bueno). Encogiendo Arial lo
   justo (size-adjust medido el 27-09-2026 sobre los textos reales de
   la web) y dándole las métricas verticales de Lato (ascent 0,987 y
   descent 0,213, divididas por el size-adjust), el texto ocupa lo
   mismo antes y después. */
@font-face {
    font-family: 'Lato Fallback';
    src: local('Arial');
    font-weight: 400;
    size-adjust: 95.69%;
    ascent-override: 103.15%;
    descent-override: 22.26%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Lato Fallback';
    src: local('Arial Bold'), local('Arial-BoldMT'), local('Arial');
    font-weight: 700 900;
    size-adjust: 94.71%;
    ascent-override: 104.21%;
    descent-override: 22.49%;
    line-gap-override: 0%;
}
* { font-family: Lato, 'Lato Fallback', sans-serif; }

/* Sobre fondo blanco (sección de encaje) la nota necesita su propio fondo */
.gg-encaje__nota { background-color: #f8fafc; }

/* ============================================================
   /growth-partner/
   ============================================================
   - .gg-prosa: texto largo con la tipografía de las guías (definición y
     cobro). Reutiliza .gg-guia__cuerpo; aquí solo lo que le falta.
   - .gg-opciones-grid--tres: la comparativa de la home, en tres tarjetas.
   - .gg-caso__*: las tres cifras del caso real. */
.gg-prosa h2 { margin-top: 0; font-size: 1.9rem; }
.gg-prosa .gg-eyebrow + h2 { margin-top: .25rem; }
.gg-prosa h2:not(.gg-prosa__h2-primero) { margin-top: 3rem; }
.gg-prosa h3 {
    font-size: 1.15rem;
    line-height: 1.3;
    font-weight: 800;
    color: #111827;
    margin: 1.6rem 0 .5rem;
}
.gg-prosa__destacado {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #111827;
    padding: 1rem 1.15rem;
    border-left: 4px solid var(--gg-azul);
    background: rgb(58 79 219 / .05);
    border-radius: 0 .6rem .6rem 0;
}
@media (min-width: 1024px) { .gg-prosa h2 { font-size: 2.1rem; } }

.gg-opciones-grid--tres { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .gg-opciones-grid--tres { grid-template-columns: 1fr; } }

.gg-caso__cifras {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
@media (max-width: 760px) { .gg-caso__cifras { grid-template-columns: 1fr; } }
.gg-caso__cifra {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: .9rem;
    padding: 1.4rem 1.25rem;
    text-align: center;
}
.gg-caso__valor {
    display: block;
    font-size: 1.7rem;
    line-height: 1.15;
    font-weight: 800;
    color: var(--gg-azul);
    font-variant-numeric: tabular-nums;
}
.gg-caso__texto {
    display: block;
    margin-top: .4rem;
    font-size: .92rem;
    line-height: 1.45;
    color: #4b5563;
}

/* ---------- Cabecera con formulario corto (secciones/hero-formulario.php) ----------
   Móvil: titular, formulario, puntos y sellos, en ese orden.
   Escritorio: texto y puntos a la izquierda, formulario a la derecha. */
.gg-hero-form {
    display: grid;
    gap: 1.75rem;
    grid-template-areas: "texto" "form" "extras";
}
.gg-hero-form__texto  { grid-area: texto; }
.gg-form-corto        { grid-area: form; }
.gg-hero-form__extras { grid-area: extras; }
@media (min-width: 1024px) {
    .gg-hero-form {
        grid-template-columns: 1.15fr .85fr;
        grid-template-areas: "texto form" "extras form";
        grid-template-rows: auto 1fr;
        column-gap: 4rem;
        row-gap: 2rem;
        align-items: start;
    }
    .gg-hero-form__texto { align-self: end; }
}
.gg-hero-form__h1 {
    font-size: 1.85rem;
    line-height: 1.12;
    letter-spacing: -.01em;
}
@media (min-width: 640px)  { .gg-hero-form__h1 { font-size: 2.6rem; } }
@media (min-width: 1024px) { .gg-hero-form__h1 { font-size: 3.1rem; } }
.gg-hero-form__sub {
    margin-top: 1.1rem;
    font-size: 1.1rem;
    line-height: 1.55;
    font-weight: 500;
    color: #374151;
    max-width: 36rem;
}
@media (min-width: 1024px) { .gg-hero-form__sub { font-size: 1.25rem; } }

.gg-hero-form__puntos {
    display: grid;
    gap: .7rem;
}
.gg-hero-form__puntos li {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    font-size: 1rem;
    line-height: 1.45;
    color: #1f2937;
}
.gg-hero-form__check {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    margin-top: .05rem;
    border-radius: 9999px;
    background: var(--gg-azul);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
}
.gg-hero-form__sellos {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(17, 24, 39, .08);
}
.gg-hero-form__sellos img {
    height: 2.75rem;
    width: auto;
    object-fit: contain;
}

.gg-form-corto {
    position: relative;
    background: #fff;
    border: 1px solid rgba(17, 24, 39, .08);
    border-radius: 1.25rem;
    padding: 1.5rem 1.25rem 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 24px 48px -24px rgba(30, 64, 175, .35);
    overflow: hidden;
}
.gg-form-corto::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gg-azul), #06b6d4);
}
@media (min-width: 640px) {
    .gg-form-corto { padding: 2rem 2rem 1.5rem; }
}
.gg-form-corto__cabecera {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding-bottom: 1rem;
    margin-bottom: .25rem;
    border-bottom: 1px solid #f1f5f9;
}
.gg-form-corto__foto {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 9999px;
    object-fit: cover;
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(37, 99, 235, .25);
}
.gg-form-corto__titulo {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    color: #111827;
}
.gg-form-corto__quien {
    margin-top: .15rem;
    font-size: .85rem;
    color: #6b7280;
}
.gg-form-corto__etiqueta {
    display: block;
    margin-top: .9rem;
    margin-bottom: .3rem;
    font-size: .85rem;
    font-weight: 600;
    color: #374151;
}
.gg-form-corto__input {
    width: 100%;
    border: 1.5px solid #e5e7eb;
    border-radius: .65rem;
    padding: .75rem .9rem;
    font-size: 1rem;
    color: #111827;
    background: #f9fafb;
    outline: none;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.gg-form-corto__input::placeholder { color: #9ca3af; }
.gg-form-corto__input:focus {
    border-color: var(--gg-azul);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}
.gg-form-corto__boton {
    margin-top: 1.4rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1rem;
    border: 0;
    border-radius: 9999px;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
}
.gg-form-corto__boton:disabled { opacity: .7; cursor: wait; }
.gg-form-corto__nota {
    margin-top: .75rem;
    font-size: .8rem;
    color: #6b7280;
    text-align: center;
}

/* ---------- Bandas entre secciones (ver seccion() en includes/funciones.php) ----------
   Mandan sobre bg-white / bg-gray-50 de cada plantilla: este archivo se carga
   después de styles.css. */
.gg-tono-a { background-color: #fff; }
.gg-tono-b {
    background-color: #f3f6fb;
    border-top: 1px solid #e3e9f3;
    border-bottom: 1px solid #e3e9f3;
}


/* ---------- Utilidades de Tailwind que faltaban en el compilado ----------
   Las plantillas usan estas clases, pero styles.css se compiló sin ellas y
   el navegador las ignoraba: por eso el título de cada sección iba pegado a
   su contenido (mb-10, mb-12) y la página de gracias salía descuadrada.
   Valores de la escala de Tailwind v3. Si algún día se recompila styles.css
   con estas clases dentro, este bloque se puede borrar. */
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mt-10 { margin-top: 2.5rem; }
.gap-5 { gap: 1.25rem; }
.p-5   { padding: 1.25rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.min-h-\[70vh\] { min-height: 70vh; }
.inline-flex { display: inline-flex; }
.flex-wrap { flex-wrap: wrap; }
.rounded-3xl  { border-radius: 1.5rem; }
.rounded-r-xl { border-top-right-radius: .75rem; border-bottom-right-radius: .75rem; }
.border-0   { border-width: 0; }
.border-2   { border-width: 2px; }
.border-l-4 { border-left-width: 4px; }
.tracking-wide { letter-spacing: .025em; }
.bg-transparent { background-color: transparent; }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.bg-\[oklch\(0\.488_0\.243_264\.376\)\]\/10 { background-color: oklch(0.488 0.243 264.376 / .1); }
.border-\[oklch\(0\.488_0\.243_264\.376\)\] { border-color: var(--gg-azul); }
.hover\:bg-\[oklch\(0\.488_0\.243_264\.376\)\]:hover { background-color: var(--gg-azul); }
.hover\:border-\[oklch\(0\.488_0\.243_264\.376\)\]:hover { border-color: var(--gg-azul); }
.hover\:text-\[oklch\(0\.488_0\.243_264\.376\)\]:hover { color: var(--gg-azul); }
@media (min-width: 1024px) {
    .lg\:p-14 { padding: 3.5rem; }
}


/* ==========================================================================
   PORTADA NUEVA (01/11/2026): secciones/portada-*.php, solo en español.
   Prefijo gh- y variables --gh-*. Cada sección trae su fondo (gh-bg-*) y
   lleva gg-fondo-propio para que seccion() no le ponga los tonos a/b.
   ========================================================================== */
:root { --gh-azul: oklch(0.488 0.243 264.376); --gh-azul-osc: oklch(0.350 0.243 264.376); --gh-azul-suave: oklch(0.488 0.243 264.376 / .09); --gh-noche: #0d1430; --gh-noche-2: #16204a; --gh-ink: #11131a; --gh-tinta: #2C3347; --gh-gris: #5d6475; --gh-borde: #e4e6ee; --gh-bg2: #f6f7fb; --gh-tinte: #f3f5fb; --gh-azulado: #eaf0ff; --gh-verde: #1f9d61; --gh-claro: #b9c2dd; }
.gh-c { max-width: 1200px; margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.gh h1, .gh h2, .gh h3 { text-wrap: balance; }
.gh-h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; font-weight: 900; letter-spacing: -.015em; color: var(--gh-ink); margin: 0 0 14px; }
.gh-lead { color: var(--gh-gris); font-size: 18px; line-height: 1.6; max-width: 62ch; margin: 0; }
.gh-head { margin-bottom: 44px; max-width: 760px; }
.gh-head.centro { margin-left: auto; margin-right: auto; text-align: center; }
.gh-head.centro .gh-lead { margin: 0 auto; }
.gh-enlace { color: var(--gh-azul); font-weight: 700; text-decoration: none; }
.gh-enlace:hover { text-decoration: underline; }
.gh-bg-blanco { background: #fff; }
.gh-bg-tinte { background: var(--gh-tinte); }
.gh-bg-azulado { background: linear-gradient(180deg, var(--gh-azulado), #f5f8ff); }
.gh-bg-oscuro { background: radial-gradient(90% 70% at 15% 0%, #23307a 0%, transparent 60%), radial-gradient(70% 60% at 100% 100%, #1b3fa8 0%, transparent 55%), var(--gh-noche); color: #fff; }
.gh-bg-marca { background: linear-gradient(135deg, oklch(0.47 0.23 264) 0%, oklch(0.33 0.2 266) 100%); color: #fff; }
.gh-bg-oscuro .gh-h2, .gh-bg-marca .gh-h2 { color: #fff; }
.gh-bg-oscuro .gh-lead, .gh-bg-marca .gh-lead { color: var(--gh-claro); }
.gh-filtro, .gh-faq__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.gh-filtro button, .gh-faq__tabs button { appearance: none; cursor: pointer; border: 1px solid var(--gh-borde); background: #fff; color: var(--gh-tinta); font: 700 14px/1 Lato, 'Lato Fallback', sans-serif; padding: 10px 16px; border-radius: 999px; }
.gh-filtro button[aria-pressed="true"], .gh-faq__tabs button[aria-pressed="true"] { background: var(--gh-ink); border-color: var(--gh-ink); color: #fff; }
.gh-faq__tabs button span { opacity: .55; margin-left: 4px; font-weight: 400; }
.gh-hero { background: radial-gradient(60% 80% at 85% 30%, #dfe7ff 0%, transparent 70%), linear-gradient(135deg, #f8f9fc 0%, #eef2fd 100%); }
.gh-hero__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 56px; align-items: center; }
.gh-marca-gg { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 6px 14px 6px 6px; background: #fff; border: 1px solid var(--gh-borde); border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--gh-tinta); }
.gh-marca-gg img { width: 32px; height: 32px; object-fit: contain; }
.gh-hero h1 { font-size: clamp(34px, 4.6vw, 58px); line-height: 1.05; font-weight: 900; letter-spacing: -.02em; color: var(--gh-ink); margin: 0 0 20px; }
.gh-hero h2 { font-size: 20px; line-height: 1.5; font-weight: 400; color: var(--gh-tinta); margin: 0 0 30px; max-width: 36ch; }
.gh-hero h2 .underline { text-decoration-color: var(--gh-azul); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.gh-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.gh-hero .btn-premium { display: inline-flex !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 16px 28px !important; }
.gh-btn-sec { font-weight: 700; color: var(--gh-ink); text-decoration: none; border-bottom: 2px solid var(--gh-azul); padding-bottom: 2px; }
.gh-hero__nota { font-size: 13.5px; color: var(--gh-gris); margin: 14px 0 0; font-style: italic; }
.gh-retrato { position: relative; width: 100%; max-width: 430px; justify-self: end; aspect-ratio: 4 / 5; }
.gh-retrato__fondo { position: absolute; inset: 8% -6% -4% 10%; border-radius: 32px; background: linear-gradient(150deg, oklch(0.62 0.2 264), var(--gh-azul) 50%, var(--gh-azul-osc)); transform: rotate(3deg); }
.gh-retrato__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; border-radius: 28px; box-shadow: 0 30px 60px -30px rgb(10 20 70 / .5); }
.gh-chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 9px; background: #fff; color: var(--gh-ink); border-radius: 12px; padding: 10px 14px; font-size: 13.5px; font-weight: 700; box-shadow: 0 10px 28px -10px rgb(10 20 60 / .4); white-space: nowrap; }
.gh-chip .dot { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; color: #fff; font-weight: 900; }
.gh-chip.c1 { top: 70px; left: -40px; }
.gh-chip.c2 { bottom: 150px; right: -30px; }
.gh-chip.c3 { bottom: 40px; left: -44px; }
.gh-chip.c3 .big { font-size: 21px; font-weight: 900; color: var(--gh-azul); }
.gh-chip.c3 small { font-size: 12px; line-height: 1.2; color: var(--gh-gris); font-weight: 700; }
.gh-firma { display: none; align-items: center; gap: 14px; margin-top: 26px; padding: 14px; background: #fff; border: 1px solid var(--gh-borde); border-radius: 16px; max-width: 420px; }
.gh-firma img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex: none; }
.gh-firma b { display: block; font-size: 15px; color: var(--gh-ink); }
.gh-firma > div > span { font-size: 13px; color: var(--gh-gris); }
.gh-firma .mini { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.gh-firma .mini em { font-style: normal; font-size: 11.5px; font-weight: 700; background: var(--gh-bg2); border-radius: 6px; padding: 3px 8px; color: var(--gh-tinta); }
.gh-logos__tit { text-align: center; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--gh-gris); margin: 0 0 26px; padding-inline: 24px; }
.gh-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); margin-bottom: 48px; }
.gh-marquee__pista { display: flex; align-items: center; gap: 64px; width: max-content; padding-inline: 32px; animation: gh-desliza 38s linear infinite; }
.gh-marquee:hover .gh-marquee__pista { animation-play-state: paused; }
.gh-logo img { height: 34px; width: auto; max-width: none; filter: grayscale(1); opacity: .6; transition: filter .25s, opacity .25s; }
.gh-logo img:hover { filter: none; opacity: 1; }
@keyframes gh-desliza { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
.gh-marquee__pista { animation: none; flex-wrap: wrap; justify-content: center; width: auto; gap: 24px 44px; }
.gh-marquee__pista .gh-logo:nth-child(n+10) { display: none; }
}
.gh-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: radial-gradient(80% 120% at 0% 0%, #23307a, transparent 60%), var(--gh-noche); border-radius: 24px; overflow: hidden; box-shadow: 0 30px 60px -36px rgb(13 20 48 / .7); }
.gh-cifras div { padding: 32px 28px; }
.gh-cifras div + div { border-left: 1px solid rgb(255 255 255 / .1); }
.gh-cifras b { display: block; font-size: clamp(32px, 3.6vw, 46px); font-weight: 900; color: #fff; letter-spacing: -.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.gh-cifras b .gh-n { color: #8fb0ff; font-size: inherit; }
.gh-cifras span { color: var(--gh-claro); font-size: 14.5px; }
.gh-cita { display: flex; align-items: center; gap: 16px; max-width: 780px; margin: 36px auto 0; }
.gh-cita img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.gh-cita p { margin: 0; font-size: 15.5px; color: var(--gh-tinta); font-style: italic; line-height: 1.55; }
.gh-cita p b { display: block; font-style: normal; font-size: 13.5px; color: var(--gh-gris); margin-top: 4px; }
.gh-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.gh-proceso { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.gh-proceso__foto { position: sticky; top: 24px; }
.gh-proceso__foto img { width: 100%; aspect-ratio: 1 / 1.03; object-fit: cover; border-radius: 24px; display: block; }
.gh-proceso__foto p { margin: -40px 18px 0; position: relative; background: #fff; border-radius: 14px; padding: 14px 16px; font-size: 14.5px; color: var(--gh-tinta); box-shadow: 0 14px 30px -18px rgb(10 20 60 / .4); }
.gh-linea { position: relative; display: grid; gap: 26px; }
.gh-linea::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; background: linear-gradient(180deg, var(--gh-azul), var(--gh-azul-suave)); }
.gh-paso { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 18px; }
.gh-paso .punto { width: 36px; height: 36px; border-radius: 50%; background: var(--gh-azul); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 15px; box-shadow: 0 0 0 6px #fff; }
.gh-paso .cuando { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--gh-azul); margin-top: 2px; }
.gh-paso h3 { margin: 2px 0 6px; font-size: 18px; font-weight: 900; color: var(--gh-ink); }
.gh-paso p { margin: 0; color: var(--gh-gris); font-size: 15px; line-height: 1.6; }
.gh-pie-sec { margin: 34px 0 0; padding: 16px 20px; border-radius: 14px; background: var(--gh-azul-suave); color: var(--gh-tinta); font-weight: 700; }
.gh-casos__cab { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 32px; }
.gh-casos__cab .gh-h2 { margin: 0; }
.gh-caso { background: #fff; border: 1px solid #dfe5f5; border-radius: 20px; padding: 26px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 14px 34px -28px rgb(20 40 120 / .45); }
.gh-caso .sector { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--gh-gris); }
.gh-caso .titular { font-size: 42px; font-weight: 900; letter-spacing: -.02em; color: var(--gh-verde); line-height: 1; }
.gh-caso .titular.azul { color: var(--gh-azul); }
.gh-caso .titular small { display: block; font-size: 13.5px; color: var(--gh-gris); font-weight: 700; letter-spacing: 0; margin-top: 8px; line-height: 1.4; }
.gh-caso .extra { margin: 0; font-size: 14.5px; color: var(--gh-tinta); line-height: 1.5; }
.gh-caso .gh-enlace { margin-top: auto; font-size: 14.5px; }
.gh-caso--video { background: var(--gh-noche); border-color: var(--gh-noche); color: #fff; }
.gh-caso--video .sector { color: var(--gh-claro); }
.gh-caso--video .titular { color: #ff4b4b; }
.gh-caso--video .titular svg { width: 52px; height: 52px; }
.gh-caso--video .titular small, .gh-caso--video .extra { color: var(--gh-claro); }
.gh-caso--video .gh-enlace { color: #fff; }
.gh-barra { display: grid; grid-template-columns: 74px minmax(0, 1fr) 82px; align-items: center; gap: 10px; font-size: 13.5px; color: var(--gh-gris); }
.gh-barra .pista { height: 12px; background: var(--gh-bg2); border-radius: 6px; overflow: hidden; }
.gh-barra .pista i { display: block; height: 100%; border-radius: 6px; }
.gh-barra .v { text-align: right; font-weight: 700; color: var(--gh-ink); font-variant-numeric: tabular-nums; }
.gh-franja { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.gh-plat { background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .12); border-radius: 22px; padding: 30px; display: flex; flex-direction: column; gap: 18px; }
.gh-plat__cab { display: flex; align-items: center; gap: 14px; }
.gh-plat__cab img { height: 44px; width: auto; background: #fff; border-radius: 12px; padding: 7px; }
.gh-plat__cab span { font-size: 12.5px; text-transform: uppercase; letter-spacing: .12em; color: #8fb0ff; font-weight: 700; }
.gh-plat__cab h3 { margin: 2px 0 0; font-size: 24px; font-weight: 900; color: #fff; }
.gh-plat p { margin: 0; color: #d6dbee; font-size: 15.5px; line-height: 1.65; }
.gh-plat p :is(b, strong) { color: #fff; }
.gh-plat .gh-enlace { color: #fff; margin-top: auto; }
.gh-vis { display: grid; gap: 8px; }
.gh-q { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 11px 13px; border-radius: 11px; background: rgb(255 255 255 / .08); color: #e7eaf5; }
.gh-q .k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 4px 8px; border-radius: 6px; white-space: nowrap; flex: none; }
.gh-q .k.kw { background: rgb(255 255 255 / .14); color: #cfd5ea; }
.gh-q .k.ai { background: #fff; color: var(--gh-azul); }
.gh-q.ia { background: rgb(143 176 255 / .18); }
.gh-creas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gh-creas span { aspect-ratio: 4 / 5; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; justify-content: end; font-size: 12.5px; color: #fff; background: linear-gradient(160deg, #3b5bdb, #1c2a6b); }
.gh-creas span:nth-child(2) { background: linear-gradient(160deg, #e8590c, #7a2b06); }
.gh-creas span:nth-child(3) { background: linear-gradient(160deg, #12b886, #0b5c45); }
.gh-creas span:nth-child(4) { background: linear-gradient(160deg, #ae3ec9, #4d1a5a); }
.gh-creas b { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.gh-comp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: center; }
.gh-op { background: #fff; border: 1px solid var(--gh-borde); border-radius: 20px; padding: 28px; position: relative; }
.gh-op h3 { margin: 0 0 16px; font-size: 21px; font-weight: 900; color: var(--gh-ink); }
.gh-op h3 small { font-size: 15px; font-weight: 700; color: var(--gh-gris); }
.gh-op ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; }
.gh-op li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 15px; line-height: 1.5; color: var(--gh-tinta); }
.gh-op li svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; margin-top: 1px; }
.gh-op li.si svg { background: #e3f5ec; color: var(--gh-verde); }
.gh-op li.no svg { background: #fdeceb; color: #d4483b; }
.gh-op__si { margin: 0; padding-top: 16px; border-top: 1px solid var(--gh-borde); font-size: 14px; color: var(--gh-gris); }
.gh-op__si b { color: var(--gh-ink); }
.gh-op--yo { background: var(--gh-noche); border: 2px solid #4c6ef5; padding: 40px 30px 32px; box-shadow: 0 30px 60px -30px rgb(30 50 160 / .55); }
.gh-op--yo h3, .gh-op--yo li { color: #fff; }
.gh-op--yo h3 small { color: var(--gh-claro); }
.gh-op--yo li.si svg { background: rgb(64 192 87 / .18); color: #69db7c; }
.gh-op--yo li.no svg { background: rgb(255 107 107 / .16); color: #ff8787; }
.gh-op--yo .gh-op__si { border-color: rgb(255 255 255 / .14); color: var(--gh-claro); }
.gh-op--yo .gh-op__si b { color: #fff; }
.gh-op__sello { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: #4c6ef5; color: #fff; font-size: 12.5px; font-weight: 900; letter-spacing: .04em; padding: 6px 14px; border-radius: 999px; white-space: nowrap; }
.gh-comp__plantilla { margin: 26px auto 0; max-width: 820px; text-align: center; font-size: 15px; color: var(--gh-gris); }
.gh-comp__plantilla :is(b, strong) { color: var(--gh-ink); }
.gh-mods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.gh-mod { position: relative; background: #fff; border: 1px solid var(--gh-borde); border-radius: 20px; padding: 26px 22px; display: flex; flex-direction: column; gap: 12px; }
.gh-mod__n { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--gh-azul-suave); color: var(--gh-azul); font-weight: 900; }
.gh-mod h3 { margin: 0; font-size: 18.5px; font-weight: 900; color: var(--gh-ink); line-height: 1.25; }
.gh-mod p { margin: 0; color: var(--gh-gris); font-size: 14.5px; line-height: 1.6; }
.gh-mod__si { margin-top: auto !important; padding-top: 12px; border-top: 1px solid var(--gh-borde); }
.gh-mod__si b { color: var(--gh-ink); }
.gh-mod__barra { display: flex; height: 34px; border-radius: 9px; overflow: hidden; gap: 3px; }
.gh-mod__barra i { display: grid; place-items: center; font-style: normal; font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.gh-mod__barra .f { background: var(--gh-noche); color: #fff; }
.gh-mod__barra .v { background: repeating-linear-gradient(135deg, #4c6ef5 0 8px, #5c7cfa 8px 16px); color: #fff; }
.gh-mods__pie { text-align: center; color: var(--gh-gris); margin: 28px 0 0; }
.gh-euro { margin-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; padding: 24px 28px; border-radius: 20px; background: var(--gh-azulado); border: 1px dashed #9db4f5; color: var(--gh-tinta); }
.gh-euro > div { max-width: 70ch; }
.gh-euro :is(b, strong) { color: var(--gh-ink); }
.gh-yo { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 64px; align-items: center; }
.gh-yo__foto { position: relative; }
.gh-yo__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 26px; display: block; box-shadow: 0 30px 60px -30px rgb(0 0 0 / .5); }
.gh-yo__yt { position: absolute; left: 18px; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 10px; background: #fff; color: var(--gh-ink); border-radius: 14px; padding: 12px 14px; font-weight: 700; font-size: 14.5px; text-decoration: none; box-shadow: 0 14px 30px -14px rgb(0 0 0 / .5); }
.gh-yo__yt svg { width: 30px; height: 30px; color: #ff0000; flex: none; }
.gh-yo .cargo { color: #a9c0ff; font-weight: 700; margin: -4px 0 18px; }
.gh-yo p.t { color: #e3e8fa; font-size: 17px; line-height: 1.65; margin: 0 0 14px; }
.gh-sellos { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 24px; }
.gh-sellos span { border: 1px solid rgb(255 255 255 / .28); border-radius: 10px; padding: 9px 13px; font-size: 13.5px; font-weight: 700; color: #fff; background: rgb(255 255 255 / .08); }
.gh-redes { display: flex; gap: 14px 24px; flex-wrap: wrap; align-items: center; }
.gh-redes a { color: #fff; font-weight: 700; text-decoration: none; }
.gh-faq__tabs { margin-bottom: 20px; }
@media (max-width: 1100px) {
.gh-chip.c1, .gh-chip.c3 { left: -14px; }
.gh-chip.c2 { right: -10px; }
.gh-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
}
@media (max-width: 900px) {
.gh-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gh-proceso, .gh-franja { grid-template-columns: minmax(0, 1fr); }
.gh-proceso { gap: 36px; }
.gh-proceso__foto { position: static; max-width: 460px; }
.gh-comp { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; gap: 26px; }
.gh-op--yo { margin-top: 10px; }
.gh-yo { grid-template-columns: 300px minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 767px) {
.gh-c { padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.gh-hero__grid { grid-template-columns: minmax(0, 1fr); }
.gh-retrato { display: none; }
.gh-firma { display: flex; }
.gh-hero .btn-premium { width: 100% !important; justify-content: center; }
.gh-hero h2 { font-size: 17.5px; }
.gh-marca-gg { font-size: 11.5px; gap: 8px; max-width: 100%; letter-spacing: -.01em; }
.gh-marca-gg img { width: 26px; height: 26px; }
.gh-logo img { height: 26px; }
.gh-marquee__pista { gap: 44px; }
.gh-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gh-cifras div { padding: 22px 18px; }
.gh-cifras div:nth-child(3) { border-left: 0; }
.gh-cifras div:nth-child(n+3) { border-top: 1px solid rgb(255 255 255 / .1); }
.gh-grid3, .gh-yo, .gh-mods { grid-template-columns: minmax(0, 1fr); }
.gh-yo__foto { max-width: 340px; }
.gh-caso .titular { font-size: 36px; }
.gh-plat { padding: 22px; }
.gh-creas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gh-creas span { aspect-ratio: 16 / 9; }
}
.gh-hero__grid { grid-template-columns: minmax(0, 600px) minmax(0, 420px); justify-content: center; gap: 72px; }
.gh-retrato { justify-self: start; }
.gh-chip.c1 { top: 56%; bottom: auto; left: -36px; }
.gh-chip.c2 { top: auto; bottom: 22%; right: -28px; }
.gh-chip.c3 { bottom: -18px; left: 22px; }
@media (max-width: 1100px) {
.gh-hero__grid { gap: 48px; }
.gh-chip.c1 { left: -12px; }
.gh-chip.c2 { right: -10px; }
}
@media (max-width: 767px) {
.gh-hero__grid { grid-template-columns: minmax(0, 1fr); }
}
.gh-b__canales { display: flex; gap: 8px; margin-top: auto; position: relative; z-index: 1; }
.gh-b__canales img { width: 42px; height: 42px; object-fit: contain; background: #fff; border-radius: 11px; padding: 7px; }
.gh-ab { display: flex; gap: 8px; margin-top: auto; }
.gh-ab span { flex: 1; aspect-ratio: 4 / 3; border-radius: 10px; background: rgb(255 255 255 / .1); display: grid; place-items: center; font-weight: 900; font-size: 20px; color: #cfd6ee; position: relative; }
.gh-ab .gana { background: #4c6ef5; color: #fff; outline: 2px solid #8fb0ff; outline-offset: 2px; }
.gh-ab em { position: absolute; bottom: 5px; font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.gh-embudo { display: grid; gap: 6px; margin-top: auto; }
.gh-embudo i { display: block; margin-inline: auto; padding: 6px 10px; border-radius: 8px; text-align: center; font-style: normal; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(90deg, #4c6ef5, #748ffc); }
.gh-cuadre { display: grid; gap: 10px; margin-top: auto; }
.gh-cuadre span { display: block; margin-bottom: 4px; font-size: 12.5px; font-weight: 700; color: var(--gh-gris); }
.gh-cuadre i { display: block; height: 12px; border-radius: 6px; background: #c9cdd8; }
.gh-cuadre i.caja { background: var(--gh-verde); }
.gh-ruta, .gh-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.gh-ruta span { padding: 7px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: rgb(255 255 255 / .1); color: #dfe5f7; }
.gh-ruta span:not(:last-child)::after { content: " →"; opacity: .55; }
.gh-ruta .fin { background: #2f9e44; color: #fff; }
.gh-chips span { padding: 7px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; border: 1px solid rgb(255 255 255 / .25); color: #dfe5f7; }
.gh-nota--claro { color: var(--gh-claro); }
.gh-nota--claro a { color: #fff; }
.gh-metodo__pie { margin: 22px 0 0; padding-left: 16px; border-left: 3px solid var(--gh-azul); color: var(--gh-tinta); font-weight: 700; line-height: 1.55; }
.gh-flechas { display: flex; gap: 8px; flex: none; }
.gh-flechas button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--gh-borde); background: #fff; color: var(--gh-ink); font-size: 18px; cursor: pointer; }
.gh-flechas button:hover { background: var(--gh-ink); color: #fff; }
.gh-capturas { margin-top: 44px; }
.gh-capturas__cab { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 18px; }
.gh-capturas__cab h3 { margin: 0 0 4px; font-size: 22px; font-weight: 900; color: var(--gh-ink); }
.gh-capturas__cab p { margin: 0; color: var(--gh-gris); font-size: 15px; }
.gh-capturas__pista { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: thin; }
.gh-cap { flex: 0 0 min(360px, 84%); scroll-snap-align: start; margin: 0; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid #dfe5f5; border-radius: 18px; }
.gh-cap__img { appearance: none; border: 0; cursor: zoom-in; height: 220px; padding: 14px; display: flex; gap: 8px; align-items: center; justify-content: center; background: #eef1f7; }
.gh-cap__img img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 4px 14px -6px rgb(0 0 0 / .25); }
.gh-cap__img.doble img { max-width: calc(50% - 4px); }
.gh-cap figcaption { padding: 14px 16px 16px; font-size: 14.5px; line-height: 1.45; color: var(--gh-tinta); }
.gh-cap figcaption span { display: block; margin-bottom: 4px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--gh-gris); }
.gh-cap figcaption :is(b, strong) { color: var(--gh-ink); }
.gh-lb { border: 0; padding: 0; border-radius: 18px; max-width: min(1100px, 94vw); background: #fff; }
.gh-lb::backdrop { background: rgb(10 14 30 / .75); }
.gh-lb form { position: absolute; top: 8px; right: 8px; }
.gh-lb form button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: #11131a; color: #fff; font-size: 16px; cursor: pointer; }
.gh-lb__img { display: flex; gap: 10px; padding: 16px; max-height: 88vh; overflow: auto; }
.gh-lb__img img { flex: 1 1 0; min-width: 0; max-width: 100%; height: auto; object-fit: contain; }
.gh-res__cab { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 28px; }
.gh-res__cab .gh-h2 { margin-bottom: 8px; }
.gh-res__pista { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 14px; scrollbar-width: none; }
.gh-res__pista::-webkit-scrollbar { display: none; }
.gh-res { flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: 26px; border-radius: 20px; background: var(--gh-tinte); }
.gh-res blockquote { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--gh-tinta); }
.gh-res blockquote::before { content: "\201C"; display: block; height: 28px; font-size: 54px; line-height: 1; font-weight: 900; color: var(--gh-azul); }
.gh-res figcaption { display: flex; gap: 12px; align-items: center; }
.gh-res figcaption img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.gh-res figcaption span { font-size: 13px; line-height: 1.4; color: var(--gh-gris); }
.gh-res figcaption b { display: block; font-size: 15px; color: var(--gh-ink); }
.gh-res figcaption em { display: block; margin-top: 2px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--gh-azul); }
@media (max-width: 900px) {
.gh-res { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 600px) {
.gh-res { flex-basis: 88%; }
.gh-res__cab .gh-flechas { display: none; }
}
.gh-fq__cab { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 20px 40px; margin-bottom: 26px; }
.gh-fq__cab .gh-h2 { margin: 0; max-width: 20ch; }
.gh-fq__caja { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.gh-fq { border-bottom: 1px solid var(--gh-borde); }
.gh-fq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 15px 16px; border-radius: 12px; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--gh-ink); }
.gh-fq summary::-webkit-details-marker { display: none; }
.gh-fq summary::after { content: "\2192"; flex: none; font-weight: 900; color: var(--gh-azul); transition: transform .2s; }
.gh-fq summary:hover { background: #fff; }
.gh-fq.activa summary { background: #fff; color: var(--gh-azul); box-shadow: 0 8px 20px -14px rgb(20 40 120 / .35); }
.gh-fq.activa summary::after { transform: translateX(4px); }
.gh-fq p { display: none; }
.gh-fq__panel { position: sticky; top: 24px; min-height: 320px; display: flex; flex-direction: column; gap: 14px; padding: 30px; border-radius: 24px; background: var(--gh-noche); color: #fff; }
.gh-fq__quien { display: flex; gap: 12px; align-items: center; }
.gh-fq__quien img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; }
.gh-fq__quien span { font-size: 13px; color: var(--gh-claro); }
.gh-fq__quien b { display: block; font-size: 15px; color: #fff; }
.gh-fq__q { margin: 6px 0 0; font-size: 21px; line-height: 1.3; font-weight: 900; color: #fff; }
.gh-fq__r { margin: 0; font-size: 16px; line-height: 1.7; color: #dbe1f3; }
.gh-fq__panel .gh-enlace { margin-top: auto; color: #8fb0ff; }
@media (max-width: 899px) {
.gh-fq__caja { grid-template-columns: minmax(0, 1fr); }
.gh-fq__panel { display: none; }
.gh-fq p { display: block; margin: 0; padding: 0 16px 16px; font-size: 15px; line-height: 1.65; color: var(--gh-gris); }
.gh-fq summary::after { content: "+"; }
.gh-fq[open] summary::after { content: "\2212"; }
.gh-fq.activa summary { background: transparent; box-shadow: none; color: var(--gh-ink); }
}
.gh-hero__grid { grid-template-columns: minmax(0, 560px) minmax(0, 440px); gap: 40px; }
.gh-marca-gg { padding: 7px 14px; }
@media (max-width: 1100px) {
.gh-hero__grid { gap: 36px; }
}
@media (max-width: 767px) {
.gh-hero__grid { grid-template-columns: minmax(0, 1fr); }
}
.gh-video-g { max-width: 980px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; box-shadow: 0 40px 80px -40px rgb(13 20 48 / .6); }
.gh-video-g > div { border-radius: 24px; }
.gh-cta { margin-top: 32px; text-align: center; }
.gh-grupo-s + .gh-grupo-s { margin-top: 40px; }
.gh-grupo-s__tit { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; color: var(--gh-claro); font-size: 15px; }
.gh-grupo-s__tit span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; background: #4c6ef5; color: #fff; font-weight: 900; }
.gh-grupo-s__tit b { display: block; color: #fff; font-size: 18px; font-weight: 900; }
.gh-s3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gh-s { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 20px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .12); transition: transform .2s, border-color .2s; }
.gh-s:hover { transform: translateY(-3px); border-color: rgb(143 176 255 / .5); }
.gh-s .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #4c6ef5; color: #fff; }
.gh-s .ic svg { width: 21px; height: 21px; }
.gh-s h3 { margin: 4px 0 0; font-size: 18.5px; font-weight: 900; line-height: 1.25; color: #fff; }
.gh-s p { margin: 0 0 6px; font-size: 15px; line-height: 1.55; color: #cfd6ee; }
.gh-s .gh-cuadre span { color: var(--gh-claro); }
.gh-s .gh-cuadre i { background: rgb(255 255 255 / .25); }
.gh-s .gh-cuadre i.caja { background: #40c057; }
.gh-cta--oscuro p { margin: 16px auto 0; max-width: 62ch; color: var(--gh-claro); font-size: 14.5px; }
.gh-cta--oscuro p a { color: #fff; font-weight: 700; }
@media (max-width: 900px) {
.gh-s3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.gh-s3 { grid-template-columns: minmax(0, 1fr); }
}
.gh-marco { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: ". p1 ." "p4 c p2" ". p3 ."; gap: 18px 28px; align-items: center; max-width: 1040px; margin: 0 auto; }
.gh-marco::before { content: ""; position: absolute; inset: 15% 16%; border: 3px solid transparent; border-radius: 32px; background: linear-gradient(var(--gh-tinte), var(--gh-tinte)) padding-box, linear-gradient(135deg, #4c6ef5, #91a7ff 50%, #4c6ef5) border-box; }
.gh-placa { position: relative; z-index: 1; padding: 20px 20px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--gh-borde); box-shadow: 0 18px 36px -28px rgb(20 40 120 / .45); }
.gh-placa.p1 { grid-area: p1; }
.gh-placa.p2 { grid-area: p2; }
.gh-placa.p3 { grid-area: p3; }
.gh-placa.p4 { grid-area: p4; }
.gh-placa .n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--gh-azul); color: #fff; font-size: 13px; font-weight: 900; }
.gh-placa h3 { margin: 10px 0 4px; font-size: 18px; font-weight: 900; color: var(--gh-ink); }
.gh-placa p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; color: var(--gh-gris); }
.gh-marco__centro { grid-area: c; position: relative; z-index: 1; justify-self: center; width: min(100%, 220px); aspect-ratio: 1; border-radius: 28px; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 18px; text-align: center; background: var(--gh-noche); color: #fff; box-shadow: 0 30px 60px -30px rgb(13 20 48 / .7); }
.gh-marco__centro svg { width: 46px; height: 46px; color: #8fb0ff; }
.gh-marco__centro b { font-size: 20px; font-weight: 900; }
.gh-marco__centro small { font-size: 12.5px; line-height: 1.35; color: var(--gh-claro); }
.gh-mv-chips { display: flex; gap: 6px; }
.gh-mv-chips span { padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--gh-tinte); color: var(--gh-gris); }
.gh-mv-chips .on { background: var(--gh-azul); color: #fff; }
.gh-mv-limite { position: relative; height: 34px; }
.gh-mv-limite i { position: absolute; left: 0; right: 0; top: 8px; height: 10px; border-radius: 6px; background: linear-gradient(90deg, #40c057, #fab005 65%, #fa5252); }
.gh-mv-limite b { position: absolute; top: 2px; width: 3px; height: 22px; border-radius: 2px; background: var(--gh-ink); }
.gh-mv-limite em { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-style: normal; font-size: 11px; font-weight: 700; color: var(--gh-ink); }
.gh-mv-barras { display: grid; gap: 6px; }
.gh-mv-barras span { display: block; font-size: 11.5px; font-weight: 700; color: var(--gh-gris); margin-bottom: 2px; }
.gh-mv-barras i { display: block; height: 9px; border-radius: 5px; background: #c9cdd8; }
.gh-mv-barras i.v { background: var(--gh-verde); }
.gh-mv-canales { display: flex; gap: 8px; }
.gh-mv-canales img { width: 34px; height: 34px; object-fit: contain; padding: 5px; border-radius: 9px; background: var(--gh-tinte); }
.gh-mv-canales img.apagado { filter: grayscale(1); opacity: .35; }
.gh-metodo__pie--centro { max-width: 720px; margin: 34px auto 0; }
@media (max-width: 900px) {
.gh-marco { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "c c" "p1 p2" "p4 p3"; }
.gh-marco::before { display: none; }
.gh-marco__centro { width: 100%; aspect-ratio: auto; padding: 22px; }
}
@media (max-width: 600px) {
.gh-marco { grid-template-columns: minmax(0, 1fr); grid-template-areas: "c" "p1" "p2" "p3" "p4"; }
}
.gh-hero__grid { grid-template-columns: minmax(0, 520px) minmax(0, 440px); gap: 48px; }
@media (max-width: 767px) {
.gh-hero__grid { grid-template-columns: minmax(0, 1fr); }
}
.gh-desliza { display: none; }
@media (max-width: 600px) {
.gh-desliza { display: block; margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--gh-gris); }
.gh-bg-oscuro .gh-desliza { color: var(--gh-claro); }
.gh-desl { display: flex !important; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -20px; padding: 2px 20px 12px; scrollbar-width: none; }
.gh-desl::-webkit-scrollbar { display: none; }
.gh-desl > * { flex: 0 0 84%; scroll-snap-align: center; }
.gh-desl > [hidden] { display: none; }
.gh-mods.gh-desl { padding-top: 16px; }
.gh-proceso__foto img { aspect-ratio: 4 / 3; }
.gh-proceso__foto p { margin-top: -28px; font-size: 14px; }
.gh-yo__foto { max-width: 300px; margin-inline: auto; }
.gh-yo__foto img { aspect-ratio: 1 / 1; }
}


/* ==========================================================================
   PÁGINAS DE CANAL, /growth-partner/ Y /jorge-mayayo/ (02/11/2026)
   Mismo diseño que la portada: secciones/portada-que-hacemos, -encaje,
   -comparativa, -guias, -gp-caso y -gp-comparativa.
   ========================================================================== */
.gh-s3 > .gh-s:last-child:nth-child(3n+2) { grid-column: span 2; }
.gh-s3:has(> .gh-s:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gh-enc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.gh-enc__col { border-radius: 20px; padding: 30px; border: 1px solid var(--gh-borde); background: #fff; }
.gh-enc__col.si { border: 2px solid oklch(0.488 0.243 264.376 / .35); box-shadow: 0 24px 50px -34px rgb(30 50 160 / .45); }
.gh-enc__col.no { background: var(--gh-bg2); }
.gh-enc__col h3 { margin: 0 0 18px; font-size: 21px; font-weight: 900; color: var(--gh-ink); }
.gh-enc__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.gh-enc__col li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 15.5px; line-height: 1.55; color: var(--gh-tinta); }
.gh-enc__col li svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; margin-top: 1px; }
.gh-enc__col.si li svg { background: #e3f5ec; color: var(--gh-verde); }
.gh-enc__col.no li svg { background: #fdeceb; color: #d4483b; }
.gh-enc__col :is(b, strong) { color: var(--gh-ink); }
.gh-comp--filas { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: stretch; margin-top: 14px; }
.gh-comp--filas .gh-op { display: flex; flex-direction: column; }
.gh-comp--filas .gh-op ul { flex: 1; }
.gh-comp--filas .gh-op--yo { padding: 40px 28px 30px; }
.gh-guias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gh-guia { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 18px; background: #fff; border: 1px solid var(--gh-borde); text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
.gh-guia:hover { transform: translateY(-3px); border-color: oklch(0.488 0.243 264.376 / .4); box-shadow: 0 20px 40px -28px rgb(30 50 160 / .45); }
.gh-guia h3 { margin: 0; font-size: 17.5px; line-height: 1.3; font-weight: 900; color: var(--gh-ink); }
.gh-guia p { margin: 0; flex: 1; font-size: 14.5px; line-height: 1.55; color: var(--gh-gris); }
.gh-guia span { font-size: 14px; font-weight: 700; color: var(--gh-azul); }
.gh-lead--sep + .gh-lead--sep { margin-top: 14px; }
.gh-cifras--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gh-cifras--3 b { font-size: clamp(24px, 2.6vw, 34px); }
@media (max-width: 900px) {
.gh-s3 > .gh-s:last-child:nth-child(3n+2) { grid-column: auto; }
.gh-s3 > .gh-s:last-child:nth-child(odd) { grid-column: span 2; }
.gh-guias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gh-comp--filas { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; }
}
@media (max-width: 767px) {
.gh-enc, .gh-cifras--3 { grid-template-columns: minmax(0, 1fr); }
.gh-cifras--3 div + div { border-left: 0; border-top: 1px solid rgb(255 255 255 / .1); }
.gh-enc__col { padding: 24px 20px; }
}
@media (max-width: 600px) {
.gh-s3 > .gh-s:last-child:nth-child(odd), .gh-s3 > .gh-s:last-child:nth-child(3n+2) { grid-column: auto; }
.gh-s3:has(> .gh-s:nth-child(4):last-child), .gh-comp--filas, .gh-guias { grid-template-columns: minmax(0, 1fr); }
}
.gh-fq__cab:not(:has(.gh-faq__tabs)) .gh-h2 { max-width: 30ch; }

/* Guías (includes/pagina-guia.php) con el diseño nuevo, 02/11/2026 */
.gg-guia__titulo { font-weight: 900; letter-spacing: -.02em; color: var(--gh-ink); text-wrap: balance; }
.gh-guia-firma { display: flex; align-items: center; gap: 12px; }
.gh-guia-firma img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.gh-guia-cta { background: radial-gradient(80% 120% at 0% 0%, #23307a, transparent 60%), var(--gh-noche); border: 0; border-radius: 24px; padding: 28px; color: var(--gh-claro); box-shadow: 0 30px 60px -36px rgb(13 20 48 / .7); }
.gh-guia-cta img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid rgb(255 255 255 / .25); }
.gh-guia-cta .gg-guia__cta-titulo { color: #fff; font-weight: 900; }
.gh-guia-cta p { color: var(--gh-claro); }
@media (max-width: 600px) { .gh-guia-cta img { display: none; } }