/* ══ Base del landing "gd" — COMÚN A TODOS LOS TEMAS ═════════════════════════
   La carga index.php ANTES del css/style.css del tema, así que cualquier regla
   de aquí se puede pisar desde el tema.

   El tema solo declara su paleta:
       --gd-gold  --gd-gold-light  --gd-gold-dark  --gd-accent  --gd-red
       --gd-bg  --gd-bg-rgb  --gd-card  --gd-card-border  --gd-text-muted  --gd-ink
   (--gd-bg-rgb son los tres canales sueltos del fondo: "15 23 42". Lo usa el velo
   del hero de foto, que necesita el mismo color con alfa.)

   Los prefijos gd-/--gd- vienen del primer tema que estrenó esta plantilla
   (grandderby.net) y se conservan en todos por compatibilidad. */


/* ── Reset wrappers de index.php para secciones full-width ───────────────── */
body { background-color: var(--gd-bg); }

.container,
#sectionContenido {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    width: 100% !important;
}

main { padding: 0 !important; margin: 0 !important; }

/* ── Hero de imagen (imgPortada.jpg ya trae la marca: logo del caballo + "La Nueva
   Hípica Ganadora" + montaje deportivo, negro/dorado). A sangre, sin marco. ── */
.gd-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 0 3rem;            /* imagen a sangre: sin padding lateral/superior */
}

.gd-hero-img {
    position: relative;
    width: 100%;
    max-width: none;             /* ocupa todo el ancho de la pantalla */
    margin: 0 0 2rem;
}

.gd-hero-img img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
    border: none;
    box-shadow: none;
}

/* Funde el borde inferior de la imagen hacia el fondo negro del body → sin corte duro
   (ahora ambos son negros, así que el empalme es prácticamente invisible) */
.gd-hero-img::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 16%;
    background: linear-gradient(to bottom, transparent, var(--gd-bg));
    pointer-events: none;
}

.gd-hero-cta { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.8rem; padding: 0 1.25rem; }

.gd-subtitle {
    color: var(--gd-text-muted);
    font-size: 1.05rem;
    max-width: 480px;
    line-height: 1.7;
    margin: 0 auto 2rem;
    padding: 0 1.5rem;
}

/* ── Botones ─────────────────────────────────────────────────────────────── */
.gd-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--gd-gold);
    color: var(--gd-ink);
    font-weight: 700;
    font-size: 1.05rem;
    padding: .9rem 2.2rem;
    border-radius: .75rem;
    text-decoration: none;
    transition: background .15s;
    border: none;
    cursor: pointer;
}

.gd-btn:hover  { background: var(--gd-gold-light); color: var(--gd-ink); }
.gd-btn:active { background: var(--gd-gold-dark); }

.gd-btn-outline {
    display: inline-flex;
    align-items: center;
    background: transparent;
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    padding: .9rem 2.2rem;
    border-radius: .75rem;
    text-decoration: none;
    border: 1px solid var(--gd-card-border);
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.gd-btn-outline:hover { border-color: var(--gd-gold); color: var(--gd-gold-light); }

/* ── Sección productos ───────────────────────────────────────────────────── */
.gd-features {
    padding: 0 1.5rem 4rem;
    max-width: 1024px;
    margin: 0 auto;
    width: 100%;
}

.gd-section-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.gd-section-divider hr {
    flex: 1;
    border: none;
    height: 1px;
    background: var(--gd-card-border);
    margin: 0;
}

.gd-section-divider span {
    color: var(--gd-gold);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.gd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.gd-card {
    background: var(--gd-card);
    border: 1px solid var(--gd-card-border);
    border-radius: 1rem;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    transition: border-color .15s, transform .15s;
}

/* Marca de agua: imagen del producto de fondo, tenue, detrás del texto.
   Cada card define su imagen con la variable --gd-wm en su atributo style. */
.gd-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--gd-wm, none);
    background-repeat: no-repeat;
    background-position: var(--gd-wm-pos, center right);
    background-size: var(--gd-wm-size, cover);
    opacity: .20;
    /* Se apaga hacia la izquierda para que el texto se lea siempre encima. */
    -webkit-mask-image: linear-gradient(to left, #000 0%, #000 25%, transparent 80%);
            mask-image: linear-gradient(to left, #000 0%, #000 25%, transparent 80%);
    z-index: 0;
    pointer-events: none;
}

.gd-card > * { position: relative; z-index: 1; }

.gd-card:hover {
    border-color: var(--gd-gold);
    transform: translateY(-2px);
}

.gd-card:hover::before { opacity: .34; }

.gd-card-accent {
    width: 38px;
    height: 3px;
    background: var(--gd-gold);
    border-radius: 2px;
    margin-bottom: 1.1rem;
}

.gd-card h3 {
    font-family: 'Michroma', sans-serif;
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    margin-bottom: .6rem;
}

.gd-card p {
    color: var(--gd-text-muted);
    font-size: .85rem;
    line-height: 1.5;
    margin: 0;
}

/* ── CTA final ───────────────────────────────────────────────────────────── */
.gd-cta {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    padding: 1rem 1.5rem 5rem;
}

.gd-cta h2 {
    font-family: 'Michroma', sans-serif;
    color: #fff;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 900;
    margin-bottom: 1rem;
}

.gd-cta p {
    color: var(--gd-text-muted);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 440px;
    margin: 0 auto 2rem;
}

.gd-cta-actions {
    display: flex;
    gap: .75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Botones del nav: ghost coordinado, compacto ─────────────────────────── */
.gd-nav-btn {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    font-size: 13px;
    padding: 6px 16px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
    background: transparent;
    color: var(--gd-gold);
    border: 1.5px solid var(--gd-gold);
}

.gd-nav-btn:hover { background: var(--gd-gold); color: var(--gd-ink); }

/* El secundario NO lleva colores propios: hereda el texto apagado y el borde
   de tarjeta del tema. Antes eran dos literales azules heredados de grandderby
   y desentonaban en cuanto la marca no era azul. */
.gd-nav-btn--reg {
    font-weight: 600;
    color: var(--gd-text-muted);
    border-color: var(--gd-card-border);
}

.gd-nav-btn--reg:hover { background: transparent; border-color: var(--gd-gold); color: var(--gd-gold); }

/* ── Bono destacado (sección aparte) ─────────────────────────────────────── */
.gd-bono {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.25rem 2rem;
    text-align: left;
    max-width: 720px;
    margin: 0 auto;
    background: linear-gradient(135deg,
                color-mix(in srgb, var(--gd-gold) 16%, transparent),
                color-mix(in srgb, var(--gd-gold) 5%, transparent));
    border: 1px solid var(--gd-gold);
    border-radius: 1.25rem;
    padding: 1.75rem 2rem;
}

.gd-bono-big {
    font-family: 'Michroma', sans-serif;
    font-size: clamp(2rem, 7vw, 3.2rem);
    font-weight: 900;
    color: var(--gd-gold);
    line-height: 1;
    white-space: nowrap;
}

.gd-bono-big span { color: var(--gd-gold-light); font-weight: 400; }

.gd-bono-text h3 {
    font-family: 'Michroma', sans-serif;
    color: #fff;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-bottom: .4rem;
}

.gd-bono-text p {
    color: var(--gd-text-muted);
    font-size: .9rem;
    line-height: 1.5;
    max-width: 360px;
    margin: 0;
}

/* ── Varios bonos en fila ────────────────────────────────────────────────────
   Un `.gd-bono` suelto se centra a 720px; dentro de `.gd-bonos` se estira a su
   columna y las tarjetas quedan a la misma altura. Con `auto-fit` bajan solas a
   una columna en cuanto no caben dos, sin necesidad de un @media.
   El minimo va como `min(300px, 100%)` y no como `300px` a secas: con el valor
   fijo la columna no puede encoger por debajo de 300px y en un movil de 390
   -donde `.gd-features` ya se lleva 3rem de relleno- la rejilla desborda la
   pantalla y aparece scroll horizontal. */
.gd-bonos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 1.25rem;
    align-items: stretch;
    max-width: 980px;
    margin: 0 auto;
}

.gd-bonos .gd-bono {
    max-width: none;
    margin: 0;
    height: 100%;
    justify-content: flex-start;
    gap: 1rem 1.5rem;
    padding: 1.6rem 1.75rem;
}

/* El bloque de texto tiene que poder ENCOGERSE (`flex: 1 1 220px`): con su ancho
   natural la pareja numero + texto no cabe en media tarjeta y el flex la partia
   en dos lineas, dejando el numero centrado encima. Cuando de verdad no cabe
   -una sola columna en el movil- sigue envolviendo, pero alineado a la izquierda
   y no al centro. */
.gd-bonos .gd-bono-big     { font-size: clamp(1.9rem, 6vw, 2.6rem); }
.gd-bonos .gd-bono-text    { flex: 1 1 220px; min-width: 0; }
.gd-bonos .gd-bono-text h3 { font-size: .92rem; }
.gd-bonos .gd-bono-text p  { max-width: 300px; }

/* ── Marca del nav (logo, con o sin wordmark de texto al lado) ───────────────
   La altura del logo la fija cada tema en su style.css: cada archivo trae su
   propio margen de aire dentro del PNG y no hay una medida que valga para
   todos. */
.gd-marca {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
}

.gd-marca img { width: auto; }

/* ── Wordmark de texto del nav (placeholder hasta el logo final) ──────────────
   Cuando llegue el logo definitivo: reemplazar el <a class="gd-wordmark"> del
   header.php por <img src="img/logoNav.png" class="h-12 sm:h-16 w-auto"> (ver
   fortunaplay/grandderby). */
.gd-wordmark {
    display: inline-flex;
    flex-direction: column;
    line-height: 1;
    text-decoration: none;
}

.gd-wordmark b {
    font-family: 'Michroma', sans-serif;
    font-weight: 700;
    font-size: clamp(15px, 4.5vw, 20px);
    letter-spacing: .04em;
    color: var(--gd-gold);
    text-transform: uppercase;
}

.gd-wordmark span {
    font-family: 'Michroma', sans-serif;
    font-size: 9px;
    letter-spacing: .30em;
    color: var(--gd-text-muted);
    text-transform: uppercase;
    margin-top: 4px;
}

/* ── Franja "Últimos ganadores" (themes/_ultimosGanadores.php) ───────────────
   Solo traduce la paleta de la marca a los nombres que espera el componente;
   no inventa ni un color. Si se recolorea el tema arriba, la franja va detrás. */
:root {
    --lw-bg:         var(--gd-bg);
    --lw-card:       var(--gd-card);
    --lw-border:     var(--gd-card-border);
    --lw-accent:     var(--gd-gold);
    --lw-accent-ink: var(--gd-ink, var(--gd-bg));
    --lw-text:       #ffffff;
    --lw-muted:      var(--gd-text-muted);
    --lw-win:        #5fe08a;
}

/* ══ Añadidos de la base (no estaban en los seis primeros temas) ═════════════ */

/* ── Hero de FOTO ─────────────────────────────────────────────────────────────
   Para los clientes cuya imgPortada es una fotografía sin marca dentro (el caso
   de casi todos los temas viejos). La foto va a sangre de fondo y el mensaje
   encima; el velo la oscurece hasta que el texto se lee sin esfuerzo y funde el
   borde inferior con el fondo de la página. Los temas cuya portada YA trae la
   marca (grandderby, hipicaganadora…) siguen usando .gd-hero + .gd-hero-img. */
.gd-hero--foto {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(400px, 58vh, 560px);
    padding: 0;
    overflow: hidden;
}

.gd-hero-fondo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.gd-hero-fondo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
                rgb(var(--gd-bg-rgb, 0 0 0) / .72),
                rgb(var(--gd-bg-rgb, 0 0 0) / .88) 58%,
                var(--gd-bg));
}

.gd-hero-cuerpo {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 780px;
    padding: 4.5rem 1.5rem 3.5rem;
}

.gd-hero-title {
    font-family: 'Michroma', sans-serif;
    color: #fff;
    font-size: clamp(1.75rem, 5.5vw, 3.1rem);
    font-weight: 900;
    line-height: 1.18;
    margin: 0 0 1.1rem;
}

.gd-hero-title em { color: var(--gd-gold); font-style: normal; }

.gd-hero--foto .gd-subtitle { margin-bottom: 0; }

/* Etiqueta corta sobre el título (sin icono: el texto se basta). */
.gd-badge {
    display: inline-block;
    margin-bottom: 1.4rem;
    padding: .45rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--gd-card-border);
    background: rgb(var(--gd-bg-rgb, 0 0 0) / .55);
    color: var(--gd-gold);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* ── Beneficios ("por qué elegirnos"): mismas tarjetas, sin marca de agua ──── */
.gd-benefits .gd-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ── Nav en pantallas estrechas ──────────────────────────────────────────────
   A 390px la marca y los dos botones se tocaban. Se encoge lo prescindible: la
   tipografia del wordmark y el relleno de los botones, sin quitar ninguno de
   los dos. Va AL FINAL del archivo a proposito: un @media no suma
   especificidad, asi que puesto antes lo pisaba el clamp() de .gd-wordmark b. */
@media (max-width: 430px) {
    .gd-wordmark b    { font-size: 14px; letter-spacing: .02em; }
    .gd-wordmark span { font-size: 7.5px; letter-spacing: .20em; margin-top: 3px; }
    .gd-nav-btn       { font-size: 12px; padding: 6px 11px; }
}

/* ── Botones en pantallas estrechas ──────────────────────────────────────────
   Con el relleno de escritorio (2.2rem por lado) la pareja "Registrate gratis"
   + "Ingresar" mide mas que un movil de 390px y el segundo boton se salia por
   la derecha. Aqui se aprieta el relleno para que los dos quepan en una linea.
   Va al final por lo mismo que el bloque de arriba: un @media no suma
   especificidad y antes lo pisaria la regla base de .gd-btn. */
@media (max-width: 430px) {
    .gd-btn,
    .gd-btn-outline { font-size: .95rem; padding: .8rem 1.35rem; }
}