// pagina principal

body {
    font-family: Arial, sans-serif;
    background: #f5f5f5;
    margin: 0;
  }
  
  header {
    background: #0077b6;
    color: white;
    padding: 20px;
    text-align: center;
  }
  
  nav a {
    color: white;
    margin: 0 15px;
    text-decoration: none;
  }
  
  .posts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
  }
  
  .post {
    background: white;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    padding: 15px;
  }
  
  .post img {
    width: 100%;
    border-radius: 10px;
  }
  
  footer {
    text-align: center;
    padding: 10px;
    background: #023e8a;
    color: white;
    margin-top: 20px;
  }
  
  // pagina toledo

  .post-detail {
  max-width: 800px;
  margin: 30px auto;
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.post-detail img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 15px;
}

.post-detail h2 {
  color: #0077b6;
}

.post-detail .fecha {
  font-size: 0.9em;
  color: gray;
  margin-bottom: 10px;
}

.post-detail .contenido p {
  line-height: 1.6;
  margin-bottom: 15px;
}

// pagina puy dy :fou 
.post-detail {
  max-width: 800px;
  margin: 30px auto;
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.post-detail h1 {
  color: #0077b6;
}

.post-detail img {
  width: 100%;
  border-radius: 10px;
  margin: 15px 0;
}

.post-detail .fecha {
  font-size: 0.9em;
  color: gray;
  margin-bottom: 10px;
}

.post-detail .contenido p {
  line-height: 1.7;
  margin-bottom: 15px;
}

.boton-volver {
  text-align: right;
  margin-top: 20px;
}

.boton-volver a {
  color: #0077b6;
  text-decoration: none;
  font-weight: bold;
}

.boton-volver a:hover {
  text-decoration: underline;
}

.consejos {
      background-color: #f6eee3;
      border: 2px solid #d9b08c;
      border-radius: 10px;
      padding: 25px 20px;
      margin-top: 30px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }
    .consejos h2 {
      border: none;
      color: #6b3317;
      font-size: 1.4em;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .consejos h2::before {
      content: "🎟️";
      font-size: 1.4em;
    }
    ul {
      margin: 15px 0 25px 25px;
    }
    li {
      margin-bottom: 10px;
    }

  /* 🟠 Enlaces dentro del contenido de los posts con subrayado grueso */
.post-detail .contenido a,
.posts .post a {
  color: #0077b6;
  text-decoration: underline;
  text-decoration-color: orange;
  text-decoration-thickness: 3px; /* 🔸 Línea más gruesa */
  text-underline-offset: 4px;     /* 🔸 Espacio entre el texto y la línea */
  transition: all 0.2s ease;
}

.post-detail .contenido a:hover,
.posts .post a:hover {
  color: orange;
  text-decoration-color: orange;
  text-decoration-thickness: 4px; /* 🔸 Un poco más gruesa al pasar el ratón */
}

/* 🧭 Cuadro de recomendaciones en posts */
.recuadro-info {
  background: #fff7e6; /* tono suave tipo pergamino */
  border-left: 5px solid orange;
  border-radius: 10px;
  padding: 20px;
  margin-top: 30px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.recuadro-info h3 {
  color: #ff8800;
  margin-top: 0;
}

.recuadro-info h4 {
  color: #0077b6;
  margin-bottom: 8px;
  margin-top: 18px;
}

.recuadro-info p {
  line-height: 1.6;
  margin-bottom: 12px;
}

/* Ajuste responsive */
@media (max-width: 768px) {
  .recuadro-info {
    padding: 15px;
    font-size: 0.95em;
  }
}

/* 🎟️ Sección de compra de entradas */
.entradas {
  margin-top: 40px;
  background: #f9fafc;
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.entradas h3 {
  color: #ff8800;
  margin-bottom: 10px;
}

.entradas p {
  margin-bottom: 25px;
  line-height: 1.6;
}

.entradas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.tarjeta-entrada {
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tarjeta-entrada:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.tarjeta-entrada h4 {
  color: #0077b6;
  margin-bottom: 8px;
}

.tarjeta-entrada p {
  font-size: 0.95em;
  margin-bottom: 15px;
}

.btn-entrada {
  display: inline-block;
  background: orange;
  color: white;
  text-decoration: none;
  padding: 10px 15px;
  border-radius: 6px;
  font-weight: bold;
  transition: background 0.2s ease;
}

.btn-entrada:hover {
  background: #e76f00;
}

/* 📱 Ajuste responsive */
@media (max-width: 768px) {
  .entradas {
    padding: 20px;
  }
}

/* ⚡ Banner superior en la sección de entradas */
.banner-entradas {
  background: linear-gradient(90deg, #ff8800, #ffb347);
  color: white;
  text-align: center;
  padding: 12px;
  border-radius: 10px 10px 0 0;
  font-weight: bold;
  font-size: 1.05em;
  margin-bottom: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Ajuste para móviles */
@media (max-width: 768px) {
  .banner-entradas {
    font-size: 0.95em;
    padding: 10px;
  }
}

/* 🎨 Galería */
.galeria {
  padding: 20px;
  text-align: center;
}

.galeria h1 {
  margin-bottom: 10px;
}

.subir-foto {
  background-color: #f9f9f9;
  padding: 20px;
  margin: 30px auto;
  border-radius: 10px;
  max-width: 600px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.subir-foto form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.subir-foto input[type="file"],
.subir-foto textarea {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.subir-foto button {
  background-color: #0077b6;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.subir-foto button:hover {
  background-color: orange;
}

/* 🌍 Galería personal */
.galeria {
  padding: 20px;
  text-align: center;
}

.galeria h1 {
  margin-bottom: 10px;
  font-size: 2rem;
}

.galeria p {
  color: #555;
  margin-bottom: 30px;
  font-size: 1.1rem;
}

.galeria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  justify-content: center;
}

.galeria-grid figure {
  background: #f9f9f9;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.galeria-grid figure:hover {
  transform: scale(1.03);
}

.galeria-grid img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.galeria-grid figcaption {
  padding: 10px;
  font-size: 0.95rem;
  color: #333;
  background-color: #fff;
}

/* 🌍 Comunidad */
.comunidad {
  padding: 2rem;
  max-width: 1100px;
  margin: auto;
  text-align: center;
}

.comunidad h1 {
  color: #333;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.comunidad p {
  font-size: 1.1rem;
  color: #555;
  margin-bottom: 2rem;
}

.botones-comunidad {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.btn {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  border-radius: 25px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s, color 0.3s;
}

.btn-principal {
  background-color: orange;
  color: white;
}

.btn-principal:hover {
  background-color: #ff9f43;
}

.btn-secundario {
  background-color: white;
  border: 2px solid orange;
  color: orange;
}

.btn-secundario:hover {
  background-color: orange;
  color: white;
}

.explicacion {
  margin-top: 3rem;
  text-align: left;
}

.explicacion h2 {
  text-align: center;
  color: #333;
}

.explicacion ul {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
}

.explicacion li {
  background: #f8f8f8;
  margin: 0.5rem 0;
  padding: 0.8rem;
  border-radius: 10px;
}

.preview-comunidad {
  margin-top: 4rem;
}

.usuarios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.usuario-card {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  text-align: center;
}

.usuario-card img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1rem;
}

.usuario-card h3 {
  color: #333;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.usuario-card p {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.seguir-btn {
  background-color: orange;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 20px;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}

.seguir-btn:hover {
  background-color: #ff9f43;
}

/* 📱 Responsivo */
@media (max-width: 768px) {
  .botones-comunidad {
    flex-direction: column;
  }
}


/* 🧱 Publicaciones (Feed) */
.feed {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.post {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 15px;
  transition: transform 0.2s ease;
}

.post:hover {
  transform: translateY(-3px);
}

.post-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.post-header h3 {
  margin: 0;
  font-size: 1rem;
  color: #0077b6;
}

.post-header .fecha {
  margin: 0;
  font-size: 0.85rem;
  color: #888;
}

.texto {
  font-size: 1rem;
  color: #333;
  margin-bottom: 10px;
  line-height: 1.5;
}

.post-img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 10px;
  max-height: 400px;
  object-fit: cover;
}

.acciones {
  display: flex;
  justify-content: space-around;
  border-top: 1px solid #eee;
  padding-top: 10px;
}

.acciones button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  transition: color 0.2s ease;
}

.acciones button:hover {
  color: orange;
}

/* 🖼️ Modal de imagen ampliada */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  padding-top: 60px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
  animation: fadeIn 0.3s ease;
}

.modal-content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 80vh;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(255,255,255,0.3);
}

#caption {
  text-align: center;
  color: #ccc;
  font-size: 1rem;
  padding: 10px 0;
}

.close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: white;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.3s ease;
}

.close:hover {
  color: orange;
}

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

/* 📱 Responsivo */
@media (max-width: 600px) {
  .modal-content {
    max-width: 95%;
    max-height: 70vh;
  }
}

/* 👤 PERFIL DE USUARIO */
.perfil {
  max-width: 1000px;
  margin: 2rem auto;
  padding: 1rem;
}

.perfil-header {
  display: flex;
  align-items: center;
  gap: 2rem;
  background-color: #fff;
  padding: 2rem;
  border-radius: 20px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  flex-wrap: wrap;
}

.foto-perfil {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
}

.info-perfil {
  flex: 1;
  text-align: left;
}

.info-perfil h2 {
  margin: 0;
  color: #333;
}

.info-perfil p {
  color: #666;
  margin: 0.5rem 0 1.5rem;
}

.stats {
  display: flex;
  gap: 2rem;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.stats div {
  text-align: center;
}

.stats strong {
  display: block;
  font-size: 1.2rem;
  color: orange;
}

.btn-seguir {
  background-color: orange;
  border: none;
  padding: 0.7rem 1.5rem;
  border-radius: 25px;
  color: white;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s;
}

.btn-seguir:hover {
  background-color: #ff9f43;
}

.perfil-contenido {
  margin-top: 3rem;
}

.perfil-contenido h3 {
  margin-bottom: 1rem;
  color: #333;
  text-align: center;
}

.grid-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.grid-fotos img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.grid-fotos img:hover {
  transform: scale(1.05);
}

/* 📱 Responsivo */
@media (max-width: 768px) {
  .perfil-header {
    flex-direction: column;
    text-align: center;
  }

  .stats {
    justify-content: center;
  }
}

/* 🧡 MURO DE PUBLICACIONES */
.muro {
  max-width: 800px;
  margin: 2rem auto;
  padding: 1rem;
}

.muro h1 {
  text-align: center;
  margin-bottom: 2rem;
  color: #333;
}

.publicaciones {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.post {
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  padding: 1.5rem;
}

.post-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.foto-usuario {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}

.foto-usuario:hover {
  transform: scale(1.05);
  box-shadow: 0 0 8px rgba(255, 165, 0, 0.6);
}

.perfil-link {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  transition: color 0.3s;
}

.perfil-link:hover {
  color: orange;
}

.nombre-usuario {
  font-size: 1rem;
}

.post-header .fecha {
  font-size: 0.85rem;
  color: #777;
  margin: 0;
}

.texto {
  color: #444;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.post-img {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
  margin-bottom: 1rem;
  max-height: 400px;
}

.acciones {
  display: flex;
  gap: 1rem;
}

.acciones button {
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.2s;
}

.acciones button:hover {
  transform: scale(1.1);
}

/* 📱 Responsivo */
@media (max-width: 600px) {
  .post {
    padding: 1rem;
  }

  .post-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .acciones {
    justify-content: space-around;
  }
}

/* 🔗 Enlaces al perfil en el muro */
.perfil-link {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  transition: color 0.3s;
}

.perfil-link:hover {
  color: orange;
}

.nombre-usuario {
  font-size: 1rem;
}

.foto-usuario {
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}

.foto-usuario:hover {
  transform: scale(1.05);
  box-shadow: 0 0 8px rgba(255, 165, 0, 0.6);
}

/* ========== MODAL: ajuste para que la imagen no obligue a hacer scroll ========== */
.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.75);
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

/* Inner limitado al viewport para evitar scroll de la página */
.modal-inner {
  background: #fff;
  width: 100%;
  max-width: 1000px;
  border-radius: 12px;
  overflow: hidden;              /* evita que el propio modal cree scroll de página */
  display: grid;
  grid-template-columns: 1fr 380px;
  box-shadow: 0 6px 30px rgba(0,0,0,0.35);
  max-height: calc(100vh - 40px);/* importante: nunca más alto que la ventana */
}

/* Área izquierda centrada y con contención de la imagen */
.modal-left {
  background: #000;
  padding: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 0;                 /* para que el flex respete max-height del padre */
}

/* La imagen se adapta al espacio disponible sin desbordar */
.modal-left img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 120px); /* deja espacio para el header del modal y botones */
  object-fit: contain;
  border-radius: 6px;
  box-sizing: border-box;
}

/* Parte derecha: fija en tamaño, pero con scroll interno si hay mucho contenido */
.modal-right {
  padding: 18px;
  display:flex;
  flex-direction:column;
  gap: 12px;
  background: #fafafa;
  min-height: 0;                 /* permite que el scroll interno funcione dentro del modal */
  overflow: hidden;
}

/* Comentarios: scroll interno */
.comentarios {
  margin-top: 10px;
  flex: 1;
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:auto;                 /* el scroll quedará dentro del panel derecho */
  min-height: 80px;
  max-height: calc(100vh - 380px); /* ajusta máximo para que no force el modal */
  padding-right: 6px;
}

/* Small screens: columna (imagen encima, panel debajo) */
@media (max-width: 880px) {
  .modal-inner {
    grid-template-columns: 1fr;
    max-height: calc(100vh - 20px);
  }
  .modal-left img {
    max-height: calc(60vh);
  }
  .modal-right {
    max-height: calc(40vh);
    overflow:auto;
  }
}

/* ======== DETALLE DE POST ======== */
.post-detalle {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.btn-volver {
  align-self: flex-start;
  background: #333;
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 20px;
}

.btn-volver:hover {
  background: #555;
}

.contenedor-post {
  display: grid;
  grid-template-columns: 1fr 400px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  overflow: hidden;
  max-width: 1000px;
  width: 100%;
}

.imagen-post {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.imagen-post img {
  width: 100%;
  height: auto;
  max-height: 90vh;
  object-fit: contain;
}

.info-post {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #fafafa;
}

.usuario-post {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.foto-perfil-mini {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.acciones-post {
  display: flex;
  gap: 10px;
  margin: 12px 0;
}

.acciones-post button {
  border: none;
  background: #eee;
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.2s;
}

.acciones-post button:hover {
  background: #ddd;
}

.comentarios-section {
  margin-top: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

#lista-comentarios {
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
  flex: 1;
  overflow-y: auto;
  max-height: 300px;
}

#lista-comentarios li {
  background: #fff;
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 6px;
}

.agregar-comentario {
  display: flex;
  gap: 8px;
}

.agregar-comentario input {
  flex: 1;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

.agregar-comentario button {
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  background: #333;
  color: #fff;
  cursor: pointer;
}

.agregar-comentario button:hover {
  background: #555;
}

/* Versión móvil */
@media (max-width: 850px) {
  .contenedor-post {
    grid-template-columns: 1fr;
  }
  .imagen-post img {
    max-height: 60vh;
  }
}

/* ===== PERFIL DE USUARIO (LÓGICA EXTRA) ===== */

.btn-seguir.siguiendo {
  background-color: #28a745;
  color: #fff;
}

.btn-logout {
  background-color: #dc3545;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 20px;
  transition: 0.3s;
}

.btn-logout:hover {
  background-color: #c82333;
}

/* ======== FORMULARIOS DE REGISTRO Y LOGIN ======== */
.form-container {
  max-width: 400px;
  margin: 60px auto;
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.form-container h2 {
  text-align: center;
  margin-bottom: 20px;
}

.form-container form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-container label {
  font-weight: bold;
  color: #333;
}

.form-container input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.form-container button {
  background: #0077b6;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s;
}

.form-container button:hover {
  background: #005b8a;
}

.form-container p {
  text-align: center;
  margin-top: 10px;
}


/* IMÁGENES DE POSTS (HORIZONTAL Y VERTICAL CONTROLADAS) */
.post-detail img,
.post-img {
  width: 100%;
  max-height: 520px;      /* 🔑 clave */
  object-fit: contain;   /* NO recorta, adapta */
  background: #000;      /* fondo negro elegante */
  border-radius: 12px;
  display: block;
  margin: 20px 0;
}


/* IMÁGENES DEL INDEX (FORMATO HORIZONTAL) */
.post-blog-img {
  width: 290px;
  height: 190px;
  border-radius: 12px;

  /* CLAVE */
  object-fit: contain;     /* se ve entera */
  background: #000;        /* fondo neutro elegante */
}


/* ==============================
   FICHA RÁPIDA BLOG
============================== */

.ficha-rapida {
  background: #fff8f0;
  border-left: 5px solid #ff8c00;
  padding: 18px 20px;
  margin: 25px 0;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

.ficha-rapida h3 {
  margin-top: 0;
  color: #ff8c00;
}

.ficha-rapida ul {
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;
}

.ficha-rapida li {
  margin-bottom: 6px;
  font-size: 15px;
}

/* ==============================
   FICHA RÁPIDA BLOG
============================== */

/* ==========================
   CARRUSEL BLOG
========================== */

.carrusel-container {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.carrusel-track {
  display: flex;
  width: 100%;
  transition: transform 0.4s ease;
}

/* CLAVE: cada imagen ocupa el 100% */
.carrusel-track img {
  width: 100%;
  height: 400px;
  flex: 0 0 100%;   /* 👈 ESTO ARREGLA TODO */
  object-fit: contain;
  background: #000;
}

/* Flechas debajo del carrusel */
.carrusel-controls {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 10px;
}

.carrusel-btn {
  background: #ff8c00;
  color: white;
  border: none;
  font-size: 20px;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.2s;
}

.carrusel-btn:hover {
  background: #d97500;
}

/*para el movil*/

@media (max-width: 768px) {
  .carrusel-track img {
    height: 250px;
  }
}

/* ==========================
   CARRUSEL BLOG
========================== */

/* ==============================
   VALORACIÓN PRO CON ESTRELLAS
============================== */

.valoracion-pro {
  background: #fff;
  border: 2px solid #ff8c00;
  border-radius: 12px;
  padding: 20px;
  margin: 30px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.valoracion-pro h3 {
  margin-top: 0;
  color: #ff8c00;
}

/* Header estrellas + nota */
.valoracion-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 10px 0;
  flex-wrap: wrap;
}

/* Estrellas */
.estrellas {
  font-size: 24px;
  color: #ffb400;
  letter-spacing: 3px;
}

/* Nota grande */
.nota {
  font-size: 32px;
  font-weight: bold;
  color: #ff8c00;
}

.nota .sobre {
  font-size: 18px;
  color: #666;
}

.opinion {
  margin-top: 10px;
  font-size: 15px;
}
/* ==============================
   VALORACIÓN PRO CON ESTRELLAS
============================== */

/* ==========================
   BOTONES COMPARTIR
========================== */

.compartir-post {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin: 30px 0;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  text-align: center;
}

.botones-compartir {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* Botón base */
.btn-share {
  padding: 10px 15px;
  border-radius: 8px;
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  transition: 0.2s;
}

/* Colores redes */
.twitter { background:#1DA1F2; }
.facebook { background:#1877F2; }
.whatsapp { background:#25D366; }
.linkedin { background:#0A66C2; }
.copiar { background:#ff8c00; }
.pinterest { background:#E60023; }
.telegram { background:#229ED9; }
.email { background:#555; }

.btn-share:hover {
  opacity: 0.85;
}

/* ==========================
   BOTONES COMPARTIR
========================== */


/* ==========================
   TIEMPO LECTURA
========================== */
.tiempo-lectura{
color:#666;
font-size:14px;
margin-top:-5px;
margin-bottom:20px;
}
/* ==========================
   TIEMPO LECTURA
========================== */

/* ======================
   ARTÍCULOS RELACIONADOS
====================== */

.articulos-relacionados{
margin-top:50px;
padding-top:20px;
border-top:2px solid #eee;
}

.lista-articulos{
list-style:none;
padding:0;
}

.lista-articulos li{
margin:10px 0;
}

.lista-articulos a{
text-decoration:none;
color:#333;
font-weight:bold;
}

.lista-articulos a:hover{
color:#ff8c00;
}
/* ======================
   ARTÍCULOS RELACIONADOS
====================== */

/* ======================
   MENU DESPLEGABLE
====================== */

/* ======================
   MENU DESPLEGABLE
====================== */

.dropdown{
position:relative;
display:inline-block;
}

/* primer menu */

.dropdown-menu{
display:none;
position:absolute;
background:white;
min-width:220px;
box-shadow:0 4px 10px rgba(0,0,0,0.1);
border-radius:6px;
padding:5px 0;
z-index:100;
white-space:nowrap;
}

/* mostrar primer nivel */

.dropdown:hover .dropdown-menu{
display:block;
}

/* enlaces */

.dropdown-menu a{
display:block;
padding:8px 12px;
text-decoration:none;
color:#333;
}

.dropdown-menu a:hover{
background:#f5f5f5;
color:#ff8c00;
}

/* ===== submenu ===== */

.submenu{
position:relative;
}

.submenu-content{
display:none;
position:absolute;
left:100%;
top:0;
background:white;
min-width:220px;
box-shadow:0 4px 10px rgba(0,0,0,0.1);
border-radius:6px;
}

/* abrir segundo nivel */

.dropdown-menu > .submenu:hover > .submenu-content{
display:block;
}

/* abrir tercer nivel */

.submenu-content > .submenu:hover > .submenu-content{
display:block;
}
/* ======================
   MENU DESPLEGABLE
====================== */

/* ======================
   RUTA / ITINERARIO
====================== */

.ruta-itinerario{
margin:50px 0;
}

.titulo-dia{
background:#ff8c00;
color:white;
padding:12px 18px;
border-radius:8px;
font-size:22px;
margin-bottom:20px;
}

.bloque-ruta{
background:white;
padding:20px;
margin-bottom:15px;
border-radius:10px;
box-shadow:0 3px 10px rgba(0,0,0,0.1);
border-left:5px solid #ff8c00;
}

.bloque-ruta h3{
margin-top:0;
}

.bloque-ruta ul{
margin-top:10px;
}

.enlace-post{
margin-top:10px;
font-weight:bold;
}

.enlace-post a{
color:#ff8c00;
text-decoration:none;
}

.enlace-post a:hover{
text-decoration:underline;
}
/* ======================
   RUTA / ITINERARIO
====================== */

/* ======================
   PLANIFICA TU VIAJE
====================== */

.planifica-viaje{
background:#fff;
border-radius:10px;
padding:20px;
box-shadow:0 3px 10px rgba(0,0,0,0.1);
margin:30px 0;
border-left:5px solid #ff8c00;
}

.planifica-viaje ul{
padding-left:20px;
margin:0;
}

.planifica-viaje li{
margin-bottom:10px;
font-size:15px;
}

.planifica-viaje a{
color:#ff8c00;
font-weight:bold;
text-decoration:underline;
}

.planifica-viaje a:hover{
color:#d97500;
}
/* ======================
   PLANIFICA TU VIAJE
====================== */

/* GRID POSTS */
.posts-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:25px;
margin-top:20px;
}

/* TARJETA */
.post{
background:#fff;
border-radius:12px;
overflow:hidden;
box-shadow:0 3px 10px rgba(0,0,0,0.1);
transition:0.3s;
}

.post:hover{
transform:translateY(-5px);
}

/* IMAGEN */
.post img{
width:100%;
height:200px;
object-fit:cover;
}

/* CONTENIDO */
.post-content{
padding:15px;
}

.post-content h3{
margin-top:0;
}

/* BOTÓN LEER */
.btn-leer{
display:inline-block;
margin-top:10px;
background:#ff8c00;
color:#fff;
padding:8px 12px;
border-radius:6px;
text-decoration:none;
font-weight:bold;
}

.btn-leer:hover{
background:#d97500;
}

/* OCULTOS */
.post-hidden{
display:none;
}

/* BOTÓN VER MÁS */
.ver-mas-container{
text-align:center;
margin-top:30px;
}

.btn-secondary{
background:#333;
color:#fff;
padding:12px 20px;
border-radius:8px;
border:none;
cursor:pointer;
font-weight:bold;
}

.btn-secondary:hover{
background:#555;
}

/* RESPONSIVE */
@media (max-width: 900px){
.posts-grid{
grid-template-columns:repeat(2, 1fr);
}
}

@media (max-width: 600px){
.posts-grid{
grid-template-columns:1fr;
}
}


/* HEADER CON ICONOS REDES SOCIALES */

nav {
    display: flex;
    align-items: center;
    justify-content: center; /* 👈 Esto centra todo horizontalmente */
    gap: 30px;               /* 👈 Un poco más de espacio para que respire el menú */
    padding: 10px 0;
}

.social-header {
    display: flex;
    align-items: center;
    gap: 15px;               /* Espacio entre Instagram y Pinterest */
    margin-left: 10px;       /* Un pequeño margen extra para separar los iconos del texto */
}

.icon-social {
    width: 30px; 
    height: 30px;
    object-fit: contain;
    transition: 0.3s;
}

/* Opcional: un efecto hover para que se note que son botones */
.icon-social:hover {
    transform: scale(1.2);
}

/* HEADER CON ICONOS REDES SOCIALES */


/* DESTINOS FAVORITOS SOBRE MÍ */

.destinos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.destino-card {
    border: 1px solid #eee;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    background: #f9f9f9;
}

.destino-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 4px;
}

/* DESTINOS FAVORITOS SOBRE MÍ */

/* BOTON SEGUI EN INSTAGRAM SOBRE MÍ */ 
.conecta-conmigo a:hover {
    background-color: #a04000 !important; /* Un naranja más oscuro */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
/* BOTON SEGUI EN INSTAGRAM SOBRE MÍ */ 


/* BARNNER COOKIES */ 

.cookie-banner {
  display: none;
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #1e1e1e;
  color: #fff;
  padding: 15px;
  text-align: center;
  z-index: 9999;
  font-size: 14px;
}

.cookie-banner a {
  color: #f1c40f;
  text-decoration: underline;
}

.cookie-buttons {
  margin-top: 10px;
}

.cookie-buttons button {
  margin: 5px;
  padding: 8px 15px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

#accept-cookies {
  background-color: #27ae60;
  color: white;
}

#reject-cookies {
  background-color: #c0392b;
  color: white;
}

/* BARNNER COOKIES */ 


/* CONFIGURACION COOKIES */ 

#cookie-settings {
  display: none;
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
  padding: 20px;
  z-index: 9999;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
}

/* CONFIGURACION COOKIES */ 

/* ENLACES NARANJAS DEL FOOTER */ 

footer {
    background: #0077b6;
    color: white;
    text-align: center;
    padding: 15px;
}

/* enlaces del footer */
.footer-links a {
    color: white;
    text-decoration: none;
    font-weight: 500;
}

.footer-links a:hover {
    color: #ff8c00;
}

footer a {
    color: white;
    text-decoration: none;
}

footer a:hover {
    color: #ff8c00;
}

/* ENLACES NARANJAS DEL FOOTER */ 


/* NOTA AL FINAL DEL ARTICULO GUIA DE VIAJES */ 

.disclaimer-viajes {
    background-color: #f9f9f9;
    border: 1px solid #eee;
    padding: 15px;
    margin-top: 30px;
    font-size: 0.85rem;
    color: #777;
    font-style: italic;
    border-radius: 5px;
}

/* NOTA AL FINAL DEL ARTICULO GUIA DE VIAJES */

/* BUSCADOR HEADER */
.search-box {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    height: 32px;
}

.search-box input {
    border: none;
    outline: none;
    padding: 6px 10px;
    font-size: 14px;
    width: 160px;
}

.search-box button {
    border: none;
    background: #ff8c00;
    color: white;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 14px;
}

.search-box button:hover {
    background: #d97500;
}

.search-box input:focus {
    width: 200px;
    transition: 0.3s;
}

/* BUSCADOR HEADER */

/* PAGINA BUSCAR HTML */

.post-blog {
  display: flex;
  gap: 20px;
  background: white;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 25px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  align-items: center;
}

.post-blog-img {
  width: 290px;
  height: 190px;
  border-radius: 12px;
  object-fit: cover;
}

/* =========================
   PAGINA BUSCAR - MOVIL
========================= */

@media (max-width: 768px){

  .post-blog{

    flex-direction: column;

    align-items: stretch;

    gap: 15px;

  }

  .post-blog-img{

    width: 100%;

    height: 220px;

    object-fit: cover;

  }

  .post-blog-info{

    width: 100%;

  }

  .post-blog-info h3{

    margin-top: 0;

    font-size: 1.6rem;

  }

  .post-blog-info p{

    line-height: 1.6;

  }

  .post-blog-info .btn{

    display: inline-block;

    margin-top: 10px;

  }

}



.post-blog-info{

  flex: 1;

}

.post-blog-info h3{

  color: #005b96;

  margin-bottom: 10px;

}

.post-blog-info .btn{

  background: #f7931e;

  color: white;

  padding: 10px 16px;

  border-radius: 8px;

  text-decoration: none;

  font-weight: bold;

}

.post-blog-info .btn:hover{

  opacity: .9;

}

/* PAGINA BUSCAR HTML */

/* =========================
   QUE VER - MONUMENTOS
========================= */

.que-ver {
  margin-top: 40px;
}

.que-ver h2 {
  margin-bottom: 20px;
  color: #0077b6;
}

/* Tarjeta monumento */
.monumento {
  background: #fff;
  padding: 20px;
  margin-bottom: 25px;
  border-radius: 12px;

  /* 👇 borde naranja */
  border: 2px solid #ff8c00;

  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* TÍTULO AZUL */
.monumento h3 {
  margin-top: 0;
  color: #0077b6; /* azul del blog */
}

/* Imagen */
.monumento img {
  width: 100%;
  max-height: 400px;

  object-fit: contain; /* 👈 clave: NO recorta */
  background: #000;     /* 👈 relleno tipo Instagram para verticales */

  border-radius: 10px;
  margin: 10px 0;
}

/* Pie de foto */
.pie-foto {
  font-size: 13px;
  color: #777;
  font-style: italic;
  margin-top: -5px;
  margin-bottom: 10px;
}

/* Botón volver */
.boton-volver {
  margin-top: 30px;
}

.boton-volver a {
  text-decoration: none;
  color: #ff8c00;
  font-weight: bold;
}

.boton-volver a:hover {
  color: #d97500;
}

.monumento {
  border-left: 6px solid #ff8c00;
}

/*adaptacion a moviles y tablets*/
@media (max-width: 768px) {
  .monumento img {
    max-height: 250px;
  }
}

@media (max-width: 480px) {
  .monumento img {
    max-height: 200px;
  }

  .monumento {
    padding: 15px;
  }

  .monumento h3 {
    font-size: 18px;
  }
}

/* =========================
   QUE VER - MONUMENTOS
========================= */


/* =========================
   ENLACE QUE VER 
========================= */

.enlace-que-ver {
  margin: 20px 0;
  text-align: center;
}

.enlace-que-ver a {
  color: #ff8c00;
  font-weight: bold;
  font-size: 18px;
  text-decoration: none;
}

.enlace-que-ver a:hover {
  color: #d97500;
  text-decoration: underline;
}

/* =========================
   ENLACE QUE VER 
========================= */

/* =========================
   PARRAFO PRINCIPAL PAGINA QUE VER
========================= */

.intro-que-ver {
  margin: 20px 0 30px 0;
  font-size: 16px;
  line-height: 1.6;
}

/* =========================
   PARRAFO PRINCIPAL PAGINA QUE VER
========================= */

/* =========================
   ÍNDICE DE CONTENIDOS
========================= */

.indice-contenido {
  background: #fff;
  border: 2px solid #ff8c00;
  border-radius: 10px;
  padding: 15px 20px;
  margin: 25px 0;
}

.indice-contenido h3 {
  margin-top: 0;
  color: #2e3a59;
}

.indice-contenido ul {
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;
}

.indice-contenido li {
  margin-bottom: 8px;
}

.indice-contenido a {
  text-decoration: none;
  color: #ff8c00;
  font-weight: 500;
}

.indice-contenido a:hover {
  text-decoration: underline;
}

html {
  scroll-behavior: smooth;
}

/* =========================
   ÍNDICE DE CONTENIDOS
========================= */

/* Bloque de Información Práctica que ver*/

.info-practica-container {
    max-width: 900px;
    margin: 40px auto;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.info-practica-header {
    background-color: #00337c;
    color: #ffffff;
    padding: 20px;
    text-align: center;
}

.info-practica-header h2 {
    margin: 0;
    font-size: 1.5rem; /* Tamaño base */
    color: #ffffff !important;
    border: none !important;
}

.info-practica-body {
    padding: 30px;
    background-color: #ffffff;
}

.info-item {
    margin-bottom: 30px;
}

.info-item h3 {
    color: #d35400;
    font-size: 1.25rem;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.info-item p {
    color: #555;
    line-height: 1.7;
    font-size: 1rem;
}

/* --- AJUSTES PARA MÓVILES (Media Queries) --- */

@media (max-width: 600px) {
    .info-practica-container {
        margin: 20px 10px; /* Menos margen lateral para aprovechar la pantalla */
        border-radius: 8px;
    }

    .info-practica-header {
        padding: 15px;
    }

    .info-practica-header h2 {
        font-size: 1.2rem; /* Título un poco más pequeño en móvil */
    }

    .info-practica-body {
        padding: 20px; /* Menos relleno interno para que no quede el texto muy estrecho */
    }

    .info-item h3 {
        font-size: 1.15rem;
        flex-direction: column; /* Icono y texto uno sobre otro si el título es largo */
        align-items: flex-start;
    }

    .info-item p {
        font-size: 0.95rem; /* Fuente ligeramente más pequeña para mejor lectura */
    }
}

/* Bloque de Información Práctica que ver*/

/* CUADRO MI CONSEJO PARA AHORRAR PAGINA QUE VER*/

.caja-consejo-afiliado {
    background-color: #fdf2e9; /* El tono crema suave de tu captura */
    border: 1px solid #ff8c00; /* Línea continua naranja */
    border-left: 8px solid #ff8c00; /* Borde izquierdo más grueso */
    padding: 25px;
    margin: 35px 0;
    border-radius: 8px;
    text-align: center;
    font-family: 'Segoe UI', sans-serif;
    box-shadow: 0 2px 8px rgba(211, 84, 0, 0.1); /* Sombra naranja muy sutil */
}

.caja-consejo-afiliado p {
    color: #555;
    line-height: 1.6;
    margin: 5px 0;
}

.caja-consejo-afiliado strong {
    color: #333;
}

/* El enlace de afiliado estilo botón sutil */
.enlace-afiliado {
    color: #ff8c00;
    text-decoration: underline;
    font-weight: bold;
    transition: 0.3s;
}

.enlace-afiliado:hover {
    color: #00337c; /* Cambia a tu azul al pasar el ratón */
}

/* CUADRO MI CONSEJO PARA AHORRAR PAGINA QUE VER*/

/* CONSEJO VIAJERO PAGINA QUE VER */

.highlight-box {
    background-color: #fdf2e9;
    border-left: 5px solid #d35400;
    padding: 20px;
    margin: 25px 0;
    border-radius: 0 8px 8px 0;
}

.highlight-box p {
    margin: 0;
    line-height: 1.6;
    /* Color de fuente más oscuro y nítido */
    color: #333; 
}

.highlight-box strong {
    /* El negrita lo ponemos un pelín más intenso aún */
    color: #111; 
}

/* CONSEJO VIAJERO PAGINA QUE VER */

/* BOTÓN IR ARRIBA */

#btn-arriba {
  position: fixed;
  bottom: 25px;
  right: 25px;

  background: #ff8c00;
  color: white;
  border: none;

  width: 45px;
  height: 45px;

  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;

  display: none; /* oculto al inicio */
  z-index: 999;

  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  transition: 0.3s;
}

#btn-arriba:hover {
  background: #d97500;
  transform: scale(1.1);
}

/* BOTÓN IR ARRIBA */

/* CONSEJO FOTOGRAFICO PAGINA QUE VER */

.consejo-foto {
    background-color: #f8f9fa; 
    border: 1px solid #d35400;
    border-left: 8px solid #d35400;
    padding: 25px;
    margin: 30px 0;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.icon-camera {
    font-size: 1.8rem;
}

.consejo-foto-texto h4 {
    margin: 0 0 8px 0;
    color: #111; /* El tono negro que pediste */
    font-size: 1.1rem;
    text-transform: uppercase;
}

.consejo-foto-texto p {
    margin: 0;
    line-height: 1.6;
    color: #333; /* El tono negro suave */
}

/* CONSEJO FOTOGRAFICO PAGINA QUE VER */

/* ESPECTÁCULOS PUY DU FOU */    

.ficha-espectaculo {
    margin-bottom: 50px;
    padding-bottom: 20px;
    border-bottom: 2px solid #eee;
}

.titulo-espectaculo {
    color: #00337c;
    border-left: 6px solid #d35400;
    padding-left: 15px;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 20px;
}

.puntos-clave-lista {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 15px;
    margin-top: 20px;
}

.puntos-clave-lista li {
    background: #fdf2e9;
    padding: 15px;
    border-radius: 8px;
    color: #333;
}

.puntos-clave-lista strong {
    color: #d35400;
    display: block;
    margin-bottom: 5px;
}

/* ESPECTÁCULOS PUY DU FOU */  

/* =========================
   COMENTARIOS
========================= */

.comentarios {
  margin-top: 50px;
}

.comentarios h3 {
  color: #2e3a59;
  margin-bottom: 20px;
}

/* Comentario */
.comentario {
  background: #fff;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 20px;

  border-left: 4px solid #ff8c00;

  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.comentario-autor {
  font-weight: bold;
  color: #2e3a59;
  margin-bottom: 5px;
}

.comentario-texto {
  margin: 0;
}

/* FORMULARIO */
.form-comentario {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-comentario input,
.form-comentario textarea {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;

  font-size: 15px;
  font-family: inherit;
}

.form-comentario textarea {
  min-height: 120px;
  resize: vertical;
}

.form-comentario button {
  background: #ff8c00;
  color: white;
  border: none;

  padding: 12px;
  border-radius: 8px;

  cursor: pointer;
  font-weight: bold;

  transition: 0.3s;
}

.form-comentario button:hover {
  background: #d97500;
}

/* =========================
   COMENTARIOS
========================= */

/* =========================
   NEWSLETTER
========================= */

.newsletter {
  margin-top: 50px;

  background: #fff;
  padding: 25px;

  border-radius: 12px;
  border: 2px solid #ff8c00;

  text-align: center;
}

.newsletter h3 {
  color: #2e3a59;
  margin-top: 0;
}

.newsletter p {
  margin-bottom: 20px;
}

/* FORM */
.newsletter-form {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.newsletter-form input {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;

  min-width: 250px;
}

.newsletter-form button {
  background: #ff8c00;
  color: white;

  border: none;
  padding: 12px 18px;

  border-radius: 8px;
  cursor: pointer;

  font-weight: bold;
}

.newsletter-form button:hover {
  background: #d97500;
}

@media (max-width: 768px) {

  .newsletter-form {
    flex-direction: column;
  }

  .newsletter-form input,
  .newsletter-form button {
    width: 100%;
  }

}

/* =========================
   NEWSLETTER
========================= */

/* =========================
   HERO GUIAS
========================= */

.hero-guias {
  text-align: center;
  padding: 50px 20px;
}

.hero-guias h1 {
  font-size: 42px;
  color: #2e3a59;
  margin-bottom: 15px;
}

.hero-guias p {
  font-size: 18px;
  color: #666;
}

/* =========================
   GRID PAISES
========================= */

.grid-paises {
  display: grid;

  grid-template-columns:
  repeat(auto-fit, minmax(320px, 1fr));

  gap: 30px;

  margin-top: 40px;
}

/* CARD */
.pais-card {
  position: relative;

  height: 320px;

  overflow: hidden;

  border-radius: 14px;

  text-decoration: none;

  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

.pais-card img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: 0.4s;
}

.pais-card:hover img {
  transform: scale(1.05);
}

/* OVERLAY */
.overlay {
  position: absolute;

  inset: 0;

  background:
  rgba(0,0,0,0.4);

  display: flex;

  flex-direction: column;

  justify-content: center;
  align-items: center;

  text-align: center;

  color: white;

  padding: 20px;
}

.overlay h2 {
  font-size: 36px;
  margin-bottom: 10px;
}

.overlay p {
  max-width: 320px;
  line-height: 1.6;
}

/* =========================
   REGIONES
========================= */

.region-section {
  margin-top: 60px;
}

.titulo-region {
  margin-bottom: 30px;

  color: #2e3a59;

  border-left: 5px solid #ff8c00;

  padding-left: 15px;
}

/* RESPONSIVE */

@media (max-width: 768px){

  .hero-guias h1{
    font-size: 32px;
  }

  .grid-paises{
    grid-template-columns: 1fr;
  }

}

/* =========================
   GRID PAISES
========================= */

/* =========================
   RUTA PULSERA TURISTICA
========================= */

/* Contenedor principal del cronograma */
.cronograma-ruta {
  background-color: #f9f9f9;
  border-left: 4px solid #d35400;
  padding: 20px;
  margin: 30px 0;
  border-radius: 0 8px 8px 0;
  font-family: inherit; /* Sigue la tipografía de tu blog */
}

/* Título de la sección de la ruta */
.cronograma-titulo {
  margin-top: 0;
  color: #333;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 20px;
}

/* Lista del itinerario */
.cronograma-lista {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

/* Elementos de la lista (cada parada) */
.cronograma-item {
  margin-bottom: 20px;
  position: relative;
  padding-left: 30px;
  line-height: 1.5;
}

/* El último elemento no necesita margen inferior */
.cronograma-item:last-child {
  margin-bottom: 0;
}

/* Iconos de los monumentos */
.cronograma-icono {
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 1.1rem;
}

/* Detalles de tiempo y distancias */
.cronograma-tiempo {
  color: #666;
  font-size: 0.95rem;
  display: block;
  margin-top: 2px;
}

.cronograma-consejo {
  color: #d35400;
  font-size: 0.95rem;
  font-weight: 500;
}

.cronograma-caminata {
  color: #888;
  font-size: 0.9rem;
  display: block;
  margin-top: 4px;
  font-style: italic;
}

/* =========================
   RUTA PULSERA TURISTICA
========================= */

/* =========================
   LOGO EN EL HEADER
========================= */

.logo-blog img {
    max-width: 320px;
    width: 100%;
    height: auto;
}
/* =========================
   LOGO EN EL HEADER
========================= */

/* =========================
   CURIOSIDADES SOBRE MI
========================= */

.sobre-mi-curiosidades{

  background:#f8f9fa;

  border-left:5px solid #e67e22;

  padding:25px;

  margin:40px 0;

  border-radius:10px;

  box-shadow:0 2px 8px rgba(0,0,0,0.08);

}

.sobre-mi-curiosidades h3{

  color:#2c3e50;

  margin-top:0;

  margin-bottom:20px;

}

.sobre-mi-curiosidades ul{

  list-style:none;

  padding:0;

  margin:0;

}

.sobre-mi-curiosidades li{

  margin-bottom:14px;

  line-height:1.7;

}

.sobre-mi-curiosidades li:last-child{

  margin-bottom:0;

}

/* =========================
   CURIOSIDADES SOBRE MI
========================= */

/* =========================
   CSS BOTON HAMBURGUESA
========================= */

.menu-toggle{

  display:none;

  background:none;

  border:none;

  color:white;

  font-size:32px;

  cursor:pointer;

}

/* =========================
   BOTON HAMBURGUESA MOVIL
========================= */

@media (max-width: 768px){

  .menu-toggle{
    display:block;
    margin:10px auto;
  }

  nav{

    display:none;

    flex-direction:column;

    gap:15px;

    margin-top:15px;

  }

  nav.active{
    display:flex;
  }

  .social-header{
    justify-content:center;
  }

  .search-box{
    width:100%;
    justify-content:center;
  }

  .search-box input{
    width:90%;
  }

}



@media (max-width: 768px) {

  .dropdown-menu {
    position: static;
    width: 100%;
    box-sizing: border-box;
  }

  .dropdown-submenu {
    position: static !important;
    left: auto !important;
    top: auto !important;
    margin-top: 10px;
    width: 100%;
  }

  .dropdown-menu a,
  .dropdown-submenu a {
    display: block;
    padding: 12px;
  }

}


@media (max-width: 768px) {

  /* Todos los niveles del menú */
  .submenu {
    position: relative;
    width: 100%;
  }

  /* Los desplegables dejan de abrirse a la derecha */
  .submenu-content {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;

    width: 100%;
    box-sizing: border-box;
    margin-top: 5px;
  }

  /* Enlaces más cómodos en móvil */
  .submenu-content a {
    display: block;
    padding: 12px;
    white-space: normal;
  }

}

/* =========================
   CSS BOTON HAMBURGUESA
========================= */

/* =========================
   MAPAS PUNTOS INTERES
========================= */

.mapa-ruta{

  width:100%;

  margin:30px 0;

  border-radius:12px;

  overflow:hidden;

  box-shadow:0 2px 10px rgba(0,0,0,.15);

}

.mapa-ruta iframe{

  width:100%;

  height:500px;

  border:none;

  display:block;

}

@media (max-width:768px){

  .mapa-ruta iframe{

    height:350px;

  }

}

/* =========================
   MAPAS PUNTOS INTERES
========================= */

/* =========================
   AVISO DE INFORMACION DATOS FORM CONTACTO
========================= */

.aviso-privacidad-contacto{
    margin-top:20px;
    padding:15px;
    background:#f8f9fa;
    border-left:4px solid #e67e22;
    border-radius:8px;
    font-size:0.95rem;
    line-height:1.6;
}

.aviso-privacidad-contacto a{
    color:#005b96;
    font-weight:bold;
    text-decoration:none;
}

.aviso-privacidad-contacto a:hover{
    text-decoration:underline;
}

/* =========================
   AVISO DE INFORMACION DATOS FORM CONTACTO
========================= */

/*=========================================
  PRECIOS Y HORARIOS BURUJON
==========================================*/

.recuadro-entradas{

    background:#fff8e8;
    border:2px solid #f39c12;
    border-left:6px solid #f39c12;

    border-radius:18px;

    padding:28px;

    margin:45px 0;

    box-shadow:0 6px 18px rgba(0,0,0,.08);

}

.recuadro-entradas h3{

    margin-top:0;
    margin-bottom:22px;

    color:#d97706;

    font-size:1.7rem;

    font-weight:bold;

}

.recuadro-entradas p{

    line-height:1.9;

    margin-bottom:22px;

    text-align:justify;

}

.recuadro-entradas ul{

    margin:0;
    padding-left:28px;

}

.recuadro-entradas li{

    margin-bottom:18px;

    line-height:1.9;

}

.recuadro-entradas strong{

    color:#000;

}

.recuadro-entradas a{

    color:#0b73b6;

    text-decoration:none;

    border-bottom:2px solid #f39c12;

    transition:.25s;

}

.recuadro-entradas a:hover{

    color:#f39c12;

}

.highlight-box{

    margin-top:30px;

    background:#fdf5ea;

    border-left:5px solid #d97706;

    border-radius:12px;

    padding:18px 22px;

    line-height:1.8;

    box-shadow:0 3px 10px rgba(0,0,0,.06);

}

/*=========================================
  PRECIOS Y HORARIOS BURUJON
==========================================*/