/*
 * categoria-hero.css — Decibelio
 * Tema hijo: blocksy-child
 * Depende de: variables.css (db-variables)
 * Carga: SOLO en páginas de categoría — condicional en functions.php
 *
 * El HTML se inyecta vía hook blocksy:header:after (db_categoria_hero).
 * Tratamiento visual heredado del hero de la Home (imagen de fondo +
 * overlay gris compartido en main.css). Layout propio: breadcrumb + texto.
 *
 * REGLAS:
 * - Sin !important nunca
 * - Sin hardcode de colores — solo var(--color-*)
 * - Sin hardcode de fuentes — solo var(--font-*)
 * - Especificidad por selectores encadenados desde .db-cat-hero
 */

/* ============================================================
   HERO CATEGORÍA — WRAPPER
   ============================================================ */
/* Altura común de todos los banners en PC (7 heros: 5 categorías, hub e ICT2).
   En rem y no en vh a propósito: el objetivo es una altura constante que no
   dependa del alto de la ventana — con vh cada pantalla daba un suelo distinto
   y mandaba el contenido, que difiere hasta 94px entre páginas.
   En ≤1024px pasa a auto (altura por contenido) en la media query de tablet. */
.db-cat-hero {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    min-height: 36rem;
    background-color: var(--color-verde-oscuro);
}

/* ============================================================
   IMAGEN DE FONDO
   ============================================================ */
.db-cat-hero .db-cat-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

/* ============================================================
   CONTENEDOR DE CONTENIDO
   Contenido alineado con las secciones vía padding-inline max/calc
   (mismo patrón que el header y el hero de la home; ver hero.css).
   ============================================================ */
.db-cat-hero .db-cat-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-block: 2rem 3rem;
    padding-inline: max(var(--padding-contenedor), calc((100% - var(--ancho-contenedor)) / 2));
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.db-cat-hero .db-cat-hero__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 3rem;
    font-size: var(--texto-muy-pequeño);
}

.db-cat-hero .db-cat-hero__crumb {
    color: var(--color-blanco-80);
    text-decoration: none;
    transition: color var(--transicion-rapida);
}

.db-cat-hero a.db-cat-hero__crumb:hover {
    color: var(--color-verde);
}

.db-cat-hero .db-cat-hero__crumb--actual {
    color: var(--color-blanco-80);
    font-weight: var(--peso-semibold);
}

.db-cat-hero .db-cat-hero__sep {
    color: var(--color-blanco-60);
}

/* ============================================================
   TEXTO — badge, H1, párrafo
   ============================================================ */
.db-cat-hero .db-cat-hero__texto {
    display: flex;
    flex-direction: column;
}

/* Badge — estilo común en main.css (.db-badge--banner); aquí solo lo contextual */
.db-cat-hero .db-cat-hero__badge {
    align-self: flex-start;
    margin-bottom: 1rem;
}

/* H1 — tamaño único del sitio vía el token compartido --texto-h1 */
.db-cat-hero .db-cat-hero__title {
    font-family: var(--font-titulos);
    font-size: var(--texto-h1);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--color-blanco);
    margin: 0 0 1rem;
    max-width: 720px;
}

/* Destacado verde entre H1 y párrafo (hub /servicios/) — mismo rol que el subtítulo del hero de home */
.db-cat-hero .db-cat-hero__destacado {
    font-family: var(--font-cuerpo);
    font-size: 1.1rem;
    font-weight: var(--peso-semibold);
    color: var(--color-verde);
    line-height: 1.5;
    margin: 0 0 1rem;
    max-width: 640px;
}

/* Párrafo descriptivo */
.db-cat-hero .db-cat-hero__desc {
    font-family: var(--font-cuerpo);
    font-size: var(--texto-parrafo-hero);
    font-weight: 400;
    line-height: 1.7;
    color: var(--color-blanco-80);
    margin: 0;
    max-width: 640px;
}

/* Posición del CTA — hijo directo de __texto: sirve al CTA suelto (categoría,
   "Hablemos") y al wrapper de dos CTAs (hub /servicios/), sin duplicar en el interno */
.db-cat-hero .db-cat-hero__texto > .db-cat-hero__cta,
.db-cat-hero .db-cat-hero__ctas {
    align-self: flex-start;
    margin-top: 1.75rem;
}

/* Fila de dos CTAs — hub /servicios/ (en móvil se apilan a ancho completo) */
.db-cat-hero .db-cat-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* CTA secundario — ghost sobre el fondo oscuro del banner; se rellena en hover.
   La forma (tamaño/caja) la comparte con el resto de CTAs desde main.css. */
.db-cat-hero .db-cat-hero__cta-sec {
    color: var(--color-blanco);
    background-color: transparent;
    border: 2px solid var(--color-blanco-30);
}

.db-cat-hero .db-cat-hero__cta-sec:hover {
    background-color: var(--color-blanco);
    border-color: var(--color-blanco);
    color: var(--color-verde-oscuro);
}

/* ============================================================
   RESPONSIVE — ESCRITORIO (migas ancladas arriba)
   Con la altura fija del wrapper, el inner se estira en vez de centrarse:
   las migas quedan a distancia constante del borde superior en las 7
   páginas, en lugar de subir o bajar según lo que mida cada texto.
   El bloque de texto se centra en el espacio restante con margin-block:
   auto — se queda donde ya estaba, porque el margen inferior de las migas
   se conserva. Por debajo de 1025px el hero es de altura automática: sin
   espacio sobrante esto no tendría efecto, y tablet y móvil no se tocan.
   ============================================================ */
@media (min-width: 1025px) {
    .db-cat-hero {
        align-items: stretch;
    }

    .db-cat-hero .db-cat-hero__inner {
        display: flex;
        flex-direction: column;
        padding-top: 1.5rem;
    }

    .db-cat-hero .db-cat-hero__texto {
        margin-block: auto;
    }
}

/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */
@media (max-width: 1024px) {
    .db-cat-hero {
        min-height: auto; /* tablet (iPad mini incluido): altura por contenido, sin el suelo de PC */
    }

    .db-cat-hero .db-cat-hero__inner {
        padding-block: 1.5rem 2.5rem;
    }
}

/* ============================================================
   RESPONSIVE — MÓVIL (teléfonos, ≤767.98 — excluye el iPad mini)
   ============================================================ */
@media (max-width: 767.98px) {
    .db-cat-hero .db-cat-hero__inner {
        padding-block: 1rem 2rem;
    }

    .db-cat-hero .db-cat-hero__breadcrumb {
        margin-bottom: 2.5rem;
    }

    .db-cat-hero .db-cat-hero__cta,
    .db-cat-hero .db-cat-hero__cta-sec {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   ACCESIBILIDAD — REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .db-cat-hero a.db-cat-hero__crumb {
        transition: none;
    }
}