/* =========================================================
   musico-para-bodas.css
   Estilos exclusivos para musico-para-bodas.html
   (Reemplaza por completo a fotosytexto.css en esta página)
   Paleta: azul #001E3D · dorado #B49769 · texto #2b2b2b
   ========================================================= */

/* ---------- Bloques alternados blanco / gris ---------- */
.fyt-bloque {
  padding: 60px 0;
}
.fyt-bloque.fyt-blanco { background-color: #ffffff; }
.fyt-bloque.fyt-gris   { background-color: #e6e6e6; }

/* ---------- Encabezado de sección (supratítulo dorado + H2 azul) ---------- */
.fyt-encabezado {
  text-align: center;
  /* +20px de separación vertical entre el H2 y el primer H3 de la sección */
  padding: 30px 0 30px 0;
}
.fyt-encabezado .fyt-supratitulo {
  font-family: 'Barlow', sans-serif;
  color: #B49769;
  letter-spacing: 4px;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 10px 0;
  text-transform: uppercase;
}
.fyt-encabezado h2.fyt-tituloazul {
  font-family: 'Barlow', sans-serif;
  color: #001E3D;
  font-weight: 700;
  font-size: 45px;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 10px 0;
}
@media (max-width: 767.98px) {
  .fyt-encabezado h2.fyt-tituloazul { font-size: 40px; }
}
@media (max-width: 575.98px) {
  .fyt-encabezado h2.fyt-tituloazul { font-size: 35px; }
}

/* ---------- H1 principal de la página ---------- */
.fyt-h1-wrap {
  text-align: center;
  /* +15px de distancia respecto a la franja azul del menú de navegación */
  padding: 77px 15px 10px 15px;
}
.fyt-h1-wrap .fyt-supratitulo {
  font-family: 'Barlow', sans-serif;
  color: #B49769;
  letter-spacing: 4px;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 10px 0;
  text-transform: uppercase;
}
.fyt-h1-wrap h1 {
  font-family: 'Barlow', sans-serif;
  color: #001E3D;
  font-weight: 700;
  font-size: 45px;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
}
@media (max-width: 767.98px) {
  .fyt-h1-wrap h1 { font-size: 40px; }
}
@media (max-width: 575.98px) {
  .fyt-h1-wrap h1 { font-size: 35px; }
}

/* ---------- Texto introductorio ---------- */
.fyt-intro {
  max-width: 1140px;
  margin: 0 auto;
  padding: 25px 15px 10px 15px;
  text-align: justify;
  color: #333;
  font-size: 16px;
  line-height: 1.7;
}
.fyt-intro p { margin: 0 0 14px 0; }

/* ---------- Barra: menú rápido dorado (izquierda) + botón (derecha) ---------- */
.fyt-acciones {
  max-width: 1140px;
  margin: 0 auto;
  /* +20px de separación respecto al párrafo anterior */
  padding: 26px 15px 0 15px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.fyt-menu-rapido {
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .5px;
  margin: 0;
  color: #B49769;
}
.fyt-menu-rapido a {
  color: #B49769;
  text-decoration: none;
  border-bottom: 1px solid rgba(180, 151, 105, .45);
  padding-bottom: 2px;
  transition: .3s;
}
.fyt-menu-rapido a:hover {
  color: #001E3D;
  border-bottom-color: #001E3D;
}
.fyt-menu-rapido .fyt-sep {
  margin: 0 10px;
  color: #B49769;
}
@media (max-width: 575.98px) {
  .fyt-acciones { justify-content: flex-start; }
  .fyt-menu-rapido .fyt-sep { display: block; height: 0; overflow: hidden; margin: 6px 0; }
}

.fyt-bloque.fyt-cierre-hero {
  padding-top: 38px;
}

/* =========================================================
   Filas tipo PDF (texto + foto, foto + texto)
   ========================================================= */
.fyt-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
  max-width: 1140px;
  margin: 0 auto;
  /* +20px de aire vertical dentro de cada fila */
  padding: 30px 15px;
}
.fyt-col-texto,
.fyt-col-foto {
  flex: 1 1 0;
  min-width: 280px;
}

/* ---------- Filas con tarjeta de color (azul / dorado), estilo PDF ----------
   La tarjeta NO ocupa todo el ancho de la pantalla: queda dentro del
   contenedor de 1140px y con esquinas redondeadas.                        */
.fyt-row-tarjeta {
  max-width: 1140px;
  margin: 30px auto;
  border-radius: 20px;
  padding: 46px 40px;
  gap: 40px;
  align-items: center;
}
.fyt-row-tarjeta.fyt-tarjeta-azul { background: #001E3D; }
.fyt-row-tarjeta.fyt-tarjeta-oro  { background: #B49769; }
.fyt-row-tarjeta h3.fyt-subtitulo,
.fyt-row-tarjeta p,
.fyt-row-tarjeta li,
.fyt-row-tarjeta strong { color: #ffffff; }

/* Títulos H3 de cada tipo de ceremonia (dorado sobre fondo claro) */
.fyt-col-texto h3.fyt-subtitulo,
h3.fyt-subtitulo {
  font-family: 'Barlow', sans-serif;
  color: #B49769;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 22px 0;
  text-transform: none;
}
@media (max-width: 575.98px) {
  h3.fyt-subtitulo { font-size: 26px; }
}

/* Título H3 dorado usado como encabezado de escenario en la sección
   "Momentos esenciales" (igual al del PDF) */
h3.fyt-subtitulo-oro {
  font-family: 'Barlow', sans-serif;
  color: #B49769;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  /* +20px de separación vertical respecto al título anterior */
  margin: 20px 0 34px 0;
  max-width: 1140px;
  padding: 0 15px;
  text-transform: none;
}
.fyt-escenario > h3.fyt-subtitulo-oro { margin-left: auto; margin-right: auto; }
@media (max-width: 575.98px) {
  h3.fyt-subtitulo-oro { font-size: 26px; }
}

/* Mini título (H4) */
.fyt-mini-titulo,
h4.fyt-mini-titulo {
  font-family: 'Barlow', sans-serif;
  color: #2b2b2b;
  letter-spacing: 4px;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 18px 0;
  line-height: 1.4;
}
/* Cada nuevo H4 que aparece después de otro contenido recibe más aire arriba */
.fyt-card-simple > * + h4.fyt-mini-titulo,
.fyt-card > * + h4.fyt-mini-titulo,
.fyt-texto-ancho > * + h4.fyt-mini-titulo {
  margin-top: 38px;
}

.fyt-col-texto p,
.fyt-col-texto li {
  color: #2b2b2b;
  font-size: 16px;
  line-height: 1.75;
}
.fyt-col-texto p { margin: 0 0 18px 0; }

/* Listas generales de la página */
.fyt-lista {
  margin: 0 0 20px 0;
  padding-left: 20px;
}
.fyt-lista li {
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 10px;
  color: #2b2b2b;
}
.fyt-duracion {
  font-size: 16px;
  line-height: 1.75;
  margin: 0 0 14px 0;
  color: #2b2b2b;
}
.fyt-duracion strong { color: #001E3D; }

/* Foto principal */
.fyt-foto {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  background-color: #d9d9d9;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Galería de 3 fotos verticales */
.fyt-galeria-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1140px;
  margin: 30px auto 10px auto;
  padding: 0 15px;
}
.fyt-galeria-3 .fyt-foto {
  aspect-ratio: 3 / 4;
}

/* ---------- Florón de cierre de sección (solo CSS/HTML, sin imagen) ---------- */
.fyt-floron {
  max-width: 1140px;
  /* +35px de separación respecto al contenido anterior */
  margin: 75px auto 0 auto;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: #B49769;
}
.fyt-floron::before,
.fyt-floron::after {
  content: "";
  display: block;
  width: 140px;
  max-width: 22vw;
  height: 1px;
  background: linear-gradient(to right, rgba(180,151,105,0), #B49769, rgba(180,151,105,0));
}
.fyt-floron span {
  font-size: 18px;
  line-height: 1;
  color: #B49769;
}

/* =========================================================
   Tarjetas de la sección "Momentos esenciales" (estilo PDF)
   ========================================================= */
.fyt-escenario {
  max-width: 1140px;
  margin: 0 auto;
  padding: 40px 15px 30px 15px;
}
.fyt-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  /* Las dos columnas ocupan la MISMA altura: así el bloque de color
     se extiende hasta el borde inferior de la columna vecina. */
  align-items: stretch;
  margin-bottom: 40px;
}
.fyt-cards.fyt-cards-1 { grid-template-columns: 1fr; }
.fyt-cards > * { min-width: 0; }

.fyt-card {
  border-radius: 20px;
  /* +20px de aire vertical interno */
  padding: 42px 34px;
  height: 100%;
}
.fyt-card > *:last-child { margin-bottom: 0; }

.fyt-card-azul {
  background: #001E3D;
}
.fyt-card-oro {
  background: #B49769;
}
.fyt-card-azul p,
.fyt-card-azul li,
.fyt-card-azul .fyt-duracion,
.fyt-card-oro p,
.fyt-card-oro li,
.fyt-card-oro .fyt-duracion {
  color: #ffffff;
}
.fyt-card-azul h4.fyt-mini-titulo,
.fyt-card-oro h4.fyt-mini-titulo,
.fyt-card-azul .fyt-duracion strong,
.fyt-card-oro .fyt-duracion strong,
.fyt-card-azul strong,
.fyt-card-oro strong {
  color: #ffffff;
}

/* ---------- Bloques de color que se TOCAN entre sí ----------
   Cuando una tarjeta azul y una dorada quedan pegadas (una encima de la
   otra), los bordes que se tocan NO se redondean, tal como en el PDF. */
.fyt-cards.fyt-pegado-abajo { margin-bottom: 0; }
.fyt-une-abajo,
.fyt-cards.fyt-pegado-abajo > .fyt-card-azul,
.fyt-cards.fyt-pegado-abajo > .fyt-card-oro {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.fyt-une-arriba {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Columna simple: foto arriba + texto debajo (como en el PDF) */
.fyt-card-simple {
  padding: 0;
}
.fyt-card-simple .fyt-foto {
  /* +25px de separación entre la imagen y el H4 que va debajo */
  margin-bottom: 43px;
  border-radius: 14px;
}
.fyt-card-simple p,
.fyt-card-simple li {
  color: #2b2b2b;
  font-size: 16px;
  line-height: 1.75;
}
.fyt-card-simple p { margin: 0 0 16px 0; }

/* Bloque destacado tipo consejo / nota logística */
.fyt-destacado {
  border-radius: 20px;
  padding: 40px 34px;
  margin: 0 0 24px 0;
}
.fyt-destacado.fyt-destacado-azul { background: #001E3D; }
.fyt-destacado.fyt-destacado-oro  { background: #B49769; }
.fyt-destacado p,
.fyt-destacado li,
.fyt-destacado strong,
.fyt-destacado h4.fyt-mini-titulo { color: #ffffff; }
.fyt-destacado .fyt-destacado-titulo {
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  margin: 0 0 12px 0;
  color: #ffffff;
}
.fyt-destacado.fyt-destacado-claro {
  background: #f4efe6;
  border-left: 4px solid #B49769;
  padding: 26px 24px;
}
.fyt-destacado.fyt-destacado-claro p,
.fyt-destacado.fyt-destacado-claro strong,
.fyt-destacado.fyt-destacado-claro .fyt-destacado-titulo { color: #2b2b2b; }
.fyt-destacado.fyt-destacado-claro .fyt-destacado-titulo { color: #001E3D; }

/* Bloque de texto a todo el ancho dentro de un escenario */
.fyt-texto-ancho p,
.fyt-texto-ancho li {
  color: #2b2b2b;
  font-size: 16px;
  line-height: 1.75;
}
.fyt-texto-ancho p { margin: 0 0 18px 0; }
.fyt-texto-ancho { margin-bottom: 40px; }

/* Botón centrado de llamado a la acción */
.fyt-cta-centrado {
  text-align: center;
  padding: 40px 15px 20px 15px;
}

/* =========================================================
   Tarjeta dorada "Exclusividad, discreción y cumplimiento"
   (estilo PDF: no va de lado a lado de la pantalla)
   ========================================================= */
.fyt-garantia {
  max-width: 1140px;
  margin: 60px auto;
  padding: 46px 40px;
  background: #B49769;
  border-radius: 20px;
}
.fyt-garantia .fyt-garantia-supra {
  font-family: 'Barlow', sans-serif;
  color: #ffffff;
  letter-spacing: 3px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 10px 0;
}
.fyt-garantia h2.fyt-garantia-titulo {
  font-family: 'Barlow', sans-serif;
  color: #001E3D;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 22px 0;
  text-transform: none;
}
.fyt-garantia p {
  color: #ffffff;
  font-size: 16px;
  line-height: 1.75;
  margin: 0;
}
.fyt-garantia .fyt-garantia-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 34px;
}
.fyt-garantia .fyt-garantia-escudo {
  flex: 0 0 190px;
  max-width: 190px;
}
.fyt-garantia .fyt-garantia-escudo img {
  width: 100%;
  height: auto;
  display: block;
}
.fyt-garantia .fyt-garantia-texto { flex: 1 1 320px; min-width: 260px; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 767px) {
  .fyt-galeria-3 { grid-template-columns: 1fr; }
  .fyt-row { gap: 25px; }
  .fyt-cards { grid-template-columns: 1fr; gap: 24px; }

  /* En pantallas pequeñas SIEMPRE primero la imagen y luego el texto,
     sin importar el orden en el HTML (evita imagen-imagen / texto-texto) */
  .fyt-row { flex-direction: column; }
  .fyt-row .fyt-col-foto  { order: 1; width: 100%; }
  .fyt-row .fyt-col-texto { order: 2; width: 100%; }

  .fyt-row-tarjeta { padding: 34px 24px; }
  .fyt-card { padding: 34px 24px; }
  .fyt-garantia { padding: 34px 24px; margin: 40px 0; }
  .fyt-garantia .fyt-garantia-escudo { margin: 0 auto; }
}

/* ---------- Refuerzo de color de texto dentro de las tarjetas de color ----------
   (va al final para ganar en especificidad sobre las reglas generales) */
.fyt-row.fyt-row-tarjeta .fyt-col-texto h3.fyt-subtitulo,
.fyt-row.fyt-row-tarjeta .fyt-col-texto p,
.fyt-row.fyt-row-tarjeta .fyt-col-texto li,
.fyt-row.fyt-row-tarjeta .fyt-col-texto strong,
.fyt-row.fyt-row-tarjeta .fyt-col-texto .fyt-duracion,
.fyt-row.fyt-row-tarjeta .fyt-col-texto .fyt-duracion strong {
  color: #ffffff;
}


/* =========================================================
   AJUSTES DE ESTILO (correcciones solicitadas)
   ========================================================= */

/* Espaciado inferior / vertical extra en bloques puntuales */
.fyt-pad-abajo-30 { padding-bottom: 30px; }
.fyt-pad-abajo-45 { padding-bottom: 45px; }
.fyt-texto-ancho.fyt-pad-v-30 {
  padding-top: 30px;
  padding-bottom: 30px;
}

/* El bloque azul "Entrada triunfal al salón y primer baile" debe unirse
   con la tarjeta superior: puntas rectas arriba (solo escritorio/tablet). */
@media (min-width: 768px) {
  .fyt-destacado.fyt-une-arriba,
  .fyt-card.fyt-une-arriba {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

/* Tarjetas azul/dorada de "Tipos de ceremonia": cuando el contenedor toca
   los bordes de la pantalla, las esquinas van en punta. */
@media (max-width: 1139.98px) {
  .fyt-row-tarjeta,
  .fyt-row-tarjeta.fyt-tarjeta-azul,
  .fyt-row-tarjeta.fyt-tarjeta-oro {
    border-radius: 0;
  }

  /* Contenedor dorado de garantía: de borde a borde, sin esquinas redondeadas */
  .fyt-garantia {
    max-width: none;
    margin: 60px 0;
    border-radius: 0;
  }
}

/* En móvil todo queda en cascada: las tarjetas ya no se tocan entre sí,
   por lo tanto recuperan todas sus esquinas redondeadas. */
@media (max-width: 767px) {
  .fyt-cards.fyt-pegado-abajo { margin-bottom: 24px; }
  .fyt-cards.fyt-pegado-abajo > .fyt-card-azul,
  .fyt-cards.fyt-pegado-abajo > .fyt-card-oro,
  .fyt-une-abajo,
  .fyt-destacado.fyt-une-arriba,
  .fyt-card.fyt-une-arriba {
    border-radius: 20px;
  }
}