:root { --azul:#1B396A; }

/* Base */
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.bg-tec { background-color: var(--azul) !important; }
.navbar .nav-link { color: #fff !important; font-weight: 600; }


/* Base hero */
/* ===== HERO: barras (letterbox) con gris forzado ===== */

/* Asegura que TODO el contenedor tenga alto y el fondo gris */
.hero,
.hero .carousel,
.hero .carousel-inner,
.hero .carousel-item,
.hero-frame {
  background: #333333 !important;  /* gris claro */
  width: 100% !important;
  height: 70vh !important;          /* o el alto que uses en desktop */
  max-height: 760px !important;
}

/* El frame actúa como “lienzo” de fondo */
.hero-frame {
  position: relative !important;
  overflow: hidden !important;
}

/* Capa de fondo por si el <img> tapa el background del padre */
.hero-frame::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;              /* top/right/bottom/left: 0 */
  background: #f1f1f1 !important;   /* gris claro */
  z-index: 0 !important;
}

/* La imagen por encima del fondo, sin recorte (contain) */
.hero-img {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;   /* deja barras si hace falta */
  object-position: center !important;
  display: block !important;
}

/* Si usas <picture>, asegura que la imagen interna herede las reglas */
.hero-picture,
.hero-picture > img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* Móvil: más bajo, pero mantiene el fondo gris */
@media (max-width: 575.98px){
  .hero,
  .hero .carousel,
  .hero .carousel-inner,
  .hero .carousel-item,
  .hero-frame {
    height: 50vh !important;
    max-height: none !important;
  }
}


/* Botón primario */
.btn-primary { background-color: var(--azul); border-color: var(--azul); }
.btn-primary:hover { filter: brightness(1.1); }

/* ================= Avisos / Igualdad (banners verticales de BD) ================ */
#avisos .strip-thumb,
#igualdad .strip-thumb {
  width: 100%;
  height: 350px;     
  object-fit: cover;   
  border-radius: .5rem;
  display: block;
}
@media (max-width: 768px){
  #avisos .strip-thumb,
  #igualdad .strip-thumb { height: 250px; }
}

/* ================== Destacado horizontal ================== */
#destacado-horizontal .destacado-thumb{
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: .75rem;
  display: block;
}
@media (max-width: 768px){
  #destacado-horizontal .destacado-thumb{ height: 260px; }
}

/* ====================== Noticias ====================== */
@media (min-width: 992px){
  #newsCarousel .ratio{
    --bs-aspect-ratio: 56.25%;   /* 16:9 */
    max-height: 300px;           /* más alto que antes */
  }
  #newsCarousel .card img{
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    display: block;
  }

  #newsCarousel .card{
    max-height: 400px; 
    display: flex;
    flex-direction: column;
  }
  #newsCarousel .card-body{ padding: 1rem; }
  #newsCarousel .card-title{
    font-size: 1.05rem;
    line-height: 1.35rem;
    max-height: 2.7rem;  
    overflow: hidden;
    margin: 0;
  }
}

/* ====================== Ética ====================== */
/* Quitar límite al card */
#etica .card{
  border: 1px solid #eee;
  border-radius: .5rem;
  overflow: hidden;
  background: #fff;
}
#etica .card .card-body{
  padding: .5rem .75rem;
}

/* Solo control de la imagen */
#etica .etica-thumb{
  width: 100%;
  max-height: 140px;     /* más pequeñas que antes */
  object-fit: contain;   /* no recorta */
  background: #fff;
  display: block;
}
@media (min-width: 992px){
  #etica .etica-thumb{ max-height: 160px; }  /* un poco más grandes en escritorio */
}



/* ===== Breadcrumb limpio (debajo del navbar sticky) ===== */
.bc-wrap{
  background: linear-gradient(180deg,#fff 0%,#fafbfc 100%);
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
  position: relative;
  z-index: 1;                 /* menor al navbar sticky */
  padding: .75rem 0;          /* aire vertical */
}

.bc .breadcrumb{
  --bs-breadcrumb-divider: "›";
  margin: 0;
  background: transparent;
  font-size: .9rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
}

.bc .breadcrumb-item + .breadcrumb-item::before{
  color: #9aa4b2;
  margin-right: .35rem;
}

.bc .bc-link{
  color: #6b7280;
  text-decoration: none;
  font-weight: 500;
}
.bc .bc-link:hover{
  color: #1B396A;
  text-decoration: underline;
}

.bc .bc-current{
  color:#111827;
  font-weight: 700;
  max-width: 65vw;            /* evita que rompa el layout */
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 991.98px){
  .bc-wrap{ padding: .6rem 0; }
  .bc .bc-current{ max-width: 60vw; }
}

/* Si tu navbar sticky lo tapa, agrega esta clase extra al wrapper */
.bc-under-nav { margin-top: .25rem; }

/* ==== FIX hero en móvil: que no tape la siguiente sección ==== */
@media (max-width: 575.98px){
  /* 1) nada se sale del hero */
  .hero{ 
    overflow: hidden !important;
    position: relative !important;
    margin-bottom: 12px !important; /* 2) separador visual */
  }

  /* 3) baja un poco la altura efectiva en móvil */
  .hero .carousel,
  .hero .carousel-inner,
  .hero .carousel-item,
  .hero-frame,
  .hero-img{
    height: 46vh !important;   /* antes 50vh */
    max-height: none !important;
  }

  /* Por si quedaban flechas/indicadores “largos” */
  .hero .carousel-control-prev,
  .hero .carousel-control-next,
  .hero .carousel-indicators{
    z-index: 1 !important;
  }
}

/* Desktop/tablet (se queda como lo tenías) */
.hero-img{
  width:100%;
  height:70vh;
  max-height:720px;
  object-fit: contain;
  object-position: center;
  display:block;
}

/* Móvil: que LLENE (cover) y se vea más compacto */
@media (max-width:575.98px){
  .hero,
  .hero .carousel,
  .hero .carousel-inner,
  .hero .carousel-item,
  .hero-frame{ height:46vh !important; }  /* ajusta 44–50vh al gusto */

  .hero-img{
    height:46vh !important;
    max-height:none !important;
    object-fit: cover !important;      /* ← lleno sin barras */
    object-position: center center !important;  /* foco al centro */
  }
}


/* ====== Estilos para títulos de secciones ====== */
section h1, 
section h2 {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;   /* todo en mayúsculas */
  color: var(--azul);          /* azul institucional */
  letter-spacing: .03em;       /* ligera separación */
  margin-bottom: 1.25rem;      /* aire abajo */
  line-height: 1.3;
}

/* h1 más grande (ej. Comunicación) */
section h1 {
  font-size: clamp(1.75rem, 2vw + 1rem, 2.25rem);  /* escala fluida */
}

/* h2 un poco más chico (ej. Avisos Importantes, Igualdad) */
section h2 {
  font-size: clamp(1.25rem, 1.5vw + .75rem, 1.6rem);
  border-bottom: 2px solid var(--azul);  /* línea decorativa opcional */
  padding-bottom: .4rem;
}

/* Ajustes en móvil: menos margen */
@media (max-width: 575.98px){
  section h1, section h2 { 
    margin-bottom: .75rem; 
    text-align: center;        /* centrados en celular */
  }
}





  /* Paleta mínima para “skinnear” sin romper tu theme */
  :root{
    --tec-primary:#0c4a6e;         /* azul petróleo */
    --tec-accent:#22c55e;          /* acento verde */
    --tec-bg:#f7f9fc;              /* fondo suave */
    --tec-text:#1f2937;            /* texto principal */
    --tec-muted:#6b7280;           /* texto secundario */
    --rad-xl:16px;
  }
  .ia-wrap{ background:var(--tec-bg); }
  .ia-card{ background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:var(--rad-xl); box-shadow:0 8px 24px rgba(0,0,0,.05); }
  .ia-badge{ display:inline-block; padding:.25rem .6rem; border-radius:999px; background:rgba(12,74,110,.08); color:var(--tec-primary); font-weight:600; font-size:.8rem; }
  .ia-lead{ color:var(--tec-text); font-size:1.05rem; line-height:1.8; }
  .ia-body{ color:var(--tec-text); line-height:1.85; }
  .ia-muted{ color:var(--tec-muted); }
  .ia-ul{ padding-left:1.1rem; margin-bottom:0; }
  .ia-cta .btn{ border-radius:12px; }
  .ia-quick li{ margin-bottom:.35rem; }
  .ia-chip{ font-size:.8rem; padding:.25rem .5rem; border-radius:8px; background:rgba(34,197,94,.12); color:#065f46; }
  @media (min-width:992px){
    .ia-sticky{ position:sticky; top:1.25rem; }
  }


/* contenidos.css */
:root{
  --c-primary:#0c4a6e; --c-accent:#22c55e; --c-bg:#f7f9fc; --c-text:#1f2937; --c-muted:#6b7280; --c-radius:16px;
}
.cx-wrap{ background:var(--c-bg); }
.cx-card{ background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:var(--c-radius); box-shadow:0 8px 24px rgba(0,0,0,.05); }
.cx-title{ color:var(--c-text); }
.cx-muted{ color:var(--c-muted); }
.cx-body{ color:var(--c-text); line-height:1.8; }
.cx-body p{ margin-bottom:1rem; }
.cx-badge{ display:inline-block; padding:.25rem .6rem; border-radius:999px; background:rgba(12,74,110,.08); color:var(--c-primary); font-weight:600; font-size:.8rem; }
.cx-list{ padding-left:1.1rem; margin-bottom:0; }
.cx-steps{ counter-reset: step; }
.cx-steps .step{ counter-increment: step; }
.cx-steps .step .num{ width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(12,74,110,.1); color:var(--c-primary); font-weight:700; margin-right:.5rem; }
.cx-doc{ display:flex;align-items:stretch;gap:.75rem;padding:.9rem;border:1px solid rgba(0,0,0,.06);border-radius:12px; }
.cx-doc i{ font-size:1.2rem; color:var(--c-primary); }
.cx-sticky{ position:sticky; top:1.25rem; }
.cx-chip{ font-size:.8rem; padding:.25rem .5rem; border-radius:8px; background:rgba(34,197,94,.12); color:#065f46; }

/* Leer completo (collapse) */
a.cx-toggle[aria-expanded="true"]::after{ content:"  ▲ Ver menos"; font-weight:600; color:var(--c-primary); }
a.cx-toggle[aria-expanded="false"]::after{ content:"  ▼ Leer completo"; font-weight:600; color:var(--c-primary); }