/* Montaje v0.2: SaaS (créditos y planes), marca, estilo libre, talking head y lo aprendido. Se carga después de app.css. */

/* glifo de Montaje (el "editor" que habla) */
.glifo-m { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.glifo-m i { display: block; width: 3.5px; border-radius: 1.2px; background: #fff; }
.glifo-m i:nth-child(1) { height: 8px; } .glifo-m i:nth-child(2) { height: 5.5px; opacity: .7; } .glifo-m i:nth-child(3) { height: 11px; background: #0a84ff; }
.logo-montaje { width: 64px; height: 64px; margin: 0 auto; border-radius: 18px; background: #1d1d1f; display: grid; place-items: center; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); }
.logo-montaje .glifo-m { transform: scale(2.1); }
.renglon .icono-app .glifo-m { transform: scale(1.3); }

/* píldora de créditos */
.conexion.regalo { background: linear-gradient(120deg, #0a84ff, #bf5af2); color: #fff; border-color: transparent; }
.conexion.regalo .punto { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }

/* hojas anchas y planes */
.hoja-caja.ancha { width: min(760px, 100%); }
.planes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; margin-top: 6px; }
.plan { position: relative; border: 1px solid var(--linea-2); border-radius: 22px; padding: 22px; background: var(--sup-2); display: flex; flex-direction: column; gap: 6px; }
.plan.destacado { border: 2px solid var(--acento); box-shadow: 0 0 0 5px var(--acento-suave); }
.plan h3 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
.plan .precio { font-size: 15px; color: var(--texto-2); margin-bottom: 4px; }
.plan .precio b { font-size: 38px; color: var(--texto); letter-spacing: -.04em; font-weight: 700; }
.plan .precio span { margin-left: 2px; }
.plan .lista-check { flex: 1; margin-bottom: 14px; }
@media (max-width: 640px) { .planes { grid-template-columns: 1fr; } }

/* composición del encargo */
.fila-2 { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
@media (max-width: 520px) { .fila-2 { grid-template-columns: 1fr; } }

/* panel de marca */
details.panel-marca { margin: 6px 0 4px; border-top: 1px solid var(--linea); padding-top: 14px; }
details.panel-marca summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; font-size: 16px; }
details.panel-marca summary::-webkit-details-marker { display: none; }
details.panel-marca summary::after { content: "›"; transform: rotate(90deg); transition: transform .3s var(--curva); color: var(--texto-3); font-size: 22px; }
details.panel-marca[open] summary::after { transform: rotate(-90deg); }
.panel-marca-cuerpo { padding-top: 14px; animation: aparece .45s var(--curva) both; }
.paletas, .fuentes { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.paleta, .fuente { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; border: 1.5px solid var(--linea-2); background: var(--sup); border-radius: 14px; padding: 10px 11px; cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--texto-2); text-align: left; transition: all .22s var(--curva); }
.paleta:hover, .fuente:hover { border-color: var(--texto-3); }
.paleta.activa, .fuente.activa { border-color: var(--acento); box-shadow: 0 0 0 4px var(--acento-suave); color: var(--texto); }
.puntos { display: flex; }
.puntos i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--sup); margin-right: -6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .18); }
.puntos.auto { width: 20px; height: 20px; color: #bf5af2; }
.colores-propios { display: flex; gap: 14px; margin-top: 12px; }
.colores-propios label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-2); cursor: pointer; }
.colores-propios input[type=color] { width: 34px; height: 34px; border: 0; padding: 0; background: none; border-radius: 50%; cursor: pointer; }
.colores-propios input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.colores-propios input[type=color]::-webkit-color-swatch { border: 2px solid var(--sup); border-radius: 50%; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.fuente { gap: 2px; padding-bottom: 11px; }
.fuente .muestra { font-size: 30px; line-height: 1.05; margin-bottom: 4px; color: var(--texto); }
.fuente .muestra.auto { color: #bf5af2; height: 31px; display: flex; align-items: center; }
.fuente strong { font-size: 12.5px; font-weight: 600; color: var(--texto); }
.fuente small { font-size: 11.5px; color: var(--texto-3); line-height: 1.3; }
.soltar.chica { padding: 12px; font-size: 13px; }

/* tarjeta de estilo libre: borde con degradado */
.tarjeta.libre { background: linear-gradient(var(--sup), var(--sup)) padding-box, linear-gradient(120deg, #0a84ff, #bf5af2, #ff375f) border-box; border: 2px solid transparent; }

/* portada: estilo libre (orbes de color que se mezclan) */
.p-libre { background: #0b0b12; }
.p-libre .orbe { border-radius: 50%; filter: blur(26px); opacity: .85; mix-blend-mode: screen; }
.p-libre .orbe.a { width: 62%; aspect-ratio: 1; left: -6%; top: 6%; background: #0a84ff; animation: orbeA 9s ease-in-out infinite; }
.p-libre .orbe.b { width: 58%; aspect-ratio: 1; right: -8%; top: 22%; background: #bf5af2; animation: orbeB 11s ease-in-out infinite; }
.p-libre .orbe.c { width: 54%; aspect-ratio: 1; left: 22%; bottom: -18%; background: #ff375f; animation: orbeC 10s ease-in-out infinite; }
@keyframes orbeA { 50% { transform: translate(28%, 18%) scale(1.1); } }
@keyframes orbeB { 50% { transform: translate(-24%, 10%) scale(.9); } }
@keyframes orbeC { 50% { transform: translate(10%, -26%) scale(1.15); } }
.p-libre .brillo-l { inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%); background-size: 250% 100%; animation: brilloL 4.5s ease-in-out infinite; }
@keyframes brilloL { from { background-position: 130% 0; } to { background-position: -30% 0; } }
.p-libre .centro { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #fff; }
.p-libre .centro span { position: static; animation: gira-s 6s linear infinite; display: grid; }
.p-libre .centro b { position: static; font: 700 clamp(18px, 2.2vw, 24px)/1 var(--fuente); letter-spacing: -.02em; text-shadow: 0 6px 24px rgba(0, 0, 0, .35); }
@keyframes gira-s { to { transform: rotate(360deg); } }

/* portada: talking head + motion graphics (cara con corte de zoom → lámina → gráfico → a negro → vuelve la cara) */
.p-talking { background: #151515; }
.p-talking .cara { inset: 0; background: radial-gradient(70% 55% at 50% 38%, #5b4032 0%, #2a1d17 60%, #120c09 100%); }
.p-talking .encuadre { inset: 0; transform-origin: 50% 38%; }
.p-talking .persona { left: 50%; bottom: -4%; width: 54%; aspect-ratio: 1 / 1.08; transform: translateX(-50%); }
.p-talking .persona::before { content: ""; position: absolute; left: 31%; top: 0; width: 38%; aspect-ratio: 1 / 1.2; border-radius: 48%; background: linear-gradient(170deg, #e2b194, #b77e62); box-shadow: inset 0 -8px 16px rgba(0, 0, 0, .18); }
.p-talking .persona::after { content: ""; position: absolute; left: 2%; right: 2%; bottom: 0; height: 50%; border-radius: 46% 46% 0 0 / 55% 55% 0 0; background: linear-gradient(#303846, #1c212b); }
.p-talking .ojo { top: 17%; width: 3.2%; aspect-ratio: 1 / 1.4; border-radius: 50%; background: #2a1a12; z-index: 2; }
.p-talking .ojo.a { left: 42%; } .p-talking .ojo.b { left: 55%; }
.p-talking .boca { left: 46.5%; top: 30%; width: 7%; height: 2.4%; border-radius: 6px; background: #6b2c20; z-index: 2; animation: tk-habla .32s ease-in-out infinite alternate; }
@keyframes tk-habla { from { transform: scaleY(.5); } to { transform: scaleY(1.8); } }
/* empuje suave con ease (nada de saltos de zoom): 100 → 110 % mientras habla; vuelve a 100 % escondido bajo el negro (76–82 %) */
@keyframes tk-zoom { 0% { transform: scale(1); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 40%, 78% { transform: scale(1.1); animation-timing-function: steps(1, end); } 79%, 100% { transform: scale(1); } }
@keyframes tk-cara { 0%, 83% { filter: none; } 84% { filter: blur(8px); } 92%, 100% { filter: none; } }
.p-talking .mg { inset: 0; background: radial-gradient(90% 70% at 50% 40%, #2a2a2c 0%, #151515 60%, #0b0b0b 100%); opacity: 0; }
@keyframes tk-mg { 0% { opacity: 0; } 41% { opacity: 1; } 76% { opacity: 0; } }
.p-talking .mg .vidrio { left: 16%; top: 22%; width: 68%; height: 52%; border-radius: 16px; background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05)); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 40px 80px rgba(0, 0, 0, .5); }
@keyframes tk-nace { 0%, 41% { opacity: 0; filter: blur(12px); transform: scale(.86); } 52% { opacity: 1; filter: blur(0); } 60%, 70% { transform: scale(1); opacity: 1; filter: blur(0); } 76%, 100% { opacity: 0; } }
.p-talking .mg .cifra { left: 10%; top: 16%; font: 800 clamp(24px, 3.2vw, 40px)/1 var(--fuente); color: #fff; letter-spacing: -.04em; }
.p-talking .mg .sub { left: 10%; top: 52%; width: 55%; height: 7%; border-radius: 4px; background: rgba(255, 255, 255, .22); }
.p-talking .mg .sub2 { left: 10%; top: 66%; width: 38%; height: 7%; border-radius: 4px; background: rgba(255, 255, 255, .12); }
.p-talking .mg .pildora { right: 9%; top: 20%; height: 16%; border-radius: 999px; background: #30d158; width: 0; }
@keyframes tk-pildora { 0%, 50% { width: 0; height: 2%; top: 27%; } 56% { width: 30%; height: 2%; top: 27%; } 62%, 72% { width: 30%; height: 16%; top: 20%; } 76%, 100% { opacity: 0; } }
.p-talking .lamina { left: -5%; right: -5%; top: 0; height: 120%; background: #f4f4f6; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); border-radius: 0 0 50% 50% / 0 0 12% 12%; transform: translateY(-110%); filter: blur(2px); z-index: 3; }
@keyframes tk-lamina { 0%, 36% { transform: translateY(-110%); } 40% { transform: translateY(-4%); } 44%, 100% { transform: translateY(110%); } }
.p-talking .oscuro { inset: 0; background: #000; opacity: 0; z-index: 3; }
/* las capas corren solo con el video (app.js pone --tk-dur = lo que dura y --tk-ret = en qué punto del ciclo va) */
.p-talking.corre .cara { animation: tk-cara var(--tk-dur, 8s) linear var(--tk-ret, -6.32s) infinite; }
.p-talking.corre .encuadre { animation: tk-zoom var(--tk-dur, 8s) linear var(--tk-ret, -6.32s) infinite; }
.p-talking.corre .mg { animation: tk-mg var(--tk-dur, 8s) steps(1, end) var(--tk-ret, -6.32s) infinite; }
.p-talking.corre .mg .vidrio { animation: tk-nace var(--tk-dur, 8s) var(--curva) var(--tk-ret, -6.32s) infinite; }
.p-talking.corre .mg .pildora { animation: tk-pildora var(--tk-dur, 8s) var(--curva) var(--tk-ret, -6.32s) infinite; }
.p-talking.corre .lamina { animation: tk-lamina var(--tk-dur, 8s) cubic-bezier(.6, 0, .3, 1) var(--tk-ret, -6.32s) infinite; }
.p-talking.corre .oscuro { animation: tk-oscuro var(--tk-dur, 8s) linear var(--tk-ret, -6.32s) infinite; }
.p-talking.espera * { animation-play-state: paused !important; }
@keyframes tk-oscuro { 0%, 72% { opacity: 0; } 76%, 82% { opacity: 1; } 86%, 100% { opacity: 0; } }

/* portada con imagen real (estilos aprendidos): leve empuje de cámara */
.p-imagen { background: #111; }
.p-imagen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: kenburns 12s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.12) translate(-2%, -2%); } }

/* así se ve un estilo: colores, fuentes y cuadros clave (nunca la guía) */
.asi-se-ve { margin-top: 28px; }
.asi-se-ve h3 { margin: 0 0 12px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); }
.muestras { display: flex; gap: 14px; margin: 4px 0 12px; flex-wrap: wrap; }
.muestra-color { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.muestra-color i { width: 44px; height: 44px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 4px 12px rgba(0, 0, 0, .12); }
.muestra-color small { font-size: 11px; color: var(--texto-3); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.aprendido-intro { font-size: 16px; color: var(--texto); margin: 6px 0 14px; line-height: 1.5; }
.hoja-cuadros { width: 100%; border-radius: 14px; margin-top: 14px; display: block; box-shadow: var(--sombra-1); }
.aprendido-cab { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.aprendido-cab img, .aprendido-cab .portada { width: 92px; aspect-ratio: 9 / 13; object-fit: cover; border-radius: 14px; flex: none; }

/* aprender un estilo: la zona grande para soltar el video y el enlace */
.grande-soltar { padding: 44px 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; border-radius: 22px; }
.grande-soltar strong { font-size: 19px; letter-spacing: -.02em; }
.grande-soltar span { font-size: 14px; }
.ico-subir { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--acento-suave); color: var(--acento); margin-bottom: 6px; }
.enlace-fila { display: flex; align-items: center; gap: 10px; margin-top: 14px; border: 1px solid var(--linea-2); border-radius: 14px; background: var(--sup-2); padding: 0 0 0 14px; transition: border-color .2s, box-shadow .2s; }
.enlace-fila:focus-within { border-color: var(--acento); box-shadow: 0 0 0 4px var(--acento-suave); }
.enlace-fila input { border: 0; background: transparent; box-shadow: none !important; padding-left: 0; }
.enlace-ico { color: var(--texto-3); display: grid; }
.ico-p { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--sup-3); color: var(--texto-2); flex: none; }

/* costo: lo estimado junto al botón y lo cobrado de verdad al terminar */
.costo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.costo svg { flex: none; color: var(--acento); }
.costo span { display: flex; flex-direction: column; line-height: 1.25; }
.costo b { font-size: 15px; font-weight: 600; color: var(--texto); letter-spacing: -.01em; }
.costo small { font-size: 12.5px; color: var(--texto-3); }
.nota-cobro { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; padding: 12px 16px; border-radius: 14px; background: var(--sup-3); font-size: 14.5px; line-height: 1.4; color: var(--texto); }
.nota-cobro svg { flex: none; color: var(--acento); }

/* administrador: costos reales */
.hoja-caja.costos { text-align: left; max-height: calc(100vh - 48px); overflow: auto; }
.hoja-caja.costos h2 { margin-top: 0; }
.cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 4px 0 6px; }
.cifras div { background: var(--sup-3); border-radius: 16px; padding: 14px 16px; }
.cifras small { display: block; font-size: 12px; color: var(--texto-3); }
.cifras b { font-size: 24px; letter-spacing: -.03em; font-weight: 700; font-variant-numeric: tabular-nums; }
.tit-tabla { margin: 24px 0 6px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); }
.tabla-costos { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.tabla-costos th { text-align: left; font-weight: 500; font-size: 12px; color: var(--texto-3); padding: 0 10px 8px 0; }
.tabla-costos td { padding: 10px 10px 10px 0; border-top: 1px solid var(--linea); vertical-align: top; }
.tabla-costos td small { display: block; font-size: 12px; color: var(--texto-3); }
.tabla-costos tr.demo td { color: var(--texto-3); }
@media (max-width: 640px) { .cifras { grid-template-columns: 1fr 1fr; } .tabla-costos { font-size: 13px; } }

/* variantes de un estilo (p. ej. los looks de Motion Graphics) */
.variantes { display: grid; gap: 8px; }

/* ---------------------------------------------------------------- vitrina en video */
.vitrina { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.vcard { position: relative; display: flex; flex-direction: column; background: var(--sup); border-radius: var(--r-3); overflow: hidden; box-shadow: var(--sombra-1); color: var(--texto); cursor: pointer; text-align: left;
  transition: transform .45s var(--curva), box-shadow .45s var(--curva); outline: none; }
.vcard:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); }
.vcard:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }
.vcard .vmedia { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.vcard .vmedia > .portada { position: absolute; inset: 0; aspect-ratio: auto; width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
.vcard .vmedia > .portada, .vcard .vmedia video { transition: transform .9s var(--curva); }
.vcard:hover .vmedia > .portada { transform: scale(1.025); }
.vcard .vinfo { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; }
.vcard h3 { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -.02em; }
.vcard p { margin: 0; font-size: 14.5px; line-height: 1.42; color: var(--texto-2); }
.vcard.destacada { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: center; }
.vcard.destacada .vinfo { padding: 28px 34px; gap: 10px; align-items: flex-start; }
.vcard.destacada h3 { font-size: clamp(28px, 3vw, 38px); letter-spacing: -.035em; }
.vcard.destacada p { font-size: 17px; max-width: 34ch; }
.vcard.destacada .boton { margin-top: 10px; pointer-events: none; }
/* cortos: tarjetas verticales 9:16, nunca un video vertical recortado en un marco horizontal */
.vitrina.vertical { grid-template-columns: repeat(auto-fill, minmax(210px, 270px)); }
.vitrina.vertical .vmedia { aspect-ratio: 9 / 16; }
.vitrina.vertical .vinfo { padding: 14px 16px 16px; }
.vitrina.vertical h3 { font-size: 18px; }
.vitrina.vertical p { font-size: 13.5px; }
.vcard .modo { align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: .01em; padding: 3px 9px; border-radius: 999px; background: var(--linea); color: var(--texto-2); }
.vcard .modo.idea { background: var(--acento-suave); color: var(--acento); }
.portada.grande.vertical { aspect-ratio: 9 / 16; max-height: 78vh; width: auto; margin: 0 auto; }
.vcard.crear { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: center; gap: 18px; min-height: 120px; padding: 22px; background: transparent; box-shadow: none; border: 2px dashed var(--linea-2); color: var(--texto-2); font: inherit; }
.vcard.crear .textos { display: flex; flex-direction: column; gap: 3px; }
.vcard.crear strong { font-size: 19px; color: var(--texto); letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; }
.vcard.crear .textos > span { font-size: 14px; max-width: 52ch; }
.vcard.crear .mas { width: 54px; height: 54px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--sup); box-shadow: var(--sombra-1); color: var(--acento); transition: transform .45s var(--rebote); }
.vcard.crear:hover { transform: none; border-color: var(--acento); background: var(--acento-suave); box-shadow: none; }
.vcard.crear:hover .mas { transform: rotate(90deg) scale(1.06); }
.vcard.crear.pronto { cursor: default; }
.vcard.crear.pronto:hover { border-color: var(--linea-2); background: transparent; }
.vcard.crear.pronto:hover .mas { transform: none; }
.p-demo { background: #000; }
.p-demo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portada.p-demo.grande, .portada.p-muestra.grande { aspect-ratio: 16 / 9; }
/* muestra de un estilo sin demo: su fondo, un panel de cristal con su nombre en su fuente, su acento y sus colores */
.p-muestra { background: radial-gradient(120% 95% at 28% 18%, var(--m-plano) 0%, var(--m-fondo) 72%); }
.p-muestra .m-luz { inset: -25%; background: radial-gradient(34% 30% at 68% 34%, color-mix(in srgb, var(--m-acento) 38%, transparent), transparent 72%); animation: m-deriva 9s ease-in-out infinite alternate; }
.p-muestra .m-panel { left: 11%; top: 20%; width: 58%; height: 52%; border-radius: 14px; background: linear-gradient(160deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .15); box-shadow: 0 30px 60px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12); animation: m-flota 7s ease-in-out infinite alternate; }
.p-muestra { container-type: inline-size; }
.p-muestra .m-panel b { left: 9%; top: 16%; right: 6%; white-space: nowrap; font: 700 clamp(14px, 5.6cqw, 40px)/1.05 var(--m-fuente), var(--fuente, system-ui), sans-serif; color: var(--m-texto); letter-spacing: -.03em; }
.p-muestra .m-panel i { left: 9%; height: 7%; border-radius: 4px; background: color-mix(in srgb, var(--m-texto) 20%, transparent); }
.p-muestra .m-panel i:nth-of-type(1) { top: 58%; width: 60%; }
.p-muestra .m-panel i:nth-of-type(2) { top: 73%; width: 34%; background: var(--m-acento); box-shadow: 0 0 18px color-mix(in srgb, var(--m-acento) 55%, transparent); }
.p-muestra .m-puntos { right: 7%; bottom: 9%; display: flex; gap: 6px; }
.p-muestra .m-puntos span { position: static; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); }
.p-muestra .m-pronto { left: 11%; bottom: 9%; font: 500 12px/1 var(--fuente, system-ui), sans-serif; color: rgba(255, 255, 255, .78); padding: 6px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .13); }
.portada.grande.p-muestra .m-pronto { font-size: 13px; }
@keyframes m-flota { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@keyframes m-deriva { from { transform: translate(0, 0); } to { transform: translate(-4%, 3%); } }
@media (prefers-reduced-motion: reduce) { .p-muestra .m-luz, .p-muestra .m-panel { animation: none; } }
.v-sonido { position: absolute; right: 12px; bottom: 12px; z-index: 5; display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: 999px; padding: 8px 13px; font: 500 13px/1 var(--fuente, inherit);
  color: #fff; background: rgba(20, 20, 22, .52); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset; cursor: pointer;
  opacity: 0; transform: translateY(4px); transition: opacity .3s var(--curva), transform .3s var(--curva), background .2s; }
.v-sonido svg { width: 15px; height: 15px; }
.v-sonido { white-space: nowrap; }
/* el de la página del estilo: botón + barra de volumen (aparece al activar el sonido) */
.v-control { gap: 10px; padding: 6px 12px 6px 6px; cursor: default; width: max-content; }
.v-control > *, .v-control svg, .v-control span { flex: none; position: static; }          /* .portada * los ponía en absoluto y el botón quedaba de 8 px */
.v-mudo { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; color: inherit; font: inherit; padding: 2px 4px; cursor: pointer; white-space: nowrap; }
.v-vol { width: 96px; height: 4px; accent-color: #fff; cursor: pointer; margin: 0; }
@media (max-width: 640px) { .v-vol { width: 72px; } }
.v-sonido:hover { background: rgba(20, 20, 22, .72); }
.vcard:hover .v-sonido, .vcard:focus-within .v-sonido, .v-sonido.fijo { opacity: 1; transform: none; }
@media (hover: none) { .v-sonido { opacity: 1; transform: none; } }
.lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(0, 0, 0, .72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); animation: aparece .3s var(--curva) both; }
.lightbox.sale { opacity: 0; transition: opacity .25s var(--curva); }
.lb-caja { position: relative; width: min(1100px, 100%); background: var(--sup); border-radius: 22px; overflow: hidden; box-shadow: 0 40px 120px rgba(0, 0, 0, .5); }
.lb-caja video { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 80vh; object-fit: contain; background: #000; }
.lb-pie { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; }
.lb-pie strong { display: block; font-size: 18px; letter-spacing: -.02em; }
.lb-pie small { color: var(--texto-2); font-size: 14px; }
.lb-cerrar { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff; font-size: 22px; line-height: 1;
  background: rgba(20, 20, 22, .55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer; }
.lb-cerrar svg { width: 18px; height: 18px; }
#variantes.opciones { margin-bottom: 0; }
#variantes .opcion { display: inline-flex; align-items: center; gap: 6px; }
#variantes .opcion svg { width: 14px; height: 14px; color: var(--acento); }
@media (max-width: 1000px) { .vitrina { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vcard.destacada { grid-template-columns: 1fr; } .vcard.destacada .vinfo { padding: 20px 22px 24px; } }
@media (max-width: 640px) { .vitrina { grid-template-columns: 1fr; gap: 16px; } .vitrina.vertical { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .vitrina.vertical .vinfo { padding: 10px 12px 12px; } .vitrina.vertical h3 { font-size: 16px; } .vitrina.vertical p { display: none; } .vcard.crear { flex-direction: column; text-align: center; } .vcard.crear .textos { align-items: center; } .lb-pie { flex-direction: column; align-items: flex-start; } }
.variante { display: flex; align-items: center; gap: 12px; text-align: left; border: 1.5px solid var(--linea-2); background: var(--sup); border-radius: 16px; padding: 8px 12px 8px 8px; cursor: pointer; color: var(--texto); transition: all .22s var(--curva); }
.variante:hover { border-color: var(--texto-3); }
.variante.activa { border-color: var(--acento); box-shadow: 0 0 0 4px var(--acento-suave); }
.variante img, .variante .v-color { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; flex: none; display: grid; place-items: center; }
.variante .v-color.auto { background: linear-gradient(135deg, #0a84ff, #bf5af2, #ff375f); color: #fff; }
.v-textos { display: flex; flex-direction: column; min-width: 0; }
.v-textos strong { font-size: 14.5px; font-weight: 600; }
.v-textos small { font-size: 12.5px; color: var(--texto-3); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#nota-extras { margin-top: 8px; font-size: 14px; padding: 11px 14px; }

/* antes de empezar: las preguntas de Montaje */
.hoja-caja.preguntas { text-align: left; max-height: calc(100vh - 48px); overflow: auto; }
.hoja-caja.preguntas > h2, .hoja-caja.preguntas > p { text-align: center; }
.pregunta { border-top: 1px solid var(--linea); padding: 16px 0 6px; }
.pregunta > strong { display: block; font-size: 16px; font-weight: 600; margin-bottom: 10px; letter-spacing: -.01em; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.opcion { border: 1.5px solid var(--linea-2); background: var(--sup); color: var(--texto); border-radius: 999px; padding: 8px 14px; font-size: 14px; cursor: pointer; transition: all .2s var(--curva); }
.opcion:hover { border-color: var(--texto-3); }
.opcion.activa { border-color: var(--acento); background: var(--acento-suave); color: var(--texto); }
.pregunta .otra { font-size: 14px; padding: 10px 14px; }
.pregunta [data-subir] { margin-top: 10px; }

/* formatos: rectángulo con la proporción real al lado de 16:9, 9:16, 1:1 y 4:5 */
.forma-f { display: inline-block; flex: none; box-sizing: border-box; border: 1.5px solid currentColor; border-radius: 2.5px; margin-right: 7px; vertical-align: middle; opacity: .8; }
#formato button { display: inline-flex; align-items: center; justify-content: center; }
#formato button.activo .forma-f { opacity: 1; }
.chip .forma-f { margin-right: 5px; transform: scale(.8); transform-origin: center; }
/* formato y duración: lado a lado si caben; si no, la duración baja a su propia línea */
.fila-2 { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-start; }
.fila-2 > .campo { flex: 1 1 auto; margin-bottom: 0; }
.fila-2 > label.campo { min-width: 170px; }

/* estilos propios: papelera sobre la tarjeta (aparece al pasar el mouse; siempre visible en pantallas táctiles) */
.tarjeta-caja { position: relative; display: flex; }
.tarjeta-caja > .tarjeta { flex: 1; min-width: 0; }
.borrar-tarjeta { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: rgba(0, 0, 0, .55); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transform: scale(.9); transition: opacity .2s var(--curva), transform .2s var(--curva), background .2s; z-index: 2; }
.tarjeta-caja:hover .borrar-tarjeta, .borrar-tarjeta:focus-visible { opacity: 1; transform: scale(1); }
.borrar-tarjeta:hover { background: var(--rojo); }
@media (hover: none) { .borrar-tarjeta { opacity: 1; transform: none; } }

/* ---------- esfuerzo: barra de 3 pasos (bajo · medio · alto) ---------- */
.esfuerzo input[type=range] { width: 100%; margin: 8px 0 2px; accent-color: var(--acento); cursor: pointer; }
.esfuerzo input[type=range]:disabled { cursor: default; opacity: .55; }
.esfuerzo-marcas { display: flex; justify-content: space-between; }
.esfuerzo-marcas button { font: inherit; font-size: 13px; color: var(--texto-3); background: none; border: 0; padding: 2px 6px; border-radius: 8px; cursor: pointer; }
.esfuerzo-marcas button.activo { color: var(--texto); font-weight: 600; }
.esfuerzo .nota { margin: 6px 0 0; min-height: 2.6em; }
.campo.esfuerzo { margin-top: 16px; }
.nota.bloque { display: block; margin-top: 2px; }

/* entrar con Whop, mantenimiento y botones que son enlaces (el checkout) */
.entrar { max-width: 440px; margin: 9vh auto 0; text-align: center; }
.entrar h1 { font-size: clamp(30px, 5vw, 38px); letter-spacing: -.02em; margin: 22px 0 12px; }
.entrar p { color: var(--texto-2); font-size: 17px; line-height: 1.45; margin: 0 0 24px; }
.entrar .boton.fantasma { margin-top: 14px; }
.entrar-error { background: rgba(255, 59, 48, .1); color: var(--rojo) !important; border-radius: 12px; padding: 10px 14px; font-size: 15px !important; }
.entrar-hoja h2 { margin-top: 18px; }
.nota.mantenimiento { color: var(--rojo); margin: 14px 0 0; }
a.boton { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.ajuste-cr { display: inline-flex; align-items: center; gap: 6px; }
.ajuste-cr input { width: 68px; font: inherit; font-size: 14px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--linea-2); background: var(--sup); color: var(--texto); }

/* ---------------------------------------------------------------- tema elegido a mano (data-tema en <html>); sin elegir, manda el sistema */
:root[data-tema="claro"] {
  --fondo: #f5f5f7; --sup: #ffffff; --sup-2: #fbfbfd; --sup-3: #f0f0f3;
  --texto: #1d1d1f; --texto-2: #6e6e73; --texto-3: #86868b; --linea: rgba(0, 0, 0, .08); --linea-2: rgba(0, 0, 0, .14);
  --acento: #0071e3; --acento-2: #0077ed; --acento-suave: rgba(0, 113, 227, .10);
  --verde: #28a745; --verde-suave: rgba(52, 199, 89, .14);
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 20px rgba(0, 0, 0, .05);
  --sombra-2: 0 2px 8px rgba(0, 0, 0, .06), 0 26px 60px rgba(0, 0, 0, .12);
  --vidrio: rgba(251, 251, 253, .72);
  color-scheme: light;
}
:root[data-tema="oscuro"] {
  --fondo: #000000; --sup: #1c1c1e; --sup-2: #161617; --sup-3: #2c2c2e;
  --texto: #f5f5f7; --texto-2: #a1a1a6; --texto-3: #6e6e73; --linea: rgba(255, 255, 255, .10); --linea-2: rgba(255, 255, 255, .18);
  --acento: #2997ff; --acento-2: #47a6ff; --acento-suave: rgba(41, 151, 255, .16);
  --verde: #30d158; --verde-suave: rgba(48, 209, 88, .16);
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 20px rgba(0, 0, 0, .35);
  --sombra-2: 0 2px 8px rgba(0, 0, 0, .5), 0 26px 60px rgba(0, 0, 0, .6);
  --vidrio: rgba(22, 22, 23, .72);
  color-scheme: dark;
}
:root[data-tema="claro"] .p-saas { background: radial-gradient(80% 60% at 70% 0%, rgba(0, 113, 227, .22), transparent 60%), linear-gradient(180deg, #eef2f8, #e6ebf3); }
:root[data-tema="oscuro"] .p-saas { background: radial-gradient(80% 60% at 70% 0%, rgba(41, 151, 255, .3), transparent 60%), linear-gradient(180deg, #16181d, #0e1014); }
:root[data-tema="claro"] .consejo .mal { color: #c9302c; } :root[data-tema="claro"] .consejo .bien { color: #1e7e34; }
:root[data-tema="oscuro"] .consejo .mal { color: #ff6961; } :root[data-tema="oscuro"] .consejo .bien { color: #30d158; }
:root[data-tema="claro"] .cinta-demo { color: #b36b00; } :root[data-tema="oscuro"] .cinta-demo { color: #ffb340; }
/* el cambio de tema se funde en vez de saltar */
.cambiando-tema, .cambiando-tema * { transition: background-color .4s var(--curva), color .4s var(--curva), border-color .4s var(--curva), box-shadow .4s var(--curva) !important; }

/* el switch: sol a la izquierda (claro), luna a la derecha (oscuro) */
.tema { border: 0; background: none; padding: 4px; cursor: pointer; display: inline-flex; align-items: center; -webkit-tap-highlight-color: transparent; }
.tema-riel { position: relative; width: 46px; height: 26px; border-radius: 999px; background: #3a3a3c; box-shadow: inset 0 0 0 1px var(--linea); transition: background .35s var(--curva); }
.tema-bola { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #1c1c1e; box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  display: grid; place-items: center; transform: translateX(20px); transition: transform .45s var(--rebote), background .35s var(--curva); }
.tema-bola svg { grid-area: 1 / 1; width: 13px; height: 13px; transition: opacity .3s var(--curva), transform .45s var(--rebote); }
.tema-bola .sol { color: #ff9f0a; opacity: 0; transform: rotate(-90deg) scale(.5); }
.tema-bola .luna { color: #e8e8ed; }
.tema[aria-checked="true"] .tema-riel { background: #e5e5ea; }
.tema[aria-checked="true"] .tema-bola { transform: translateX(0); background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.tema[aria-checked="true"] .sol { opacity: 1; transform: none; }
.tema[aria-checked="true"] .luna { opacity: 0; transform: rotate(90deg) scale(.5); }
.tema:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 999px; }

/* ----- versión móvil: crear en pocos toques ----- */
.mas-opciones { margin-top: 6px; border-top: 1px solid var(--linea); padding-top: 4px; }
.mas-opciones > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 14px 0; font-weight: 600; font-size: 15px; }
.mas-opciones > summary::-webkit-details-marker { display: none; }
.mas-opciones > summary::after { content: "›"; margin-left: auto; color: var(--texto-3); font-size: 20px; line-height: 1; transform: rotate(90deg); transition: transform .2s var(--curva); }
.mas-opciones[open] > summary::after { transform: rotate(-90deg); }
.mas-opciones > summary small { color: var(--texto-3); font-weight: 400; font-size: 13px; }
.video-final { display: block; width: 100%; max-height: 72vh; background: #000; border-radius: 16px; object-fit: contain; }
.acciones-video { margin-top: 12px; gap: 10px; }
.rv-pasos { display: flex; gap: 8px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
@media (pointer: fine) { .rv-pasos [data-paso] { display: none; } }
/* cambios: el trazo a mano sobre el video (SVG del tamaño del video) */
svg.rv-capa { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: manipulation; cursor: crosshair; }
svg.rv-capa.dibujo { touch-action: none; }
.rv-trazo { fill: rgba(255, 59, 48, .14); stroke: var(--rojo); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
polyline.rv-trazo { fill: none; }
.rv-trazo.vieja { fill: none; stroke-dasharray: 8 6; opacity: .85; }
.rv-pista-dibujo { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; line-height: 1;
  padding: 9px 14px; border-radius: 999px; background: rgba(20, 20, 22, .72); color: #fff; font-size: 13px; font-weight: 500; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); pointer-events: auto; }
.rv-pista-dibujo[hidden] { display: none; }
.rv-pista-dibujo .enlace { color: #8ec5ff; font-size: 13px; }
.rv-dictar { display: inline-flex; align-items: center; gap: 7px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; }
.rv-dictar.grabando { background: var(--rojo); color: #fff; border-color: transparent; animation: latido 1.2s ease-in-out infinite; }
@keyframes latido { 50% { box-shadow: 0 0 0 8px rgba(255, 59, 48, .18); } }
.rv-general + .rv-dictar { margin-top: 8px; }
.crear-rapido { max-width: 640px; margin: 0 auto; }
.crear-rapido h1 { margin: 6px 0 6px; font-size: 30px; letter-spacing: -.03em; }
.crear-lista { display: grid; gap: 12px; margin-top: 20px; }
.crear-fila { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 18px; background: var(--sup); box-shadow: var(--sombra-1); color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.crear-fila:active { transform: scale(.985); }
.crear-mini { flex: none; width: 84px; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--sup-3); }
.crear-mini.vertical { width: 64px; aspect-ratio: 9 / 16; }
.crear-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crear-txt { display: grid; gap: 5px; min-width: 0; }
.crear-txt strong { font-size: 17px; }
.crear-txt small { color: var(--texto-2); font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.crear-txt .modo { justify-self: start; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--linea); color: var(--texto-2); }
.crear-txt .modo.idea { background: var(--acento-suave); color: var(--acento); }
.crear-fila .flecha { margin-left: auto; color: var(--texto-3); font-size: 20px; }
/* ----- Explora: cuadrícula tipo Pinterest ----- */
.explora h1 { margin: 6px 0 6px; font-size: 32px; letter-spacing: -.03em; }
.ex-filtros { margin: 18px 0 16px; gap: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.ex-filtros .chip { flex: none; cursor: pointer; border: 0; font: inherit; font-size: 13px; }
.ex-grid { columns: 4 230px; column-gap: 14px; }
.ex-card { break-inside: avoid; margin: 0 0 14px; border-radius: 18px; overflow: hidden; background: var(--sup); box-shadow: var(--sombra-1); }
.ex-media { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; border: 0; padding: 0; cursor: pointer; background: var(--sup-3); overflow: hidden; }
.ex-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ex-portada { position: absolute; inset: 0; display: grid; place-items: end start; padding: 16px; color: #fff; font-size: 20px; line-height: 1.15; text-align: left;
  background: radial-gradient(120% 80% at 20% 10%, rgba(255,255,255,.28), transparent 60%), linear-gradient(160deg, var(--c1, #5b5bd6), var(--c2, #e0457b)); }
.cat-parodia-ia { --c1: #ff7a45; --c2: #e0457b; } .cat-anim-2d { --c1: #ffc828; --c2: #ff7a45; } .cat-anim-3d { --c1: #5b8cff; --c2: #8a5bff; }
.cat-mg-rostro { --c1: #1fbf8f; --c2: #1a6fe0; } .cat-mg-sin-rostro { --c1: #222a3a; --c2: #30d158; } .cat-ugc { --c1: #ff5e9a; --c2: #ffb35c; }
.cat-anuncios { --c1: #ff9f0a; --c2: #ff375f; } .cat-inmobiliaria { --c1: #3a7bd5; --c2: #00d2ff; } .cat-curiosidades { --c1: #7f5af0; --c2: #2cb67d; }
.ex-plat { position: absolute; left: 10px; top: 10px; padding: 4px 9px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: 11.5px; font-weight: 600; backdrop-filter: blur(8px); }
.ex-play { position: absolute; right: 10px; bottom: 10px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.9); color: #111; font-size: 15px; }
.ex-info { padding: 12px 14px 14px; display: grid; gap: 6px; }
.ex-info h3 { margin: 0; font-size: 15.5px; line-height: 1.3; }
.ex-info p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--texto-2); }
.ex-cat { font-size: 11.5px; font-weight: 600; color: var(--acento); }
.ex-autor { color: var(--texto-3); font-size: 12px; }
.ex-info .boton { justify-self: start; margin-top: 4px; }
.ex-info .chip { justify-self: start; font-size: 12px; }
.ex-admin { display: flex; gap: 6px; margin-top: 4px; }
.ex-panel { margin: 14px 0; padding: 4px 16px 12px; border-radius: 16px; background: var(--sup-2); border: 1px solid var(--linea); }
.ex-panel > summary { cursor: pointer; padding: 12px 0; font-weight: 600; }
.ex-panel > summary small { color: var(--texto-3); font-weight: 400; margin-left: 6px; }
.ex-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-bottom: 12px; }
.ex-form input, .ex-form select { font: inherit; font-size: 15px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--linea-2); background: var(--sup); color: var(--texto); }
.ex-sub { font-size: 15px; margin: 14px 0 10px; }
.ex-lb iframe { display: block; width: min(420px, 90vw); aspect-ratio: 9 / 16; max-height: 82vh; border: 0; border-radius: 14px; background: #000; }
@media (max-width: 640px) { .ex-grid { columns: 2; column-gap: 10px; } .ex-card { margin-bottom: 10px; } .ex-info p { display: none; } .explora h1 { font-size: 28px; } }
.instalar { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; margin: 4px 0 18px; border-radius: 18px; background: var(--sup); box-shadow: var(--sombra-1); }
.instalar-ico img { width: 40px; height: 40px; border-radius: 10px; display: block; }
.instalar-txt { display: grid; gap: 2px; min-width: 0; flex: 1; }
.instalar-txt strong { font-size: 15px; }
.instalar-txt small { color: var(--texto-2); font-size: 12.5px; line-height: 1.3; }
.instalar-x { border: 0; background: none; color: var(--texto-3); padding: 6px; cursor: pointer; display: grid; place-items: center; }
.tab-crear .tab-crear-boton { display: grid; place-items: center; width: 44px; height: 30px; border-radius: 999px; background: var(--acento); color: #fff; }
.tab-crear .tab-crear-boton svg { width: 20px; height: 20px; }
.tabs-movil a.tab-crear.activo { color: var(--acento); }

/* celular: pestañas abajo (el menú de la barra no entra) */
.tabs-movil { display: none; }
@media (max-width: 860px) {
  .tabs-movil { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; justify-content: space-around;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); background: var(--vidrio); border-top: 1px solid var(--linea);
    backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
  .tabs-movil a { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 58px; padding: 4px 0; color: var(--texto-3); font-size: 11px; font-weight: 500; -webkit-tap-highlight-color: transparent; }
  .tabs-movil a svg { width: 24px; height: 24px; }
  .tabs-movil a.activo { color: var(--acento); }
  .app { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  /* el botón Crear del formulario queda siempre a mano, pegado sobre las pestañas */
  .detalle .panel .acciones { position: sticky; bottom: calc(66px + env(safe-area-inset-bottom)); z-index: 5; margin: 18px -20px -20px; padding: 12px 20px calc(12px); background: var(--sup); border-top: 1px solid var(--linea); border-radius: 0 0 var(--r-3) var(--r-3); }
  .detalle .panel .acciones .boton { flex: 1 1 auto; justify-content: center; }
  .portada.grande.vertical { max-height: 46vh; }
  .acciones-video .boton { flex: 1 1 0; justify-content: center; }
  .avisos { bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* portada Motion Graphics: un talking head real (hecho con IA, no es una persona real) con los zooms de corte de siempre y un respiro lento */
.p-talking .encuadre .foto { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@keyframes tk-vivo { from { transform: scale(1); } to { transform: scale(1.045) translateY(-1%); } }
@media (prefers-reduced-motion: reduce) { .p-talking .encuadre .foto { animation: none; } }
.enlace { border: 0; background: none; padding: 0; color: var(--acento); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.enlace:hover { color: var(--acento-2); }

/* ---------------------------------------------------------------- acceso anticipado: formulario (/beta) y panel */
.beta { max-width: 760px; margin: 0 auto; padding: 48px 0 90px; }
.beta-cab { text-align: center; margin-bottom: 34px; }
.beta-cab .antetitulo { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--texto-2); margin-bottom: 16px; }
.beta-cab h1 { font-size: clamp(34px, 5.4vw, 58px); line-height: 1.04; letter-spacing: -.04em; margin: 0 auto; max-width: 15ch; font-weight: 700; }
.beta-cab h1 span { background: linear-gradient(120deg, #0a84ff 10%, #bf5af2 55%, #ff375f 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.beta-cab p { color: var(--texto-2); font-size: 19px; line-height: 1.4; margin: 16px auto 0; max-width: 38ch; }
.beta-previo { text-align: center; margin: -14px 0 22px; }
.beta-form fieldset { border: 0; margin: 0 0 18px; padding: 26px 28px 8px; background: var(--sup); border-radius: var(--r-3); box-shadow: var(--sombra-1); min-width: 0; }
.beta-form legend { float: left; width: 100%; display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 650; letter-spacing: -.02em; margin-bottom: 6px; padding: 0; }
.beta-form legend span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--acento-suave); color: var(--acento); font-size: 14px; font-weight: 700; }
.beta-form .pregunta { clear: both; display: block; margin: 18px 0 22px; }
.beta-form .pregunta > strong { display: block; font-size: 16px; font-weight: 600; margin-bottom: 10px; letter-spacing: -.01em; }
.beta-form .pregunta > strong small, .beta-form .campo span small { font-weight: 400; color: var(--texto-3); font-size: 13px; margin-left: 4px; }
.beta-form .opciones { margin-bottom: 0; }
.beta-form .opcion { font-size: 15px; padding: 9px 15px; }
.beta-datos { clear: both; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; padding: 12px 0 20px; }
.beta-form .campo > span { display: block; font-size: 14px; font-weight: 600; color: var(--texto-2); margin-bottom: 6px; }
.beta-form input, .beta-form textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; color: var(--texto); background: var(--sup-2); border: 1.5px solid var(--linea-2); border-radius: 12px; padding: 12px 14px; transition: border-color .2s var(--curva), box-shadow .2s var(--curva); }
.beta-form input:focus, .beta-form textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 4px var(--acento-suave); }
.beta-form textarea { resize: vertical; min-height: 84px; }
.beta-trampa { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0; }
.beta-enviar { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 28px; }
.beta-hecho { text-align: center; padding-top: 110px; }
.beta-hecho h1 { font-size: clamp(34px, 5vw, 52px); letter-spacing: -.04em; margin: 22px 0 10px; }
.beta-hecho p { color: var(--texto-2); font-size: 19px; margin: 0 0 28px; }
.beta-check { width: 76px; height: 76px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #30d158, #0a84ff); box-shadow: 0 18px 40px rgba(10, 132, 255, .35); animation: aparece .5s var(--rebote) both; }
.beta-check svg { width: 34px; height: 34px; }
@media (max-width: 640px) { .beta { padding-top: 24px; } .beta-form fieldset { padding: 20px 18px 4px; } .beta-datos { grid-template-columns: 1fr; } .beta-enviar .boton { width: 100%; } }
.solicitudes .s-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 18px 0; }
.solicitudes .s-barra .enlace-fila { flex: 1; min-width: 220px; margin: 0; }
.lista-solicitudes { display: grid; gap: 12px; margin-bottom: 18px; }
.solicitud { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: start; background: var(--sup); border-radius: 18px; padding: 16px 18px; box-shadow: var(--sombra-1); }
.solicitud.seleccionada { box-shadow: 0 0 0 2px var(--verde), var(--sombra-1); }
.solicitud.descartada { opacity: .55; }
.solicitud .puntaje { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-weight: 700; font-size: 17px; color: #fff; }
.puntaje.alta { background: linear-gradient(135deg, #30d158, #0bb57a); }
.puntaje.media { background: linear-gradient(135deg, #ff9f0a, #ff7a00); }
.puntaje.baja { background: var(--sup-3); color: var(--texto-2); }
.s-cuerpo small { color: var(--texto-2); }
.s-cuerpo .chips { margin-top: 8px; }
.s-freno { margin: 8px 0 0; color: var(--texto-2); font-style: italic; font-size: 14px; }
.s-acciones { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
@media (max-width: 640px) { .solicitud { grid-template-columns: auto 1fr; } .s-acciones { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; } }
.beta-whop { max-width: 360px; margin: 0 auto; }

.s-invitar { display: flex; gap: 10px; align-items: center; margin: 10px 0 16px; }
.s-invitar .enlace-fila { flex: 1; margin: 0; }
.s-invitar select { font: inherit; font-size: 14px; color: var(--texto); background: var(--sup); border: 1.5px solid var(--linea-2); border-radius: 12px; padding: 9px 10px; }

/* Explora: tarjeta sin miniatura (Instagram/TikTok): el título grande sobre el color de su categoría */
.ex-portada { gap: 6px; align-content: end; padding: 16px 16px 64px; font-size: 19px; }
.ex-portada small { font-size: 12px; opacity: .85; font-weight: 500; }
/* video terminado: los pasos plegados debajo del video */
.como-se-hizo { margin-top: 22px; border-top: 1px solid var(--linea); }
.como-se-hizo > summary { cursor: pointer; padding: 14px 0; color: var(--texto-2); font-weight: 600; font-size: 15px; }
.trabajo .resultado { margin-top: 18px; }
.corregir-p { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; padding: 6px 11px; border-radius: 999px; background: var(--acento-suave); color: var(--acento); font-size: 13px; font-weight: 600; white-space: nowrap; }
.rv-volumen { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.rv-volumen input { flex: 0 1 180px; accent-color: var(--acento); }
.rv-mudo { border: 0; background: var(--sup-3); color: var(--texto); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
/* cambios: guía de la primera vez (3 pasos y un dedo que hace doble toque) */
.rv-guia { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); line-height: 1.35; z-index: 6; }
.rv-guia-caja { width: min(300px, 86%); padding: 20px 18px 18px; border-radius: 20px; background: var(--sup); color: var(--texto); text-align: left; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.rv-guia-caja ol { margin: 12px 0 16px; padding-left: 22px; display: grid; gap: 8px; font-size: 15px; }
.rv-guia-caja .boton { width: 100%; justify-content: center; }
.rv-dedo { position: relative; height: 70px; display: grid; place-items: center; }
.rv-dedo span { width: 26px; height: 26px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 0 rgba(10,132,255,.5); animation: doble-toque 1.6s infinite; }
@keyframes doble-toque { 0%, 40%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(10,132,255,.45); } 10%, 30% { transform: scale(.78); } 20%, 50% { box-shadow: 0 0 0 18px rgba(10,132,255,0); } }

/* mientras se edita: solo los pensamientos y «lo que hace ahora» (los pasos técnicos quedan en «Cómo lo hice») */
.linea-tiempo.compacta .es-paso { display: none; }
.t-ahora { display: flex; align-items: center; gap: 9px; margin: 8px 0 0; color: var(--texto-2); font-size: 14.5px; }
.t-ahora[hidden] { display: none; }
.t-ahora i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--acento); animation: latido-ahora 1.2s ease-in-out infinite; }
@keyframes latido-ahora { 50% { opacity: .35; transform: scale(.7); } }

/* Crea tu estilo */
.me-form { margin-top: 18px; }
.me-form input[type=url] { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--linea-2); background: var(--sup); color: var(--texto); }
.estilo-listo { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.estilo-listo img { width: 160px; border-radius: 16px; box-shadow: var(--sombra-1); }
.estilo-listo > div { flex: 1; min-width: 220px; display: grid; gap: 10px; justify-items: start; }

/* portada: «¿Qué video creamos hoy?» (la caja de escribir es lo primero, como en las apps de IA) */
.c-titulo { font-size: clamp(34px, 6vw, 60px); letter-spacing: -.035em; line-height: 1.08; margin: 10px 0 12px; padding-bottom: .06em; }
.c-sub { margin: 0 auto 40px; max-width: 560px; color: var(--texto-2); font-size: clamp(16px, 2vw, 19px); line-height: 1.4; }
.c-zona { position: relative; isolation: isolate; max-width: 720px; margin: 0 auto; }
.c-zona::before { content: ""; position: absolute; inset: -30px -6% -40px; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(60px); opacity: .35;
  background: radial-gradient(closest-side at 30% 55%, #0a84ff, transparent), radial-gradient(closest-side at 72% 50%, #bf5af2, transparent), radial-gradient(closest-side at 55% 80%, #ff375f, transparent); }
.c-titulo span { background: linear-gradient(90deg, #0a84ff, #bf5af2 55%, #ff375f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.compositor { max-width: 720px; margin: 0 auto; text-align: left; background: var(--sup); border: 1px solid var(--linea); border-radius: 28px; padding: 18px 16px 14px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .18); transition: box-shadow .25s var(--curva), border-color .25s var(--curva); }
.compositor:focus-within { border-color: var(--acento); box-shadow: 0 18px 60px rgba(10, 132, 255, .18); }
.compositor textarea { display: block; width: 100%; box-sizing: border-box; border: 0; outline: 0; resize: none; background: transparent; color: var(--texto); font: inherit; font-size: 17px; line-height: 1.45; padding: 4px 10px 14px; min-height: 76px; box-shadow: none; }
.c-barra { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.c-btn { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linea); background: var(--sup-2); color: var(--texto-2); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.c-btn:hover { color: var(--texto); }
.c-estilo select { border: 0; background: transparent; color: inherit; font: inherit; font-size: 14px; outline: 0; cursor: pointer; max-width: 170px; padding: 0; height: auto; box-shadow: none; appearance: auto; }
.c-crear { margin-left: auto; height: 42px; flex: none; }
.c-adjunto { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px 6px; padding: 6px 8px 6px 12px; border-radius: 999px; background: var(--acento-suave); color: var(--acento); font-size: 13.5px; max-width: 100%; }
.c-adjunto[hidden] { display: none; }
.c-adjunto span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.c-adjunto button { border: 0; background: none; color: inherit; cursor: pointer; display: grid; place-items: center; padding: 2px; }
.c-ideas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 720px; margin: 22px auto 0; }
.c-ideas .chip { cursor: pointer; font: inherit; font-size: 13.5px; padding: 7px 13px; border: 1px solid var(--linea); background: transparent; color: var(--texto-2); transition: color .2s, border-color .2s; }
.c-ideas .chip:hover { color: var(--texto); border-color: var(--linea-2); }
.c-gratis { margin: 18px 0 0; color: var(--texto-3); font-size: 13.5px; }
@media (max-width: 640px) {
  .c-sub { margin-bottom: 28px; } .compositor { border-radius: 24px; padding: 14px 10px 10px; } .c-btn span { display: none; } .c-btn { padding: 0 12px; } .c-estilo select { max-width: 118px; }
  .c-ideas { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px; } .c-ideas .chip { flex: none; }
}
/* Proyectos: la lista nunca se estira más que la pantalla (un título largo empujaba toda la página en celular) */
.lista-proyectos { grid-template-columns: minmax(0, 1fr); }
.proyecto { min-width: 0; }
@media (max-width: 640px) {
  .ajustes h1 { font-size: 34px; margin: 28px 0 18px; }
  .proyecto { flex-wrap: wrap; gap: 8px 12px; padding: 14px; }
  .proyecto .cuerpo { flex: 1 1 calc(100% - 48px); }
  .proyecto small { display: block; font-size: 13px; }
  .proyecto .cuerpo + span { margin-left: 48px; }
  .proyecto .corregir-p { margin-left: 0; }
}
/* portada: selector «Estilo · Auto» (abre el catálogo) */
.c-estilo .c-etq { font-weight: 500; color: var(--texto-3); }
.c-estilo select { color: var(--texto); font-weight: 600; }
@media (max-width: 640px) { .c-estilo select { max-width: 104px; } }

/* logo morado (elegido el 8-11): degradado azul → violeta → rosa con barras blancas (baja, alta, media) */
.marca-glifo { justify-content: center; background: linear-gradient(135deg, #0a84ff, #bf5af2 60%, #ff375f); }
.marca-glifo i, .marca-glifo i:nth-child(3) { background: #fff; opacity: 1; }
.marca-glifo i:nth-child(1) { height: 8px; } .marca-glifo i:nth-child(2) { height: 16px; } .marca-glifo i:nth-child(3) { height: 11.5px; }
.logo-montaje { background: linear-gradient(135deg, #0a84ff, #bf5af2 60%, #ff375f); }
.glifo-m i, .glifo-m i:nth-child(3) { background: #fff; opacity: 1; }
.glifo-m i:nth-child(1) { height: 6px; } .glifo-m i:nth-child(2) { height: 12px; } .glifo-m i:nth-child(3) { height: 8.5px; }

/* portada en celular: el cuadro y una fila de estilos con sus clips (sin ideas ni catálogo largo) */
.c-estilos { display: none; }
@media (max-width: 640px) {
  .heroe.con-compositor { padding: 36px 0 20px; }
  .heroe.con-compositor ~ .seccion { display: none; }
  .heroe.con-compositor .c-ideas { display: none; }
  .c-estilos { display: block; margin: 30px 0 0; text-align: left; }
  .c-est-cab { display: flex; align-items: baseline; justify-content: space-between; margin: 0 2px 12px; }
  .c-est-cab b { font-size: 16px; font-weight: 650; color: var(--texto); } .c-est-cab a { font-size: 14px; font-weight: 600; }
  .c-est-fila { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 6px; }
  .c-est-fila::-webkit-scrollbar { display: none; }
  .c-est { flex: none; width: 100px; padding: 0; border: 0; background: none; color: var(--texto); font: inherit; text-align: left; cursor: pointer; scroll-snap-align: start; }
  .c-est-media { display: block; position: relative; width: 100px; height: 150px; border-radius: 16px; overflow: hidden; background: var(--sup-2); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .6); outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .2s; }
  .c-est-media > .portada { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; margin: 0; }
  .c-est-media video, .c-est-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .c-est small { display: block; margin-top: 7px; font-size: 13px; font-weight: 600; line-height: 1.25; }
  .c-est-ok { position: absolute; right: 7px; top: 7px; width: 22px; height: 22px; border-radius: 50%; display: none; place-items: center; color: #fff; background: var(--acento); }
  .c-est.activo .c-est-media { outline-color: var(--acento); }
  .c-est.activo .c-est-ok { display: grid; }
}

/* portada: menú propio de «Estilo» (reemplaza la lista gris del navegador) */
.c-barra { position: relative; }
.c-estilo { gap: 6px; }
.c-estilo .c-estilo-val { color: var(--texto); font-weight: 600; }
.c-estilo .c-flecha { opacity: .6; margin-left: 2px; transition: transform .2s var(--curva); }
.c-estilo[aria-expanded="true"] .c-flecha { transform: rotate(180deg); }
.c-menu { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; min-width: 270px; padding: 6px; border-radius: 18px; background: var(--sup); border: 1px solid var(--linea);
  box-shadow: var(--sombra-2); animation: c-menu-entra .18s var(--curva) both; }
@keyframes c-menu-entra { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.c-menu button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 7px 10px 7px 7px; border: 0; background: none; border-radius: 12px; color: var(--texto); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.c-menu button:hover, .c-menu button:focus-visible { background: var(--sup-3); outline: 0; }
.c-menu em { font-style: normal; display: block; min-width: 0; } .c-menu em b { font-weight: 600; display: block; }
.c-menu small { display: block; color: var(--texto-3); font-size: 12px; margin-top: 1px; }
.c-m-mini { flex: none; width: 34px; height: 34px; border-radius: 9px; overflow: hidden; display: grid; place-items: center; background: var(--sup-3); color: var(--texto-2); }
.c-m-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-m-mini.auto { background: linear-gradient(135deg, #0a84ff, #bf5af2 60%, #ff375f); color: #fff; }
.c-m-ok { margin-left: auto; color: var(--acento); display: grid; visibility: hidden; }
.c-menu button.activo .c-m-ok { visibility: visible; }
.c-menu hr { border: 0; border-top: 1px solid var(--linea); margin: 6px 6px; }
.c-menu .c-m-cat { color: var(--acento); padding-left: 12px; } .c-menu .c-m-cat .flecha { margin-left: auto; }
@media (max-width: 640px) { .c-menu { left: 0; right: 0; min-width: 0; } }
/* catálogo en PC: entran los 4 estilos verticales en una fila (antes el máximo de 270 px dejaba 3 y un hueco) */
@media (min-width: 641px) { .vitrina.vertical { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } }
/* el cuadro (y su menú de estilos) por encima de la fila de estilos que viene después */
.c-zona { z-index: 5; }