/* ========== Base & Tokens ================================================= */
*,*::before,*::after{box-sizing:border-box}

:root{
  --brand-50:#f5fbff;
  --brand-100:#e6f4ff;
  --brand-200:#cde9ff;
  --brand-300:#9fd4ff;
  --brand-400:#5bb8ff;
  --brand-500:#1e9bff;
  --brand-600:#0d7fdb;
  --brand-700:#0a66b1;
  --brand-800:#0a548f;
  --brand-900:#0a476f;

  --bg:#ffffff;
  --bg-soft:#f6f7f9;
  --text:#0f172a;
  --text-soft:#334155;
  --border:#e5e7eb;
  --card:#ffffff;
  --muted:#6b7280;
  --shadow:0 10px 20px rgba(2,6,23,.08);

  --container:1200px;
  --radius:14px;
  --radius-lg:22px;
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial;

  /* Header */
  --header-z:1201;
  --header-h:0px; /* se actualiza dinámicamente si usas el fallback JS */
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220; --bg-soft:#0f172a; --text:#e5e7eb; --text-soft:#cbd5e1;
    --border:#1f2937; --card:#0b1220; --shadow:0 10px 20px rgba(0,0,0,.45);
  }
}

/* Alternadores de tema explícitos */
html.theme-light{ --bg:#fff; --bg-soft:#f6f7f9; --text:#0f172a; --text-soft:#334155; --border:#e5e7eb; --card:#fff; --shadow:0 10px 20px rgba(2,6,23,.08) }
html.theme-dark{ --bg:#0b1220; --bg-soft:#0f172a; --text:#e5e7eb; --text-soft:#cbd5e1; --border:#1f2937; --card:#0b1220; --shadow:0 10px 20px rgba(0,0,0,.45) }

/* ========== Reset & Primitivas =========================================== */
html,body{height:100%}
body{
  margin:0; font-family:var(--font-sans); background:var(--bg); color:var(--text);
  line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale
}
img,svg,video,canvas{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--brand-500); outline-offset:2px}
.container{max-width:var(--container); margin-inline:auto; padding:0 1rem}

.grid{display:grid; gap:1rem}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){ .grid--3,.grid--2{grid-template-columns:1fr} }

/* ========== Header / Nav (Desktop + Móvil/Tablet) ======================== */
.header{
  position:sticky; top:0; z-index:var(--header-z);
  background:rgba(255,255,255,.7); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border)
}
html.theme-dark .header{background:rgba(11,18,32,.6)}

.navbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:0.5rem; padding:.75rem 0; width:100%; position:sticky;
}

.brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  font-weight:700;
  flex-shrink: 0;
}
.brand__logo {
  width: clamp(60px, 10vw, 150px);  /* adaptable, mínimo 60px, ideal 10vw, máximo 150px */
  aspect-ratio: 1/1;               /* mantiene el cuadrado */
  flex-shrink: 1;                  /* permite que se reduzca si falta espacio */
  border-radius: 12px;
  background: linear-gradient(135deg,var(--brand-400),var(--brand-700));
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.logo-imagen-ajuste {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
}
.brand__copy{display:flex; flex-direction:column; line-height:1.15}
.brand__title{margin:0; font-size:clamp(1.35rem,1.1rem + 1.2vw,2rem); line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brand__subtitle{margin:.05rem 0 0; font-weight:600; color:var(--text); font-size:clamp(.95rem, .9rem + .35vw, 1.1rem)}
.brand__tagline{margin:.1rem 0 0; color:var(--text-soft); font-size:clamp(.9rem, .85rem + .2vw, 1rem)}

.nav{display:flex; gap:.25rem; flex-wrap:nowrap}
.nav a{padding:.55rem .8rem; border-radius:999px; border:1px solid transparent}
.nav a:hover{background:var(--bg-soft)}
.nav a[aria-current="page"]{border-color:var(--border); background:var(--bg-soft)}

.navbar .nav{flex-grow:1; justify-content:flex-end; gap:0.5rem}
.nav-toggle{display:none}
.nav-burger{display:none; cursor:pointer}

@media (max-width:1024px){
  .nav-burger{display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); background:var(--bg); color:var(--text); border-radius:999px; box-shadow:var(--shadow)}
  .navbar .nav{display:none}
  .navbar #nav-toggle:checked ~ .nav{
    display:flex !important;
    position:absolute; top:100%; left:0; right:0; z-index:calc(var(--header-z) - 1);
    flex-direction:column; padding:.8rem; gap:.25rem;
    border:1px solid var(--border); border-radius:var(--radius-lg);
    background:var(--card); box-shadow:var(--shadow)
  }
  .nav a, .nav button.btn{display:block; width:100%; text-align:center; padding:.6rem .8rem; border-radius:10px}
  .nav .menu-dd{display:flex; flex-direction:column; align-items:center; width:100%}
  .nav .menu-dd__list{position:static; box-shadow:none; border-radius:10px; border:1px dashed var(--border)}
}

@media (max-width:900px){
  .brand{display:grid; grid-template-columns:auto 1fr; column-gap:.55rem; flex:1 1 auto; min-width:0}
  #logo canvas{width:56px; height:56px}
  .brand__title{font-size:1.25rem}
  .brand__subtitle{font-size:.95rem}
  .brand__tagline{font-size:.85rem}

  .brand__logo {
    width: 70px;
  }

  .brand {
    justify-content: start;
    text-align: left;
  }

  .brand__logo {
    margin-left: 0;
  }
}

.header.is-fixed{ position:fixed !important; top:0; left:0; right:0; z-index:var(--header-z); backface-visibility:hidden; transform:translateZ(0) }
[data-header-spacer]{ height:0 !important; margin:0 !important; display:block; overflow:hidden }
.header.is-fixed + [data-header-spacer]{ height:var(--header-h) !important }
.header .navbar{ position:sticky; z-index:var(--header-z) }

.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.65rem 1rem; border-radius:999px; border:1px solid var(--border); background:var(--bg); cursor:pointer; transition:transform .05s ease}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--brand-600); color:#fff; border-color:transparent}
.btn--ghost{background:transparent}
.btn--sm{padding:.45rem .7rem; font-size:.925rem}

.hero{padding:3.5rem 0 2.5rem}
.hero__wrap{
  display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:stretch
}
.hero__title{font-size:clamp(1.7rem,1.2rem + 2vw,2.6rem); line-height:1.2; margin:0 0 .75rem}
.hero__lead{color:var(--text-soft); margin:0 0 1.25rem}
.hero__card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.25rem; box-shadow:var(--shadow)}

@media (max-width:900px){
  .hero__wrap{
    grid-template-columns:1fr;
  }
  .hero__wrap > * {
    min-width: 0;
  }
}

.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:1rem; display:flex; flex-direction:column; height:100%}
.card h3{margin-top:.2rem}
.card__meta{font-size:.9rem; color:var(--muted)}
.tag{font-size:.85rem; padding:.15rem .55rem; border-radius:999px; border:1px solid var(--border); background:var(--bg-soft)}
.tag--brand{background:var(--brand-100); border-color:var(--brand-200)}
html.theme-dark .tag--brand{background:rgba(30,155,255,.12); border-color:rgba(30,155,255,.3)}

.muted{color:var(--muted)}
.section-title{font-size:1.35rem; margin:0 0 .5rem}
hr.sep{border:0; border-top:1px dashed var(--border); margin:1rem 0}

/* ========== Noticias + Leer más (CÓDIGO NUEVO Y CORREGIDO) ================= */
.news{padding:1rem 0 3rem}
.news__list{margin-top:1rem}
.news-col{display:flex; flex-direction:column; height:100%; padding-left: 0%}

/* --- 1. DISEÑO POR DEFECTO PARA MÓVILES (Mobile First) --- */
.news-item {
  display: flex;
  flex-direction: column; /* VERTICAL por defecto */
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden; /* Evita desbordamientos internos */
  width: 100%; /* Ocupa el 100% de su contenedor (incluyendo padding/border gracias a box-sizing) */
}
.news-item__media {
  width: 100%;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
}
.news-item__media a { display: block; }
.news-item__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9; /* Proporción panorámica moderna */
  object-fit: cover;
  display: block;
}
.news-item__content {
  display: flex;
  flex-direction: column;
  min-width: 0; /* LA CLAVE: Permite que el contenido se ajuste */
  flex-grow: 1; /* Ocupa el espacio vertical restante */
}
.news-item h4 { margin: .1rem 0 .35rem; }
.news-item__meta { font-size: .9rem; color: var(--muted); margin-bottom: .35rem; }
.news-item__tags { display: flex; gap: .5rem; flex-wrap: wrap; }

/* --- 2. ADAPTACIÓN PARA ESCRITORIO (A partir de 768px) --- */
@media (min-width: 768px) {
  .news-item {
    flex-direction: row; /* Diseño HORIZONTAL en pantallas grandes */
    align-items: flex-start;
  }
  .news-item__media {
    flex-basis: 120px; /* Ancho fijo para la imagen */
    width: 120px;
  }
  .news-item__media img {
    aspect-ratio: 4/3; /* Proporción original más cuadrada */
  }
}

/* --- 3. FUNCIONALIDAD "LEER MÁS" --- */
.readmore{ --lines:3; position:relative; border-radius:inherit }
.readmore[data-expanded="false"] .readmore__content{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:var(--lines);
  line-clamp:var(--lines); overflow:hidden
}
.readmore.objetivo {
  --lines: 3 !important; /* O las líneas que quieras */
}
.readmore__fade{display:none}
.readmore[data-expanded="false"] .readmore__fade{
  display:block; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit; z-index:1;
}
.readmore__toggle {
  margin-top: auto; /* Empuja el botón hacia abajo */
  padding-top: 1rem; /* Espacio superior para separar del texto */
  align-self: flex-start;
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .45rem .7rem;
  font-size: .925rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: all .12s ease;
  background-color: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
.readmore__toggle:hover { border-color: var(--brand-500); color: var(--brand-600); }
html.theme-dark .readmore__toggle:hover { color: var(--brand-400); }
/* Contenedor truncado por defecto */
.readmore-content {
  display: -webkit-box;         /* necesario para limitar líneas */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;        /* número de líneas visibles */
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;        /* evita que palabras largas rompan layout */
}

/* Cuando la tarjeta se expande */
.card.is-expanded .readmore-content {
  display: block;               /* elimina límite de líneas */
  overflow: visible;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}

/* Mantener márgenes y listas */
.readmore-content p {
  margin: 0.25rem 0;
  line-height: 1.5;
}
.readmore-content ul,
.readmore-content ol {
  margin: 0.5rem 0 0.5rem 1.2rem;
  padding: 0;
}
.readmore-content li {
  margin-bottom: 0.25rem;
}

/* Evita saltos de línea inesperados dentro de <strong> o <em> */
.readmore-content strong,
.readmore-content em {
  white-space: normal;
}

/* Botón "Leer más / Leer menos" */
.read-toggle {
  margin-top: 0.5rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.9rem;
  cursor: pointer;
  background-color: #007bff; 
  color: #fff;
  border: none;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
}
.read-toggle:hover {
  background-color: #0056b3;
}

/* Forzar truncado a 2 líneas si quieres un estilo específico */
.readmore.objetivo .readmore-content {
  -webkit-line-clamp: 3 !important;
}

/* Respetar márgenes y listas */
.readmore-content ul,
.readmore-content ol {
  margin: 0.5rem 0 0.5rem 1.2rem;
  padding: 0;
}

.readmore-content li {
  margin-bottom: 0.25rem;
}

/* Párrafos dentro del contenido */
.readmore-content p {
  margin: 0.25rem 0;
}

/* Opcional: evita saltos de línea inesperados dentro de <strong> o <em> */
.readmore-content strong,
.readmore-content em {
  white-space: normal;
}
.readmore-content {
  display: -webkit-box;        /* necesario para limitar líneas */
  -webkit-line-clamp: 3;       /* número de líneas a mostrar */
  -webkit-box-orient: vertical;
  overflow: hidden;            /* oculta el resto del contenido */
  text-overflow: ellipsis;     /* añade puntos suspensivos al final */
}
/* --- 4. ESTILOS DECORATIVOS --- */
.news-item {
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  border-left: 6px solid var(--brand-600);
}
html.theme-dark .news-item {
  background: rgba(30, 155, 255, .10);
  border-color: rgba(30, 155, 255, .35);
  border-left-color: var(--brand-500);
}

/* ========== Footer (con mapas) =========================================== */
.footer{border-top:1px solid var(--border); padding:2rem 0 3rem; color:var(--text-soft)}
.footer__grid{display:grid; gap:1.25rem; grid-template-columns:repeat(2, minmax(0,1fr))}
.footer h3{margin:.25rem 0}
.footer h4{margin:.15rem 0 .5rem; font-weight:600; color:var(--text)}
.footer .phones{margin:.5rem 0; font-size:1rem}
.footer iframe{width:100%; height:230px; border:0; border-radius:12px; box-shadow:var(--shadow)}
.footer address{font-style:normal}
.footer figure{display:inline-block; margin:.35rem .75rem .5rem 0; text-align:center}
.footer figcaption{font-size:.85rem; color:var(--muted)}
@media (max-width:900px){ .footer__grid{grid-template-columns:1fr} }

.footer .map-scale{position:relative; overflow:hidden; height:115px; border-radius:12px; box-shadow:var(--shadow)}
.footer .map-scale iframe{width:200%; height:460px; transform:scale(.5); transform-origin:0 0; border:0}

#cookie-banner{position:fixed; left:0; right:0; bottom:0; z-index:1000; padding:1rem 0; display:none}
#cookie-banner>.container{
  display:flex; flex-direction:column; align-items:center; gap:1rem; padding:1rem;
  border-radius:var(--radius-lg); box-shadow:0 -2px 10px rgba(0,0,0,.2);
  background:#333; color:#fff; border:1px solid #666
}
#cookie-banner p{margin:0}
#cookie-banner .cookie__actions{display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center}
#cookie-banner .btn{background:#fff; color:#333; border:1px solid #fff}
#cookie-banner .btn--primary{background:var(--brand-600); color:#fff; border-color:transparent}

.social{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-top:.75rem; justify-content:center}
.social__btn{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid var(--border);background:var(--bg);color:var(--text);box-shadow:var(--shadow);transition:transform .12s ease, background .12s ease, box-shadow .12s ease}
.social__btn:hover{background:var(--bg-soft); transform:translateY(-1px)}
.social__btn:active{transform:translateY(0)}
.social__btn:focus-visible{outline:2px solid var(--brand-500); outline-offset:2px}
.social__icon{width:18px;height:18px;display:block}
.social__glyph{font-weight:700; font-size:14px; line-height:1}

.social__dropdown{position:relative; display:inline-block}
.social__dropdown>summary{list-style:none; cursor:pointer}
.social__dropdown>summary::-webkit-details-marker{display:none}
.social__menu{
  position:absolute; top:44px; right:0; z-index:20; min-width:200px; padding:.35rem; margin:0;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
  display:none; list-style:none
}
.social__menu li{margin:0}
.social__menu a{display:block; padding:.5rem .6rem; border-radius:10px; color:var(--text)}
.social__menu a:hover{background:var(--bg-soft)}
.social__dropdown[open] .social__menu{display:block}

.masthead{border-bottom:1px solid var(--border); background:var(--bg-soft)}
.masthead__grid{display:grid; grid-template-columns:96px 1fr; gap:1rem; align-items:center; padding:1rem 0}
@media (max-width:700px){ .masthead__grid{grid-template-columns:72px 1fr} }
.masthead__logo canvas{width:96px; height:96px; border-radius:var(--radius-lg); box-shadow:var(--shadow); background:var(--card); border:1px solid var(--border)}
@media (max-width:700px){ .masthead__logo canvas{width:72px; height:72px} }
.masthead__copy .titulo{margin:.1rem 0 .15rem; font-size:clamp(1.35rem,1.1rem + 1.2vw,1.9rem); line-height:1.2}
.masthead__copy .stitulo{margin:.1rem 0; font-weight:600; color:var(--text)}
.masthead__copy .subtitulo{margin:.1rem 0 0; color:var(--text-soft)}
.masthead__bar{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0 0 1rem}
@media (max-width:700px){ .masthead__bar{flex-direction:column; align-items:flex-start} }

.menu-dd{position:relative; display:inline-block}
.menu-dd>summary{list-style:none; cursor:pointer; padding:.55rem .8rem; border-radius:999px}
.menu-dd>summary::-webkit-details-marker{display:none}
.menu-dd__list{
  position:absolute; top:calc(100% + 6px); left:0; z-index:60; min-width:220px; margin:0; padding:.4rem; list-style:none;
  background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); display:none
}
.menu-dd[open]>.menu-dd__list{display:block}
.menu-dd__list a{
  display:flex; align-items:center; gap:.75rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:.5rem .6rem; border-radius:10px
}
.menu-dd__list a:hover{background:var(--bg-soft)}
@media (max-width:900px){
  .menu-dd{width:100%}
  .menu-dd__list{position:static; box-shadow:none; border-radius:10px; border:1px dashed var(--border); display:block}
}

.personalizar{
  background:var(--brand-50); border:1px solid var(--brand-200); border-left:6px solid var(--brand-600);
  border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow)
}
.personalizar h4,.personalizar h5{margin-top:.2rem}
html.theme-dark .personalizar{ background:rgba(30,155,255,.10); border-color:rgba(30,155,255,.35); border-left-color:var(--brand-500) }

#contenedorSubBloques3{
  background:#fff8ed; border:1px solid #ffd7b3; border-left:6px solid #ff9f43;
  border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow); margin-top:.75rem
}
html.theme-dark #contenedorSubBloques3{ background:rgba(255,159,67,.10); border-color:rgba(255,159,67,.35); border-left-color:#ff9f43 }
#contenedorSubBloques3 h4{ margin-top:.25rem; color:var(--text) }

#servicios{
  position:relative; background:#ecfdf5; border:1px solid #99f6e4; border-left:8px solid #0d9488;
  border-radius:var(--radius-lg); padding:1.1rem; box-shadow:var(--shadow); margin-top:1rem
}
#servicios::before{
  content:""; position:absolute; left:0; right:0; top:0; height:6px;
  background:linear-gradient(90deg, rgba(13,148,136,.15), rgba(13,148,136,.03));
  border-top-left-radius:inherit; border-top-right-radius:inherit; pointer-events:none
}
#servicios header h3{ margin:.1rem 0 .4rem; color:var(--text); letter-spacing:.2px }
#servicios p{ margin:.35rem 0 }
#servicios ul{ margin:.35rem 0 .35rem 1.2rem }
#servicios li{ margin:.2rem 0 }
#servicios a{ color:#0f766e; text-decoration:underline; text-underline-offset:2px }
html.theme-dark #servicios{ background:rgba(13,148,136,.12); border-color:rgba(45,212,191,.35); border-left-color:#14b8a6 }
html.theme-dark #servicios::before{ background:linear-gradient(90deg, rgba(20,184,166,.25), rgba(20,184,166,.05)) }

#contenedor-colaboradores{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; align-items:stretch; margin-top:1rem
}
#contenedor-colaboradores>section{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:1rem; display:flex; flex-direction:column
}
#contenedor-colaboradores>section h3{margin-top:.2rem}
#contenedor-colaboradores>section h4{margin:.15rem 0 .5rem; font-weight:600; color:var(--text)}
#contenedor-colaboradores>section img{max-width:100%; height:auto; margin-top:1rem; border-radius:10px}
#contenedor-colaboradores>section:hover{ transform:translateY(-1px); transition:transform .12s ease, box-shadow .12s ease }
@media (max-width:900px){ #contenedor-colaboradores{grid-template-columns:1fr} }

.theme-switch .btn{border-color:var(--border); background:rgba(0,0,0,.05)}
.theme-switch .btn:hover{filter:brightness(1.08)}
html.theme-dark .theme-switch .btn{background:rgba(255,255,255,.08); color:var(--text)}
html.theme-dark .theme-switch .btn:hover{background:rgba(255,255,255,.12)}
 .hero__wrap{ align-items:stretch }
 .hero__wrap > *{ height:100% }
 .hero__wrap > :first-child{
   background:var(--card); border:1px solid var(--border);
   border-radius:var(--radius); box-shadow:var(--shadow);
   padding:1rem; display:flex; flex-direction:column;
 }
 .hero__wrap > :first-child .hero__card{
   display:contents;
 }
 @media (max-width:900px){
   .hero__wrap > :first-child{
     background:transparent; border:0; box-shadow:none; padding:0;
   }
   .hero__wrap > :first-child .hero__card{
     display:block;
   }
 }

.footer__grid{
  display:grid; grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 1.25rem;
}
.footer__grid > *{ min-width: 0 }
.footer__grid > :nth-child(1){ grid-column: 1 }
.footer__grid > :nth-child(2){ grid-column: 2 }
.footer__grid > :nth-child(2) { border-radius: 0; }
.footer__grid > :nth-child(2){
  border-top-left-radius: 12px; border-top-right-radius: 12px;
}
@media (max-width:900px){
  .footer__grid{ grid-template-columns: 1fr }
  .footer__grid > :nth-child(1),
  .footer__grid > :nth-child(2){
    grid-column: auto;
  }
  .footer__grid > :nth-child(2){
    border-radius: 12px; margin-top: 0; border-top: 1px solid var(--border);
  }
}

.nav-burger{display:none !important; visibility:hidden}
@media (max-width:1024px){
  .nav-burger{display:inline-flex !important; visibility:visible}
  .navbar .nav{display:none}
}
@media (min-width:1025px){
  .navbar .nav{display:flex !important}
}

@media (max-width:1024px){
  .navbar #nav-toggle:checked ~ .nav{ align-items:stretch; }
  .navbar #nav-toggle:checked ~ .nav > *{ width:100%; }
  .navbar #nav-toggle:checked ~ .nav a,
  .navbar #nav-toggle:checked ~ .nav button.btn,
  .navbar #nav-toggle:checked ~ .nav .menu-dd > summary{
    display:flex; align-items:center; justify-content:center;
    width:100%; text-align:center;
  }
  .navbar #nav-toggle:checked ~ .nav .menu-dd{ width:100%; align-items:center; }
  .navbar #nav-toggle:checked ~ .nav .menu-dd__list{
    position:static; width:100%; text-align:center;
  }
  .navbar #nav-toggle:checked ~ .nav .menu-dd__list a{
    display:flex; align-items:center; justify-content:center; width:100%;
  }
}

@media (min-width:801px){
  .theme-switch{ flex:0 0 auto }
  .theme-switch .btn{
    display:inline-flex; align-items:center; gap:.45rem;
    white-space:nowrap; padding:.45rem .75rem; line-height:1; max-width:none;
  }
  .theme-switch .btn > *{ display:inline; white-space:nowrap; }
}
@media (max-width:800px){
  .theme-switch .btn{
    position:relative; inline-size:42px; block-size:42px; padding:0;
    border-radius:999px; display:inline-flex; align-items:center;
    justify-content:center; font-size:0; line-height:1;
  }
  .theme-switch .btn > *{ display:none }
  .theme-switch .btn::before{ content:"🌙"; font-size:22px }
  html.theme-dark .theme-switch .btn::before{ content:"☀️" }
}

.readmore__content.is-rich {
  --txt-lh: 2.1; --txt-li-gap: .5rem; --txt-indent: 1.9rem;
}
.readmore__content.is-rich p { margin: 0 0 .9rem; line-height: var(--txt-lh); }
.readmore__content.is-rich ul,
.readmore__content.is-rich ol {
  margin: 0 0 1rem 0; padding-inline-start: var(--txt-indent);
  list-style-position: outside; line-height: var(--txt-lh);
}
.readmore__content.is-rich li { margin: 0 0 var(--txt-li-gap); }
.readmore__content.is-rich ol { list-style: decimal; }
.readmore__content.is-rich ul { list-style: disc; }
.readmore__content.is-rich a {
  color: #0f766e; text-decoration: underline; text-underline-offset: 3px;
  font-weight: 600; transition: color .15s ease;
}
.readmore__content.is-rich a:hover { color: var(--brand-600); }

.news-item .readmore__toggle,
.readmore__toggle,
.readmore__toggle[aria-expanded="true"] {
  background-color: #ffffff !important; color: #000000 !important;
  border: 1px solid #000000 !important;
}
.read-toggle, .read-toggle.btn, .read-toggle.btn.btn--sm,
.read-toggle[aria-expanded="true"] {
  background-color: #ffffff !important; color: #000000 !important;
  border: 1px solid #000000 !important;
}
.readmore__toggle:focus-visible,
.read-toggle:focus-visible {
  outline: 2px dotted #000000 !important; outline-offset: 2px !important;
}
.readmore__toggle:hover, .readmore__toggle:active,
.read-toggle:hover, .read-toggle:active {
  background-color: #ffffff !important; color: #000000 !important;
  border-color: #000000 !important;
}

.card .readmore-wrapper { flex-grow: 1; }
.nav .menu-dd > summary:hover { background: var(--bg-soft); }
.news-item { scroll-margin-top: 100px; }

.news-controls {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: center; gap: 1rem; margin-bottom: 1rem;
}
.news-controls h1 { margin: 0; flex: 1 1 300px; }
.news-search { flex: 1 1 280px; max-width: 450px; }
.news-filters {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem;
  padding-bottom: 1rem; border-bottom: 1px dashed var(--border);
}
.filter-btn {
  display: inline-flex; padding: .45rem .8rem; font-size: .9rem;
  border-radius: 999px; cursor: pointer; border: 1px solid var(--border);
  background-color: var(--bg-soft); color: var(--text-soft); transition: all .15s ease;
}
.filter-btn:hover { border-color: var(--brand-400); color: var(--brand-600); }
html.theme-dark .filter-btn:hover { color: var(--brand-400); }
.filter-btn.active {
  background-color: var(--brand-600); color: #fff;
  border-color: var(--brand-600); font-weight: 600;
}

.colab-section-title {
  font-size: 1.5rem; margin: 1.5rem 0 1rem; color: var(--text);
  border-bottom: 2px solid var(--brand-200); padding-bottom: .5rem;
}
.colab-grid-principales {
  display: grid; gap: 1.5rem; grid-template-columns: repeat(3, 1fr);
}
.colab-card-principal {
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.colab-card-principal:hover {
  transform: translateY(-5px); box-shadow: 0 15px 25px rgba(2,6,23,.12);
}
.colab-card-principal__link {
  display: flex; flex-direction: column; padding: 1rem; height: 100%;
}
.colab-card-principal__logo {
  display: block; max-width: 180px; height: 80px;
  object-fit: contain; margin: 0 auto 1rem;
}
.colab-card-principal__body { text-align: center; }
.colab-card-principal__title {
  margin: 0 0 .5rem; font-size: 1.1rem; color: var(--text);
}
.colab-card-principal__text {
  margin: 0; font-size: 0.95rem; color: var(--text-soft); line-height: 1.5;
}
.colab-grid-secundarias {
  display: grid; gap: 1rem; grid-template-columns: repeat(7, 1fr);
}
.colab-card-secundaria {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .75rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  aspect-ratio: 3 / 2; box-shadow: var(--shadow);
}
.colab-card-secundaria:hover {
  transform: scale(1.11); box-shadow: var(--shadow); z-index: 10;
}
.colab-card-secundaria a {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
.colab-card-secundaria img {
  display: block; max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
}
@media (max-width: 1024px) {
  .colab-grid-principales { grid-template-columns: repeat(2, 1fr); }
  .colab-grid-secundarias { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
  .colab-grid-principales { grid-template-columns: 1fr; }
  .colab-grid-secundarias { grid-template-columns: repeat(2, 1fr); }
  .colab-section-title { font-size: 1.3rem; }
   .news-item {
    width: 82% !important;
    margin-left: 0rem !important;
    margin-right: 0.1rem !important;
    
  }
}

.cookie-toast {
  position: fixed; bottom: 20px; left: 50%;
  transform: translateX(-50%) translateY(100px);
  background-color: #333; color: #fff; padding: 12px 20px;
  border-radius: 999px; box-shadow: 0 4px 15px rgba(0,0,0,.2);
  z-index: 1100; visibility: hidden; opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s;
}
.cookie-toast.show {
  transform: translateX(-50%) translateY(0);
  visibility: visible; opacity: 1;
}

/* === U67 · Movil: forzar sticky real y anular fixed ====================== */
@media (max-width:1024px){
  /* Activaremos esta clase desde JS */
  html.mobile-sticky .header{
    position: fixed !important;
    top: 0;
    left: 0; right: 0;
    transform: none !important;
    backface-visibility: visible !important;
  }
  /* Si algún script vuelve a poner .is-fixed, lo anulamos igual */
  html.mobile-sticky .header.is-fixed{
    position: fixed !important;
    top: 0;
    transform: none !important;
    backface-visibility: visible !important;
  }
  /* En sticky NO necesitamos reservar hueco */
  html.mobile-sticky [data-header-spacer]{
    height: 0 !important;
    margin: 0 !important;
    display: block !important;
    overflow: hidden !important;
  }
}

/* === U67 · Desbordamiento horizontal (red de seguridad) ================== */
/* html, body{ overflow-x: clip; }
@supports not (overflow-x: clip){
  html, body{ overflow-x: hidden; }
} */

/* === U67 · Menú móvil: limitar ancho y caja ============================== */
@media (max-width:1024px){
  .navbar, .nav{ box-sizing: border-box; }
  #nav-toggle:checked ~ .nav{
    max-width: 100vw;          /* no más ancho que el viewport */
    left: 0; right: 0;          /* alineado a bordes del viewport */
    margin-inline: 0;
    overflow-x: hidden;         /* por si sombras/bordes suman píxeles */
  }
}

/* === U67 · Mapas escalados: aislar layout para evitar overflow =========== */
.map-scale{
  contain: layout paint;        /* evita que el iframe escalado "empuje" el layout */
}
/* === U67: Anti-ocultación del header en móviles ======================= */
html, body { max-width: 100%; overflow-x: clip; } /* evita scroll horizontal global */

@media (max-width: 1024px){
  /* En móvil, nos quedamos con sticky puro: */
  .header { position: sticky !important; top: 0; }
  .header.is-fixed { position: fixed !important; } /* anula el fallback "fixed" */
  [data-header-spacer]{ height: 0 !important; }     /* sin spacer en sticky */
  
  /* Suaviza el “rebote” que puede ocultar el header en algunos navegadores */
  body { overscroll-behavior-y: contain; }
}
/*
  Estilo hover para los botones del submenú de noticias (index.html)
  Usa los colores de las tarjetas de noticias para ser coherente.
*/
.news-submenu .btn:hover,
.news-submenu .btn:focus-visible {
  background-color: var(--brand-50); /* Fondo azul claro */
  border-color: var(--brand-200);   /* Borde azul más oscuro */
}