/*------------TIPOGRAFÍAS-----------*/
/*
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Regular.woff2') format('woff');
      
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Bold.woff') format('woff');       
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Quicksand';
  src: url('../fonts/Quicksand-Medium.woff') format('woff');       
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Quicksand';
  src: url('../fonts/Quicksand-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'Quicksand';
  src: url('../fonts/Quicksand-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
*/

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


:root {
  /*  Paleta de colores */
  --color-background: #F9F9F9;
  --color-text: #333333;
  /* Tipografías */
  
  --font-headings: 'Montserrat', sans-serif;
  --font-body: 'Quicksand', sans-serif;
  --font-ui: 'Quicksand', sans-serif; /*elementos funcionales de la interfaz (botones, breadcrumbs,navegador...)*/
  /* Pesos */
  --font-bold: 700;
  --font-medium: 500;
  --font-regular: 400;
  --font-light: 300;

      --h1-size: 2rem;           /* 32px */
    --h2-size: 1.5rem;         /* 24px */
    --h3-size: 1.25rem;        /* 20px */
    --h4-size: 1.125rem;       /* 18px */
    --h5-size: 1rem;           /* 16px */
    --h6-size: 0.9375rem;      /* 15px */

    --subtitle1-size: 0.875rem;    /* 14px */
    --subtitle2-size: 0.75rem;     /* 12px */
    --subtitle3-size: 0.6875rem;   /* 11px */

    --body1-size: 0.875rem;        /* 14px */
    --body2-size: 0.75rem;         /* 12px */

    --button1-size: 1rem;      /* 14px */
    --button2-size: 1rem;       /* 12px */

    --caption-size: 0.6875rem;     /* 11px */
    --overline-size: 0.75rem;      /* 12px */
}
  /*STYLES tipography*/

  h2{
    font-family: var(--font-headings);
    font-size: var(--h2-size);
    font-weight: var(--font-bold);
    line-height: 2rem;
    color: var(--gray-800);
  }

  h3{
    font-family: var(--font-ui);
    font-size: var(--h3-size);
    font-weight: var(--font-bold);
    line-height: 2rem;
    color: black;

  }

  
  h4{
    font-family: var(--font-body);
    font-size: var(--h4-size);
    font-weight: var(--font-bold);
   }
  
  h5{
    font-family: var(--font-ui);
    font-size: var(--h5-size);
    font-weight: var(--font-bold);
  } 

  .subtitle{
    font-family: var(--font-ui);
    font-size: var(--subtitle1-size);
    font-weight: var(--font-bold);
  }
  .light{
    color:white;
  }
  .cta{
    font-family: var(--font-ui);
    font-size: var(--subtitle2-size);
    font-weight: var(--font-bold);
  }

  .cta-2{
    font-family: var(--font-ui);
    font-size: var(--h4-size);
    font-weight: var(--font-bold);
  }

  .cta-3{
    font-family: var(--font-ui);
    font-weight: var(--font-bold);
 }


  p{
    font-family: var(--font-body);
    font-size: var(--body1-size);
    font-weight: var(--font-medium);
    color: var(--color-text);
    line-height: 1.62rem;
  }
/* Media Query para Mobile */


@media (min-width: 769px)  {
  :root {
  /* Tamaños en rem (Desktop) */
--h1-size: 2.5rem;        /* 40px */
--h2-size: 2rem;          /* 32px */
--h3-size: 1.5rem;        /* 24px */
--h4-size: 1.15rem;       /* 20px */
--h5-size: 1.05rem;      /* 18px */
--h6-size: 1rem;          /* 16px */
--subtitle1-size: 1.10rem;   /* 15px */
--subtitle2-size: 0.8125rem;   /* 13px */
--subtitle3-size: 0.6875rem;   /* 11px */
--body1-size: 1rem;            /* 16px */
--body2-size: 0.875rem;        /* 14px */
--button1-size: 1rem;     /* 15px */
--button2-size: 1rem;      /* 14px */
--caption-size: 0.8125rem;     /* 13px */
--overline-size: 0.8125rem;    
  }


}
/*--------COLORES---------*/

:root {

/* Primary Tonos - Basado en #6C6C4B */
--primary-050: #f4f4ec;   /* Muy claro, ideal para fondos suaves */
--primary-100: #e2e2d0;   /* Beige verdoso pastel */
--primary-200: #c8c8a6;   /* Verde oliva claro */
--primary-300: #aeae7c;   /* Verde medio, cálido y funcional */
--primary-400: #949459;   /* Verde oliva vibrante, ideal para hover */
--primary-500: #7a7a4f;   /* Verde oliva profundo, alternativo al base */
--primary-550: #6C6C4B;   /* Color base original */
--primary-600: #59593d;   /* Verde oscuro, ideal para texto activo */
--primary-700: #46462f;   /* Verde tierra, útil para bordes o dark mode */
--primary-800: #333321;   /* Verde muy oscuro, casi negro */
--primary-900: #1f1f13;   /* Contraste extremo, ideal para microinteracciones oscuras */


/* Secondary Tonos - Basado en #D09345 */
--secondary-050: #fdf5ec;   /* Muy claro, casi crema */
--secondary-100: #f8e3c7;   /* Beige cálido pastel */
--secondary-200: #f0c99b;   /* Naranja suave con carácter */
--secondary-300: #e8af6f;   /* Ocre medio, ideal para fondos activos */
--secondary-400: #e09556;   /* Naranja vibrante, perfecto para hover */
--secondary-500: #d67f45;   /* Naranja profundo, alternativo al base */
--secondary-550: #D09345;   /* Color base original */
--secondary-600: #a86f38;   /* Terracota oscuro, ideal para texto activo */
--secondary-700: #80552b;   /* Marrón cálido para bordes o dark mode */
--secondary-800: #583b1e;   /* Muy oscuro, con fuerza visual */
--secondary-900: #302111;   /* Contraste extremo, ideal para microinteracciones oscuras */

/* Neutral Tonos - Basado en #F4F3EA */
--neutral-050: #fdfdfb;   /* Blanco cálido, casi imperceptible */
--neutral-100: #f9f8f1;   /* Crema muy claro, ideal para fondos */
--neutral-200: #f4f3ea;   /* Color base original */
--neutral-300: #e2e0d1;   /* Beige suave, perfecto para tarjetas */
--neutral-400: #d0cdb8;   /* Beige medio, ideal para hover pasivo */
--neutral-500: #bebba0;   /* Beige profundo, útil para contornos suaves */
--neutral-550: #b2ae91;   /* Alternativa al base con más cuerpo */
--neutral-600: #8f8c72;   /* Beige oscuro, ideal para texto activo */
--neutral-700: #6c6954;   /* Marrón oliva suave, para bordes o dark mode */
--neutral-800: #494636;   /* Muy oscuro, con contraste emocional */
--neutral-900: #262317;   /* Contraste extremo, ideal para microinteracciones oscuras */



/* Oscuros */
--neutral-light: #D8CFC9;   /* Claro, ideal para fondos suaves o tarjetas pasivas */
--neutral-base:  #6A5348;   /* Tono original, perfecto para texto, botones o contornos */
--neutral-dark:  #3E2F28;   /* Oscuro, ideal para bordes, dark mode o microinteracciones con contraste */


--neutral-rose:#F0C5B5;
--light-rose: #F6DED4;/* Botones contacto, u otros*/


  /* CTA (Call to Action) */

  --cta-primary: #DA8851; /*Botones principales (soporte online, programas a destacar)*/
  --cta-secondary: #BCC982; /*Botones secundarios (más información....)*/
  --cta-tertiary: #576B0E;/* Botones contacto, u otros*/
 --cta-rose: #F6DED4;/* Botones contacto, u otros*/

/* COLORES MAIN */
--color-background:  #F8F8F8;
--color-text: #0d0d0d;
}


/* ================================     LAYOUT    ================================ */

main{
  background-color: var(--neutral-050);
  margin: auto;
}

/* ===== H1 oculto pero con SEO ===== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* ===== HEADER ===== */


.header-style{
position: fixed; 
top:0; 
display: flex;
width: 100%;
height: auto;
padding:0;
flex-shrink: 0;
background-color: var(--primary-700);
box-shadow: 3px 3px 5px rgba(49, 49, 49, 0.393);
z-index: 999999;
}

.header-style .nav-bar-desktop{
  display: none;
}

/* NavBar */
.header-style .nav-bar{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 90%;
  height: auto;
  gap:7rem;
  padding: 0.25rem;
}

.header-style .logo-mobile{
  width: 80px;
  margin: auto;
  display: flex;
  justify-content: center;
}
.header-style .logo-mobile img{
  width: 100%;
}

.header-style .logo-desktop{
  display: none;
  width: 100px;
}



/* Button menu hamburguer */

.header-style .btn-menu-mobile{
  background-color: transparent;
  border:none;
  padding:0.5rem;
  cursor:pointer;
}


/* Menu mobile dropdown */
.mobile-dropdown.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.mobile-dropdown{
background-color: var(--neutral-rose);
  width: auto;
  visibility: hidden;
  position: fixed;
  width: 90%;
  height: 100vh;
  top: 0;
  left: 0; 
  flex-direction: column;
  min-width: 200px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  z-index: 500;
  opacity: 0;
  transform: translateX(-100%);
  transition: transform 0.4s ease, opacity 0.4s ease;
  pointer-events: none;
  list-style: none;  
  z-index: 9999999;
}

.mobile-dropdown::after{  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/vectors/grafico_5_respira.svg);
  background-repeat: no-repeat;
  background-size: 150%; /* o contain, según el diseño */
  background-position: left bottom;
  opacity: 0.4; /* ajusta según el efecto deseado */
  pointer-events: none;
  z-index: 0;
}

.mobile-dropdown .mobile-nav-menu{
  list-style: none;
  padding: 2rem;
  display: flex;
 flex-direction: column;
 justify-content: right;
 gap:2rem;
}

.mobile-dropdown .mobile-nav-menu a{
  display: block;
  padding: 1rem 1.5rem;
  text-decoration: none;
  font-family: var(--font-ui);
  font-weight: var(--font-bold);
  color:black;
}


.mobile-dropdown .mobile-nav-menu a:hover{
  background-color: var(--light-rose);
  border-radius: 10rem;
}

.mobile-dropdown .close-mobile-dropdown{
  position: relative;
  top:1rem;
  right: -18rem;
  background-color: transparent;
  padding: 1rem;
  border:none;

}

.mobile-dropdown.closing {
  transform: translateX(-100%);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
/* ================================     FOOTER    ================================ */

.section-footer{
  display: flex;
  width: 100%;
  height: auto;
  padding: 3rem 1rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  background-color: var(--neutral-dark);
}


.section-footer .footer-menu{
  display: flex;
  flex-direction: column;
  gap:1rem;
  justify-content: center;
  list-style: none;

}

.section-footer .footer-menu li a{
  display: block;
  padding: 1rem 1.5rem;
  color: white;
  text-decoration: none;
  font-family: var(--font-ui);
  font-weight: var(--font-bold);
}


.section-footer .footer-menu li a:hover{
  color: black;
  background-color: var(--light-rose);
  border-radius: 10rem;
}

.section-footer .footer-menu li a:hover{
  color:black;
  background-color: var(--neutral-rose);
  box-shadow: inset 2px 2px 5px #e38d6e;
}

.footer-copy{
  font-weight: var(--font-medium);
  color: white;
  margin-top: 4rem;
}




/* ================================     BUTTONS    ================================ */


.btn{
  font-family: var(--font-ui);
  font-weight: var(--font-bold);
  text-decoration: none;
  font-size: var(--button1-size);
  padding:16px 20px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 10px;
  border:none;
  cursor: pointer;

}


.btn-small{
  display: flex;
  width: 175px;
  height: 48px;

 

}

.btn-large{
  width: 257px;
  height: 56px;
}


/* Variantes */

/*Button primary*/

.btn--primary {
  background-color: var(--cta-primary);
  color: black;
}
.btn--primary:hover{
  background-color: #FFB482; ;
}

.btn--primary:active{
  background-color: #CE6A28; ;
  box-shadow: inset 2px 3px 5px  #6f3711; ;

}

.btn--primary:disabled{
  background-color: var(--gray-600);
}

/*Button secondary*/

.btn--secondary {
  background-color: var(--cta-secondary);
  color: black;
}
.btn--secondary:hover{
  background-color: #D2DBAB; 
}

.btn--secondary:active{
  background-color: #ABB776;;
  box-shadow: inset 2px 3px 5px #79873b; ;
}

.btn--secondary:disabled{
  background-color: var(--gray-600);
}

/*Button tertiary*/

.btn--tertiary {
  background-color: var(--cta-tertiary);
  color: rgb(255, 255, 255);
}
.btn--tertiary:hover{
  background-color:  #849251;;
}

.btn--tertiary:active{
  background-color: #4B5C0F;;
  box-shadow: inset 2px 3px 5px #2f3a07;;
}

.btn-hero{
  width: 86px;
  height: 100px;
  top:0;
  right: 0;
  position:absolute;
  box-shadow: 0 0 10px black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  gap:0.50px;
  border-radius:0 0 30px 30px;
  border: none;
  padding: 0.5rem ;
  cursor: pointer;
}

.btn-hero:hover{
    cursor: pointer;
}



.btn-hero span{
  font-size: var(--button1-size);
  font-family: var(--font-ui);
  font-weight: var(--font-bold);
}

#scrollToTop {
  position: fixed;
  bottom: 60px;
  right: 20px;
  background-color: var(--cta-secondary);
  color: white;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 20px;
  cursor: pointer;
  z-index: 9999;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.349);
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease;
}

/* ================================     BREADCRUMBS    ================================ */

.breadcrumbs{
  max-width: 100%;
  display: flex;
  gap:0.5rem;
  padding: 2rem 1rem;
  margin-top: 4rem;
}
.breadcrumbs a{
  display: block;
  font-family: var(--font-ui);
  color:var(--grey-800);
  text-decoration: none;
}
.breadcrumbs a:hover{
  font-family: var(--font-ui);
  color:var(--secondary-700);
}

.breadcrumbs span{
  font-family: var(--font-ui);
  color:var(--secondary-700);
  text-decoration: none;
  font-weight: var(--font-bold);
}


/* ================================     ANIMATIONS SCROLL    ================================ */

/* ===== Animacion secciones al hacer scroll ===== */

/* Animación desde abajo */
.reveal-bottom {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s ease-out;
}
.reveal-bottom.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Animación desde la izquierda */
.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.6s ease-out;
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Animación desde la derecha */
.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.6s ease-out;
}
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-bottom.visible {
  transition-delay: 0.2s;
}

.reveal-left.visible {
  transition-delay: 0.3s;
}

.reveal-right.visible {
  transition-delay: 0.3s;
}


.reveal-left.subrayado::after {
  content: "";
  display: block;
  width: 50%;
  height: 8px;
  margin: 2rem auto 0;
  background-color: var(--cta-tertiary);
  border-radius: 50% 40% 60% 30% / 40% 60% 30% 50%;
  transform: rotate(-1.5deg) scaleX(1.1);
  opacity: 0.85;
}


/* ================================     CONTACT    ================================ */
.section-contact{
  width: 100%;
  height: auto;
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  flex-shrink: 0;
}


/* ================================     SECTION BLOG    ================================ */

.section-container-blog{
    display: flex;
    width: auto;
    height: auto;
    flex-direction: column;
    gap: 10px;
    align-self: stretch;
    padding:5rem 1rem;
   text-align: justify  ;
    background-image: url(../img/vectors/bg-vector-brown-light.svg);
   background-size: cover;
   margin:-19rem auto 0;

}

.section-container-blog .container-title-blog{
  display: flex;
  flex-direction: column;
  gap:1rem;
}




.slider-track .card-blog{
  width: 400px;
  height: 550px; 
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  margin: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  gap: 2rem;
}

.card-blog .card-blog-container-img{
    border-radius: 30px;

}

.card-blog .card-blog-container-img img{
  width: 100%;
  height: 200px;
  object-fit: cover;

}

.section-container-blog .more-post{
  margin:auto;
}


.card-blog .card-content-text{
  display: flex;
  flex-direction: column;
  gap:1rem;
  justify-content: stretch;
}

.card-blog .card-content-text a{
  font-family: var(--font-ui);
}


/* ================================     MODALS    ================================ */

/* Cancelled class */

.modal-booking-canceled{
  display: none;
}



/* ===== BOOKING FORM ===== */
.modal-booking-container {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
  padding: 3rem 1.5rem;
  max-width: 800px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  z-index: 10000000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.modal-booking-container.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
 
}


.modal-booking-container h2 {
  font-size: 2rem;
  text-align: center;
  color: #333;
}

.modal-booking-container p {
  text-align: center;
  color: #666;
  font-size: 1rem;
}

/* === FECHA === */


#fecha-clase {
  display: none; /* ocultamos el input si solo quieres mostrar el calendario */
}

.flatpickr-calendar {
  margin: 0 auto;
  max-width: 300px;
  font-family: 'Montserrat', sans-serif;
}

.container-booking-date {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
}

.container-booking-date h3 {
  font-size: 1.4rem;
  color: #444;
}

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

/* Aquí puedes integrar un calendario externo */
.container-booking-date p {
  font-size: 0.95rem;
  color: #777;
}

/* === HORAS === */
.container-booking-time {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
}

.container-booking-time h3 {
  font-size: 1.4rem;
  color: #444;
}

.items-booking-time {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.item-time-1,
.item-time-2 {
  background-color: var(--light-rose);
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 1rem;
  width: 150px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.item-time-1:hover,
.item-time-2:hover {
  background-color: var(--neutral-rose);
}

/* Estado activo */
.item-time-1.active,
.item-time-2.active {
  border-color: #e6a38b;
  background-color: var(--light-rose);
}

/* Clases completas (gris) */
.item-time-2 {
  background-color: #eee;
  color: #999;
  cursor: not-allowed;
  pointer-events: none;
}

/* === FORMULARIO === */
.container-booking-name {
  position: relative;
  background-color: #f9f9f9;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.form-booking-style {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-weight: 600;
  color: #333;
  font-family: var(--font-body);
}

.form-group input[type="email"] {
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
}

.checkbox-group {
  font-size: 0.9rem;
  color: #555;
  display: flex;
}

.checkbox-group a {
  color:var(--cta-tertiary);
  text-decoration: underline;
}

.button-form-booking {
  text-align: center;
}



/* Botón cerrar */
.close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  cursor: pointer;
}

/* ===== MODAL CONFIRMATION ===== */
.modal-booking-confirmation
 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  background-color: #ffffff;
  color: #333;
  padding: 2rem 1.5rem;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  z-index: 10000;
  width: 90%;
  max-width: 400px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Estado visible */
.modal-booking-confirmation.active
 {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

/* Fondo oscuro detrás del modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}


/* ===== MODAL CONFIRMACION ===== */

.modal-booking-confirmation,
.modal-confirmation-canceled {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap:1rem;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  justify-content: center;
  align-items: center;
  width: 400px;
  height: 400px;
  border-radius: 20px;
  background-color: var(--neutral-rose);
  background-image: url('../img/vectors/grafico_3_respira_rose.svg'); /* tu imagen */
  background-repeat: no-repeat;
  background-size: 40%; /* o 'contain' si prefieres que se ajuste sin recortar */
  background-position: right bottom; 
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
  box-shadow: 0 0 15px black;
  overflow: hidden;
  text-align: center;
  z-index: 99999999999;
}



.modal-booking-confirmation.active{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal-booking-confirmation h2{
  line-height: 2rem;
}


/* ===== MODAL CANCELAR ===== */
.modal-booking-canceled {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 9999999;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease;

}

.modal-booking-canceled.active,
.modal-confirmation-canceled.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal-content-contact-respira {
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

.modal-booking-canceled.active .modal-content-contact-respira {
  transform: scale(1);
}

.container-modal-cancel{
  width: 95%;
  height: auto;
  max-width: 1000px;
  background-color: white;
  top: 50%;
  left: 50%;
  border-radius: 20px;
  box-shadow: 0 0 20px black;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  gap:1rem;
  padding: 3rem 1rem;
}


/* ===== modal confirmacion cancelar ===== */



.modal-booking-confirmation h2{
  line-height: 2rem;
}




/* ================================     MODAL CONTACT    ================================ */
.modal-contact {
  display: none;
  position: fixed;
  z-index: 99999999;
  left: 0; top: 0;
  width: 100%; 
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
}

.modal-contact.active {
  display: flex;
}


.modal-content-contact-respira {
  display: flex;
  flex-direction: column;
  gap:1rem;
  background: #fff;
  padding: 2rem;
  border-radius: 10px;
  max-width: 500px;
  height: auto;
  width: 95%;
  position: relative;
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

.container-text-modal-contact{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap:1rem;
}

.cerrar-modal {
  position: absolute;
  top: 1rem; right: 1rem;
  font-size: 1.5rem;
  cursor: pointer;
  color: #333;
}

.form-contact-respira input,
.form-contact-respira textarea {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-family: var(--font-body);
}

.form-contact-respira label {
  font-weight: 500;
  margin-bottom: 0.25rem;
  display: block;
  font-family: var(--font-body);
}


.checkbox-politica {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.checkbox-politica input{
  width: 20%;
}

.close-modal{
  align-self: flex-end;
  background-color: transparent;
  padding: 1rem;
  border:none;
  cursor:pointer
}

.close-modal:hover{
  color:var(--cta-primary)
}

.error-msg {
  color: #d9534f;
  font-size: 0.85rem;
  margin-top: 0.25rem;
  display: block;
}

input.error,
textarea.error {
  border-color: #d9534f;
}


/* ===== MODAL CANCEL CLASS ===== */