/*
Theme Name: Twenty Twenty-Five
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}

@import url('https://fonts.googleapis.com/css2?family=MonteCarlo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Parisienne&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Allura&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Day&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gwendolyn:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Monsieur+La+Doulaise&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mea+Culpa&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.titulo-boda {
    font-family: 'Mea Culpa', cursive;
    color: #FFFFFF; 
    font-size: 4.5rem;
}

.titulo-boda-fecha {
    font-family: 'Mea Culpa', cursive;
    color: #FFFFFF; 
    font-size: 2.5rem;
}
.titulo-boda-2 {
    font-family: 'Gwendolyn', cursive;
    color: #81FFFF; /* marrón elegante */
    font-size: 2.5rem;
    font-weight: normal;
}
.titulo-boda-footer {
    font-family: 'Mea Culpa', cursive;
    color: #000000; 
    font-size: 4.5rem;
}
.header-iniciales {
    font-family: 'Great Vibes', cursive, cursive;
    color: #FFFFFF;
    font-size: 2.5rem;
    font-weight: normal;
}

.custom-countdown {
    display: flex;
    justify-content: center;
    gap: 15px;              /* espacio entre bloques */
    text-align: center;
    font-family: 'Mea Culpa', serif;
    background: transparent !important; 
    background-color: transparent !important;
    box-shadow: none;
    flex-wrap: nowrap;       /* todos en una fila */
    padding: 0;
}

.custom-countdown * {
    background: transparent !important; /* elimina cualquier fondo */
    box-shadow: none !important;       /* elimina sombras si las hubiera */
}

/* Bloques individuales */
.custom-countdown .countdown-block {
    background: #add3e9;  
    padding: 20px 15px;
    border-radius: 12px;
    flex: 1 1 0;            /* se reducen proporcionalmente */
    min-width: 0;            /* evita overflow */
    text-align: center;
}

/* Números */
.custom-countdown .countdown-block span {
    font-size: clamp(1.5rem, 5vw, 2.5rem); /* se adapta según pantalla */
    color: #000000;
    display: block;
    font-family: 'Mea Culpa', cursive;
    font-weight: bold;
}

/* Texto pequeño */
.custom-countdown .countdown-block small {
    font-size: clamp(0.9rem, 2vw, 1.5rem); /* adaptable */
    color: #000000;
    letter-spacing: 1px;
}

/* Contenedor de los lugares de boda */
.lugares-boda {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between;
    gap: 20px;               /* reducimos gap para móviles */
    margin: 0 auto;
    flex-wrap: wrap;          /* permite que los bloques se ajusten en pantallas pequeñas */
    box-sizing: border-box;
    padding: 0 10px;          /* evita que toquen los bordes */
}

/* Bloques individuales */
.lugar {
    flex: 1 1 calc(50% - 20px); /* flexible: ocupa 50% menos el gap */
    max-width: 100%;             /* nunca se sale del contenedor */
    box-sizing: border-box;
    text-align: center;
    margin-bottom: 20px;         /* espacio vertical en móviles */
}

/* Imagen dentro del bloque */
.lugar img {
    width: 100%;
    height: auto;
    max-height: 70vh;
    border-radius: 12px;
}

/* Títulos */
.titulo-lugar {
    display: inline-block;
    font-family: 'Mea Culpa', cursive;
    font-size: clamp(3rem, 3vw, 6rem); /* escalable en móviles */
    color: #ffffff;
    font-weight: normal;
    margin-bottom: 10px;
    background: #adc9e9;
    padding: 20px 30px;          
    border-radius: 8px;          
    text-align: center;
}

/* Span Lugar */
.span-lugar {
    font-size: clamp(1.3rem, 3vw, 2.5rem); /* escalable en móviles */
    color: #000000;
    font-weight: normal;
    margin-bottom: 10px;
    font-family: "Barlow", sans-serif;
}

/* Timeline */
.timeline {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

/* Contenedor de los buses */
/* Títulos */
.titulo-salidas{
    font-family: 'Mea Culpa', cursive;
    font-size: clamp(3rem, 5vw, 6rem); /* escalable en móviles */
    color: #FFFFFF;
    font-weight: normal;
    margin-bottom: 10px;
}

.span-titulo-salidas {
    font-size: clamp(1.3rem, 3vw, 2.5rem); /* escalable en móviles */
    color: #000000;
    font-weight: normal;
    margin-bottom: 60px;
    font-family: "Barlow", sans-serif;
}

.lugares-salida-buses {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    margin: 0 auto;
    flex-wrap: wrap;            /* permite que se ajusten en móviles */
    padding: 0 10px;
    box-sizing: border-box;
    margin-top: 30px;
}

/* Bloques individuales de buses */
.lugar-salida-buses {
    flex: 1 1 250px;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Títulos de buses */
.titulo-lugar-salida-buses {
    font-family: 'Mea Culpa', cursive;
    font-size: clamp(3rem, 5vw, 5rem);
    color: #FFFFFF;
    font-weight: normal;
    margin-bottom: 10px;
}

/* Galeria de fotos */
.caption {
    margin-top: 12px;
    text-align: center;
    font-family: 'Mea Culpa', cursive;
    font-size: clamp(3rem, 5vw, 6rem); /* escalable en móviles */
    color: #444;
    font-size: 3rem;
}

.polaroid-wrapper {
    position: relative;
    width: 90%;
    max-width: 85vw;
    display: flex;
    justify-content: center; /* centra polaroid dentro del wrapper */
}

.polaroid {
    width: 80%;
    background: #fff;
    padding: 2rem 2rem 2rem;     /* padding más compacto */
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
    border-radius: 2px;
}

.photo {
    width: 100%;
    aspect-ratio: 3 / 4;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 2px;
    opacity: 1;
    transition: opacity 0.35s ease;
    touch-action: pan-y;
}

/* FLECHAS */
.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.9);
    border: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    cursor: pointer;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.arrow.left {
    left: -18px;
}

.arrow.right {
    right: -18px;
}


/* Formulario */
form {
    max-width: 800px;
    margin: auto;
    background: transparent;
    box-shadow: none;          
    border: none;
    padding: 25px;

}
.titulo-formulario{
    font-family: 'Mea Culpa', cursive;
    font-size: clamp(3rem, 5vw, 6rem); /* escalable en móviles */
    color: #FFFFFF;
    font-weight: normal;
    margin-bottom: 30px;
    text-align: center;
}

.form-group {
    margin-bottom: 15px;
}
label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
input, select, textarea {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-size: 1rem;
}
.flex-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.children-counter {
    display: flex;
    align-items: center;
    gap: 5px;
}
.children-counter button {
    width: 30px;
    height: 30px;
    font-size: 1.2rem;
    padding: 0;
}
.accompanist {
    border-top: 1px dashed #ccc;
    margin-top: 15px;
    padding-top: 15px;
}

.btnForm {
    position: relative;
    background: #aac8b0;
    font-size: 1.5rem;
    padding: 6px 12px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.btnForm:hover {
    background: #7a9c81;
}

.loader {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-left: 8px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.btnForm.loading .loader {
  display: inline-block;
}

.btnForm.loading .btnForm-text {
  opacity: 0.7;
}

/* FOOTER */
.footer-images-container {
    background: transparent !important; 
    background-color: transparent !important;
    display: flex;
    justify-content: center; /* Centra las imágenes horizontalmente */
    align-items: center;     /* Centra verticalmente */
    gap: 20px;               /* Espacio entre imágenes */
    flex-wrap: nowrap;       /* Evita que se muevan a otra línea */
    width: 100%;
    overflow-x: auto;        /* Evita overflow si la pantalla es muy pequeña */
}

.footer-image {
    flex: 1 1 0;           /* Se adaptan proporcionalmente */
    max-width: 150px;      /* Ajusta el tamaño máximo por imagen */
    height: auto;          /* Mantiene la proporción */
}

/* Ajustes para pantallas muy pequeñas */
@media (max-width: 480px) {
  .lugares-boda {
    flex-direction: column !important;
  }
	
  .polaroid-wrapper {
    max-width: 420px;
  }

  .lugar {
    width: 100%;
  }

  .custom-countdown {
    gap: 10px;
  }

  .custom-countdown .countdown-block span {
    font-size: 2rem;
  }

  .custom-countdown .countdown-block small {
    font-size: 1rem;
  }

  .custom-countdown .countdown-block {
    padding: 15px 15px;
    min-width: 60px;       /* bloques más compactos en móvil */
  }

  .lugares-salida-buses {
    flex-direction: column;  /* apila los bloques */
    gap: 15px;               /* espacio entre bloques */
  }

  .footer-image {
    max-width: 100px;
  }
}