/* ============================================================================ LA GALERIA · hoja del modal · v2 «Puente» (2026-09-05) Tema «Costarricenses» para forodecostarica.com — casino fino dentro de la selva. Solo oscuro (rechazado el modo claro tres veces, docs/01). LA DIRECCION (decidida con Larry el 2026-09-04): el MARCO es del foro —fondo selva, filo de laton, foco jade, la marca y el aspa se sienten parte del sitio— y el CONTENIDO vive en el lenguaje de la sala oscura: la interfaz se retira a casi monocromo, las fotos y los videos son el color. Jade SOLO para lo vivo (voto dado, pestana activa, progreso, foco). Pan de oro para UNA cosa por pantalla: el boton «Ver» del telon. Lo demas, laton de 1 px. «Lo aspiracional se consigue quitando brillo.» «La luz llega tarde y de lado.» LOS COLORES NO SE ESCRIBEN AQUI. Vienen de /marca/tokens.css. Los unicos HEX son los ocho premezclados de §1 (comprobacion 6). Los iconos son SVG en data-URI por `mask` (nada de emoji, nada de CDN). TRES COSAS QUE HAY QUE SABER ANTES DE TOCAR ESTA HOJA 1. `overflow-x: auto` FUERZA `overflow-y: auto`. Por eso la tarjeta que crece al pasar el raton no puede desbordar la fila: se acolcha la pista (§6) y la aritmetica la MIDE mirar.py: alto x (crece - 1) / 2 <= acolchado. 2. Cuando esto viaje a extra.less, todo clamp()/min()/max() va escapado con ~"..." o el compilador de XenForo tumba la hoja entera. Cada uso lleva la marca «ESCAPAR». Los calc() con var() dentro, tambien. 3. NADA depende de una transicion para HACERSE VISIBLE: la visibilidad la da el estado (data-estado, aria-current, [data-forzar-hover], display) y la transicion solo adorna. Con prefers-reduced-motion todo se para y todo se sigue viendo. INDICE 0 fuentes 1 tokens propios 2 armadura 3 cromo flotante 4 telon 5 filas 6 pista y tarjetas 7 teatro 8 carril movil 9 votos 10 estados 11 panel y avisos 12 movimiento ========================================================================== */ @import url("/marca/tokens.css"); /* ============ 0 · FUENTES =============================================== Autoalojadas. NUNCA por CDN: el colon (₡ U+20A1) que Google no subconjunta, y que cargue igual en los datos de Talamanca. En produccion ya las trae el tema y este bloque sobra. */ @font-face { font-family: 'Cinzel'; src: url('/fuentes/cinzel-var.woff2') format('woff2-variations'); font-weight: 400 600; font-display: swap; } @font-face { font-family: 'Cormorant Garamond'; src: url('/fuentes/cormorant-garamond-var.woff2') format('woff2-variations'); font-weight: 300 700; font-display: swap; } @font-face { font-family: 'Cormorant Garamond'; src: url('/fuentes/cormorant-garamond-var-italic.woff2') format('woff2-variations'); font-weight: 300 700; font-style: italic; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/fuentes/inter-var.woff2') format('woff2-variations'); font-weight: 400 700; font-display: swap; } /* ============ 1 · TOKENS PROPIOS ========================================= Solo lo que el tema no tiene. Todo lo demas es var(--ed-*). Las veladuras van con rgba() a proposito: XenForo tira el alfa de las PROPIEDADES DE ESTILO, no del CSS literal, y este modal no crea ni una propiedad de estilo con color. ========================================================================== */ .gg { --gg-cabecera-alto: 64px; --gg-telon-alto: clamp(380px, 62vh, 620px); /* ESCAPAR en extra.less */ /* La cinta editorial: la ALTURA manda y el ancho sale de la forma del medio (alto 3/4 · cuadro 1/1 · ancho 16/9). Por corte, abajo. */ --gg-fila-alto: 160px; --gg-gap: 12px; --gg-lado: 40px; /* 🔴 LA ARITMETICA DEL CRECIMIENTO: alto x (crece - 1) / 2 <= acolchado. 160 x .09 = 14.4 <= 18. La mide mirar.py leyendo los estilos calculados. */ --gg-crece: 1.18; --gg-acolchado: 18px; --gg-cifras: 1; /* digitos del numeral del puesto */ --gg-vidrio: rgba(3, 17, 11, .55); --gg-vidrio-borde: rgba(203, 216, 205, .10); --gg-linea: rgba(203, 216, 205, .14); --gg-linea-2: rgba(203, 216, 205, .09); --gg-linea-3: rgba(203, 216, 205, .055); --gg-linea-oro: rgba(201, 162, 39, .30); --gg-sombra: 0 20px 50px -22px rgba(0, 12, 7, .95), 0 3px 10px rgba(0, 12, 7, .5); --gg-sombra-alta: 0 46px 100px -40px rgba(0, 12, 7, 1), 0 8px 22px rgba(0, 12, 7, .55); --gg-sombra-tarjeta: 0 12px 32px -12px rgba(0, 12, 7, .9); /* corta: cabe en el acolchado */ --gg-rapido: 250ms; --gg-transita: 420ms; --gg-lento: 24s; --gg-curva: cubic-bezier(.2, .8, .3, 1); /* Voto. Premezclados y OPACOS: si acabaran en una propiedad de estilo de XenForo, un rgba() de alfa bajo volveria como el color a tope. */ --gg-jade-fondo: #103426; --gg-jade-texto: #7FEFC4; --gg-lapa-fondo: #3B291D; --gg-lapa-texto: #FF9C86; /* Los iconos: SVG de 24x24 por mascara (la mascara usa el alfa; el relleno da igual). Sin `#` dentro: en un data-URI el almohadilla es un fragmento. */ --gg-mask-play: url("data:image/svg+xml;utf8,"); --gg-mask-sonido: url("data:image/svg+xml;utf8,"); --gg-mask-mudo: url("data:image/svg+xml;utf8,"); --gg-mask-bajar: url("data:image/svg+xml;utf8,"); --gg-mask-hilo: url("data:image/svg+xml;utf8,"); --gg-mask-ajustes: url("data:image/svg+xml;utf8,"); } @media (min-width: 1024px) { .gg { --gg-fila-alto: 170px; --gg-acolchado: 20px; --gg-lado: 48px; } } @media (min-width: 1280px) { .gg { --gg-fila-alto: 190px; --gg-acolchado: 22px; --gg-lado: 56px; } } @media (min-width: 1440px) { .gg { --gg-fila-alto: 205px; --gg-acolchado: 24px; --gg-gap: 14px; } } @media (min-width: 1600px) { .gg { --gg-fila-alto: 230px; --gg-acolchado: 26px; --gg-lado: 64px; } } /* ============ 2 · LA ARMADURA ============================================ El UNICO sitio de toda la hoja con !important, y cubre exactamente dos cosas: (a) las hojas de agente de usuario del , que le ponen border:2px, padding:1em, max-width y fondo `canvas` — una cajita blanca en mitad de la pantalla; y (b) un !important de etiqueta desnuda inyectado despues del , que es lo que hace el complemento de anuncios del foro. La superficie de ataque real son los selectores de ETIQUETA (img{}, a{}), no las clases: los bloques medidos de Siropu apuntan a .p-nav, .p-footer, .p-header y .p-body, que son clases de XenForo y no existen aqui dentro. ========================================================================== */ dialog.gg { all: unset; display: none !important; position: fixed !important; inset: 0 !important; /* 100vw y no 100%: `scrollbar-gutter: stable` encoge el bloque contenedor inicial, y con width:100% el dialogo medía 375 en un viewport de 390 -- quedaba una franja del foro asomando por la derecha. */ width: 100vw !important; max-width: none !important; height: 100% !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: var(--ed-superficie-selva, #03110B) !important; color: var(--ed-texto-tinta, #F0EADA) !important; overflow: hidden !important; font-family: var(--ed-fuente-interfaz), Inter, system-ui, sans-serif !important; font-size: 15px; line-height: 1.55; color-scheme: dark; /* La linea de tiempo del scroll de la parrilla, visible para la cabecera. */ timeline-scope: --gg-desplaza; } /* Una sola fila: la cabecera FLOTA (position:absolute) y ya no ocupa sitio. */ dialog.gg[open] { display: grid !important; grid-template-rows: minmax(0, 1fr); } dialog.gg::backdrop { background: #010805; } /* color plano: en iOS un backdrop-filter aqui es caro */ /* 🔴 AQUI NO SE USA :where(). `:where()` tiene especificidad CERO, asi que un `a { color:... !important }` inyectado tras el -- lo que hace el anuncio 12 de Siropu -- GANABA dentro del modal. Contra un !important de etiqueta desnuda hace falta especificidad de clase Y !important. Es el unico sitio de la hoja donde el orden importa, y es la razon entera de que exista esta armadura. */ .gg img, .gg video { max-width: none !important; display: block !important; float: none !important; border: 0 !important; } .gg a { text-decoration: none !important; color: inherit !important; } .gg a:hover { color: inherit !important; } /* Este reset pesa (0,1,1): todo boton con fondo o borde propio se declara como `.gg .gg-clase` (0,2,0) o el reset se lo come. Paso ya una vez: el «Ver» del telon salio sin pan de oro y los pulgares sin aro. */ .gg button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } /* Lo que SI debe llevar color propio se lo pone aqui, con su clase, que gana al `a{!important}` de los anuncios por especificidad. */ .gg .gg-boton { color: var(--ed-texto-tinta2) !important; } .gg .gg-boton--laton { color: var(--ed-metal-oro-txt) !important; } .gg .gg-boton--laton:hover { color: var(--ed-metal-oro-luz) !important; } .gg .gg-boton--oro { color: var(--ed-superficie-selva) !important; } /* texto selva sobre pan de oro */ .gg .gg-boton--oro:hover { color: var(--ed-superficie-selva) !important; } .gg .gg-autor-nombre, .gg .gg-hilo-titulo { color: var(--ed-texto-tinta2) !important; } .gg .gg-hilo-rotulo, .gg .gg-cejilla-v { color: var(--ed-metal-oro-txt) !important; } .gg .gg-autor:hover .gg-autor-nombre, .gg .gg-hilo:hover .gg-hilo-titulo { color: var(--ed-texto-tinta) !important; } .gg .gg-tostada-accion, .gg .gg-reordenar { color: var(--ed-pano-jade-luz) !important; } .gg *, .gg *::before, .gg *::after { box-sizing: border-box; } /* La pagina de debajo no se mueve mientras el modal esta abierto. Nada de position:fixed en el body: pierde la posicion de lectura y es la causa clasica del salto al cerrar. */ html.gg-abierto { overflow: hidden; overscroll-behavior: none; } html { scrollbar-gutter: stable; } .gg-pregon { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ============ 3 · CROMO FLOTANTE ========================================= La cabecera flota sobre el contenido: nace transparente sobre el telon y se tine al pasarlo (linea de tiempo de scroll; con caida a un tinte fijo). Solo lleva la marca y el aspa. El boton del laboratorio es una pildora discreta abajo a la derecha: competia con la marca y no existe en produccion. ========================================================================== */ .gg-cabecera { position: absolute; inset: 0 0 auto 0; z-index: 5; height: var(--gg-cabecera-alto); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-inline: var(--gg-lado); background: rgba(3, 17, 11, .6); /* CAIDA: tinte fijo */ box-shadow: inset 0 -1px 0 var(--gg-linea-oro); } @supports (animation-timeline: scroll()) { .gg[data-forma="parrilla"] .gg-cabecera { background: rgba(3, 17, 11, 0); box-shadow: none; animation: gg-tinte linear both; animation-timeline: --gg-desplaza; animation-range: 0 calc(var(--gg-telon-alto) - var(--gg-cabecera-alto)); /* ESCAPAR el calc con var */ } } @keyframes gg-tinte { to { background: rgba(3, 17, 11, .85); box-shadow: inset 0 -1px 0 var(--gg-linea-oro); backdrop-filter: blur(14px); } } /* Con la parrilla oculta la linea de tiempo esta inactiva: tinte fijo. */ .gg[data-vista="teatro"] .gg-cabecera { animation: none; background: rgba(3, 17, 11, .6); box-shadow: inset 0 -1px 0 var(--gg-linea-oro); } .gg-marca { display: flex; align-items: center; gap: 12px; } .gg-rotulo { font-family: var(--ed-fuente-rotulo), Cinzel, Georgia, serif; font-size: 13px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--ed-metal-oro-cl); padding-left: .28em; /* Cinzel en capitales con tracking anade un espacio final que descentra toda caja estrecha */ text-shadow: 0 1px 12px rgba(0, 10, 6, .8); } /* La ficha de Sarchi: la rueda de la carreta y la ficha de casino son el mismo objeto. Gira en 64 s — «el movimiento es lento o no es». */ .gg-ficha-giro { width: 22px; aspect-ratio: 1; border-radius: 50%; flex: 0 0 auto; background: radial-gradient(circle, var(--ed-metal-oro-luz) 0 8%, transparent 8.5%), radial-gradient(circle, var(--ed-bandera-rojo-ficha) 8.5% 12%, transparent 12.5%), radial-gradient(circle, var(--ed-superficie-musgo) 12.5% 21%, transparent 21.5%), radial-gradient(circle, var(--ed-metal-oro) 21.5% 24.5%, transparent 25%), repeating-conic-gradient(from 11.25deg, var(--ed-bandera-azul-ficha) 0 22.5deg, var(--ed-bandera-rojo-ficha) 22.5deg 45deg); box-shadow: inset 0 0 0 1.5px var(--ed-metal-laton); animation: gg-girar 64s linear infinite; } @keyframes gg-girar { to { transform: rotate(360deg); } } /* El aspa: 44 px de vidrio redondo. */ .gg .gg-cerrar { position: relative; width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; background: var(--gg-vidrio); border: 1px solid var(--gg-vidrio-borde); color: var(--ed-texto-tinta2); transition: color var(--gg-rapido), border-color var(--gg-rapido), background-color var(--gg-rapido); } .gg-cerrar::before, .gg-cerrar::after { content: ''; position: absolute; inset: 50% auto auto 50%; width: 15px; height: 1.5px; background: currentColor; transform-origin: center; } .gg-cerrar::before { transform: translate(-50%, -50%) rotate(45deg); } .gg-cerrar::after { transform: translate(-50%, -50%) rotate(-45deg); } .gg-cerrar:hover { color: var(--ed-texto-tinta); border-color: var(--gg-linea-oro); background: rgba(3, 17, 11, .8); } /* La pildora del laboratorio. No existe en produccion. */ .gg .gg-lab { position: absolute; z-index: 6; right: 18px; bottom: 18px; min-height: 44px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ed-texto-niebla2); background: var(--gg-vidrio); border: 1px solid var(--gg-vidrio-borde); opacity: .8; transition: opacity var(--gg-rapido), color var(--gg-rapido); } .gg-lab:hover { opacity: 1; color: var(--ed-metal-oro-cl); } .gg[data-vista="teatro"] .gg-lab { display: none; } /* pisaba la tira de miniaturas */ .gg-lab-texto { padding-left: .22em; } .gg :focus-visible { outline: 2px solid var(--ed-pano-jade-luz); outline-offset: 2px; } .gg-cuerpo { position: relative; height: 100%; min-height: 0; overflow: hidden; } .gg[data-vista="teatro"] .gg-parrilla { display: none; } .gg[data-vista="parrilla"] .gg-teatro { display: none; } .gg-cejilla { margin: 0; font-family: var(--ed-fuente-interfaz), Inter, sans-serif; font-size: 11px; letter-spacing: .30em; text-transform: uppercase; font-weight: 600; color: var(--ed-metal-oro-txt); padding-left: .30em; } /* El vidrio, como clase, para lo que se monta desde JS. Con desenfoque SOLO donde hay puntero fino (escritorio) y en superficies pequenas: nunca en las 48 franjas de las tarjetas ni en el carril movil. */ .gg-vidrio { background: var(--gg-vidrio); border: 1px solid var(--gg-vidrio-borde); box-shadow: inset 0 1px 0 rgba(207, 243, 224, .05); } @media (min-width: 900px) and (pointer: fine) { .gg-vidrio, .gg-cerrar, .gg-lab, .gg-teatro-cerrar { backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15); } } /* ============ 4 · EL TELON =============================================== El n.º 1 de «Lo mas votado en video» a sangre, con el poster respirando en 24 s y el video en silencio cuando arranca. La luz llega de lado: la veladura viene de la izquierda, donde vive el texto, y por abajo se funde con la primera fila. Cero salto: la altura es fija por clamp. ========================================================================== */ .gg-telon { position: relative; height: var(--gg-telon-alto); overflow: hidden; /* ESCAPAR */ background: var(--ed-superficie-musgo); cursor: pointer; } .gg-telon--hueso { cursor: default; background: linear-gradient(100deg, rgba(10, 33, 24, .8) 30%, rgba(18, 56, 42, .55) 50%, rgba(10, 33, 24, .8) 70%); background-size: 300% 100%; animation: gg-hueso 2.4s ease-in-out infinite; } /* La respiracion va en el CONTENEDOR: poster y video respiran juntos, sin salto de fase cuando el video aparece. */ .gg-telon-medio { position: absolute; inset: 0; transform-origin: 50% 40%; animation: gg-respira var(--gg-lento) ease-in-out infinite alternate; } @keyframes gg-respira { to { transform: scale(1.06); } } .gg-telon-poster, .gg-telon-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; } /* Un medio VERTICAL o CUADRADO no se recorta a sangre (perderia dos tercios): se presenta ENTERO a la derecha, como una caratula, sobre su propio ambiente desenfocado (.gg-fondo, el barato). El apaisado si va a sangre. */ .gg-telon:not([data-forma="ancho"]) .gg-telon-medio { /* La caja mide EXACTAMENTE lo que mide la caratula (alto del telon por su proporcion, que viaja en --ar), pegada a la derecha. Asi la mascara disuelve el borde del poster y no una zona vacia. */ inset: 0 0 0 auto; width: calc(var(--gg-telon-alto) * var(--ar, 1)); /* ESCAPAR */ max-width: 60%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 1) 34%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 1) 34%); } .gg-telon > .gg-fondo { filter: blur(8px) saturate(.8) brightness(.5); } /* El video se ve cuando CORRE (estado), no cuando termina una transicion. */ .gg-telon-video { opacity: 0; transition: opacity 900ms ease; } .gg-telon-video[data-estado="corriendo"] { opacity: 1; } .gg-telon-velo { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(3, 17, 11, .88) 0%, rgba(3, 17, 11, .46) 36%, rgba(3, 17, 11, 0) 66%), linear-gradient(180deg, rgba(3, 17, 11, .42) 0%, rgba(3, 17, 11, 0) 20%), linear-gradient(180deg, rgba(3, 17, 11, 0) 48%, rgba(3, 17, 11, .72) 82%, var(--ed-superficie-selva) 100%); } .gg-telon-texto { position: absolute; left: var(--gg-lado); bottom: 84px; z-index: 2; width: 46vw; max-width: 640px; min-height: 230px; display: grid; gap: 10px; align-content: end; } .gg-telon-titulo { margin: 0; font-family: var(--ed-fuente-titulo), 'Cormorant Garamond', Georgia, serif; font-size: clamp(34px, 3.4vw, 56px); font-weight: 600; line-height: 1.04; /* ESCAPAR */ letter-spacing: -.01em; color: var(--ed-texto-tinta); text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 2px 24px rgba(0, 10, 6, .7); } .gg-telon-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; color: var(--ed-texto-niebla); letter-spacing: .02em; } .gg-telon-meta .gg-punto { color: var(--ed-texto-niebla2); } .gg-telon-acciones { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 8px; } .gg-telon-acciones .gg-votos--grande { flex-direction: row; gap: 8px; margin-left: 4px; } /* El telon se derrama sobre la primera fila. */ .gg-telon + .gg-fila { margin-top: -48px; position: relative; z-index: 2; } /* ============ 5 · FILAS ================================================= */ .gg-parrilla { position: relative; height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(203, 216, 205, .16) transparent; scroll-timeline-name: --gg-desplaza; scroll-timeline-axis: block; scroll-padding-top: calc(var(--gg-cabecera-alto) + 8px); /* el foco con Tab no se esconde bajo el cromo */ padding-bottom: 72px; } .gg-fila { position: relative; margin: 4px 0 18px; } .gg-fila[hidden] { display: none; } /* una fila vacia DESAPARECE entera: una pista vacia con flechas parece averia */ .gg-fila-cabecera { display: flex; align-items: baseline; gap: 12px; padding: 0 var(--gg-lado); } .gg-fila-titulo { margin: 0; font-family: var(--ed-fuente-titulo), 'Cormorant Garamond', Georgia, serif; font-size: 26px; font-weight: 600; line-height: 1.15; letter-spacing: -.005em; color: var(--ed-texto-tinta); } .gg-fila-cuenta { font-size: 11px; letter-spacing: .08em; color: var(--ed-texto-niebla2); } .gg-reordenar { margin-left: auto; min-height: 44px; padding: 0 12px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; transition: background-color var(--gg-rapido); } .gg-reordenar:hover { background: rgba(67, 224, 168, .08); } /* ============ 6 · PISTA Y TARJETAS ====================================== LA CINTA EDITORIAL. Todas las tarjetas de una fila miden la MISMA ALTURA (--gg-fila-alto) y el ANCHO sale de la forma del medio, que el modelo ya decidio y viaja en data-forma: alto 3/4, cuadro 1/1, ancho 16/9. La caja no depende de la imagen (height + aspect-ratio en la tarjeta, la estirada por CSS), asi que el navegador sabe el tamano de todo antes de pedir un byte. 🔴 EL PROBLEMA CLASICO DE NETFLIX, RESUELTO: `overflow-x: auto` fuerza `overflow-y: auto`, asi que la tarjeta que crece no puede desbordar la fila. SE ACOLCHA LA PISTA y la tarjeta crece hacia dentro del acolchado. La aritmetica se MIDE (mirar.py), no se confia. ========================================================================== */ .gg-carril { position: relative; } .gg-pista { display: flex; align-items: flex-end; gap: var(--gg-gap); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; /* PROXIMITY, no mandatory: con mandatory el desplazamiento del foco con Tab pelea contra el enganche y la fila se balancea */ padding: var(--gg-acolchado) var(--gg-lado); scroll-padding-inline: var(--gg-lado); scrollbar-width: none; overscroll-behavior-inline: contain; } .gg-pista::-webkit-scrollbar { display: none; } .gg-item { flex: 0 0 auto; position: relative; scroll-snap-align: start; } .gg-item:last-child { scroll-snap-align: end; } /* sin esto, el ultimo tramo queda inalcanzable */ /* EL NUMERAL DEL PUESTO (solo filas Top). En Cinzel, enorme, en metal apagado, medio tapado por su tarjeta. La fuente se declara en el ITEM para que `ch` mida el «0» de Cinzel A ESE TAMANO: el acolchado sale exacto sin medir nada en JS, y con dos digitos crece solo. Cero salto. */ .gg-item--puesto { font: 400 calc(var(--gg-fila-alto) * .9) / 1 var(--ed-fuente-rotulo), Cinzel, Georgia, serif; /* ESCAPAR */ /* El numeral vive en una caja de 1ch por digito, centrado: asi la tarjeta tapa el 40 % del glifo sea el «1» (estrecho) o el «8». */ padding-inline-start: calc(var(--gg-cifras, 1) * .6ch); /* ESCAPAR */ } .gg-item[data-cifras="2"] { --gg-cifras: 2; } .gg-item--puesto > .gg-tarjeta { position: relative; z-index: 1; font: 15px / 1.55 var(--ed-fuente-interfaz), Inter, system-ui, sans-serif; /* devolver la fuente */ } .gg-puesto-num { position: absolute; left: 0; bottom: -.05em; z-index: 0; width: calc(var(--gg-cifras, 1) * 1ch); text-align: center; /* ESCAPAR */ pointer-events: none; user-select: none; letter-spacing: -.04em; opacity: .55; color: transparent; background: linear-gradient(168deg, var(--ed-metal-oro-txt) 8%, var(--ed-metal-laton) 52%, rgba(140, 111, 30, .35) 100%); -webkit-background-clip: text; background-clip: text; } .gg-puesto-num.es-subida { background-image: linear-gradient(168deg, var(--ed-pano-jade-luz), var(--ed-pano-malaquita)); } .gg-tarjeta { position: relative; height: var(--gg-fila-alto); /* NUNCA width fijo: sobre-restringe y el aspect-ratio se ignora */ aspect-ratio: 16 / 9; border-radius: var(--ed-radio-chico); overflow: hidden; background: var(--ed-superficie-musgo); cursor: pointer; } .gg-tarjeta[data-forma="cuadro"] { aspect-ratio: 1; } .gg-tarjeta[data-forma="alto"] { aspect-ratio: 3 / 4; } .gg-tarjeta:focus-visible { outline-offset: 3px; box-shadow: 0 0 0 5px rgba(3, 17, 11, .8); } .gg-lienzo { position: absolute; inset: 0; } .gg-lienzo .gg-imagen, .gg-lienzo .gg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .gg-lienzo[data-forma="alto"] .gg-imagen { object-position: 50% 30%; } /* Chips: la duracion abajo a la derecha, y el aviso «no abre en linea» como un glifo de bajar (el 27 % de produccion esta asi: se avisa, sin gritar). */ .gg-chips { position: absolute; right: 8px; bottom: 8px; z-index: 2; display: flex; gap: 6px; transition: opacity var(--gg-rapido); } .gg-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 500; letter-spacing: .04em; color: var(--ed-texto-tinta2); background: var(--gg-vidrio); border: 1px solid var(--gg-vidrio-borde); } .gg-chip--terco { color: var(--ed-metal-oro-cl); border-color: var(--gg-linea-oro); padding: 0 6px; } .gg-chip--terco::before { content: ''; width: 13px; height: 13px; background: currentColor; -webkit-mask: var(--gg-mask-bajar) center / contain no-repeat; mask: var(--gg-mask-bajar) center / contain no-repeat; } /* La franja: el titulo, la meta y los votos SOBRE la imagen, con veladura, y solo cuando hace falta (raton o foco). `visibility:hidden` saca 96 botones de voto del orden de tabulacion y del recuento de mirar.py. */ .gg-franja { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 28px 10px 8px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2px 8px; background: linear-gradient(180deg, rgba(3, 17, 11, 0), rgba(3, 17, 11, .62) 34%, rgba(3, 17, 11, .94)); visibility: hidden; opacity: 0; transition: opacity var(--gg-rapido) var(--gg-curva), visibility 0s linear var(--gg-rapido); } .gg-tarjeta[data-forma="alto"] .gg-franja, .gg-tarjeta[data-forma="cuadro"] .gg-franja { grid-template-columns: 1fr; } .gg-franja-titulo { margin: 0; grid-column: 1 / -1; font-family: var(--ed-fuente-titulo), 'Cormorant Garamond', Georgia, serif; font-size: 17px; font-weight: 600; line-height: 1.22; color: var(--ed-texto-tinta); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .gg-tarjeta[data-forma="alto"] .gg-franja-titulo, .gg-tarjeta[data-forma="cuadro"] .gg-franja-titulo { -webkit-line-clamp: 1; } .gg-meta { display: flex; gap: 6px; align-items: center; margin: 0; min-width: 0; font-size: 11px; color: var(--ed-texto-niebla2); letter-spacing: .03em; } .gg-meta > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gg-franja .gg-votos { gap: 4px; justify-self: end; } .gg-franja .gg-voto { width: 40px; } /* 44 de alto siempre */ .gg-tarjeta[data-forma="alto"] .gg-franja .gg-voto--abajo { display: none; } /* no cabe: el «en contra» vive en el teatro */ .gg-tarjeta[data-forma="alto"] .gg-franja .gg-votos, .gg-tarjeta[data-forma="cuadro"] .gg-franja .gg-votos { justify-self: start; } /* 🔴 `[data-forzar-hover]` VIVE FUERA DE LA CONSULTA DE MEDIOS, a proposito: Chrome sin ventana no casa `hover: hover` de forma fiable, y un estado que solo existe con raton es un estado que no se puede comprobar. */ .gg-tarjeta[data-forzar-hover] { transform: scale(var(--gg-crece)); z-index: 4; transition: none; box-shadow: var(--gg-sombra-tarjeta), 0 0 0 1px var(--gg-linea-oro); } .gg-tarjeta[data-forzar-hover] .gg-franja { visibility: visible; opacity: 1; transition: none; } .gg-tarjeta[data-forzar-hover] .gg-chips, .gg-tarjeta:focus-within .gg-chips { opacity: 0; } .gg-tarjeta:focus-within .gg-franja { visibility: visible; opacity: 1; transition-delay: 0s; } .gg-item:first-child .gg-tarjeta { transform-origin: left center; } .gg-item:last-child .gg-tarjeta { transform-origin: right center; } /* El crecimiento de verdad, SOLO donde hay raton. En un tactil ancho se quedan las filas y el arrastre, pero no el «hover pegajoso». */ @media (hover: hover) and (pointer: fine) { .gg-tarjeta { transition: transform var(--gg-rapido) var(--gg-curva), box-shadow var(--gg-rapido); } .gg-tarjeta:hover, .gg-tarjeta:focus-within { transform: scale(var(--gg-crece)); z-index: 4; box-shadow: var(--gg-sombra-tarjeta), 0 0 0 1px var(--gg-linea-oro); } .gg-tarjeta:hover .gg-franja { visibility: visible; opacity: 1; transition-delay: 0s; } .gg-tarjeta:hover .gg-chips { opacity: 0; } } /* Sin raton (tablet ancha): la franja compacta SIEMPRE visible, sin votos (se vota en el teatro), chips arriba para no chocar con el titulo, sin flechas. */ @media (hover: none) { .gg[data-forma="parrilla"] .gg-franja { visibility: visible; opacity: 1; padding-top: 22px; } .gg[data-forma="parrilla"] .gg-franja .gg-votos { display: none; } .gg[data-forma="parrilla"] .gg-chips { top: 8px; bottom: auto; } .gg[data-forma="parrilla"] .gg-flecha { display: none; } } /* Las flechas: una veladura de selva con el galon de laton. Leen como «la fila sigue hacia la oscuridad», no como un boton pegado encima. Son ayuda de RATON: aria-hidden y fuera del orden de tabulacion. */ .gg-flecha { position: absolute; top: var(--gg-acolchado); bottom: var(--gg-acolchado); width: var(--gg-lado); z-index: 5; border: 0; cursor: pointer; } .gg-flecha--izquierda { left: 0; background: linear-gradient(90deg, var(--ed-superficie-selva) 25%, transparent); } .gg-flecha--derecha { right: 0; background: linear-gradient(270deg, var(--ed-superficie-selva) 25%, transparent); } .gg-flecha::after { content: ''; position: absolute; top: 50%; left: 50%; width: 11px; height: 11px; border-right: 1.5px solid var(--ed-metal-oro-txt); border-top: 1.5px solid var(--ed-metal-oro-txt); } .gg-flecha--derecha::after { transform: translate(-60%, -50%) rotate(45deg); } .gg-flecha--izquierda::after { transform: translate(-40%, -50%) rotate(-135deg); } .gg-flecha[hidden] { display: none; } .gg-tarjeta--hueso { cursor: default; background: linear-gradient(100deg, rgba(10, 33, 24, .8) 30%, rgba(18, 56, 42, .55) 50%, rgba(10, 33, 24, .8) 70%); background-size: 300% 100%; animation: gg-hueso 2.4s ease-in-out infinite; } @keyframes gg-hueso { to { background-position: -200% 0; } } /* ============ 7 · TEATRO =============================================== No es un segundo : los dialogos anidados pelean por el foco. Es un panel hermano dentro del mismo, y la parrilla recibe `inert`. La tarjeta se FUNDE hacia el escenario con la View Transitions API (§12). ========================================================================== */ .gg-teatro { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; padding: calc(var(--gg-cabecera-alto) + 10px) var(--gg-lado) 14px; /* ESCAPAR el calc */ } .gg .gg-teatro-cerrar { justify-self: start; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ed-texto-tinta2); background: var(--gg-vidrio); border: 1px solid var(--gg-vidrio-borde); } .gg-teatro-cerrar::before { content: ''; width: 9px; height: 9px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); } .gg-teatro-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; min-height: 0; } @media (max-width: 1100px) { .gg-teatro-cuerpo { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; } } /* El escenario es un contenedor de tamano: el medio se encaja con `contain` sin una linea de JS. */ .gg-escenario { container-type: size; position: relative; display: grid; place-items: center; overflow: hidden; min-height: 0; border-radius: var(--ed-radio-grande); background: var(--ed-superficie-musgo); } /* El fondo ambiental BARATO: la miniatura en una caja de un cuarto, desenfocada con radio 8 y escalada x4.2. Mismo aspecto que blur(34) a pantalla completa con ~68 veces menos trabajo por diapositiva. Sin background-attachment: fixed, que el tema quito por ser el mayor coste de INP en movil. */ .gg-fondo { position: absolute; left: 50%; top: 50%; width: 25%; height: 25%; z-index: 0; transform: translate(-50%, -50%) scale(4.2); transform-origin: center; background: center / cover no-repeat; filter: blur(8px) saturate(.75) brightness(.45); } .gg-escena-medio { position: relative; z-index: 1; aspect-ratio: var(--ar, 1.7778); width: min(100cqw, calc(100cqh * var(--ar, 1.7778))); /* ESCAPAR */ background: var(--ed-superficie-musgo) center / contain no-repeat; /* la miniatura va por style: nunca una instantanea vacia */ view-transition-name: gg-medio; /* solo existe pintado en el teatro: no hay duplicado */ } .gg-escena-medio > .gg-imagen, .gg-escena-medio > .gg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .gg-ficha { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow-y: auto; padding: 20px 20px 16px; border-radius: var(--ed-radio-grande); background: var(--gg-vidrio); border: 1px solid var(--gg-vidrio-borde); scrollbar-width: thin; scrollbar-color: rgba(203, 216, 205, .16) transparent; } .gg-ficha-titulo { margin: 0; font-family: var(--ed-fuente-titulo), 'Cormorant Garamond', Georgia, serif; font-size: 30px; font-weight: 600; line-height: 1.12; color: var(--ed-texto-tinta); text-wrap: balance; } .gg-autor { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 13px; color: var(--ed-texto-tinta2); } .gg-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; box-shadow: 0 0 0 1px var(--ed-metal-laton); } .gg-avatar--letra { display: grid; place-items: center; background: var(--ed-superficie-musgo2); font-size: 13px; font-weight: 600; color: var(--ed-texto-tinta2); } .gg-autor-hace { color: var(--ed-texto-niebla); } .gg-autor-hace::before { content: '·'; margin-right: 6px; color: var(--ed-texto-niebla2); } .gg-ficha .gg-votos--grande { flex-direction: row; gap: 8px; } .gg-ficha-meta { margin: 0; font-size: 12px; color: var(--ed-texto-niebla); } .gg-credito { margin: auto 0 0; padding-top: 10px; border-top: 1px solid var(--gg-linea-3); font-size: 11px; line-height: 1.5; color: var(--ed-texto-niebla2); } .gg-tira { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 4px; } .gg-tira::-webkit-scrollbar { display: none; } .gg .gg-tira-item { flex: 0 0 auto; width: 92px; height: 58px; min-height: 44px; border-radius: var(--ed-radio-chico); overflow: hidden; border: 1px solid transparent; opacity: .5; transition: opacity var(--gg-rapido), border-color var(--gg-rapido); } .gg-tira-item img { width: 100%; height: 100%; object-fit: cover; } .gg-tira-item.es-activo, .gg-tira-item:hover { opacity: 1; } .gg-tira-item.es-activo { border-color: var(--ed-pano-jade-luz); } /* ============ 8 · CARRIL VERTICAL (la forma TikTok, sin marco) ========== 🔴 EL ALTO NO SE DISCUTE. El es position:fixed; inset:0, asi que su caja YA ES el viewport visual y todo lo de dentro es porcentual. NADA de 100vh/100dvh aqui: 100dvh cambia mientras la barra de Safari se pliega y el carril tirita. 🔴 EL MATERIAL NO ES VERTICAL: el 40 % es apaisado. Tres maquetas, decididas por data-forma (del modelo) y data-encaje (cubre / entero): alto+cubre -> el medio LLENA la pantalla (TikTok puro); cuadro, y alto+entero -> el medio a ancho completo con ambiente alrededor; ancho -> SALA DE CINE: el medio a un tercio del alto y la cartela debajo. Las safe areas van SIEMPRE por var(--gg-st/--gg-sb): en Chrome sin ventana valen 0 y el laboratorio las fuerza en linea (47/34) para medir el caso apretado. Sin backdrop-filter en el carril: cinco diapositivas vivas con nueve vidrios cada una sobre un video en marcha es la causa n.º 1 de tirones en iOS, y sobre medios oscuros no se nota. ========================================================================== */ .gg[data-forma="carril"] { --gg-lado: 16px; --gg-rail: 56px; --gg-st: env(safe-area-inset-top, 0px); --gg-sb: env(safe-area-inset-bottom, 0px); --gg-cromo: calc(var(--gg-st) + 94px); /* ESCAPAR */ } dialog.gg[open][data-forma="carril"] { grid-template-rows: minmax(0, 1fr); } /* Sin marco: la MISMA cabecera flota y deja pasar el dedo. */ .gg[data-forma="carril"] .gg-cabecera { position: absolute; z-index: 6; inset: 0 0 auto 0; pointer-events: none; height: calc(var(--gg-st) + 50px); padding: calc(var(--gg-st) + 6px) var(--gg-lado) 0; background: none; box-shadow: none; animation: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .gg[data-forma="carril"] .gg-cabecera button { pointer-events: auto; } .gg[data-forma="carril"] .gg-rotulo { font-size: 11px; letter-spacing: .30em; opacity: .75; } .gg[data-forma="carril"] .gg-ficha-giro { width: 18px; } .gg[data-forma="carril"] .gg-cerrar { backdrop-filter: none; -webkit-backdrop-filter: none; } /* El boton del laboratorio pasa a ser un icono redondo junto al aspa. */ .gg[data-forma="carril"] .gg-lab { top: calc(var(--gg-st) + 6px); right: calc(var(--gg-lado) + 44px + 8px); bottom: auto; width: 44px; height: 44px; padding: 0; border-radius: 50%; opacity: 1; justify-content: center; backdrop-filter: none; -webkit-backdrop-filter: none; } .gg[data-forma="carril"] .gg-lab-texto { display: none; } .gg[data-forma="carril"] .gg-lab::before { content: ''; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--gg-mask-ajustes) center / contain no-repeat; mask: var(--gg-mask-ajustes) center / contain no-repeat; } .gg[data-forma="carril"] .gg-panel { top: calc(var(--gg-cromo) + 8px); bottom: auto; left: 8px; right: 8px; width: auto; max-height: calc(100% - var(--gg-cromo) - 24px); } /* Las pestanas: 44 px de toque, pildora visual de 30. Dicen en que fila esta la diapositiva activa y saltan al tocarlas: lo que TikTok no da. */ .gg-pestanas { position: absolute; z-index: 6; top: calc(var(--gg-st) + 50px); left: 0; right: 0; height: 44px; display: flex; justify-content: center; gap: 6px; padding: 0 var(--gg-lado); pointer-events: none; } .gg-pestana { pointer-events: auto; position: relative; isolation: isolate; min-height: 44px; padding: 0 11px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ed-texto-niebla2); white-space: nowrap; transition: color var(--gg-rapido); } .gg-pestana[aria-current="true"] { color: var(--ed-texto-tinta); } .gg-pestana[aria-current="true"]::before { content: ''; position: absolute; inset: 7px 0; z-index: -1; border-radius: 999px; background: var(--gg-vidrio); border: 1px solid var(--gg-vidrio-borde); } .gg-carril-v { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; touch-action: pan-y; } .gg-carril-v::-webkit-scrollbar { display: none; } .gg-carril-v:focus-visible { outline-offset: -3px; } .gg-diapo { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; /* un elemento por gesto: eso ES TikTok */ display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); overflow: hidden; isolation: isolate; touch-action: manipulation; /* quita el retardo de 300 ms del doble toque de zoom, que es el gesto que se reutiliza */ } /* minmax(0,…) y no `auto`: una pista `auto` NO esta obligada a caber. */ .gg-diapo[data-forma="cuadro"], .gg-diapo[data-forma="alto"][data-encaje="entero"] { grid-template-rows: minmax(calc(var(--gg-cromo) + 8px), 2fr) auto minmax(0, 3fr); /* ESCAPAR */ } .gg-diapo[data-forma="ancho"] { grid-template-rows: minmax(calc(var(--gg-cromo) + 8px), 3fr) auto minmax(0, 7fr); /* ESCAPAR */ } /* El ambiente: color del medio + la miniatura desenfocada barata + la lampara (la luz llega tarde y de lado: desde arriba a la derecha, en oro al 7 %). */ .gg-lienzo-v { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .gg-lienzo-v::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 60% at 100% 0%, rgba(201, 162, 39, .07), transparent 60%); } /* El hueco: su alto lo fija --ar, nunca el contenido. */ .gg-hueco { position: relative; grid-row: 2; align-self: start; width: 100%; aspect-ratio: var(--ar, 16 / 9); overflow: hidden; } .gg-hueco > .gg-imagen, .gg-hueco > .gg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .gg-diapo[data-forma="alto"][data-encaje="cubre"] .gg-hueco { position: absolute; inset: 0; grid-row: auto; width: auto; aspect-ratio: auto; } .gg-diapo[data-forma="alto"][data-encaje="cubre"] .gg-hueco > .gg-imagen, .gg-diapo[data-forma="alto"][data-encaje="cubre"] .gg-hueco > .gg-video { object-position: 50% 30%; } .gg-velo { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(3, 17, 11, .62) 0, rgba(3, 17, 11, .22) 14%, transparent 26%, transparent 50%, rgba(3, 17, 11, .55) 72%, rgba(3, 17, 11, .94) 100%); } .gg-diapo[data-forma="ancho"] .gg-velo { background: linear-gradient(180deg, rgba(3, 17, 11, .62) 0, rgba(3, 17, 11, .22) 14%, transparent 26%, transparent 60%, rgba(3, 17, 11, .70) 100%); } /* La ficha (cartela): abajo a la izquierda, dejando libre el rail. */ .gg-ficha-v { position: absolute; z-index: 3; left: var(--gg-lado); right: calc(var(--gg-lado) + var(--gg-rail) + 12px); /* ESCAPAR */ bottom: calc(var(--gg-sb) + 16px); max-width: 560px; display: flex; flex-direction: column; gap: 6px; } .gg-diapo[data-forma="ancho"] .gg-ficha-v { position: relative; grid-row: 3; align-self: start; inset: auto; min-height: 0; margin: 22px calc(var(--gg-lado) + var(--gg-rail) + 12px) 0 var(--gg-lado); } .gg-cejilla-v { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; padding-left: .28em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gg-titulo-v { margin: 0; font-family: var(--ed-fuente-titulo), 'Cormorant Garamond', Georgia, serif; font-size: 27px; font-weight: 600; line-height: 1.15; color: var(--ed-texto-tinta); text-shadow: 0 1px 14px rgba(0, 10, 6, .8); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } @media (min-width: 400px) { .gg-titulo-v { font-size: 28px; } } .gg-diapo[data-forma="ancho"] .gg-titulo-v { -webkit-line-clamp: 3; } /* Cuando el video no abre, «como lo abro» pesa mas que «quien lo subio»: la cartela se recoge (titulo a una linea, sin la fila de autor) para que el aviso no pise el medio. */ .gg-ficha-v:has(.gg-terco) .gg-titulo-v { -webkit-line-clamp: 1; } .gg-ficha-v:has(.gg-terco) .gg-autor { display: none; } @media (max-height: 700px) { .gg-diapo[data-forma="ancho"] .gg-titulo-v { -webkit-line-clamp: 2; } } .gg-ficha-v .gg-autor { min-height: 44px; } .gg-hilo { display: grid; grid-template-columns: 20px minmax(0, 1fr) 10px; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; margin-top: 2px; border-radius: var(--ed-radio-medio); background: var(--gg-vidrio); border: 1px solid var(--gg-linea-oro); } .gg-icono--hilo { width: 20px; height: 20px; background: var(--ed-metal-oro-txt); -webkit-mask: var(--gg-mask-hilo) center / contain no-repeat; mask: var(--gg-mask-hilo) center / contain no-repeat; } .gg-hilo-texto { display: grid; gap: 2px; min-width: 0; } .gg-hilo-rotulo { font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: .20em; text-transform: uppercase; } .gg-hilo-titulo { font-size: 13px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gg-hilo::after { content: ''; width: 9px; height: 9px; border-right: 1.5px solid var(--ed-metal-oro-txt); border-top: 1.5px solid var(--ed-metal-oro-txt); transform: rotate(45deg); } /* El rail de acciones. Todo lo que se toca mide 44 px o mas (regla de Larry, extra.less §21). */ .gg-acciones { position: absolute; z-index: 3; right: var(--gg-lado); bottom: calc(var(--gg-sb) + 16px); width: var(--gg-rail); display: flex; flex-direction: column; align-items: center; gap: 12px; } .gg-acciones .gg-votos--grande { flex-direction: column; gap: 6px; } .gg-acciones .gg-voto, .gg .gg-accion { background: var(--gg-vidrio); border: 1px solid var(--gg-vidrio-borde); color: var(--ed-texto-tinta2); box-shadow: inset 0 1px 0 rgba(203, 216, 205, .06); } .gg-acciones .gg-marcador { font-size: 14px; } .gg-acciones .gg-voto--arriba[aria-pressed="true"] ~ .gg-marcador { color: var(--gg-jade-texto); } .gg .gg-accion { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; } .gg-accion--sonido::before { content: ''; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--gg-mask-mudo) center / contain no-repeat; mask: var(--gg-mask-mudo) center / contain no-repeat; } .gg-accion--sonido[data-sonido="encendido"] { color: var(--ed-pano-jade-luz); } .gg-accion--sonido[data-sonido="encendido"]::before { -webkit-mask-image: var(--gg-mask-sonido); mask-image: var(--gg-mask-sonido); } /* Play y progreso. El glifo aparece por ESTADO (falta el gesto, o esta pausado), nunca por transicion. */ .gg .gg-play { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; display: none; place-items: center; background: var(--gg-vidrio); border: 1px solid var(--gg-vidrio-borde); color: var(--ed-texto-tinta); } .gg-play::before { content: ''; width: 26px; height: 26px; margin-left: 4px; background: currentColor; -webkit-mask: var(--gg-mask-play) center / contain no-repeat; mask: var(--gg-mask-play) center / contain no-repeat; } .gg-video[data-estado="quieto"] ~ .gg-play, .gg-video[data-estado="esperando-gesto"] ~ .gg-play, .gg-diapo[data-pausado] .gg-play { display: grid; } .gg-progreso { position: absolute; z-index: 3; left: 0; right: 0; bottom: var(--gg-sb); height: 2px; background: var(--ed-pano-jade-luz); transform-origin: left; transform: scaleX(0); opacity: 0; } .gg-diapo[data-activo] .gg-progreso { opacity: 1; } /* El aviso terco, compacto y DENTRO de la ficha: empuja el texto en vez de tapar el poster. */ .gg[data-forma="carril"] .gg-terco { position: static; inset: auto; transform: none; width: auto; margin: 0 0 6px; padding: 12px 14px; text-align: left; display: grid; gap: 4px; justify-items: stretch; align-content: start; background: var(--gg-vidrio); border: 1px solid var(--gg-vidrio-borde); border-radius: var(--ed-radio-medio); } .gg[data-forma="carril"] .gg-terco-nota { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: none; } .gg[data-forma="carril"] .gg-terco-botones { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 4px; } .gg[data-forma="carril"] .gg-terco .gg-boton { padding: 0 10px; letter-spacing: .04em; } .gg[data-forma="carril"] .gg-flor { z-index: 4; } /* ============ 9 · VOTOS ================================================ Arriba jade; abajo NO es lapa a plena intensidad. `lapa` es el token de LO URGENTE: pintar el voto en contra de rojo alarma lo convierte en un boton de denuncia y anima al linchamiento. Y los dos pulgares no pesan igual — la galeria premia, no castiga — pero el area de toque se respeta siempre. ========================================================================== */ .gg-votos { display: flex; align-items: center; gap: 8px; } .gg-votos--grande { gap: 6px; } .gg .gg-voto { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gg-linea-2); color: var(--ed-texto-niebla); background: transparent; transition: background-color var(--gg-rapido), color var(--gg-rapido), border-color var(--gg-rapido), transform var(--gg-rapido); } .gg-votos--grande .gg-voto { width: 52px; height: 52px; } .gg .gg-voto--abajo { color: var(--ed-texto-niebla2); border-color: var(--gg-linea-3); } .gg-voto--abajo .gg-pulgar { width: 16px; height: 16px; } .gg-votos--grande .gg-voto--abajo { width: 46px; height: 46px; } .gg-pulgar { width: 20px; height: 20px; display: block; background: currentColor; -webkit-mask: var(--gg-mask) center/contain no-repeat; mask: var(--gg-mask) center/contain no-repeat; } .gg-voto--arriba { --gg-mask: url("data:image/svg+xml;utf8,"); } .gg-voto--abajo { --gg-mask: url("data:image/svg+xml;utf8,"); } .gg-voto:hover { color: var(--ed-texto-tinta); border-color: var(--gg-linea); } .gg-voto--arriba[aria-pressed="true"] { background: var(--gg-jade-fondo); color: var(--gg-jade-texto); border-color: rgba(67, 224, 168, .4); } .gg-voto--abajo[aria-pressed="true"] { background: var(--gg-lapa-fondo); color: var(--gg-lapa-texto); border-color: rgba(232, 69, 47, .35); } /* La cifra en Cinzel: las cifras en Cinzel son convencion del tema. */ .gg-marcador { font-family: var(--ed-fuente-rotulo), Cinzel, Georgia, serif; font-size: 13px; letter-spacing: .10em; color: var(--ed-texto-tinta2); min-width: 2.2ch; text-align: center; padding-left: .10em; } .gg-late { animation: gg-late .32s ease-out; } @keyframes gg-late { 50% { transform: scale(1.16); } } .gg-niega { animation: gg-niega .3s ease-out; } @keyframes gg-niega { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } /* El pulgar que brota donde se toco. Un gesto contenido, no confeti. */ .gg-flor { position: absolute; left: var(--x); top: var(--y); z-index: 4; width: 84px; height: 84px; margin: -42px 0 0 -42px; pointer-events: none; background: var(--gg-jade-texto); -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; animation: gg-florecer .62s var(--gg-curva) forwards; } @keyframes gg-florecer { 0% { transform: scale(.4); opacity: 0; } 35% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); opacity: 0; } } /* ============ 10 · ESTADOS ============================================== El estado «no arranca» NO apaga la pantalla: el poster se queda visible y el aviso es una tarjeta de vidrio compacta abajo del medio. Rotulo en Inter, no en Cinzel con tracking: es informacion, no un cartel. ========================================================================== */ .gg-terco { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 3; width: min(420px, calc(100% - 32px)); /* ESCAPAR */ display: grid; gap: 6px; text-align: center; padding: 14px 18px 16px; border-radius: var(--ed-radio-medio); background: var(--gg-vidrio); border: 1px solid var(--gg-vidrio-borde); box-shadow: var(--gg-sombra); } .gg-terco-rotulo { margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1.35; letter-spacing: .02em; color: var(--ed-texto-tinta); } .gg-terco-nota { margin: 0; font-size: 12px; line-height: 1.4; color: var(--ed-texto-niebla); max-width: 40ch; justify-self: center; } .gg-terco-botones { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 4px; } .gg .gg-boton { display: inline-grid; place-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .10em; text-transform: uppercase; border: 1px solid var(--gg-linea-2); transition: border-color var(--gg-rapido), color var(--gg-rapido), background-color var(--gg-rapido); } .gg-boton--fino:hover { border-color: var(--gg-linea-oro); background: rgba(3, 17, 11, .35); } .gg .gg-boton--laton { border-color: rgba(201, 162, 39, .45); } .gg-boton--laton:hover { border-color: var(--ed-metal-oro); background: rgba(201, 162, 39, .06); } /* EL PAN DE ORO, PARA UNA SOLA COSA POR PANTALLA (regla 2 del tema): el «Ver» del telon. En la portilla vive bajo su propio ::backdrop. */ .gg .gg-boton--oro { border: 0; padding: 0 24px; font-weight: 700; letter-spacing: .12em; background-image: linear-gradient(115deg, var(--ed-metal-laton) 0%, var(--ed-metal-oro) 38%, var(--ed-metal-oro-luz) 52%, var(--ed-metal-oro-txt) 68%, var(--ed-metal-laton) 100%); background-size: 200% 100%; box-shadow: 0 0 0 1px rgba(247, 237, 202, .28), 0 16px 40px -18px rgba(201, 162, 39, .75); transition: background-position .6s ease, box-shadow var(--gg-rapido); } .gg-boton--oro:hover { background-position: 100% 50%; box-shadow: 0 0 0 1px rgba(247, 237, 202, .5), 0 18px 46px -16px rgba(201, 162, 39, .9); } .gg-boton--bajar { grid-auto-flow: column; gap: 6px; } .gg-boton--bajar::after { content: ''; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--gg-mask-bajar) center / contain no-repeat; mask: var(--gg-mask-bajar) center / contain no-repeat; } .gg-vacio { display: grid; place-items: center; gap: 10px; height: 100%; text-align: center; padding: 40px 24px; } .gg-vacio-linea { font-family: var(--ed-fuente-titulo), 'Cormorant Garamond', serif; font-style: italic; font-size: 18px; color: var(--ed-texto-niebla); margin: 0; max-width: 40ch; } /* ============ 11 · PANEL, AVISOS Y PORTILLA ============================ */ .gg-panel { position: absolute; z-index: 6; right: 18px; bottom: 70px; width: min(360px, 92vw); /* ESCAPAR */ max-height: calc(100% - 100px); overflow-y: auto; padding: 16px; border-radius: var(--ed-radio-medio); background: var(--ed-superficie-musgo); border: 1px solid var(--gg-linea-oro); box-shadow: var(--gg-sombra-alta); display: grid; gap: 14px; } .gg-panel[hidden] { display: none; } .gg-panel-seccion { display: grid; gap: 8px; } .gg-panel-botones { display: flex; gap: 6px; flex-wrap: wrap; } .gg .gg-panel-boton { min-height: 44px; padding: 0 14px; font-size: 11.5px; border-radius: 999px; border: 1px solid var(--gg-linea-2); color: var(--ed-texto-niebla); } .gg-panel-boton.es-activo { border-color: var(--ed-pano-jade-luz); color: var(--ed-pano-jade-luz); } .gg-panel-sw { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 12.5px; } .gg-panel-sw b { display: block; font-weight: 600; color: var(--ed-texto-tinta2); } .gg-panel-sw small { display: block; color: var(--ed-texto-niebla2); font-size: 11px; line-height: 1.4; } .gg-panel-pie { font-size: 11px; color: var(--ed-texto-niebla2); margin: 0; border-top: 1px solid var(--gg-linea-3); padding-top: 10px; } .gg-quien { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .gg-quien-botones { display: flex; gap: 6px; flex-wrap: wrap; } .gg .gg-quien-boton { min-height: 44px; padding: 0 12px; font-size: 11px; border-radius: 999px; border: 1px solid var(--gg-linea-3); color: var(--ed-texto-niebla2); } .gg-quien-boton.es-activo { border-color: var(--gg-linea-oro); color: var(--ed-metal-oro-cl); } .gg-tostadas { position: absolute; z-index: 7; left: 50%; bottom: 22px; transform: translateX(-50%); display: grid; gap: 8px; } .gg-tostada { display: flex; gap: 12px; align-items: center; padding: 10px 16px; border-radius: 999px; font-size: 13px; background: var(--ed-superficie-musgo3); border: 1px solid var(--gg-linea-oro); box-shadow: var(--gg-sombra); } .gg-tostada-accion { font-size: 12px; letter-spacing: .10em; text-transform: uppercase; } /* La portilla usa la API `popover`: capa superior, por encima del . */ .gg-portilla { border: 1px solid var(--gg-linea-oro); border-radius: var(--ed-radio-grande); background: var(--ed-superficie-musgo); color: var(--ed-texto-tinta); padding: 26px 24px; width: min(420px, 92vw); text-align: center; /* ESCAPAR */ box-shadow: var(--gg-sombra-alta); font-family: var(--ed-fuente-interfaz), Inter, sans-serif; } .gg-portilla::backdrop { background: rgba(1, 8, 5, .6); } .gg-portilla .gg-boton--oro { color: var(--ed-superficie-selva); } .gg-portilla-linea { font-family: var(--ed-fuente-titulo), 'Cormorant Garamond', serif; font-style: italic; font-size: 18px; line-height: 1.4; margin: 12px 0 18px; color: var(--ed-texto-tinta2); } .gg-portilla-botones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .gg-portilla-pie { font-size: 11.5px; color: var(--ed-texto-niebla2); margin: 16px 0 0; } /* ============ 12 · MOVIMIENTO ========================================== «El marco quieto; el contenido transita.» La tarjeta se funde hacia el escenario (View Transitions, 420 ms); el telon respira en 24 s; el voto late 320 ms. Nada parpadea, nada se repite rapido. Y quien pide que se pare, se para: sin excepciones. Nada de arriba depende de una transicion para HACERSE VISIBLE. ========================================================================== */ ::view-transition-group(gg-medio) { animation-duration: 420ms; animation-timing-function: cubic-bezier(.2, .8, .3, 1); } ::view-transition-old(gg-medio), ::view-transition-new(gg-medio) { animation-duration: 420ms; height: 100%; width: 100%; object-fit: cover; /* sin estirado al ir de una caja recortada a una contenida */ } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 320ms; } @media (prefers-reduced-motion: reduce) { .gg *, .gg *::before, .gg *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .gg-flor { display: none; } .gg-telon-medio { animation: none; } .gg-cabecera { animation: none !important; background: rgba(3, 17, 11, .6); box-shadow: inset 0 -1px 0 var(--gg-linea-oro); } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }