/* ============================================================
   user.css – ENCABEZADO (PC 2 FILAS CENTRADO) + MÓVIL HAMBURGUESA
   Joomla 6 – Cassiopeia / cassiopeia_extended
   ============================================================ */

/* ============================================================
   1) AJUSTES RÁPIDOS (CAMBIA SOLO ESTOS VALORES)
   ============================================================ */
:root{
  /* Header PC */
  --header-pad-x: 24px;
  --header-pad-y: 12px;
  --row-gap: 8px;

  /* Logo */
  --logo-max-h-desktop: 78px;
  --logo-max-h-mobile: 52px;
  --logo-max-w-mobile: 92px;

  /* Nombre del sitio (2 líneas) */
  --brand-font-desktop: 1.70rem;
  --brand-font-mobile: 1.25rem;
  --brand-weight: 700;
  --brand-color: #333;

  /* Menú PC */
  --menu-font: 1.20rem;
  --menu-weight: 700;
  --menu-gap: 45px;

  /* (Opcional) Hero PC */
  --hero-header-offset: 160px;
}

/* ============================================================
   2) BASE HEADER (TODAS LAS VISTAS)
   ============================================================ */
header.container-header{
  background: #fff !important;
  border-bottom: 1px solid #e0e0e0 !important;
}

/* Nunca deformar imágenes */
header.container-header img{
  height: auto !important;
  width: auto !important;
  max-width: 100% !important;
}

/* ============================================================
   3) FORZAR NOMBRE “Sexualidad, expresión del amor”
   IMPORTANTE: usamos selectores “descendientes” (sin >)
   para que funcione aunque Cassiopeia cambie la estructura HTML.
   ============================================================ */

/* Oculta cualquier título externo duplicado */
header.container-header .site-title:not(header.container-header .navbar-brand .site-title){
  display: none !important;
}

/* Bloques donde Cassiopeia pone título/lema (los “apagamos” y pintamos lo nuestro) */
header.container-header .navbar-brand .site-title,
header.container-header .navbar-brand .site-description{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.1 !important;
  font-size: 0 !important; /* oculta el texto real (incluido “Una visión católica”) */
}

/* Línea 1 y línea 2 del nombre */
header.container-header .navbar-brand .site-title::before,
header.container-header .navbar-brand .site-description::before{
  content: "Sexualidad,";
  display: block;
  font-weight: var(--brand-weight) !important;
  color: var(--brand-color) !important;
  line-height: 1.1 !important;
}

header.container-header .navbar-brand .site-title::after,
header.container-header .navbar-brand .site-description::after{
  content: "expresión del amor";
  display: block;
  font-weight: var(--brand-weight) !important;
  color: var(--brand-color) !important;
  line-height: 1.1 !important;
}

/* ============================================================
   4) ESCRITORIO (>= 992px) – 2 FILAS CENTRADAS
   ============================================================ */
@media (min-width: 992px){

  header.container-header{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: var(--header-pad-y) var(--header-pad-x) !important;
    row-gap: var(--row-gap) !important;
  }

  /* FILA 1 */
  header.container-header > .grid-child:first-child{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
  }

  header.container-header .navbar-brand{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    text-decoration: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Logo PC */
  header.container-header .navbar-brand img,
  header.container-header .brand-logo img{
    max-height: var(--logo-max-h-desktop) !important;
    display: block !important;
  }

  /* Tamaño del nombre PC */
  header.container-header .navbar-brand .site-title::before,
  header.container-header .navbar-brand .site-description::before,
  header.container-header .navbar-brand .site-title::after,
  header.container-header .navbar-brand .site-description::after{
    font-size: var(--brand-font-desktop) !important;
  }

  /* FILA 2: MENÚ centrado, 1 línea, sin scroll */
  header.container-header > .grid-child.container-nav{
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  header.container-header > .grid-child.container-nav nav{
    width: auto !important;
  }

  header.container-header .container-nav ul{
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--menu-gap) !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: auto !important;
  }

  header.container-header .container-nav a{
    font-size: var(--menu-font) !important;
    font-weight: var(--menu-weight) !important;
    line-height: 1 !important;
    color: #222 !important;
    text-decoration: none !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  header.container-header .container-nav a:hover{
    color: #c00000 !important;
  }
}

/* ============================================================
   5) MÓVIL/TABLET (< 992px)
   - Mantiene hamburguesa (toggler visible)
   - Evita deformación logo
   - NO fuerza menú vertical siempre abierto
   ============================================================ */
@media (max-width: 991.98px){

  header.container-header{
    padding: 12px 16px !important;
  }

  /* Brand: logo + texto */
  header.container-header .navbar-brand{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* Logo móvil correcto */
  header.container-header .navbar-brand img,
  header.container-header .brand-logo img{
    max-height: var(--logo-max-h-mobile) !important;
    max-width: var(--logo-max-w-mobile) !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* Tamaño del nombre móvil */
  header.container-header .navbar-brand .site-title::before,
  header.container-header .navbar-brand .site-description::before,
  header.container-header .navbar-brand .site-title::after,
  header.container-header .navbar-brand .site-description::after{
    font-size: var(--brand-font-mobile) !important;
  }

  /* ===== Botón hamburguesa visible y clicable ===== */
  header.container-header .container-nav{
    position: relative !important;
    z-index: 50 !important;
    width: 100% !important;
    margin-top: 8px !important;
  }

  header.container-header .navbar-toggler,
  header.container-header button.navbar-toggler{
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 9999 !important;
  }

  header.container-header .navbar-toggler .navbar-toggler-icon,
  header.container-header .navbar-toggler-icon{
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* El “collapse” debe comportarse normal (cerrado/abierto al pulsar) */
  header.container-header .navbar-collapse{
    max-width: 100% !important;
  }
}

/* ============================================================
   6) HERO a pantalla completa (PC) – opcional
   ============================================================ */
@media (min-width: 992px){
  :root{
    --hero-vh: calc(100vh - var(--hero-header-offset));
  }
  .item-page .hero-principal{
    height: var(--hero-vh) !important;
    overflow: hidden !important;
  }
  .item-page .hero-principal img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }
}
/* ============================================================
   FIX MÓVIL DEFINITIVO:
   - Evita menú horizontal fantasma
   - Hace visible el botón (aunque falte el SVG de Bootstrap)
   - Colapsa/expande correctamente el menú
   ============================================================ */
@media (max-width: 991.98px){

  /* Evita “scroll”/barra horizontal rara */
  header.container-header,
  header.container-header .container-nav{
    overflow-x: hidden !important;
  }

  /* El UL en móvil debe ser vertical, no inline-flex */
  header.container-header .container-nav ul{
    display: block !important;
    white-space: normal !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* --- BOTÓN HAMBURGUESA: forzar que se vea --- */
  header.container-header .navbar-toggler,
  header.container-header button.navbar-toggler,
  header.container-header button[data-bs-toggle="collapse"],
  header.container-header button[aria-controls]{
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #222 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 99999 !important;
  }

  /* Si el icono SVG de Bootstrap no aparece, ponemos uno de respaldo */
  header.container-header .navbar-toggler-icon{
    display: inline-block !important;
    width: 22px !important;
    height: 16px !important;
    position: relative !important;
    background: none !important; /* anula el fondo si viene roto */
  }

  /* Dibujar 3 líneas con CSS (hamburguesa) */
  header.container-header .navbar-toggler-icon::before{
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: 2px !important;
    background: #222 !important;
    box-shadow: 0 7px 0 #222, 0 14px 0 #222 !important;
  }

  /* Si el botón no trae texto, le agregamos “Menú” como fallback */
  header.container-header .navbar-toggler:not(:has(.navbar-toggler-text))::after{
    content: "Menú" !important;
    font-weight: 700 !important;
  }

  /* --- Colapso: cerrado por defecto, abre solo con .show --- */
  header.container-header .navbar-collapse{
    width: 100% !important;
  }
  header.container-header .navbar-collapse:not(.show){
    display: none !important;
  }
  header.container-header .navbar-collapse.show{
    display: block !important;
  }
}
/* ============================================================
   7) HERO – CÍRCULO CON TEXTO (PC encima de la imagen)
   ============================================================ */

/* El contenedor del hero debe ser "referencia" para el círculo */
.item-page .hero-principal{
  position: relative !important;
}

/* El círculo encima de la imagen (PC) */
.item-page .hero-principal .hero-circulo{
  position: absolute !important;
  right: 14% !important;      /* mueve izquierda/derecha */
  top: 75% !important;       /* mueve arriba/abajo */
  transform: translateY(-50%) !important;

  width: 255px !important;
  height: 255px !important;
  border-radius: 50% !important;

  background: rgba(120,150,90,0.55) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 22px !important;
  text-align: center !important;
  z-index: 999 !important;
}

.item-page .hero-principal .hero-circulo p{
  margin: 0 !important;
  color: #fff !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  font-size: 1.09rem !important;
}

/* ============================================================
   MÓVIL – lo dejamos debajo (como lo estás viendo ahora)
   Si lo quieres encima también, te doy la variante.
   ============================================================ */
@media (max-width: 991.98px){
  .item-page .hero-principal .hero-circulo{
    position: static !important;     /* debajo de la imagen */
    transform: none !important;

    width: auto !important;
    height: auto !important;
    border-radius: 18px !important;

    margin-top: 12px !important;
    padding: 14px !important;
  }

  .item-page .hero-principal .hero-circulo p{
    color: #222 !important;          /* texto visible debajo */
    font-size: 1.0rem !important;
    font-weight: 700 !important;
  }
}
/* ================================
   Tipografía base del contenido
================================ */

/* Título principal de página */
main h1 {
  font-size: 2.4rem;
  line-height: 1.2;
  margin-bottom: 1rem;
}

/* Secciones principales */
main h2 {
  font-size: 1.7rem;
  line-height: 1.3;
  margin-top: 2.2rem;
  margin-bottom: 0.8rem;
}

/* Sub-secciones */
main h3 {
  font-size: 1.25rem;
  line-height: 1.35;
  margin-top: 1.4rem;
  margin-bottom: 0.4rem;
}

/* Texto normal */
main p {
  font-size: 1.25rem;   /* ≈ 20px */
  line-height: 1.7;
  margin-bottom: 1.15rem;
}
/* ============================================================
   FIX MENÚ MÓVIL: el desplegable se ve “en blanco” pero es clicable
   ============================================================ */
@media (max-width: 991.98px){

  /* Caja del menú desplegado (cuando está abierto) */
  header.container-header .navbar-collapse.show{
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    padding: 8px 0 !important;
    margin-top: 10px !important;
  }

  /* Lista vertical y sin “fantasmas” */
  header.container-header .navbar-collapse.show ul{
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* Cada enlace visible (texto, tamaño, color, área clicable) */
  header.container-header .navbar-collapse.show a,
  header.container-header .navbar-collapse.show .nav-link{
    display: block !important;
    font-size: 1.10rem !important;
    font-weight: 700 !important;
    color: #222 !important;
    text-decoration: none !important;
    padding: 12px 14px !important;
    line-height: 1.2 !important;
  }

  /* Separadores suaves */
  header.container-header .navbar-collapse.show li + li a{
    border-top: 1px solid #f0f0f0 !important;
  }

  /* Hover/activo */
  header.container-header .navbar-collapse.show a:hover,
  header.container-header .navbar-collapse.show a:focus{
    background: #f7f7f7 !important;
  }
}
/* ============================================================
   TDC – GRILLAS DE IMÁGENES (PC / TABLET / MÓVIL)
   No afecta nada existente: solo aplica si usas clases .tdc-*
   ============================================================ */

.tdc-grid{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap:18px !important;
  width:100% !important;
}

.tdc-card{
  display:block !important;
  text-decoration:none !important;
  width:100% !important;
  min-width:0 !important;
}

.tdc-figure{
  margin:0 !important;
  width:100% !important;
  min-width:0 !important;
}

.tdc-thumb{
  width:100% !important;
  height:240px !important;
  overflow:hidden !important;
  border-radius:10px !important;
  box-sizing:border-box !important;
}

.tdc-thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

.tdc-caption{
  margin-top:8px !important;
  font-weight:700 !important;
  text-align:center !important;
}

/* Tablet */
@media (max-width: 992px){
  .tdc-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

/* Celular */
@media (max-width: 600px){
  .tdc-grid{ grid-template-columns: 1fr !important; gap:14px !important; }
  .tdc-thumb{ height:190px !important; }
}
/* ============================================================
   TDC – PARTES III, IV, V, VI – UNIFORMAR TAMAÑO DE TARJETAS
   (sin tocar lo que ya funciona en Parte I y II)
   ============================================================ */

.tdc-parte-3 .tdc-grid,
.tdc-parte-4 .tdc-grid,
.tdc-parte-5 .tdc-grid,
.tdc-parte-6 .tdc-grid{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

@media (max-width: 992px){
  .tdc-parte-3 .tdc-grid,
  .tdc-parte-4 .tdc-grid,
  .tdc-parte-5 .tdc-grid,
  .tdc-parte-6 .tdc-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px){
  .tdc-parte-3 .tdc-grid,
  .tdc-parte-4 .tdc-grid,
  .tdc-parte-5 .tdc-grid,
  .tdc-parte-6 .tdc-grid{
    grid-template-columns: 1fr;
  }
}

/* Tarjeta */
.tdc-parte-3 .tdc-card,
.tdc-parte-4 .tdc-card,
.tdc-parte-5 .tdc-card,
.tdc-parte-6 .tdc-card{
  display: block;
  text-decoration: none;
  border-radius: 14px;
  overflow: hidden;
  background: #111;
}

/* Caja de imagen: altura uniforme para todas */
.tdc-parte-3 .tdc-fig,
.tdc-parte-4 .tdc-fig,
.tdc-parte-5 .tdc-fig,
.tdc-parte-6 .tdc-fig{
  margin: 0;
  position: relative;
  aspect-ratio: 16 / 9;   /* CLAVE: todos iguales */
  overflow: hidden;
}

/* Imagen llena la caja sin deformar */
.tdc-parte-3 .tdc-img,
.tdc-parte-4 .tdc-img,
.tdc-parte-5 .tdc-img,
.tdc-parte-6 .tdc-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Título encima (si tus Partes I/II usan overlay, aquí queda igual) */
.tdc-parte-3 .tdc-body,
.tdc-parte-4 .tdc-body,
.tdc-parte-5 .tdc-body,
.tdc-parte-6 .tdc-body{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 14px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
}

.tdc-parte-3 .tdc-card-title,
.tdc-parte-4 .tdc-card-title,
.tdc-parte-5 .tdc-card-title,
.tdc-parte-6 .tdc-card-title{
  margin: 0;
  color: #fff;
  font-weight: 800;
  line-height: 1.15;
  text-shadow: 0 2px 10px rgba(0,0,0,.65);
  font-size: 16px;
}
/* ==========================================
   HERO DE ENTREGAS (global) – título + audio
   Se usa SOLO en artículos/entregas
   ========================================== */

.entrega-hero{
  margin: 0 0 18px 0;
  padding: 18px 16px;
  border-bottom: 1px solid rgba(0,0,0,.12);
}

.entrega-hero .iniciativa{
  margin: 0 0 8px 0;
  line-height: 1.15;
}

.entrega-hero .subtitulo-parte{
  margin: 0 0 14px 0;
  line-height: 1.25;
  font-weight: 600;
}

.entrega-row{
  display: grid;
  grid-template-columns: 1fr 1fr; /* dos columnas uniformes */
  gap: 16px;
  align-items: center;
}

.entrega-titulo{
  margin: 0;
  line-height: 1.25;
}

.entrega-audio{
  width: 100%;
}

/* Móvil: apilar */
@media (max-width: 900px){
  .entrega-row{
    grid-template-columns: 1fr;
  }
}
/* Ocultar metadatos de artículos (Cassiopeia) */
.article-details,
.article-info,
dl.article-info {
  display: none !important;
}
/* Ocultar título de página en artículos (Cassiopeia) */
.page-header,
.page-title {
  display: none !important;
}
/* Cassiopeia: hacer visible el "Encabezado de menú" en la barra */
.mod-menu .nav-item > span.nav-header {
  color: inherit !important;
  display: block;
  padding: .5rem 1rem;
  font-weight: 600;
  cursor: default;
  white-space: nowrap;
}
/* ============================================================
   FIX DROPDOWN – Cassiopeia
   Tu regla "container-nav ul { inline-flex }" estaba afectando
   también los submenús. Aquí lo corregimos sin tocar tu menú principal.
   ============================================================ */

/* 1) El UL de primer nivel sigue horizontal (tu diseño) */
@media (min-width: 992px){
  header.container-header .container-nav ul.mod-menu__nav{
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--menu-gap) !important;
  }

  /* 2) Los UL internos (submenús) NO deben ser inline-flex */
  header.container-header .container-nav ul.mod-menu__nav ul{
    display: none !important;              /* oculto por defecto */
    position: absolute !important;         /* dropdown */
    top: 100% !important;
    left: 0 !important;
    background: #fff !important;
    min-width: 260px !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    z-index: 99999 !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.15) !important;
    border-radius: 10px !important;
  }

  /* 3) Mostrar submenú solo en hover */
  header.container-header .container-nav ul.mod-menu__nav li:hover > ul{
    display: block !important;
  }

  /* 4) El LI padre debe ser referencia para el dropdown */
  header.container-header .container-nav ul.mod-menu__nav > li{
    position: relative !important;
  }

  /* 5) Estilo de enlaces dentro del dropdown */
  header.container-header .container-nav ul.mod-menu__nav ul a{
    display: block !important;
    padding: 10px 14px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #222 !important;
    text-decoration: none !important;
    white-space: normal !important;
  }

  header.container-header .container-nav ul.mod-menu__nav ul a:hover{
    background: #f5f5f5 !important;
    color: #c00000 !important;
  }
}
/* ============================================================
   FIX DEFINITIVO – SUBMENÚS VISIBLES EN BARRA (Cassiopeia)
   Tu regla ".container-nav ul { inline-flex }" está afectando
   submenús. Aquí corregimos de forma genérica y robusta.
   ============================================================ */

@media (min-width: 992px){

  /* 1) TODO submenú (ul dentro de ul) debe estar oculto */
  header.container-header .container-nav ul ul{
    display: none !important;          /* oculta submenús */
  }

  /* 2) Al pasar el mouse por el LI padre, mostrar submenú */
  header.container-header .container-nav li:hover > ul{
    display: block !important;         /* muestra submenú */
  }

  /* 3) Dropdown: el LI padre debe ser referencia */
  header.container-header .container-nav li{
    position: relative !important;
  }

  /* 4) Estilo del dropdown (posición y caja) */
  header.container-header .container-nav ul ul{
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background: #fff !important;
    min-width: 260px !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    z-index: 999999 !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.15) !important;
    border-radius: 10px !important;

    /* CRÍTICO: evitar que herede inline-flex del UL principal */
    white-space: normal !important;
  }

  /* 5) Enlaces dentro del submenú */
  header.container-header .container-nav ul ul a{
    display: block !important;
    padding: 10px 14px !important;
    color: #222 !important;
    text-decoration: none !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
  }

  header.container-header .container-nav ul ul a:hover{
    background: #f5f5f5 !important;
    color: #c00000 !important;
  }
}
/* ============================================================
   FIX MÓVIL – Submenús colapsables (Cassiopeia / Bootstrap)
   Oculta ul ul por defecto y los muestra solo cuando el padre está .show
   ============================================================ */
@media (max-width: 991.98px){

  /* 1) Ocultar submenús por defecto */
  header.container-header .navbar-collapse ul ul{
    display: none !important;
  }

  /* 2) Mostrar submenú solo cuando el LI padre esté abierto (.show) */
  header.container-header .navbar-collapse li.show > ul{
    display: block !important;
  }

  /* 3) Asegurar formato vertical correcto dentro del submenú */
  header.container-header .navbar-collapse ul ul{
    position: static !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 4) Indentar los enlaces del submenú para que se entienda jerarquía */
  header.container-header .navbar-collapse ul ul a{
    padding-left: 28px !important;
    font-size: 1.02rem !important;
  }
}
/* ============================================================
   FIX MÓVIL ROBUSTO – Submenús Cassiopeia/Bootstrap
   Muestra submenú cuando:
   - el <li> tiene .show, o
   - el <ul> tiene .show, o
   - el toggle tiene aria-expanded="true"
   ============================================================ */
@media (max-width: 991.98px){

  /* Ocultar submenús por defecto */
  header.container-header .navbar-collapse ul ul{
    display: none !important;
  }

  /* Caso 1: Bootstrap marca el LI como .show */
  header.container-header .navbar-collapse li.show > ul{
    display: block !important;
  }

  /* Caso 2: Bootstrap marca el UL (dropdown-menu) como .show */
  header.container-header .navbar-collapse ul ul.show{
    display: block !important;
  }

  /* Caso 3: el toggle indica expandido (aria-expanded) y el UL es hermano inmediato */
  header.container-header .navbar-collapse a[aria-expanded="true"] + ul{
    display: block !important;
  }

  /* Presentación del submenú en móvil */
  header.container-header .navbar-collapse ul ul{
    position: static !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Indentación para jerarquía */
  header.container-header .navbar-collapse ul ul a,
  header.container-header .navbar-collapse ul ul .nav-link{
    padding-left: 28px !important;
  }
}
/* ============================================================
   FIX FINAL MÓVIL – Submenús Cassiopeia (botón ∨ real)
   ============================================================ */
@media (max-width: 991.98px){

  /* 1) Ocultar submenús por defecto */
  header.container-header .navbar-collapse li > ul{
    display: none !important;
  }

  /* 2) Cuando el botón de despliegue está abierto, mostrar el submenú */
  header.container-header .navbar-collapse 
  li > button[aria-expanded="true"] + ul,
  header.container-header .navbar-collapse 
  li > a + button[aria-expanded="true"] + ul{
    display: block !important;
  }

  /* 3) Presentación limpia del submenú en móvil */
  header.container-header .navbar-collapse li > ul{
    position: static !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 4) Indentación clara para los hijos */
  header.container-header .navbar-collapse li > ul a{
    padding-left: 32px !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
  }
}
/* Ajuste puntual: prioriza la parte superior (rostro) */
.img-rostro-arriba{
  object-position: center top !important;
}
/* ============================================================
   FOOTER – Ajustes iniciales (2026-01-08)
   No borrar sin verificación
   ============================================================ */
/* ============================================================
   FOOTER – Bloque único (Footer sitio) (2026-01-08)
   Aplica al HTML del módulo “Footer sitio”:
   .footer-wrap / .footer-cols / .footer-col / .footer-links / .footer-legal
   ============================================================ */

/* Fondo y color general del área inferior */
footer,
.footer,
.container-footer {
  background: #2b3563;
  color: #ffffff;
}

/* Eliminar “cajas blancas” y estilos heredados en módulos del footer */
footer .moduletable,
footer .module,
footer .card,
footer .mod-custom,
footer .mod-menu {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Contenedor principal del bloque */
footer .footer-wrap{
  padding: 2rem 1.25rem;
}

/* Rejilla: 2 columnas en escritorio */
footer .footer-cols{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

/* Columna (no imprescindible, pero útil) */
footer .footer-col{
  min-width: 0;
}

/* Títulos */
footer .footer-title{
  font-weight: 800;
  font-size: 1.05rem;
  margin: 0 0 .6rem 0;
}

/* Texto general */
footer .footer-text{
  line-height: 1.5;
  opacity: .95;
  margin: 0 0 1rem 0;
}

/* Bloque de ayuda */
footer .footer-help{
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(255,255,255,.25);
  opacity: .95;
}

/* Enlaces */
footer a{
  color: #ffffff;
  text-decoration: none;
}
footer a:hover{
  text-decoration: underline;
}

/* Lista de enlaces (columna derecha) */
footer .footer-links{
  display: grid;
  gap: .5rem;
}

/* Línea legal final */
footer .footer-legal{
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.25);
  text-align: center;
  font-size: .85rem;
  opacity: .9;
}

/* Móvil: una columna centrada */
@media (max-width: 991px){
  footer .footer-cols{
    grid-template-columns: 1fr;
    text-align: center;
  }

  footer .footer-links{
    justify-items: center;
  }
}