/* ============================================================
   Portada de FilmSpirit
   Tipografía de cartel (Archivo ancho) con detalles de guion (Courier Prime:
   encabezados de escena, claquetas «ESC.»); las tiras de color del plan de
   rodaje marcan las secciones.
   ============================================================ */
:root{ --strip-d:#FFE57A; --strip-n:#BCD0FF; --strip-x:#B9E6BF; --band:#1E2329; --band-ink:#EAECEF; --band-muted:#A3ACB9; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --band:#0B0D10; --band-ink:#EAECEF; --band-muted:#8C96A3; } }
:root[data-theme="dark"]{ --band:#0B0D10; --band-ink:#EAECEF; --band-muted:#8C96A3; }
html{scroll-behavior:smooth;scroll-padding-top:76px}
.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:24px}
.faq{max-width:780px}
@media (max-width:600px){ .wrap{padding-inline:16px} }

/* ---------- barra superior ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.top.scrolled{border-bottom-color:var(--line)}
.top-in{display:flex;align-items:center;gap:24px;min-height:64px}
.top-logo{display:block;flex:none}
.top-nav{display:flex;gap:22px;margin-left:auto}
.top-nav a{color:var(--muted);text-decoration:none;font-size:15px;font-weight:550}
.top-nav a:hover{color:var(--ink)}
.sm-btn{min-height:38px;padding-inline:16px;font-size:14px}
@media (max-width:820px){ .top-nav{display:none} .sm-btn{margin-left:auto} }

/* ---------- portada ---------- */
.hero{padding-block:56px 40px;overflow:hidden}
.hero-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center}
.hero-txt{display:grid;gap:18px;min-width:0}
.slug{font-family:var(--font-script);font-weight:700;font-size:14px;letter-spacing:.06em;color:var(--accent-text);margin:0}
.hero h1{font-size:clamp(40px,5.4vw,66px);font-weight:800;font-stretch:112%;letter-spacing:-.02em;line-height:1.02}
.lead{font-size:clamp(17px,1.5vw,19px);color:var(--muted);margin:0;max-width:44ch}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.btn.big{min-height:50px;padding-inline:24px;font-size:16px}
.hero .hint{margin:0}
.ref-note{margin:0;font-size:14px;background:var(--accent-soft);color:var(--accent-text);border-radius:var(--r-sm);padding:10px 14px;justify-self:start}
.shot{margin:0;border-radius:14px;overflow:hidden;background:var(--surface);box-shadow:var(--sh-2);border:1px solid var(--line);min-width:0}
.shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top left;background:var(--fill)}
.shot-bar{display:flex;align-items:center;gap:6px;height:30px;padding-inline:12px;background:var(--fill);border-bottom:1px solid var(--line)}
.shot-bar i{width:9px;height:9px;border-radius:50%;background:var(--fill-2)}
.shot-bar span{margin-left:10px;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-shot{transform:translateX(3%);}
@media (max-width:960px){
  .hero{padding-block:36px 24px}
  .hero-in{grid-template-columns:minmax(0,1fr);gap:32px}
  .hero-shot{transform:none}
}

/* ---------- secciones ---------- */
.sec{padding-block:72px}
.sec h2{font-size:clamp(30px,3.6vw,44px);font-weight:800;font-stretch:108%;letter-spacing:-.015em;margin-top:10px;max-width:22ch}
.sec .eyebrow{margin:0;display:flex;align-items:center;gap:10px}
.sec .eyebrow::before{content:"";width:22px;height:8px;border-radius:2px;background:var(--strip-d);box-shadow:26px 0 0 var(--strip-n),52px 0 0 var(--strip-x);margin-right:56px}
@media (max-width:600px){ .sec{padding-block:52px} }

/* claquetas: cómo funciona */
.slates{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.slates li{background:var(--surface);border-radius:var(--r);padding:22px 20px 24px;box-shadow:var(--sh-1);display:grid;gap:8px;align-content:start;border-top:4px solid var(--ink)}
.slates li:nth-child(2){border-top-color:var(--accent)}
.slates b{font-family:var(--font-script);font-size:13px;letter-spacing:.08em;color:var(--muted)}
.slates h3{font-size:20px;font-weight:750}
.slates p{margin:0;color:var(--muted);font-size:15px}
@media (max-width:960px){ .slates{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .slates{grid-template-columns:minmax(0,1fr)} }

/* recorrido */
.tour{padding-top:24px}
.row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center}
.row+.row{margin-top:72px}
.row.rev .shot{order:2}
.row-txt{display:grid;gap:12px;min-width:0}
.row-txt h3{font-size:clamp(24px,2.6vw,32px);font-weight:780;font-stretch:106%;letter-spacing:-.01em}
.row-txt p{margin:0;color:var(--muted)}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ticks li{position:relative;padding-left:26px}
.ticks li::before{content:"";position:absolute;left:2px;top:.55em;width:12px;height:7px;border-left:2.5px solid var(--ok);border-bottom:2.5px solid var(--ok);transform:rotate(-45deg) translateY(-3px)}
.ticks.x li::before,.ticks li.no::before{border:0;width:12px;height:2.5px;background:var(--faint);transform:none;top:.72em}
.ticks li.no{color:var(--muted)}
@media (max-width:900px){
  .row{grid-template-columns:minmax(0,1fr);gap:24px}
  .row.rev .shot{order:0}
  .row+.row{margin-top:56px}
}

/* equipo: banda oscura con la matriz de permisos */
.band{background:var(--band);color:var(--band-ink)}
.band .eyebrow{color:#FF7B4F}
.band-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center}
.band-txt{display:grid;gap:14px}
.band-txt p{margin:0;color:var(--band-muted)}
.band .hint{color:var(--band-muted)}
.perm{background:#262B33;border-radius:var(--r);padding:8px;display:grid;gap:2px;font-size:14px;overflow-x:auto}
.perm-r{display:grid;grid-template-columns:minmax(120px,1.4fr) repeat(3,minmax(84px,1fr));gap:8px;align-items:center;padding:10px 12px;border-radius:10px}
.perm-r:not(.head):hover{background:#2E343D}
.perm-r.head{color:#8C96A3;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.perm-r span:first-child{font-weight:650}
.perm i{font-style:normal;font-size:12.5px;font-weight:700;border-radius:999px;padding:3px 10px;display:inline-block}
.perm i.e{background:rgba(14,203,129,.16);color:#3EE09E}
.perm i.v{background:rgba(242,96,44,.16);color:#FF8B62}
.perm i.n{color:#5E6673}
@media (max-width:900px){ .band-in{grid-template-columns:minmax(0,1fr);gap:32px} }

/* planes */
.plans{margin-top:36px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:920px}
.plan{background:var(--surface);border-radius:20px;padding:28px 28px 30px;box-shadow:var(--sh-1);display:grid;gap:16px;align-content:start;border:1px solid var(--line)}
.plan.pro{border:2px solid var(--accent);box-shadow:var(--sh-2)}
.plan-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.plan-h .logo{height:28px}
.tag{font-size:12.5px;font-weight:750;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:4px 12px}
.price{margin:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.price b{font-size:38px;font-weight:800;font-stretch:108%;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.price span{color:var(--muted);font-size:15px}
.plan-lead{margin:0;color:var(--muted)}
.plan .btn{justify-self:start}
@media (max-width:760px){ .plans{grid-template-columns:minmax(0,1fr)} }
.free-how{margin-top:28px;max-width:920px;background:var(--surface);border-radius:20px;padding:26px 28px;border:1px dashed var(--line)}
.free-how h3{font-size:22px;font-weight:760}
.free-cols{margin-top:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.free-cols .eyebrow{margin-bottom:10px}
.free-cols .eyebrow::before{display:none}
.eyebrow.ok{color:var(--ok)} .eyebrow.no{color:var(--muted)}
.free-cols li{font-size:15px}
@media (max-width:760px){ .free-cols{grid-template-columns:minmax(0,1fr);gap:20px} .free-how{padding:22px 18px} .plan{padding:24px 20px} }

/* preguntas */
.faq{margin-top:28px;display:grid;gap:10px}
.faq details{background:var(--surface);border-radius:14px;padding:4px 20px;box-shadow:var(--sh-1)}
.faq summary{cursor:pointer;font-weight:680;font-size:17px;padding-block:16px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:22px;line-height:1;color:var(--muted);flex:none}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 18px;color:var(--muted);max-width:65ch}

/* cierre */
.last{padding-block:84px 96px;text-align:center}
.last-in{display:grid;gap:18px;justify-items:center}
.last h2{margin-inline:auto;max-width:18ch}

/* pie */
.foot{border-top:1px solid var(--line);padding-block:28px}
.foot-in{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.foot-logo .logo{height:20px}
.foot nav{display:flex;gap:18px;flex-wrap:wrap}
.foot nav a{color:var(--muted);font-size:14px;text-decoration:none}
.foot nav a:hover{color:var(--ink)}
.foot .hint{margin-left:auto}
.sel{user-select:all}
@media (max-width:600px){ .foot .hint{margin-left:0} }
@media (max-width:600px){
  .perm{font-size:13px;padding:4px}
  .perm-r{grid-template-columns:minmax(92px,1.3fr) repeat(3,minmax(58px,1fr));gap:6px;padding:9px 8px}
  .perm-r.head{font-size:10.5px;letter-spacing:.03em}
  .perm i{padding:3px 7px;font-size:11.5px}
}