body {
  margin: 0;
  font-family: 'Roboto Slab', serif;
  background-color: #0b1e36;
  color: white;
  line-height: 1.6;
}

/* ANIMACIONES */
@keyframes backgroundZoom {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes fadeSlideIn {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInOverlay {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* HEADER */
.header-background {
  position: relative;
  height: 300px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.header-background::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url('/assets/img/fotofondo.JPG');
  background-size: cover;
  background-position: center;
  animation: backgroundZoom 15s ease-in-out infinite;
  z-index: -1;
}

.overlay {
  background-color: rgba(11, 30, 54, 0.75);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 1rem;
  animation: fadeInOverlay 2s ease forwards;
  opacity: 0;
  position: relative;
  z-index: 10;
}

header h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 3.3rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 7px;
  background: linear-gradient(100deg, #f0c04a 10%, #ffffff 80%, #9dcfff 100%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 2px 5px 20px rgba(35, 55, 105, 0.3);
  margin-bottom: 0.6rem;
  animation: fadeSlideIn 1s ease forwards;
  animation-delay: 0.2s;
  opacity: 0;
}

.subtitulo-header {
  font-family: 'Poppins', sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: #d8e3ff;
  letter-spacing: 3px;
  margin: 0 0 1.2rem 0;
  text-shadow: 0 2px 6px rgba(24,31,54,0.5);
  max-width: 600px;
  line-height: 1.3;
  animation: fadeSlideIn 1s ease forwards;
  animation-delay: 0.8s;
  opacity: 0;
}

/* BOTONES DE PORTADA */
.portada-navegacion {
  margin-top: 1.5rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.btn-portada {
  background-color: #3769a8;
  padding: 0.7rem 1.4rem;
  border-radius: 5px;
  text-decoration: none;
  color: white;
  font-weight: 600;
  transition: background 0.3s ease;
}

.btn-portada:hover {
  background-color: #4981d0;
}

/* MENÚ */
.menu { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
  display: flex; 
  justify-content: center; 
  flex-wrap: wrap; 
}
.menu > li { position: relative; }
.menu a {
  display: block;
  padding: 12px 18px;
  color: white;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: background-color 0.3s ease, color 0.3s ease;
  border-radius: 4px;
}
.menu a:hover, .menu li:hover > a {
  background-color: #3769a8; color: #dbeeff;
}
.submenu {
  display: none;
  position: absolute;
  top: 100%; 
  left: 0;
  background-color: #14496e;
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 220px;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.35);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.menu li:hover > .submenu { display: block; opacity: 1; }
.submenu li a {
  padding: 10px 16px;
  font-weight: 500;
  font-size: 0.95rem;
  border-bottom: 1px solid #2d5983;
}
.submenu li a:hover {
  background-color: #2a5d93; color: #c9defa;
}
.submenu li:last-child a { border-bottom: none; }
.submenu .submenu { top: 0; left: 100%; }
.menu-toggle {
  display: none;
  font-size: 2rem;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  position: absolute;
  right: 15px;
  top: 10px;
  z-index: 1100;
  transition: color 0.3s ease;
}
.menu-toggle:hover { color: #a8c0ff; }

/* RESPONSIVE MENÚ */
@media (max-width: 900px) {
  .menu-toggle { display: block; }
  .menu {
    display: none;
    flex-direction: column;
    background-color: #072540;
    width: 100%; 
    position: absolute; 
    top: 50px; 
    left: 0;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    max-height: calc(100vh - 50px);
    overflow-y: auto;
  }
  .menu.active { display: flex; }
  .menu > li { width: 100%; }
  .menu a { padding: 15px 20px; font-size: 1.2rem; }
  .submenu {
    position: static;
    opacity: 1;
    display: none;
    background-color: #0b324d;
    box-shadow: none;
    border-radius: 0;
  }
  .menu li.show-submenu > .submenu { display: block; }
  .menu li > a::after { content: " ▼"; font-size: 0.7rem; }
}

/* MAIN CONTENT */
main { 
  max-width: 1000px; 
  margin: 2rem auto; 
  padding: 0 1rem; 
  font-size: 1.1rem; 
  color: #d8e3ff; 
  text-align: center; 
}

/* SECCIÓN RESTAURANTES */
#restaurantes-turisticos {
  max-width: 900px; 
  margin: 2rem auto 3rem auto; 
  padding: 0 1rem; 
  color: #e0e7ff; 
  font-family: 'Poppins', sans-serif;
}
#restaurantes-turisticos h2 {
  font-size: 2.5rem; 
  font-weight: 900; 
  text-transform: uppercase; 
  letter-spacing: 6px; 
  margin-bottom: 1.2rem; 
  color: #f0c04a; 
  text-align: center; 
  text-shadow: 2px 3px 7px rgba(0, 0, 0, 0.7);
}
#restaurantes-turisticos p {
  font-size: 1.1rem; 
  line-height: 1.5; 
  margin-bottom: 1rem; 
  color: #c9d4f2;
}
.restaurante {
  background-color: rgba(11, 30, 54, 0.75); 
  padding: 1.8rem 2rem; 
  border-radius: 10px; 
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4); 
  margin-top: 2rem;
}
.restaurante h3 {
  font-size: 1.8rem; 
  font-weight: 900; 
  color: #9dcfff; 
  margin-bottom: 0.8rem; 
  text-shadow: 1px 2px 10px rgba(150, 180, 255, 0.7);
}
.restaurante em { font-style: italic; color: #c1d6ff; font-size: 0.9rem; }
.restaurante a {
  color: #f0c04a; 
  text-decoration: none; 
  font-weight: 700; 
  transition: color 0.3s ease;
}
.restaurante a:hover { color: #ffffff; text-decoration: underline; }
.menu-titulo {
  display: block; 
  padding: 12px 18px; 
  font-weight: 600; 
  font-size: 1rem; 
  color: white; 
  background-color: transparent; 
  cursor: default; 
  border-radius: 4px; 
  transition: background-color 0.3s ease, color 0.3s ease;
}
.menu li:hover > .menu-titulo {
  background-color: #3769a8; color: #dbeeff;
}
:root{
  --color-fondo: #0b1e36;
  --color-superficie: #132a4a;        /* tarjetas / bloques */
  --color-borde: rgba(255,255,255,0.08);
  --color-texto: #e6eeff;
  --color-texto-sec: #c9d4f2;
  --color-acento: #f0c04a;
  --color-link: #9dcfff;
  --color-link-hover: #dbeeff;
  --sombra-s: 0 2px 8px rgba(0,0,0,.35);
  --sombra-m: 0 6px 18px rgba(0,0,0,.45);
  --sombra-l: 0 10px 28px rgba(0,0,0,.5);
  --radius: 12px;

  /* Escala de espacios */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem;
}

/* ---------- Base / legibilidad ---------- */
body{
  background-color: var(--color-fondo);
  color: var(--color-texto);
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}

/* Limitar el centrado de todo el texto en main: mejor lectura */
main{
  max-width: 1080px;           /* un poco más ancho */
  padding: 0 var(--sp-4);
  margin: var(--sp-6) auto;
  text-align: left;             /* antes estaba centrado */
}

/* Ritmo vertical suave entre bloques */
main > * + *{ margin-top: var(--sp-5); }

/* Tipografía y jerarquía genérica (no toca tu header h1) */
h1,h2,h3,h4{ font-family: 'Montserrat', sans-serif; line-height: 1.2; }
h1{ font-size: clamp(2rem, 3.2vw, 2.6rem); margin-bottom: .6rem; }
h2{ font-size: clamp(1.6rem, 2.4vw, 2rem); color: var(--color-acento); letter-spacing: .06em; }
h3{ font-size: clamp(1.25rem, 1.8vw, 1.5rem); color: #b6d6ff; }
p{ color: var(--color-texto-sec); }

/* Enlaces en contenido */
main a{ color: var(--color-link); text-decoration: none; }
main a:hover{ color: var(--color-link-hover); text-decoration: underline; }

/* ---------- Header (mantiene tus animaciones, solo suaviza) ---------- */
.header-background{ height: 320px; }
.overlay{
  background-color: rgba(11,30,54,.78);
  backdrop-filter: saturate(120%) blur(2px);
}
header h1{
  letter-spacing: 6px;
  text-shadow: 0 6px 24px rgba(0,0,0,.35);
  background: linear-gradient(100deg, #f0c04a 10%, #ffffff 70%, #bfe0ff 100%);
  -webkit-background-clip: text; background-clip: text;
}
.subtitulo-header{ color: #dfe9ff; }

/* Reduce animación si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  .header-background::before{ animation: none !important; }
  .overlay, header h1, .subtitulo-header{ animation: none !important; }
}

/* ---------- Menú (accesibilidad y pulido) ---------- */
.menu a{
  outline: none;
}
.menu a:focus-visible{
  box-shadow: 0 0 0 3px rgba(157,207,255,.35);
  background-color: rgba(73,129,208,.25);
}
.menu a:hover, .menu li:hover > a{
  background-color: #2f5f9c;
  color: #eef5ff;
}
.submenu{
  border: 1px solid var(--color-borde);
  backdrop-filter: blur(2px);
}
.menu li:focus-within > .submenu{ display:block; opacity:1; } /* teclado */

/* ---------- Botones portada ---------- */
.btn-portada{
  background: linear-gradient(180deg, #3b6ead, #325d92);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: .75rem 1.25rem;
  box-shadow: var(--sombra-s);
}
.btn-portada:hover{
  background: linear-gradient(180deg, #4981d0, #3b6ead);
  transform: translateY(-1px);
}

/* ---------- Bloques de artículo (sin cambiar tu HTML) ---------- */
/* Si tus páginas usan <article>, se verán enmarcadas. Si no, aplica .post al contenedor */
main article,
.post{
  background-color: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radius);
  padding: clamp(1rem, 2.5vw, 2rem);
  box-shadow: var(--sombra-m);
}

/* Imágenes dentro de artículos */
main article img, .post img{
  border-radius: 10px;
  box-shadow: var(--sombra-s);
  max-width: 100%; height: auto;
}

/* Citas, listas y figuras más limpias */
blockquote{
  margin: var(--sp-5) 0; padding: var(--sp-4) var(--sp-5);
  background: rgba(255,255,255,.04);
  border-left: 4px solid var(--color-acento);
  border-radius: 8px;
}
ul,ol{ padding-left: 1.25rem; }
hr{ border: none; border-top: 1px solid var(--color-borde); margin: var(--sp-6) 0; }

/* ---------- Listado de artículos en “cards” (opcional, sin romper nada) ---------- */
/* Si envuelves tus artículos de listado en un contenedor .grid-articulos, obtienes rejilla */
.grid-articulos{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-5);
}
.grid-articulos article{
  display: flex; flex-direction: column; overflow: hidden;
}
.grid-articulos article .thumb{
  height: 180px; overflow: hidden; border-radius: 10px; margin-bottom: var(--sp-4);
}
.grid-articulos article .thumb img{ width: 100%; height: 100%; object-fit: cover; }

/* Enlace Leer más */
.leer-mas{
  margin-top: auto;
  color: var(--color-acento);
  font-weight: 700;
  text-decoration: none;
}
.leer-mas:hover{ color: #fff; text-decoration: underline; }

/* ---------- Sección Restaurantes (pulido visual, mantiene tus clases) ---------- */
#restaurantes-turisticos{
  max-width: 1000px;
  margin: var(--sp-6) auto var(--sp-7);
  color: var(--color-texto);
}
#restaurantes-turisticos h2{
  text-shadow: 0 8px 24px rgba(0,0,0,.45);
  letter-spacing: .14em;
}
.restaurante{
  background-color: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radius);
  box-shadow: var(--sombra-m);
}
.restaurante h3{
  color: #c7e0ff;
  margin-bottom: .4rem;
}
.restaurante a{
  color: var(--color-acento);
}
.restaurante a:hover{ color: #fff; }
.restaurante em{ color: var(--color-texto-sec); }

/* ---------- Utilidades pequeñas ---------- */
.container{ max-width: 1080px; margin-inline: auto; padding-inline: var(--sp-4); }
.center{ text-align: center; }
.mt-0{ margin-top: 0 !important; }
.mb-0{ margin-bottom: 0 !important; }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  main{ margin: var(--sp-5) auto; }
  .header-background{ height: 280px; }
}
@media (max-width: 600px){
  .grid-articulos{ grid-template-columns: 1fr; }
  .btn-portada{ width: 100%; text-align: center; }
}

.valoracion {
  display: inline-block;
  font-weight: 700;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 0.95rem;
  margin-bottom: 0.8rem;
  box-shadow: var(--sombra-s);
}

.valoracion.buena {
  background-color: rgba(46, 204, 113, 0.2); /* verde */
  color: #2ecc71;
}

.valoracion.media {
  background-color: rgba(241, 196, 15, 0.2); /* amarillo */
  color: #f1c40f;
}

.valoracion.mala {
  background-color: rgba(231, 76, 60, 0.2); /* rojo */
  color: #e74c3c;
}
.restaurante.u-fleku   { background-color: rgba(46, 204, 113, 0.08); } /* verde suave */

.indice-restaurantes {
  background: #f9f9f9;
  padding: 1em;
  margin: 1.5em 0;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.indice-restaurantes h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2em;
  margin-bottom: 0.5em;
}

.indice-restaurantes ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.indice-restaurantes li {
  margin: 0.3em 0;
}

.indice-restaurantes a {
  text-decoration: none;
  color: #0066cc;
}

.indice-restaurantes a:hover {
  text-decoration: underline;
}
.indice-restaurantes {
  background: #fff;
  padding: 1em 1.5em;
  margin: 2em auto;
  max-width: 800px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.indice-restaurantes h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.3em;
  margin-bottom: 0.8em;
  color: #002244; /* azul oscuro a juego con tu header */
}

.indice-restaurantes ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.5em 1em;
}

.indice-restaurantes li {
  margin: 0.2em 0;
}

.indice-restaurantes a {
  text-decoration: none;
  color: #0066cc;
  font-weight: 500;
}

.indice-restaurantes a:hover {
  color: #ff9900;
  text-decoration: underline;
}

.gastronomia h3 {
  font-size: 1.6em;
  color: #f4c542; /* Amarillo como en tu índice */
  margin-top: 1.5em;
}
.gastronomia p {
  line-height: 1.6;
  margin-bottom: 1em;
}
.img-pequena {
  max-width: 130px;  /* Usa el valor que prefieras para el tamaño "pequeño" */
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.img-mediana {
  max-width: 450px;
  height: auto;
  display: block;
  margin: 0 auto;

  
}
.img-pilsner {
  max-width: 350px; 
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.img-grande {
  display: block;
  margin: 0 auto;
  height: auto;
  max-width: 725px; /* o lo que decidas */
  width: 100%;
}
h2 {
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  color: var(--color-acento);
  letter-spacing: .06em;
  background-color: rgba(240, 192, 74, 0.2); /* fondo amarillo suave */
  padding: 0.3em 0.8em;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(240, 192, 74, 0.4);
  margin-bottom: 0.8rem;
}
.bloque-titulo h2 {
  text-transform: uppercase;
  font-size: 2.3rem;
  letter-spacing: 0.12em;
  margin-bottom: 0.3em;
  color: #f0c04a;
  font-family: 'Montserrat', sans-serif;
}

.bloque-titulo h3 {
  font-size: 1.35rem;
  font-weight: 700;
  margin-top: 0;
  color: #e9edfd;
  font-family: 'Poppins', sans-serif;
}

.galeria-listek {
  display: flex;
  gap: 10px;      /* espacio entre imágenes */
  justify-content: center; /* centra el conjunto */
  flex-wrap: wrap; /* por si se ve en móvil, que bajen */
}

.galeria-listek img {
  max-width: 100%; 
  height: auto;    /* mantiene proporción */
}
figure figcaption {
  font-size: 0.9em;
  color: #666;
  font-style: italic;
  text-align: center;
  margin-top: 0.3em;
}

.mini-guia {
  background-color: #fff;       /* fondo blanco para contraste */
  border: 2px solid #ddd;
  border-radius: 8px;
  padding: 1em 1.2em;
  margin: 1.5em 0;
  font-size: 0.95rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  color: #222;                  /* texto oscuro */
}

/* título */
.mini-guia h3 {
  margin-top: 0;
  color: #222;
  font-size: 1.15rem;
  font-weight: 700;
  border-bottom: 2px solid #eee;
  padding-bottom: 0.3em;
}

/* lista */
.mini-guia ol {
  margin: 0;
  padding-left: 1.2em;
}

.mini-guia li {
  margin: 0.8em 0;
  line-height: 1.5;
}

.mini-guia li strong {
  color: #a52a2a;   /* marrón rojizo tipo cerveza */
}

.mini-guia li em {
  display: block;
  color: #444;
  font-weight: bold;
  font-style: normal;
  margin-top: 0.2em;
}

/* enlaces */
.mini-guia a {
  color: #0066cc;
  text-decoration: none;
}

.mini-guia a:hover {
  text-decoration: underline;
}

/* 📱 versión móvil */
@media (max-width: 768px) {
  .mini-guia {
    width: 100%;
    margin: 1.5em auto;
  }
}

/* 💻 versión escritorio */
@media (min-width: 769px) {
  .mini-guia {
    width: 35%;             /* caja estrecha */
    float: right;           /* flota a la derecha del artículo */
    margin: 0 0 1.5em 1.5em; /* separación del texto */
  }
}
footer {
  text-align: center;
  font-size: 0.9em;
  color: #666;
  margin-top: 40px;
  padding: 10px 0;
  border-top: 1px solid #ddd;

  
}
figure {
  display: flex;
  flex-direction: column;
  align-items: center;
}
figure img {
  display: block;
  margin: 0;
}
.restaurante h3 {
  text-align: center;
}
.restaurante .valoracion {
  display: block;      /* para que el span se comporte como bloque y se aplique el centrado */
  text-align: center;
  margin: 0 auto;     /* opcional, ayuda a centrar si tiene ancho fijo */
}

.brewpub-direccion {
  text-align: center;
}

main h2 {
  text-align: center;
}
.indice-restaurantes h3 {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.7em;
  margin-bottom: 1em;
  color: #1d375a;
  letter-spacing: 2px;
  font-weight: 900;
}
.indice-restaurantes {
  background: linear-gradient(110deg, #f6f7fb 60%, #f0c04a15 100%);
  padding: 2em 1.5em;
  margin: 2.5em auto;
  max-width: 820px;
  border-radius: 15px;
  box-shadow: 0 4px 16px rgba(48, 64, 96, 0.10);
  border: none;
}

/* Haz la lista más tipo grid de tarjetas */
.indice-restaurantes ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1em 2em;
}

.indice-restaurantes li {
  margin: 0.4em 0;
}

.indice-restaurantes a {
  display: inline-block;
  width: 100%;
  background: #eaf0fa;
  color: #175bbd;
  text-decoration: none;
  font-weight: 700;
  padding: 0.7em 1em;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(240,192,74,.06);
  transition: background 0.2s, color 0.2s, transform 0.14s;
  text-align: center;
  font-size: 1.12em;
}

.indice-restaurantes a:hover {
  background: #ffd869;
  color: #193877;
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 5px 24px rgba(240, 192, 74, 0.15);
}
.indice-restaurantes.compacto h3 {
  font-size: 1.1rem;
  padding: 0.04em 0.7em;
  margin-bottom: 0.7em;
}

.indice-restaurantes ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));  /* MÁS ESTRECHOS */
  gap: 0.65em 1.0em;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 1100px;   /* MÁS ANCHO */
  box-sizing: border-box;
}


.indice-restaurantes.compacto a {
  font-size: 0.93em;
  padding: 0.48em 0.08em;
}
.titulo-categoria {
  text-align: center;
  font-size: 2.1rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  color: #f0c04a;
  margin: 0.5em 0 0.7em 0;
  letter-spacing: 0.07em;
  text-shadow: 0 2px 12px #1b1b1b33, 1px 1px 0 #fff3;
  background: none;
  border-radius: 0;
  padding: 0;
}
.titulo-platos {
  text-align: center;
  font-size: 1.15rem;     /* un tamaño pequeño/elegante */
  color: #f0c04a;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  margin: 0.6em 0 0.7em 0;
}
#titulo-central {
  text-align: center;
}
.contact-box {
  background: #19233b;
  color: #f3f3f3;
  padding: 24px 32px;
  margin: 36px auto 0 auto;
  max-width: 500px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.11);
}

.contact-box a {
  color: #7fc7e6;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}

.contact-box a:hover {
  color: #ffe373;
  text-shadow: 0 0 4px #222;
}
.icono-obras {
  width: 16px;       /* ajusta el tamaño */
  height: 16px;
  margin-left: 5px;  /* un poco de espacio desde el texto */
  vertical-align: middle; /* para que se alinee verticalmente con el texto */
}

/* Menú y hamburguesa por defecto: DESKTOP (pantalla grande) */
.menu {
  display: flex;
  gap: 1em;
  list-style: none;
  justify-content: center;
}
.menu-toggle {
  display: none;
  /* otros estilos si quieres */
}

/* SOLO móvil (<900px) */
@media (max-width: 900px) {
  .menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100vw;
    background: #00385d; /* fondo oscuro para contraste */
    color: #fff;
    z-index: 999;
    padding: 1em 0;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    max-height: calc(100vh - 50px);
    overflow-y: auto;
  }
  .menu.active {
    display: flex;
  }
  .menu-toggle {
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1100;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
  }
  .menu-toggle span {
    display: block;
    height: 4px;
    width: 28px;
    margin: 6px 0;
    background: #fff;   /* Color blanco, visible sobre fondo oscuro */
    border-radius: 2px;
    opacity: 1;
  }
}
  figure img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  html, body {
  max-width: 100vw;
  overflow-x: hidden;
}
.img-mediana {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.img-mediana {
  max-width: 500px; /* Define el ancho máximo visible */
  width: 100%;      /* Se adapta al ancho de la pantalla */
  height: auto;     /* Mantiene la proporción de la imagen */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 600px) {
  .titulo {
    max-width: 100%; /* En pantallas pequeñas, ocupa todo el ancho disponible */
  }
}
h1 {
  font-size: 3em; /* para escritorio */
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  /* Otros estilos que desees */
}

@media (max-width: 600px) {
  h1 {
    font-size: 6vw; /* valor flexible para móvil */
    text-align: center; /* opcional */
    padding: 0 5vw; /* opcional, margen lateral */
  }
}