* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: #F6F0EA; font-family: 'Inter', sans-serif; color: #213E3B; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
a { color: #61290A; text-decoration: none; }
a:hover { color: #213E3B; }
@keyframes wa-pulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.55); } 70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
.wa-pulse { animation: wa-pulse 2.4s ease-out infinite; }
/* ---- Reveal al entrar en viewport (IntersectionObserver + stagger) ---- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .8s cubic-bezier(.22,.61,.36,1); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .stagger > * { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.js .stagger.is-visible > * { opacity: 1; transform: none; }
.js .stagger.is-visible > *:nth-child(1) { transition-delay: .04s; }
.js .stagger.is-visible > *:nth-child(2) { transition-delay: .11s; }
.js .stagger.is-visible > *:nth-child(3) { transition-delay: .18s; }
.js .stagger.is-visible > *:nth-child(4) { transition-delay: .25s; }
.js .stagger.is-visible > *:nth-child(5) { transition-delay: .32s; }
.js .stagger.is-visible > *:nth-child(6) { transition-delay: .39s; }
.js .stagger.is-visible > *:nth-child(7) { transition-delay: .46s; }
.js .stagger.is-visible > *:nth-child(8) { transition-delay: .53s; }
/* ---- Levantar tarjetas al hover ---- */
.cards > * { transition: transform .32s cubic-bezier(.22,.61,.36,1), box-shadow .32s ease; }
.js .cards.is-visible > *:hover, .cards:not(.stagger) > *:hover { transform: translateY(-7px); transition-delay: 0s; }
/* ---- Entrada del hero al cargar ---- */
@keyframes heroUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.js .hero-in > * { opacity: 0; animation: heroUp .85s cubic-bezier(.22,.61,.36,1) forwards; }
.js .hero-in > *:nth-child(1) { animation-delay: .15s; }
.js .hero-in > *:nth-child(2) { animation-delay: .28s; }
.js .hero-in > *:nth-child(3) { animation-delay: .42s; }
.js .hero-in > *:nth-child(4) { animation-delay: .56s; }
/* ---- Sombra del header al hacer scroll ---- */
/* ---- Comisiones: live + disponibilidad ---- */
@keyframes live-blink { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.28; transform:scale(.6); } }
.live-dot { display:inline-block; width:7px; height:7px; border-radius:999px; background:#22c55e; animation:live-blink 1.3s ease-in-out infinite; }
.comision-card.agotada { opacity:.58; }
header.scrolled { box-shadow: 0 6px 24px -14px rgba(33,62,59,.4); }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .stagger > *, .js .hero-in > * { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
}
.grain { position: relative; }
.grain::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .32; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
.cta-rich { transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; }
@media (prefers-reduced-motion: reduce) { .reveal { animation: none !important; } }

/* ---- Hover states (reemplazan los style-hover del handoff dc) ---- */
.btn-amber:hover { background:#213E3B; color:#FFCE88; transform:scale(1.03); box-shadow:0 12px 28px -10px rgba(33,62,59,.45); }
.btn-glow:hover { background:#ffd89e; color:#213E3B; transform:scale(1.03); box-shadow:0 14px 32px -10px rgba(0,0,0,.4); }
.btn-outline:hover { background:rgba(246,240,234,.12); color:#F6F0EA; border-color:#F6F0EA; transform:scale(1.03); }
.btn-cream:hover { background:#F6F0EA; color:#213E3B; transform:scale(1.02); box-shadow:0 12px 28px -10px rgba(0,0,0,.45); }
.btn-wa:hover { background:#1fba59; color:#fff; transform:scale(1.02); box-shadow:0 12px 28px -10px rgba(0,0,0,.35); }
.btn-ghost:hover { background:rgba(33,62,59,.06); color:#213E3B; border-color:#213E3B; transform:scale(1.02); }
.wa-btn { transition: background .2s ease; }
.wa-btn:hover { background:#61290A; }
.wa-float { transition: transform .2s ease; }
.wa-float:hover { transform:scale(1.06); }
/* ---- Botón "Me interesa" en cada turno de comisión (fantasma, sin verde) ---- */
.btn-interes { transition: background .2s ease, color .2s ease, border-color .2s ease; }
.btn-interes:hover { background:#213E3B; color:#FFCE88; border-color:#213E3B; }
.btn-interes:hover svg { transform: translateX(2px); }
.btn-interes svg { transition: transform .2s ease; }
.taller-mosaic { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.taller-mosaic img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
@media (max-width:640px) { .taller-mosaic { grid-template-columns:repeat(2,1fr); } }

/* ---- Placeholders de imágenes (reemplazar por <img>/<video> reales) ---- */
.ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; text-align:center; padding:1rem;
      background:repeating-linear-gradient(45deg,#e6dccd,#e6dccd 12px,#ded3c2 12px,#ded3c2 24px);
      color:#61290A; font-family:'Inter',sans-serif; font-size:.8rem; font-weight:600; letter-spacing:.02em; }
.ph--dark { background:repeating-linear-gradient(45deg,#1d3835,#1d3835 12px,#213e3b 12px,#213e3b 24px); color:rgba(246,240,234,.6); }

/* ---- FAQ ---- */
.faq-a { display:none; }
.faq-item.open .faq-a { display:block; }