/* ===== AJUSTES DE DISEÑO: cambia aquí colores y tipografías ===== */
:root{
  --fondo:#F6F7F9; --superficie:#FFFFFF; --texto:#1C2430; --suave:#5B6574;
  --acento:#24505E; --acento-claro:#E3EEF1; --linea:#DDE1E7;
  --titulos:"Arial",Georgia,serif; --cuerpo:"Public Sans",system-ui,sans-serif;
  --ancho:1040px; --radio:6px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--texto);font:17px/1.65 var(--cuerpo)}
h1,h2,h3{font-family:var(--titulos);font-weight:600;line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5vw,3.2rem)} h2{font-size:1.7rem;margin-top:0em} h3{font-size:1.25rem}
a{color:var(--acento)} img,iframe{max-width:100%;border-radius:var(--radio)}
.wrap{max-width:var(--ancho);margin:0 auto;padding:0 1.25rem}
header{position:sticky;top:0;z-index:5;background:var(--superficie);border-bottom:1px solid var(--linea)}
header .wrap{display:flex;align-items:center;gap:1.5rem;min-height:64px}
.logo{display:flex;align-items:center;gap:.0.01rem;font:600 1.65rem var(--titulos);color:var(--texto);text-decoration:none;white-space:nowrap}
.logo img{height:120px;width:120px;border-radius:0}
.letra-roja{color: #c62828;}
nav{display:flex;gap:1.4rem;margin-left:auto;overflow-x:auto}
nav a{color:var(--suave);text-decoration:none;padding:.4rem 0;border-bottom:2px solid transparent;white-space:nowrap;font-size:.95rem}
nav a:hover,nav a.on{color:var(--texto);border-color:var(--acento)}
main{padding:3rem 0 4rem;min-height:70vh}
.texto{max-width:65ch}
.texto p {text-align:justify}
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.hero > div {
  width: 100%;
}

.hero img {
  display: block;
  width: 100%;
  max-width: 700px;
  height: auto;
  margin: 0 auto 0 0;
}
.video{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--radio);overflow:hidden}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}
.rejilla h3{font:600 1rem var(--cuerpo);margin:.6rem 0 0}
.boton{display:inline-block;background:var(--acento);color:#fff;border:0;padding:.7rem 1.3rem;border-radius:var(--radio);text-decoration:none;font:inherit;cursor:pointer}
.boton:hover{filter:brightness(1.15)}
.contacto{list-style:none;padding:0;margin:1.5rem 0;display:grid;gap:.6rem;max-width:520px}
.contacto li{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);padding:.9rem 1.1rem}
form{display:grid;gap:1rem;max-width:520px}
label{display:grid;gap:.3rem;font-size:.9rem;color:var(--suave)}
input,textarea,select{font:inherit;padding:.65rem;border:1px solid var(--linea);border-radius:var(--radio);background:var(--superficie)}
.entrada{padding:1.4rem 0;border-bottom:1px solid var(--linea)}
.entrada a{text-decoration:none;color:inherit}.entrada h3{margin:0}
.meta{font-size:.85rem;color:var(--suave)}
.etiqueta{display:inline-block;background:var(--acento-claro);color:var(--acento);border-radius:99px;padding:.05rem .7rem;font-size:.8rem;margin:.2rem .3rem .2rem 0;border:0;cursor:pointer;text-decoration:none}
.etiqueta.on{background:var(--acento);color:#fff}
.articulo img{margin:1rem 0}
footer{border-top:1px solid var(--linea);padding:2rem 0;color:var(--suave);font-size:.9rem;background:var(--superficie)}
:focus-visible{outline:3px solid var(--acento);outline-offset:2px}
.mapa {
  max-width: 350px;
  margin: 1rem 0;
}
.mapa iframe {
  width: 100%;
  height: 200px;
  border: 0;
  border-radius: 10px;
}

.videos-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.videos-menu {
  position: sticky;
  top: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1rem;
  border-left: 2px solid var(--texto);
}

.videos-menu a {
  color: var(--texto);
  text-decoration: none;
  padding: .5rem;
  line-height: 1.4;
}

.videos-menu a:hover {
  color: #c62828;
}

.videos-contenido section {
  margin-bottom: 2.5rem;
  scroll-margin-top: 1rem;
}

/* Shorts verticales en la sección Recomendaciones flash */
#recomendaciones .rejilla {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 180px));
  gap: 0.5rem;
  align-items: start;
}

#recomendaciones .rejilla > div {
  width: 100%;
  max-width: 180px;
  min-width: 0;
}

#recomendaciones .rejilla .video {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  padding: 0;
  overflow: hidden;
}

#recomendaciones .rejilla .video iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  border-radius: 12px;
}

#recomendaciones .rejilla h3 {
  font-size: 0.85rem;
  line-height: 1.3;
  margin-top: 0.4rem;
}


.galeria-libreria {
  display: flex;
  flex-direction: row ;
  gap: 15px;
  align-items: center;
  width: 100%;
}

.galeria-libreria img {
  display: block;
  width: calc((100% - 40px) / 3);
  height: calc((100% - 20px) / 3);
  max-width: 350px;
  height: 280px;
  object-fit: cover;
  margin: 0 ;
}

@media (max-width: 760px) {
  #recomendaciones .rejilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .galeria-libreria img {
    height: 120px;
  }
}