/* Purpose Edits — sistema visual compartido.
   Concepto: fotos de autor oscurecidas y desenfocadas, un violeta profundo como firma,
   vidrio esmerilado y mucho aire. Oscuro tipo Apple, claro tipo Eleven Labs. */
:root{
  /* claro (Eleven Labs) */
  --bg:#F6F5F3; --surface:#FFFFFF; --surface-2:#EFEDEA; --line:rgba(10,10,12,.08);
  --fg:#0B0B0C; --muted:#5E5C61; --soft:#8D8A91;
  --accent:#6D3BE0; --accent-2:#8B5CF6; --accent-ink:#FFFFFF;
  --btn:#0B0B0C; --btn-ink:#FFFFFF;
  --glass:rgba(255,255,255,.62); --glass-line:rgba(10,10,12,.08);
  --shadow:0 1px 2px rgba(10,10,12,.04),0 12px 40px -12px rgba(30,20,60,.18);
  /* bandas con foto: siempre oscuras */
  --ph-fg:#F5F5F7; --ph-muted:rgba(245,245,247,.72);
  --display:"Anton","Impact","Arial Narrow Bold",sans-serif;
  --label:"Montserrat","Segoe UI",system-ui,sans-serif;
  --font:"Geist","Segoe UI",system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#000000; --surface:#111113; --surface-2:#1C1C1E; --line:rgba(255,255,255,.08);
  --fg:#F5F5F7; --muted:#A1A1A6; --soft:#6E6E73;
  --accent:#9B6BFF; --accent-2:#B794FF; --accent-ink:#0B0612;
  --btn:#F5F5F7; --btn-ink:#000000;
  --glass:rgba(28,28,30,.55); --glass-line:rgba(255,255,255,.10);
  --shadow:0 1px 1px rgba(0,0,0,.4),0 20px 60px -20px rgba(0,0,0,.7);
  color-scheme:dark;}}
:root[data-theme="dark"]{
  --bg:#000000; --surface:#111113; --surface-2:#1C1C1E; --line:rgba(255,255,255,.08);
  --fg:#F5F5F7; --muted:#A1A1A6; --soft:#6E6E73;
  --accent:#9B6BFF; --accent-2:#B794FF; --accent-ink:#0B0612;
  --btn:#F5F5F7; --btn-ink:#000000;
  --glass:rgba(28,28,30,.55); --glass-line:rgba(255,255,255,.10);
  --shadow:0 1px 1px rgba(0,0,0,.4),0 20px 60px -20px rgba(0,0,0,.7);
  color-scheme:dark;}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:#000}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{position:relative;z-index:2;max-width:1120px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
p{margin:0}
h1,h2,h3{margin:0;text-wrap:balance}

/* ---------- marca ---------- */
.by{font-family:var(--label);font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--ph-muted)}
.by b{font-weight:800;color:var(--ph-fg)}
.wordmark{position:relative;display:inline-block;font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.86;letter-spacing:-.005em;
  font-size:clamp(58px,10.5vw,132px);
  background:linear-gradient(180deg,#FFFFFF 0%,#E9E7EF 38%,#9C98A6 52%,#F4F2F8 66%,#C9C5D2 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 10px 40px rgba(155,107,255,.25))}
.wordmark::before,.wordmark::after{content:attr(data-text);position:absolute;inset:0;z-index:-1;color:#C7B5FF;opacity:.28;filter:blur(7px);pointer-events:none;
  -webkit-background-clip:initial;background-clip:initial}
.wordmark::before{transform:translateX(-.045em)}
.wordmark::after{transform:translateX(.045em)}
/* barra superior */
.top{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:20;transition:background .4s var(--ease),border-color .4s var(--ease)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.top.lleno{background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);border-bottom:1px solid rgba(255,255,255,.06)}
.marca-mini{font-family:var(--display);text-transform:uppercase;font-size:20px;letter-spacing:.02em;color:#F5F5F7;text-decoration:none;display:flex;align-items:baseline;gap:8px}
.marca-mini small{font-family:var(--label);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:none;color:rgba(245,245,247,.6)}
.link-top{font-size:14px;color:rgba(245,245,247,.75);text-decoration:none;transition:color .3s var(--ease)}
.link-top:hover{color:#fff}

/* ---------- tipografía ---------- */
.eyebrow{font-family:var(--label);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.foto .eyebrow{color:#C9B3FF}
.h2{font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:clamp(40px,6vw,76px);line-height:.95;letter-spacing:.005em}
.h3{font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.lead{font-size:clamp(17px,1.5vw,19px);color:var(--muted);max-width:34em}
.foto .lead{color:var(--ph-muted)}

/* ---------- botones (vidrio, brillo y resplandor) ---------- */
.btn{--mx:50%;--my:50%;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:0 28px;border-radius:999px;font:600 16px var(--font);letter-spacing:-.01em;text-decoration:none;cursor:pointer;
  color:var(--fg);background:var(--glass);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);
  transition:transform .35s var(--ease),box-shadow .45s var(--ease),background .35s var(--ease)}
.foto .btn{color:#F5F5F7;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .35s var(--ease);
  background:radial-gradient(180px circle at var(--mx) var(--my),rgba(183,148,255,.35),transparent 70%)}
.btn:hover{transform:translateY(-1px)}
.btn:hover::before{opacity:1}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn.prim{background:var(--btn);color:var(--btn-ink);border-color:transparent;box-shadow:0 10px 40px -14px rgba(139,92,246,.55)}
.foto .btn.prim{background:#F5F5F7;color:#000}
.btn.prim:hover{box-shadow:0 16px 60px -12px rgba(139,92,246,.75)}
.btn .onda{position:absolute;border-radius:50%;pointer-events:none;width:12px;height:12px;margin:-6px 0 0 -6px;background:rgba(183,148,255,.65);animation:onda .75s var(--ease) forwards;z-index:-1}
@keyframes onda{to{transform:scale(30);opacity:0}}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* al pasar por un botón, lo de alrededor se desenfoca apenas */
@media (hover:hover){
  .foco{transition:filter .5s var(--ease),opacity .5s var(--ease)}
  body:has(.btn:hover) .foco:not(:has(.btn:hover)){filter:blur(2.5px);opacity:.5}
}

/* ---------- bandas con foto de fondo: la foto se ve, el oscurecido va solo donde hay texto ---------- */
section{position:relative;padding-block:clamp(88px,12vw,150px)}
.foto{color:var(--ph-fg);background:#000;overflow:hidden;isolation:isolate}
.foto .fondo{position:absolute;inset:0;z-index:0;background-size:cover;background-position:var(--pos,center);
  filter:blur(var(--blur,0px)) brightness(var(--luz,.85)) saturate(1.04)}
.foto .velo{position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--velo,
  linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.05) 30%,rgba(0,0,0,.1) 60%,rgba(0,0,0,.85) 100%))}
.foto .grano{position:absolute;inset:0;z-index:1;opacity:.06;pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* portada: foto nítida a pantalla completa, texto a la izquierda */
.hero{min-height:min(100svh,1000px);display:flex;align-items:center;padding-block:clamp(110px,12vw,140px) clamp(64px,8vw,100px)}
.hero .fondo{--luz:1;--pos:center 35%;left:30%}
.hero .velo{--velo:linear-gradient(90deg,#000 0%,#000 30%,rgba(0,0,0,.55) 40%,rgba(0,0,0,0) 55%),
  linear-gradient(180deg,rgba(0,0,0,.45) 0%,transparent 22%,transparent 80%,#000 100%)}
.hero .wrap,.cierre .wrap{width:100%}
.hero-txt{display:grid;gap:22px;max-width:520px;min-width:0}
.hero .wordmark{font-size:clamp(56px,8.4vw,112px)}
.hero-txt .marca{display:grid;gap:6px}
.tagline{font-size:clamp(24px,2.6vw,34px);font-weight:600;letter-spacing:-.03em;line-height:1.15}
.tagline em{font-style:normal;color:#C9B3FF}

/* por qué funciona: foto enmarcada + texto */
.estrategia{background:#000}
.estrategia .ambiente{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;filter:blur(60px) brightness(.35) saturate(1.2);transform:scale(1.2);opacity:.7}
.est-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,5vw,64px);align-items:center}
.cuadro{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:16/11;border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 100px -30px rgba(124,58,237,.55)}
.cuadro img{width:100%;height:100%;object-fit:cover;object-position:28% center}
.est-txt{display:grid;gap:14px;min-width:0}
.est-txt .h2{font-size:clamp(34px,3.6vw,50px)}
.est-txt .tres{grid-template-columns:1fr;gap:12px;margin-top:10px}
.est-txt .vidrio{padding:20px 22px;gap:6px}
.estrategia .velo{--velo:linear-gradient(270deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.55) 35%,rgba(0,0,0,0) 60%),linear-gradient(180deg,transparent 55%,rgba(0,0,0,.85) 100%)}
.cabeza{display:grid;gap:16px;margin-bottom:clamp(36px,5vw,60px);max-width:44em}
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.vidrio{background:rgba(14,12,20,.5);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:28px;display:grid;gap:10px;align-content:start;
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%)}
.vidrio p{color:var(--ph-muted)}
.dato{font-family:var(--label);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#C9B3FF}

/* pack (sección en el tema del visitante) */
.pack-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,56px);align-items:stretch}
.pack-img{position:relative;border-radius:28px;overflow:hidden;min-height:420px;box-shadow:var(--shadow)}
.pack-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.85)}
.pack-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55))}
.pack-card{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:clamp(28px,4vw,48px);display:grid;gap:22px;box-shadow:var(--shadow);align-content:center}
.precio{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.precio .monto{font-family:var(--display);font-size:clamp(72px,9vw,112px);line-height:.9;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.precio .mon{font-family:var(--label);font-size:15px;font-weight:700;letter-spacing:.08em;color:var(--muted)}
.chico{font-size:15px;color:var(--muted)}
.lista{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.lista li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start}
.lista li::before{content:"";width:20px;height:20px;margin-top:3px;border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}

/* pasos */
.proceso .fondo{--luz:1;--pos:right center}
.proceso .velo{--velo:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.7) 35%,rgba(0,0,0,.1) 60%,transparent 75%),linear-gradient(180deg,rgba(0,0,0,.5) 0%,transparent 20%,transparent 80%,#000 100%)}
.proceso .pasos{grid-template-columns:1fr 1fr;max-width:620px}
.proceso .cabeza{max-width:680px}
.proceso .h2{font-size:clamp(34px,4.4vw,58px)}
.pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:p}
.pasos li{counter-increment:p}
.pasos .vidrio::before{content:counter(p,decimal-leading-zero);font-family:var(--display);font-size:34px;line-height:1;color:#C9B3FF}

/* preguntas (tema del visitante) */
.faq{display:grid;gap:10px;max-width:780px}
details{background:var(--surface);border:1px solid var(--line);border-radius:18px;transition:border-color .3s var(--ease)}
details[open]{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
summary{list-style:none;cursor:pointer;padding:20px 24px;font-weight:600;font-size:17px;display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:24px;font-weight:300;color:var(--accent);transition:transform .3s var(--ease)}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 24px 22px;color:var(--muted)}
summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:18px}

/* cierre */
.cierre{min-height:min(110svh,1100px);display:flex;align-items:flex-end}
.cierre .fondo{--luz:.95;--pos:center 8%}
.cierre .velo{--velo:linear-gradient(180deg,rgba(0,0,0,.35) 0%,transparent 25%,rgba(0,0,0,.25) 55%,rgba(0,0,0,.92) 100%)}
.cierre .wrap{display:grid;justify-items:center;gap:22px;text-align:center}
.numero{font-size:15px;color:var(--ph-muted);user-select:all}

footer{border-top:1px solid var(--line);background:var(--bg)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:28px;font-size:14px;color:var(--muted)}
footer a{text-decoration:none}

/* aparición y parallax al deslizar (si el navegador lo soporta; si no, todo queda visible) */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .aparece{animation:sube linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    @keyframes sube{from{opacity:.3;transform:translateY(30px) scale(.985)}to{opacity:1;transform:none}}
    .foto .fondo{animation:paralaje linear both;animation-timeline:view()}
    @keyframes paralaje{from{transform:scale(1.06)}to{transform:scale(1)}}
  }
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* celular */
@media (max-width:880px){
  .pack-grid{grid-template-columns:1fr}
  .hero{align-items:flex-end;min-height:100svh;padding-top:62svh}
  .hero .fondo{left:0;bottom:auto;height:68svh;--pos:56% center}
  .hero .velo{--velo:linear-gradient(180deg,rgba(0,0,0,.45) 0%,transparent 14%,transparent 45%,#000 68svh)}
  .est-grid{grid-template-columns:1fr}
  .proceso .fondo{--pos:72% center}
  .proceso .velo{--velo:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.35) 35%,rgba(0,0,0,.85) 70%,#000 100%)}
  .tres{grid-template-columns:1fr}
  .pasos{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .pasos,.proceso .pasos{grid-template-columns:1fr}
  .btns .btn{width:100%}
  .link-top{display:none}
}

/* ajustes de encuadre: fotos más chicas para que se vean enteras (solo escritorio) */
@media (min-width:881px){
  .proceso .fondo{background-size:72% auto;background-repeat:no-repeat;background-position:right center}
  .proceso .velo{--velo:linear-gradient(90deg,#000 0%,#000 28%,rgba(0,0,0,.4) 40%,transparent 52%),linear-gradient(180deg,#000 0%,#000 22%,transparent 34%,transparent 68%,#000 78%,#000 100%)}
  .cierre .fondo{background-size:auto 106%;background-repeat:no-repeat;background-position:center 0}
  .cierre .velo{--velo:linear-gradient(90deg,#000 0%,#000 30%,rgba(0,0,0,.5) 36%,transparent 45%,transparent 55%,rgba(0,0,0,.5) 64%,#000 70%,#000 100%),linear-gradient(180deg,rgba(0,0,0,.35) 0%,transparent 25%,rgba(0,0,0,.25) 55%,rgba(0,0,0,.92) 100%)}
}

/* pack con la foto de fondo */
.pack .fondo{--luz:1;--pos:right center}
.pack .velo{--velo:linear-gradient(90deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.6) 30%,rgba(0,0,0,.05) 45%,transparent 60%),linear-gradient(180deg,#000 0%,transparent 12%,transparent 88%,#000 100%)}
.pack .pack-card{max-width:560px;background:rgba(12,10,18,.55);border-color:rgba(255,255,255,.12);color:var(--ph-fg);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)}
.pack .pack-card .eyebrow{color:#C9B3FF}
.pack .chico,.pack .precio .mon{color:var(--ph-muted)}
.pack .lista li::before{background-color:#8B5CF6}
@media (min-width:881px){
  .pack .fondo{background-size:100% auto;background-repeat:no-repeat;background-position:center}
  .pack .pack-card{max-width:500px}
  .pack .velo{--velo:linear-gradient(90deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.5) 30%,transparent 45%),linear-gradient(180deg,#000 0%,#000 16%,transparent 30%,transparent 72%,#000 86%,#000 100%)}
}
@media (max-width:880px){
  .pack .velo{--velo:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.35) 30%,rgba(0,0,0,.65) 70%,#000 100%)}
  /* pack en celular: foto vertical con tarjetas flotantes, por detrás del texto */
  .pack .fondo{background-image:url(/img/pack-cel.webp)!important;bottom:auto;height:178vw;background-size:100% auto;background-repeat:no-repeat;background-position:center 0}
  .pack .velo{bottom:auto;height:178vw;--velo:linear-gradient(180deg,rgba(0,0,0,.3) 0%,transparent 12%,transparent 40%,rgba(0,0,0,.45) 70%,#000 100%)}
  .pack .wrap{padding-top:64vw}
  .pack .pack-card{max-width:none;background:linear-gradient(180deg,rgba(10,8,16,.2) 0%,rgba(10,8,16,.5) 30%,rgba(10,8,16,.8) 60%);border-color:rgba(255,255,255,.12);-webkit-backdrop-filter:none;backdrop-filter:none}
  .pack .pack-card .h2,.pack .precio{text-shadow:0 2px 18px rgba(0,0,0,.7)}
  /* cómo trabajamos: la foto queda detrás del título, sin zoom */
  .proceso .fondo{bottom:auto;height:62vw;background-size:cover;--pos:70% center}
  .proceso .velo{--velo:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.25) 30%,rgba(0,0,0,.4) 50%,#000 62vw)}
  .proceso .fondo{height:78vw;--pos:68% 30%}
  .proceso .velo{--velo:linear-gradient(180deg,rgba(0,0,0,.35) 0%,transparent 18%,transparent 62vw,#000 78vw)}
  .proceso .cabeza{margin-top:calc(78vw - 150px);margin-bottom:32px}
}

/* titulitos violeta legible + cierre */
:root{--etiqueta:#6D3BE0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--etiqueta:#A07CFF}}
:root[data-theme="dark"]{--etiqueta:#A07CFF}
.eyebrow{color:var(--etiqueta)}
.foto .eyebrow,.pack .pack-card .eyebrow{color:#A07CFF;text-shadow:0 1px 10px rgba(0,0,0,.55)}
.pasos .vidrio::before{color:#A07CFF}
.cierre-tit{font-size:clamp(30px,10vw,76px)}
.cierre-tit .linea{white-space:nowrap}
.cierre-sub{margin:-8px 0 0;font-family:var(--label);font-size:clamp(22px,5.6vw,34px);font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.82)}

/* franja: refuerzo + rubros */
.franja{padding-block:clamp(64px,9vw,110px);text-align:center;border-bottom:1px solid var(--line)}
.franja .wrap{display:grid;justify-items:center;gap:14px}
.franja-tit{font-size:clamp(26px,3.6vw,46px);font-weight:600;letter-spacing:-.035em;line-height:1.1;max-width:18em;text-wrap:balance}
.franja-tit em{font-style:normal;color:var(--accent)}
.franja-sub{font-size:clamp(16px,1.4vw,18px);color:var(--muted);max-width:30em}
.rubros{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:640px}
.rubros li{font-family:var(--label);font-size:13px;font-weight:600;letter-spacing:.02em;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--fg)}
/* muestras: dentro de la portada, entre el texto y los botones; aparecen solas cuando hay videos en /videos */
.muestras[hidden]{display:none}
.muestras{margin:4px 0 6px}
.carril{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:400px}
.reel{position:relative;margin:0;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#111;border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 50px -20px rgba(0,0,0,.8);cursor:pointer}
.reel video{width:100%;height:100%;object-fit:cover;display:block}
.sonido{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);white-space:nowrap;border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font:600 10px/1 var(--label);letter-spacing:.03em;padding:7px 10px;border-radius:999px;cursor:pointer;transition:opacity .3s var(--ease)}
.reel.con-sonido .sonido{opacity:0}
@media (max-width:880px){
  .carril{display:flex;max-width:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:calc(-1*max(20px,env(safe-area-inset-left,0px)));padding-inline:max(20px,env(safe-area-inset-left,0px));scrollbar-width:none}
  .carril::-webkit-scrollbar{display:none}
  .reel{flex:0 0 40%;max-width:190px;scroll-snap-align:start}
  .carril{scroll-snap-type:x mandatory;scroll-padding-inline:max(20px,env(safe-area-inset-left,0px))}
}