/* Página de portafolio: variedad visual por bloques (webs, redes, logos, CRM e IA), con la marca de Volcana */
*{box-sizing:border-box}
body.portafolio{margin:0;color:#17062d;font-family:var(--brand-sans,'Bricolage Grotesque',Arial,sans-serif);-webkit-font-smoothing:antialiased;
  background:radial-gradient(ellipse 70% 40% at 0 0,rgba(200,164,255,.28),transparent 70%),radial-gradient(ellipse 60% 40% at 100% 30%,rgba(133,72,245,.12),transparent 70%),#faf7fd}
.portafolio h2 em,.lema,.pie h2 em{font-family:var(--brand-serif,'Instrument Serif',serif);font-style:italic;font-weight:400;letter-spacing:-.02em}

/* Cabecera: luz en movimiento, piezas flotando y cinta de categorías */
.banda{position:relative;color:#fff;overflow:hidden;isolation:isolate;background:#12041f}
.aurora{position:absolute;inset:0;z-index:-1;overflow:hidden}
.aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.75;animation:aurora 16s ease-in-out infinite alternate}
.aurora i:nth-child(1){width:620px;height:620px;left:-140px;top:-220px;background:#6c31dc}
.aurora i:nth-child(2){width:560px;height:560px;right:-120px;top:-80px;background:#a055ff;animation-duration:19s;animation-delay:-6s}
.aurora i:nth-child(3){width:520px;height:520px;left:38%;bottom:-320px;background:#4a1d9e;animation-duration:22s;animation-delay:-11s}
@keyframes aurora{0%{transform:translate(0,0) scale(1)}50%{transform:translate(80px,40px) scale(1.15)}100%{transform:translate(-60px,70px) scale(.95)}}
.banda::before{content:'';position:absolute;inset:0;z-index:-1;opacity:.5;background-image:linear-gradient(rgba(212,184,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(212,184,255,.07) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 70% 80% at 30% 40%,#000 30%,transparent 80%)}
.banda-barra,.banda-cuerpo{max-width:1240px;margin:0 auto;padding:0 22px}
.banda-barra{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:24px}
.volver img{display:block;width:132px;height:auto}
.banda-izq{display:flex;align-items:center;gap:18px}
.boton-volver{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1px solid rgba(212,184,255,.35);background:rgba(23,6,45,.45);backdrop-filter:blur(6px);color:#fff;text-decoration:none;font-size:14px;font-weight:700;transition:.2s}
.boton-volver:hover{background:#fff;color:#17062d;border-color:#fff}
.boton-volver span,.volver-flotante span{transition:transform .2s}
.boton-volver:hover span,.volver-flotante:hover span{transform:translateX(-3px)}
/* Botón flotante para volver: aparece al bajar por la página */
.volver-flotante{position:fixed;left:20px;bottom:20px;z-index:40;display:inline-flex;align-items:center;gap:8px;padding:13px 20px;border-radius:999px;background:#17062d;color:#fff;text-decoration:none;font-size:15px;font-weight:700;box-shadow:0 14px 40px rgba(23,6,45,.35),0 0 0 1px rgba(212,184,255,.25);opacity:0;transform:translateY(16px);pointer-events:none;transition:.3s}
.volver-flotante.visible{opacity:1;transform:none;pointer-events:auto}
.volver-flotante:hover{background:#743cf0}
.indice{display:flex;flex-wrap:wrap;gap:4px}
.indice a{color:#fff;text-decoration:none;padding:9px 16px;border-radius:999px;border:1px solid rgba(212,184,255,.25);background:rgba(23,6,45,.35);backdrop-filter:blur(6px);font-size:14px;letter-spacing:.06em;text-transform:uppercase;transition:.2s}
.indice a:hover{background:rgba(133,72,245,.55);border-color:transparent}
.banda-cuerpo{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:30px;align-items:center;min-height:560px;padding-bottom:40px}
.sello{display:inline-flex;align-items:center;gap:10px;margin:40px 0 0;padding:9px 18px 9px 12px;border-radius:999px;border:1px solid rgba(212,184,255,.3);background:rgba(46,19,73,.55);font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#e6cfff}
.sello span{width:9px;height:9px;border-radius:50%;background:#c8a4ff;box-shadow:0 0 0 0 rgba(200,164,255,.7);animation:latido 2.2s infinite}
@keyframes latido{70%{box-shadow:0 0 0 12px rgba(200,164,255,0)}100%{box-shadow:0 0 0 0 rgba(200,164,255,0)}}
.banda h1{margin:22px 0 0;font-size:clamp(42px,5.4vw,82px);font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:.92;
  background:linear-gradient(100deg,#fff 0%,#fff 38%,#d9bfff 48%,#fff 58%,#fff 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:brillo 7s ease-in-out infinite}
@keyframes brillo{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.lema{margin:26px 0 0;font-size:clamp(24px,2.7vw,38px);line-height:1.15;font-weight:700;letter-spacing:-.03em;color:#fff}
.lema em{font-family:var(--brand-serif,'Instrument Serif',serif);font-style:italic;font-weight:400;color:#c8a4ff}
.lema-2{margin:12px 0 0;font-family:var(--brand-serif,'Instrument Serif',serif);font-style:italic;font-size:clamp(20px,2vw,27px);color:#e3d2ff}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.boton-claro,.boton-borde{display:inline-flex;align-items:center;gap:8px;padding:15px 26px;border-radius:999px;text-decoration:none;font-size:16px;font-weight:700;transition:.25s}
.boton-claro{background:#fff;color:#17062d;box-shadow:0 14px 40px rgba(160,85,255,.35)}
.boton-claro:hover{transform:translateY(-2px);box-shadow:0 18px 50px rgba(160,85,255,.5)}
.boton-borde{color:#fff;border:1.5px solid rgba(212,184,255,.45)}
.boton-borde:hover{background:rgba(133,72,245,.4);border-color:transparent}
/* Piezas flotando */
.banda-piezas{position:relative;height:520px}
.flota{position:absolute;display:block;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(212,184,255,.18);animation:flota 7s ease-in-out infinite;animation-delay:calc(var(--k) * -1.2s);object-fit:cover}
@keyframes flota{0%,100%{translate:0 0}50%{translate:0 -16px}}
.flota.f-web{width:42%;aspect-ratio:350/412;left:4%;top:4%;rotate:-7deg}
.flota.f-logo{width:34%;aspect-ratio:330/286;right:2%;top:0;rotate:6deg;background:#fff;object-fit:contain}
.flota.f-post{width:32%;aspect-ratio:272/257;left:40%;top:30%;rotate:3deg;z-index:2}
.flota.f-pantalla{width:58%;aspect-ratio:16/10;object-position:0 0;right:-8%;bottom:4%;rotate:-4deg}
.flota.f-ancha{width:44%;aspect-ratio:527/408;left:-2%;bottom:0;rotate:4deg}
.flota.f-tel{width:20%;aspect-ratio:9/19;right:6%;top:30%;rotate:8deg;border-radius:20px;border:6px solid #07020e;object-position:top;z-index:3}
/* Cinta de categorías */
.cinta{position:relative;overflow:hidden;padding:15px 0;background:linear-gradient(100deg,#7134df,#8745f4);transform:rotate(-1.2deg);margin:0 -20px -6px;box-shadow:0 -10px 40px rgba(113,52,223,.35)}
.cinta-pista{display:flex;width:max-content;animation:cinta 28s linear infinite}
.cinta span{padding:0 20px;font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.cinta b{color:#e6cfff;font-weight:400}
@keyframes cinta{to{transform:translateX(-50%)}}

main{max-width:1240px;margin:0 auto;padding:0 22px}

/* Vídeos */
.intro-video{margin-top:56px}
.video{position:relative;margin:0;border-radius:18px;overflow:hidden;background:#17062d;box-shadow:0 40px 100px rgba(23,6,45,.28)}
.video video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.ampliar-video{position:absolute;right:18px;bottom:18px;width:52px;height:52px;border:0;border-radius:50%;background:rgba(133,72,245,.92);color:#fff;font-size:17px;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.videos{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.video-producto{margin:0}
.video-producto figcaption{display:flex;flex-direction:column;gap:4px;padding:18px 4px 0}
.video-producto figcaption strong{font-size:24px;letter-spacing:-.03em}
.video-producto figcaption span{color:#5f5470;font-size:16px;line-height:1.5}

/* Bloques */
.bloque{padding:96px 0 0;scroll-margin-top:84px}
.bloque-cab{display:grid;grid-template-columns:1fr minmax(0,440px);gap:12px 48px;align-items:end;margin-bottom:34px}
.etiqueta{grid-column:1/-1;margin:0;color:#743cf0;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.bloque h2{margin:0;font-size:clamp(40px,5.4vw,76px);line-height:.98;letter-spacing:-.05em;font-weight:700}
.bloque h2 em{display:block;color:#7134df;font-size:1.08em}
.bloque-cab>p:last-child{margin:0;color:#5f5470;font-size:18px;line-height:1.6}
.nota{margin:16px 0 0;color:#8a7e98;font-size:13px}

/* Rejillas */
.rejilla{display:grid;gap:14px}
.rejilla+.rejilla{margin-top:14px}
.r6{grid-template-columns:repeat(6,1fr)}
.r3{grid-template-columns:repeat(3,1fr)}
.r2{grid-template-columns:repeat(2,1fr)}
.ancho-2{grid-column:span 2}.ancho-3{grid-column:span 3}
.pieza{position:relative;margin:0;overflow:hidden;border-radius:12px;background:var(--fondo,#fff);box-shadow:0 18px 50px rgba(54,25,110,.12),0 0 0 1px rgba(116,60,240,.08);cursor:zoom-in}
.alto-web{aspect-ratio:350/412}.alto-ancha{aspect-ratio:527/408}.ancho-ancha{aspect-ratio:3/2}.sistemas .pieza{aspect-ratio:5/6}
.pieza img{display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.pieza figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:2px;padding:44px 18px 15px;color:#fff;background:linear-gradient(0deg,rgba(10,3,20,.78),transparent);opacity:0;transform:translateY(8px);transition:.35s}
.pieza figcaption strong{font-size:16px;letter-spacing:.02em}
.pieza figcaption span{font-size:13px;color:#dccdf2}
.pieza:hover figcaption,.pieza:focus-visible figcaption{opacity:1;transform:none}
.p-imagen img{width:100%;height:100%;object-fit:cover}
.p-imagen:hover img{transform:scale(1.04)}
.p-pantalla img{position:absolute;left:14%;top:14%;width:150%;max-width:none;border-radius:10px;box-shadow:0 30px 70px rgba(0,0,0,.45);transform:rotate(-4deg)}
.p-pantalla:hover img{transform:rotate(-2deg) translate(-3%,-2%)}
.p-movil img{position:absolute;left:50%;top:9%;width:56%;margin-left:-28%;border-radius:24px;border:7px solid #07020e;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.p-movil:hover img{transform:translateY(-3%)}
/* Logos: sobre blanco, enteros */
.logos .pieza{aspect-ratio:330/286;background:#fff}
.p-logo img{width:100%;height:100%;object-fit:contain;padding:6%}
.p-logo:hover img{transform:scale(1.04)}

/* Feeds de redes: marca a la izquierda, tres publicaciones */
.feeds{display:grid;gap:14px}
.feed{display:grid;grid-template-columns:200px 1fr;gap:14px;align-items:center}
.feed-marca strong{display:block;font-size:24px;line-height:1.05;letter-spacing:-.03em;text-transform:uppercase}
.feed-marca span{display:block;margin-top:10px;padding-top:10px;border-top:2px solid #17062d;width:max-content;color:#5f5470;font-size:15px}
.feed-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.post{aspect-ratio:272/257}

/* Cabecera y pie de la web: los mismos que en el resto de páginas (styles-v61, hero-v85, legal-v61) */
.desktop-nav a{white-space:nowrap}
.portafolio .banda-cuerpo{padding-top:96px}
/* Tipografía del hero como la de la home (.hero-title): Bricolage en negrita y Instrument Serif en cursiva para el remate */
.portafolio .banda-texto .sello{margin-top:22px;font-size:13px;font-weight:800;letter-spacing:.025em;text-transform:none}
.portafolio .banda h1{font-family:var(--brand-sans,'Bricolage Grotesque',Arial,sans-serif);font-size:clamp(48px,6.2vw,84px);font-weight:700;line-height:1.07;letter-spacing:-.045em;text-transform:none;background:none;color:#fff;animation:none}
.portafolio .lema{font-family:var(--brand-sans,'Bricolage Grotesque',Arial,sans-serif);font-style:normal;font-weight:700;font-size:clamp(26px,3vw,40px);line-height:1.1;letter-spacing:-.04em}
.portafolio .lema em{font-family:var(--brand-serif,'Instrument Serif',serif);font-style:italic;font-weight:400;font-size:1.06em;letter-spacing:-.025em;color:#c8a4ff}
.portafolio .lema-2{font-family:var(--brand-sans,'Bricolage Grotesque',Arial,sans-serif);font-style:normal;font-weight:400;font-size:20px;line-height:1.5;color:#e3d2ff}
/* Formulario de contacto de la home, al final del portafolio */
.portafolio .contact{margin-top:110px;scroll-margin-top:76px}

/* Visor */
.visor{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:4vw;background:rgba(10,3,20,.92)}
.visor[hidden]{display:none}
.visor-contenido video{display:block;max-width:92vw;max-height:86vh;border-radius:10px;box-shadow:0 40px 120px rgba(0,0,0,.6);background:#fff}
/* Las imágenes ocupan todo el visor sin recortarse, aunque su tamaño real sea menor que la pantalla */
.visor-contenido img{display:block;width:92vw;height:86vh;object-fit:contain;filter:drop-shadow(0 30px 80px rgba(0,0,0,.55))}
.cerrar{position:absolute;right:22px;top:16px;border:0;background:none;color:#fff;font-size:44px;line-height:1;cursor:pointer}

@media (max-width:900px){
  .bloque{padding-top:70px}
  .bloque-cab{grid-template-columns:1fr}
  .r6{grid-template-columns:repeat(2,1fr)}
  .r6 .ancho-2,.r6 .ancho-3{grid-column:span 1}
  .r6 .alto-ancha{grid-column:span 2}
  .feed{grid-template-columns:1fr}
  .pieza figcaption{opacity:1;transform:none;padding:28px 12px 10px}
  .pieza figcaption strong{font-size:13px}
  .pieza figcaption span{font-size:11px}
  .p-logo figcaption,.post figcaption{display:none}
  .banda-barra{flex-direction:column;align-items:flex-start}
  .banda-cuerpo{grid-template-columns:1fr;min-height:0}
  .banda-piezas{height:380px;margin-top:10px}
  .videos{grid-template-columns:1fr}
}
@media (max-width:560px){
  .r3{grid-template-columns:repeat(2,1fr)}
  .r2{grid-template-columns:1fr}
  .rejilla,.feeds,.feed-posts{gap:10px}
  .banda h1{margin-top:28px;letter-spacing:.1em}
}
@media (prefers-reduced-motion:reduce){.pieza img{transition:none}.aurora i,.flota,.cinta-pista,.banda h1,.sello span{animation:none}}

/* Móvil: todo centrado, como la home */
@media (max-width:760px){
  .portafolio .banda-texto,.portafolio .bloque-cab,.portafolio .feed-marca,.portafolio .nota{text-align:center}
  .portafolio .acciones{justify-content:center}
  .portafolio .feed-marca span{margin-left:auto;margin-right:auto}
  .portafolio .video-producto figcaption{align-items:center;text-align:center}
}
/* Menú de escritorio con Instagram y TikTok: más compacto en pantallas medianas; por debajo de 1100 px las redes quedan en el menú móvil y el pie */
@media(max-width:1400px){.desktop-nav a{padding:0 11px}}
@media(max-width:1200px){.desktop-nav a{padding:0 9px;gap:6px}.desktop-nav a i{display:none}}
@media(max-width:1100px){.desktop-nav a[href*="instagram.com"],.desktop-nav a[href*="tiktok.com"]{display:none}}
.site-header .brand{flex-shrink:0}

/* Webs: rejilla uniforme de 20 piezas (4 columnas; 2 en móvil), sin huecos */
.webs-grid{grid-template-columns:repeat(4,1fr)}
.webs-grid .pieza{aspect-ratio:6/5}
.webs-grid .p-imagen img{object-position:top center}
@media (max-width:900px){.webs-grid{grid-template-columns:repeat(2,1fr)}}

/* Hero: collage de webs y un móvil con texto real */
.banda-piezas .h-a{width:52%;aspect-ratio:6/5;left:0;top:2%;rotate:-5deg}
.banda-piezas .h-b{width:46%;aspect-ratio:5/4;left:36%;top:0;rotate:4deg;z-index:1}
.banda-piezas .h-c{width:30%;aspect-ratio:17/20;left:4%;bottom:0;rotate:4deg;z-index:2}
.banda-piezas .h-d{width:44%;aspect-ratio:9/7;left:30%;bottom:3%;rotate:-3deg;z-index:2}
.banda-piezas .h-a,.banda-piezas .h-b,.banda-piezas .h-c,.banda-piezas .h-d{object-position:top center}
.flota.f-movil{width:27%;aspect-ratio:9/19;right:1%;top:12%;rotate:6deg;z-index:5;border-radius:12% / 6%;background:#0c0716;padding:2.6%;container-type:inline-size;object-fit:initial}
.movil-pantalla{position:relative;height:100%;overflow:hidden;border-radius:10% / 4.8%;background:linear-gradient(180deg,#fbf8ff 0%,#f1e8ff 100%);display:flex;flex-direction:column;align-items:center;text-align:center;padding:16cqw 9cqw 0}
.movil-pantalla::before{content:"";position:absolute;top:3cqw;left:50%;width:30cqw;height:7cqw;margin-left:-15cqw;border-radius:99px;background:#0c0716}
.movil-logo{width:52cqw;height:auto;margin-bottom:6cqw}
.movil-eyebrow{margin:0 0 3cqw;font:800 6.4cqw/1.2 var(--brand-sans,'Bricolage Grotesque',Arial,sans-serif);letter-spacing:.06em;text-transform:uppercase;color:#743cf0}
.movil-titulo{margin:0;font:700 13cqw/1.02 var(--brand-sans,'Bricolage Grotesque',Arial,sans-serif);letter-spacing:-.04em;color:#17062d}
.movil-titulo em{display:block;font-family:var(--brand-serif,'Instrument Serif',serif);font-weight:400;font-style:italic;color:#743cf0;letter-spacing:-.02em}
.movil-boton{margin:7cqw 0 8cqw;padding:3.6cqw 7cqw;border-radius:99px;background:#743cf0;color:#fff;font:700 6.4cqw/1 var(--brand-sans,'Bricolage Grotesque',Arial,sans-serif);box-shadow:0 4cqw 10cqw rgba(116,60,240,.35)}
.movil-web{width:100%;flex:1;min-height:0;object-fit:cover;object-position:top;border-radius:6cqw 6cqw 0 0;box-shadow:0 -2cqw 8cqw rgba(23,6,45,.12)}
@media (max-width:900px){.flota.f-movil{width:34%;right:0;top:8%}}@media (max-width:900px){.portafolio .banda-piezas{height:auto;aspect-ratio:10/9;max-width:560px;margin-left:auto;margin-right:auto;width:100%}}
.movil-web{object-position:left top}

/* Móvil del hero: mockup profesional (marco de titanio, botones, bisel, isla dinámica, barra de estado y reflejo) */
.flota.f-movil{padding:1.7cqw;border-radius:17cqw;background:linear-gradient(145deg,#6b6476 0%,#26222d 14%,#0d0c11 45%,#1f1c25 78%,#5d5669 100%);box-shadow:0 46px 90px rgba(5,0,20,.6),0 14px 30px rgba(5,0,20,.35),inset 0 0 0 .5cqw rgba(255,255,255,.14),inset 0 0 0 1.2cqw rgba(0,0,0,.35)}
.flota.f-movil::before{content:"";position:absolute;left:-.9cqw;top:20%;width:1.2cqw;height:7%;border-radius:1cqw 0 0 1cqw;background:linear-gradient(90deg,#4b4555,#1c1922);box-shadow:0 11cqw 0 #2a2632,0 22cqw 0 #2a2632}
.flota.f-movil::after{content:"";position:absolute;right:-.9cqw;top:27%;width:1.2cqw;height:11%;border-radius:0 1cqw 1cqw 0;background:linear-gradient(270deg,#4b4555,#1c1922)}
.movil-bisel{height:100%;padding:2.6cqw;border-radius:15.5cqw;background:#030205}
.movil-pantalla{border-radius:13cqw;padding:15cqw 8cqw 0;isolation:isolate}
.movil-pantalla::before{top:3.4cqw;width:27cqw;height:7.8cqw;margin-left:-13.5cqw;background:#000;z-index:3}
.movil-pantalla::after{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;background:linear-gradient(118deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.08) 22%,rgba(255,255,255,0) 40%);pointer-events:none}
.movil-estado{position:absolute;top:4.6cqw;left:9cqw;right:8cqw;display:flex;justify-content:space-between;align-items:center;font:700 5cqw/1 var(--brand-sans,'Bricolage Grotesque',Arial,sans-serif);color:#17062d}
.movil-estado i{width:9cqw;height:4.2cqw;border:.5cqw solid #17062d;border-radius:1.4cqw;background:linear-gradient(90deg,#17062d 70%,transparent 70%);background-clip:content-box;padding:.5cqw}

/* Showreel: plano en perspectiva con tres filas de webs en bucle (sustituye al vídeo) */
.showreel{position:relative;margin-top:56px;overflow:hidden;border-radius:28px;background:radial-gradient(900px 500px at 80% 0%,rgba(116,60,240,.55),transparent 60%),radial-gradient(700px 500px at 0% 100%,rgba(200,164,255,.22),transparent 60%),#12051f;box-shadow:0 40px 100px rgba(23,6,45,.28);min-height:560px;display:grid;align-items:center}
.sr-escena{position:absolute;inset:0;perspective:1400px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 100%)}
.sr-plano{position:absolute;left:18%;right:-40%;top:50%;display:grid;gap:22px;transform:translateY(-50%) rotateX(22deg) rotateY(-18deg) rotateZ(6deg);transform-style:preserve-3d}
.sr-fila{overflow:visible}
.sr-pista{display:flex;gap:22px;width:max-content;animation:sr-mov 70s linear infinite}
.sr-der .sr-pista{animation-direction:reverse;animation-duration:80s}
.sr-fila:nth-child(3) .sr-pista{animation-duration:90s}
@keyframes sr-mov{to{transform:translateX(-50%)}}
.sr-card{position:relative;flex:none;width:300px;aspect-ratio:6/5;margin:0;overflow:hidden;border-radius:14px;background:#fff;box-shadow:0 30px 60px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.12)}
.sr-card::before{content:"";position:absolute;inset:0 0 auto;height:18px;z-index:1;background:#f3eff9 radial-gradient(circle,#ff5f57 3px,transparent 3.5px) 10px 50%/12px 12px no-repeat}
.sr-card img{position:absolute;top:18px;left:0;width:100%;height:calc(100% - 18px);object-fit:cover;object-position:top}
.sr-texto{position:relative;z-index:2;max-width:430px;padding:56px 0 56px 56px;color:#fff}
.sr-texto::before{content:"";position:absolute;inset:-40px -120px -40px -60px;z-index:-1;background:radial-gradient(closest-side,rgba(18,5,31,.92),rgba(18,5,31,.7) 60%,transparent)}
.sr-sello{display:inline-flex;align-items:center;gap:9px;margin:0 0 18px;padding:7px 14px;border:1px solid rgba(200,164,255,.35);border-radius:999px;background:rgba(116,60,240,.22);font-size:13px;font-weight:800;letter-spacing:.04em}
.sr-sello span{width:8px;height:8px;border-radius:50%;background:#ff4d6d;box-shadow:0 0 0 0 rgba(255,77,109,.6);animation:sr-rec 1.6s ease-out infinite}
@keyframes sr-rec{70%{box-shadow:0 0 0 9px rgba(255,77,109,0)}100%{box-shadow:0 0 0 0 rgba(255,77,109,0)}}
.sr-texto h2{margin:0;font-family:var(--brand-sans,'Bricolage Grotesque',Arial,sans-serif);font-size:clamp(34px,4vw,54px);font-weight:700;line-height:1.02;letter-spacing:-.045em}
.sr-texto h2 em{display:block;font-family:var(--brand-serif,'Instrument Serif',serif);font-weight:400;font-style:italic;color:#c8a4ff;letter-spacing:-.02em}
.sr-texto p:not(.sr-sello){margin:18px 0 26px;color:#e3d2ff;font-size:17px;line-height:1.55}
@media (max-width:900px){
  .showreel{min-height:0;display:flex;flex-direction:column-reverse}
  .sr-escena{position:relative;height:300px;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
  .sr-plano{left:-30%;right:-30%;gap:14px;transform:translateY(-50%) rotateX(18deg) rotateZ(-6deg)}
  .sr-pista{gap:14px}
  .sr-card{width:200px;border-radius:10px}
  .sr-texto{max-width:none;padding:36px 22px 8px;text-align:center}
  .sr-texto::before{display:none}
}
@media (prefers-reduced-motion:reduce){.sr-pista,.sr-sello span{animation:none}}.flota.f-movil{padding:1.7%;border-radius:17% / 8%;box-shadow:0 46px 90px rgba(5,0,20,.6),0 14px 30px rgba(5,0,20,.35),inset 0 0 0 1.5px rgba(255,255,255,.16),inset 0 0 0 4px rgba(0,0,0,.35)}
@media (max-width:900px){.showreel{align-items:stretch}.sr-escena{width:100%}}

/* Las <img> llevan width/height reales (evitan saltos al cargar); el alto lo decide siempre el CSS o la proporción */
:where(img[width][height]){width:auto;height:auto}