/*
 * main.css — Decibelio
 * Tema hijo: blocksy-child
 * Depende de: variables.css (db-variables)
 * Carga: todas las páginas
 *
 * Estilos globales reutilizables.
 * Apariencia en utilidades · espaciado en componentes.
 */

/* ============================================================
   LÍNEA DECORATIVA — .db-linea
   Clase utilitaria para líneas horizontales de sección.
   Apariencia aquí · márgenes en el componente que la use.
   Modificadores:
     .db-linea--h2  → línea bajo títulos H2 de sección
     .db-linea--h3  → línea bajo títulos H3 / subcomponentes
   ============================================================ */
.db-linea {
    display: block;
    background-color: var(--color-verde);
    border-radius: var(--linea-radio);
    margin-inline: auto;
}

.db-linea--h2 {
    width: var(--linea-ancho-h2);
    height: var(--linea-alto-h2);
}

.db-linea--h3 {
    width: var(--linea-ancho-h3);
    height: var(--linea-alto-h3);
}

/* ============================================================
   BOTÓN CTA — forma común (tamaño/caja) · el color va por variante
   Tamaño/forma compartidos por: heros · offcanvas · los dos botones del
   banner de cierre · CTA de soluciones · CTA de ICT2. El color/piel va en
   cada componente. Lo contextual (posición, ancho en móvil) queda en cada
   archivo. El offcanvas conserva su propio padding (bloque a ancho del
   panel) vía su override de header.css, de mayor especificidad.
   ============================================================ */
.db-hero__cta,
.db-cat-hero__cta,
.db-cat-hero__cta-sec,
.db-offcanvas-cta,
.db-cat-bloque__cta,
.db-cat-bloque__cta-tel,
.db-cat-soluciones__cta,
.db-servicios-credencial__cta,
.db-ict2__cta,
.db-contacto-form__submit {
    font-family: var(--font-cuerpo);
    font-size: 1rem;
    font-weight: var(--peso-bold);
    letter-spacing: 0.02em;
    border-radius: var(--radio-boton);
    padding: 1rem 2rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color var(--transicion-rapida), border-color var(--transicion-rapida), color var(--transicion-rapida), box-shadow var(--transicion-rapida);
}

/* Piel VERDE primaria — reposo: fondo verde · texto verde-oscuro.
   Compartida por heros, offcanvas, «Contactar ahora» del cierre y el CTA de
   soluciones (folding: antes soluciones repetía estas tres propiedades). */
.db-hero__cta,
.db-cat-hero__cta,
.db-offcanvas-cta,
.db-cat-bloque__cta,
.db-cat-soluciones__cta,
.db-servicios-credencial__cta,
.db-contacto-form__submit {
    color: var(--color-verde-oscuro);
    background-color: var(--color-verde);
    border: 2px solid var(--color-verde);
}

/* Hover invertido — común a los cinco. El color explícito (:hover → 0,2,0)
   gana a la regla genérica a:hover de Blocksy (--theme-link-hover-color, azul);
   sin él, estos <a> heredarían ese azul (mismo caso que ICT2). */
.db-hero__cta:hover,
.db-cat-hero__cta:hover,
.db-offcanvas-cta:hover,
.db-cat-bloque__cta:hover,
.db-cat-soluciones__cta:hover,
.db-servicios-credencial__cta:hover,
.db-contacto-form__submit:hover {
    background-color: var(--color-verde-oscuro);
    border-color: var(--color-verde-oscuro);
    color: var(--color-verde);
}

/* Sombra en hover — solo los CTAs primarios; soluciones (secundario) va sin ella */
.db-hero__cta:hover,
.db-cat-hero__cta:hover,
.db-offcanvas-cta:hover,
.db-cat-bloque__cta:hover,
.db-contacto-form__submit:hover {
    box-shadow: 0 2px 12px color-mix(in srgb, var(--color-verde-oscuro) 25%, transparent);
}

/* Botón "Llamar por teléfono" del banner — blanco con borde verde-oscuro
   (contrasta sobre el fondo claro del banner) · hover invertido */
.db-cat-bloque__cta-tel {
    color: var(--color-verde-oscuro);
    background-color: var(--color-blanco);
    border: 1px solid color-mix(in srgb, var(--color-verde-oscuro) 20%, transparent);
}

.db-cat-bloque__cta-tel:hover {
    background-color: var(--color-verde-oscuro);
    border-color: var(--color-verde-oscuro);
    color: var(--color-blanco);
}

.db-cat-bloque__cta-tel svg {
    width: 1.15em;
    height: 1.15em;
}

@media (prefers-reduced-motion: reduce) {
    .db-hero__cta,
    .db-cat-hero__cta,
    .db-cat-hero__cta-sec,
    .db-offcanvas-cta,
    .db-cat-bloque__cta,
    .db-cat-bloque__cta-tel,
    .db-cat-soluciones__cta,
    .db-servicios-credencial__cta,
    .db-ict2__cta,
    .db-contacto-form__submit {
        transition: none;
    }
}

/* ============================================================
   BADGE — .db-badge + variantes
   Base de medidas común; cada badge lleva .db-badge .db-badge--X
   y su clase de sección queda solo para lo contextual (margin, align).
   ============================================================ */
.db-badge {
    font-family: var(--font-cuerpo);
    font-size: var(--texto-muy-pequeño);
    font-weight: var(--peso-bold);
    font-stretch: var(--ancho-condensado);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: var(--radio-pildora);
}

/* Variante banner — sobre fondo oscuro (heros + banner de cierre):
   fondo translúcido + borde + texto blanco + puntito verde */
.db-badge--banner {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--color-blanco-separador);
    border: 1px solid var(--color-blanco-30);
    color: var(--color-blanco);
    padding: 0.2rem 0.9rem;
}

/* Variante sólida — sobre fondo claro: fondo verde-suave + texto verde-oscuro.
   Sin puntito de serie: quien lo necesite compone con --punto. */
.db-badge--solido {
    display: inline-block;
    background-color: var(--color-verde-suave);
    color: var(--color-verde-oscuro);
    padding: 0.2rem 1rem;
}

/* Punto verde de marca — de la variante banner (la única que lo lleva) */
.db-badge--banner::before {
    content: '';
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background-color: var(--color-verde);
}

/* ============================================================
   OVERLAY DE FOTOS — tinte gris sobre la foto
   Fuente única del overlay: hero de la Home (.db-hero), hero de
   categoría (.db-cat-hero), hero de Sobre Nosotros (.db-sn-hero),
   sección ICT2 (.db-ict2) y las fotos de las fichas de la rejilla
   de /servicios/ (.db-servicios-areas__media).
   Pseudo-elemento ::after a sangre, sobre la foto y bajo el contenido
   (z-index 2). Cada wrapper aporta position:relative + overflow:hidden.
   ============================================================ */
.db-hero::after,
.db-cat-hero::after,
.db-sn-hero::after,
.db-ict2::after,
.db-servicios-areas__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--color-gris-texto);
    opacity: 0.60;
    z-index: 1;
    pointer-events: none;
}

/* ============================================================
   MIGAS DE PAN — .db-migas
   Utilidad para migas sobre fondo claro (Contacto y páginas legales).
   Apariencia aquí · márgenes en el componente que la use.
   La variante sobre foto (hero de categoría) vive en categoria-hero.css.
   ============================================================ */
.db-migas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--texto-muy-pequeño);
}
.db-migas__crumb {
    color: var(--color-gris-medio);
    text-decoration: none;
    transition: color var(--transicion-rapida);
}
a.db-migas__crumb:hover { color: var(--color-verde-oscuro); }
.db-migas__crumb--actual {
    color: var(--color-gris-texto);
    font-weight: var(--peso-semibold);
}
.db-migas__sep { color: var(--color-gris-medio); }

/* ============================================================
   PÁGINA DE TEXTO — caja a ancho de lectura y cabecera
   Forma común de las páginas de texto sobre fondo claro: Contacto y
   legales (cookies · privacidad · aviso legal). Aquí lo compartido —
   caja, ancho y tipografía del H1 y de la entradilla; en cada CSS
   queda lo contextual: alineación, márgenes y piezas propias
   (badge en Contacto · versión y filete en legales).
   ============================================================ */
.db-contacto,
.db-legal {
    padding: 2rem var(--padding-contenedor) var(--espaciado-seccion);
    background-color: var(--color-blanco);
}
.db-contacto__inner,
.db-legal__inner {
    max-width: var(--ancho-lectura);
    margin-inline: auto;
}
.db-contacto__titulo,
.db-legal__titulo {
    font-family: var(--font-titulos);
    font-size: var(--texto-h1);
    font-weight: var(--peso-extrabold);
    color: var(--color-gris-texto);
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.db-contacto__desc,
.db-legal__intro {
    font-size: var(--texto-parrafo-hero);
    color: var(--color-gris-medio);
    line-height: 1.5;
}

/* ============================================================
   ENLACES INLINE DE PROSA — cross-links dentro de párrafos
   Los <a> vienen del texto (wp_kses, sin clase propia): se estilan por
   selector agrupado sobre su contenedor. Fuente única de los tres contextos
   con enlaces de prosa (cuerpo de categoría, legales, diferenciales de Sobre
   Nosotros). Cada selector conserva su especificidad, como antes.
   ============================================================ */
.db-cat-contenido .db-cat-bloque__parrafo a,
.db-legal__parrafo a,
.db-sn-diferentes__item-texto a {
    color: var(--color-verde-oscuro);
    font-weight: var(--peso-semibold);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transicion-rapida);
}
.db-cat-contenido .db-cat-bloque__parrafo a:hover,
.db-legal__parrafo a:hover,
.db-sn-diferentes__item-texto a:hover {
    color: var(--color-azul-acento);
}

@media (prefers-reduced-motion: reduce) {
    .db-cat-contenido .db-cat-bloque__parrafo a,
    .db-legal__parrafo a,
    .db-sn-diferentes__item-texto a {
        transition: none;
    }
}

/* ============================================================
   CUADRO DE ICONO — fondo verde claro redondeado
   Cuadro que enmarca un icono (o número): hub /servicios/ (espacios · proceso)
   y diferenciales de Sobre Nosotros. El margen inferior queda en cada contexto.
   ============================================================ */
.db-servicios-espacios .db-servicios-espacios__icono,
.db-servicios-proceso .db-servicios-proceso__num,
.db-sn-diferentes .db-sn-diferentes__item-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radio-tarjeta);
    background-color: var(--color-verde-suave);
    color: var(--color-verde-oscuro);
}
.db-servicios-espacios .db-servicios-espacios__icono svg,
.db-sn-diferentes .db-sn-diferentes__item-icono svg {
    width: 26px;
    height: 26px;
}

/* ============================================================
   CORRECCIONES BLOCKSY
   Sobrescrituras puntuales de estilos del tema padre que
   generan comportamientos no deseados en esta arquitectura.
   ============================================================ */

/* #main-container usa min-height: 100vh + flex-direction: column.
   Su hijo site-main tiene flex-grow: 1 — crece para absorber el
   espacio sobrante cuando el contenido total < 100vh.
   Con nuestro footer custom fuera de site-main y el hero
   (75vh) como hermano directo en el flex container, ese espacio
   libre aparece como un gap entre la última sección y el footer,
   proporcional a la altura del viewport.
   Solución: min-height: auto elimina el espacio libre garantizado;
   site-main vuelve a su altura natural sin expandirse. */
#main-container {
    min-height: auto;
}

/* Content area nativo del the_content — colapsar el wrapper vacío (sin
   display:none, prohibido por SEO). En la home y en las páginas con chrome
   propio (categoría, ICT2, hub /servicios/, Contacto y legales) el editor
   va vacío: todo el contenido se inyecta por hooks,
   pero Blocksy aún renderiza el wrapper con su vertical-spacing y deja una
   franja entre el último bloque y el footer. Se anula solo su espaciado; el
   wrapper permanece en el DOM. */
body.home .ct-container-full:has(> article.page),
body.db-chrome-propio .ct-container-full:has(> article.page) {
    padding-block: 0;
}