/* =================================================================
   content/css/contenido-detalle.css
   =================================================================
   Estilos para la ESTRUCTURA general de la página de detalle
   (content/contenido.php): el encabezado con breadcrumb y título.

   Esto es DISTINTO del CSS específico de cada contenido (como
   electricidad.css), que solo afecta al HTML interno incluido
   dentro de <div class="contenido-cuerpo">.

   Este archivo es opcional de cargar; si quieres usarlo, agrega en
   content/contenido.php la línea:
     <link rel="stylesheet" href="/content/css/contenido-detalle.css">
   ================================================================= */

.contenido-detalle-header {
    background: var(--dark-color, #0B1320);
    color: #fff;
    padding: 36px 0;
    margin-bottom: 30px;
}

.contenido-detalle-header .breadcrumb {
    display: flex;
    gap: 8px;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    margin-bottom: 14px;
}

.contenido-detalle-header .breadcrumb a {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
}

.contenido-detalle-header .breadcrumb a:hover {
    color: var(--primary-color, #39FF8E);
}

.contenido-detalle-header h1 {
    font-family: var(--font-display, sans-serif);
    margin-bottom: 8px;
}

.contenido-detalle-header .contenido-descripcion {
    color: rgba(255,255,255,0.75);
    max-width: 700px;
}

.contenido-cuerpo {
    padding-bottom: 60px;
}