/* home.css — Estilos propios de la portada: hero, rejilla de actividades y
   acordeón de FAQ. Lo común está en style.css; el modal en components/. */

/* ══ HERO REDISEÑADO ══ */
.hero {
  position: relative;
  min-height: 100vh;
  background: var(--dark);
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* Vídeo de fondo: SOLO en móvil */
.hero-bg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  opacity: 0.55;
  display: none; /* oculto en desktop */
}
.hero-bg-fallback {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #0d0d0d 0%, #1a1205 40%, #0d1a0d 100%);
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.15) 100%);
  display: none; /* oculto en desktop */
}
/* Layout desktop: dos zonas */
.hero-inner {
  position: relative; z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 100vh;
  overflow: hidden;
}
.hero-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px 64px 80px 0;
  position: relative; z-index: 2;
}
/* Panel derecho: vídeo ocupa todo el panel, sin distorsión */
.hero-right {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}
/* Tipografía hero */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--amber); color: var(--dark);
  padding: 5px 16px; border-radius: 100px;
  font-family: var(--font-title); font-size: .7rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 24px;
}
.hero-left h1 {
  font-family: var(--font-title);
  font-size: clamp(3.5rem, 6vw, 6rem);
  font-weight: 900; line-height: .95;
  color: #fff; text-transform: uppercase;
  letter-spacing: -.01em; margin-bottom: 16px;
}
.hero-left h1 .accent { color: var(--amber); }
.hero-left h1 .thin { font-weight: 300; color: rgba(255,255,255,0.5); font-size: .6em; display: block; letter-spacing: .08em; margin-bottom: 4px; }
.hero-tagline {
  font-size: 1rem; color: rgba(255,255,255,0.6);
  line-height: 1.7; margin-bottom: 32px; max-width: 420px;
}
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }
.hero-features {
  display: flex; flex-direction: column; gap: 16px;
  padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.1);
}
.hero-feat { display: flex; align-items: center; gap: 14px; }
.hero-feat-icon {
  font-size: 1.5rem; width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(245,166,35,0.12); border: 1px solid rgba(245,166,35,0.25);
  border-radius: 12px;
}
.hero-feat-title { font-family: var(--font-title); font-size: .95rem; font-weight: 800; color: #fff; letter-spacing: .01em; }
.hero-feat-sub { font-size: .78rem; color: rgba(255,255,255,0.45); margin-top: 2px; }
@media(max-width:600px){ .hero-feat-title{font-size:.85rem} }

/* ══ ACTIVIDADES GRID ══ */
.acts-section { padding: 80px 0; background: var(--dark); }
.acts-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; }
.act-card {
  position: relative; overflow: hidden;
  height: 440px; cursor: pointer;
  text-decoration: none; display: block;
}
.act-card img { width:100%; height:100%; object-fit:cover; transition:transform .5s; opacity:.7; }
.act-card:hover img { transform:scale(1.05); opacity:.9; }
.act-card-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:28px;
  transition:all .3s;
}
.act-card-label { font-family:var(--font-title); font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); margin-bottom:6px; }
.act-card h3 { font-family:var(--font-title); font-size:clamp(1.4rem,2.5vw,2rem); font-weight:900; color:#fff; text-transform:uppercase; letter-spacing:.02em; line-height:1.1; margin-bottom:10px; }
.act-card-meta { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.act-meta-pill { background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.2); color:rgba(255,255,255,0.8); padding:3px 10px; border-radius:100px; font-size:.72rem; font-weight:600; font-family:var(--font-title); letter-spacing:.04em; }
.act-card-cta { display:inline-flex; align-items:center; gap:6px; background:var(--amber); color:var(--dark); padding:8px 18px; border-radius:100px; font-family:var(--font-title); font-size:.75rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; transform:translateY(4px); opacity:0; transition:all .3s; }
.act-card:hover .act-card-cta { opacity:1; transform:translateY(0); }
/* FAQ */
.faq-list{max-width:760px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{width:100%;text-align:left;background:none;border:none;padding:20px 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-family:var(--font-title);font-size:.95rem;font-weight:700;color:var(--dark);text-transform:uppercase;letter-spacing:.02em;gap:16px}
.faq-q:hover{color:var(--amber)}
.faq-icon{width:26px;height:26px;border-radius:50%;background:var(--gray-l);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.9rem;font-weight:700;color:var(--text-m);transition:all .2s}
.faq-item.open .faq-icon{background:var(--amber);border-color:var(--amber);color:var(--dark);transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a-inner{padding:0 0 18px;color:var(--text-m);font-size:.92rem;line-height:1.75}
.faq-item.open .faq-a{max-height:300px}
@media(max-width:900px){
  /* En móvil: vídeo de fondo, sin panel derecho */
  .hero-bg-video { display: block; }  /* mostrar vídeo fondo */
  .hero-overlay { display: block; }   /* mostrar overlay */
  .hero-inner{grid-template-columns:1fr;min-height:100vh;overflow:visible}
  .hero-left{padding:100px 24px 60px;grid-row:1;position:relative;z-index:2}
  .hero-right{display:none}           /* ocultar panel vídeo derecha */
  .hero-left h1{font-size:3rem}
  .acts-grid{grid-template-columns:1fr; gap:0}
  .act-card{height:300px}
  .act-card-overlay{padding:22px}
  .modal-grid{grid-template-columns:1fr}
  .modal-inner{padding:0 16px 24px}
}
@media(max-width:600px){
  .hero-left h1{font-size:2.4rem}
  .act-card{height:260px}
}

/* Píldora de precio "desde X€" (antes con style= en el HTML) */
.act-meta-pill.act-meta-precio { background: var(--amber); color: #111; font-weight: 800; }

/* ── Reglas que antes iban en atributos style= del HTML ── */
.hero-bg-imagen { background-size: cover; background-position: center; }
.hero-video-panel {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center center; display: block;
}
.hero-panel-fallback { position: absolute; inset: 0; background: linear-gradient(135deg, #1a1a2e, #0f3460); }
.hero-btns { margin-top: 28px; }
.acts-header { text-align: center; padding-bottom: 48px; }
.acts-title {
  font-family: var(--font-title); font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900; text-transform: uppercase; color: #fff; letter-spacing: .02em;
}
.section-eyebrow-amber { color: var(--amber); opacity: 1; }
.why-item-num { color: var(--amber); font-weight: 600; font-size: .82rem; }
.opinions-actions { text-align: center; margin-top: 32px; }
.opinions-empty { text-align: center; color: var(--text-m); }
.reviews-cta {
  text-align: center; margin-top: 40px; padding: 32px 24px;
  background: var(--gray-l); border-radius: 20px;
}
.reviews-cta h3 {
  font-family: var(--font-title); font-size: 1.1rem; font-weight: 900;
  text-transform: uppercase; margin-bottom: 10px;
}
.book-cta { text-align: center; }
.book-cta h2 { color: #fff; }
.book-cta p {
  color: rgba(255,255,255,0.6); max-width: 480px;
  margin: 0 auto 32px; font-size: .95rem;
}
.contacto-wa { margin-top: 8px; }
.cf-msg { margin-top: 12px; text-align: center; font-size: .9rem; }