/* Cartelera — estudio de video con IA. Móvil primero. Tema «tablero» (24 oct, Carlos: «así es ahora el tema de todo Cartelera»): el juego de azul, gris y plateado del tablero digital de un carro, medido en su foto: negro azulado de vidrio, franjas azul acero (#4A6990 → #2D4361), números azul plateado (#B2C7FB), texto plateado frío (#D6E4F6) y plateado (#A9BACE). Los nombres de las variables (--ambar, --oro…) se quedan para no tocar cada regla: ahora son azul plateado. */ :root { --fondo: #090a0b; --fondo-2: #0e0f10; --panel: #131315; --panel-2: #191a1d; --borde: #2b2d32; --borde-suave: rgba(255, 255, 255, .08); --borde-ambar: #375786; --texto: #e7e9ed; --suave: #aeb3bb; --tenue: #80858e; --ambar: #b2c7fb; --ambar-2: #dce6fb; --oro: linear-gradient(135deg, #e8eefc 0%, #b2c7fb 48%, #5d7fb0 100%); --foco-apagado: #2d4361; --rojo: #ff6b6b; --verde: #a6bcef; --radio: 14px; --letra: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --titular: "Bebas Neue", "Impact", "Arial Narrow", sans-serif; --mono: ui-monospace, "Cascadia Code", Consolas, monospace; color-scheme: dark; /* Mismos valores escritos como variables: el estudio cambia de paleta sin tocar el resto del sitio (estudio-v2.css). */ --acento-rgb: 178 199 251; --acento-2-rgb: 220 230 251; --acento-3-rgb: 93 127 176; --acento-4-rgb: 74 105 144; --acento-fondo-rgb: 15 24 38; --fondo-rgb: 9 13 20; --panel-rgb: 17 26 39; --acento-fondo: #121214; --acento-fondo-2: #1b1c1f; --acento-borde-2: #375786; --acento-fondo-3: #151517; --sobre-acento: #0b0b0c; /* Detalles del tablero: la franja azul acero (clara arriba, oscura abajo), el brillo de los números y la barra plateada. */ --franja: linear-gradient(180deg, #5d7fb0 0%, #4a6990 55%, #2d4361 100%); --brillo-numero: 0 0 6px rgba(178, 199, 251, .55), 0 0 18px rgba(178, 199, 251, .22); --plata: linear-gradient(180deg, #f2f6fc 0%, #c9d5e6 45%, #a9bace 55%, #e6edf7 100%); } * { box-sizing: border-box; } html, body { margin: 0; } html { scroll-behavior: smooth; } body { background: var(--fondo); color: var(--texto); font-family: var(--letra); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; } a { color: var(--ambar); } button, input, textarea, select { font: inherit; color: inherit; } img, svg, video { max-width: 100%; } [hidden] { display: none !important; } :focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; } .contenedor { width: min(1440px, 100% - clamp(32px, 5vw, 96px)); margin-inline: auto; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .saltar { position: absolute; left: 16px; top: -64px; z-index: 80; padding: 8px 14px; border-radius: 577px / 1000px; background: var(--ambar); color: var(--sobre-acento); font-weight: 700; text-decoration: none; } .saltar:focus { top: 12px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; } } /* Botones */ .boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 577px / 1000px; border: 1px solid transparent; min-height: 44px; background: var(--ambar); color: var(--sobre-acento); font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease; } .boton:hover { background: var(--ambar-2); transform: translateY(-1px); } .boton:disabled { opacity: .5; cursor: not-allowed; transform: none; } .boton.secundario { background: rgba(255, 255, 255, .03); color: var(--texto); border-color: var(--borde); } .boton.secundario:hover { border-color: var(--ambar); background: rgba(255, 255, 255, .06); } .boton.oro { background: var(--oro); box-shadow: 0 10px 30px rgb(var(--acento-3-rgb) / .28); } .boton.oro:hover { filter: brightness(1.06); } .boton.chico { padding: 8px 14px; font-size: .9rem; min-height: 38px; } .boton.ancho { width: 100%; } .boton svg { width: 18px; height: 18px; flex: none; } /* ---------- Barra de navegación común ---------- */ .nav { position: sticky; top: 0; z-index: 50; background: rgb(var(--fondo-rgb) / .78); border-bottom: 1px solid var(--borde-suave); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); } .nav-fila { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 22px; min-height: 64px; } .logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--titular); font-size: 1.65rem; letter-spacing: .08em; color: var(--texto); text-decoration: none; line-height: 1; } .logo-icono { width: 30px; height: 30px; flex: none; } .nav-enlaces { display: flex; align-items: center; gap: 2px; } .nav-enlaces > a, .menu-crear > summary { display: inline-flex; align-items: center; gap: 6px; color: var(--suave); text-decoration: none; padding: 8px 12px; border-radius: 577px / 1000px; font-weight: 600; font-size: .95rem; cursor: pointer; list-style: none; } .menu-crear > summary::-webkit-details-marker { display: none; } .menu-crear > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .7; } .nav-enlaces > a:hover, .menu-crear > summary:hover, .menu-crear[open] > summary { color: var(--texto); background: var(--panel-2); } .nav-enlaces a[aria-current="page"] { color: var(--ambar-2); } .menu-crear, .menu-avatar { position: relative; } .menu-lista { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; min-width: 230px; padding: 6px; background: rgb(var(--panel-rgb) / .98); border: 1px solid var(--borde); border-radius: 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); display: grid; gap: 2px; } .menu-lista a, .menu-lista button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--texto); text-decoration: none; font-weight: 600; font-size: .93rem; background: none; border: 0; width: 100%; text-align: left; cursor: pointer; } .menu-lista a:hover, .menu-lista button:hover { background: var(--panel-2); } .menu-lista small { display: block; color: var(--tenue); font-weight: 400; font-size: .8rem; } .menu-lista hr { border: 0; border-top: 1px solid var(--borde); margin: 4px 6px; } .menu-lista .menu-correo { padding: 8px 12px 6px; color: var(--tenue); font-size: .82rem; overflow-wrap: anywhere; } .menu-icono { width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; background: rgb(var(--acento-rgb) / .12); color: var(--ambar); flex: none; } .menu-icono svg { width: 16px; height: 16px; } .nav-sesion { display: flex; align-items: center; gap: 8px; justify-self: end; min-width: 0; } .nav-saldo { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 6px 12px; border-radius: 577px / 1000px; border: 1px solid var(--borde); background: rgba(255, 255, 255, .03); color: var(--ambar-2); text-decoration: none; font-variant-numeric: tabular-nums; font-weight: 700; font-size: .88rem; white-space: nowrap; } .nav-saldo:hover { border-color: var(--ambar); } .nav-saldo svg { width: 16px; height: 16px; color: var(--ambar); } @media (max-width: 720px) { .nav-saldo .u { display: none; } } /* «· 200 con marca de agua» (paquete «Inicio + marca»); en celular queda «· 200 ©». */ .nav-saldo .m { color: #cedcfb; font-weight: 600; white-space: nowrap; } .nav-saldo .m[hidden] { display: none; } @media (max-width: 720px) { .nav-saldo .m-u { font-size: 0; } .nav-saldo .m-u::after { content: " ©"; font-size: .85rem; } } .saldo-marca { color: #cedcfb; font-weight: 600; } .saldo-marca[hidden] { display: none; } .menu-avatar > summary { list-style: none; cursor: pointer; border-radius: 25% / 50%; } .menu-avatar > summary::-webkit-details-marker { display: none; } .avatar { width: 38px; height: 38px; border-radius: 25% / 50%; display: grid; place-items: center; font-weight: 800; font-size: .95rem; color: var(--sobre-acento); background: var(--oro); text-transform: uppercase; box-shadow: 0 0 0 2px rgba(255, 255, 255, .08); } .menu-avatar .menu-lista { left: auto; right: 0; width: max-content; max-width: min(300px, calc(100vw - 32px)); } @media (max-width: 720px) { .nav-fila { grid-template-columns: 1fr auto; grid-template-areas: "logo sesion" "enlaces enlaces"; min-height: 0; padding: 10px 0 4px; } .nav .logo { grid-area: logo; } .nav-sesion { grid-area: sesion; } .nav-enlaces { grid-area: enlaces; margin-left: -12px; } } /* Marquesina (404, pagos) */ .marquesina { position: relative; display: inline-block; padding: 20px 38px 12px; border-radius: 10px; background: linear-gradient(180deg, #131416, #0a0b0c); box-shadow: 0 0 0 2px var(--acento-fondo-2), 0 0 0 8px #090a0b, 0 0 0 9px var(--acento-fondo-2), 0 24px 90px rgb(var(--acento-rgb) / .22); } .marquesina::before, .marquesina::after { content: ""; position: absolute; inset: 7px; border-radius: 10px; pointer-events: none; } .marquesina::before { background: radial-gradient(circle, var(--foco-apagado) 2.6px, transparent 3.4px) 0 0 / 22px 14px repeat-x, radial-gradient(circle, var(--foco-apagado) 2.6px, transparent 3.4px) 0 100% / 22px 14px repeat-x, radial-gradient(circle, var(--foco-apagado) 2.6px, transparent 3.4px) 0 0 / 14px 22px repeat-y, radial-gradient(circle, var(--foco-apagado) 2.6px, transparent 3.4px) 100% 0 / 14px 22px repeat-y; } .marquesina::after { background: radial-gradient(circle at 11px 50%, var(--ambar-2) 2.6px, transparent 3.4px) 0 0 / 44px 14px repeat-x, radial-gradient(circle at 11px 50%, var(--ambar-2) 2.6px, transparent 3.4px) 0 100% / 44px 14px repeat-x, radial-gradient(circle at 50% 11px, var(--ambar-2) 2.6px, transparent 3.4px) 0 0 / 14px 44px repeat-y, radial-gradient(circle at 50% 11px, var(--ambar-2) 2.6px, transparent 3.4px) 100% 0 / 14px 44px repeat-y; filter: drop-shadow(0 0 4px var(--ambar)); animation: persecucion 1.1s linear infinite; } @keyframes persecucion { 0%, 49.9% { background-position: 0 0, 0 100%, 0 0, 100% 0; } 50%, 100% { background-position: 22px 0, 22px 100%, 0 22px, 100% 22px; } } .marquesina h1, .marquesina .titulo-marquesina { margin: 0; font-family: var(--titular); font-weight: 400; letter-spacing: .06em; font-size: clamp(3.4rem, 12vw, 7.5rem); line-height: .95; color: var(--ambar-2); text-shadow: 0 0 18px rgb(var(--acento-rgb) / .55); } /* Piezas comunes */ .etiqueta { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 577px / 1000px; font-size: .8rem; letter-spacing: .02em; color: var(--ambar-2); border: 1px solid rgb(var(--acento-rgb) / .3); background: rgb(var(--acento-rgb) / .08); font-weight: 600; } .etiqueta .punto { width: 7px; height: 7px; border-radius: 25% / 50%; background: var(--ambar); box-shadow: 0 0 10px var(--ambar); } .acciones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .acciones.izquierda { justify-content: flex-start; } .sobretitulo { display: block; color: var(--ambar); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; margin-bottom: 10px; } .intro { color: var(--suave); margin: 0 0 28px; max-width: 680px; } .estado { display: inline-block; font-size: .72rem; padding: 3px 10px; border-radius: 577px / 1000px; border: 1px solid rgba(255, 255, 255, .16); color: var(--suave); background: rgb(var(--fondo-rgb) / .5); font-weight: 600; } .estado.activo { color: #cedbfb; border-color: rgba(166, 188, 239, .45); } .estado.pronto { color: var(--ambar-2); border-color: rgb(var(--acento-rgb) / .4); } /* ---------- Portada ---------- */ /* Recorta solo a los lados (el abanico): por abajo se ve lo que se sale, como los menús de los ajustes, que siempre abren hacia abajo sobre lo que sigue (25 oct); z-index para que pinten encima de la sección de abajo. */ .hero { position: relative; isolation: isolate; z-index: 1; overflow-x: clip; overflow-y: visible; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; text-align: center; min-height: min(calc(100svh - 64px), 980px); padding: clamp(40px, 7vw, 84px) 0 clamp(40px, 6vw, 72px); } .hero-fondo { position: absolute; inset: 0; z-index: -2; background: #0b0c0d; } .hero-fondo img, .hero-fondo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-fondo video { opacity: 0; transition: opacity .9s ease; } .hero-fondo video.listo { opacity: 1; } fieldset.generos { border: 0; margin: 0; min-inline-size: 0; } .hero-fondo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 58% at 50% 54%, rgb(var(--fondo-rgb) / .74), rgb(var(--fondo-rgb) / .42) 100%), linear-gradient(180deg, rgb(var(--fondo-rgb) / .55) 0%, rgb(var(--fondo-rgb) / 0) 26%, rgb(var(--fondo-rgb) / .3) 72%, var(--fondo) 100%); } .hero-titulo { margin: 18px 0 0; font-family: var(--titular); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(3.3rem, 9.4vw, 8.2rem); line-height: .86; text-shadow: 0 8px 40px rgba(0, 0, 0, .5); } .hero-titulo span { display: block; } .texto-oro { background: var(--oro); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; } .hero-sub { color: #d6cfc3; font-size: clamp(1rem, 2vw, 1.18rem); max-width: 600px; margin: 18px auto 28px; } .compositor { position: relative; width: min(860px, 100%); margin: 0 auto; text-align: left; padding: 12px; background: rgba(16, 16, 18, .8); border: 1px solid rgba(255, 255, 255, .11); border-radius: 12px; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 30px 90px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .06); transition: border-color .2s ease, box-shadow .2s ease; z-index: 5; /* sus menús (Duración, Formato…) van encima de las ideas de abajo (21 oct) */ } .compositor:focus-within { border-color: rgb(var(--acento-rgb) / .55); box-shadow: 0 30px 90px rgba(0, 0, 0, .6), 0 0 0 4px rgb(var(--acento-rgb) / .12); } .compositor-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .modos { display: inline-flex; gap: 2px; padding: 4px; border-radius: 577px / 1000px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07); } .modos label { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 577px / 1000px; cursor: pointer; color: var(--suave); font-weight: 700; font-size: .9rem; transition: background .15s ease, color .15s ease; } .modos label svg { width: 16px; height: 16px; } .modos input:checked + label { background: var(--texto); color: #111; } .modos input:focus-visible + label { outline: 2px solid var(--ambar); outline-offset: 2px; } .compositor-ayuda { color: var(--tenue); font-size: .8rem; padding-right: 6px; } .compositor textarea { display: block; width: 100%; min-height: 104px; max-height: 45vh; resize: none; background: transparent; border: 0; padding: 14px 10px 8px; font-size: clamp(1.02rem, 2.2vw, 1.16rem); line-height: 1.5; } .compositor textarea:focus { outline: none; } .generos { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px 6px 10px; } .chip-sel { position: relative; } .chip-sel input { position: absolute; opacity: 0; pointer-events: none; } .chip-sel label { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 577px / 1000px; cursor: pointer; white-space: nowrap; border: 1px solid rgba(255, 255, 255, .11); background: rgba(255, 255, 255, .04); color: #ddd6ca; font-size: .86rem; font-weight: 600; transition: border-color .15s ease, background .15s ease, color .15s ease; } .chip-sel label:hover { border-color: rgba(255, 255, 255, .26); } .chip-sel input:checked + label { border-color: var(--ambar); background: rgb(var(--acento-rgb) / .15); color: var(--ambar-2); } .chip-sel input:checked + label::before { content: ""; width: 6px; height: 6px; border-radius: 25% / 50%; background: var(--ambar); } .chip-sel input:focus-visible + label { outline: 2px solid var(--ambar); outline-offset: 2px; } .compositor-pie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 4px 2px; border-top: 1px solid rgba(255, 255, 255, .07); } .pildora { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 18px; border-radius: 577px / 1000px; /* 18 px: la punta del hexágono se come la orilla */ border: 1px solid rgba(255, 255, 255, .11); background: rgba(255, 255, 255, .04); color: var(--suave); font-size: .86rem; } .pildora:hover { border-color: rgba(255, 255, 255, .26); } .pildora:focus-within { border-color: var(--ambar); } .pildora svg { width: 16px; height: 16px; color: var(--ambar); flex: none; } .pildora select { -webkit-appearance: none; appearance: none; background: transparent; border: 0; color: var(--texto); font-weight: 700; cursor: pointer; padding: 0 16px 0 0; height: 100%; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 6px) 52%, calc(100% - 2px) 52%; background-size: 4px 4px; background-repeat: no-repeat; } .pildora select:focus { outline: none; } .pildora option { background: #161719; color: var(--texto); } .boton-crear { margin-left: auto; min-height: 46px; padding: 0 24px; font-size: 1rem; font-weight: 800; } .compositor-error { color: #ffb3a3; font-size: .85rem; padding: 4px 10px 0; min-height: 0; } .compositor-error:empty { display: none; } .ideas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 18px auto 0; max-width: 860px; } .ideas span { color: var(--tenue); font-size: .85rem; } .idea { border: 1px solid rgba(255, 255, 255, .1); background: rgb(var(--fondo-rgb) / .45); color: #d9d2c6; border-radius: 577px / 1000px; padding: 7px 13px; font-size: .84rem; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .idea:hover { border-color: var(--ambar); color: var(--texto); } @media (hover: none) { .compositor-ayuda { display: none; } } /* sin teclado físico, el atajo no aplica */ @media (max-width: 640px) { .generos { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; } .generos::-webkit-scrollbar { display: none; } .boton-crear { margin-left: 0; width: 100%; } .compositor-ayuda { display: none; } .modos label { padding: 8px 11px; } } /* Secciones */ .seccion { padding: clamp(56px, 8vw, 104px) 0; } .seccion + .seccion { padding-top: 0; } .seccion-cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .seccion-titulo { margin: 0; font-family: var(--titular); font-weight: 400; font-size: clamp(2.3rem, 5.4vw, 3.8rem); line-height: .92; letter-spacing: .01em; text-transform: uppercase; } .seccion-texto { margin: 10px 0 0; color: var(--suave); max-width: 620px; } .flechas { display: flex; gap: 8px; } .flecha { width: 44px; height: 44px; border-radius: 25% / 50%; border: 1px solid var(--borde); background: rgba(255, 255, 255, .03); color: var(--texto); display: grid; place-items: center; cursor: pointer; } .flecha:hover:not(:disabled) { border-color: var(--ambar); } .flecha:disabled { opacity: .35; cursor: default; } .flecha svg { width: 18px; height: 18px; } /* Carrusel de tarjetas */ .carrusel { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, 76vw, 310px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding: 2px 2px 8px; } .carrusel::-webkit-scrollbar { display: none; } .tarjeta-medio { position: relative; isolation: isolate; overflow: hidden; scroll-snap-align: start; aspect-ratio: 5 / 7; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 18px; border-radius: 12px; background: var(--panel); border: 1px solid var(--borde-suave); } .tarjeta-medio > .fondo-medio { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .tarjeta-medio::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(var(--fondo-rgb) / 0) 35%, rgb(var(--fondo-rgb) / .7) 65%, rgb(var(--fondo-rgb) / .96)); pointer-events: none; } .tarjeta-medio h3 { margin: 0; font-family: var(--titular); font-weight: 400; font-size: 2rem; line-height: .95; letter-spacing: .02em; text-transform: uppercase; } .tarjeta-medio p { margin: 0; color: #e2dbcf; font-size: .9rem; line-height: 1.45; } .tarjeta-medio .estado { position: absolute; top: 14px; left: 14px; } .mosaico { position: absolute; inset: 0; z-index: -2; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; background: #000; } .mosaico img { width: 100%; height: 100%; object-fit: cover; } .hoja-letra { position: absolute; inset: 0; z-index: -2; padding: 52px 18px 0; background: radial-gradient(ellipse at 50% 0%, rgb(var(--acento-rgb) / .14), transparent 60%), linear-gradient(180deg, #18191b, #0f0f10); font-size: .82rem; } .hoja-letra .sec { color: var(--ambar); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; display: flex; gap: 8px; align-items: center; margin-bottom: 6px; } .hoja-letra .verso { grid-template-columns: 1.6rem minmax(0, 1fr) auto; } .hoja-letra .verso .n { color: var(--verde); } .directores { position: absolute; inset: 52px 16px auto; z-index: 0; display: flex; flex-wrap: wrap; gap: 6px; } .directores span { padding: 6px 10px; border-radius: 577px / 1000px; font-size: .78rem; font-weight: 700; background: rgb(var(--fondo-rgb) / .62); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .directores span.activo { border-color: rgba(166, 188, 239, .5); color: #dee8fb; } /* Reproductor con forma de onda */ .reproductor { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 8px; border-radius: 10px; background: rgb(var(--fondo-rgb) / .62); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .boton-play { width: 40px; height: 40px; flex: none; border-radius: 25% / 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: var(--oro); color: var(--sobre-acento); } .boton-play svg { width: 18px; height: 18px; } .onda { flex: 1; height: 36px; display: flex; align-items: center; gap: 2px; cursor: pointer; min-width: 0; } .onda i { flex: 1; min-width: 1px; height: var(--h, 40%); border-radius: 2px; background: rgba(255, 255, 255, .32); } .onda i.sonado { background: var(--ambar); } .reproductor-tiempo { font-variant-numeric: tabular-nums; font-size: .75rem; color: var(--suave); min-width: 2.6rem; text-align: right; } /* Hecho en Cartelera */ .rejilla-clips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } @media (max-width: 980px) { .rejilla-clips { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 560px) { .rejilla-clips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } } .clip { margin: 0; position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 9 / 16; border-radius: 10px; background: #111; border: 1px solid var(--borde-suave); } .clip img, .clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .clip:hover img, .clip:hover video { transform: scale(1.04); } .clip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgb(var(--fondo-rgb) / .9)); pointer-events: none; } .clip-info { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 1; display: grid; gap: 4px; } .clip-info strong { font-size: .9rem; } .clip-info span { font-size: .72rem; color: var(--ambar-2); font-weight: 700; letter-spacing: .02em; } .clip-play { position: absolute; top: 10px; right: 10px; z-index: 1; width: 30px; height: 30px; border-radius: 25% / 50%; display: grid; place-items: center; background: rgb(var(--fondo-rgb) / .55); border: 1px solid rgba(255, 255, 255, .2); transition: opacity .2s ease; } .clip-play svg { width: 12px; height: 12px; } .clip.reproduciendo .clip-play { opacity: 0; } .nota-honesta { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; color: var(--tenue); font-size: .86rem; max-width: 760px; } .nota-honesta svg { width: 18px; height: 18px; flex: none; color: var(--ambar); margin-top: 2px; } /* Cómo funciona (compacto) */ .pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } @media (max-width: 860px) { .pasos { grid-template-columns: 1fr; } } .paso { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--borde-suave); } .paso img { width: 88px; height: 118px; object-fit: cover; border-radius: 8px; } .paso-num { display: inline-flex; align-items: center; gap: 6px; color: var(--ambar); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; } .paso-num svg { width: 14px; height: 14px; } .paso h3 { margin: 4px 0 4px; font-family: var(--titular); font-weight: 400; font-size: 1.7rem; line-height: 1; letter-spacing: .02em; } .paso p { margin: 0; color: var(--suave); font-size: .9rem; } /* Precios (adelanto en portada) */ .precios-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } @media (max-width: 760px) { .precios-mini { grid-template-columns: 1fr; } } .precio-mini { padding: 22px; border-radius: 12px; background: var(--panel); border: 1px solid var(--borde-suave); display: grid; gap: 4px; } .precio-mini p { margin: 0; } .precio-mini h3 { margin: 0; font-family: var(--titular); font-weight: 400; font-size: 1.6rem; letter-spacing: .04em; color: var(--ambar-2); } .precio-mini .cifra { font-size: 2.2rem; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; } .precio-mini .cifra small { font-size: .95rem; color: var(--suave); font-weight: 600; margin-left: 6px; } .precio-mini .monto { color: var(--suave); font-weight: 600; } .precio-mini.destacado { border-color: var(--ambar); background: linear-gradient(180deg, rgb(var(--acento-rgb) / .09), transparent 60%), var(--panel); } .precio-mini-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .precio-mini .insignia { justify-self: start; margin-top: 6px; } .precios-planes { margin: 16px 0 0; font-size: .95rem; } .precios-planes a { color: var(--ambar-2); font-weight: 700; } /* Llamado final */ .cta-final { position: relative; isolation: isolate; overflow: hidden; border-radius: 12px; padding: clamp(44px, 8vw, 96px) 22px; text-align: center; border: 1px solid var(--borde-suave); } .cta-final > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .cta-final::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgb(var(--fondo-rgb) / .55), rgb(var(--fondo-rgb) / .88)); } .cta-final p { color: #ddd6ca; max-width: 520px; margin: 14px auto 24px; } /* Pie */ .pie { border-top: 1px solid var(--borde-suave); color: var(--tenue); font-size: .9rem; margin-top: clamp(40px, 6vw, 72px); } .pie-rejilla { display: grid; grid-template-columns: 1.4fr repeat(2, minmax(0, 1fr)); gap: 28px; padding: 44px 0 24px; } @media (max-width: 640px) { .pie-rejilla { grid-template-columns: 1fr 1fr; } .pie-marca { grid-column: 1 / -1; } } /* Pies con la columna «Ideas» (enlaces a las páginas de aterrizaje): una columna más en pantallas anchas. */ @media (min-width: 641px) { .pie-rejilla:has(> :nth-child(4)) { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); } } .pie-marca p { margin: 10px 0 0; max-width: 320px; } .pie h2 { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); margin: 0 0 10px; } .pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .pie a { color: var(--tenue); text-decoration: none; } .pie a:hover { color: var(--ambar-2); } .pie-base { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 0 36px; border-top: 1px solid var(--borde-suave); font-size: .82rem; } /* ---------- Páginas interiores ---------- */ .pagina { padding: clamp(28px, 6vw, 56px) 0 24px; } .angosto { width: min(480px, 100% - 32px); margin-inline: auto; } .medio { width: min(900px, 100% - 32px); margin-inline: auto; } .titulo-pagina { font-family: var(--titular); font-weight: 400; letter-spacing: .03em; font-size: clamp(2.8rem, 8vw, 4rem); line-height: .95; margin: 0 0 12px; color: var(--texto); text-transform: uppercase; } .suave { color: var(--suave); } .nota { color: var(--tenue); font-size: .86rem; margin: 0; } .aviso { margin: 0; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--borde); background: var(--panel-2); font-size: .95rem; } .aviso-exito { border-color: #34527c; background: #1f2024; color: #e2ebfb; } .aviso-error { border-color: #5a2626; background: #2a1414; color: #ffc9c9; } .aviso-ambar { border-color: var(--borde-ambar); background: var(--acento-fondo); color: var(--ambar-2); } .pila { display: grid; gap: 14px; } .formulario { display: grid; gap: 10px; } .formulario label { font-weight: 600; font-size: .92rem; } .fila-form { display: flex; gap: 8px; } .fila-form input { flex: 1; min-width: 0; } .separador { display: flex; align-items: center; gap: 12px; color: var(--tenue); font-size: .85rem; } .separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--borde); } .boton-google svg { width: 18px; height: 18px; flex: none; } .tarjeta-acceso { padding: clamp(22px, 5vw, 32px); } .tarjeta-acceso .titulo-pagina { font-size: clamp(2.4rem, 9vw, 3rem); } .legal-mini { color: var(--tenue); font-size: .82rem; margin: 4px 0 0; } /* Precios */ .avisos-precio { display: grid; gap: 10px; margin: 0 0 28px; max-width: 680px; } .paquetes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; } /* Mientras cargan los paquetes se reserva su alto (3 tarjetas: en fila o, en celular, apiladas) para que la página no brinque al llegar (CLS). */ .paquetes[aria-busy="true"] { min-height: 273px; } @media (max-width: 507px) { .paquetes[aria-busy="true"] { min-height: 852px; } } .paquete { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 24px 22px; } .paquete::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, transparent, var(--ambar), transparent); } .paquete h2 { font-family: var(--titular); font-weight: 400; font-size: 2rem; letter-spacing: .05em; margin: 0 0 6px; color: var(--ambar-2); line-height: 1; } .paquete-tokens { font-size: 2.6rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .paquete-tokens small { font-size: 1rem; font-weight: 600; color: var(--suave); margin-left: 6px; } .paquete p { margin: 0; } .paquete .paquete-precio { font-size: 1.2rem; font-weight: 600; margin-top: 10px; } .paquete-unitario { color: var(--tenue); font-size: .85rem; } .paquete .boton { margin-top: auto; } .paquete .paquete-unitario { margin-bottom: 16px; } .paquete-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .paquete-cabeza h2 { margin: 0; } .paquete-precio small { font-size: .85rem; font-weight: 600; color: var(--suave); margin-left: 4px; } /* El «Más popular»: borde dorado, brillo y la cinta arriba a la derecha. */ .paquete.destacado { border-color: var(--ambar); background: linear-gradient(180deg, rgb(var(--acento-rgb) / .09), transparent 46%), var(--panel); box-shadow: 0 18px 50px rgb(var(--acento-3-rgb) / .14); } .paquete.destacado::before { height: 4px; background: var(--oro); } .cinta { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 577px / 1000px; background: var(--oro); color: var(--sobre-acento); white-space: nowrap; } /* Insignias de bono (+20 % de tokens extra, Ahorras 20 %): alto fijo para que las tres tarjetas queden parejas. */ .insignias { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; margin: 10px 0 8px; } .insignia { display: inline-flex; align-items: center; font-size: .78rem; font-weight: 700; line-height: 1.2; padding: 4px 10px; border-radius: 577px / 1000px; color: var(--ambar-2); background: var(--acento-fondo-2); border: 1px solid var(--acento-borde-2); } .insignia.verde { color: #cedcfb; background: #252629; border-color: #334f78; } /* Selector Una vez · Mensual · Anual */ .periodos { display: inline-flex; gap: 2px; padding: 4px; margin: 0 0 10px; border-radius: 577px / 1000px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); max-width: 100%; } .periodos[hidden] { display: none; } .periodo { display: inline-flex; } .periodo[hidden] { display: none; } .periodo label { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 577px / 1000px; cursor: pointer; color: var(--suave); font-weight: 700; font-size: .95rem; white-space: nowrap; transition: background .15s ease, color .15s ease; } .periodo label:hover { color: var(--texto); } .periodo input:checked + label { background: var(--texto); color: #111; } .periodo input:focus-visible + label { outline: 2px solid var(--ambar); outline-offset: 2px; } .periodo-ahorro { font-size: .72rem; font-weight: 800; padding: 2px 7px; border-radius: 577px / 1000px; background: #252629; color: #cedcfb; border: 1px solid #334f78; } .periodo input:checked + label .periodo-ahorro { background: #4d6c95; color: #fff; border-color: #4d6c95; } .nota-periodo { color: var(--suave); font-size: .92rem; margin: 0 0 18px; min-height: 1.4em; } @media (max-width: 420px) { .periodos { display: flex; } .periodos:not([hidden]) .periodo { flex: 1; } .periodo label { flex: 1; justify-content: center; padding: 10px 8px; font-size: .9rem; gap: 5px; } } .lista { margin: 0; padding-left: 1.2em; color: var(--suave); display: grid; gap: 8px; } .bloque-chico { padding-top: 44px; } .bloque-chico h2 { font-size: 1.2rem; margin: 0 0 12px; } /* Cuenta */ .cuenta-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 18px; align-items: start; } @media (max-width: 760px) { .cuenta-rejilla { grid-template-columns: 1fr; } } .cuenta-rejilla .tarjeta + .tarjeta { margin-top: 0; } .columna { display: grid; gap: 18px; } .saldo-grande { font-size: clamp(2.6rem, 9vw, 3.4rem); font-weight: 800; line-height: 1; margin: 14px 0 18px; font-variant-numeric: tabular-nums; color: var(--ambar-2); } .saldo-grande small { font-size: 1rem; font-weight: 600; color: var(--suave); margin-left: 6px; } .movs { list-style: none; margin: 0; padding: 0; } .mov { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 0; border-top: 1px solid var(--borde); } .mov:first-child { border-top: 0; } .mov-tipo { font-weight: 600; } .mov-detalle { color: var(--tenue); font-size: .85rem; overflow-wrap: anywhere; } .mov-tokens { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; grid-row: span 2; align-self: center; } .mov-tokens.abono { color: var(--verde); } .mov-tokens.cargo { color: #ffb3a3; } /* Pago */ .estado-pago { text-align: center; } .estado-pago .marquesina { margin: 8px 0 26px; } .estado-pago .titulo-marquesina { font-size: clamp(2.6rem, 10vw, 4.4rem); } .estado-pago p { color: var(--suave); } .giro { width: 34px; height: 34px; margin: 0 auto 12px; border-radius: 25% / 50%; border: 3px solid var(--borde); border-top-color: var(--ambar); animation: girar .9s linear infinite; } @keyframes girar { to { transform: rotate(360deg); } } /* Documentos legales */ .documento h2 { font-size: 1.15rem; margin: 34px 0 8px; } .documento p, .documento li { color: var(--suave); } .documento ul { padding-left: 1.2em; display: grid; gap: 6px; } .borrador { margin: 0 0 18px; padding: 12px 14px; border-radius: 8px; border: 1px dashed var(--ambar); background: var(--acento-fondo); color: var(--ambar-2); font-weight: 700; } .pendiente { color: var(--ambar); font-style: normal; } /* ---------- Estudio: espacio de trabajo ---------- */ .tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; padding: 18px; } .tarjeta + .tarjeta { margin-top: 14px; } .tarjeta h2 { margin: 0; font-family: var(--titular); font-weight: 400; letter-spacing: .04em; font-size: 1.45rem; line-height: 1.1; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .tarjeta .quien { font-family: var(--letra); letter-spacing: 0; color: var(--tenue); font-size: .8rem; font-weight: 500; } .tarjeta header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; } .vacio { color: var(--tenue); font-size: .92rem; margin: 0; } body.app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; } .appbar { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 0 14px; border-bottom: 1px solid var(--borde-suave); background: rgba(11, 11, 12, .96); flex: none; } .appbar .logo { font-size: 1.4rem; } .appbar .logo-icono { width: 26px; height: 26px; } .appbar-proyecto { display: flex; align-items: center; gap: 10px; min-width: 0; padding-left: 12px; margin-left: 4px; border-left: 1px solid var(--borde); } .appbar-proyecto span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .appbar-proyecto .sala { color: var(--tenue); font-size: .82rem; font-weight: 600; } .appbar-proyecto .titulo-proyecto { font-weight: 700; font-size: .95rem; max-width: 34ch; } .espacio { flex: 1; } .costo { font-variant-numeric: tabular-nums; color: var(--suave); font-size: .82rem; border: 1px solid var(--borde); padding: 6px 12px; border-radius: 577px / 1000px; white-space: nowrap; } .boton-icono { width: 38px; height: 38px; padding: 0; border-radius: 25% / 50%; } @media (max-width: 760px) { .appbar-proyecto, .costo { display: none; } } @media (min-width: 761px) { .solo-icono { display: none; } } @media (max-width: 1179px) { .con-texto, .appbar-proyecto .sala { display: none; } } .appbar .boton { white-space: nowrap; } /* Estudio con hilo (18 oct): la conversación con el Productor es el hilo principal y la «mesa de trabajo» (las pestañas) se abre al lado para editar. Mesa cerrada: el hilo ocupa todo y se lee centrado. Celular/tableta: la mesa tapa el hilo. */ /* position: relative contiene los textos .sr (absolutos) dentro de sus cajas con scroll: si no, se salen al documento, le dan altura y el navegador desplaza la página entera (la barra de arriba desaparecía). */ .estudio-cuerpo { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); overflow: hidden; } .estudio-cuerpo[data-mesa="abierta"] { grid-template-columns: minmax(380px, 36%) minmax(0, 1fr); } .estudio-cuerpo[data-mesa="cerrada"] .mesa { display: none; } .avatar-director { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: rgb(var(--acento-rgb) / .14); color: var(--ambar); flex: none; } .avatar-director svg { width: 18px; height: 18px; } .pestanas { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 1; } .pestanas::-webkit-scrollbar { display: none; } .pestanas button { display: inline-flex; align-items: center; gap: 8px; padding: 15px 12px 13px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--suave); font-weight: 700; font-size: .93rem; cursor: pointer; white-space: nowrap; } .pestanas button:hover { color: var(--texto); } .pestanas button[aria-selected="true"] { color: var(--texto); border-bottom-color: var(--ambar); } .pestanas .marca { font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 577px / 1000px; color: var(--ambar-2); background: rgb(var(--acento-rgb) / .12); } .pestanas .marca.lista { color: #dee8fb; background: rgba(166, 188, 239, .14); } .pestanas svg { width: 16px; height: 16px; } .pronto-caja { text-align: center; padding: clamp(24px, 5vw, 40px) 18px; } .pronto-caja h3 { margin: 12px 0 6px; font-family: var(--titular); font-weight: 400; font-size: 2rem; letter-spacing: .03em; } .pronto-caja p { color: var(--suave); margin: 0 auto 6px; max-width: 460px; } .pronto-medios { display: flex; justify-content: center; gap: 8px; } .pronto-medios img { width: 72px; height: 112px; object-fit: cover; border-radius: 8px; opacity: .85; } .burbuja { max-width: 90%; padding: 10px 14px; border-radius: 10px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .95rem; } .burbuja.cliente { align-self: flex-end; background: var(--acento-fondo-2); border: 1px solid var(--acento-borde-2); border-bottom-right-radius: 6px; } .burbuja.productor { align-self: flex-start; background: var(--panel-2); border: 1px solid var(--borde); border-bottom-left-radius: 6px; } .burbuja.sistema { align-self: center; color: var(--tenue); font-size: .85rem; background: none; } .aviso-idea { align-self: stretch; display: grid; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--acento-fondo); border: 1px solid var(--borde-ambar); color: var(--ambar-2); font-size: .9rem; } .aviso-idea .acciones { justify-content: flex-start; } .escribir { display: flex; gap: 10px; align-items: flex-end; } .escribir textarea { flex: 1; resize: none; min-height: 48px; max-height: 45vh; } textarea, input[type="text"], input[type="password"], input[type="email"] { background: var(--fondo); border: 1px solid var(--borde); border-radius: 8px; padding: 10px 12px; width: 100%; min-height: 44px; } textarea:focus, input:focus { outline: 2px solid var(--ambar); outline-offset: 1px; border-color: transparent; } ::placeholder { color: #938c80; } /* ≥ 4.5:1 sobre --fondo y sobre el compositor de la portada */ .datos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: .92rem; } .datos dt { color: var(--tenue); } .datos dd { margin: 0; overflow-wrap: anywhere; } .caption { font-family: var(--mono); font-size: .82rem; background: var(--fondo); border: 1px solid var(--borde); border-radius: 8px; padding: 10px 12px; white-space: pre-wrap; margin: 6px 0 12px; overflow-wrap: anywhere; } .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; } .chip { font-size: .8rem; padding: 3px 10px; border-radius: 577px / 1000px; background: var(--panel-2); border: 1px solid var(--borde); } .letra { min-height: 240px; font-family: var(--mono); font-size: .9rem; line-height: 1.6; } .metrica { margin-top: 12px; display: grid; gap: 4px; font-size: .88rem; } .metrica .sec { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--ambar); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; margin-top: 8px; } .verso { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; } .verso .n { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; } .verso.ok .n { color: var(--verde); } .verso.fuera .n { color: var(--rojo); } .verso .tipo { color: var(--tenue); font-size: .75rem; } .avisos { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; background: #2a1414; border: 1px solid #5a2626; color: #ffc9c9; font-size: .88rem; white-space: pre-wrap; } .avisos:empty { display: none; } .pedido-extra { margin-bottom: 10px; } .pensando { color: var(--tenue); font-size: .85rem; } /* Rimas (detectar_rimas): misma letra = riman; gris = sin rima */ .rima { display: inline-grid; place-items: center; min-width: 1.7rem; height: 1.45rem; padding: 0 6px; border-radius: 6px; font-family: var(--mono); font-size: .78rem; font-weight: 700; text-transform: lowercase; letter-spacing: 0; color: var(--c, var(--tenue)); border: 1px solid var(--c, var(--tenue)); background: color-mix(in srgb, var(--c, transparent) 14%, transparent); cursor: help; } .esquema { display: inline-flex; gap: 1px; font-family: var(--mono); font-size: .82rem; font-weight: 700; text-transform: lowercase; letter-spacing: .08em; } .esquema span { color: var(--c, var(--tenue)); } .rima-0 { --c: #ffb547; } .rima-1 { --c: #b0c5f9; } .rima-2 { --c: #ff8ab5; } .rima-3 { --c: #7ee08e; } .rima-4 { --c: #c3a6ff; } .rima-5 { --c: #ff9d66; } .rima-6 { --c: #e3e36a; } .rima-7 { --c: #5fe0c8; } .rima-libre { --c: #8f887c; } .rima.rima-libre { border-style: dashed; background: transparent; } .leyenda-rima { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--tenue); font-size: .8rem; } .aviso-rima { margin: 6px 0 2px; padding: 8px 12px; border-radius: 8px; background: var(--acento-fondo); border: 1px solid var(--borde-ambar); color: var(--ambar-2); font-size: .86rem; } /* Canción (candado 1) */ .candado-cabeza { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .candado-icono { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: rgb(var(--acento-rgb) / .12); color: var(--ambar); flex: none; } .candado-icono svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .candado-icono.cerrado { background: rgba(166, 188, 239, .14); color: var(--verde); } .candado-cabeza h2 { margin: 0; font-family: var(--titular); font-weight: 400; font-size: 1.8rem; letter-spacing: .03em; line-height: 1; } .candado-cabeza p { margin: 2px 0 0; color: var(--tenue); font-size: .85rem; } #cancion-cuerpo { display: grid; gap: 14px; justify-items: start; } #cancion-cuerpo > .tomas, #cancion-cuerpo > .requisitos, #cancion-cuerpo > .estado-trabajo, #cancion-cuerpo > .aviso, #cancion-cuerpo > .datos { justify-self: stretch; } #cancion-cuerpo > p { margin: 0; } .requisitos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .requisitos li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; background: var(--fondo); border: 1px solid var(--borde); font-size: .92rem; } .requisitos li::before { content: ""; width: 10px; height: 10px; border-radius: 25% / 50%; background: var(--tenue); flex: none; } .requisitos li.listo::before { background: var(--verde); box-shadow: 0 0 8px var(--verde); } .requisitos li .boton { margin-left: auto; } .estado-trabajo { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 10px; background: var(--fondo); border: 1px solid var(--borde); } .estado-trabajo .giro { margin: 0; flex: none; } .estado-trabajo strong { display: block; } .estado-trabajo span { color: var(--tenue); font-size: .88rem; } .tomas { display: grid; gap: 12px; } .toma { display: grid; gap: 10px; padding: 14px; border-radius: 10px; background: var(--fondo); border: 1px solid var(--borde); } .toma.elegida { border-color: rgba(166, 188, 239, .6); background: #1a1b1e; } .toma-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .toma-cabeza strong { font-size: 1rem; } .toma audio { width: 100%; height: 40px; } .puerta { position: fixed; inset: 0; background: rgba(6, 6, 6, .9); display: grid; place-items: center; padding: 16px; z-index: 70; overflow-y: auto; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } body:has(.puerta:not([hidden])) { overflow: hidden; } .puerta-caja { width: min(440px, 100%); background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 26px; display: grid; gap: 14px; box-shadow: 0 30px 90px rgba(0, 0, 0, .6); } .puerta h2 { margin: 0; font-family: var(--titular); font-weight: 400; font-size: 2.3rem; letter-spacing: .03em; color: var(--texto); line-height: 1; } .puerta p { margin: 0; color: var(--suave); font-size: .92rem; } .puerta details { border-top: 1px solid var(--borde); padding-top: 12px; } .puerta summary { cursor: pointer; color: var(--suave); font-size: .92rem; padding: 6px 0; } .puerta summary:hover { color: var(--texto); } .puerta form { display: grid; gap: 10px; margin-top: 10px; } .error { color: var(--rojo); font-size: .88rem; min-height: 1.2em; } .error:empty { min-height: 0; } /* ---------- Storyboard (candado 2): editor tipo línea de tiempo ---------- */ .sb { display: grid; gap: 16px; } .sb-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; } .sb-cabeza .candado-cabeza { margin: 0; } .sb-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .sb-progreso { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--suave); margin-right: 6px; } .sb-progreso strong { color: var(--texto); } .sb-barra { width: 90px; height: 6px; border-radius: 577px / 1000px; background: var(--panel-2); overflow: hidden; display: inline-block; } .sb-barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--verde), #cedbfb); border-radius: inherit; } .sb-estado { display: grid; gap: 12px; justify-items: start; } .sb-estado:empty { display: none; } .sb-estado > .estado-trabajo, .sb-estado > .aviso { justify-self: stretch; } .sb-estado p { margin: 0; } .sb-armar { display: flex; gap: 8px; width: 100%; flex-wrap: wrap; } .sb-armar input { flex: 1; min-width: 200px; } .sb-esperando { position: relative; overflow: hidden; } .sb-esperando .sb-reloj { display: block; margin-top: 4px; color: var(--ambar-2); font-variant-numeric: tabular-nums; font-size: .82rem; } .sb-indeterminada { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--ambar), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: barrido-carga 1.6s ease-in-out infinite; } @keyframes barrido-carga { from { background-position: -40% 0; } to { background-position: 140% 0; } } .sb-linea { padding: 14px; border-radius: 10px; background: var(--fondo-2); border: 1px solid var(--borde-suave); display: grid; gap: 10px; } .sb-linea-cabeza { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sb-linea-cabeza strong { font-size: .95rem; } .sb-play { width: 36px; height: 36px; } .sb-play svg { width: 16px; height: 16px; fill: currentColor; stroke: none; } .sb-desliza { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; padding-bottom: 4px; } .sb-pista { position: relative; min-width: 640px; padding-top: 20px; cursor: pointer; } .sb-regla { position: absolute; top: 0; left: 0; right: 0; height: 18px; } .sb-regla span { position: absolute; top: 0; font-size: .75rem; color: var(--tenue); font-variant-numeric: tabular-nums; padding-left: 3px; border-left: 1px solid var(--borde); line-height: 14px; } .sb-compases { position: absolute; top: 20px; bottom: 0; left: 0; right: 0; pointer-events: none; } .sb-compases i { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .055); } .sb-secciones { position: relative; height: 30px; } .sb-seccion { position: absolute; top: 0; height: 100%; padding: 0 8px; border-radius: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 30px; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); } .sb-seccion.c0 { --c: #9a948a; } .sb-seccion.c1 { --c: #b0c5f9; } .sb-seccion.c2 { --c: var(--ambar); } .sb-seccion.c3 { --c: #c3a6ff; } .sb-seccion.c4 { --c: #b7cbfb; } .sb-seccion.c5 { --c: #97afe0; } .sb-tira { position: relative; height: 38px; margin-top: 6px; } .sb-bloque { position: absolute; top: 0; height: 100%; padding: 0; border-radius: 6px; cursor: pointer; overflow: hidden; font: inherit; font-size: .72rem; font-weight: 800; color: var(--texto); background: var(--panel-2); border: 1px solid var(--borde); box-shadow: inset 0 -3px 0 var(--estado, transparent); } .sb-bloque:hover { border-color: rgba(255, 255, 255, .35); } /* Selección = anillo interior; foco = contorno exterior (:focus-visible), para que no se confundan */ .sb-bloque.activo { border-color: var(--ambar); color: var(--ambar-2); box-shadow: inset 0 0 0 2px var(--ambar), inset 0 -3px 0 var(--estado, transparent); z-index: 1; } .sb-bloque:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; z-index: 2; } .sb-bloque.toma { --estado: #b0c5f9; } .sb-bloque.cola { --estado: var(--ambar); } .sb-bloque.listas { --estado: var(--ambar-2); } .sb-bloque.aprobada { --estado: var(--verde); background: #202124; } .sb-bloque.fallo { --estado: var(--rojo); } .sb-cabezal { position: absolute; top: 18px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--ambar); box-shadow: 0 0 10px var(--ambar); pointer-events: none; z-index: 2; } .sb-tratamiento { padding: 14px 16px; border-radius: 10px; background: var(--fondo); border: 1px solid var(--borde); border-left: 3px solid var(--ambar); display: grid; gap: 8px; } .sb-tratamiento .sobretitulo { margin: 0; } .sb-tratamiento p { margin: 0; color: #e2dbcf; } .sb-subtitulo { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .sb-subtitulo h3 { margin: 0; font-family: var(--titular); font-weight: 400; font-size: 1.5rem; letter-spacing: .03em; } .sb-personajes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .sb-personaje { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 12px; border-radius: 10px; background: var(--fondo); border: 1px solid var(--borde); } .sb-personaje-foto { width: 76px; height: 102px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(160deg, #18181b, #0a0b0c); color: var(--ambar-2); font-family: var(--titular); font-size: 2.2rem; } .sb-personaje-foto img { width: 100%; height: 100%; object-fit: cover; } .sb-personaje-info { display: grid; gap: 6px; align-content: start; min-width: 0; } .sb-personaje-info p { margin: 0; color: var(--tenue); font-size: .8rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .sb-personaje-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .sb-editor { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; } @media (max-width: 1179px) { .sb-editor { grid-template-columns: minmax(0, 1fr); } } .sb-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; } .sb-tarjeta { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: var(--fondo); border: 1px solid var(--borde); transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease; } .sb-tarjeta:hover { border-color: rgba(255, 255, 255, .22); } .sb-tarjeta.activa { border-color: var(--ambar); box-shadow: 0 0 0 3px rgb(var(--acento-rgb) / .14); } .sb-tarjeta.arrastrando { opacity: .45; } .sb-tarjeta.destino { outline: 2px dashed var(--ambar); outline-offset: 2px; } .sb-mini { position: relative; aspect-ratio: 4 / 5; display: grid; place-items: center; align-content: center; gap: 2px; background: radial-gradient(ellipse at 50% 30%, var(--acento-fondo-3), #0e0c10 75%); } .sb-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sb-mini-num { font-family: var(--titular); font-size: 2.6rem; line-height: 1; color: rgb(var(--acento-2-rgb) / .55); } .sb-mini-tipo { font-size: .7rem; color: var(--tenue); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; } .sb-chip { position: absolute; top: 8px; left: 8px; z-index: 1; font-size: .75rem; line-height: 1.25; font-weight: 800; padding: 3px 8px; border-radius: 577px / 1000px; background: rgb(var(--fondo-rgb) / .72); border: 1px solid rgba(255, 255, 255, .16); color: var(--suave); } .sb-detalle .sb-chip { position: static; } .sb-chip.toma { color: #cfdcfb; border-color: rgba(111, 208, 255, .45); } .sb-chip.cola { color: var(--ambar-2); border-color: rgb(var(--acento-rgb) / .5); } .sb-chip.listas { color: #dce6fb; border-color: rgb(var(--acento-2-rgb) / .5); } .sb-chip.aprobada { color: #dee8fb; border-color: rgba(166, 188, 239, .6); background: rgba(31, 32, 36, .85); } .sb-chip.fallo { color: #ffc9c9; border-color: rgba(255, 107, 107, .5); } .sb-chip.revisando { color: #cfdcfb; border-color: rgba(111, 208, 255, .45); } .sb-tarjeta-cuerpo { display: grid; gap: 4px; padding: 10px 12px 8px; text-align: left; background: none; border: 0; color: inherit; cursor: pointer; font: inherit; } .sb-meta { display: grid; gap: 1px; font-size: .74rem; color: var(--tenue); } .sb-meta b { color: var(--texto); font-weight: 700; } .sb-que { font-size: .84rem; color: #ddd6ca; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .sb-controles { display: flex; align-items: center; gap: 4px; padding: 0 8px 8px; margin-top: auto; } .sb-asa { width: 26px; height: 30px; display: grid; place-items: center; color: var(--tenue); cursor: grab; margin-right: auto; } .sb-asa svg { width: 16px; height: 16px; } .sb-icono { width: 30px; height: 30px; border-radius: 25% / 50%; border: 1px solid var(--borde); background: transparent; color: var(--suave); display: grid; place-items: center; cursor: pointer; padding: 0; } .sb-icono:hover:not(:disabled) { border-color: var(--ambar); color: var(--texto); } .sb-icono:disabled { opacity: .3; cursor: default; } .sb-icono svg { width: 15px; height: 15px; } .sb-pie-lista { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; } .sb-detalle { position: sticky; top: 60px; display: grid; gap: 12px; padding: 16px; border-radius: 10px; background: var(--fondo-2); border: 1px solid var(--borde); } .sb-detalle-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .sb-detalle-cabeza h3 { margin: 0; font-family: var(--titular); font-weight: 400; font-size: 1.7rem; letter-spacing: .03em; line-height: 1; } .sb-campo { display: grid; gap: 6px; } .sb-campo > span { font-size: .78rem; color: var(--tenue); font-weight: 700; } .sb-campo select, .sb-detalle select { background: var(--fondo); border: 1px solid var(--borde); border-radius: 8px; padding: 10px 12px; min-height: 44px; width: 100%; } .sb-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .sb-prompt { font-family: var(--mono); font-size: .8rem; line-height: 1.5; resize: vertical; } .sb-toma, .sb-fotos { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--borde); justify-items: start; } .sb-toma > *, .sb-fotos > .estado-trabajo, .sb-fotos > .sb-variantes { justify-self: stretch; } .sb-toma h4, .sb-fotos h4 { margin: 0; font-size: .92rem; } .sb-toma p, .sb-fotos p { margin: 0; } .sb-variantes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .sb-variante { margin: 0; display: grid; gap: 8px; justify-items: start; } .sb-variante img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 8px; border: 1px solid var(--borde); } .sb-variante.elegida img { border-color: var(--verde); box-shadow: 0 0 0 2px rgba(166, 188, 239, .35); } .sb-variantes.chicas { grid-template-columns: repeat(2, minmax(0, 96px)); } .sb-variantes.chicas img { aspect-ratio: 3 / 4; } @media (max-width: 899px) { .sb-lista { grid-template-columns: 1fr; } .sb-tarjeta { display: grid; grid-template-columns: 96px minmax(0, 1fr); } .sb-mini { aspect-ratio: auto; min-height: 120px; } .sb-mini-num { font-size: 2rem; } .sb-controles { grid-column: 1 / -1; padding-top: 6px; border-top: 1px solid var(--borde); } .interruptor.sb-canta { grid-column: 2; } .sb-detalle { position: static; } .sb-cabeza .sb-acciones { width: 100%; } } /* ---------- Indicador de pasos del estudio ---------- */ .pasos-estudio { flex: none; border-bottom: 1px solid var(--borde-suave); background: var(--fondo-2); overflow-x: auto; scrollbar-width: none; } .pasos-estudio::-webkit-scrollbar { display: none; } .pasos-estudio ol { list-style: none; margin: 0 auto; padding: 6px 14px; display: flex; align-items: center; min-width: max-content; width: max-content; } .pasos-estudio li { display: flex; align-items: center; } .pasos-estudio li + li::before { content: ""; width: 26px; height: 2px; margin: 0 2px; border-radius: 2px; background: var(--borde); } .pasos-estudio li.hecho + li::before { background: rgba(166, 188, 239, .6); } .pasos-estudio button { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; border-radius: 577px / 1000px; border: 1px solid transparent; background: none; color: var(--tenue); font: inherit; font-weight: 700; font-size: .84rem; cursor: pointer; } .pasos-estudio button:hover { color: var(--texto); background: var(--panel-2); } .pasos-estudio button[aria-current="step"] { border-color: var(--borde); background: var(--panel); color: var(--texto); } .paso-marca { width: 24px; height: 24px; border-radius: 25% / 50%; display: grid; place-items: center; font-size: .74rem; font-weight: 800; background: var(--panel-2); border: 1px solid var(--borde); color: var(--suave); flex: none; } .paso-marca svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .pasos-estudio li.hecho button { color: var(--suave); } .pasos-estudio li.hecho .paso-marca { background: rgba(166, 188, 239, .16); border-color: rgba(166, 188, 239, .6); color: var(--verde); } .pasos-estudio li.actual button { color: var(--texto); } .pasos-estudio li.actual .paso-marca { background: rgb(var(--acento-rgb) / .16); border-color: var(--ambar); color: var(--ambar-2); box-shadow: 0 0 0 3px rgb(var(--acento-rgb) / .12); } @media (max-width: 760px) { .pasos-estudio ol { padding: 5px 10px; margin: 0; } .pasos-estudio li + li::before { width: 10px; } .pasos-estudio button { gap: 5px; padding: 4px 7px 4px 4px; font-size: .76rem; } .paso-marca { width: 22px; height: 22px; } } .atajo { margin: 0; padding: 0 12px 10px; color: var(--tenue); font-size: .74rem; } kbd { font-family: var(--mono); font-size: .72rem; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--borde); background: var(--panel-2); color: var(--suave); } @media (max-width: 899px) { .atajo { display: none; } } /* ---------- Estados vacíos con medios reales ---------- */ .estado-vacio { display: grid; justify-items: center; text-align: center; gap: 10px; padding: clamp(20px, 4vw, 36px) 12px; } .estado-vacio h3 { margin: 8px 0 0; font-family: var(--titular); font-weight: 400; font-size: 1.9rem; letter-spacing: .03em; line-height: 1; } .estado-vacio p { margin: 0; color: var(--suave); max-width: 460px; } .estado-vacio .boton { margin-top: 6px; } .estado-inactivo h3 { color: var(--ambar-2); } .vacio-medios { display: flex; justify-content: center; padding: 8px 0; } .vacio-medios img { width: 86px; height: 144px; object-fit: cover; border-radius: 8px; border: 2px solid var(--panel); box-shadow: 0 12px 30px rgba(0, 0, 0, .55); margin: 0 -12px; transform: rotate(-7deg); } .vacio-medios img:nth-child(2) { transform: translateY(-10px); position: relative; z-index: 1; } .vacio-medios img:nth-child(3) { transform: rotate(7deg); } .vacio-medios img:nth-child(4) { transform: rotate(12deg) translateY(6px); } .vacio-cartel { position: relative; width: min(340px, 100%); aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; border: 1px solid var(--borde); } .vacio-cartel img { width: 100%; height: 100%; object-fit: cover; } .vacio-cartel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgb(var(--fondo-rgb) / .7)); } /* ---------- Video (candado 3) ---------- */ .video-cuerpo, .entrega-cuerpo { display: grid; gap: 16px; } .calidades { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .calidad { display: grid; gap: 4px; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--borde); background: var(--fondo); cursor: pointer; transition: border-color .15s ease, background .15s ease; } .calidad:hover { border-color: rgba(255, 255, 255, .25); } .calidad strong { font-size: 1rem; } .calidad span { color: var(--tenue); font-size: .84rem; } .calidades input:checked + .calidad { border-color: var(--ambar); background: rgb(var(--acento-rgb) / .08); box-shadow: 0 0 0 3px rgb(var(--acento-rgb) / .12); } .calidades input:focus-visible + .calidad { outline: 2px solid var(--ambar); outline-offset: 2px; } .calidades input:disabled + .calidad { opacity: .6; cursor: progress; } .cotizacion { display: grid; gap: 14px; padding: clamp(16px, 3vw, 24px); border-radius: 12px; border: 1px solid var(--borde); background: radial-gradient(ellipse at 0% 0%, rgb(var(--acento-rgb) / .12), transparent 60%), var(--fondo); } .cotizacion-cabeza { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cotizacion-cabeza h3 { margin: 0; font-family: var(--titular); font-weight: 400; font-size: 1.9rem; letter-spacing: .03em; line-height: 1; } .cotizacion p { margin: 0; } .cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .cifra { display: grid; gap: 2px; padding: 14px; border-radius: 10px; background: var(--panel); border: 1px solid var(--borde-suave); } .cifra strong { font-size: clamp(1.5rem, 4vw, 2.4rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .cifra span { color: var(--tenue); font-size: .8rem; } .cifra:last-child strong { color: var(--ambar-2); } .saldos dd { font-weight: 700; font-variant-numeric: tabular-nums; } .saldos dd.negativo { color: #ffb3a3; } /* Desglose por escena de la cotización (plegado; solo tokens) */ .desglose { border: 1px solid var(--borde); border-radius: 10px; background: var(--panel); overflow: hidden; } .desglose > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 14px; cursor: pointer; list-style: none; font-weight: 700; font-size: .9rem; color: var(--suave); } .desglose > summary::-webkit-details-marker { display: none; } .desglose > summary::after { content: ""; width: 7px; height: 7px; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .7; transition: transform .15s ease; } .desglose[open] > summary::after { transform: translateY(2px) rotate(-135deg); } .desglose > summary:hover { color: var(--texto); } .desglose > summary:focus-visible { outline: 2px solid var(--ambar); outline-offset: -2px; } .tabla-desglose { width: 100%; border-collapse: collapse; font-size: .86rem; } .tabla-desglose th, .tabla-desglose td { padding: 8px 14px; text-align: left; border-top: 1px solid var(--borde-suave); } .tabla-desglose th { color: var(--tenue); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .tabla-desglose th:last-child, .tabla-desglose td:last-child { text-align: right; font-variant-numeric: tabular-nums; } .tabla-desglose td:last-child { font-weight: 700; color: var(--ambar-2); } .tabla-desglose td.canta { color: var(--ambar-2); font-weight: 600; } .desglose > .nota { padding: 10px 14px 12px; border-top: 1px solid var(--borde-suave); } /* 409 faltaMaster: escenas que cantan a cámara sin el master de la canción */ .falta-master { display: grid; gap: 8px; } .falta-master strong { font-size: 1rem; } .falta-master .acciones { margin-top: 2px; } .escenas-marcadas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .escenas-marcadas li { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 577px / 1000px; border: 1px solid var(--borde-ambar); background: rgb(var(--fondo-rgb) / .5); color: var(--texto); font-size: .82rem; font-weight: 700; } .escenas-marcadas img { width: 26px; height: 34px; margin-left: -6px; object-fit: cover; border-radius: 6px; } @media (max-width: 560px) { .calidades { grid-template-columns: 1fr; } .cifra { padding: 10px; } } .progreso-video { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .progreso-video > div { display: grid; gap: 2px; } .progreso-video strong { font-size: 1.05rem; } .sb-barra.grande { width: min(280px, 100%); height: 8px; } .rejilla-tomas { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; } .toma-video { margin: 0; display: grid; gap: 8px; align-content: start; } .toma-medio { position: relative; aspect-ratio: 9 / 16; display: grid; place-items: center; border-radius: 10px; overflow: hidden; border: 1px solid var(--borde); background: radial-gradient(ellipse at 50% 30%, var(--acento-fondo-3), #0e0c10 75%); } .toma-medio img, .toma-medio video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .toma-video:is(.cola, .generando, .reintento, .revisando) .toma-medio img { filter: grayscale(.35) brightness(.55); } .toma-video.revisando .toma-medio { border-color: rgba(111, 208, 255, .45); } .toma-video.revisando .toma-giro { border-top-color: #cfdcfb; } .toma-video.hecha .toma-medio { border-color: rgba(166, 188, 239, .55); } .toma-video.fallo .toma-medio { border-color: rgba(255, 107, 107, .5); } .toma-video.fallo .toma-medio img { filter: grayscale(1) brightness(.45); } .toma-giro { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 25% / 50%; border: 3px solid rgba(255, 255, 255, .2); border-top-color: var(--ambar); animation: girar .9s linear infinite; } .toma-num { font-family: var(--titular); font-size: 2.4rem; color: rgb(var(--acento-2-rgb) / .5); } .toma-pie { display: grid; gap: 4px; font-size: .82rem; } .movimiento { display: grid; gap: 4px; font-size: .74rem; color: var(--tenue); } .movimiento-barra { position: relative; display: block; height: 6px; border-radius: 577px / 1000px; background: var(--panel-2); } .movimiento-barra i { display: block; height: 100%; border-radius: inherit; background: var(--verde); } .movimiento.quieta .movimiento-barra i { background: var(--ambar); } .movimiento-barra b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--texto); opacity: .55; } .error-toma { color: #ffb3a3; } .toma-canta { width: fit-content; font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 577px / 1000px; color: var(--ambar-2); border: 1px solid rgb(var(--acento-rgb) / .4); } /* ---------- Entrega ---------- */ /* El