@font-face{font-family:"Aeonik";src:url("marca/Aeonik-Regular.woff2") format("woff2");font-weight:300 400;font-display:swap}
@font-face{font-family:"Aeonik";src:url("marca/Aeonik-medium.woff2") format("woff2");font-weight:380 500;font-display:swap}
@font-face{font-family:"Aeonik";src:url("marca/Aeonik-Bold.woff2") format("woff2");font-weight:600 800;font-display:swap}

:root{
  --negro:#030407;--negro2:#080910;--panel:#0d0f17;
  --tinta:#f7f5f1;--tenue:rgba(247,245,241,.66);--suave:rgba(247,245,241,.42);
  --linea:rgba(255,255,255,.12);--linea2:rgba(255,255,255,.07);
  --violeta:#a786ff;--azul:#82aaff;
  --fila:250px;--hueco:6px;--lado:clamp(16px,4vw,48px);
  --curva:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--negro);color:var(--tinta);font-family:"Aeonik",system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:380;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.022;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:256px}
body.bloqueado{overflow:hidden}
[hidden]{display:none!important}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--violeta);outline-offset:3px}

/* Botón píldora de la web DrBrand, en versión contenida */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:0 22px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.03));box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 18px 60px rgba(0,0,0,.4);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;transition:transform .2s var(--curva),border-color .2s,background .2s}
.pill:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.3)}
.pill:active{transform:scale(.97)}
.pill-luz{background:var(--tinta);color:var(--negro);border-color:var(--tinta);box-shadow:0 14px 50px rgba(0,0,0,.4)}
.pill-sm{min-height:36px;padding:0 15px;font-size:.66rem}
.pill[aria-disabled=true]{opacity:.45;pointer-events:none}

/* Cabecera */
.cab{position:fixed;inset:0 0 auto;z-index:40;height:68px;padding:0 var(--lado);padding-top:env(safe-area-inset-top);display:flex;align-items:center;justify-content:space-between;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.cab.solida{background:rgba(3,4,7,.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:var(--linea2)}
.cab-marca img{width:112px;height:auto}

/* Portada */
.portada{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:120px var(--lado) clamp(44px,8vh,90px);overflow:hidden}
.portada-img{position:absolute;inset:0}
.portada-img img{width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity 1.2s ease,transform 2.4s var(--curva)}
.portada-img img.lista{opacity:.82;transform:none}
.portada::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,4,7,.55) 0%,rgba(3,4,7,0) 28%,rgba(3,4,7,.25) 55%,rgba(3,4,7,.94) 100%),linear-gradient(90deg,rgba(3,4,7,.55),rgba(3,4,7,0) 65%)}
.portada-txt{position:relative;z-index:2;max-width:980px}
.antetitulo{display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--violeta);margin-bottom:18px}
h1{margin:0;font-weight:300;font-size:clamp(46px,8.2vw,132px);line-height:.9;letter-spacing:-.06em;text-wrap:balance}
.portada-meta{margin:22px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--tenue);font-size:clamp(15px,1.3vw,18px);line-height:1.45}
.portada-meta span:empty{display:none}
.portada-acc{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* Filtros por carpeta */
.filtros{position:sticky;top:67px;z-index:30;background:rgba(3,4,7,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--linea2);scroll-margin-top:67px}
.filtros-in{display:flex;gap:8px;overflow-x:auto;padding:12px var(--lado);scrollbar-width:none;scroll-snap-type:x proximity}
.filtros-in::-webkit-scrollbar{display:none}
.chip{flex:none;scroll-snap-align:start;border:1px solid var(--linea);border-radius:999px;padding:9px 15px;font-size:14px;color:var(--tenue);background:rgba(255,255,255,.02);white-space:nowrap;transition:color .2s,border-color .2s,background .2s}
.chip:hover{color:var(--tinta)}
.chip.actual{color:var(--tinta);border-color:rgba(167,134,255,.55);background:rgba(167,134,255,.12);box-shadow:0 0 22px rgba(167,134,255,.2)}
.chip[aria-selected=true]{color:var(--negro);background:var(--tinta);border-color:var(--tinta)}
.chip small{opacity:.55;margin-left:6px;font-size:12px}

/* Aviso temporal */
.nota{margin:18px 0 -14px;color:var(--suave);font-size:13px;line-height:1.5;letter-spacing:.01em}
body.incrustada .nota{margin:16px 0 -14px}

/* Secciones y cuadrícula justificada */
main{padding:10px var(--lado) 120px;min-height:60vh}
.seccion{padding-top:clamp(40px,6vw,72px);scroll-margin-top:130px}
.seccion-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-bottom:20px}
.seccion-cab h2{margin:0;font-weight:380;font-size:clamp(26px,3vw,42px);line-height:1.02;letter-spacing:-.035em;max-width:820px}
.seccion-cab h2 span{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--suave);margin-bottom:10px;font-weight:380}
.seccion-acc{display:flex;gap:8px;flex-wrap:wrap}
.rejilla{display:flex;flex-wrap:wrap;gap:var(--hueco)}
.rejilla::after{content:"";flex-grow:1e4}
.mini{position:relative;display:block;overflow:hidden;background:var(--panel);border-radius:4px;cursor:zoom-in}
.mini i{display:block}
.mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease,transform .6s var(--curva)}
.mini img.lista{opacity:1}
.mini:hover img{transform:scale(1.025)}
.mini::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 0 var(--violeta);transition:box-shadow .2s;pointer-events:none}
.mini.sel::after{box-shadow:inset 0 0 0 3px var(--violeta)}
.mini.video{cursor:pointer}
.mini.video .marcar{display:none}
.insignia{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;display:grid;place-items:center;background:rgba(3,4,7,.55);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none;transition:transform .25s var(--curva)}
.insignia svg{width:22px;height:22px;margin-left:3px;fill:#fff;stroke:none}
.mini.video:hover .insignia{transform:scale(1.08)}
.duracion{position:absolute;left:10px;bottom:10px;padding:4px 8px;border-radius:6px;background:rgba(3,4,7,.6);font-size:12px;letter-spacing:.04em;pointer-events:none}
.caja-escena video{max-width:100%;max-height:100%;width:auto;height:auto;background:#000;outline:none}
.caja.video .flecha{opacity:0;pointer-events:none}
.marcar{position:absolute;top:0;right:0;width:48px;height:48px;display:grid;place-items:center;opacity:0;transition:opacity .2s}
.marcar span{width:26px;height:26px;border-radius:50%;border:1.6px solid rgba(255,255,255,.92);background:rgba(3,4,7,.28);box-shadow:0 2px 10px rgba(0,0,0,.35);display:grid;place-items:center;transition:background .15s,border-color .15s,transform .15s}
.marcar svg{width:15px;height:15px;stroke-width:2.4;opacity:0}
.mini:hover .marcar,.mini.sel .marcar,body.con-sel .marcar{opacity:1}
.mini.sel .marcar span{background:var(--violeta);border-color:var(--violeta)}
.mini.sel .marcar svg{opacity:1;color:var(--negro)}
.marcar:active span{transform:scale(.9)}
@media (hover:none){.marcar{opacity:1}}

/* Pie */
.pie{border-top:1px solid var(--linea2);padding:48px var(--lado) calc(110px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.pie img{width:104px;opacity:.85}
.pie p{margin:0;color:var(--suave);font-size:14px}
.pie a{color:var(--tenue);border-bottom:1px solid var(--linea)}

/* Barra de selección */
.barra-sel{position:fixed;z-index:45;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:8px 8px 8px 20px;border-radius:999px;background:rgba(13,15,23,.9);border:1px solid var(--linea);box-shadow:0 24px 80px rgba(0,0,0,.6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);max-width:calc(100% - 24px);animation:sube .35s var(--curva)}
.barra-sel #sel-n{font-size:15px;white-space:nowrap}
.barra-sel #sel-n b{color:var(--violeta);font-weight:500}
.txt{font-size:14px;color:var(--tenue);padding:8px 4px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--linea)}
@keyframes sube{from{transform:translate(-50%,20px);opacity:0}}

/* Hoja de descarga */
.hoja{position:fixed;inset:0;z-index:70;display:grid;place-items:end center;background:rgba(0,0,0,.55);backdrop-filter:blur(4px)}
.hoja-in{width:min(100%,460px);margin:12px;margin-bottom:calc(12px + env(safe-area-inset-bottom));padding:24px;border-radius:26px;background:var(--panel);border:1px solid var(--linea);box-shadow:0 30px 120px rgba(0,0,0,.6);animation:sube2 .3s var(--curva)}
@keyframes sube2{from{transform:translateY(24px);opacity:0}}
.hoja-in p{margin:0 0 16px;font-size:17px;line-height:1.4}
.progreso{height:4px;border-radius:4px;background:var(--linea2);overflow:hidden;margin-bottom:20px}
.progreso i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--azul),var(--violeta));transition:width .2s}
.hoja-acc{display:flex;flex-direction:column;gap:10px}
.hoja-acc .pill{width:100%}

/* Caja de foto ampliada */
.caja{position:fixed;inset:0;z-index:60;background:#000;display:flex;flex-direction:column;touch-action:none;user-select:none;-webkit-user-select:none}
.caja-sup{position:absolute;inset:0 0 auto;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:calc(8px + env(safe-area-inset-top)) 10px 8px 20px;background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,0));transition:opacity .25s}
.caja-cont{font-size:14px;color:var(--tenue);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.caja-cont b{color:var(--tinta);font-weight:380}
.caja-bot{display:flex;gap:2px;flex:none}
.ico{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:var(--tinta);transition:background .2s}
.ico:hover{background:rgba(255,255,255,.08)}
#caja-sel.activo svg circle{fill:var(--violeta);stroke:var(--violeta)}
#caja-sel.activo svg path{stroke:var(--negro)}
.caja-escena{position:relative;flex:1;min-height:0;overflow:hidden;display:grid;grid-template:100% / 100%;place-items:center}
.caja-escena img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transform-origin:center center;will-change:transform;transition:opacity .25s}
.caja-escena img.cargando{opacity:.35}
.caja.zoom .caja-escena{cursor:grab}
.flecha{position:absolute;top:50%;z-index:3;width:56px;height:56px;margin-top:-28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid var(--linea2);transition:background .2s,opacity .2s}
.flecha:hover{background:rgba(255,255,255,.14)}
.flecha.ant{left:16px}.flecha.sig{right:16px}
.flecha[disabled]{opacity:0;pointer-events:none}
.caja.zoom .flecha,.caja.limpia .caja-sup,.caja.limpia .flecha{opacity:0;pointer-events:none}
@media (hover:none),(max-width:700px){.flecha{display:none}}

/* Aviso */
.aviso{position:fixed;z-index:80;left:50%;top:calc(80px + env(safe-area-inset-top));transform:translate(-50%,-10px);padding:11px 18px;border-radius:999px;background:var(--tinta);color:var(--negro);font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:calc(100% - 32px);text-align:center}
.aviso.ver{opacity:1;transform:translate(-50%,0)}

@media (max-width:700px){
  :root{--fila:112px;--hueco:4px}
  .cab{height:60px}.filtros{top:59px}.cab-marca img{width:96px}
  .portada-acc .pill{flex:1}
  .barra-sel{width:calc(100% - 24px);justify-content:space-between}
}
/* Modo incrustado (?incrustada): solo filtros y cuadrícula */
body.incrustada .portada,body.incrustada .pie{display:none}
body.incrustada .cab{height:56px;padding:0 14px}
body.incrustada .cab-marca img{width:92px}
body.incrustada #cab-todo{display:inline-flex}
body.incrustada .filtros{top:55px}
body.incrustada main{padding:56px 12px 90px}
body.incrustada .seccion{padding-top:22px}
body.incrustada .mini{cursor:pointer}
body.incrustada .enlace-completa{display:flex;justify-content:center;padding:28px 0 8px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}