/*
 * sobre-nosotros.css — Decibelio · tema hijo blocksy-child
 * Depende de: variables.css (db-variables) + main.css (db-main: .db-migas, .db-linea)
 * Carga: SOLO en is_page('sobre-nosotros') — condicional en functions.php
 * HTML: db_sn_hero (header:after) + db_sn_diferenciales/equipo (content:top).
 * El bloque "Cómo llegar" que cierra la página va aparte (como-llegar.css).
 */

/* ============================================================
   1. HERO — banner con foto de fondo (mismo patrón que el hero de categoría)
   La foto va en un <img> a sangre; el overlay gris es la regla única de main.css.
   El color de fondo queda solo como fallback mientras la foto carga.
   ============================================================ */
.db-sn-hero {
    position: relative;
    overflow: hidden;
    padding: 1.5rem var(--padding-contenedor) var(--espaciado-seccion);
    background-color: var(--color-verde-oscuro);
}
.db-sn-hero .db-sn-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}
.db-sn-hero__inner {
    position: relative;
    z-index: 2; /* por encima del overlay, que va a z-index 1 */
    max-width: var(--ancho-contenedor);
    margin-inline: auto;
}
/* Misma separación migas→H1 que los demás heros del sitio (categorías y contacto) */
.db-sn-hero__migas {
    margin-bottom: 3rem;
}
/* Migas sobre foto: la utilidad .db-migas viste para fondo claro */
.db-sn-hero .db-migas__crumb {
    color: var(--color-blanco-80);
}
.db-sn-hero .db-migas__crumb--actual {
    color: var(--color-blanco);
}
.db-sn-hero .db-migas__sep {
    color: var(--color-blanco-60);
}
/* El texto no se estira a todo el contenedor: se lee mejor acotado */
.db-sn-hero__texto {
    max-width: var(--ancho-lectura);
}
/* Badge y etiqueta: la piel viene de .db-badge (main.css); aquí solo el margen */
.db-sn-hero__badge {
    margin-bottom: 0.75rem;
}
.db-sn-hero__titulo {
    font-family: var(--font-titulos);
    font-size: var(--texto-h1);
    font-weight: var(--peso-extrabold);
    color: var(--color-blanco);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
}
.db-sn-hero__desc {
    font-size: var(--texto-parrafo-hero);
    color: var(--color-blanco-80);
    line-height: 1.6;
    margin: 0;
}
/* Año de fundación: párrafo propio bajo el texto, "Desde 2007" en verde suave.
   Única fuente del dato en la página: es información, nunca decoración. */
.db-sn-hero__ancla {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 1.5rem 0 0;
    color: var(--color-verde-suave);
}
.db-sn-hero__desde {
    font-family: var(--font-titulos);
    font-size: var(--texto-grande);
    font-weight: var(--peso-bold);
}
.db-sn-hero__anyo {
    font-family: var(--font-titulos);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: var(--peso-extrabold);
    line-height: 1;
    letter-spacing: -0.02em;
}

/* ============================================================
   2. TÍTULOS Y PROSA — compartidos por diferenciales y equipo
   ============================================================ */
.db-sn__titulo {
    font-family: var(--font-titulos);
    font-size: var(--texto-h2-seccion);
    font-weight: var(--peso-bold);
    color: var(--color-gris-texto);
    line-height: 1.25;
    margin: 0 0 1rem;
}
.db-sn-diferentes .db-sn__titulo,
.db-sn-equipo .db-sn__titulo {
    text-align: center;
}
/* Sus badges se centran igual (patrón del badge del variante columnas) */
.db-sn-diferentes__badge,
.db-sn-equipo__badge {
    display: block;
    width: fit-content;
    margin: 0 auto 0.75rem;
}
.db-sn__parrafo {
    color: var(--color-gris-texto);
    line-height: 1.7;
    margin: 0 0 1rem;
}
.db-sn__parrafo:last-child { margin-bottom: 0; }

/* El título del bloque de reseñas viene de resenas.css a --texto-h2 (tamaño de banner) y
   descuadra con los títulos de esta página. Se iguala SOLO aquí: este archivo se carga
   únicamente en /sobre-nosotros/, así que home, categorías, ICT2 y el hub no se tocan.
   Gana por especificidad (0,3,0 > 0,2,0), no por orden de carga. */
.db-resenas .db-resenas__intro .db-resenas__titulo {
    font-size: var(--texto-h2-seccion);
}

/* ============================================================
   3. DIFERENCIALES — H2 + grid de 4 tarjetas (2×2), fondo gris
   El fondo gris es lo que hace visibles las tarjetas, que son blancas.
   ============================================================ */
.db-sn-diferentes {
    padding: var(--espaciado-seccion) var(--padding-contenedor);
    background-color: var(--color-gris-fondo);
}
.db-sn-diferentes__inner {
    max-width: var(--ancho-contenedor);
    margin-inline: auto;
}
/* Versión compacta: menos padding y sombra suave — el contenido y el número de fichas no cambian */
.db-sn-diferentes__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1rem, 2vw, 1.25rem);
    margin-top: 2rem;
}
.db-sn-diferentes__item {
    background-color: var(--color-blanco);
    border-radius: var(--radio-tarjeta);
    padding: clamp(1.1rem, 2vw, 1.4rem);
    box-shadow: var(--sombra-tarjeta-suave);
}
/* Icono de la ficha — cuadro verde en main.css (.db-sn-diferentes__item-icono); aquí solo el margen */
.db-sn-diferentes .db-sn-diferentes__item-icono {
    margin-bottom: 1rem;
}
.db-sn-diferentes__item-titulo {
    font-family: var(--font-titulos);
    font-size: var(--texto-base);
    font-weight: var(--peso-semibold);
    color: var(--color-verde-oscuro);
    margin: 0 0 0.75rem;
}
.db-sn-diferentes__item-texto {
    font-size: var(--texto-pequeño);
    color: var(--color-gris-texto);
    line-height: 1.6;
    margin: 0;
}
/* El enlace inline (verde-oscuro, subrayado, hover azul-acento) usa la
   utilidad agrupada de main.css — aquí no se redefine. */

/* ============================================================
   4. EL EQUIPO — 2 columnas (texto + foto); sin foto, 1 columna
   El modificador --con-foto lo pone el PHP según file_exists.
   ============================================================ */
.db-sn-equipo {
    padding: var(--espaciado-seccion) var(--padding-contenedor);
    background-color: var(--color-blanco);
}
.db-sn-equipo__inner {
    max-width: var(--ancho-lectura);
    margin-inline: auto;
}
.db-sn-equipo--con-foto .db-sn-equipo__inner {
    max-width: var(--ancho-contenedor);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}
.db-sn-equipo__foto img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra-tarjeta);
}

/* ============================================================
   5. RESPONSIVE — móvil/tablet: grids a una columna
   El hero no aparece aquí: su contenido va en un solo flujo y no tiene columnas.
   ============================================================ */
@media (max-width: 768px) {
    .db-sn-diferentes__grid { grid-template-columns: 1fr; }
    .db-sn-equipo--con-foto .db-sn-equipo__inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}