/* =======================================================
   0) VARIABLES + RESET
   ======================================================= */
:root {
  --navbar-height: 45px;
  --overlay-strength: 0.3; /* sube/baja para más/menos contraste */
  --shadow-strong: 0 10px 30px rgba(0,0,0,0.42);

  /* Tamaños fluidos estilo editorial */
  --title-min: 48px;
  --title-pref: 7vw;
  --title-max: 135px;
  --subtitle-min: 12px;
  --subtitle-pref: 1.8vw;
  --subtitle-max: 18px;
}
/* Reset básico */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
html { scroll-behavior: smooth; }  /*


/* =======================================================
   1) BODY (GLOBAL)
   ======================================================= */
body {
  font-family: "Cormorant Garamond", serif;
  color: #222;
  background: #f2eddc;
} 


/* =======================================================
   2) GLOBAL UI (LOADER + reCAPTCHA)
   ======================================================= */
/* CÍRCULO MIENTRAS CARGA */
.loader {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 100%;
  z-index: 9999;
  background: url(../images/loader.gif) center no-repeat #fff;
  pointer-events: none;
}
/* reCAPTCHA v3: mueve el badge */
.grecaptcha-badge{
  bottom: 4px !important;
  left: 4px !important;
  right: auto !important;
  transform: scale(.85);
  transform-origin: left bottom;
  opacity: 0;
} 


/* =======================================================
   3) NAVBAR
   ======================================================= */
/* Navbar SIEMPRE transparente */
nav.navbar,
.slim-navbar,
.navbar.navbar-light,
.navbar.bg-white,
.navbar.navbar-expand-lg {
  background: transparent !important;
  background-color: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Tipografía/links del menú (siempre blancos con sutil sombra) */
.navbar .navbar-brand,
.navbar .nav-link {
  font-family: "Cormorant Garamond", serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;                 /* <-- subimos de 400 a 600 */
  font-size: 14px;                  /* <-- 13px -> 14px (un pelín mayor) */
  color: #fff !important;
  text-shadow: 0 2px 6px rgba(0,0,0,0.55); /* <-- sombra un poco más marcada */
  opacity: 0.98;                    /* <-- más presencia */
  transition: color .2s ease, opacity .2s ease, filter .2s ease;
  position: relative;               /* para el subrayado animado */
}


/* Espaciado y estados */
.navbar .nav-link {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  opacity: 0.92;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #fff !important;
  opacity: 0.75;
  text-decoration: none;
}

/* Hamburguesa (icono blanco sin halo) */
.navbar-light .navbar-toggler {
  border: none !important;
  background: transparent !important;
}
.navbar-light .navbar-toggler-icon {
  filter: invert(1) brightness(1.25) !important; /* icono blanco */
}
.navbar .navbar-toggler:focus,
.navbar .navbar-toggler:active,
.navbar .navbar-toggler:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
} /* Basado en la sección NAVBAR y hamburguesa original, ajustado a blanco/transparente. [1](https://imaginatv-my.sharepoint.com/personal/pacebes_mediapro_tv/Documents/Archivos%20de%20Microsoft%C2%A0Copilot%20Chat/style2.css) */


#nosotros,
#programa,
#detalles,
#confirmacion,
#regalos {
  scroll-margin-top: calc(var(--navbar-height) + 16px); /* margen de seguridad */
}


/* =======================================================
   4) HERO (vídeo fullscreen + overlay)
   ======================================================= */
.hero {
  position: relative;
  width: 100%;
  height: 100vh; 
  margin-top: 0;           /* coloca el hero debajo de la navbar */
  overflow: hidden;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0, var(--overlay-strength)) 0%,
    rgba(0,0,0, calc(var(--overlay-strength) * .70)) 70%,
    rgba(0,0,0, var(--overlay-strength)) 100%
  );
  pointer-events: none;
} /* [1](https://imaginatv-my.sharepoint.com/personal/pacebes_mediapro_tv/Documents/Archivos%20de%20Microsoft%C2%A0Copilot%20Chat/style2.css) */


/* =======================================================
   5) HERO: TEXTO / TITULARES
   ======================================================= */
.hero-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;   /* centra en X */
  justify-content: center; /* centra en Y */
  text-align: center;
  padding: 0 1rem;
  color: #fff;
  text-shadow: var(--shadow-strong);

  /* Aparición lenta y elegante */
  opacity: 0;
  transform: translateY(25px);
  animation: fadeUpSlow 2.2s ease-out 0.4s forwards;
}

/* Título editorial */
.title-script {
  font-family: "Cormorant Garamond", serif;
  font-weight: 300; /* contraste fino */
  text-transform: uppercase;
  letter-spacing: 0.05em; /* tracking suave */
  font-size: clamp(var(--title-min), var(--title-pref), var(--title-max));
  line-height: 0.96;
  margin: 0 0 .3em 0;
  color: #fff;
}
/* Spans de control */
.title-script .name { display: inline; }
.title-script .amp  { display: inline; padding: 0 .16em; }

/* Subtítulo: fecha/lugar */
.place-date {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: clamp(var(--subtitle-min), var(--subtitle-pref), var(--subtitle-max));
  opacity: 0.92;
  margin: 0;
  color: #fff;
  text-shadow:
    0 2px 6px rgba(0,0,0,.55),          /* refuerza la sombra existente del set */
    0 0 1px rgba(0,0,0,.35);            /* contorno muy sutil */

} 



/* =======================================================
   HERO — CTA inferior centrado
   ======================================================= */
.hero-cta {
  position: absolute;
  left: 0; right: 0;
  bottom: 90px;                    /* separación del borde inferior */
  display: flex;
  justify-content: center;
  pointer-events: none;            /* evita tapar el vídeo salvo el botón */
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUpCTA 1.1s ease-out 1s forwards; /* delay 3s */
}


/* Keyframe más ligero que el del título */
@keyframes fadeUpCTA {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  60% {
    opacity: 0.8;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


.btn-hero-confirm {
  pointer-events: auto;            /* el botón sí recibe clics */
  display: inline-block;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: "Cormorant Garamond", serif;
  font-weight: 650;                /* presencia tipo botón */
  font-size: 14px;
  padding: .6rem 1.25rem;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 999px;
  background: rgba(0,0,0,0.12);    /* sutil contraste sobre vídeo */
  backdrop-filter: blur(4px);      /* efecto glass suave si está disponible */
  text-shadow: 0 2px 6px rgba(0,0,0,0.55);
  transition: background .18s ease, border-color .18s ease, transform .18s ease, filter .18s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.22);
}

.btn-hero-confirm:hover,
.btn-hero-confirm:focus {
  background: rgba(255,255,255,0.16);
  border-color: #fff;
  filter: brightness(1.05);
  transform: translateY(-1px);
  outline: none;
}

.btn-hero-confirm:active {
  transform: translateY(0);
}

/* =======================================================
   RESPONSIVE (≤576px) — CTA
   ======================================================= */
@media (max-width: 576px) {
  .hero-cta { bottom: 70px; }
  .btn-hero-confirm {
    font-size: 12px;               /* legible en móvil, consistente con menú */
    padding: .65rem 1.1rem;
    letter-spacing: 0.12em;        /* un pelín menos para ahorrar ancho */
  }
}




/* =======================================================
   6) UTILIDADES + ANIMACIONES
   ======================================================= */
@keyframes fadeUpSlow {
  0%   { opacity: 0;   transform: translateY(25px); }
  40%  { opacity: 0.4; transform: translateY(18px); }
  70%  { opacity: 0.8; transform: translateY(8px); }
  100% { opacity: 1;   transform: translateY(0); }
}
.fade-up {
  opacity: 0;
  transform: translateY(12px);
  animation: fadeUpSlow 1.8s ease-out .2s forwards;
} /* [1](https://imaginatv-my.sharepoint.com/personal/pacebes_mediapro_tv/Documents/Archivos%20de%20Microsoft%C2%A0Copilot%20Chat/style2.css) */


/* =======================================================
   7) RESPONSIVE (≤576px) — agrupado por secciones
   ======================================================= */
@media (max-width: 576px) {

  /* 7.1 Body / variables */
  :root { --navbar-height: 42px; }

  /* 7.2 Navbar (ya es transparente arriba; aquí afinamos menú desplegado y tamaños) */
  .navbar .navbar-brand,
  .navbar .nav-link {
    color: #fff !important;
    text-shadow: 0 2px 6px rgba(0,0,0,0.45);
    font-size: 15px;
  }
  .navbar-collapse {
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(6px);
    border-radius: 10px;
    margin: .5rem;
    padding: .5rem;
  }

  /* 7.3 Hero */
  .hero {
    height: 100vh;
    margin-top: 0;
  }

  .hero-text{
    padding-top: clamp(90px, 20vh, 200px) !important;
    justify-content: flex-start !important;
  }

  /* 7.4 Hero: texto/títulos */
  .title-script {
    line-height: 1.02;
    letter-spacing: 0.04em;
  }
  .title-script .name { display: block; }
  .title-script .amp  {
    display: block;
    font-weight: 400;
    font-size: 1.15em; /* un poco más grande para equilibrio visual */
    margin: .05em 0;
    letter-spacing: 0.02em;
  }
} /* [1](https://imaginatv-my.sharepoint.com/personal/pacebes_mediapro_tv/Documents/Archivos%20de%20Microsoft%C2%A0Copilot%20Chat/style2.css) */


/* =======================================================
   8) ACCESIBILIDAD: REDUCCIÓN DE MOVIMIENTO
   ======================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero-text, .fade-up {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .navbar .nav-link { transition: none !important; }
} /* [1](https://imaginatv-my.sharepoint.com/personal/pacebes_mediapro_tv/Documents/Archivos%20de%20Microsoft%C2%A0Copilot%20Chat/style2.css) */


/* =======================================================
   9) SAFE AREAS iOS (opcional)
   ======================================================= */
@supports (padding: max(0px)) {
  .hero {
    padding-left:  max(env(safe-area-inset-left), 0px);
    padding-right: max(env(safe-area-inset-right), 0px);
  }
} /* [1](https://imaginatv-my.sharepoint.com/personal/pacebes_mediapro_tv/Documents/Archivos%20de%20Microsoft%C2%A0Copilot%20Chat/style2.css) */




.section-divider {
  width: min(86%, 1200px);
  margin: clamp(16px, 5vw, 60px) auto;
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(0,0,0,.12), transparent);
}




/* ==========================================================
   PROGRAMA — sin cajas | <img> dentro de <li> | con “rayas”
   Desktop: grid 24 columnas (control total)
   Móvil: columna con alternancia izquierda/derecha real
   ========================================================== */

/* -------- Variables específicas de la sección -------- */
:root{
  --prog-ink:       #0f1a1a;   /* color principal del texto */
  --prog-atlantic:  #375b57;   /* color para horas (verde atlántico) */
  --prog-strip-a:   #F3E7D3;   /* arena */
  --prog-strip-b:   #D7E7DF;   /* verde agua pálido */
  --prog-gap:       clamp(6px, 1vw, 14px);
  --prog-maxw:      1400px;
}

/* -------- Contenedor y fondo “isleño + atlántico” -------- */
#programa.prog-nobox{
  position: relative;          /* crea un contexto propio */
  min-height: auto; 
  overflow: visible;
  display: flow-root;
  background: #f2eddc; /*beige arena cálido */
  /* background: #eef4f1; verde agua muy suave */
  padding-top: clamp(48px, 10vw, 120px);
  padding-bottom: clamp(72px, 12vw, 160px) !important;
}

#programa.prog-nobox::after{
  content: "";
  display: block;
  height: clamp(72px, 12vw, 160px); /* ajusta a tu gusto */
}

/* Si el último hijo deja margen, lo anulamos para que no “se coma” el fondo */
#programa.prog-nobox > *:last-child{
  margin-bottom: 0 !important;
}

/* DESPUÉS: no anules el wrap final */
#programa.prog-nobox > *:last-child:not(.prog-nobox__wrap){
  margin-bottom: 0 !important;
}
.prog-nobox__wrap{ max-width: var(--prog-maxw); margin: 0 auto; margin-bottom: 20% !important; }

.prog-nobox__title{
  font-family: "Kalam", cursive;
  text-transform: uppercase;
  line-height: 1.02;
  color: #4a2c17;                     /* coherente con body */
  text-align: center !important;
  margin: 0 0 clamp(24px, 6vw, 56px) 0;
  position: relative;
  /* padding: 0 .8rem; */
  padding-bottom: 2%;
  background: linear-gradient(
    to right,
    #836957 0%,
    #4a2c17 40%,
    #836957 100%
  );
  -webkit-background-clip: text;
  color: transparent;

  font-weight: 500;                       /* más presencia */
  text-shadow: 0 2px 4px rgba(0,0,0,0.10);
  font-size: clamp(42px, 5vw, 60px);      /* ligeramente más grande */
}




/* ==========================================================
   DESKTOP / TABLET — Grid editorial de alta precisión
   ========================================================== */
.prog-nobox__list{
  list-style: none;
  margin-left: 2%;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(36, 1fr);  /* <— clave para colocar fino */
  grid-auto-rows: 10px;
  gap: clamp(8px, 1.2vw, 18px);    /* unifica con utilidades del sitio */
}

/* Ítems (icono + textos) */
.prog-nobox__item{
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  row-gap: 8px;
}

/* ============ EVENTOS MÁS GRANDES (desktop/tablet) ============ */
.prog-nobox__icon{
  width: clamp(120px, 8vw, 140px);
  height: auto;
  object-fit: contain;
  display: block;  
  filter: saturate(.98) contrast(1.03);
  transition: transform .25s ease, filter .25s ease;
}


.prog-nobox__item:hover .prog-nobox__icon {
  transform: translateY(-2px) scale(1.02);
  filter: saturate(1) contrast(1.06);
}


.prog-nobox__text{ display: grid; gap: 4px; justify-items: center; text-align: center; }

.prog-nobox__name{
  font-family: "Cormorant Garamond", serif; /* alinea con resto */
  text-transform: uppercase;
  /* color: #222;                     sustituye var(--prog-ink) si quieres */
  font-weight: 600 !important;       /* más grueso */
  font-size: clamp(18px, 2.4vw, 26px) !important; 
  color: #3b2413;                    /* marrón chocolate elegante */
  letter-spacing: 0.08em;
  text-shadow: 0 1px 3px rgba(0,0,0,.10); 
}

.prog-nobox__time{
  font-family: "Cormorant Garamond", serif;
  text-transform: uppercase;
  color: #375b57;                  /* mantiene tu “atlantic”, aporta coherencia */
  opacity: 0.95;
  text-align: center;
  font-weight: 700 !important;       /* bien gordito para leer sobre iconos */
  font-size: clamp(14px, 2vw, 18px) !important;
  letter-spacing: 0.12em;
  text-shadow: 0 1px 3px rgba(0,0,0,.15);
}


/* Al mostrarse: transición elegante, delay controlado por --d */
#programa .prog-show {
  opacity: 1 !important;
  transition: opacity .45s ease-out var(--d, 0s); /* sin transform aquí */
}


/* ---- Colocación exacta de cada hito (ajústalo si quieres) ----
   fila 1: 1, 2, 3
   fila 2: 4, 5
*/

/* Ítems */
.prog-nobox__item--1{ grid-column: 1  / span 6; grid-row: 1; }  /* igual: ya está a la izquierda */
.prog-nobox__item--2{ grid-column: 8  / span 6; grid-row: 4; }  /* 9 → 7  (−2) */
.prog-nobox__item--3{ grid-column: 16 / span 6; grid-row: 1; }  /* 17 → 15 (−2)  ⇐ centrado */
.prog-nobox__item--4{ grid-column: 23 / span 6; grid-row: 4; }  /* 25 → 23 (−2) */
.prog-nobox__item--5{ grid-column: 31 / span 4; grid-row: 1; }  /* 33 → 31 (−2) */


/* Rayas (conectores) — “carriles” entre bloques */
.prog-nobox__stripe{
  place-self: center;
  opacity: .95;
  transform: none;
}

.prog-nobox__stripe img{
  height: clamp(20px, 3vw, 50px);
  width: clamp(60px, 7vw, 100px);
  border-radius: 6px;
  opacity: .96;
  filter: saturate(.95) contrast(1.02);
}



/* Stripes (conectores) */
.prog-nobox__stripe--a{ grid-column: 7  / span 2; grid-row: 8; } /* 7  → 5  (−2) */
.prog-nobox__stripe--b{ grid-column: 14 / span 2; grid-row: 8; } /* 14 → 12 (−2) */
.prog-nobox__stripe--c{ grid-column: 22 / span 2; grid-row: 8; } /* 24 → 22 (−2) */
.prog-nobox__stripe--d{ grid-column: 29 / span 2; grid-row: 8; } /* 31 → 29 (−2) */



/* Angulitos suaves en desktop/tablet */
.prog-nobox__stripe--a img{ transform: rotate(200deg);  transform-origin:center; }
.prog-nobox__stripe--b img{ transform: rotate(130deg); transform-origin:center; }
.prog-nobox__stripe--c img{ transform: rotate(220deg);  transform-origin:center; }
.prog-nobox__stripe--d img{ transform: rotate(320deg); transform-origin:center; }


/* Hover sutil (opcional) */
.prog-nobox__item:hover .prog-nobox__icon{
  transform: translateY(-2px) scale(1.015);
  transition: transform .25s ease;
}


/* ------- Desktop / Tablet (≥801px): fade + slide-up en ITEMS; stripes solo fade */
@media (min-width: 801px) {
  /* Estado inicial */

  .prog-nobox__list{ transform: translateX(-1%); } /* rango sugerido: -0.5% a -1% */
  
  #programa.seq-init .prog-nobox__item,
  #programa.seq-init .prog-nobox__stripe {
    opacity: 0;
    transform: translateY(14px);      /* deslizamiento sutil hacia arriba */
    filter: blur(3px);                /* toque elegante */
    scale: 0.995;
  }

  /* Estado visible: transición con mismas curvas/tiempos, controladas por --d */
  #programa .prog-nobox__item.prog-show,
  #programa .prog-nobox__stripe.prog-show {
    opacity: 1 !important;
    transform: none !important;
    filter: blur(0);
    transition:
      opacity   .55s ease-out var(--d, 0s),
      transform .60s cubic-bezier(.22,.61,.36,1) var(--d, 0s),
      filter    .60s ease-out var(--d, 0s);
  }

}


/* ==========================================================
   MÓVIL — Columna con alternancia izquierda/derecha real
   (sin tocar tu HTML: patrón Item, Raya, Item, Raya…)
   Items = posiciones 1,3,5,7,9...
   Rayas = posiciones 2,4,6,8...
   ========================================================== */
@media (max-width: 800px){

  #programa.prog-nobox{
  padding-bottom: 0 !important;
  }

  .prog-nobox__title {
    letter-spacing: 0.16em;
    margin-bottom: clamp(20px, 7vw, 44px);
  }
  /* Columna vertical compacta */
  .prog-nobox__list{
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
  }

  /* Ítems centrados por defecto */
  .prog-nobox__item{
    width: 100%;
    text-align: center;
    justify-items: center;
    row-gap:2px;
    margin: 0;
    max-width: 85%;
  }

  
  .prog-nobox__list > li:nth-child(4n + 1).prog-nobox__item{
    align-self: flex-start;
    transform: none;       /* ← quitar desplazamiento */
    margin-inline: 0;      /* pegado a la izquierda */
  }

  
/* Ítems que “caen” a la derecha */
  .prog-nobox__list > li:nth-child(4n + 3).prog-nobox__item{
    align-self: flex-end;
    transform: none;       /* ← quitar desplazamiento */
    margin-inline: 0;      /* pegado a la derecha */
  }

  
  /* Las rayas pueden ir centradas sin desplazarlas */
  .prog-nobox__list > li.prog-nobox__stripe{
    transform: none;
  }

  .prog-nobox__text {
      gap: 2px !important;   /* nombre/hora más juntitos */
    }

  .prog-nobox__icon{
    width: clamp(44px, 25vw, 180px);
  }

  .prog-nobox__stripe{
    width: 28%;
    max-width: 44px;
    margin-inline: auto;
  }
  /* Raya tras ítem “izquierda” (4n+1 → raya 4n+2) */
  .prog-nobox__list > li:nth-child(4n + 2).prog-nobox__stripe{
    transform: translateX(15%);
  }
  /* Raya tras ítem “derecha” (4n+3 → raya 4n+4) */
  .prog-nobox__list > li:nth-child(4n + 4).prog-nobox__stripe{
    transform: translateX(-15%);
  }

  .prog-nobox__stripe img{
    width: 100%;
    height: 100%;      /* más finita en móvil */
    border-radius: 3px;
    object-fit: cover;
  }

  .prog-nobox__name {
    font-size: clamp(15px, 4.2vw, 19px) !important;
    line-height: 1.08 !important;                   /* baja la altura de línea */
    letter-spacing: 0.06em !important;              /* un pelín menos tracking */
  }
  .prog-nobox__time {
    font-size: clamp(11.5px, 3.4vw, 15px) !important;
    line-height: 1.05 !important;
    letter-spacing: 0.08em !important;
    font-weight: 700 !important;
    
  } 

  /* Pequeño respiro con el nombre */
  .prog-nobox__name + .prog-nobox__time{
    margin-top: 3px;
  }

  #programa .prog-nobox__time{
    opacity: 1;
  }
  
/* Estado inicial: solo opacidad, NO tocar transform para respetar la alternancia */
  #programa.seq-init .prog-nobox__item,
  #programa.seq-init .prog-nobox__stripe {
    opacity: 0; /* sin transform */
  }

  /* Estado visible: solo opacidad */
  #programa .prog-nobox__item.prog-show,
  #programa .prog-nobox__stripe.prog-show {
    opacity: 1 !important;
    transition: opacity .45s ease-out var(--d, 0s);
  }
}



/* ==========================================================
   PROGRAMA — Móvil:
   - Items más hacia izquierda/derecha
   - Rayas alineadas con las horas
   - Sección más compacta
========================================================== */


@media (max-width: 800px){

  /* 1) ITEMS MÁS A LOS LADOS ----------------------------- */
  /* Items que van a la IZQUIERDA */
  #programa .prog-nobox__list > li:nth-child(4n + 1).prog-nobox__item{
    align-self: flex-start !important;
    transform: translateX(-28px); /* más hacia la izquierda */
  }

  /* Items que van a la DERECHA */
  #programa .prog-nobox__list > li:nth-child(4n + 3).prog-nobox__item{
    align-self: flex-end !important;
    transform: translateX(28px); /* más hacia la derecha */
  }

  /* 2) RAYAS A LA ALTURA DE LAS HORAS -------------------- */
  #programa .prog-nobox__stripe{
    display: flex !important;
    align-items: center !important;  /* centra verticalmente con la hora */
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    transform: none !important;
  }

  #programa .prog-nobox__stripe img{
    height: auto !important;
    /* ⬆️ Las rayas NO se hacen más pequeñas,
       solo se ajusta el ancho para encajar mejor
       pero siguen siendo visualmente igual de “presentes” */
  }

  #programa .prog-nobox__name{
    margin-bottom: 0 !important;
    line-height: 1.05 !important;
  }

  #programa .prog-nobox__time{
    margin-top: 0 !important;
    line-height: 1 !important;
  }
}



/* ============ NOSOTROS Intro — versión robusta responsive ============ */

/* Base (mobile-first) */
#nosotros-intro.nos-intro{
  position: relative;
  width: 100%;
  min-height: clamp(67vh, 72vh, 88vh);
  background-image: url("../images/nosotros-desktoop.png");
  background-repeat: no-repeat;
  background-position: 50% 90%;   /* móvil: centrada */
  background-size: 72% auto;      /* móvil: presencia sin recortar */
  padding: clamp(36px, 9vh, 110px) 0;
  overflow: hidden;
  scroll-margin-top: calc(var(--navbar-height) + 16px);
  margin-bottom: 5%;
}

/* Contenedor principal (móvil centrado) */
.nos-intro .container-intro{
  position: relative;
  z-index: 1;
  width: min(96%, 540px);
  margin: 6% auto 0 auto;
  text-align: center;
}

/* Titulares (móvil) */
.nos-intro__header{
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
}
.nos-intro__title{
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: clamp(21px, 5vw, 40px);
  line-height: 1.1;
  color: #5A4634;
  margin-bottom: 3.5%;
}
.nos-intro__supertitle{
  font-family: "Kalam", cursive;
  font-weight: 530;
  text-transform: uppercase;
  line-height: 1.02;
  font-size: clamp(28px, 4vw, 65px);
  color: #3B2413;
  text-shadow: 0 2px 6px rgba(255,255,255,.35);
  margin-bottom: 3.5%;
}

/* Tablet (576–999): izquierda, más ancho pero contenido */
@media (min-width: 576px) and (max-width: 999px){
  #nosotros-intro.nos-intro{
    background-position: 90% 90%;   /* foco a la derecha */
    background-size: 65% auto;
  }
  .nos-intro .container-intro{
    margin: 5% 0 0 6%;
    padding-inline: 12px;
    max-width: 680px;
    justify-items: center;
  }
  .nos-intro__header{
    max-width: 560px;
    margin: 0;
    text-align: center;
    justify-items: center;
    gap: 1.4rem;
  }
  .nos-intro__title{ font-size: clamp(19px, 3vw, 28px); }
  .nos-intro__supertitle{ font-size: clamp(26px, 4vw, 40px); }
}

/* Portátil (1000–1400): izquierda, caja más amplia pero limitada */
@media (min-width: 1000px) and (max-width: 1400px){
  #nosotros-intro.nos-intro{
    background-position: 90% 90%;
    background-size: 64% ;       /* un poco menos de zoom para no cortar */
  }
  .nos-intro .container-intro{
    margin: 5% 0 0 6.5%;             /* ¡ojo!: sin centrado */
    max-width: 920px;
    justify-items: center;
  }
  .nos-intro__header{
    max-width: 600px;                 /* texto no se estira */
    margin: 0;
    text-align: center;
    justify-items: center;
    text-wrap: balance;
  }
  .nos-intro__title{ font-size: clamp(20px, 2.8vw, 34px); }
  .nos-intro__supertitle{
    font-size: clamp(28px, 3.4vw, 49px);
    letter-spacing: 0.02em;
  }
}

/* Desktop grande (≥1401): izquierda, fondo con algo más de presencia */
@media (min-width: 1401px){
  #nosotros-intro.nos-intro{
    background-position: 90% 90% !important;
    background-size: 65% ;
  }
  .nos-intro .container-intro{
    margin-left: 3%;
    max-width: 980px;
  }

  .nos-intro__supertitle{
    font-weight: 550;
  }
  .nos-intro__header{ max-width: 640px; }
}

/* Ultra-anchos (≥1600): evita “vacíos” excesivos */
@media (min-width: 1600px){
  #nosotros-intro.nos-intro{
    background-size: 75% ;     /* sube presencia del fondo sin romper */
    background-position: 40% 100%;
  }

   .nos-intro .container-intro{
    margin-left: 8%;
    width:  900px !important;
  }
  .nos-intro__header{ max-width: 900px; }

  .nos-intro__title{ font-size: 50px; }
  .nos-intro__supertitle{ font-size: 75px; }
  

}

/* ==============================
   Calendario elegante (TBY) — V2
   ============================== */
.tby-calendar{
  width: min(340px, 78vw);           /* más ancho en desktop */
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  display: grid;
  justify-items: center;
  padding: 0 1rem 1rem 1rem;
  margin-top: .6rem;

  /* CENTRADO SIEMPRE */
  place-self: center;
  margin-inline: auto;
}


/* ====== Escritorio: D · H · M · S ====== */
.tby-cal-grid{
  width: 100%;
  display: grid;
  grid-auto-flow: column;
  align-items: end;
  justify-content: center;
  column-gap: clamp(10px, 2.4vw, 22px);
  padding-top: 2px;
}

.tby-cal-cell{
  display: grid;
  justify-items: center;
  row-gap: 2px;
  min-width: 58px;
}

.tby-cal-num{
  font-family: "Cinzel", serif;
  font-weight: 700;
  color: #3B2413;                     /* marrón chocolate */
  font-size: clamp(28px, 5vw, 44px);  /* tamaño número */
  line-height: 1;
}

.tby-cal-lab{
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7a6858;                     /* topo claro */
  font-size: clamp(10px, 1.6vw, 12px);
  line-height: 1.1;
}

/* Separadores puntuales */
.tby-cal-sep{
  font-family: "Cinzel", serif;
  color: #b59d86;
  font-size: clamp(18px, 3.2vw, 22px);
  align-self: center;
}

/* ====== Móvil: solo días ====== */
.tby-cal-body--mobile{
  display: none;
  font-family: "Cinzel", serif;
  text-transform: uppercase;
  text-align: center;
  color: #3B2413;
}
.tby-cal-body--mobile span{
  display: block;
  font-size: clamp(34px, 8vw, 52px);
  font-weight: 600;
}
.tby-cal-body--mobile small{
  display: block;
  font-size: clamp(10px, 3vw, 14px);
  color: #7a6858;
  letter-spacing: .2em;
  margin-top: 2px;
}

/* ====== Responsive ====== */
@media (max-width: 576px){
  .tby-calendar{
    width: min(180px, 52vw);
    /* padding: 0 .7rem .3rem .7rem; */
  }

  /* En móvil ocultamos la grid y mostramos el bloque de "días" */
  .tby-cal-grid{ display: none; }
  .tby-cal-body--mobile{ display: grid; }


  .nos-intro .container-intro{
    width:  300px !important;
    margin-bottom: 0 !important;
  }
  #nosotros-intro.nos-intro {
    margin-top: 0 !important;
    background-image: url("../images/nosotros-mv.png");
    background-repeat: no-repeat;
    background-size: 130% !important;      /* móvil: presencia sin recortar */
    margin-bottom: 0 !important;
  }
}

/* ============================
   Calendario (TBY) — Layout coherente con el texto
   ============================ */

/* --- Base (móvil): centrado (texto + calendario) --- */
/* Nota: aquí mantenemos tu comportamiento actual de móvil */


/* --- Tablet y escritorio (≥576px): a la IZQUIERDA --- */
@media (min-width: 576px){
  /* Importante: anulamos el centrado por defecto */
  .tby-calendar{
    place-self: auto;            /* anula center del grid-self */
    margin-inline: 0;            /* quita auto-centro */
    margin-left: 0;              /* se apoya en el flujo del contenedor */
    text-align: left;
    width: min(340px, 78vw);     /* tu tamaño de desktop */
    padding: 0 1rem 1rem 1rem;   /* como definiste */
  }

  /* Como el contenedor de texto está a la izquierda, este bloque
     quedará alineado bajo los titulares dentro de .container-intro */
  .tby-cal-grid{ display: grid; }      /* en escritorio/tablet mostramos la grid D·H·M·S */
  .tby-cal-body--mobile{ display: none; }
}

/* --- Tablet (576–999): detalle de separación y ritmos --- */
@media (min-width: 576px) and (max-width: 999px){
  /* Ajustamos el ancho para que respire dentro de la caja de ~560–680px */
  .tby-calendar{
    width: min(300px, 60vw);
    margin-top: .8rem;
  }
  /* Un pequeño ajuste de tipografías para que no “griten” */
  .tby-cal-num{ font-size: clamp(24px, 4.2vw, 38px); }
  .tby-cal-lab{ font-size: clamp(10px, 1.8vw, 12px); }
}

/* --- Portátil (1000–1400): un pelín más de presencia --- */
@media (min-width: 1000px) and (max-width: 1400px){
  .tby-calendar{
    width: min(340px, 42vw);   /* algo más ancho si hay espacio */
    margin-top: 1rem;
  }
}

/* --- Desktop grande (≥1401): conserva proporción sin desbordar --- */
@media (min-width: 1401px){
  .tby-calendar{
    width: min(360px, 34vw);
  }
}


/* ============================================
   RECOMENDACIONES — Responsive completo
============================================ */

/* ----- SECCIÓN GENERAL ----- */
.tby-reco {
  background: #f2eddc;
  padding: clamp(50px, 8vw, 80px) 0;
  scroll-margin-top: 80px;
}

.tby-reco__wrap {
  width: min(1100px, 92%);
  margin: auto;
}

/* ----- TÍTULO ----- */
.tby-reco__title {
  font-family: "Kalam", serif;
  text-align: center;
  font-size: clamp(28px, 6vw, 60px);
  text-transform: uppercase;
  color: #4a2c17;
  margin-bottom: clamp(24px, 6vw, 40px);
  letter-spacing: .12em;
}

/* Contenedor */
.reco-tabs{
  display:flex; flex-wrap:wrap; gap:18px;
  justify-content:center; align-items:center;
  margin: clamp(16px,4vw,28px) 0;
}

/* Enlaces “tab” */
.reco-tab{
  position:relative;
  padding: 6px 2px;
  color:#4a2c17;
  font-weight: 400;
  text-decoration:none;
  font-family:"Kalam";
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size: clamp(13px, 1.8vw, 15px);
  opacity:.9; transition: color .2s ease, opacity .2s ease;
}

/* Subrayado elegante animado */
.reco-tab::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px;
  height:2px; background: linear-gradient(90deg,#836957,#4a2c17,#836957);
  transform: scaleX(0); transform-origin: center;
  transition: transform .28s ease;
}

/* Hover/activo */
.reco-tab:hover{ opacity:1; }
.reco-tab.is-active{ color:#3b2413; opacity:1; }
.reco-tab.is-active::after{ transform: scaleX(1); }

/* En móvil, centradas y más separadas */
@media (max-width:576px){
  .reco-tabs{ gap:12px; }
  .reco-tab{ letter-spacing:.12em; }
}


/* ============================================
   MAPA 100% RESPONSIVE
============================================ */

/* ===== Contenedor elegante y responsive ===== */
.map-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;             /* recorta barras y respeta el radio */
  border-radius: 18px;          /* esquinas monas */
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  background: #ddd;

  /* MÓVIL (más alto) */
  aspect-ratio: 4 / 5;
  min-height: 300px;
  margin-bottom: 40px;

  /* Recortes (ajustables) */
  --cut-top: 40px;              /* oculta barra superior */
  --cut-bottom: 34px;           /* oculta barra inferior */
}

/* Iframe ocupa todo el contenedor y se recorta por top/bottom */
.map-wrapper iframe {
  position: absolute;
  left: 0;
  width: 100%;
  border: none;
  border-radius: inherit;
  top: calc(-1 * var(--cut-top));
  height: calc(100% + var(--cut-top) + var(--cut-bottom));
}

/* ===== Tablet (más panorámico que móvil) ===== */
@media (min-width: 577px) and (max-width: 991px) {
  .map-wrapper {
    aspect-ratio: 16 / 10;      /* 1.6:1 */
    min-height: 360px;
    --cut-top: 44px;
    --cut-bottom: 36px;
  }
}

/* ===== Desktop “normal” ===== */
@media (min-width: 992px) and (max-width: 1399px) {
  .map-wrapper {
    aspect-ratio: 3 / 2;        /* 1.5:1 */
    min-height: 420px;
    border-radius: 16px;        /* un pelín menos redondo en grande */
    --cut-top: 48px;
    --cut-bottom: 38px;
  }
}

/* ===== NUEVO: Desktop ancho (≥1400px) → “menos largo” =====
   — Hacemos el mapa más panorámico para que no quede alto en exceso.
   — Puedes probar 16/9 si lo quieres más bajito todavía. */
@media (min-width: 1400px) {
  .map-wrapper {
    aspect-ratio: 16 / 9;       /* 1.78:1, más bajo */
    min-height: 400px;          /* conserva una altura cómoda mínima */
    --cut-top: 50px;            /* barras algo mayores en anchos altos */
    --cut-bottom: 40px;
  }
}

/* ===== Fallback si el navegador no soporta aspect-ratio ===== */
@supports not (aspect-ratio: 1 / 1) {
  .map-wrapper { height: auto; }
  .map-wrapper::before {
    content: "";
    display: block;
    padding-top: 125%;          /* ≈ 4:5 móvil */
  }
  @media (min-width: 577px) and (max-width: 991px) {
    .map-wrapper::before { padding-top: 62.5%; } /* 16:10 */
  }
  @media (min-width: 992px) and (max-width: 1399px) {
    .map-wrapper::before { padding-top: 66.6667%; } /* 3:2 */
  }
  @media (min-width: 1400px) {
    .map-wrapper::before { padding-top: 56.25%; }   /* 16:9 */
  }
  .map-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: calc(100% + var(--cut-top) + var(--cut-bottom));
    top: calc(-1 * var(--cut-top));
  }
}


/* ==========================================
   PROGRAMA — Título estilo “Nos casamos”
   ========================================== */

#programa .prog-nobox__title {
  font-family: "Kalam", cursive; /* igual que ¡Nos casamos! */
  font-weight: 530;              /* más fino, menos “gritón” */
  text-transform: uppercase;
  letter-spacing: 0.14em;        /* elegante, más aire */
  font-size: clamp(28px, 6vw, 44px);  
  color: #4a2c17 !important;     /* marrón cálido */
  text-align: center;

  /* Sombra elegante y no dura */
  text-shadow: 
     0 2px 6px rgba(255, 255, 255, 0.45),
     0 1px 3px rgba(0,0,0,0.18);

  margin-bottom: clamp(24px, 6vw, 46px);
  margin-top: clamp(10px, 4vw, 24px);

  /* Quitamos cualquier degradado anterior */
  background: none !important;
  -webkit-background-clip: initial !important;
}

/* ==========================================================
   PROGRAMA — Borde rectangular oscuro (móvil + desktop)
   - Sin cambiar el HTML
   - Móvil: borde del 5% (como pediste)
   - Desktop/Tablet: borde fijo (ajustable) para aspecto editorial
========================================================== */

:root{
  --prog-border-dark: #3B2413; /* color del borde oscuro */
  --prog-inner-beige: #f2eddc; /* beige interior (tu color base) */

  /* Desktop/Tablet: define el borde como margen fijo a cada lado */
  --prog-desktop-border-x: 0px; /* borde lateral (izq/der) en desktop */
  --prog-desktop-border-y: 0px; /* borde superior/inferior en desktop */
}

/* ========== MÓVIL (≤ 800px): borde del 5% ========== */
@media (max-width: 800px){
  #programa.prog-nobox{
    background: var(--prog-border-dark) !important;
    position: relative;
  }
  /* El panel beige interior queda “enmarcado” por el 5% oscuro */
  #programa .prog-nobox__wrap{
    background: var(--prog-inner-beige);
    margin: 5% auto;     /* ← crea el borde del 5% alrededor */
    width: 85%;          /* 100% - (5% + 5%) */
    padding: clamp(14px, 4.5vw, 22px);
    border-radius: 0;    /* rectangular */
    box-shadow: none;
    position: relative;
    z-index: 1;
  }
  /* Normalizamos interiores para que no rompan el rectángulo */
  #programa .prog-nobox__title{
    margin: 0 0 clamp(12px, 3.5vw, 18px) 0;
    background: none !important;
    color: inherit !important;
  }
  #programa .prog-nobox__list{
    margin: 0; padding: 0;
    background: transparent !important;
    border: none !important; box-shadow: none !important;
    grid-auto-rows: auto;
  }
  /* Por si quedaron pseudo-elementos de intentos anteriores */
  #programa.prog-nobox::before,
  #programa .prog-nobox__wrap::before{ content: none !important; }
}


/* ==========================================================
   PROGRAMA — Fondos de imagen SOLO en desktop
   Móvil NO tiene imagen de fondo
========================================================== */

/* ===== MÓVIL (≤ 800px): sin imagen ===== */
@media (max-width: 800px){
  #programa.prog-nobox{
    background-image: none !important;
    background-color: #3B2413 !important; /* tu borde oscuro móvil */
  }
}

/* ===== DESKTOP PEQUEÑO (801px – 1100px) ===== */
@media (min-width: 576px) and (max-width:700px){
  #programa.prog-nobox{
    background-image: url("../images/fondo_programa_peque.png"); /* ← imagen 1 */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #3B2413;
  }
}

/* ===== DESKTOP MEDIANO (1101px – 1500px) ===== */
@media (min-width: 1260px) and (max-width: 1599px) {
  #programa.prog-nobox{
    background-image: url("../images/fondo_programa_peque.png"); /* ← imagen 2 */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #3B2413;
   
  }
}

/* ===== DESKTOP MEDIANO (1101px – 1500px) ===== */
@media (min-width: 1600px) and (max-width: 2300px) {
  #programa.prog-nobox{
    background-image: url("../images/fondo_programa_medio.png"); /* ← imagen 2 */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #3B2413;
   
  }
}


/* ===== DESKTOP MEDIANO (1101px – 1500px) ===== */
@media (min-width: 2301px) {
  #programa.prog-nobox{
    background-image: url("../images/fondo_programa.png"); /* ← imagen 2 */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #3B2413;
  }
}


/* ==========================================================
   NOSOTROS — MÓVIL: efecto elegante on-scroll desde la izquierda
   - No mueve la imagen de fondo
   - Solo anima el contenido (container-intro)
========================================================== */
@media (max-width: 800px){

  /* Estado inicial (oculto y desplazado a la izquierda) */
  #nosotros-intro .container-intro,
  #nosotros .container-intro{
    opacity: 0;
    transform: translateX(-22px);
    transition:
      opacity 0.95s ease-out,
      transform 1.05s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
  }

  /* Al entrar en viewport → aparece suave desde la izquierda */
  #nosotros-intro.is-in .container-intro,
  #nosotros.is-in .container-intro{
    opacity: 1;
    transform: translateX(0);
  }
}

/* Accesibilidad: sin animaciones si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  #nosotros-intro .container-intro,
  #nosotros .container-intro{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}



/* ==========================================================
   REVEAL GENÉRICO (para Programa y Nosotros)
   - Solo opacity + transform (sin filter/blur)
   - Variables para controlar tiempos
========================================================== */
:root{
  --rev-ease: cubic-bezier(.22,.61,.36,1);
  --rev-move: 18px;         /* desplazamiento inicial */
  --rev-dur: 0.90s;         /* duración por defecto (desktop) */
  --rev-dur-op: 0.80s;      /* opacidad por defecto */
}

/* Móvil: más lento como te gusta */
@media (max-width: 800px){
  :root{
    --rev-move: 16px;
    --rev-dur: 1.10s;
    --rev-dur-op: 1.00s;
  }
}

/* Estado inicial (oculto) */
.reveal {
  opacity: 0;
  transform: translateY(var(--rev-move));
  will-change: opacity, transform;
  transition:
    opacity var(--rev-dur-op) ease-out var(--delay, 0ms),
    transform var(--rev-dur) var(--rev-ease) var(--delay, 0ms);
}

/* Visible (al entrar en viewport) */
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================
   PROGRAMA — aplica reveal vertical en items y rayas
========================================================== */
#programa .prog-nobox__list > * {
  /* nada: el JS añadirá .reveal a cada <li> item/stripe */
}

/* ==========================================================
   NOSOTROS — solo DESKTOP: desde la izquierda
   (en móvil no tocamos tu entrada actual)
========================================================== */
@media (min-width: 801px){
  /* marca estos elementos con .nos-anim en tu HTML si no lo hiciste ya */
  .nos-anim {
    opacity: 0;
    transform: translateX(-26px);
    will-change: opacity, transform;
    transition:
      opacity 0.90s ease-out var(--delay, 0ms),
      transform 1.00s var(--rev-ease) var(--delay, 0ms);
  }
  .nos-anim.is-in {
    opacity: 1;
    transform: none;
  }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.is-visible,
  .nos-anim, .nos-anim.is-in {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}