/* ========== 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:40px; height:40px; border-radius:12px; background:linear-gradient(135deg,var(--brand-400),var(--brand-700)); box-shadow:var(--shadow)}

.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){

  .header .navbar{position:sticky; gap:.5rem}

  .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}

}



.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;

  }

  

  /* --- CORRECCIÓN 1: OCULTAR BLOQUES VACÍOS EN MÓVIL --- */

  /* Al ocultarse el contenido desktop, estos padres quedaban vacíos ocupando espacio.

     display: none los elimina del flujo, subiendo el contenido inferior. */

  #verVigo, #verBouzas {

    display: none !important;

  }

}



.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 ================= */

.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 */

}

.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; 

  flex-grow: 1; 

}

.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:5; 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__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;

  padding-top: 1rem;

  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); }



/* --- 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; }

  

  /* --- CORRECCIÓN 2: ANCHO DE NOTICIAS --- */

  /* Antes estaba al 82%, lo forzamos al 100% para que use todo el ancho en móvil */

   .news-item {

    width: 100% !important;

    margin-left: 0rem !important;

    margin-right: 0rem !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 */

}

/* ========== Estilos de Herramientas de Noticia (Share/Print) ========== */



.news-item__header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 1rem;

}



.news-item__header h4 {

    margin: 0 0 .35rem;

    flex-grow: 1;

}



.news-tools {

    display: flex;

    gap: 0.4rem; /* Separación entre los dos botones */

    flex-shrink: 0;

}



/* Ajuste fino para los botones de herramientas */

.tool-btn {

    /* Ya heredan el estilo .btn del sitio (borde, fondo, redondeo) */

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background-color: var(--bg); /* Fondo igual a la tarjeta o blanco */

    color: var(--text-soft);

    transition: all 0.2s ease;

}



.tool-btn:hover {

    border-color: var(--brand-500);

    color: var(--brand-600);

    transform: translateY(-1px); /* Pequeño efecto de elevación como los otros botones */

}



.tool-btn svg {

    display: block;

}



/* =========================================

   CONTROL DEL CARRUSEL MÓVIL/ESCRITORIO

   ========================================= */



/* Por defecto (versión móvil primero): */



/* Ocultamos el carrusel del sidebar */

.carousel-desktop-only {

  display: none !important;

}



/* Mostramos el carrusel del contenido principal */

.carousel-mobile-only {

  display: block !important;

}





/* Para pantallas grandes (Escritorio, más de 900px) invertimos la lógica */

@media (min-width: 901px) {

  

  /* Mostramos el carrusel del sidebar */

  .carousel-desktop-only {

    display: block !important;

  }



  /* Ocultamos el carrusel del contenido principal */

  .carousel-mobile-only {

    display: none !important;

  }

}



/* =========================================

   CONTROL VISITA VIRTUAL (Móvil/Escritorio)

   ========================================= */



/* Por defecto (Móvil): Ocultamos el del escritorio y mostramos el del móvil */

.visita-desktop-only {

  display: none !important;

}

.visita-mobile-only {

  display: block !important;

}



/* En pantallas grandes (>900px): Invertimos la visibilidad */

@media (min-width: 901px) {

  .visita-desktop-only {

    display: block !important;

  }

  .visita-mobile-only {

    display: none !important;

  }

}



/* =========================================

   VISITA VIRTUAL: CONTROL DE VISIBILIDAD

   ========================================= */



/* 1. POR DEFECTO (MÓVIL): */

/* El mapa de escritorio (barra lateral) se OCULTA */

.visita-desktop-only {

  display: none !important;

}

/* El mapa de móvil (contenido central) se MUESTRA */

.visita-mobile-only {

  display: block !important;

}



/* 2. PANTALLAS GRANDES (>900px): */

@media (min-width: 901px) {

  /* El mapa de escritorio se MUESTRA */

  .visita-desktop-only {

    display: block !important;

  }

  /* El mapa de móvil se OCULTA */

  .visita-mobile-only {

    display: none !important;

  }

}

/* =========================================

   CORRECCIÓN DE ANCHO EN EL LATERAL

   ========================================= */

/* Elimina el 'padding' doble cuando el contenedor está dentro del aside */

aside .container {

  padding-left: 0 !important;

  padding-right: 0 !important;

  margin: 0 !important;

  max-width: 100% !important;

  width: 100% !important;

}



/* Opcional: Ajusta también el espaciado vertical de la sección de noticias */

aside .news {

  padding-top: 0 !important;

}


/* Resaltar los links */
.enlace-animado {
  display: inline-block;
  text-decoration: none; 
  color: #000000;             /* Texto en negro */
  transition: all 0.3s ease;  /* Animación suave */
  border-bottom: 2px solid transparent; 
}

.enlace-animado {
  background-color: #f0f0f0; /* Un gris muy claro */
  padding: 2px 5px;          /* Un poco de espacio alrededor */
  border-radius: 4px;        /* Bordes redondeados */
  text-decoration: none;
  color: black;
}
.enlace-animado:hover {
  transform: scale(1.1);      /* Crece un poquito */
  color: #000000;             /* Se mantiene negro al pasar el ratón */
  border-bottom: 2px solid #000000; /* Subrayado negro */
  cursor: pointer;
}