/* actividad.css — Estilos de la ficha de actividad: carrusel, pestañas y
   fichas de modalidad. Lo común está en style.css; el modal en components/. */

.act-hero{position:relative;height:480px;overflow:hidden}
.act-carousel{position:absolute;inset:0}
.act-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;background-size:cover;background-position:center}
.act-slide.active{opacity:1}
.act-hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.88) 0%,rgba(0,0,0,0.25) 60%,rgba(0,0,0,0.45) 100%);z-index:2}
.act-hero-content{position:absolute;bottom:0;left:0;right:0;z-index:3;padding:40px 0}
.act-hero-content h1{font-family:var(--font-title);font-size:clamp(2.5rem,5vw,4rem);font-weight:900;color:#fff;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.act-hero-content p{color:rgba(255,255,255,0.75);font-size:1.05rem;max-width:620px}
.carousel-dots{position:absolute;bottom:18px;right:24px;z-index:4;display:flex;gap:8px}
.carousel-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,0.4);cursor:pointer;border:none;transition:all .2s}
.carousel-dot.active{background:var(--amber);width:26px;border-radius:6px}
.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;background:rgba(0,0,0,0.4);border:none;color:#fff;width:44px;height:44px;border-radius:50%;font-size:1.3rem;cursor:pointer;transition:background .2s}
.carousel-arrow:hover{background:rgba(0,0,0,0.7)}
.carousel-arrow.prev{left:18px}.carousel-arrow.next{right:18px}
.act-pills{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 0}
/* Pestañas de navegación entre actividades */
.act-tabs{position:sticky;top:72px;z-index:50;background:rgba(15,23,42,0.96);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,0.08)}
.act-tabs-inner{display:flex;gap:4px;max-width:var(--container,1200px);margin:0 auto;padding:0 24px}
.act-tab{flex:1;text-align:center;padding:16px 12px;font-family:var(--font-title);font-size:.92rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:rgba(255,255,255,0.5);text-decoration:none;border-bottom:3px solid transparent;transition:all .2s;white-space:nowrap}
.act-tab:hover{color:rgba(255,255,255,0.85)}
.act-tab.active{color:var(--amber);border-bottom-color:var(--amber)}
@media(max-width:600px){.act-tab{font-size:.78rem;padding:14px 6px;letter-spacing:.02em}.act-tabs-inner{padding:0 8px}}
.act-pill{background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);color:rgba(255,255,255,0.9);padding:6px 16px;border-radius:100px;font-size:.82rem;font-family:var(--font-title);font-weight:700;letter-spacing:.04em;backdrop-filter:blur(4px)}
/* Info */
.act-info{padding:56px 0;background:#fff}
.act-info-grid{display:block}
/* Sistema Leer más */
.lm-colapsado::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60px;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff)}
.lm-btn{background:none;border:none;color:var(--amber);font-family:var(--font-title);font-weight:800;font-size:.85rem;cursor:pointer;padding:8px 0;margin-top:6px;text-transform:uppercase;letter-spacing:.03em}
.lm-btn:hover{text-decoration:underline}
.sub-cerrada{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;border-radius:12px;padding:14px 18px;font-size:.9rem;font-weight:600;text-align:center}
.act-desc{font-size:1.05rem;line-height:1.8;color:var(--text);white-space:pre-line;max-width:1000px}
@media(max-width:760px){.act-desc{font-size:1rem}}
/* Modalidades — bandas horizontales a ancho completo */
.subs-section{padding:64px 0;background:var(--gray-l)}
.subs-list{display:flex;flex-direction:column;gap:32px;margin-top:40px}
.sub-row{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;display:grid;grid-template-columns:42% 58%;min-height:340px;transition:box-shadow .3s}
.sub-row:hover{box-shadow:var(--shadow-lg)}
.sub-row.reverse{grid-template-columns:58% 42%}
.sub-row.reverse .sub-row-media{order:2}
.sub-row.reverse .sub-row-info{order:1}
/* Carrusel de la modalidad */
.sub-row-media{position:relative;background:linear-gradient(135deg,var(--dark),var(--gray));min-height:340px;overflow:hidden}
.sub-slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;background-size:cover;background-position:center}
.sub-slide.active{opacity:1}
.sub-media-empty{display:flex;align-items:center;justify-content:center;height:100%;color:rgba(255,255,255,0.25);font-size:3.5rem}
.sub-precio-badge{position:absolute;top:16px;left:16px;z-index:3;background:var(--amber);color:#111;padding:8px 18px;border-radius:100px;font-weight:900;font-size:1.15rem;box-shadow:0 2px 10px rgba(0,0,0,0.35)}
.sub-precio-badge .desde{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;opacity:.7;display:block;line-height:1}
.sub-carousel-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:7px}
.sub-cdot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.45);cursor:pointer;border:none;transition:all .2s}
.sub-cdot.active{background:var(--amber);width:22px;border-radius:5px}
.sub-carr-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;background:rgba(0,0,0,0.4);border:none;color:#fff;width:38px;height:38px;border-radius:50%;font-size:1.2rem;cursor:pointer;transition:background .2s}
.sub-carr-arrow:hover{background:rgba(0,0,0,0.7)}
.sub-carr-arrow.prev{left:12px}.sub-carr-arrow.next{right:12px}
/* Info de la modalidad */
.sub-row-info{padding:36px 40px;display:flex;flex-direction:column}
.sub-row-info h3{font-family:var(--font-title);font-size:1.7rem;font-weight:900;color:var(--dark);text-transform:uppercase;letter-spacing:.03em;margin-bottom:14px}
.sub-row-info .sub-desc{font-size:.98rem;color:var(--text-m);line-height:1.75;margin-bottom:20px;white-space:pre-line}
.sub-tramos{font-size:.85rem;color:var(--text-m);line-height:1.8;background:var(--gray-l);border-radius:12px;padding:16px 18px;margin-bottom:18px}
.sub-tramos strong{color:var(--dark)}
.sub-meta-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.sub-meta-pill{font-size:.8rem;color:var(--text);background:var(--gray-l,#f3f3f3);border:1px solid var(--border);border-radius:100px;padding:5px 12px;white-space:nowrap}
.sub-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 28px;margin-bottom:20px}
@media(max-width:520px){.sub-detail-grid{grid-template-columns:1fr;gap:14px}}
.sub-incluye{margin-bottom:20px}
.sub-incluye strong{display:block;font-size:.85rem;color:var(--dark);margin-bottom:6px}
.sub-incluye ul{list-style:none;padding:0;margin:0}
.sub-incluye li{font-size:.85rem;color:var(--text-m);padding-left:18px;position:relative;margin-bottom:4px}
.sub-incluye li::before{content:"✓";position:absolute;left:0;color:var(--amber);font-weight:700}
.sub-llevar li::before{content:"•";color:var(--text-m)}
.sub-row-info .btn{margin-top:auto;align-self:flex-start;padding-left:40px;padding-right:40px}
@media(max-width:860px){
  .act-hero{height:360px}
  .sub-row,.sub-row.reverse{grid-template-columns:1fr}
  .sub-row.reverse .sub-row-media{order:1}
  .sub-row.reverse .sub-row-info{order:2}
  .sub-row-media{min-height:240px}
  .sub-row-info{padding:26px 24px}
  .sub-row-info .btn{align-self:stretch;padding-left:16px;padding-right:16px;white-space:normal;text-align:center}
}
@media(max-width:600px){
  .act-hero{height:300px}
  .act-hero-content{padding:28px 0}
}
.idiomas-badge{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:32px}
.idioma-item{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--border);border-radius:100px;padding:8px 16px;font-size:.85rem;font-weight:600;color:var(--text);white-space:nowrap}
.idioma-item small{color:var(--text-m);font-weight:400;font-size:.78rem}
@media(max-width:860px){.act-info-grid{grid-template-columns:1fr}.modal-grid{grid-template-columns:1fr}.modal-inner{padding:0 16px 24px}}

/* ── Reglas que antes iban en atributos style= del HTML ── */
.act-hero-wrap { margin-top: 72px; }
.act-volver {
  color: rgba(255,255,255,0.6); font-size: .82rem; font-family: var(--font-title);
  text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
  display: inline-block; margin-bottom: 12px;
}
.act-info-title {
  font-family: var(--font-title); font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  font-weight: 900; text-transform: uppercase; letter-spacing: .02em;
  color: var(--dark); margin-bottom: 18px;
}
.act-punto { margin-top: 20px; font-size: .92rem; color: var(--text-m); }
.act-punto strong { color: var(--dark); }
.subs-title {
  font-family: var(--font-title); font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 900; text-transform: uppercase; letter-spacing: .02em;
  color: var(--dark); margin-bottom: 8px;
}
.subs-subtitulo { color: var(--text-m); font-size: .95rem; max-width: 560px; }
.subs-vacio { padding: 48px 0; text-align: center; color: var(--text-m); }