/* ============================================
   VANE ZAPATA A. — El Lenguaje que Vistes™
   Sistema de diseño
   ============================================ */

:root{
  /* paleta */
  --cream:      #FAF6F1;
  --cream-deep: #F1E7DB;
  --ink:        #000000;
  --ink-soft:   #37415c;
  --wine:       #6B2737;
  --wine-soft:  #8C4257;
  --blush:      #E8C4B8;
  --gold:       #B08D57;

  /* tipografía */
  --f-display: "Bodoni Moda", serif;   /* títulos: cursiva, medium */
  --f-body: "Baloo Bhai 2", sans-serif;   /* párrafos: un único tamaño y familia en todo el sitio */
  --f-label: "Inter", sans-serif;   /* eyebrows / botones / labels */
  --f-nav: "Aboreto", sans-serif;      /* logo del nav */

  /* espaciado — márgenes generosos, nunca pegado al borde */
  --edge: clamp(24px, 6vw, 80px);
  --section-y: clamp(72px, 10vw, 160px);
  --measure: 62ch;

  --ease: cubic-bezier(.16,.84,.32,1);
}

*, *::before, *::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  scroll-padding-top:70px;
 }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* Todos los títulos del sitio: misma familia, cursiva, medium, interlineado normal */
/*h1, h2, h3{
  font-family:var(--f-display);
  font-style:italic;
  font-weight:500;
  line-height:1.15;
  margin:0;
}*/

h1, h2, h3{
  font-family:var(--f-display);
  font-style:normal;       /* antes: italic — quítala si ya no la quiere cursiva */
  font-weight:400;
  line-height:1.15;
  letter-spacing:-0.01em;  /* nueva línea — corrige el espaciado extra */
  margin:0;
}

/* Todos los párrafos y texto de cuerpo: misma familia (sans) y mismo tamaño */
p, li, blockquote, q{
  font-family:var(--f-body);
  font-size:1.05rem;
  line-height:1.7;
  margin:0;
}

.container{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding-left:var(--edge);
  padding-right:var(--edge);
}

.section{ padding-top:var(--section-y); padding-bottom:var(--section-y); }

.eyebrow{
  font-family:var(--f-label);
  font-size:.98rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:600;
  display:inline-block;
  margin-bottom:1.4rem;
}

.measure{ max-width:var(--measure); }

/* Reveal on scroll (GSAP toggles .is-visible) */
.reveal{ opacity:0; transform:translateY(32px); }
.reveal.is-visible{ opacity:1; transform:none; transition:opacity .9s var(--ease), transform .9s var(--ease); }

/* ============ NAV ============ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem var(--edge);
  background:transparent;
  color:var(--cream);
  transition:background .4s var(--ease), color .4s var(--ease);
}

.nav.is-scrolled .nav__brand{
  color:var(--cream);
}

.nav.is-scrolled{
  background:var(--ink);
  color:var(--cream);
}

.nav__link, .nav__cta, .nav__burger{
  opacity:0;
  pointer-events:none;
  transition:opacity .4s var(--ease);
}
.nav.is-scrolled .nav__link{
  color:var(--cream);
  opacity:1;
  pointer-events:auto;
}
.nav.is-scrolled .nav__cta,
.nav.is-scrolled .nav__burger{
  opacity:1;
  pointer-events:auto;
}

.nav__brand{
  font-family:var(--f-nav);
  font-style:normal;
  font-weight:400;
  font-size:1.4rem;
  letter-spacing:.18em;
  color:var(--cream);
}

.nav__progress{
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background:rgba(36,27,30,.0);
}
.nav__progress-bar{
  display:block; height:100%; width:0%;
  background:var(--gold);
}

.nav__menu{ display:flex; align-items:center; gap:2.2rem; }
.nav__link{
  font-family:var(--f-label);
  font-size:.74rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-weight:400;
  color:var(--cream);
  transition:color .4s var(--ease), opacity .4s var(--ease);
}
.nav__cta{
  font-family:var(--f-label);
  font-size:.68rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--cream);
  background:var(--wine);
  border-radius:999px;
  padding:.5rem 1.1rem;
  display:inline-block;
  transition:transform .35s var(--ease), background .35s var(--ease);
}
.nav__cta:hover{ background:var(--gold); transform:translateY(-1px); }

.nav__burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:32px; height:32px; background:none; border:none; cursor:pointer; padding:0;
  color:inherit;
}
.nav__burger span{ display:block; width:100%; height:2px; background:currentColor; transition:transform .3s var(--ease), opacity .3s var(--ease); }

@media (max-width:800px){
  .nav__burger{ display:flex;
    position:relative;
    z-index:60; 
  }
  .nav__menu{
    position:fixed; inset:0; z-index:49;
    flex-direction:column; justify-content:center; align-items:center; gap:2.4rem;
    background:var(--ink);
    opacity:0; pointer-events:none;
    transition:opacity .35s var(--ease);
  }
  .nav .nav__menu .nav__link{
    color:var(--cream);
    font-size:1.15rem;
    opacity:1; /* dentro del panel abierto, siempre visibles — no dependen de .is-scrolled */
    pointer-events:auto;
  }
  .nav .nav__menu .nav__cta{ opacity:1; }
  .nav.is-menu-open .nav__menu{ opacity:1; pointer-events:auto; }
}

/* ============ HERO ============ */
.hero{
  min-height:100svh;
  display:flex; align-items:center;
  padding:calc(var(--section-y) - 2.5rem) 0 var(--section-y);
  position:relative; z-index:0; overflow:hidden;
  background:var(--cream);
}

.hero__grid{
  width:100%; max-width:1240px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:clamp(2rem,5vw,4rem);
  padding:0 var(--edge);
}
.hero__spacer{ /* deja ver el rostro de la foto sin texto encima */ }

.hero__content{ text-align:left; }

.hero h1{
  color:var(--cream);
  font-size:clamp(2.1rem, 4vw, 3.6rem);
  max-width:14ch;
  margin:0 0 1.8rem;
  letter-spacing:-.01em;
}
.hero__sub{
  color:rgba(250,246,241,.82);
  max-width:40ch;
  margin:0 0 2.6rem;
}
@media (max-width:800px){
  /* 1. Compensar el alto de la barra de navegación en móviles */
  .hero {
    /* Ajusta este valor (aprox 5rem - 6rem / 80px-90px) según la altura de tu navbar */
    padding-top: clamp(5rem, 15vh, 7rem); 
  }
  .hero__grid{ grid-template-columns:1fr; }
  .hero__spacer{ display:none; }
}

.hero h1 em{
  font-style:italic;
  color:var(--wine); 
}

.hero__media{
  position:absolute; inset:0;
  background:#000;
  z-index:-2;
}

.hero__slide{
  position:absolute; inset:0;
  opacity:0;
  transition:opacity 1.4s ease;
}

.hero__slide.is-active{
  opacity:1;
}

.hero__slide img{
  width:100%; height:100%; object-fit:cover;
  object-position:50% 30%;
}

.btn{
  font-family:var(--f-label);
  font-size:.85rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--cream);
  background:var(--wine);
  border:none;
  padding:1.05rem 2.3rem;
  border-radius:999px;
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
  transition:transform .35s var(--ease), background .35s var(--ease);
}
.btn:hover{
  background:var(--gold);
  transform:translateY(-2px);
}

.hero__image-veil{
  position:absolute; inset:0; z-index:-1;
  background:none;
}

.hero__scroll-cue{
  position:absolute; bottom:2.4rem; left:50%; transform:translateX(-50%);
  width:1px; height:52px; background:var(--gold); opacity:.6;
}
.hero__scroll-cue::after{
  content:""; position:absolute; top:0; left:-3px; width:7px; height:7px; border-radius:50%;
  background:var(--wine);
  animation:cueMove 2.2s ease-in-out infinite;
}
@keyframes cueMove{ 0%{top:0; opacity:1;} 90%{opacity:0;} 100%{top:100%; opacity:0;} }

/* ============ EL PROBLEMA — sección clara, tipografía grande, firma tachado ============ */
.problema{ background:var(--cream); text-align:center; }
.problema h2{
  font-size:clamp(1.9rem, 4.4vw, 3.4rem);
  max-width:20ch;
  margin:0 auto 2.6rem;
}
.problema .strike{ position:relative; font-style:italic; color:var(--wine-soft); white-space:nowrap; }
.problema .strike::after{
  content:""; position:absolute; left:0; top:52%; width:0; height:2px; background:var(--wine);
  transform:translateY(-50%);
}
.problema .strike.is-struck::after{ width:100%; transition:width .7s var(--ease); }
.problema__body{ max-width:56ch; margin:0 auto; color:var(--ink-soft); font-style:italic; }
.problema__body strong{ font-style:normal; color:var(--ink); font-weight:600; }

/* ============ POR QUÉ IMPORTA — franja oscura, grid de tarjetas ============ */
.importa{ background:var(--ink); color:var(--cream); }
.importa .eyebrow{ color:var(--blush) }
.importa h2{
  font-size:clamp(1.6rem, 3.2vw, 2.5rem);
  max-width:26ch; margin:0 0 3.4rem;
  color:var(--cream);
}
.importa__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
  background:rgba(250,246,241,.12);
}
.importa__card{
  background:var(--ink); padding:2.4rem 1.6rem;
}
.importa__card .eyebrow{ color:var(--gold); display:block; margin-bottom:1rem; }
.importa__card q{
  quotes:"“" "”";
  color:var(--blush);
}
@media (max-width:900px){ .importa__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .importa__grid{ grid-template-columns:1fr; } }


/* ============ NO NECESITAS MÁS ROPA / EL LENGUAJE — listas en dos columnas ============ */
.listas { 
  background: var(--cream); 
}

.listas__grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: clamp(2rem, 5vw, 5rem); 
}

.listas__col .eyebrow { 
  display: block; 
}

.listas__col h3 { 
  font-size: clamp(1.4rem, 2.6vw, 2rem); 
  margin: 0 0 1.8rem; 
}

.listas ul { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
}

.listas li {
  position: relative; 
  padding: 0.8rem 0 0.8rem 1.6rem; /* El 1.6rem deja espacio a la izquierda para el bullet */
  color: var(--ink-soft);
}

/* Bullet Point dorado */
.listas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.3rem; /* Alinea el bullet con la primera línea de texto */
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--gold);
}

.listas li strong { 
  color: var(--ink); 
  font-weight: 600; 
}

@media (max-width: 800px) { 
  .listas__grid { 
    grid-template-columns: 1fr; 
  } 
}

/* ============ EL MOVIMIENTO — sección íntima, centrada ============ */

.movimiento { 
  position: relative; 
  overflow: hidden; 
  background-color: var(--blush); /* Este será el color base de respaldo */
  padding-top: clamp(5rem, 10vw, 9rem); 
  padding-bottom: clamp(5rem, 10vw, 9rem); 
}

.movimiento__bg {
  position: absolute; 
  inset: 0; 
  z-index: 0;
  
  /* Carga directa del SVG como fondo */
  background-image: url('images/movimiento-bg.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  
  /* Si deseas aplicar un tono o tinte sobre el SVG, puedes usar opacidad */
  opacity: 0.8; 
}

.movimiento .container { 
  position: relative; 
  z-index: 1; 
}

.movimiento__card {
  background: var(--cream);
  border-radius: 6px;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.8rem, 5vw, 4rem);
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  box-shadow: 0 20px 60px rgba(36, 27, 30, .8);
}

.movimiento h2 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  color: var(--wine);
  max-width: 30ch; 
  margin: 0 auto;
}

.movimiento__texto {
  max-width: 48ch;
  margin: 1.6rem auto 0;
  color: var(--ink-soft);
}

/* ============ QUIÉN SOY — retrato + bio ============ */
.quien-soy{ background:var(--cream-deep); }
.quien-soy__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.quien-soy__figure{ aspect-ratio:4/5; border-radius:4px; overflow:hidden; background:var(--blush); }
.quien-soy__figure img{ width:100%; height:100%; object-fit:cover; }
.quien-soy .eyebrow{ color:var(--wine); }
.quien-soy h2{ font-size:clamp(1.6rem,3vw,2.4rem); margin:0 0 1.4rem; }
.quien-soy p { 
  color: var(--ink-soft); 
  margin-top: 0;
  margin-bottom: 1.5rem; /* Controla la distancia entre párrafos */
}

/* Opcional: elimina el espacio extra después del último párrafo */
.quien-soy p:last-child {
  margin-bottom: 0;
}
@media (max-width:800px){ .quien-soy__grid{ grid-template-columns:1fr; } }

/* ============ EL MÉTODO — slider pineado, texto sobre la imagen, avanza con scroll ============ */
.metodo{ background:var(--ink); color:var(--cream); position:relative; padding-bottom:0; }
.metodo__head{ text-align:center; padding-bottom:clamp(2.5rem,6vw,4rem); }
.metodo__head h2{ font-size:clamp(1.8rem,3.6vw,2.8rem); color:var(--cream); margin:.6rem 0 0; }

/* el stage queda fijo en pantalla mientras se hace scroll por los 5 pasos */
.metodo__stage{
  position:relative; height:100svh; overflow:hidden;
}
.metodo__step{
  position:absolute; inset:0;
  display:flex; align-items:flex-end; justify-content:center;
  visibility:hidden;
}
.metodo__step.is-active{ visibility:visible; }
.metodo__visual{ position:absolute; inset:0; z-index:0; }
.metodo__visual img{ width:100%; height:100%; object-fit:cover; object-position:50% -1px; }
.metodo__overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10, 14, 26, 0) 0%, rgba(4, 9, 22, 0) 38%, rgba(4, 9, 28, 0.55) 70%, rgba(1, 6, 22, 0.92) 100%);
}

.metodo__num{
  position:absolute; left:50%; top:57%; transform:translate(-50%,-50%);
  font-family:var(--f-display); font-style:italic; font-weight:500;
  font-size:min(52vw, 40rem);
  line-height:1; color:transparent; -webkit-text-stroke:2px rgba(250,246,241,.5);
  z-index:1; pointer-events:none;
}

@media (min-width:701px){
  .metodo__num{
    left:6%;
    transform:translate(0, -50%);
  }
}

.metodo__text{
  position:relative; z-index:2; width:100%;
  padding:0 var(--edge) clamp(3rem,8vw,6rem); text-align:center;
}
.metodo__text .eyebrow{ color:var(--cream); }
.metodo__text h3{ font-size:clamp(1.6rem,3.2vw,2.4rem); color:var(--cream); margin:.6rem 0 1rem; }
.metodo__text p{ color:rgba(250,246,241,1); max-width:52ch; margin:0 auto; }

.metodo__meta{ text-align:center; padding:clamp(2rem,5vw,3.4rem) 0; font-family:var(--f-label); font-size:1rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); }

@media (max-width:700px){
  .metodo__num{ top:38%; }
  .metodo__text{ padding-bottom:3rem; }
}

/* ============ TESTIMONIOS — slider pineado sobre una sola imagen de fondo ============ */
.testimonios{ background:var(--cream); padding-bottom:0; }
.testimonios__head{ margin-bottom:clamp(2rem,5vw,4rem); }
.testimonios__head h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); max-width:16ch; }

.testimonios__stage{ position:relative; height:100svh; overflow:hidden; }
.testimonios__bg{ position:absolute; inset:0; z-index:0; }
.testimonios__bg img{ width:100%; height:100%; object-fit:cover; object-position:50% -98px; }

.testi-card{
  position:absolute; z-index:2; bottom:12%;
  width:min(520px, 86vw);
  background:rgba(250,246,241,.94);
  border-radius:6px;
  padding:2.2rem 2.4rem;
  text-align:left;
}
.testi-card--left{ left:8%; background:#d7ffcf; }
.testi-card--center{ left:50%; transform:translateX(-50%); background:#fcc5d4; }
.testi-card--right{ right:8%; background:#ffeebf; }
.testi-card q{
  display:block; margin-bottom:1.2rem;
  font-family:var(--f-display); font-style:italic; font-size:1.3rem; line-height:1.15;
  quotes:"“" "”"; color:var(--ink);
}
.testi-card__meta{ font-family:var(--f-label); font-size:.8rem; letter-spacing:.03em; color:var(--ink-soft); }
.testi-card__meta b{ display:block; color:var(--wine); font-size:.88rem; margin-bottom:.2rem; }

@media (max-width:700px){
  .testimonios__bg img{ object-position:50% 30px; }
  .testi-card--left, .testi-card--center, .testi-card--right{ left:50%; right:auto; transform:translateX(-50%); }
  .testi-card{ width:88vw; padding:1.8rem 1.8rem; bottom:9%; }
}

/* ============ FAQ — acordeón custom ============ */
.faq{ background:var(--ink); color:var(--cream); }
.faq__head{ margin-bottom:clamp(2rem,5vw,3.6rem); }
.faq__head h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); color:var(--cream); }
.faq-list{ border-top:1px solid rgba(250,246,241,.14); }
.faq-item{ border-bottom:1px solid rgba(250,246,241,.14); }
.faq-item__q {
  width: 100%; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: 1.5rem;
  background: none; 
  border: none; 
  color: var(--cream); 
  text-align: left; 
  cursor: pointer;
  
  /* Cambiamos a la fuente sans-serif legible */
  font-family: var(--f-label), sans-serif !important; /* El !important fuerza la anulación si hay otro selector sobreescribiendo */
  font-weight: 500; /* Le da un grosor óptimo para lectura */
  font-size: clamp(0.95rem, 1.4vw, 1.15rem); /* Ligeramente más contenido para evitar saltos raros */
  padding: 1.7rem 0;
}
.faq-item__icon{ position:relative; width:20px; height:20px; flex:none; }
.faq-item__icon::before, .faq-item__icon::after{
  content:""; position:absolute; background:var(--gold); border-radius:2px;
}
.faq-item__icon::before{ width:100%; height:2px; top:9px; left:0; }
.faq-item__icon::after{ width:2px; height:100%; top:0; left:9px; transition:transform .35s var(--ease); }
.faq-item.is-open .faq-item__icon::after{ transform:rotate(90deg); }
.faq-item__a{ height:0; overflow:hidden; }
.faq-item__a p{ margin:0 0 1.8rem; max-width:60ch; color:rgba(250,246,241,.72); }

@media (min-width:800px){
  .faq-item__a p{ padding-left:2.5rem; }
}

/* ============ CTA FINAL / FORM ============ */
.cta-final { 
  background: var(--wine); 
  color: var(--cream); 
}

/* Grid contenedor principal */
.cta-final__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 5rem);
}

.cta-final__content {
  text-align: left; /* En 2 columnas se lee mejor alineado a la izquierda */
}

.cta-final .eyebrow { 
  color: var(--blush); 
}

.cta-final h2 { 
  font-size: clamp(1.9rem, 3.8vw, 3rem); 
  margin: 0 0 1.2rem; 
  color: var(--cream); 
}

.cta-final p.lead { 
  margin: 0 0 2.6rem; 
  color: rgba(250,246,241,.82); 
}

.waitlist-form { 
  max-width: 460px; 
  display: flex; 
  flex-direction: column; 
  gap: 1rem; 
}

.waitlist-form input {
  width: 100%; 
  padding: 1rem 1.2rem; 
  border-radius: 999px; 
  border: 1px solid rgba(250,246,241,.4);
  background: rgba(250,246,241,.08); 
  color: var(--cream); 
  font-family: var(--f-body); 
  font-size: 1rem;
}

.waitlist-form input::placeholder { 
  color: rgba(250,246,241,.55); 
}

.waitlist-form button { 
  margin-top: .4rem; 
  background: var(--cream); 
  color: var(--wine); 
}

.waitlist-form button:hover { 
  background: var(--blush); 
  color: var(--wine); 
}

.waitlist-form__note { 
  font-size: .82rem; 
  color: rgba(250,246,241,.6); 
  margin-top: .6rem; 
}

.waitlist-form__status { 
  font-size: .9rem; 
  min-height: 1.2em; 
}

/* Estilos de la imagen */
.cta-final__media {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
}

.cta-final__media img {
  width: 100%;
  height: 100%;
  max-height: 580px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

/* Adaptación a móviles (<= 800px) */
@media (max-width: 800px) {
  .cta-final__grid {
    grid-template-columns: 1fr; /* Una sola columna */
    text-align: center;
  }

  .cta-final__content {
    text-align: center;
    order: 1; /* Permanece arriba */
  }

  .cta-final__media {
    order: 2; /* Pasa abajo del formulario */
    max-width: 460px;
    margin: 0 auto;
  }

  .waitlist-form {
    margin: 0 auto;
  }
}

/* ============ BOTÓN FLOTANTE DE REDES ============ */
.social-fab{ position:fixed; right:clamp(16px,4vw,32px); bottom:clamp(16px,4vw,32px); z-index:60; }
.social-fab__toggle{
  width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
  background:var(--wine); color:var(--cream);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  transition:transform .35s var(--ease), background .35s var(--ease);
}
.social-fab__toggle:hover{ background:var(--ink); }
.social-fab__plus{ position:relative; width:18px; height:18px; }
.social-fab__plus::before, .social-fab__plus::after{
  content:""; position:absolute; background:currentColor; border-radius:2px;
}
.social-fab__plus::before{ width:100%; height:2px; top:8px; left:0; }
.social-fab__plus::after{ width:2px; height:100%; top:0; left:8px; transition:transform .35s var(--ease); }
.social-fab.is-open .social-fab__plus::after{ transform:rotate(90deg); }

.social-fab__icons{
  position:absolute; right:0; bottom:calc(100% + 12px);
  display:flex; flex-direction:column; gap:.7rem; align-items:center;
}
.social-fab__icon{
  width:48px; height:48px; border-radius:50%;
  background:var(--cream); color:var(--wine);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.14);
  opacity:0; transform:translateY(12px) scale(.8);
  pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.social-fab__icon svg{ width:22px; height:22px; }
.social-fab.is-open .social-fab__icon{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.social-fab.is-open .social-fab__icon:nth-child(1){ transition-delay:.05s; }
.social-fab.is-open .social-fab__icon:nth-child(2){ transition-delay:.1s; }
.social-fab.is-open .social-fab__icon:nth-child(3){ transition-delay:.15s; }

/* ============ FOOTER ============ */
.footer {
  display: flex;
  flex-wrap: wrap; /* Permite que los elementos pasen abajo si no caben */
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding: 2rem var(--edge);
  background: var(--ink);
  color: rgba(250,246,241,.5);
  font-family: var(--f-label);
  font-size: .78rem;
  letter-spacing: .03em;
  text-align: center; /* Asegura un buen alineado al centrar en móviles */
}

.footer p { 
  margin: 0; 
  font: inherit; 
  color: inherit; 
}

.footer__links {
  display: flex;
  flex-wrap: wrap; /* Permite que los enlaces se reacomoden */
  justify-content: center;
  align-items: center;
  gap: 1.4rem;
  font: inherit;
}

.footer__links a {
  font: inherit;
  color: rgba(250,246,241,.6);
  transition: color .3s var(--ease);
}

.footer__links a:hover { 
  color: var(--cream); 
}

/* Ajustes para móviles */
@media (max-width: 700px) {
  .footer { 
    flex-direction: column; /* Apila el copyright y los enlaces verticalmente */
    gap: 1rem; 
    font-size: .75rem; 
  }
  
  .footer__links { 
    gap: 0.8rem 1.2rem; /* Espaciado cómodo entre filas y columnas de enlaces */
  }
}

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

:focus-visible { 
  outline: 2px solid var(--wine); 
  outline-offset: 3px; 
}

/* MODAL LEGAL */

/* Modal Overlay (Fondo oscuro) */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 9999;
  padding: 20px;
  box-sizing: border-box;
}

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

/* Contenedor principal de la Modal */
.modal-container {
  background-color: #ffffff;
  border-radius: 12px;
  width: 100%;
  max-width: 720px;
  max-height: 85vh;
  display: flex;
  flex-direction: column; /* Organiza cabecera, tabs, cuerpo y footer verticalmente */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  transform: translateY(20px);
  transition: transform 0.3s ease;
  overflow: hidden; /* Evita que los hijos se salgan del borde redondeado */
  position: relative;
}

.modal-overlay.active .modal-container {
  transform: translateY(0);
}

/* Cabecera */
.modal-header {
  padding: 18px 24px 12px 24px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #faf8f5;
  flex-shrink: 0; /* No permite que la cabecera se aplaste */
}

.modal-title { 
  margin: 0; 
  font-size: 1.2rem; 
  color: #2c2c2c; 
}

.modal-close {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: #777;
  cursor: pointer;
  line-height: 1;
}

/* Pestañas (Tabs) */
.modal-tabs {
  display: flex;
  background-color: #f4f1ea;
  border-bottom: 1px solid #e2ddd5;
  overflow-x: auto;
  flex-shrink: 0; /* Mantiene las pestañas fijas arriba */
  z-index: 2;
}

.tab-btn {
  padding: 12px 20px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  font-size: 0.9rem;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  white-space: nowrap;
}

.tab-btn.active {
  color: #7d6b5d;
  border-bottom-color: #7d6b5d;
  background-color: #ffffff;
}

/* Cuerpo de la modal (SÓLO AQUÍ HACE SCROLL) */
.modal-body {
  padding: 24px;
  overflow-y: auto; /* Permite scroll vertical interno */
  flex-grow: 1;    /* Ocupa todo el espacio disponible sobrante */
  font-size: 0.95rem;
  color: #444;
  line-height: 1.6;
}

.tab-content { 
  display: none; 
}

.tab-content.active { 
  display: block; 
}

.tab-content h3 { margin-top: 0; color: #2c2c2c; }
.tab-content h4 { margin: 16px 0 6px 0; color: #7d6b5d; }
.tab-content p, .tab-content ul { margin-bottom: 12px; }
.legal-date { font-size: 0.85rem; color: #888; font-style: italic; }

/* Pie de la modal */
.modal-footer {
  padding: 14px 24px;
  border-top: 1px solid #eee;
  text-align: right;
  background-color: #faf8f5;
  flex-shrink: 0; /* Mantiene el botón abajo fijo */
}

.btn-accept {
  background-color: #7d6b5d;
  color: #fff;
  border: none;
  padding: 10px 22px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}

body.modal-open { 
  overflow: hidden; 
}