/**
Theme Name: Altrimenti-Costume-Styles
Author: Kmi Web Studio
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: altrimenti-costume-styles
Template: astra
*/

/* ==========================================================================
   GOOGLE FONTS & RESET
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

/* Hide page title specifically for post-6 */
#post-6 h1.entry-title {
  display: none;
}

/* Remove max-width constraints from Astra blocks layout */
.entry-content[data-ast-blocks-layout]>* {
  max-width: none;
}

/* ==========================================================================
   COLOR VARIABLES (BRANDING)
   ========================================================================== */
:root {
  --pink: #f2075d;
  --blue: #0c307e;
  --yellow: #f29f05;
  --green: #8ed91e;
  --black: #252a34;
  --white: #fefefe;
  --light-gray: #f4f4f4;
  --dark-gray: #4a4a4a;
  --blue-baby: #2458c7;
  --blue-extra: #00339d;

  /* Astra Block Spacing Reset */
  --wp--custom--ast-default-block-top-padding: 0 !important;
  --wp--custom--ast-default-block-right-padding: 0 !important;
  --wp--custom--ast-default-block-bottom-padding: 0 !important;
  --wp--custom--ast-default-block-left-padding: 0 !important;
}

/* ==========================================================================
   GLOBAL TYPOGRAPHY & TAGS
   ========================================================================== */
body {
  font-family: "Montserrat", sans-serif;
  background-color: var(--blue);
}

h1,
h2 {
  margin: 0.5rem 0;
  font-weight: 800;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Montserrat", sans-serif;
}

p {
  margin: 0.5rem 0;
  line-height: 1.5;
}

a {
  text-decoration: none !important;
  color: var(--white);
}

li {
  list-style: none;
}

/* ==========================================================================
   HELPER / UTILITY CLASSES
   ========================================================================== */
.text-center {
  text-align: center;
}

.d-none {
  display: none !important;
}

.d-block {
  display: flex !important;
}

.bold {
  font-weight: 900;
}

.semibold {
  font-weight: 700;
}

.uppercase-text {
  text-transform: uppercase;
  color: var(--blue);
}

.text-left {
	text-align: left;
}


/* Text Colors */
.text-blue,
.blue-text {
  color: var(--blue);
}

.text-pink {
  color: var(--pink);
}

.text-green {
  color: var(--green);
}

.text-orange {
  color: var(--yellow);
}

.white-text {
  color: var(--white);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
   display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 28px;
  border: none;
  border-radius: 50px;
    font-weight: 500;
   font-size: 1.25rem;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all 0.3s ease;
  text-decoration: none;
  line-height: 1;
  margin: 1rem;
}

/* Blue Button Variant */
.btn-blue {
  background-color: var(--blue);
  color: var(--white);
}

.btn-blue:hover {
  background-color: #0c308c;
  color: var(--white);
}
.btn-pink {
  background-color: var(--pink);
  color: var(--white);
}

.btn-pink:hover {
  background-color: #ff66a3;
  color: var(--white);
}


/* White Button Variant */
.btn-white {
  background-color: var(--white);
  color: var(--black) !important;
}

.timeline-footer {
    text-align: center;
    margin-top: 40px;
    padding-bottom: 20px;
}

.btn-journey {
    background: rgba(255, 255, 255, 0.05); /* Glassmorphism sutil */
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.btn-journey svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

/* Efecto Hover para Sydney Market */
.btn-journey:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #ffffff;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.btn-journey:hover svg {
    transform: translateX(5px); /* Flecha moviéndose al futuro */
}
/* ==========================================================================
   BACKGROUNDS & CONTAINERS
   ========================================================================== */
.yellow-background,
.orange-background {
  background-color: var(--yellow) !important;
}

.pink-background {
  background-color: var(--pink);
}

.green-background {
  background-color: var(--green);
}

.tickets-background {
  background-color: var(--blue);
}

.blue-background {
  background-color: var(--blue-extra);
}

/* Image Handling */
.container-image {
  width: auto;
  overflow: hidden;
}

.container-image img {
  width: 100%;
  object-fit: cover;
}

/* Small square icons/images */
.image-container-small {
  width: 3rem;
  height: 3rem;
}

.btn-notification {
  display: inline-block;
  vertical-align: middle;
  border-radius: 40px;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1.2;
  padding: 0.4rem 1.2rem;
  height: auto;
  text-align: center;
  white-space: nowrap;
}



.floating-element {
  width: 18rem;
  position: absolute;
  left: -10%;
  top: 0;
  font-size: 2rem;
  z-index: 5;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  /* Oscurece un poco el fondo */
}

.main-text {
  position: absolute;
  text-align: center;
  color: white;
  width: 80%;
  z-index: 2;
}

.heading-text img {
  max-width: 250px;
  margin-bottom: 20px;
}

.video.mobile-only {
  display: none;
}
#main-image-landing {
  position: relative;
  height: 350px;
  object-fit: cover;
  background-color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.container-image-main {
  position: relative;
  width: 100%;
  height: 100%;
}
/*Buttons elements*/
#info-flex-elements {
  display: none;  /*Custonmer ask not to display if want to gave back original change this to flex*/
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  padding: 0.5rem;

}

.ast-desktop .ast-below-header-bar .main-header-menu>.menu-item {
    line-height: 30px !important;
}
.ast-header-break-point .main-navigation .stack-on-mobile li {
    width: 51% !important;
}
/* Apuntamos directamente al enlace dentro de tu clase personalizada */
.ast-builder-menu-2 .menu-item.btn-blue-border > a.menu-link {
    border: 0.2rem solid #2458c7 !important;
    margin: 0.5rem 0.7rem !important;
    transition: transform 0.2s ease-in-out !important;
    display: inline-block;
}

/* Efecto Hover para que se mueva o cambie al pasar el mouse */
.ast-builder-menu-2 .menu-item.btn-blue-border > a.menu-link:hover {
    transform: scale(1.05);
    background-color: #2458c7; /* Opcional: se pinta azul al pasar el mouse */
    color: #ffffff !important; /* Texto blanco en hover */
}

#info-flex-elements div:hover {
  transform: translateY(-3px);
}

/* Specific backgrounds */
.orange-background {
  background-color: #F29F05;
}

.pink-background {
  background-color: #F2075D;
}

.green-background {
  background-color: #8ED91E;
}

.tickets-background {
  background-color: #0C307E;
}

/* Icon styles */
#info-flex-elements i {
  font-size: 1rem;
}

/* Title text */
#info-flex-elements h3 {
  margin: 0;
  font-size: 1rem;
}

#info-flex-elements a {
  text-decoration: none;
  color: white;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}


.desktop-link {
  visibility: hidden;
  display: none;
}

.mobile-link {
  display: block;
}

.numbers-event {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 2rem 1rem;
  border-radius: 10px;
  margin: 1.3rem;
  background-color: var(--white);
}

.number-event {
  width: 180px;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #03658c93;
  z-index: 1;
}

.number-event {
  text-align: center;
}

.number-event h2 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.values-section {
  display: flex;
  justify-content: space-between;
  padding: 2rem;
  background-color: var(--light-gray);
  gap: 2rem;
}


.circle-image {
  width: 50%;
  border-radius: 50%;
  overflow: hidden;
}

.right-values-section {
  width: 50%;
}

.text-info {
  margin-bottom: 2rem;
}

.options-values {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.value {
  text-align: center;
  background-color: var(--white);
  border-radius: 10px;
  padding: 0 0.5rem;
  height: auto;
}

.value:hover {
  background-color: var(--dark-gray);
  transition: all 0.5s;
}

.value:hover h4 {
  color: var(--white) !important;
}

.gallery-item:hover img {
  transform: scale(1.1);
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.3);
}

.gallery-item {
  flex: 1 1 calc(33.333% - 10px);
  /* Ajusta 3 columnas en desktop */
  max-width: calc(33.333% - 10px);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 250px;
  /* Altura fija */
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}


.gallery-item.expanded {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.2);
  /* Expansión más sutil */
  z-index: 1000;
  width: 50vw;
  height: auto;
}

/* Estilo de las imágenes */
.gallery-item img {
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
}

/* Estilo del botón de cierre */
.close-btn {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border-radius: 50%;
  padding: 5px;
  cursor: pointer;
  font-size: 1.5rem;
  z-index: 1001;
}

/* Mostrar el botón de cierre solo cuando la imagen esté expandida */
.gallery-item.expanded .close-btn {
  display: block;
}

/* Estilo del botón de cierre */
.close-btn {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border-radius: 50%;
  padding: 5px;
  cursor: pointer;
  font-size: 1.5rem;
  z-index: 1001;
}

/* Mostrar el botón de cierre solo cuando la imagen esté expandida */
.gallery-item.expanded .close-btn {
  display: block;
}

.content-section {
  display: flex;
  flex-direction: row;
  /* Arrange content in a row */
  align-items: center;
  /* Center vertically */
  justify-content: space-between;
  /* Space out title, paragraph, and image */
  padding: 20px;
  gap: 20px;
  /* Add spacing between the text and image */
}

.text-content {
  flex: 1;
  /* Allows the text to take up available space */
}

.title {
  font-size: 2rem;
  /* Adjust the size of your title */
  margin-bottom: 10px;
}

.paragraph {
  font-size: 1rem;
  color: #555;
  /* Light grey for the paragraph text */
}

.image-content {
  flex: 1;
}

img {
  max-width: 100%;
  height: auto;
}

.image {
  width: 100%;
  /* Makes the image responsive */
  height: auto;
  /* Maintains the aspect ratio */
  max-width: 400px;
  /* Limits the image size */
}

/* ==========================================================================
   FAQ SECTION COMPONENT
   ========================================================================== */

/* Main Container Control */
.faq-section {
    max-width: 800px;
    margin: auto;
    padding: 2rem 1rem;
    display: none; /* Hidden by default for modular toggling */
}

/* Visibility State */
.faq-section.visible {
    display: block;
}

/* Header Style */
.faq-title {
    text-align: center;
    color: var(--blue); /* Using global brand variable */
    font-size: 2rem;
    margin-bottom: 1rem;
}

/* ==========================================================================
   FAQ ITEM STRUCTURE
   ========================================================================== */

.faq-item {
    border-bottom: 1px solid #ccc;
    padding: 1rem 0;
    cursor: pointer;
    transition: background 0.3s ease;
}

/* Question Header */
.faq-question {
    font-weight: bold;
    position: relative;
    padding-right: 25px; /* Added spacing for the arrow icon */
    margin: 10px 0;
    cursor: pointer;
}

/* Dynamic Toggle Icon (Arrow) */
.faq-question::after {
    content: "▼";
    position: absolute;
    right: 0;
    top: 0;
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

/* Icon Rotation State */
.faq-item.open .faq-question::after {
    transform: rotate(180deg);
}

/* ==========================================================================
   FAQ ANSWER (CONTENT CONTROL)
   ========================================================================== */

.faq-answer {
    display: none;
    margin-left: 20px;
    padding-top: 10px;
    line-height: 1.6;
    color: var(--dark-gray); /* Recommended to improve readability */
}

/* Active State - Shows answer when parent or self is open */
.faq-item.open .faq-answer,
.faq-answer.open {
    display: block;
}
/* Save the date */
/* Sección Save The Date */
/* Sección Save the Date */
.save-the-date {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
  color: var(--white);
  position: relative;
}

/* Contenedor de la imagen de fondo */
.container-image-save-the-date {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  position: absolute;
}

.container-image-save-the-date img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7);
  /* Ajuste de brillo para resaltar el texto */
}

.event-details {
  position: relative;
  width: 100%;
  min-height: 60vh;
  /* Ajustable según necesidad */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.event-details::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 51, 102, 0.5);
  /* Azul oscuro con 50% de opacidad */
  z-index: 1;
}

/* Filtro para oscurecer la imagen de fondo */
.event-details::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  /* Ajusta la opacidad si es necesario */
  z-index: 1;
}

/* Asegurar que el contenido se vea sobre el filtro */
.event-details-content {
  position: relative;
  z-index: 2;
  color: white;
  padding: 20px;
}

/* Ajustar la fecha */
.event-date h3 {
  font-size: 2.8rem;
  /* Hace la fecha más grande */
  font-weight: bold;
  margin-top: 10px;
}


/* Aplicamos la imagen como fondo */
.event-details {
  background-image: url('https://www.altrimentimarkets.com.au/wp-content/uploads/2026/08/img-fondo-home.jpg');
  /* Imagen como fondo */
}

/* Ajustes para la imagen dentro del contenido */
.container-image-event-details img {
  width: 380px;
  /* Ajusta el tamaño del logo */
  height: auto;
}

/* Animación para las imágenes (hover) */
.image-container-small img,
.container-image-event-details img {
  transition: transform 0.3s ease-in-out, opacity 0.3s;
}

.image-container-small:hover img,
.container-image-event-details:hover img {
  transform: scale(1.05) rotate(2deg);
  opacity: 0.9;
}

.line {
  margin-bottom: 1rem;
  border-top: 2px solid var(--pink);
  /* Puedes ajustar el color */
  padding: 1rem 0;
  color: var(--white);
  text-align: center;
}

/* Estilos para la sección de galería */
.gallery {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
}

.gallery-title {
  font-size: 2rem;
  color: var(--blue);
  margin: 0;
}

.gallery-description {
  margin-bottom: 20px;
}

.gallery-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.video-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  /* Ajusta este valor según tus necesidades */
  margin: auto;
  margin-bottom: 2rem;
}

.video-container::before {
  content: "";
  display: block;
  padding-top: 177.78%;
  /* Basado en una relación de aspecto de 9:16 (alto/ancho * 100) */
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   UP NEXT / COLLAPSIBLE SECTION
   ========================================================================== */

.UpNext {
    text-align: center;
	margin: 2rem 0;
}

/* Section Header Structure */
.upnext-title {
    display: flex;
    justify-content: flex-end; /* Using standard flex-end instead of right */
    align-items: flex-end;
    color: var(--blue);
    margin: 50px 0;
    text-transform: uppercase;
}

/* Blue Badge Title Container */
.title-blue {
    background-color: var(--blue-baby);
    border-radius: 5px;
    padding: 0.5rem 1rem;
    width: 50%;
    display: flex;
    gap: 1.4rem;
    align-items: center; /* Ensures text and icons align vertically */
}

.title-blue h2 {
    color: var(--white) !important;
    margin: 0; /* Removing default margins for better alignment */
}

/* ==========================================================================
   INTERACTIVE TRIGGER (CLICKABLE AREA)
   ========================================================================== */

.upsidedown {
    cursor: pointer;
    padding: 15px;
    background: var(--yellow);
    text-align: center;
    border-radius: 8px;
    transition: background 0.3s ease;
}

.upsidedown:hover {
    background: #f29f03; /* Subtle hover effect for UX */
}

.upsidedown h3,
.upsidedown h2,
.upsidedown i {
    color: var(--blue);
    fill: var(--blue);
    text-align: center;
}

/* Indicator Arrow (CSS-only Chevron) */
.flecha {
    display: inline-block;
    border: solid var(--blue);
    border-width: 0 3px 3px 0;
    padding: 5px;
    transform: rotate(45deg);
    transition: transform 0.3s ease-in-out;
}

/* Rotate arrow when parent is active */
.UpNext.open .flecha {
    transform: rotate(-135deg);
}

/* ==========================================================================
   COLLAPSIBLE CONTENT
   ========================================================================== */

.upsidown-inside {
    display: none; /* Hidden by default */
    padding: 15px;
    border-top: 1px solid #ccc;
    transition: all 0.3s ease-in-out;
}

/* Reveal content with Flexbox when open */
.UpNext.open .upsidown-inside {
    display: flex;
    justify-content: center;
    gap: 4rem;
}

.upsidown-inside-text {
    text-align: center;
    width: 100%;
}
/* Animaciones para Fiesta del Perú */

.upsidedown h2 {
  font-size: 2rem;
  text-transform: uppercase;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(12, 48, 126, 0.2);
  animation: textVibration 0.2s infinite alternate;
}

@keyframes textVibration {
  0% {
    transform: translateX(-1px);
  }

  100% {
    transform: translateX(1px);
  }
}

/* Confeti */
.confetti {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: yellow;
  border-radius: 50%;
  opacity: 0.8;
  animation: fallConfetti 3s infinite;
}

@keyframes fallConfetti {
  0% {
    transform: translateY(-50px) translateX(0px);
    opacity: 1;
  }

  100% {
    transform: translateY(200px) translateX(30px);
    opacity: 0;
  }
}

footer .site-primary-footer-wrap {
  background-color: #4B59A6 !important;
  color: white
}

.social-contact {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  gap: 50px;
}

.social-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.social-item i {
  font-size: 24px;
  margin-bottom: 5px;
}

.social-item a {
  text-decoration: none;
  color: white;
  font-size: 14px;
}
/*About US*/
.about-us {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 2rem;
  flex-direction: column-reverse;
}

.about-us-container {
  height: auto;
  width: 80%;
}

/* Form Styles*/

.center-div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
  margin: 0 auto;
  border-radius: 10px;
}

.white-bg {
  background-color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.titles h2 {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.titles h4 {
  font-size: 1.5rem;
  font-weight: normal;
  margin-bottom: 1rem;
}

.titles p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #333;
}

div.wpforms-container-full .wpforms-form .wpforms-pagebreak-left {
  text-align: center;
}

.logo-makers {
  width: 40% !important;
}

.event-info ul {
  list-style: none;
}


/*Small Desktop*/
@media screen and (max-width:1024px) {
  .values-section {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
  }

  .title-number {
    font-size: 3rem !important;
  }

  .schedule,
  .schedule-date {
    display: block;

  }

  .right-values-section {
    width: 100%
  }

  .save-the-date {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .save-the-date-day {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .save-the-date-day .container-image-save-the-date:first-child {
    order: -1;
    /* Mueve la primera imagen arriba */
    width: 100%;
    max-width: 800px;
  }

  .video.mobile-only {
    display: block;
    margin-top: 2rem;
  }

  /* More Info solo visible en mobile */
  .more-info {
    display: block;
    text-align: center;
    margin-top: 10px;
    font-size: 1rem;
    color: var(--blue) !important;
    font-weight: bold;
    cursor: pointer;
  }

  .floating-element {
    font-size: 1.5rem;
    left: -5%;
    /* Ajusta para pantallas pequeñas */
  }

  .container-image-event-details img {
    width: 250px;
  }

  .gallery-item {
    flex: 1 1 calc(50% - 10px);
    /* 2 columnas en tablets */
    max-width: calc(50% - 10px);
  }

  .upnext-title {
    margin: 30px 0;
  }

  .title-blue {
    width: 60%
  }

  h2 {
    font-size: 2rem !important;
  }

}

/*Timer*/
.hurrytimer-timer-block {
  padding: 1rem;
}

.hurrytimer-timer-digit {
  font-weight: 800;
}

.hurrytimer-timer-label {
  font-size: 12px;
}

/* TAlly*/

.floating-container {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9999;
}

.floating-button {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.1);
  /* Fondo blanco muy transparente */
  backdrop-filter: blur(10px);
  /* El desenfoque del fondo */
  -webkit-backdrop-filter: blur(10px);
  /* Soporte para Safari */
  color: #fff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}

.button-text {
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  margin-bottom: 5px;
}

.hand-icon {
  font-size: 24px;
  /* Animación de rotación/balanceo */
  animation: hand-wave 2s infinite ease-in-out;
  transform-origin: bottom center;
}

/* Animación de la mano girando/saludando */
@keyframes hand-wave {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(15deg);
  }

  30% {
    transform: rotate(-10deg);
  }

  45% {
    transform: rotate(15deg);
  }

  60% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

/* Efecto al pasar el mouse */
.floating-button:hover {
  transform: scale(1.1);
}
.timeline-container {
  font-family: 'Inter', sans-serif;
  padding: 80px 20px;
  background: var(--blue);
  color: var(--white);
  overflow: hidden;
}

.timeline {
  position: relative;
  max-width: 1000px; /* Un poco más ancho para el zigzag */
  margin: 0 auto;
}

/* Línea Vertical Central */
.timeline::after {
  content: '';
  position: absolute;
  width: 2px;
  background: rgba(254, 254, 254, 0.2);
  top: 0;
  bottom: 0;
  left: 50%; /* Centrada */
  margin-left: -1px;
}
/* 1. Aseguramos que el contenedor no mueva los puntos */
.timeline-item {
  position: relative;
  width: 50%;
  padding: 20px 40px;
  box-sizing: border-box;
  min-height: 100px;
}

/* 2. El Punto: Posicionamiento absoluto respecto a la línea central */
.timeline-dot {
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--white);
  border-radius: 50%;
  top: 25px;
  z-index: 10;
  border: 3px solid var(--blue);
}

/* 3. Lógica de Intercalado: El punto se "ancla" al borde que toca la línea */

/* Eventos a la IZQUIERDA: El punto debe estar en el borde DERECHO */
.timeline-item:nth-child(odd) {
  left: 0;
  text-align: right;
}
.timeline-item:nth-child(odd) .timeline-dot {
  right: -7px; /* Mitad del punto + mitad de la línea para centrarlo */
  left: auto;
}

/* Eventos a la DERECHA: El punto debe estar en el borde IZQUIERDO */
.timeline-item:nth-child(even) {
  left: 50%;
  text-align: left;
}
.timeline-item:nth-child(even) .timeline-dot {
  left: -9px; /* Mitad del punto + mitad de la línea para centrarlo */
}

/* Ajuste de la línea central para que coincida */
.timeline::after {
  content: '';
  position: absolute;
  width: 2px;
  background: rgba(254, 254, 254, 0.2);
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
/* Estilos de Texto */
.timeline-date {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
  display: block;
}

.timeline-content h3 {
  margin: 0;
  color: var(--white);
  font-weight: 700;
}

.timeline-content p {
  margin: 5px 0 0;
  color: var(--light-gray);
  opacity: 0.8;
}

/* --- ESTILO PARA UPCOMING --- */
.upcoming .timeline-dot {
  background: var(--white);
  box-shadow: 0 0 15px var(--white);
  border-color: var(--blue);
}

.upcoming .timeline-date {
  color: var(--white);
}

.upcoming .timeline-content {
  background: rgba(255, 255, 255, 0.05);
  padding: 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.badge {
  background: var(--pink);
  color: var(--white);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 800;
  margin-bottom: 10px;
  display: inline-block;
}
/* Mobile section*/
@media screen and (max-width:550px) {

	.wp-block-columns.alignwide.are-vertically-aligned-top.is-not-stacked-on-mobile.is-layout-flex.wp-container-core-columns-is-layout-236b416a.wp-block-columns-is-layout-flex {
    flex-direction: column;
}
	.timeline::after { left: 31px; }
  .timeline-item { width: 100%; text-align: left !important; padding-left: 70px; padding-right: 20px; }
  .timeline-item:nth-child(even) { left: 0; }
  .timeline-dot { left: 23px !important; }

  .social-item-label {
    display: none;
  }

  .ast-container {
    padding-left: 0;
    padding-right: 0;
	max-width: 94%;
  }

  .title-number {
    font-size: 2.3rem !important;
  }

  .title-blue {
    width: 89%
  }

  h2 {
    font-size: 1.9rem !important;
  }


  .options-values {
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  .options-values .value h4 {
    font-size: 0.8rem
  }

  .gallery-item {
    flex: 1 1 100%;
    /* 1 columna en móviles */
    max-width: 100%;
  }

  .save-the-date-day {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }


  .container-image-save-the-date {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 100%;
  }

  .container-image-save-the-date img {
    width: 100%;
    max-width: 300px;
    /* Ajusta el tamaño en mobile */
    height: auto;
    object-fit: contain;
  }

  .more-info {
    display: none;
  }

  .event-details-text {
    font-size: 1.6rem;
  }

  .event-date h3 {
    font-size: 1.65rem;
  }

  #main-image-landing {
       height: 83vh;
       margin-bottom: 2.5rem;
  }

  .event-details-content {
    padding: 0;
  }

  .hurrytimer-timer-block {
    padding: 0.4rem;
  }

  .hurrytimer-timer-digit {
    font-size: 22px !important;
  }

  .hurrytimer-timer-label {
    font-size: 9px !important;
  }

  .tally-popup._layoutDefault_evhv6_170.tally-form-1Av6a4 {
    display: none !important;
  }

}

@media screen and (max-width:768px) {
  .tally-popup._layoutDefault_evhv6_170.tally-form-1Av6a4 {
    display: block !important;
  }

  .site .site-content #primary {
    margin-left: 0px;
  }


  #wpfront-notification-bar {
    height: 75px;
  }

  .floating-element {
    display: none;
  }

  p {
    font-size: 16px;
  }

  .galeria-3x3 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  #info-flex-elements {
    flex-direction: column;
    align-items: center;
	margin-bottom: 1.3rem;
  }

  #info-flex-elements div {
    width: 16rem;
  }
	  #info-flex-elements div.btn-blue-border,
.ast-builder-menu-2 li.btn-blue-border {
    width: 75%;
  }

  .about-us {
    flex-direction: column-reverse;
  }

  .aboutus-flex {
    width: 90%;
  }

  /* Asegúrate de que el botón flotante SÍ se vea */
  .floating-container {
    display: block !important;
  }
}

.floating-button {
  width: 80px;
  height: 80px;
  right: 20px;
  bottom: 20px;
}


@media screen and (min-width:1024px) {
  p {
    font-size: 18px;
  }

  .main-text {
    max-width: 800px;
  }

  .video {
    margin: 5%;
  }

  #event-details {
    margin-top: 4%;
  }

  .desktop-link {
    visibility: visible;
    display: contents;
  }

  .mobile-link {
    display: none;
  }

  .galeria-3x3 {
    grid-template-columns: repeat(3, 1fr);
  }

}

@media screen and (min-width:1400px) {
  .ast-container {
    max-width: 90% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  p {
    font-size: 1.4rem;
  }

  .floating-element {
    left: 0;
  }

  .main-text {
    max-width: 1200px;
  }

}

@media screen and (min-width:1900px) {
  h2 {
    font-size: 2.2rem;
  }

  .image-container-small {
    width: 4rem;
  }
}