/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@400;600;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Tomorrow:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;600;700&display=swap');

/*=============== VARIABLES CSS (NEDIMI + NAVIDAD) ===============*/
:root{
  --header-height: 3.75rem;

  --white-color: hsl(0 0% 100%);
  --black-color: hsl(228 14% 12%);

  --color-2:#4fc6a7;
  --color-3:#3381DF;
  --color-4:#7781bd;
  --color-5:rgb(0,64,86);
  --color-6:#136F5F;
  --color-7:#050335;
  --color-8:#0E1124;
  --color-9:#4fc6a7;

  --ned-red:#8a1010;
  --ned-red-dark:#8a1010;

  --body-font:"Rubik",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  --logo-font:"Tomorrow",sans-serif;
  --heading-font:"Montserrat Alternates",sans-serif;

  --biggest-font-size: clamp(2.25rem, 5vw + 1rem, 4.75rem);
  --big-font-size: clamp(1rem, 1.2vw + .8rem, 1.5rem);
  --normal-font-size:.95rem;

  --z-fixed: 1000;
}

/*=============== BASE ===============*/
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--white-color);
  background:var(--black-color);
  font-family:var(--body-font);
  line-height:1.5;
}

html{
    scroll-behavior: smooth;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1120px,92%);margin-inline:auto}

/*=============== HEADER ===============*/
.header{
  position:fixed;
  inset-inline:0;
  top:0;
  z-index:var(--z-fixed);
  height:calc(var(--header-height) + 0.5rem); /* + espacio superior */
  display:flex;
  align-items:center;
  background:transparent; /* transparente al inicio */
  transition:background-color .25s ease, box-shadow .25s ease;
}
.header.scrolled{
  background:var(--ned-red); /* rojo al hacer scroll */
  box-shadow:0 4px 14px rgba(0,0,0,.15);
}

/* Más espacio a los costados */
.nav-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  width:100%;
  padding-inline:clamp(1.5rem, 10vw, 7rem);
}

.logo img{height:36px;width:auto}

/* Nav desktop */
.nav{display:flex}
.nav__list{
  display:flex;
  align-items:center;
  gap:1.25rem;
  margin:0;
  padding:0;
  list-style:none;
}
.nav__link{
  font-weight:600;
  letter-spacing:.2px;
  padding:.35rem .55rem;
  border-radius:999px;
  transition:background .2s ease, opacity .2s ease;
  opacity:.95;
}
.nav__link:hover{background:rgba(255,255,255,.12)}
.nav__link.active{outline:none;box-shadow:none}

/* Toggle (hamburguesa → tache) */
.nav-toggle{
  display:none;
  background:transparent;
  border:0;
  cursor:pointer;
  padding:.35rem;
  width:44px;
  height:44px;
  border-radius:10px;
  position:relative;
  z-index: 1200; /* por encima del drawer móvil */
}
.nav-toggle .line{
  display:block;
  height:2px;
  width:22px;
  background:#fff;
  margin:5px auto;
  transition:transform .3s ease,opacity .3s ease;
}
.nav-toggle.active .line:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.active .line:nth-child(2){opacity:0}
.nav-toggle.active .line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/*=============== HERO ===============*/
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding-top:calc(var(--header-height) + 2rem);
  isolation:isolate;
}

/* Fondo sin animación (zoom desactivado) */
.hero__bg{
  position:absolute;
  inset:0;
  z-index:-3;
  background:
    linear-gradient(180deg, rgba(227,50,32,.75), rgba(227,50,32,.55) 35%, rgba(5,3,53,.9) 95%),
    url("../img/fondo-inicio.jpg") center/cover no-repeat;
  transform:none;
  animation:none;
}

.hero__overlay{
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(1100px 55% at 50% -10%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(800px 40% at 20% 0%, rgba(255,255,255,.08), transparent 60%);
}

/* Nieve desactivada (máximo rendimiento) */
.snow, .snow--a, .snow--b{display:none !important}

/* Texto hero */
.hero__content{text-align:center}
.hero__date{
  font:600 .95rem var(--body-font);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.9);
  margin-bottom:.5rem;
}
.hero__title{
  font:700 var(--biggest-font-size) var(--heading-font);
  line-height:1.12;
  letter-spacing:.01em;
  margin:0 0 1.25rem;
  text-shadow:0 6px 30px rgba(0,0,0,.35);
}

/* Countdown */
.countdown{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.75rem;
  margin:1.25rem auto 1.75rem;
}
.countdown__item{
  min-width:86px;
  padding:.65rem .75rem;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);
  border-radius:16px;
}
.countdown__num{
  display:block;
  font:700 2rem var(--heading-font);
}
.countdown__label{
  display:block;
  font:600 .7rem var(--body-font);
  opacity:.9;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.countdown__sep{
  font:700 1.8rem var(--heading-font);
  opacity:.8;
}

/*=============== BOTONES ===============*/
.btn{
  display:inline-block;
  padding:.9rem 1.4rem;
  border-radius:12px; /* menos redondeados */
  font:700 .95rem var(--body-font);
  letter-spacing:.02em;
  transition:transform .15s ease, background .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn--primary{
  background:var(--ned-red);
  color:#fff;
  box-shadow:0 8px 24px rgba(227,50,32,.28);
}
.btn--primary:hover{background:var(--ned-red-dark)}
.btn--ghost{
  border:2px solid rgba(255,255,255,.85);
  color:#fff;
  background:transparent;
  margin-right:.5rem;
}
.btn--ghost:hover{background:rgba(255,255,255,.14)}
.hero__cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.75rem;
}

/*=============== NAV MOBILE: Drawer izquierdo ===============*/
@media (max-width: 990px){
  .nav-toggle{display:block}

  /* Panel lateral */
  .nav{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    width:min(86%, 360px);
    background:rgba(0,0,0,.88);
    transform:translateX(-100%);
    transition:transform .28s ease-out;
    opacity:1; visibility:visible;
    box-shadow: 6px 0 24px rgba(0,0,0,.35);
    padding-top:calc(var(--header-height) + 0.5rem);
    z-index: 1100; /* debajo del toggle, encima del contenido */
  }
  .nav.open{ transform:translateX(0); }

  .nav__list{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding-block:.5rem 1rem;
  }
  /* Más espacio entre items del menú */
  .nav__link{
    display:block;
    padding:1.15rem 1.25rem;
    border-bottom:1px solid rgba(255,255,255,.08);
    font-size:1rem;
  }
}

/*=============== MOBILE ADJUSTMENTS ===============*/
@media (max-width: 640px){
  .hero__title{
    font-size:clamp(2.2rem, 7vw + 1rem, 3.2rem); /* más grande en móvil */
    line-height:1.1;
  }
  .countdown{gap:.45rem}
  .countdown__item{min-width:70px;padding:.55rem .6rem}
  .countdown__num{font-size:1.6rem}
}

/* ========== ABOUT / ACERCA DEL EVENTO (versión final responsive y limpia) ========== */
.about {
  background:#fff;
  color:#111;
  margin:0;
  padding:0;
}

.about__container{
  width:min(1120px,92%);
  margin-inline:auto;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:stretch;
  gap:clamp(1.25rem,3vw,2.25rem);
  padding:0;
}

/* Imagen izquierda — completamente pegada arriba y abajo */
.about__media{
  margin:0; padding:0;
  align-self:stretch;
  overflow:hidden;
  border-radius:0; box-shadow:none;
  display:flex; align-items:stretch;
}
.about__media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center bottom;
  margin:0; padding:0; vertical-align:bottom;
}

/* Contenido derecho */
.about__content{
  align-self:center;
  padding-inline:clamp(.25rem,2vw,1rem);
  padding-block:clamp(3rem,6vw,5rem);
}

.about__title{
  font:800 clamp(1.8rem,2.5vw + 1rem,2.5rem) var(--heading-font);
  letter-spacing:.3px;
  color:#111;
  margin:0 0 .5rem;
  text-transform:uppercase;
}

.about__divider{
  display:block;
  width:72px; height:4px; border-radius:2px;
  background:var(--ned-red);
  margin:.25rem 0 1rem;
}

.about__text{
  font-size:clamp(.95rem,.35vw + .85rem,1rem);
  color:#222;
  margin:0 0 1.25rem;
  line-height:1.65;
  text-align: justify;
}

/* Datos del evento */
.about__facts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem 1.25rem;
  list-style:none; margin:0; padding:0;
}
.about__fact{
  display:flex; align-items:flex-start; gap:.9rem;
  padding:.35rem 0;
  background:transparent;
  border:none;
}
.about__fact i{
  font-size:1.9rem;
  color:var(--ned-red);
  line-height:1;
  margin-top:.05rem;
}
.about__fact-title{
  display:block;
  font-weight:800;
  font-size:1.05rem;
  color:#111;
}
.about__fact-sub{
  display:block;
  font-size:.92rem;
  color:#444;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 990px){
  .about__container{
    grid-template-columns:1fr;
    padding-block:clamp(2.5rem,5vw,4rem);
  }
}

/* ---- Versión móvil ---- */
@media (max-width:640px){
  /* Más espacio arriba */
  .about__container{
    padding-top:2rem;
  }

  /* Imagen no cortada */
  .about__media{
    height:auto;
  }
  .about__media img{
    height:auto;
    object-fit:contain; /* asegura que se vea completa */
  }

  /* Título más pequeño y centrado */
  .about__title{
    font-size:clamp(1.5rem,5.5vw,1.9rem);
    text-align:center;
  }

  /* Línea roja centrada */
  .about__divider{
    margin-inline:auto;
  }

  /* Texto justificado */
  .about__text{
    text-align:justify;
  }

  /* Ítems alineados a la izquierda */
  .about__facts{
    grid-template-columns:1fr;
    gap:.9rem;
    justify-items:start;
  }
  .about__fact{
    justify-content:flex-start;
    text-align:left;
  }
}

/* === Animaciones on-scroll para la sección ABOUT === */
/* Estado inicial (invisible) */
#acerca [data-animate]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s ease, transform .6s ease;
  will-change:opacity, transform;
}
#acerca [data-animate="left"]{ transform:translateX(-24px); }
#acerca [data-animate="right"]{ transform:translateX(24px); }
#acerca [data-animate="bar"]{
  transform:scaleX(0);
  transform-origin:left;
}

/* Al entrar en viewport */
#acerca .on-view{
  opacity:1;
  transform:none;
}

/* Stagger para los facts */
#acerca .about__fact[data-animate]{
  transition-delay:calc(var(--i, 0) * 90ms);
}

/* Divider (línea roja) animada */
#acerca .about__divider[data-animate].on-view{
  transform:scaleX(1);
  transition:transform .55s ease;
}

/* Accesibilidad: sin animaciones si reduce motion */
@media (prefers-reduced-motion: reduce){
  #acerca [data-animate]{opacity:1 !important; transform:none !important; transition:none !important;}
}


/* ========== SCHEDULE / AGENDA (con fondo azul con imagen borrosa) ========== */
.schedule{
  position: relative;
  overflow: hidden;
  color:#fff;
  padding-block: clamp(3rem, 6vw, 5rem);
  z-index: 1;
}

/* Fondo con imagen borrosa tipo hero */
.schedule::before{
  content: "";
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(to bottom, rgba(10, 13, 28, 0.75), rgba(10, 13, 28, 0.85)), /* antes era 0.9 y 0.95 */
    url("../img/fondo-inicio.jpg") center/cover no-repeat;
  filter: blur(6px) brightness(0.9); /* antes blur(8px) brightness(0.85) */
  transform: scale(1.05);
  z-index: -1;
}


/* Contenedor principal */
.schedule__wrap{
  width:min(1120px,92%);
  margin-inline:auto;
  display:grid;
  grid-template-columns: 1fr;
  row-gap: clamp(1rem, 2vw, 1.5rem);
  position: relative;
  z-index: 2;
}

/* Título centrado y grande */
.schedule__side{
  grid-column: 1 / -1;
  display:flex; justify-content:center; align-items:center;
  margin-bottom: .5rem;
}
.schedule__label{
  writing-mode: horizontal-tb;
  transform: none;
  text-align:center;
  display:block;
  font: 800 clamp(1.7rem, 2.8vw, 2.6rem) var(--heading-font);
  letter-spacing: .25em;
  text-transform:uppercase;
  opacity:.98;
}

/* Lista centrada */
.schedule__list{
  width: min(900px, 100%);
  margin-inline: auto;
  display:flex;
  flex-direction:column;
  gap: 1rem;
}

/* Tarjeta de agenda */
.slot{
  display:grid;
  grid-template-columns: 86px 1fr;
  align-items:center;
  gap: 1rem;
  background: rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  padding:.9rem 1.1rem;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

/* Fecha roja */
.slot__date{
  background: var(--ned-red);
  color:#fff;
  border-radius:12px;
  width:86px; height:86px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  line-height:1;
  box-shadow:0 10px 24px rgba(227,50,32,.25);
  transition: transform .25s ease, box-shadow .25s ease;
}
.slot__day{ font:800 1.8rem var(--heading-font); letter-spacing:.02em }
.slot__mon{ font:800 .9rem var(--heading-font); opacity:.95 }

/* Información */
.slot__title{
  margin:0 0 .15rem;
  font:800 clamp(1rem, .6vw + .9rem, 1.2rem) var(--heading-font);
  letter-spacing:.3px;
}
.slot__meta{
  margin:0;
  font:700 .85rem var(--body-font);
  text-transform:uppercase;
  letter-spacing:.12em;
  opacity:.9;
}

/* Hover animado */
.slot:hover,
.slot:focus-within{
  transform: translateY(-4px);
  background-color: rgba(255,255,255,.12);
  box-shadow: 0 16px 32px rgba(0,0,0,.25);
}
.slot:hover .slot__date,
.slot:focus-within .slot__date{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(227,50,32,.4);
}

/* Animación al aparecer con IntersectionObserver */
#agenda .slot{ opacity:0; transform:translateY(14px); }
#agenda .slot.on-view{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease }
#agenda .slot{ transition-delay: calc(var(--i,0) * 80ms) }

@media (prefers-reduced-motion: reduce){
  .slot, .slot__date{ transition:none }
  #agenda .slot{ opacity:1; transform:none }
}

/* ====== Responsive ====== */
@media (max-width: 990px){
  .schedule__list{ width:100% }
}

@media (max-width: 640px){
  .schedule__label{
    font-size: clamp(1.7rem, 6vw, 2.2rem);
    letter-spacing:.22em;
  }
  .slot{
    grid-template-columns: 76px 1fr;
    padding:.75rem .9rem;
  }
  .slot__date{ width:76px; height:76px; border-radius:12px }
  .slot__day{ font-size:1.6rem }
  .slot__mon{ font-size:.85rem }
  .schedule__list{ gap:.8rem }
}

/* ==========================================================
   SECCIÓN: SORTEO NAVIDEÑO – Nota con clip realista (fondo rojo)
   Incluye: borde punteado, clip que atraviesa esquina, chips de fecha,
            chips de libros, botón más grande en desktop, fixes responsive.
   ========================================================== */

.note-raffle{
  --bg-red: #8a1010;
  --paper:  #F7EDE3;
  --ink:    #5a2323;
  --clip-shadow: rgba(0,0,0,.22);

  background:
    radial-gradient(900px 40% at 12% 10%, rgba(255,255,255,.08), transparent 60%),
    var(--bg-red);
  padding-block: clamp(3.5rem, 7vw, 5.8rem);
  display:grid; place-items:center;

  /* Evita overflow horizontal por el clip en móviles */
  overflow-x: hidden;
}

.note__wrap{
  width:min(720px, 92%);
  margin-inline:auto;
}

/* ---------------- Tarjeta principal ---------------- */
.note{
  position:relative;
  z-index:1;
  display:block;
  background: var(--paper);
  color: var(--ink);
  border-radius: 22px;

  /* Aire interno (entre texto y punteado) */
  padding: clamp(3rem, 5vw, 3.6rem) clamp(1.8rem, 3vw, 2.2rem);

  box-shadow: 0 22px 56px rgba(0,0,0,.25);
  transition: transform .25s ease, box-shadow .25s ease;

  /* Permitimos que el clip sobresalga */
  max-width:100%;
  overflow:visible;
}

/* Borde punteado pegado al borde exterior */
.note::before{
  content:"";
  position:absolute;
  inset: 12px;                     /* pegado al borde exterior */
  border-radius: 18px;
  border: 2px dashed #d7b7a0;
  pointer-events:none;
}

.note:hover{
  transform: translateY(-3px);
  box-shadow: 0 28px 70px rgba(0,0,0,.28);
}

/* ---------------- Clip realista atravesando esquina ---------------- */
.note__clip{
  position:absolute;
  width: 92px; height: 148px;      /* tamaño grande desktop */
  right: -8px; top: -34px;
  transform: rotate(22deg);
  pointer-events:none;
}
.note__clip .clip-svg{
  width:100%; height:100%;
  filter: drop-shadow(0 6px 10px var(--clip-shadow));
}
/* Capa trasera: debajo de la tarjeta */
.note__clip--back{ z-index: 0; }
/* Capa delantera: encima de la tarjeta */
.note__clip--front{ z-index: 3; }

/* ---------------- Contenido ---------------- */
.note__header{
  display:flex; justify-content:center; margin-bottom:.45rem;
}
.note__badge{
  font: 700 .82rem "Rubik", sans-serif;
  letter-spacing:.22em;
  color:#8b5b2e;
}

.note__title{
  margin:.25rem 0 .75rem;
  font: 900 clamp(1.7rem, 1.2vw + 1.6rem, 2.4rem) "Montserrat Alternates", sans-serif;
  text-align:center; color:#6a2020;
}

.note__text{
  margin:0 0 1.15rem;
  line-height:1.65;
  font-size: clamp(1rem, .45vw + .96rem, 1.12rem);
  color:#5a2323;
  text-align:center;
}

/* Chips de fecha / formato */
.note__date{
  display:flex; flex-wrap:wrap; gap:.5rem .6rem;
  justify-content:center; margin-bottom:1.1rem;
}
.note__chip{
  border:2px solid #E2CFAF; background:#FBF6EE; color:#6a2f2f;
  padding:.45rem .85rem; border-radius:11px; font-weight:800;
}
.note__chip--day{
  /* chiquito también en desktop */
  font-size: clamp(1.05rem, 0.7vw + 0.95rem, 1.25rem);
  line-height:1;
  padding:.4rem .75rem;
}

/* --------- NUEVO: chips de libros (los 2 títulos) --------- */
.note__books{
  display:flex; flex-wrap:wrap; gap:.5rem .6rem;
  justify-content:center; margin:-.25rem 0 1.1rem;
}
.book__chip{
  border:2px solid #E2CFAF;
  background:#FFF9F1;
  color:#6a2f2f;
  padding:.42rem .75rem;
  border-radius:10px;
  font-weight:800;
  font-size:.92rem;
  white-space:nowrap;
}

/* Botón CTA */
.note__actions{ display:flex; justify-content:center; margin-top:.25rem; }
.btn-cta{
  width:auto; min-width:230px;
  padding:1rem 1.35rem;
  border-radius:14px;
  background: var(--ned-red, #E33220);
  color:#fff; font-weight:800;
  border:2px solid rgba(255,255,255,.25);
  box-shadow: 0 12px 26px rgba(227,50,32,.28);
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-cta:hover{ transform: translateY(-2px); box-shadow:0 16px 32px rgba(227,50,32,.38); filter:brightness(1.05) }
.btn-cta:active{ transform:none; box-shadow:0 10px 20px rgba(0,0,0,.16) }

/* Botón más grande en escritorio */
@media (min-width: 992px){
  .btn-cta{
    font-size: 1.08rem;
    padding: 1.05rem 1.6rem;
    min-width: 260px;
  }
}

/* Texto legal */
.note__legal{
  margin:1.1rem 0 0;
  font-size:.92rem; color:#6a2f2f;
  text-align:center;
}

/* ---------------- Responsive móvil ---------------- */
@media (max-width:640px){
  .note{
    padding: 2.8rem 1.3rem;                 /* más aire también en móvil */
  }
  .note__text{ font-size:.92rem; text-align:justify; }
  .note__legal{ font-size:.85rem; text-align:justify; }

  /* Clip más pequeño y menos fuera del borde para evitar overflow */
  .note__clip{
    right: -10px; top: -28px;
    width: 70px; height: 115px;
  }

  /* Día aún más discreto en móvil */
  .note__chip--day{
    font-size: 1.0rem;
    padding:.38rem .7rem;
  }

  /* Botón más notorio en móvil */
  .btn-cta{
    font-size: 1.05rem;
    padding: 1rem 1.4rem;
  }
}

/* ============= CONTACTO con fondo navideño oscuro ============= */
.contact{
  --bg-dark: #0a0d1c;
  --mask: rgba(10,13,28,.75);
  --mask2: rgba(227,50,32,.28);             /* rojo navideño suave */
  --paper: #0f1328;
  --line:  rgba(255,255,255,.14);
  --text:  rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.7);
  --accent: var(--ned-red, #E33220);
  position: relative;
  color: var(--text);
  overflow: hidden;
}

/* Fondo con imagen + capa oscura navideña */
.contact::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, var(--mask) 0%, rgba(10,13,28,.85) 60%, rgba(10,13,28,.94) 100%),
    radial-gradient(1200px 60% at 85% 10%, var(--mask2), transparent 60%),
    url("../img/contact-navidad.jpg") center/cover no-repeat;
  filter: saturate(1.05) contrast(1.05);
  z-index:-1;
}

/* Layout principal */
.contact__wrap{
  width:min(1200px, 94%);
  margin-inline:auto;
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(2rem, 6vw, 4rem);
}

/* Intro izquierda */
.contact__title{
  font: 900 clamp(2rem, 2.2vw + 1.2rem, 3rem) "Montserrat Alternates", system-ui, sans-serif;
  margin: 0 0 .35rem;
}
.contact__subtitle{
  margin:0;
  color: var(--muted);
  font-size: clamp(1rem, .4vw + .95rem, 1.1rem);
}

/* Tarjeta del formulario */
.contact__card{
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  padding: clamp(1rem, 2.5vw, 1.6rem);
}

.contact__form{
  display:grid;
  gap: 1rem;
}

.field{ display:grid; gap:.45rem; }
.field label{
  font-weight:700;
  font-size:.92rem;
  color: var(--muted);
}
.field input{
  width:100%;
  background: rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.15);
  border-radius:12px;
  padding:.9rem 1rem;
  color:#fff;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.field input::placeholder{ color: rgba(255,255,255,.55); }
.field input:focus{
  border-color: rgba(227,50,32,.6);
  box-shadow: 0 0 0 3px rgba(227,50,32,.18);
  background: rgba(255,255,255,.09);
}

/* Nota anti-spam */
.contact__note{
  margin:.25rem 0 0;
  color: rgba(255,255,255,.78);
  font-size:.9rem;
}

/* Botón enviar */
.btn-send{
  margin-top:.3rem;
  display:inline-flex; align-items:center; gap:.6rem;
  border:none; cursor:pointer;
  padding:1rem 1.4rem;
  border-radius:12px;
  background: var(--accent);
  color:#fff; font-weight:900;
  letter-spacing:.02em;
  box-shadow: 0 14px 28px rgba(227,50,32,.3);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  width: fit-content;
}
.btn-send:hover{ transform: translateY(-2px); box-shadow: 0 18px 36px rgba(227,50,32,.4); filter: brightness(1.04) }
.btn-send:active{ transform:none; box-shadow: 0 10px 22px rgba(0,0,0,.25) }

/* Barra inferior: redes y legales */
.contact__bottom{
  border-top: 1px solid var(--line);
  padding: clamp(1.2rem, 3vw, 1.6rem) 0 clamp(2rem, 5vw, 2.4rem);
  width:min(1200px, 94%);
  margin-inline:auto;
  display:flex; gap:1rem; align-items:center; justify-content:space-between;
}
.contact__social{
  display:flex; gap:.7rem; align-items:center;
}
.contact__social a{
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:#fff; font-size:1.08rem;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.contact__social a:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.28);
}
.contact__terms{
  color: var(--muted);
  text-decoration:none;
  border-bottom: 1px dashed rgba(255,255,255,.35);
  padding-bottom:2px;
  transition: color .15s ease, border-color .15s ease;
}
.contact__terms:hover{
  color:#fff;
  border-color:#fff;
}

/* --------- Responsive --------- */
@media (max-width: 992px){
  .contact__wrap{
    grid-template-columns: 1fr;
    text-align:center;
  }
  .contact__card{ margin-inline:auto; width:min(640px, 100%); }
}

@media (max-width: 560px){
  .contact__bottom{
    flex-direction: column;
    gap: .9rem;
  }
}

/* ——— Toques de conversión ——— */
.benefits{
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .55rem;
  color: var(--muted);
  font-size: clamp(.95rem, .35vw + .9rem, 1rem);
}
.benefits li{
  display: flex; align-items: flex-start; gap: .5rem;
}
.benefits i{
  color: var(--accent);
  font-size: 1.1rem; line-height: 1.2;
  margin-top: .1rem;
}

.contact__note{
  margin:.15rem 0 .25rem;
  color: rgba(255,255,255,.9);
  font-weight: 600;
}

.contact__micro{
  margin:.6rem 0 0;
  font-size:.85rem;
  color: rgba(255,255,255,.78);
}

/* Desktop: botón un poco más grande para foco en acción */
@media (min-width: 992px){
  .btn-send{
    font-size: 1.06rem;
    padding: 1.05rem 1.6rem;
  }
}

/* Mobile: letra clara y jerarquía compacta para convertir mejor */
@media (max-width: 560px){
  .benefits{ font-size: .95rem; }
  .contact__note{ font-size: .9rem; }
  .contact__micro{ font-size: .8rem; text-align: justify; }
}

@media (max-width: 640px){

  /* Campos en columna */
  .contact__form .field{
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* etiqueta alineada a la izquierda */
    gap: .35rem;
  }

  /* Etiquetas encima del input */
  .contact__form .field label{
    width: 100%;
    text-align: left;
    font-size: .9rem;
    font-weight: 600;
    color: rgba(255,255,255,.92);
    margin-bottom: .15rem;
  }

  /* Input ocupa todo el ancho */
  .contact__form .field input{
    width: 100%;
    font-size: .95rem;
    padding: .85rem 1rem;
    border-radius: 10px;
  }

  /* Botón centrado */
  .contact__form .btn-send{
    display: block;
    margin: 1.2rem auto 0;
    font-size: 1.1rem;
    padding: 1rem 1.6rem;
    text-align: center;
  }

  /* Ajustes visuales finos */
  .contact__note,
  .contact__micro{
    text-align: justify;
  }

  .benefits{
    text-align: left;
    margin-left: .4rem;
  }
}

/* =========================
   SECCIÓN POR QUÉ ASISTIR
   ========================= */
.why {
  background-color: #fff;
  padding: 60px 20px; /* 🔹 Menos espacio arriba y abajo */
  text-align: center;
}

.why__wrap {
  max-width: 1050px;
  margin: 0 auto;
}

.why__heading {
  font-family: "Montserrat Alternates", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 2vw + 1rem, 2.5rem);
  color: #111;
  margin-bottom: 2.4rem; /* 🔹 Menos margen */
  line-height: 1.2;
}

.why__accent {
  color: #E33220;
  display: block;
  margin-top: 0.25rem;
}

.why__list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  max-width: 850px;
  margin-inline: auto;
}

.why__item {
  display: flex;
  align-items: center; /* 🔹 Alinea número con texto */
  gap: 0.8rem;
  margin-bottom: 1rem; /* 🔹 Mucho menos espacio entre filas */
}

.why__num {
  color: #E33220;
  font-weight: 700;
  font-size: 1.25rem;
  min-width: 2rem;
  line-height: 1;
  margin-top: 0.1rem;
}

.why__text {
  color: #222;
  font-size: 1rem;
  line-height: 1.25; /* 🔹 Más compacto */
  margin: 0;
}

.why__footer {
  text-align: center;
  margin-top: 1.8rem; /* 🔹 Más cerca del texto */
}

.why__phrase {
  font-weight: 800;
  color: #111;
  font-size: 1rem;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.why__cta {
  display: inline-block;
  background-color: #E33220;
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  padding: 0.6rem 1.3rem;
  border-radius: 5px;
  letter-spacing: 0.3px;
  font-size: 1.2rem;
  transition: all 0.3s ease;
}

.why__cta:hover {
  transform: scale(1.05);
  background-color: #c32818;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .why {
    padding: 40px 16px;
  }

  .why__heading {
    font-size: 1.6rem;
    line-height: 1.3;
    text-align: center;
  }

  .why__item {
    gap: 0.6rem;
    margin-bottom: 1.5rem;
  }

  .why__text {
    font-size: 0.95rem;
    line-height: 1.3;
  }

  .why__cta {
    width: 100%;
    font-size: 0.95rem;
    text-align: center;
  }
}

/* ===== Loader Overlay (no intrusivo) ===== */
#loader-overlay{
  position: fixed;
  inset: 0;
  background: rgba(8,12,24,.28);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 9999;            /* por encima de todo */
  pointer-events: none;     /* no bloquea hasta estar activo */
}
#loader-overlay.active{
  display: flex;
  pointer-events: all;      /* bloquea clics cuando está activo */
}

.loader{
  display: inline-flex;
  gap: 10px;
  margin-bottom: 12px;
}
.loader .dot{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #E33220;      /* rojo NEDIMI */
  animation: loader-bounce .9s infinite ease-in-out;
  will-change: transform, opacity;
}
.loader .dot:nth-child(2){ animation-delay: .15s; }
.loader .dot:nth-child(3){ animation-delay: .3s; }

@keyframes loader-bounce{
  0%,80%,100%{ transform: translateY(0); opacity:.75; }
  40%{ transform: translateY(-10px); opacity:1; }
}

.loader-text{
  font: 600 14px/1.2 var(--body-font, system-ui, -apple-system, Segoe UI, Roboto, Arial);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* Estado visual del botón deshabilitado mientras envía */
.btn-send[disabled]{
  opacity: .7;
  cursor: not-allowed;
  filter: saturate(.85);
  transition: opacity .2s ease;
}