@font-face {
  font-family: 'Lora Italic';
  src: url('../fonts/Lora-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'Playfair Display Black';
  src: url('../fonts/PlayfairDisplay-Black.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Playfair Display Regular';
  src: url('../fonts/PlayfairDisplay-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-size: 2em;
    font-family: 'travel-ballad', Georgia, serif;

}

body {
  font-family: 'Playfair Display Regular', Georgia, serif;
  background-image: url('../img/fondo_pasaporte.jpg');
  background-size: cover;         /* Ajusta la imagen para cubrir todo el fondo */
  background-repeat: no-repeat;   /* Evita que se repita */
  background-position: center;    /* Centrada */
  background-attachment: fixed;   /* Opcional: fondo fijo al hacer scroll */
   position: relative;
  margin: 0;
  padding: 0;
  color: #333;
  line-height: 1.6;
}

p {
  font-family: 'Lora Italic', Georgia, serif;
}
p {
  font-family: 'Lora Italic', Georgia, serif;
  font-size: 1.05em;
  line-height: 1.7;
}


/* ===============================
   FIX GLOBAL – EVITAR SCROLL LATERAL
   =============================== */

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  overflow-x: hidden;
}


header {
    background-color: #1a1f2e;
    padding: 1em;
    text-align: center;
	color: #d4b963;				/*color dorado*/
}

main {
    padding: 2em;
}

footer {
    background-color: #1a1f2e;
    text-align: center;
    padding: 1em;
    margin-top: 2em;
	color: #d4b963;				/*color dorado*/
}


/* Estilos para el menú */
nav {
  background-color: #1a1f2e;        /* fondo azul marino (puedes cambiarlo) */
  border: 1px solid #d4b963;        /* Borde fino dorado */
  border-radius: 8px;            /* Esquinas redondeadas (opcional) */
  padding: 10px;
  max-width: 1000px;             /* Limitar ancho para mejor lectura */
  margin: 20px auto;             /* Centrar horizontalmente */
  box-sizing: border-box;
}

/* Lista horizontal de enlaces */
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;               /* Se adapta en pantallas pequeñas */
  justify-content: center;
  gap: 15px;
}

/* Estilos para cada enlace */
nav ul li a {
  color: #d4b963;                   /* Color dorado */
  text-decoration: none;
  font-weight: bold;
  padding: 5px 10px;
  transition: background-color 0.3s, color 0.3s;
}

/* Efecto al pasar el ratón */
nav ul li a:hover {
  background-color: #333;
  color: #fff;
  border-radius: 5px;
}

.header-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;   /* Alineación centrada en horizontal */
  flex-wrap: wrap;        			/* Para permitir que baje en móvil */
  gap: 10px;              		    /* Espacio entre el título y el contador */
  padding: 10px;
}

/* Contador */
#countdown {
  font-size: 0.8em;         /* Ajusta el tamaño aquí para hacerlo más pequeño */
  color: #b22222;
  font-weight: bold;
  background-color: #f9f9f9;
  padding: 5px 10px;
  border-left: 4px solid #b22222;
  border-radius: 8px;       /* Opcional: esquinas redondeadas */
  flex: 0 1 auto;
}

/* Título principal */
.titulo-boda {
  font-size: 3em;
  font-weight: bold;
  text-align: center;
  flex: 1 auto;           /* Para que ocupe el ancho necesario sin forzar */
}

.espacio-derecho {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.logo-pequeno {
  max-height: 200px;
  height: auto;
  width: auto;
}

.contador-container {
  background: linear-gradient(to bottom, #1a1f2e, #1a1f2e);
  color: d4b963;
  text-align: center;
  padding: 20px;
  border-radius: 12px;
  max-width: 500px;
  margin: auto;
  font-family: 'Playfair Display Regular', 'Arial', sans-serif;
}

.contador-container h2 {
  font-size: 0.5em;
  margin-bottom: 20px;
}

.contador {
  display: flex;
  justify-content: center;
  gap: 20px;
  font-size: 1.5em;
}

.contador div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contador span {
  font-weight: bold;
}

.contador small {
  font-size: 0.5em;
  margin-top: 5px;
  text-transform: uppercase;
  opacity: 0.9;
}

.contador-container p {
  margin-top: 20px;
  font-size: 1em;
}
/* Responsividad para header-flex, titulo-boda y countdown */
@media (max-width: 768px) {
  .header-flex {
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }
  .titulo-boda {
    font-size: 1.5em;
  }
  #countdown {
    font-size: 0.9em;
  }
}
/* NUEVO: Diseño para contenido principal y noticias */
.contenido-principal {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
  box-sizing: border-box;
}

.noticia-lateral {
  flex: 1 1 30%;
  background-image: url('../img/fondo_pasaporte.jpg');
  background-size: cover;         /* Ajusta la imagen para cubrir todo el fondo */
  background-repeat: no-repeat;   /* Evita que se repita */
  background-position: center;    /* Centrada */
  background-attachment: fixed;   /* Opcional: fondo fijo al hacer scroll */
  padding: 10px;
  box-sizing: border-box;
  border-radius: 8px;
}

.noticia-principal {
  flex: 1 1 65%;
  box-sizing: border-box;
}

.noticia-principal img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .contenido-principal {
    flex-direction: column;
  }
  .noticia-lateral,
  .noticia-principal {
    flex: 1 1 100%;
  }
}


/* ===============================
   INFO EXTRA – TARJETAS
   =============================== */

.info-extra {
  max-width: 1100px;
  margin: 0 auto 1.5rem;
  padding: 1rem;
  text-align: center;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}

.info-card {
  background: #fff;
  border-radius: 14px;
  padding: 1.2rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  text-align: left;
}

.info-card h3 {
  margin-bottom: 0.6rem;
}

.info-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.info-card li {
  margin-bottom: 0.4rem;
}

.info-card iframe {
  width: 100%;
  height: 220px;
  border-radius: 10px;
  margin-top: 0.8rem;
}


/* ===============================
   RESPONSIVE – TABLET
   =============================== */

@media (max-width: 1024px) {
  main {
    padding: 1.5rem;
  }
}

/* ===============================
   RESPONSIVE – MÓVIL
   =============================== */

@media (max-width: 768px) {

  nav ul {
    flex-direction: column;
  }

  h1 {
    font-size: 1.8rem;
  }

  h2 {
    font-size: 1.5rem;
  }

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

  iframe {
    height: 260px;
  }
}

/* =====================================
   HISTORIA – LAYOUT DEFINITIVO LIMPIO
   ===================================== */

body.historia-page main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 2rem;
}

/* Capítulo */
body.historia-page .capitulo {
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;              /* CLAVE: poco aire */
  margin-bottom: 2.2rem;
}

/* Alternancia */
body.historia-page .capitulo.inverso {
  flex-direction: row-reverse;
}

/* Imagen */
body.historia-page .capitulo-img {
  flex: 0 0 300px;
}

body.historia-page .capitulo-img img {
  width: 300px;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

/* Texto */
body.historia-page .capitulo-texto {
  flex: 1;
}

body.historia-page .capitulo-texto h2 {
  margin-top: 0;
}

body.historia-page .capitulo-texto p {
  margin-top: 0.4rem;
  line-height: 1.6;
}

/* =====================
   MÓVIL – ESTILO GALERÍA
   ===================== */

@media (max-width: 768px) {

  body.historia-page main {
    padding: 1.6rem 0.8rem;
  }

  body.historia-page .capitulo,
  body.historia-page .capitulo.inverso {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.8rem;
  }

  body.historia-page .capitulo-img,
  body.historia-page .capitulo-img img {
    width: 100%;
    max-width: 320px;
  }
}


/* ===============================
   CONTENEDOR BASE – ESTILO GALERÍA
   =============================== */

.section-base {
  text-align: center;
  padding: 2.5rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
  font-family: 'Playfair Display Regular', Georgia, serif;
  color: #222;
}

/* =========================================
   INDEX – VERSIÓN MÓVIL ESTILO GALERÍA
   ========================================= */

@media (max-width: 880px) {

  /* contenedor principal */
  .section-base {
    padding: 1.6rem 0.8rem; /* igual que galeria */
  }

  /* layout principal pasa a vertical */
  .contenido-principal {
    display: block;
  }

  /* bloques uno debajo del otro */
  .noticia-lateral,
  .noticia-principal {
    width: 100%;
    margin-bottom: 1.5rem;
  }

  /* imagen de portada */
  .noticia-principal img {
    width: 100%;
    height: auto;
    border-radius: 12px;
  }

  /* textos más legibles */
  .noticia-lateral,
  .noticia-principal {
    text-align: left;
  }
}

/* =========================================
   HISTORIA – MÓVIL COMO GALERÍA
   ========================================= */

@media (max-width: 880px) {

  main.historia {
    padding: 1.6rem 0.8rem;
  }

  main.historia .capitulo,
  main.historia .capitulo.inverso {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2.2rem;
    text-align: left;
  }

  main.historia .capitulo-img img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
  }

  main.historia .capitulo-texto h2 {
    font-size: 1.4rem;
    margin-bottom: 0.4rem;
  }

  main.historia .capitulo-texto p {
    font-size: 0.95rem;
    line-height: 1.55;
  }
}

/* ===============================
   HISTORIA – FIX FINAL ESPACIADOS
   =============================== */

body.historia-page .capitulo {
  gap: 1.4rem;              /* antes 2.5rem o más */
  margin-bottom: 2.2rem;
}

body.historia-page .capitulo-img {
  margin-bottom: 0;
}

body.historia-page .capitulo-texto p {
  margin-top: 0.4rem;
}

@media (max-width: 768px) {
  body.historia-page .capitulo {
    gap: 0.8rem;
  }

  body.historia-page .capitulo-img img {
    margin-bottom: 0.6rem;
  }
}
/* =========================
   ENLACES – COLOR Y PESO
   ========================= */

a {
  color: #1a1f2e !important;          /* axul muy oscuro casi negro*/
  text-decoration: none !important;   /* Sin subrayado */
  font-weight: 700 !important;        /* Más grueso */
  transition: color 0.3s, text-shadow 0.3s;
}

/* Al pasar el ratón */
a:hover {
  color: #fff !important;             /* Blanco al pasar el ratón */
  text-shadow: 0 0 5px #d4b963;       /* Pequeño resplandor dorado */
}

/* Enlaces dentro del menú */
nav ul li a {
  color: #d4b963 !important;        /*dorado*/
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* Enlaces dentro de contenido principal */
.contenido-principal a {
  color: #d4b963 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* Enlaces en el footer */
footer a {
  color: #d4b963 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
/* ================================
/* Travel Ballad */
@font-face {
    font-family: 'travel-ballad';
    src: url('../fonts/travel-ballad.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'travel-ballad', cursive;
    font-weight: normal; /* puedes probar 700 si quieres más negrita */
}

}

@font-face {
  font-family: 'Playfair Display Regular';
  src: url('../fonts/travel-ballad.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
  
}
  
 /* --- TARJETA INFORMACIÓN PRÁCTICA --- */
.info-practica {
  width: 100%;
  margin: 4rem 0;
}

.card-mapa {
  width: 100%;
  background: #ffffff;
  padding: 2.5rem;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.card-mapa h3 {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}

.card-mapa p {
  color: #555;
  margin-bottom: 1.8rem;
  line-height: 1.5;
}

.mapa-wrapper {
  width: 100%;
  height: 420px;
  border-radius: 14px;
  overflow: hidden;
}

.mapa-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.img-gracias {
  width: auto;
  max-width: 160px;

  display: block;
  margin: 0.2rem auto 0; /* 👈 casi pegada al footer */
}

/* Responsive móvil */
@media (max-width: 768px) {
  .card-mapa {
    padding: 1.5rem;
  }
  .mapa-wrapper {
    height: 300px;
  }
}