/* Generado por scripts/build-page-css.py; editar las hojas fuente.
   Fuentes SIL OFL: /assets/fonts/fraunces/OFL.txt y /assets/fonts/instrument-sans/OFL.txt. */
/* Fuente: /css/fonts.css */
@font-face{font-family: "Fraunces"; font-style: italic; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/fraunces/fraunces-latin-italic.woff2) format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family: "Fraunces"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/fraunces/fraunces-latin-normal.woff2) format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family: "Instrument Sans"; font-style: italic; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url(/assets/fonts/instrument-sans/instrument-sans-latin-italic.woff2) format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url(/assets/fonts/instrument-sans/instrument-sans-latin-normal.woff2) format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* 15. Tratamiento "neon glass" (direccion aprobada el 30 ago 2026) ----
   Vidrio + neon SOBRE los tokens Lienzo: paleta, tipografia y logo no
   cambian; cambia la superficie. Vocabulario adaptado de la plantilla
   MIT "Neon Glass Context Menu" de codepen.io/themrsami (Copyright (c)
   2026 themrsami), traducido a violeta/turquesa/ambar.
   Guardas de rendimiento:
   - backdrop-filter solo en pantallas >=768px: en movil la tarjeta sigue
     siendo el panel opaco de siempre (el blur en scroll tactil cuesta).
   - El barrido de brillo y el borde-degradado solo animan al hover.
   - Los iconos 3D flotan con `translate` (compositor) y el hover usa
     `scale`/`rotate` como propiedades independientes: no compiten con
     la animacion por `transform`. Con reduced-motion, todo quieto. */
/* Fuente: /css/site.css */
:root{--font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Instrument Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --radius-sm: 10px; --radius: 16px; --radius-lg: 24px; --ease: cubic-bezier(0.32, 0.72, 0, 1); --rebote: cubic-bezier(0.34, 1.56, 0.64, 1); --shell: 1160px;}
[data-theme="dark"]{--bg: #0a0a0f; --bg-soft: #101018; --panel: rgba(255, 255, 255, 0.04); --panel-hover: rgba(255, 255, 255, 0.07); --line: rgba(255, 255, 255, 0.09); --line-strong: rgba(255, 255, 255, 0.2); --text: #f4f3f8; --muted: #a2a1b3;  --faint: #7f7e91; --violeta: #8b7bff; --turquesa: #35d6c8; --ambar: #ffb454; --coral: #ff7a68; --accent-ink: #0a0a12; --shadow: 0 20px 44px -20px rgba(0, 0, 0, 0.85); --header-bg: rgba(10, 10, 15, 0.78);  --vidrio-bg: rgba(16, 16, 26, 0.52); --vidrio-bg-fuerte: rgba(12, 12, 19, 0.82); --vidrio-linea: rgba(255, 255, 255, 0.12); --vidrio-sombra: 0 14px 44px rgba(0, 0, 0, 0.45); --code-bg: rgba(0, 0, 0, 0.45); color-scheme: dark;}
[data-theme="light"]{--bg: #f6f4ef; --bg-soft: #fffdf9; --panel: #fffdf9; --panel-hover: #ffffff; --line: rgba(24, 22, 40, 0.11); --line-strong: rgba(24, 22, 40, 0.24); --text: #17161f; --muted: #5d5c6e;  --faint: #6f6e7f; --violeta: #5b46e8; --turquesa: #0d9488; --ambar: #d97a06; --coral: #e2543f; --accent-ink: #ffffff; --shadow: 0 18px 38px -22px rgba(30, 25, 60, 0.4); --header-bg: rgba(246, 244, 239, 0.82); --vidrio-bg: rgba(252, 250, 245, 0.55); --vidrio-bg-fuerte: rgba(250, 248, 243, 0.88); --vidrio-linea: rgba(24, 22, 40, 0.12); --vidrio-sombra: 0 14px 40px rgba(30, 25, 60, 0.22); --code-bg: #12121a; color-scheme: light;}
*{box-sizing: border-box;}
html{scroll-behavior: smooth;}
body{margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden;}
body.is-locked{overflow: hidden;}
.shell{width: min(var(--shell), 100% - 3rem); margin-inline: auto; position: relative; z-index: 1;}
h1,h2,h3,h4{font-family: var(--font-display); font-weight: 560; line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 0.5em; text-wrap: balance;}
p{margin: 0 0 1em;}
a{color: inherit;}
img,svg{max-width: 100%;}
::selection{background: color-mix(in oklab, var(--violeta) 40%, transparent);}
.glow{position: fixed; inset: -30vh -10vw auto; height: 92vh; pointer-events: none; z-index: 0; background: radial-gradient(40rem 30rem at 18% 14%, color-mix(in oklab, var(--violeta) 26%, transparent), transparent 70%), radial-gradient(34rem 26rem at 82% 6%, color-mix(in oklab, var(--turquesa) 18%, transparent), transparent 70%), radial-gradient(26rem 22rem at 55% 30%, color-mix(in oklab, var(--ambar) 9%, transparent), transparent 70%); filter: blur(22px); opacity: 0.5;}
[data-theme="light"] .glow{opacity: 0.3;}
.site-header{position: sticky; top: 0; z-index: 40; background: var(--vidrio-bg); backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8); border-bottom: 1px solid var(--vidrio-linea); transition: background-color 300ms ease, box-shadow 300ms ease;}
.site-header.con-sombra{background: var(--vidrio-bg-fuerte); box-shadow: var(--vidrio-sombra);}
@supports not (backdrop-filter: blur(1px)){.site-header{background: var(--header-bg);}}
.site-header__inner{display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.8rem;}
.brand{display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; font-weight: 700; letter-spacing: -0.01em;}
.brand__lockup{display: flex; flex-direction: column; gap: 0.3rem; line-height: 1.1;}
.brand__logo{display: block; width: 172px; height: auto; color: var(--text); transition: transform 400ms var(--ease);}
.brand:hover .brand__logo{transform: scale(1.04);}
.brand__tagline{font-family: var(--font-body); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.02em; color: var(--muted); white-space: nowrap;}
@media (max-width: 620px){.brand__tagline{display: none;}}
.site-nav{display: flex; align-items: center; gap: 0.35rem;}
.site-nav a{text-decoration: none; color: var(--muted); font-weight: 600; font-size: 0.95rem; padding: 0.45rem 0.8rem; border-radius: 999px; transition: color 180ms ease, background-color 180ms ease;}
.site-nav a:hover{color: var(--text); background: var(--panel-hover);}
.site-nav a[aria-current="page"]{color: var(--text); background: var(--panel); border: 1px solid var(--line);}
.site-nav a.nav-yt{color: var(--ambar); background: color-mix(in srgb, var(--ambar) 16%, transparent); border: 1px solid color-mix(in srgb, var(--ambar) 42%, transparent); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); box-shadow: 0 2px 10px color-mix(in srgb, var(--ambar) 18%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text) 12%, transparent); transition: background 240ms ease, box-shadow 240ms ease;}
:root[data-theme="light"] .site-nav a.nav-yt{color: #7a4a00; background: color-mix(in srgb, var(--ambar) 34%, transparent); border-color: color-mix(in srgb, #7a4a00 30%, transparent);}
.site-nav a.nav-yt:hover{background: color-mix(in srgb, var(--ambar) 28%, transparent); box-shadow: 0 4px 18px color-mix(in srgb, var(--ambar) 30%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text) 16%, transparent);}
.nav-toggle{display: none; border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: var(--radius-sm); padding: 0.5rem 0.65rem; cursor: pointer;}
.theme-btn{border: 1px solid var(--line); background: var(--panel); color: var(--text); width: 38px; height: 38px; border-radius: 50%; display: inline-grid; place-items: center; cursor: pointer; font-size: 1rem; transition: transform 300ms var(--ease), background-color 180ms ease;}
.theme-btn:hover{transform: rotate(20deg); background: var(--panel-hover);}
.espacio-btn{text-decoration: none; transition: transform 300ms var(--ease), background-color 180ms ease, border-color 180ms ease;}
.espacio-btn:hover{transform: translateY(-1px); background: var(--panel-hover);}
.espacio-btn svg{display: block; width: 18px; height: 18px;}
.espacio-btn .espacio-btn__punto{fill: var(--faint); transition: fill 300ms ease;}
.espacio-btn.tiene-perfil .espacio-btn__punto{fill: var(--color-perfil, var(--violeta));}
.espacio-btn.tiene-perfil{border-color: color-mix(in oklab, var(--color-perfil, var(--violeta)) 55%, var(--line));}
.nav-scrim{position: fixed; inset: 0; z-index: 38; background: color-mix(in oklab, var(--bg) 55%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity 300ms ease;}
.nav-scrim.is-visible{opacity: 1; pointer-events: auto;}
.site-footer{margin-top: clamp(4rem, 9vw, 7rem); border-top: 1px solid var(--line); background: var(--bg-soft);}
.site-footer__grid{display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; padding-block: 3rem 2.4rem;}
.site-footer h4{font-size: 1rem; margin-bottom: 0.9rem;}
.site-footer ul{list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem;}
.site-footer a{color: var(--muted); text-decoration: none;}
.site-footer a:hover{color: var(--text); text-decoration: underline;}
.site-footer__tag{color: var(--muted); max-width: 34ch;}
.redes,.site-footer .redes{display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 1.1rem 0 0; padding: 0; list-style: none;}
.redes__item,.site-footer .redes__item{display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.45rem 0.9rem 0.45rem 0.65rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 0.86rem; font-weight: 500; text-decoration: none; transition: color 0.15s, border-color 0.15s, background-color 0.15s;}
.redes__item:hover,.redes__item:focus-visible,.site-footer .redes__item:hover,.site-footer .redes__item:focus-visible{color: var(--text); border-color: var(--line-strong); background: var(--panel-hover); text-decoration: none;}
.redes__item svg{width: 20px; height: 20px; flex: none;}
@media (prefers-reduced-motion: reduce){.redes__item{transition: none;}}
.site-footer__bottom{border-top: 1px solid var(--line); padding-block: 1.1rem; display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: space-between; color: var(--faint); font-size: 0.86rem;}
.btn{display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.72rem 1.3rem; border-radius: 999px; border: 0; font: 600 0.98rem var(--font-body); text-decoration: none; cursor: pointer; transition: transform 200ms var(--ease), box-shadow 200ms ease, filter 160ms ease;}
.btn--primary{background: linear-gradient(120deg, var(--violeta), color-mix(in oklab, var(--violeta) 60%, var(--turquesa))); color: #fff; box-shadow: 0 10px 26px -12px color-mix(in oklab, var(--violeta) 70%, transparent);}
[data-theme="light"] .btn--primary{color: #fff;}
.btn--primary:hover{transform: translateY(-2px); filter: brightness(1.06);}
.btn--ghost{background: var(--panel); border: 1px solid var(--line-strong); color: var(--text);}
.btn--ghost:hover{transform: translateY(-2px); background: var(--panel-hover);}
.eyebrow{display: inline-flex; align-items: center; gap: 0.5rem; font: 700 0.78rem/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--turquesa); margin: 0 0 1rem;}
.eyebrow::before{content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor;}
.hero{padding-block: clamp(3.6rem, 8vw, 6.5rem) clamp(2.2rem, 5vw, 4rem); position: relative;}
.hero h1{font-size: clamp(2.6rem, 6.4vw, 4.6rem); max-width: 15ch; margin-bottom: 0.4em;}
.hero .lede{font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--muted); max-width: 56ch;}
.logo-lienzo{display: block; width: min(100%, 460px); height: auto; color: var(--text);}
.site-footer .logo-lienzo{width: min(100%, 280px); transition: transform 400ms var(--ease);}
.site-footer .brand:hover .logo-lienzo{transform: scale(1.03);}
.section{padding-block: clamp(2.6rem, 6vw, 4.6rem);}
.prose{max-width: 720px; margin-inline: auto;}
.prose h1{font-size: clamp(2rem, 4.6vw, 3rem);}
.prose h2{font-size: 1.55rem; margin-top: 2.2em; padding-top: 1.2em; border-top: 1px solid var(--line);}
.prose h3{font-size: 1.2rem; margin-top: 1.8em;}
.prose h2[id],.prose h3[id]{scroll-margin-top: 7rem;}
.prose p,.prose li{color: color-mix(in oklab, var(--text) 88%, var(--muted));}
.prose ul,.prose ol{padding-left: 1.3rem;}
.prose li{margin-bottom: 0.45em;}
.prose a:not(.btn){color: var(--violeta); text-decoration-thickness: 1.5px; text-underline-offset: 3px;}
.prose blockquote{margin: 1.6em 0; padding: 0.9em 1.3em; border-left: 3px solid var(--ambar); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--panel); font-family: var(--font-display); font-style: italic; font-size: 1.08em;}
.prose code{font-family: var(--font-mono); font-size: 0.88em; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 0.12em 0.4em;}
.prose pre{background: var(--code-bg); color: #e9e6ff; border-radius: var(--radius); padding: 1.1rem 1.3rem; overflow-x: auto; font: 0.86rem/1.65 var(--font-mono);}
.prose pre code{background: none; border: 0; padding: 0; color: inherit;}
.prose img{border-radius: var(--radius); border: 1px solid var(--line);}
.ad-slot{display: none; min-height: 90px; margin: 2.2em auto; place-items: center; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--faint); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;}
.muestra-escenas li:nth-child(2) img{animation-duration: 13s; transform-origin: 70% 30%;}
.muestra-escenas li:nth-child(3) img{animation-duration: 16s; transform-origin: 30% 65%; animation-delay: -6s;}
.muestra-escenas li:nth-child(4) img{animation-duration: 12s; transform-origin: 62% 58%; animation-delay: -3s;}
.muestra-escenas li:nth-child(5) img{animation-duration: 15s; transform-origin: 45% 35%; animation-delay: -9s;}
@keyframes escena-viva{from { transform: scale(1.02) translate3d(-0.8%, 0.4%, 0); } to { transform: scale(1.09) translate3d(0.9%, -0.6%, 0); }}
html:not(.js) .btn-vivo{display: none;}
.marco-vivo.esta-vivo{position: relative; aspect-ratio: 3 / 2; overflow: hidden;}
.marco-vivo.esta-vivo img{display: none;}
.marco-vivo iframe{position: absolute; top: 0; left: 0; width: 1200px; height: 800px; border: 0; display: block; transform-origin: top left; transform: scale(var(--escala-viva, 1));}
.marco-vivo .pista-vivo{position: absolute; left: 50%; bottom: 0.7rem; transform: translateX(-50%); padding: 0.3rem 0.7rem; border-radius: 999px; background: rgba(10, 10, 15, 0.72); color: var(--text); font-size: 0.74rem; letter-spacing: 0.04em; pointer-events: none; animation: pista-desvanece 6s ease forwards;}
@keyframes pista-desvanece{0%, 70% { opacity: 1; } 100% { opacity: 0; }}
.faq-item{border-bottom: 1px solid var(--line);}
.faq-item summary{list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.95em 0;}
.faq-item summary::-webkit-details-marker{display: none;}
.faq-item summary h3{margin: 0; font-size: 1.08rem;}
.prose .faq-item summary h3{margin: 0;}
.faq-item summary::after{content: "+"; flex: 0 0 auto; font: 400 1.3rem/1 var(--font-body); color: var(--violeta); transition: transform 200ms var(--ease);}
.faq-item[open] summary::after{content: "−"; color: var(--turquesa);}
.faq-item > p{margin: 0 0 1.1em; color: var(--muted);}
.faq-item summary:hover h3{color: var(--violeta);}
.faq-item summary:focus-visible{outline: 2px solid var(--violeta); outline-offset: 3px; border-radius: 6px;}
.compartir{display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin: 2em 0 0.4em;}
.compartir__titulo{font: 600 0.8rem var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-right: 0.3rem;}
.compartir a,.compartir button{display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--panel); color: var(--muted); cursor: pointer; text-decoration: none; transition: transform 180ms var(--ease), color 160ms ease, border-color 160ms ease;}
.compartir svg{width: 19px; height: 19px;}
.compartir a:hover,.compartir button:hover{transform: translateY(-2px); color: var(--text); border-color: var(--violeta);}
html:not(.js) .compartir [data-compartir-copiar]{display: none;}
.compartir-bloque{margin-top: 2.6rem; padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent);}
section.compartir-bloque{margin-top: 0; padding-block: 0 3.2rem; border-top: 0;}
section.compartir-bloque .compartir-bloque__lema{padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent);}
.compartir-bloque__lema{font-family: var(--font-display); font-style: italic; font-size: 1.18rem; line-height: 1.4; color: var(--muted); margin: 0 0 0.95rem;}
.page-head{padding-block: clamp(3rem, 6vw, 4.6rem) 0.6rem;}
.page-head h1{font-size: clamp(2.2rem, 5vw, 3.4rem); max-width: 18ch;}
.page-head .lede{color: var(--muted); font-size: 1.1rem; max-width: 58ch;}
.breadcrumbs{font-size: 0.86rem; color: var(--faint); margin-bottom: 1.2rem;}
.breadcrumbs a{color: var(--faint); text-decoration: none;}
.breadcrumbs a:hover{color: var(--text);}
.toast{position: fixed; left: 50%; bottom: 26px; display: flex; align-items: center; gap: 0.55rem; transform: translate(-50%, 140%); background: var(--vidrio-bg-fuerte); backdrop-filter: blur(14px) saturate(1.6); -webkit-backdrop-filter: blur(14px) saturate(1.6); color: var(--text); border: 1px solid var(--vidrio-linea); box-shadow: var(--vidrio-sombra); padding: 0.75rem 1.3rem; border-radius: 999px; font-weight: 600; font-size: 0.92rem; max-width: min(92vw, 30rem); opacity: 0; pointer-events: none; transition: opacity 300ms ease, transform 480ms var(--rebote); z-index: 90;}
.toast::before{content: "✓"; font-weight: 800; color: var(--turquesa);}
.toast.toast--error::before{content: "✕"; color: var(--coral);}
.toast.is-visible{opacity: 1; transform: translate(-50%, 0);}
.js .reveal{opacity: 0; transform: translateY(22px); transition: opacity 700ms ease, transform 700ms var(--ease); transition-delay: var(--reveal-delay, 0ms);}
.js .reveal.is-in{opacity: 1; transform: none;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior: auto;}
.js .reveal{opacity: 1; transform: none; transition: none;}
.site-nav,.toast,.modal__tarjeta,.modal__velo,.modal .opcion{transition-duration: 0.01ms;}
.modal__icono{animation: none;}}
@media (max-width: 880px){.site-footer__grid{grid-template-columns: 1fr 1fr;}}
@media (max-width: 880px){.nav-toggle{display: inline-flex;}
.site-nav{position: absolute; top: 100%; left: -0.75rem; right: -0.75rem; z-index: 39; flex-direction: column; align-items: stretch; gap: 0.3rem; margin-top: 0.55rem; padding: 0.9rem; background: var(--vidrio-bg-fuerte); backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8); border: 1px solid var(--vidrio-linea); border-radius: var(--radius-lg); box-shadow: var(--vidrio-sombra); opacity: 0; transform: translateY(-14px) scale(0.98); transform-origin: top center; pointer-events: none; transition: opacity 260ms ease, transform 340ms var(--rebote);}
.site-nav.is-open{opacity: 1; transform: none; pointer-events: auto;}
@supports not (backdrop-filter: blur(1px)){.site-nav{background: var(--bg-soft);}}
.site-nav a{padding: 0.8rem 1rem; font-size: 1.05rem; border-radius: var(--radius-sm);}
.site-nav a.nav-yt{margin-top: 0.4rem; text-align: center; border-radius: 999px;}}
@media (max-width: 760px){.site-footer__grid{grid-template-columns: 1fr; gap: 1.8rem;}}
.modal{position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 1.2rem; visibility: hidden;}
.modal.is-open{visibility: visible;}
.modal__velo{position: absolute; inset: 0; background: color-mix(in oklab, var(--bg) 62%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 320ms ease;}
.modal.is-open .modal__velo{opacity: 1;}
.modal__tarjeta{position: relative; width: min(400px, 100%); max-height: min(84vh, 40rem); overflow: auto; display: flex; flex-direction: column; gap: 0.75rem; padding: 2.4rem 1.8rem 1.8rem; background: var(--vidrio-bg-fuerte); backdrop-filter: blur(24px) saturate(1.7); -webkit-backdrop-filter: blur(24px) saturate(1.7); border: 1px solid var(--vidrio-linea); border-radius: var(--radius-lg); box-shadow: var(--vidrio-sombra); transform: scale(0.86) translateY(28px); opacity: 0; transition: transform 460ms var(--rebote), opacity 360ms ease;}
.modal.is-open .modal__tarjeta{transform: none; opacity: 1;}
@supports not (backdrop-filter: blur(1px)){.modal__tarjeta{background: var(--bg-soft);}}
.modal__halo{position: absolute; top: -42%; left: 50%; width: 120%; height: 60%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--violeta) 34%, transparent), transparent 70%); pointer-events: none;}
.modal__icono{width: 58px; height: 58px; margin-inline: auto; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--violeta), var(--turquesa)); box-shadow: 0 10px 28px color-mix(in oklab, var(--violeta) 45%, transparent); animation: modal-pop 560ms var(--rebote) both 120ms;}
.modal__icono svg{width: 26px; height: 26px;}
@keyframes modal-pop{from { transform: scale(0) rotate(-24deg); opacity: 0; }}
.modal__titulo{margin: 0; text-align: center; font-size: 1.45rem;}
.modal__sub{margin: -0.3rem 0 0.4rem; text-align: center; color: var(--muted); font-size: 0.94rem;}
.modal__cerrar{position: absolute; top: 0.8rem; right: 0.8rem; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--vidrio-linea); border-radius: 50%; background: var(--panel); color: var(--muted); font-size: 1rem; line-height: 1; cursor: pointer; transition: transform 300ms var(--ease), background-color 180ms ease, color 180ms ease;}
.modal__cerrar:hover{transform: rotate(90deg); background: var(--coral); color: var(--accent-ink);}
.modal .opcion{transform: translateY(12px); opacity: 0; transition: transform 420ms var(--ease), opacity 420ms ease;}
.modal.is-open .opcion{transform: none; opacity: 1;}
.modal.is-open .opcion:nth-of-type(1){transition-delay: 140ms;}
.modal.is-open .opcion:nth-of-type(2){transition-delay: 210ms;}
.modal.is-open .opcion:nth-of-type(3){transition-delay: 280ms;}
.modal__fila{display: flex; gap: 0.6rem;}
.modal__fila .btn{flex: 1;}
.modal__campo{width: 100%; padding: 0.75rem 0.95rem; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--panel); color: var(--text); font: inherit; transition: border-color 200ms ease, box-shadow 200ms ease;}
.modal__campo:focus{outline: none; border-color: var(--violeta); box-shadow: 0 0 0 3px color-mix(in oklab, var(--violeta) 28%, transparent);}
.novedades{padding-top: clamp(1.4rem, 3vw, 2.2rem);}
.carrusel{position: relative; height: clamp(430px, 62vh, 560px); border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--bg-soft); overflow: hidden; box-shadow: var(--shadow);}
.carrusel__item{position: absolute; top: 50%; left: calc(50% + 760px); width: 178px; height: 262px; transform: translateY(-50%); z-index: 1; border-radius: var(--radius); overflow: hidden; box-shadow: 0 18px 34px -14px rgba(0, 0, 0, 0.75);  isolation: isolate; transition: left 750ms var(--ease), top 750ms var(--ease), width 750ms var(--ease), height 750ms var(--ease), border-radius 750ms var(--ease), opacity 500ms ease;}
.carrusel__item:nth-child(1),.carrusel__item:nth-child(2){left: 0; top: 0; width: 100%; height: 100%; transform: none; border-radius: 0; box-shadow: none; opacity: 1;}
.carrusel__item:nth-child(3){left: calc(50% + 6px);}
.carrusel__item:nth-child(4){left: calc(50% + 200px);}
.carrusel__item:nth-child(5){left: calc(50% + 394px);}
.carrusel__item:nth-child(6){left: calc(50% + 588px); opacity: 0;}
.carrusel__item:nth-child(n + 3) .carrusel__img{object-position: 75% 50%;}
.carrusel__item:nth-child(1),.carrusel__item:nth-child(2){background: #514b6b;}
.carrusel__item:nth-child(1) .carrusel__img,.carrusel__item:nth-child(2) .carrusel__img{mix-blend-mode: multiply;}
.carrusel__item::after{content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 500ms ease; background: linear-gradient(105deg, rgba(6, 6, 12, 0.9) 0%, rgba(6, 6, 12, 0.72) 34%, rgba(6, 6, 12, 0.12) 68%, transparent 100%), linear-gradient(0deg, rgba(6, 6, 12, 0.55) 0%, transparent 55%);}
.carrusel__item:nth-child(1)::after,.carrusel__item:nth-child(2)::after{opacity: 1;}
.carrusel__item:nth-child(2) .carrusel__contenido{display: block; animation: novedad-entra 720ms var(--ease) 260ms backwards;}
@keyframes novedad-entra{from { opacity: 0; filter: blur(6px); transform: translateY(calc(-50% + 34px)); } to { opacity: 1; filter: blur(0);   transform: translateY(-50%); }}
.carrusel__titulo{font-family: var(--font-display); font-size: clamp(1.5rem, 3.2vw, 2.3rem); line-height: 1.12; margin: 0.75rem 0 0; color: #fff; text-wrap: balance;}
.carrusel__desc{margin: 0.7rem 0 0; font-size: clamp(0.92rem, 1.5vw, 1.02rem); line-height: 1.6; color: rgba(255, 255, 255, 0.86);}
@keyframes novedad-avance{from { transform: scaleX(0); } to { transform: scaleX(1); }}
@media (max-width: 900px){.carrusel__item{width: 150px; height: 220px;}
.carrusel__item:nth-child(3){left: calc(50% + 40px);}
.carrusel__item:nth-child(4){left: calc(50% + 206px);}
.carrusel__item:nth-child(5){left: calc(50% + 372px);}
.carrusel__item:nth-child(6){left: calc(50% + 538px);}}
@media (max-width: 620px){.carrusel{height: clamp(400px, 76vh, 500px);}
.carrusel__item:nth-child(n + 3){opacity: 0; pointer-events: none;}
.carrusel__item:nth-child(2) .carrusel__contenido{animation-name: novedad-entra-movil;}
@keyframes novedad-entra-movil{from { opacity: 0; filter: blur(6px); transform: translateY(28px); } to { opacity: 1; filter: blur(0);   transform: translateY(0); }}}
@media (prefers-reduced-motion: reduce){.carrusel__item{transition: none;}
.carrusel__item:nth-child(2) .carrusel__contenido{animation: none;}}
.diferir-render{content-visibility: auto; contain-intrinsic-size: auto none auto var(--alto-escritorio, 900px);}
@media (max-width: 700px){.diferir-render{contain-intrinsic-size: auto none auto var(--alto-movil, var(--alto-escritorio, 900px));}}
.art-ic svg :is(path, circle, ellipse, rect, polygon, polyline, line){fill: currentColor;}
.art-ic__traza :is(path, circle, ellipse, rect, polygon, polyline, line){fill: none !important; stroke: currentColor; stroke-width: 0.85; stroke-linecap: round; stroke-linejoin: round; opacity: 0;}
.js-arte .card__art--iconos .art-ic > svg:not(.art-ic__traza) :is(path, circle, ellipse, rect, polygon, polyline, line){opacity: 0;}
.js-arte .card__art--iconos .art-ic__traza :is(path, circle, ellipse, rect, polygon, polyline, line){stroke-dasharray: 0 600;}
.js-arte .card.is-in .art-ic__traza :is(path, circle, ellipse, rect, polygon, polyline, line){animation: art-trazar 1.15s cubic-bezier(0.65, 0, 0.35, 1) forwards; animation-delay: calc(var(--i, 0) * 0.12s);}
.js-arte .card.is-in .art-ic > svg:not(.art-ic__traza) :is(path, circle, ellipse, rect, polygon, polyline, line){animation: art-rellenar 0.5s ease forwards; animation-delay: calc(var(--i, 0) * 0.12s + 0.45s);}
.js-arte :is(.card__art:not(.card__art--iconos), .familia) :is(
    svg [stroke]:not([stroke="none"]):not([stroke-dasharray]),
    svg[stroke]:not([stroke="none"]) > :is(path, rect, circle, ellipse, line, polyline, polygon, g):not([stroke-dasharray])
  ){stroke-dasharray: 0 600;}
.js-arte :is(.card.is-in .card__art:not(.card__art--iconos), .familias.is-in .familia) :is(
    svg [stroke]:not([stroke="none"]):not([stroke-dasharray]),
    svg[stroke]:not([stroke="none"]) > :is(path, rect, circle, ellipse, line, polyline, polygon, g):not([stroke-dasharray])
  ){animation: art-trazar-deco 1.3s cubic-bezier(0.65, 0, 0.35, 1) forwards;}
.js-arte :is(.card__art:not(.card__art--iconos), .familia):not(:has([stroke]:not([stroke="none"]))) svg > *:not([opacity]){opacity: 0;}
.js-arte :is(.card.is-in .card__art:not(.card__art--iconos), .familias.is-in .familia):not(:has([stroke]:not([stroke="none"]))) svg > *:not([opacity]){animation: art-aparecer 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;}
.js-arte :is(.card.is-in .card__art:not(.card__art--iconos), .familias.is-in .familia):not(:has([stroke]:not([stroke="none"]))) svg > *[opacity]{animation: art-subir 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;}
.js-arte .card.is-in .card__art:not(.card__art--iconos) svg > *:nth-child(2),.js-arte .familias.is-in .familia svg > *:nth-child(2){animation-delay: 0.08s;}
.js-arte .card.is-in .card__art:not(.card__art--iconos) svg > *:nth-child(3),.js-arte .familias.is-in .familia svg > *:nth-child(3){animation-delay: 0.16s;}
.js-arte .card.is-in .card__art:not(.card__art--iconos) svg > *:nth-child(4),.js-arte .familias.is-in .familia svg > *:nth-child(4){animation-delay: 0.24s;}
.js-arte .card.is-in .card__art:not(.card__art--iconos) svg > *:nth-child(5),.js-arte .familias.is-in .familia svg > *:nth-child(5){animation-delay: 0.32s;}
.js-arte .card.is-in .card__art:not(.card__art--iconos) svg > *:nth-child(6),.js-arte .familias.is-in .familia svg > *:nth-child(6){animation-delay: 0.4s;}
@keyframes art-trazar{0% {
    stroke-dasharray: 0 600;
    opacity: 1;
  } 70% {
    stroke-dasharray: 600 0;
    opacity: 1;
  } 100% {
    stroke-dasharray: 600 0;
    opacity: 0;
  }}
@keyframes art-rellenar{from {
    opacity: 0;
  } to {
    opacity: 1;
  }}
@keyframes art-trazar-deco{from {
    stroke-dasharray: 0 600;
  } to {
    stroke-dasharray: 600 0;
  }}
@keyframes art-aparecer{from {
    opacity: 0;
    transform: translateY(8px);
  } to {
    opacity: 1;
    transform: none;
  }}
@keyframes art-subir{from {
    transform: translateY(8px);
  } to {
    transform: none;
  }}
@media (prefers-reduced-motion: reduce){.js-arte .card__art--iconos .art-ic > svg:not(.art-ic__traza) :is(path, circle, ellipse, rect, polygon, polyline, line),.js-arte .card.is-in .art-ic > svg:not(.art-ic__traza) :is(path, circle, ellipse, rect, polygon, polyline, line){opacity: 1; animation: none;}
.js-arte .card__art--iconos .art-ic__traza :is(path, circle, ellipse, rect, polygon, polyline, line),.js-arte .card.is-in .art-ic__traza :is(path, circle, ellipse, rect, polygon, polyline, line){opacity: 0; animation: none;}
.js-arte :is(.card__art:not(.card__art--iconos), .familia, .card.is-in .card__art:not(.card__art--iconos), .familias.is-in .familia) :is(
      svg [stroke]:not([stroke="none"]):not([stroke-dasharray]),
      svg[stroke]:not([stroke="none"]) > :is(path, rect, circle, ellipse, line, polyline, polygon, g):not([stroke-dasharray])
    ){stroke-dasharray: none; animation: none;}
.js-arte :is(.card__art:not(.card__art--iconos), .familia, .card.is-in .card__art:not(.card__art--iconos), .familias.is-in .familia):not(:has([stroke]:not([stroke="none"]))) svg > *:not([opacity]){opacity: 1; transform: none; animation: none;}
.js-arte :is(.card__art:not(.card__art--iconos), .familia, .card.is-in .card__art:not(.card__art--iconos), .familias.is-in .familia):not(:has([stroke]:not([stroke="none"]))) svg > *[opacity]{transform: none; animation: none;}}
@keyframes brillo-borde{0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; }}
.card:nth-child(2n) .icono-3d{animation-delay: 1.3s;}
.card:nth-child(3n) .icono-3d{animation-delay: 2.6s;}
@keyframes flotar-3d{0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; }}
/* Fuente: /herramientas/qr/css/tool.css */
.panel{border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); overflow: hidden;}
.qr-preview{display: grid; place-items: center; padding: clamp(1.6rem, 5vw, 2.6rem); background: linear-gradient(45deg, var(--bg-soft) 25%, transparent 25%, transparent 75%, var(--bg-soft) 75%) 0 0 / 20px 20px, linear-gradient(45deg, var(--bg-soft) 25%, transparent 25%, transparent 75%, var(--bg-soft) 75%) 10px 10px / 20px 20px, var(--bg);}
.qr-lienzo{padding: 18px; border-radius: 18px; background: #fff; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28); display: grid; place-items: center; transition: opacity 160ms ease;}
.qr-lienzo canvas{display: block; width: min(360px, 70vw); height: auto; image-rendering: pixelated;}
.qr-preview__vacio{display: grid; place-items: center; gap: 0.6rem; padding: 3rem 1.5rem; color: var(--faint); text-align: center;}
.qr-preview__vacio svg{width: 40px; height: 40px; opacity: 0.6;}
.stats{display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.9rem; padding: 1.1rem; border-top: 1px solid var(--line);}
.stat{display: grid; gap: 0.2rem; min-width: 0;}
.stat__label{font: 700 0.68rem/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint);}
.stat__value{font-family: var(--font-display); font-size: 1.3rem; font-variant-numeric: tabular-nums;}
.stat__value--small{font-family: var(--font-body); font-size: 0.92rem; color: var(--muted);}
.error{margin: 1.1rem 1.1rem 0; padding: 0.8rem 1.1rem; border-radius: var(--radius); border: 1px solid color-mix(in oklab, var(--coral) 45%, transparent); background: color-mix(in oklab, var(--coral) 12%, transparent); color: var(--text); font-size: 0.92rem;}
.settings{display: grid; gap: 1.1rem; padding: 1.1rem;}
.field{display: grid; gap: 0.45rem; font-size: 0.9rem;}
.field__label{display: flex; justify-content: space-between; gap: 0.6rem; color: var(--muted); font-weight: 600;}
.field__label output,.field__label .contador{color: var(--violeta); font-variant-numeric: tabular-nums; font-weight: 600;}
.field__hint{color: var(--faint); font-size: 0.8rem;}
.field input[type="text"],.field input[type="tel"],.field input[type="email"],.field input[type="url"],.field input[type="number"],.field textarea,.field select{width: 100%; padding: 0.6rem 0.8rem; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-soft); color: var(--text); font: inherit; font-family: var(--font-body);}
.field textarea{resize: vertical; min-height: 5.5rem;}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{outline: 2px solid var(--violeta); outline-offset: 1px;}
.field-row{display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem;}
.switch{display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; cursor: pointer;}
.switch input{margin-top: 0.2rem; accent-color: var(--violeta); flex: 0 0 auto;}
.switch small{color: var(--faint); font-size: 0.79rem; display: block; margin-top: 0.1rem;}
.radiogroup{display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));}
.radiogroup label{display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease; font-size: 0.86rem;}
.radiogroup label:has(input:checked){border-color: var(--violeta); background: color-mix(in oklab, var(--violeta) 8%, transparent);}
.radiogroup input{accent-color: var(--violeta); flex: 0 0 auto;}
.campo-color{display: flex; align-items: center; gap: 0.6rem;}
.campo-color input[type="color"]{width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: none; cursor: pointer;}
.campo-color input[type="text"]{flex: 1;}
.qr-logo__zona{position: relative; display: grid; place-items: center; gap: 0.4rem; padding: 1.1rem 0.8rem; border: 1px dashed var(--violeta); border-radius: 12px; background: color-mix(in srgb, var(--violeta) 6%, var(--bg-soft)); text-align: center; cursor: pointer;}
.qr-logo__zona > span:not(.qr-logo__icono){color: var(--muted); font-size: 0.78rem;}
.qr-logo__icono{color: var(--violeta); font-size: 1.6rem; line-height: 1;}
.qr-logo__zona input{position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;}
.qr-logo__zona:focus-within,.qr-logo--arrastre{outline: 2px solid var(--violeta); outline-offset: 3px;}
.qr-logo__ajustes{display: grid; gap: 1rem;}
.qr-logo__ajustes[hidden]{display: none;}
.qr-logo__archivo{display: flex; align-items: center; gap: 0.65rem; min-width: 0;}
.qr-logo__archivo img{object-fit: contain; background: #fff; border-radius: 8px; flex: 0 0 48px;}
.qr-logo__archivo span{min-width: 0; overflow-wrap: anywhere; font-size: 0.8rem; flex: 1;}
.qr-logo__archivo .btn{padding: 0.45rem 0.65rem; flex-shrink: 0;}
.qr-logo__estado{margin: 0; color: var(--muted); font-size: 0.8rem; line-height: 1.5;}
.qr-logo__estado[data-estado="error"]{color: var(--text); border-left: 3px solid var(--coral); padding-left: 0.6rem;}
.qr-logo__estado[data-estado="ok"]{color: var(--text); border-left: 3px solid var(--violeta); padding-left: 0.6rem;}
[data-descargar-png]:disabled,[data-descargar-svg]:disabled{opacity: 0.5; cursor: not-allowed;}
.tool-note{margin-top: 1.4rem; color: var(--faint); font-size: 0.84rem; text-align: center;}
@media (max-width: 560px){.field-row{grid-template-columns: 1fr;}}
@media (prefers-reduced-motion: reduce){.qr-lienzo{transition: none;}}
[data-workspace][data-busy="true"] .qr-lienzo{opacity: 0.6;}
.estudio > .error{position: absolute; left: 50%; bottom: calc(var(--estudio-margen) + 4.6rem); transform: translateX(-50%); z-index: 3; margin: 0; max-width: min(520px, calc(100% - 2rem)); padding: 0.6rem 1rem; border-radius: 12px; background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);}
.estudio__codigo-cuerpo{padding: 0.9rem 1rem;}
.estudio__codigo-cuerpo .qr-archivo{margin: 0 0 0.6rem; color: var(--muted); font-size: 0.85rem;}
.estudio__codigo-cuerpo .stats{border-top: 0; padding: 0;}
.qr-preview__vacio[hidden]{display: none;}
/* Fuente: /css/estudio.css */
.estudio [hidden]{display: none !important;}
.estudio-shell{width: min(1680px, 100% - 3rem); margin-inline: auto;}
.estudio{--estudio-panel-ancho: 336px; --estudio-margen: 14px; position: relative;  height: clamp(540px, calc(100dvh - 84px - 1.6rem), 980px); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-soft); isolation: isolate;}
.estudio .estudio__lienzo{position: absolute; inset: 0; min-height: 0; max-height: none; border-radius: 0;  padding: calc(var(--estudio-margen) + 3.5rem) calc(var(--estudio-panel-ancho) + var(--estudio-margen) * 2) calc(var(--estudio-margen) + 4.5rem) calc(var(--estudio-margen) + 1rem); transition: padding 420ms var(--ease);}
.estudio--plegado .estudio__lienzo{padding-right: calc(var(--estudio-margen) + 1rem);}
.estudio__panel{position: absolute; top: var(--estudio-margen); right: var(--estudio-margen); bottom: var(--estudio-margen); width: var(--estudio-panel-ancho); display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: calc(var(--radius) - 4px);  background: color-mix(in srgb, var(--bg) 68%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15); box-shadow: 0 18px 44px color-mix(in srgb, var(--bg) 55%, transparent); transition: transform 460ms var(--ease), opacity 320ms var(--ease); z-index: 3;}
.estudio--plegado .estudio__panel{transform: translateX(calc(100% + var(--estudio-margen) + 2px)); opacity: 0.98;}
.estudio__panel-cabecera{display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.85rem 0.95rem 0.8rem 1.05rem; border-bottom: 1px solid var(--line);}
.estudio__panel-titulo{margin: 0; font-family: var(--font-display); font-size: 1.02rem; letter-spacing: 0.01em;}
.estudio__panel-cuerpo{flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0.55rem 0.95rem 1rem 1.05rem; scrollbar-width: thin;}
.estudio__seccion{border-bottom: 1px solid var(--line); padding: 0.35rem 0;}
.estudio__seccion:last-child{border-bottom: 0;}
.estudio__seccion > summary{display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.15rem; list-style: none; cursor: pointer; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); border-radius: 8px;}
.estudio__seccion > summary::-webkit-details-marker{display: none;}
.estudio__seccion > summary::before{content: "+"; width: 1em; text-align: center; font-size: 1rem; font-weight: 500; line-height: 1; color: var(--violeta);}
.estudio__seccion[open] > summary::before{content: "−";}
.estudio__seccion > summary:hover,.estudio__seccion > summary:focus-visible{color: var(--text);}
.estudio__seccion > summary:focus-visible{outline: 2px solid var(--violeta); outline-offset: 2px;}
.estudio__seccion > .controles{padding: 0.35rem 0.15rem 0.9rem;}
.estudio__alternar{position: absolute; top: var(--estudio-margen); right: calc(var(--estudio-panel-ancho) + var(--estudio-margen) * 2); z-index: 4; display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0 0.95rem; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--text); font: inherit; font-size: 0.86rem; cursor: pointer; transition: right 460ms var(--ease), border-color 180ms ease, color 180ms ease;}
.estudio__alternar:hover,.estudio__alternar:focus-visible{border-color: var(--violeta); color: var(--violeta);}
.estudio__alternar:focus-visible{outline: 2px solid var(--violeta); outline-offset: 2px;}
.estudio--plegado .estudio__alternar{right: var(--estudio-margen);}
.estudio__alternar svg{width: 16px; height: 16px; transition: transform 460ms var(--ease);}
.estudio--plegado .estudio__alternar svg{transform: rotate(180deg);}
.estudio__codigo{position: absolute; left: var(--estudio-margen); bottom: var(--estudio-margen); z-index: 3; width: min(640px, calc(100% - var(--estudio-margen) * 2)); border: 1px solid var(--line); border-radius: calc(var(--radius) - 4px); background: color-mix(in srgb, var(--bg) 74%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15); box-shadow: 0 18px 44px color-mix(in srgb, var(--bg) 55%, transparent);}
.estudio:not(.estudio--plegado) .estudio__codigo{width: min(640px, calc(100% - var(--estudio-panel-ancho) - var(--estudio-margen) * 3));}
.estudio__codigo > summary{display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem 0.5rem 0.95rem; list-style: none; cursor: pointer; border-radius: inherit;}
.estudio__codigo > summary::-webkit-details-marker{display: none;}
.estudio__codigo > summary:focus-visible{outline: 2px solid var(--violeta); outline-offset: 2px;}
.estudio__codigo-etiqueta{display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap;}
.estudio__codigo-acciones .btn{white-space: nowrap;}
.estudio__codigo-etiqueta svg{width: 15px; height: 15px; transition: transform 320ms var(--ease); color: var(--violeta);}
.estudio__codigo[open] .estudio__codigo-etiqueta svg{transform: rotate(180deg);}
.estudio__codigo-acciones{margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem; padding: 0; border-top: 0;}
.estudio__codigo-acciones .btn{flex: 0 1 auto; min-height: 38px;}
.estudio__codigo-acciones .btn{min-height: 38px; padding: 0.35rem 0.9rem; font-size: 0.86rem;}
.estudio__codigo .codigo,.estudio__codigo .estudio__codigo-cuerpo{position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); margin: 0; border: 1px solid var(--line); border-radius: calc(var(--radius) - 4px); background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15); box-shadow: 0 18px 44px color-mix(in srgb, var(--bg) 55%, transparent); max-height: min(38dvh, 340px); overflow: auto;}
@media (max-width: 760px){.estudio-shell{width: min(1680px, 100% - 1.5rem);}
.estudio{--estudio-margen: 10px; height: calc(100dvh - 84px - 0.9rem);}
.estudio__panel{top: auto; left: var(--estudio-margen); right: var(--estudio-margen); width: auto; max-height: min(58dvh, 460px);}
.estudio--plegado .estudio__panel{transform: translateY(calc(100% + var(--estudio-margen) + 2px));}
.estudio .estudio__lienzo{padding: calc(var(--estudio-margen) + 3.4rem) calc(var(--estudio-margen) + 0.4rem) calc(var(--estudio-margen) + 0.4rem); transition: none;}
.estudio__alternar,.estudio--plegado .estudio__alternar{top: var(--estudio-margen); right: var(--estudio-margen);}
.estudio__alternar svg{transform: rotate(90deg);}
.estudio--plegado .estudio__alternar svg{transform: rotate(-90deg);}
.estudio__codigo-texto{display: none;}
.estudio__codigo > summary{padding-left: 0.75rem;}
.estudio__codigo-acciones .btn{flex: 1 1 auto; justify-content: center;}
.estudio:not(.estudio--plegado) .estudio__codigo{opacity: 0; visibility: hidden; transition: opacity 240ms ease, visibility 0s 240ms;}
.estudio__codigo{transition: opacity 240ms ease; width: calc(100% - var(--estudio-margen) * 2);}
.estudio__codigo .codigo,.estudio__codigo .estudio__codigo-cuerpo{max-height: 34dvh;}}
@media (prefers-reduced-motion: reduce){.estudio .estudio__lienzo,.estudio__panel,.estudio__alternar,.estudio__alternar svg,.estudio__codigo-etiqueta svg{transition: none;}}