/* =========================================================
   Cromos del Museo de Cromos
   - Base común: formato 5:7, título, ventana de la obra, autor y pie
     (insignia de familia, número y rareza). Todo se mide en cqw (1 % del
     ancho del cromo), así que el mismo diseño sirve a cualquier tamaño.
   - Rareza: brillo al mover (todas), foil azul (rara), holográfico morado
     (épica), arcoíris + marco dorado animado + chispas (legendaria).
   - Familias: [data-estilo] define colores, marco y efecto animado.
   - JS (cromos.js) escribe --rx/--ry (inclinación), --px/--py (posición del
     puntero en %) y --mx/--my (de -1 a 1).
   ========================================================= */

@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.cromo {
    --ancho: 240px;
    --rx: 0deg; --ry: 0deg; --px: 50%; --py: 50%; --mx: 0; --my: 0; --brillo: 0;
    --ruido: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23r)'/%3E%3C/svg%3E");
    --purpurina: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='white'%3E%3Cpath d='M9 4l1.2 3.6L14 9l-3.8 1.4L9 14l-1.2-3.6L4 9l3.8-1.4z'/%3E%3Ccircle cx='40' cy='12' r='1.4' opacity='.8'/%3E%3Ccircle cx='28' cy='34' r='1' opacity='.7'/%3E%3Cpath d='M48 38l.9 2.6 2.7 1-2.7 1-.9 2.6-.9-2.6-2.7-1 2.7-1z' opacity='.9'/%3E%3Ccircle cx='14' cy='50' r='1.2' opacity='.6'/%3E%3Ccircle cx='54' cy='56' r='.9' opacity='.7'/%3E%3C/g%3E%3C/svg%3E");
    position: relative; display: block; flex-shrink: 0;
    width: var(--ancho); aspect-ratio: 5 / 7;
    padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left;
    cursor: pointer; isolation: isolate;
    container-type: inline-size;
    perspective: 1100px;
    -webkit-tap-highlight-color: transparent;
}
.cromo:focus-visible { outline: 3px solid #E3A72F; outline-offset: 6px; border-radius: 16px; }

/* Sombra que se desplaza al inclinar */
.cromo::after {
    content: ''; position: absolute; z-index: -1; inset: 7% 9% -3%;
    border-radius: 18px; background: rgba(12, 8, 30, .5); filter: blur(14px);
    transform: translate(calc(var(--mx) * -10px), calc(var(--my) * -8px + 8px));
    transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.cromo-cuerpo {
    position: absolute; inset: 0; border-radius: 5cqw;
    transform-style: preserve-3d;
    transform: rotateY(var(--giro, 0deg)) rotateX(var(--rx)) rotateY(var(--ry));
    transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}
.cromo.is-activo .cromo-cuerpo, .cromo.is-activo::after { transition-duration: .14s; }
.cromo.is-volteado { --giro: 180deg; }

.cromo-cara {
    position: absolute; inset: 0; border-radius: 5cqw; overflow: hidden;
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
    transform: translateZ(.1px);
}
.cromo-reverso { transform: rotateY(180deg) translateZ(.1px); }

/* ── Anverso ─────────────────────────────────────────── */
.cromo-anverso {
    background: var(--marco, #444); color: var(--texto, #fff);
    box-shadow: var(--relieve, inset 0 0 0 .5cqw rgba(255, 255, 255, .22));
}
.cromo-ambiente { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cromo-ambiente i { position: absolute; display: block; }
.cromo-contenido {
    position: absolute; inset: 0; z-index: 1;
    display: flex; flex-direction: column; gap: 2.5cqw;
    padding: 4.6cqw 4.6cqw 4cqw;
}
.cromo-titulo {
    position: relative; min-height: 14cqw; display: flex; align-items: center; justify-content: center;
    padding: 1.6cqw 4cqw; border-radius: 3cqw; text-align: center;
    background: var(--placa); color: var(--placa-texto);
    box-shadow: var(--placa-sombra, 0 .8cqw 2cqw rgba(0, 0, 0, .28));
    font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 6.1cqw; line-height: 1.07; letter-spacing: -.01em;
}
.cromo-titulo span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.cromo-ventana {
    position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 2.4cqw;
    background: var(--fondo-ventana, #111);
    box-shadow: 0 0 0 .9cqw var(--borde-ventana, #fff), 0 1.6cqw 3.4cqw rgba(0, 0, 0, .38);
}
.cromo-ventana img {
    position: relative; display: block; width: 100%; height: 100%;
    object-fit: cover; object-position: var(--foco, 50% 50%);
    transform: scale(var(--zoom, 1)); transform-origin: var(--foco, 50% 50%);
}
/* Obras apaisadas: la obra entera sobre un fondo hecho con ella misma, difuminada */
.cromo-ventana.completa::before {
    content: ''; position: absolute; inset: -12%;
    background: var(--img) center / cover; filter: blur(9px) saturate(1.25) brightness(.7);
}
.cromo-ventana.completa img { object-fit: contain; filter: drop-shadow(0 1cqw 2cqw rgba(0, 0, 0, .45)); }
/* Sin imagen (derechos de autor o pendiente): pictograma propio */
.cromo-ventana.sin-imagen {
    display: grid; place-items: center;
    background: var(--fondo-picto, radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .22), rgba(0, 0, 0, .25)));
    color: var(--color-picto, var(--texto));
}
.cromo-picto { width: 52cqw; opacity: .92; }
.cromo-picto svg { display: block; width: 100%; height: auto; }
.cromo-aviso-img {
    position: absolute; left: 3cqw; right: 3cqw; bottom: 2.4cqw; text-align: center;
    font: 600 3cqw/1.25 'Inter', system-ui, sans-serif; letter-spacing: .02em; opacity: .85;
}

.cromo-autor {
    align-self: center; max-width: 100%; padding: .5cqw 2.4cqw; border-radius: 99px; background: var(--autor-fondo, transparent);
    text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font: 600 4.2cqw/1.2 'Inter', system-ui, sans-serif; color: var(--texto);
    text-shadow: var(--texto-sombra, none);
}
.cromo-pie { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
.cromo-insignia {
    display: inline-flex; align-items: center; gap: 1.4cqw; min-width: 0;
    padding: 1cqw 2.8cqw 1cqw 1cqw; border-radius: 99px;
    background: var(--insignia); color: var(--insignia-texto);
    box-shadow: inset 0 0 0 .4cqw rgba(255, 255, 255, .25), 0 .6cqw 1.2cqw rgba(0, 0, 0, .25);
    font: 800 3.2cqw/1 'Inter', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.cromo-insignia svg { width: 6cqw; height: 6cqw; padding: .7cqw; border-radius: 50%; background: var(--icono-fondo, rgba(255, 255, 255, .22)); flex-shrink: 0; }
.cromo-numero {
    font: 800 4cqw/1 'Inter', system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .03em;
    color: var(--texto); text-shadow: var(--texto-sombra, none);
}
.cromo-rareza { display: grid; place-items: center; width: 7.6cqw; height: 7.6cqw; border-radius: 50%; background: rgba(10, 8, 25, .42); box-shadow: inset 0 0 0 .35cqw rgba(255, 255, 255, .25); }
.cromo-rareza svg { width: 5cqw; height: 5cqw; display: block; }
.cromo[data-rareza="comun"] .cromo-rareza { color: #EDE7DB; }
.cromo[data-rareza="rara"] .cromo-rareza { color: #6CC0FF; }
.cromo[data-rareza="epica"] .cromo-rareza { color: #C57CFF; }
.cromo[data-rareza="legendaria"] .cromo-rareza { color: #F7D27A; box-shadow: inset 0 0 0 .35cqw #F7D27A, 0 0 2cqw rgba(247, 210, 122, .7); }

/* ── Brillo que sigue al puntero (todas las rarezas) ──── */
.cromo-brillo {
    position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: radial-gradient(farthest-corner circle at var(--px) var(--py), rgba(255, 255, 255, .7) 5%, rgba(255, 255, 255, .28) 22%, rgba(0, 0, 0, .4) 90%);
    mix-blend-mode: soft-light; opacity: var(--brillo); transition: opacity .35s;
}

/* ── Rarezas ─────────────────────────────────────────── */
.cromo-holo {
    position: absolute; inset: 0; z-index: 2; pointer-events: none; display: none;
    /* De lleno sobre el marco; sobre la obra, solo un velo suave para no desfigurarla */
    -webkit-mask: linear-gradient(180deg, #000 19cqw, rgba(0, 0, 0, .28) 23cqw, rgba(0, 0, 0, .28) calc(100% - 27cqw), #000 calc(100% - 23cqw));
    mask: linear-gradient(180deg, #000 19cqw, rgba(0, 0, 0, .28) 23cqw, rgba(0, 0, 0, .28) calc(100% - 27cqw), #000 calc(100% - 23cqw));
}

.cromo[data-rareza="rara"] .cromo-holo {
    display: block; mix-blend-mode: color-dodge; opacity: calc(.14 + var(--brillo) * .3);
    background: linear-gradient(115deg, transparent 32%, rgba(110, 185, 255, .75) 45%, rgba(200, 240, 255, .9) 50%, rgba(110, 185, 255, .75) 55%, transparent 68%);
    background-size: 260% 260%; background-position: var(--px) var(--py);
}

.cromo[data-rareza="epica"] .cromo-holo {
    display: block; mix-blend-mode: color-dodge; opacity: calc(.34 + var(--brillo) * .3);
    background:
        var(--purpurina),
        repeating-linear-gradient(118deg, #7E3BFF 0%, #36D9FF 4.5%, #FF5ACD 9%, #7E3BFF 13.5%);
    background-size: 26cqw 26cqw, 420% 420%;
    background-position: center, var(--px) var(--py);
    filter: saturate(1.3) brightness(.8);
}

.cromo[data-rareza="legendaria"] .cromo-holo {
    display: block; mix-blend-mode: color-dodge; opacity: calc(.42 + var(--brillo) * .3);
    background:
        radial-gradient(circle at var(--px) var(--py), rgba(255, 255, 255, .55), transparent 42%),
        var(--purpurina),
        linear-gradient(115deg, transparent 12%, hsl(0 100% 68%) 22%, hsl(42 100% 62%) 31%, hsl(100 85% 60%) 40%, hsl(180 100% 60%) 49%, hsl(240 100% 72%) 58%, hsl(300 100% 70%) 67%, transparent 78%);
    background-size: 100% 100%, 22cqw 22cqw, 320% 320%;
    background-position: center, center, var(--px) var(--py);
}
/* Sin tocarla, la holográfica se mueve sola despacio (si se ve en pantalla) */
.cromo.en-pantalla:not(.is-activo)[data-rareza="epica"] .cromo-holo,
.cromo.en-pantalla:not(.is-activo)[data-rareza="legendaria"] .cromo-holo { animation: cromo-holo-deriva 7s ease-in-out infinite alternate; }
@keyframes cromo-holo-deriva {
    from { background-position: center, center, 15% 20%; }
    to { background-position: center, center, 85% 80%; }
}
.cromo.en-pantalla:not(.is-activo)[data-rareza="epica"] .cromo-holo { animation-name: cromo-holo-deriva-epica; }
@keyframes cromo-holo-deriva-epica {
    from { background-position: center, 10% 20%; }
    to { background-position: center, 90% 80%; }
}

/* Legendaria: marco dorado que gira */
.cromo[data-rareza="legendaria"] .cromo-anverso::after {
    content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
    border-radius: inherit; padding: 1.6cqw;
    background: conic-gradient(from var(--ang), #FFF7D9, #E3A72F, #8C5E0E, #F4CF7A, #FFFDF0, #C98A1C, #FFF7D9);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: cromo-oro 5s linear infinite paused;
}
.cromo.en-pantalla[data-rareza="legendaria"] .cromo-anverso::after { animation-play-state: running; }
@keyframes cromo-oro { to { --ang: 360deg; } }
.cromo[data-rareza="legendaria"]::after { background: rgba(160, 110, 10, .55); }

/* Legendaria: chispas doradas que suben */
.cromo-particulas { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.cromo-particulas i {
    position: absolute; bottom: -5%; left: calc(6% + var(--i) * 10.6%);
    width: 3cqw; height: 3cqw;
    background: radial-gradient(circle, #FFFBEA 0 22%, #F4CF7A 34%, transparent 70%);
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
    animation: cromo-chispa 4.6s ease-in infinite paused;
    animation-delay: calc(var(--i) * -.51s);
}
.cromo-particulas i:nth-child(3n) { width: 2cqw; height: 2cqw; animation-duration: 5.8s; }
.cromo-particulas i:nth-child(3n+1) { width: 3.8cqw; height: 3.8cqw; }
.cromo.en-pantalla .cromo-particulas i { animation-play-state: running; }
@keyframes cromo-chispa {
    0% { transform: translateY(0) scale(.3) rotate(0deg); opacity: 0; }
    15% { opacity: 1; }
    100% { transform: translateY(-135cqw) scale(1) rotate(200deg); opacity: 0; }
}

/* ── Reverso: diseño común de la colección ───────────── */
.cromo-reverso { background: #1C1A36; color: #F4CF7A; }
.reverso-diseno {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw;
    background:
        radial-gradient(circle at 50% 40%, rgba(244, 207, 122, .24), transparent 55%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 0L24 12L12 24L0 12Z' fill='none' stroke='%23E3A72F' stroke-opacity='.2'/%3E%3Ccircle cx='12' cy='12' r='1.2' fill='%23E3A72F' fill-opacity='.35'/%3E%3C/svg%3E") center / 13cqw 13cqw,
        linear-gradient(160deg, #3B3570, #1C1A36 72%);
    border-radius: inherit;
}
/* Marco dorado doble, con las esquinas redondeadas como el anverso */
.reverso-diseno::before, .reverso-diseno::after { content: ''; position: absolute; pointer-events: none; }
.reverso-diseno::before { inset: 2.6cqw; border: .55cqw solid #E3A72F; border-radius: 3.6cqw; }
.reverso-diseno::after { inset: 4.2cqw; border: .3cqw solid rgba(227, 167, 47, .55); border-radius: 2.4cqw; }
.reverso-emblema { width: 46cqw; height: auto; filter: drop-shadow(0 0 3cqw rgba(244, 207, 122, .4)); }
.reverso-nombre { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 10cqw; line-height: .98; text-align: center; color: #FFF3D0; letter-spacing: -.01em; }
.reverso-lema { font: 700 3cqw/1 'Inter', system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: rgba(244, 207, 122, .85); }

/* Ficha (reverso de un cromo ampliado) */
.cromo-ficha {
    position: absolute; inset: 5cqw; z-index: 1; overflow: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: 2.4cqw;
    padding: 5.5cqw 6cqw; border-radius: 3.4cqw;
    background: rgba(255, 251, 242, .97); color: #17130F; cursor: auto;
    box-shadow: 0 0 0 .5cqw rgba(227, 167, 47, .6), 0 2cqw 5cqw rgba(0, 0, 0, .4);
    font: 400 max(11.5px, 3.75cqw)/1.45 'Inter', system-ui, sans-serif;
}
.ficha-numero { font-weight: 800; font-size: .78em; letter-spacing: .12em; text-transform: uppercase; color: #9A6B12; }
.ficha-titulo { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.85em; line-height: 1.05; letter-spacing: -.015em; }
.ficha-autor { color: #6F6357; font-weight: 600; }
.ficha-datos { display: grid; gap: 1.4cqw; margin: .4em 0 0; }
.ficha-datos div { display: grid; grid-template-columns: 6.4em 1fr; gap: .6em; }
.ficha-datos dt { font-weight: 700; color: #4A4038; }
.ficha-datos dd { margin: 0; }
.ficha-curioso { padding: 3cqw 3.6cqw; border-radius: 2.6cqw; background: #FFF1CC; color: #4F3500; }
.ficha-curioso strong { color: #8A5A00; }
.ficha-enlace { color: #B4531A; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(180, 83, 26, .4); text-underline-offset: 3px; }
.ficha-credito { font-size: .76em; color: #8A7E70; line-height: 1.35; }
.ficha-credito a { color: inherit; }

/* ── Cromo ampliado ──────────────────────────────────── */
.cromo-dialogo {
    margin: auto; padding: 20px 14px; border: 0; background: transparent; color: inherit;
    max-width: none; max-height: none; overflow: visible;
}
.cromo-dialogo[open] { display: flex; flex-direction: column; align-items: center; gap: 18px; animation: cromo-dialogo-entra .3s ease-out both; }
.cromo-dialogo.is-cerrando { animation: cromo-dialogo-sale .22s ease-in forwards; }
.cromo-dialogo::backdrop { background: radial-gradient(circle at 50% 40%, rgba(59, 53, 112, .82), rgba(10, 8, 25, .94)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cromo-dialogo .cromo { --ancho: min(370px, 84vw, calc((100vh - 150px) * 5 / 7)); animation: cromo-amplia .6s cubic-bezier(.34, 1.4, .64, 1) both; }
.cromo-dialogo-botones { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
@keyframes cromo-amplia { from { opacity: 0; transform: scale(.55) translateY(40px) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes cromo-dialogo-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes cromo-dialogo-sale { to { opacity: 0; transform: scale(.96); } }

/* =========================================================
   FAMILIAS
   ========================================================= */

/* 1 · TIERRA (Antigüedad): ocres y terracota, piedra tallada rugosa, polvo */
.cromo[data-estilo="tierra"] {
    --marco:
        radial-gradient(ellipse at 28% 18%, rgba(255, 228, 175, .4), transparent 55%),
        var(--ruido) 0 0 / 45cqw,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.03' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .14 0 0 0 0 .05 0 0 0 1.2 -.5'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23p)'/%3E%3C/svg%3E") 0 0 / 90cqw,
        linear-gradient(160deg, #DDA66C, #B86E3C 55%, #7C3F1F);
    --relieve: inset 0 0 0 1cqw rgba(92, 46, 20, .45), inset 1.8cqw 1.8cqw 3cqw rgba(255, 232, 195, .3), inset -1.8cqw -1.8cqw 3.4cqw rgba(55, 22, 8, .55);
    --texto: #FFF3DF; --texto-sombra: 0 .3cqw .6cqw rgba(60, 25, 8, .6);
    --placa: linear-gradient(180deg, #F3DFBC, #D8AF7A); --placa-texto: #4A2410;
    --placa-sombra: inset 0 .5cqw .8cqw rgba(255, 255, 255, .6), inset 0 -.8cqw 1.2cqw rgba(120, 60, 20, .4), 0 .8cqw 1.6cqw rgba(60, 25, 8, .45);
    --borde-ventana: #5C2E14; --fondo-ventana: #3A2010;
    --insignia: linear-gradient(180deg, #8A4520, #5E2C12); --insignia-texto: #FFE6BF;
    --fondo-picto: radial-gradient(circle at 50% 40%, #E7B27A, #8A4A24); --color-picto: #FFF1DC;
}
.cromo[data-estilo="tierra"] .cromo-ambiente i {
    width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: rgba(255, 236, 200, .7);
    left: calc(10% + var(--n, 0) * 1%); top: 100%;
    animation: tierra-polvo 9s linear infinite paused;
}
.cromo[data-estilo="tierra"] .cromo-ambiente i:nth-child(1) { left: 8%; animation-delay: -1s; }
.cromo[data-estilo="tierra"] .cromo-ambiente i:nth-child(2) { left: 26%; animation-delay: -4s; width: .9cqw; height: .9cqw; }
.cromo[data-estilo="tierra"] .cromo-ambiente i:nth-child(3) { left: 47%; animation-delay: -6.5s; }
.cromo[data-estilo="tierra"] .cromo-ambiente i:nth-child(4) { left: 66%; animation-delay: -2.5s; width: .8cqw; height: .8cqw; }
.cromo[data-estilo="tierra"] .cromo-ambiente i:nth-child(5) { left: 84%; animation-delay: -7.8s; }
.cromo[data-estilo="tierra"] .cromo-ambiente i:nth-child(6) { left: 93%; animation-delay: -5.2s; width: 1cqw; height: 1cqw; }
@keyframes tierra-polvo {
    0% { transform: translate(0, 0); opacity: 0; }
    10% { opacity: .9; }
    50% { transform: translate(4cqw, -70cqw); }
    100% { transform: translate(-3cqw, -145cqw); opacity: 0; }
}

/* 2 · VIDRIERA (Medieval): cobalto, rubí y pan de oro; arco ojival emplomado; destellos de color */
.cromo[data-estilo="vidriera"] {
    --marco:
        linear-gradient(180deg, rgba(255, 255, 255, .18), transparent 40%, rgba(0, 0, 0, .25)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cg stroke='%2310101A' stroke-width='3' stroke-linejoin='round'%3E%3Cpath d='M0 0H38L30 30L0 22Z' fill='%231F3FA8'/%3E%3Cpath d='M38 0H72L66 26L30 30Z' fill='%23B3122E'/%3E%3Cpath d='M72 0H100V22L66 26Z' fill='%23D9A520'/%3E%3Cpath d='M0 22L30 30L34 64L0 58Z' fill='%23B3122E'/%3E%3Cpath d='M30 30L66 26L72 62L34 64Z' fill='%23163C99'/%3E%3Cpath d='M66 26L100 22V58L72 62Z' fill='%23187A5A'/%3E%3Cpath d='M0 58L34 64L38 100H0Z' fill='%23D9A520'/%3E%3Cpath d='M34 64L72 62V100H38Z' fill='%231F3FA8'/%3E%3Cpath d='M72 62L100 58V100H72Z' fill='%23B3122E'/%3E%3C/g%3E%3Cg fill='white' opacity='.2'%3E%3Ccircle cx='18' cy='12' r='5'/%3E%3Ccircle cx='52' cy='44' r='7'/%3E%3Ccircle cx='86' cy='80' r='5'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 34cqw 34cqw,
        #1F3FA8;
    --relieve: inset 0 0 0 1.4cqw #10101A, inset 0 0 0 2cqw #C9952B;
    --texto: #FFFFFF; --texto-sombra: 0 .3cqw .8cqw rgba(0, 0, 20, .9);
    --placa: linear-gradient(180deg, #FBE7A1, #D9A93A 60%, #B9851F); --placa-texto: #3A1A00;
    --placa-sombra: 0 0 0 .6cqw #10101A, 0 .8cqw 1.8cqw rgba(0, 0, 0, .45);
    --borde-ventana: #10101A; --fondo-ventana: #0C1640;
    --insignia: linear-gradient(180deg, #2747B8, #142C80); --insignia-texto: #FBE7A1;
    --fondo-picto: radial-gradient(circle at 50% 35%, #3B5CD0, #0C1640); --color-picto: #FBE7A1;
}
.cromo[data-estilo="vidriera"] { --autor-fondo: rgba(16, 16, 26, .72); }
/* Ventana en arco ojival con borde de pan de oro */
.cromo[data-estilo="vidriera"] .cromo-ventana {
    --arco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V36C0 15 22 4 50 0C78 4 100 15 100 36V100Z'/%3E%3C/svg%3E");
    border-radius: 0; padding: 1.3cqw; box-shadow: none;
    background: linear-gradient(180deg, #FBE7A1, #C9952B);
    -webkit-mask: var(--arco) center / 100% 100% no-repeat; mask: var(--arco) center / 100% 100% no-repeat;
}
.cromo[data-estilo="vidriera"] .cromo-ventana img,
.cromo[data-estilo="vidriera"] .cromo-ventana.completa::before {
    -webkit-mask: var(--arco) center / 100% 100% no-repeat; mask: var(--arco) center / 100% 100% no-repeat;
}
.cromo[data-estilo="vidriera"] .cromo-ventana.completa::before { inset: 1.3cqw; }
.cromo[data-estilo="vidriera"] .cromo-ventana.completa img { background: #0C1640; }
.cromo[data-estilo="vidriera"] .cromo-ventana.sin-imagen { padding: 0; background: var(--fondo-picto); }
/* Luz de colores que entra por los cristales */
.cromo[data-estilo="vidriera"] .cromo-ambiente i {
    width: 60cqw; height: 60cqw; border-radius: 50%; filter: blur(8cqw); mix-blend-mode: screen; opacity: .55;
    animation: vidriera-luz 11s ease-in-out infinite alternate paused;
}
.cromo[data-estilo="vidriera"] .cromo-ambiente i:nth-child(1) { background: #FF3355; left: -20cqw; top: -10cqw; }
.cromo[data-estilo="vidriera"] .cromo-ambiente i:nth-child(2) { background: #3A7BFF; right: -25cqw; top: 40cqw; animation-delay: -4s; }
.cromo[data-estilo="vidriera"] .cromo-ambiente i:nth-child(3) { background: #FFD24A; left: 10cqw; bottom: -30cqw; animation-delay: -7s; }
.cromo[data-estilo="vidriera"] .cromo-ambiente i:nth-child(n+4) { display: none; }
@keyframes vidriera-luz { 0% { transform: translate(0, 0) scale(.8); } 100% { transform: translate(30cqw, 25cqw) scale(1.15); } }

/* 3 · MÁRMOL (Renacimiento): mármol veteado, oro y ultramar suave, laurel */
.cromo[data-estilo="marmol"] {
    --marco:
        radial-gradient(ellipse at 30% 15%, rgba(255, 255, 255, .9), transparent 60%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='turbulence' baseFrequency='.005 .018' numOctaves='5' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .48 0 0 0 0 .58 -6 0 0 0 1.05'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23m)'/%3E%3C/svg%3E") 0 0 / 120cqw,
        linear-gradient(160deg, #FFFFFF, #ECE8E1 55%, #DCD7CF);
    --relieve: inset 0 0 0 2.2cqw rgba(255, 255, 255, 0), inset 0 0 0 2.5cqw #C9A24A, inset 0 0 0 3.4cqw rgba(255, 255, 255, 0), inset 0 0 0 3.6cqw rgba(201, 162, 74, .55), inset 0 0 6cqw rgba(120, 110, 95, .25);
    --texto: #263866; --texto-sombra: 0 .2cqw .4cqw rgba(255, 255, 255, .8);
    --placa: linear-gradient(180deg, #3F5DAA, #2A3F7E); --placa-texto: #F8E2A6;
    --placa-sombra: 0 0 0 .5cqw #C9A24A, 0 .8cqw 1.8cqw rgba(38, 56, 102, .35);
    --borde-ventana: #C9A24A; --fondo-ventana: #E9E4DA;
    --insignia: linear-gradient(180deg, #D9B55E, #A97F28); --insignia-texto: #1E2D55;
    --fondo-picto: radial-gradient(circle at 50% 40%, #FFFFFF, #CFC8BB); --color-picto: #2A3F7E;
}
.cromo[data-estilo="marmol"] .cromo-contenido { padding-top: 5.4cqw; }
/* Ramas de laurel junto al título */
.cromo[data-estilo="marmol"] .cromo-ambiente i:nth-child(1),
.cromo[data-estilo="marmol"] .cromo-ambiente i:nth-child(2) {
    top: 3.4cqw; width: 14cqw; height: 18cqw; z-index: 2;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 52'%3E%3Cpath d='M30 50C14 42 8 26 14 4' fill='none' stroke='%23B38A2E' stroke-width='2' stroke-linecap='round'/%3E%3Cg fill='%23C9A24A'%3E%3Cpath d='M14 40c-6 1-11-2-12-6 6-1 10 1 12 6zM12 30c-6-1-9-5-9-9 6 1 9 4 9 9zM13 20c-5-2-7-6-6-10 5 2 7 6 6 10zM24 44c1-6 5-9 10-9-1 5-4 9-10 9zM19 34c2-6 6-8 11-7-2 5-6 8-11 7zM17 23c2-5 6-7 10-6-2 5-5 7-10 6z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.cromo[data-estilo="marmol"] .cromo-ambiente i:nth-child(1) { left: 1.4cqw; }
.cromo[data-estilo="marmol"] .cromo-ambiente i:nth-child(2) { right: 1.4cqw; transform: scaleX(-1); }
.cromo[data-estilo="marmol"] .cromo-ambiente { overflow: visible; }
/* Destello dorado que cruza de vez en cuando */
.cromo[data-estilo="marmol"] .cromo-ambiente i:nth-child(3) {
    inset: -20% auto -20% -60%; width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 236, 170, .75), transparent);
    transform: skewX(-20deg); mix-blend-mode: overlay;
    animation: marmol-destello 6s ease-in-out infinite paused;
}
.cromo[data-estilo="marmol"] .cromo-ambiente i:nth-child(n+4) { display: none; }
@keyframes marmol-destello { 0%, 60% { left: -60%; } 100% { left: 130%; } }

/* 4 · CLAROSCURO (Barroco): negro, terciopelo granate y oro; volutas; foco sobre la obra */
.cromo[data-estilo="claroscuro"] {
    --marco:
        var(--ruido) 0 0 / 40cqw,
        radial-gradient(ellipse at 50% 28%, #6A1424, #320812 52%, #0B0306);
    --relieve: inset 0 0 0 1.2cqw #0B0306, inset 0 0 0 1.6cqw #B88A2E, inset 0 0 5cqw rgba(0, 0, 0, .7);
    --texto: #F1D9A6; --texto-sombra: 0 .3cqw .8cqw #000;
    --placa: linear-gradient(180deg, #1B0A0E, #0B0306); --placa-texto: #F4CF7A;
    --placa-sombra: 0 0 0 .5cqw #B88A2E, 0 1cqw 2cqw rgba(0, 0, 0, .7);
    --borde-ventana: #B88A2E; --fondo-ventana: #050203;
    --insignia: linear-gradient(180deg, #7A1A2B, #3E0A14); --insignia-texto: #F4CF7A;
    --fondo-picto: radial-gradient(circle at 50% 40%, #5A1220, #0B0306); --color-picto: #F4CF7A;
}
/* Volutas doradas en las esquinas */
.cromo[data-estilo="claroscuro"] .cromo-ambiente i:nth-child(-n+4) {
    width: 16cqw; height: 16cqw;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M4 40C4 18 18 4 40 4C26 8 18 16 18 28c0 8 6 12 12 12s9-5 7-9c-2-3-7-2-7 1' fill='none' stroke='%23D4A43A' stroke-width='2.6' stroke-linecap='round'/%3E%3Ccircle cx='40' cy='4' r='2.4' fill='%23D4A43A'/%3E%3C/svg%3E") center / contain no-repeat;
    filter: drop-shadow(0 0 .8cqw rgba(212, 164, 58, .5));
}
.cromo[data-estilo="claroscuro"] .cromo-ambiente i:nth-child(1) { top: 1.5cqw; left: 1.5cqw; }
.cromo[data-estilo="claroscuro"] .cromo-ambiente i:nth-child(2) { top: 1.5cqw; right: 1.5cqw; transform: scaleX(-1); }
.cromo[data-estilo="claroscuro"] .cromo-ambiente i:nth-child(3) { bottom: 1.5cqw; left: 1.5cqw; transform: scaleY(-1); }
.cromo[data-estilo="claroscuro"] .cromo-ambiente i:nth-child(4) { bottom: 1.5cqw; right: 1.5cqw; transform: scale(-1); }
.cromo[data-estilo="claroscuro"] .cromo-ambiente i:nth-child(n+5) { display: none; }
/* Foco de luz dramática que sigue al puntero */
.cromo[data-estilo="claroscuro"] .cromo-ventana::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at var(--px) calc(var(--py) - 10%), transparent 24%, rgba(0, 0, 0, .3) 58%, rgba(0, 0, 0, .62) 95%);
}

/* 5 · TORMENTA (Neoclasicismo y Romanticismo): grises azulados, plata, nubes y relámpagos */
.cromo[data-estilo="tormenta"] {
    --nubes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008 .016' numOctaves='5' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .95 0 0 0 0 1 1.7 0 0 0 -.62'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23c)'/%3E%3C/svg%3E");
    --marco: linear-gradient(170deg, #5B6A86, #3A4660 45%, #1E2638);
    --relieve: inset 0 0 0 1.1cqw #C5CEDB, inset 0 0 0 1.5cqw #2A3346, inset 0 0 6cqw rgba(0, 0, 0, .5);
    --texto: #F2F6FC; --texto-sombra: 0 .3cqw .8cqw rgba(0, 0, 0, .7);
    --placa: linear-gradient(180deg, #F7F9FC, #BFC9D8); --placa-texto: #1D283C;
    --placa-sombra: inset 0 .4cqw .6cqw #fff, 0 .8cqw 2cqw rgba(0, 0, 0, .45);
    --borde-ventana: #D5DCE6; --fondo-ventana: #1E2638;
    --insignia: linear-gradient(180deg, #8794AB, #4C5872); --insignia-texto: #FFFFFF;
    --fondo-picto: radial-gradient(circle at 50% 30%, #7D8BA6, #1E2638); --color-picto: #F2F6FC;
}
.cromo[data-estilo="tormenta"] .cromo-ambiente i:nth-child(1),
.cromo[data-estilo="tormenta"] .cromo-ambiente i:nth-child(2) {
    inset: 0; background: var(--nubes) 0 0 / 130cqw;
    animation: tormenta-nubes 26s linear infinite paused;
}
.cromo[data-estilo="tormenta"] .cromo-ambiente i:nth-child(2) { background-size: 90cqw; opacity: .6; animation-duration: 15s; animation-direction: reverse; }
@keyframes tormenta-nubes { to { background-position: 130cqw 0; } }
/* Relámpago al pasar el ratón */
.cromo[data-estilo="tormenta"] .cromo-ambiente i:nth-child(3) {
    top: 8cqw; right: 10cqw; width: 18cqw; height: 40cqw; opacity: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 44'%3E%3Cpath d='M13 0L2 22h7L5 44l13-26h-7l5-18z' fill='%23FFFDE8'/%3E%3C/svg%3E") center / contain no-repeat;
    filter: drop-shadow(0 0 2cqw #fff) drop-shadow(0 0 5cqw #B8D4FF);
}
.cromo[data-estilo="tormenta"] .cromo-ambiente i:nth-child(4) { inset: 0; background: #fff; opacity: 0; mix-blend-mode: overlay; }
.cromo[data-estilo="tormenta"].is-activo .cromo-ambiente i:nth-child(3) { animation: tormenta-rayo 3.2s ease-out infinite; }
.cromo[data-estilo="tormenta"].is-activo .cromo-ambiente i:nth-child(4) { animation: tormenta-flash 3.2s ease-out infinite; }
.cromo[data-estilo="tormenta"] .cromo-ambiente i:nth-child(n+5) { display: none; }
@keyframes tormenta-rayo { 0%, 4%, 10% { opacity: 1; } 2%, 7%, 14%, 100% { opacity: 0; } }
@keyframes tormenta-flash { 0%, 4% { opacity: .8; } 2%, 9%, 100% { opacity: 0; } }

/* 6 · LUZ (Impresionismo): pasteles, lila, verde agua y amarillo sol; pinceladas; destellos suaves */
.cromo[data-estilo="luz"] {
    --marco:
        radial-gradient(circle at 78% 12%, rgba(255, 236, 140, .85), transparent 30%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg opacity='.85'%3E%3Crect x='8' y='10' width='34' height='11' rx='5.5' transform='rotate(-18 25 15)' fill='%23C9B6E4'/%3E%3Crect x='60' y='6' width='38' height='12' rx='6' transform='rotate(12 79 12)' fill='%239ED8D0'/%3E%3Crect x='20' y='44' width='40' height='12' rx='6' transform='rotate(24 40 50)' fill='%23F6DC7A'/%3E%3Crect x='72' y='48' width='34' height='11' rx='5.5' transform='rotate(-30 89 53)' fill='%23F3C3D2'/%3E%3Crect x='4' y='82' width='36' height='12' rx='6' transform='rotate(8 22 88)' fill='%23B9D8F2'/%3E%3Crect x='54' y='88' width='40' height='12' rx='6' transform='rotate(-14 74 94)' fill='%23C9B6E4'/%3E%3Crect x='92' y='96' width='30' height='10' rx='5' transform='rotate(35 107 101)' fill='%239ED8D0'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 40cqw 40cqw,
        linear-gradient(160deg, #FFF8E8, #EFE6F7 50%, #E2F3EF);
    --relieve: inset 0 0 0 1cqw rgba(255, 255, 255, .9), inset 0 0 5cqw rgba(160, 140, 200, .35);
    --texto: #4A3D72; --texto-sombra: 0 .2cqw .5cqw rgba(255, 255, 255, .9); --autor-fondo: rgba(255, 255, 255, .6);
    --placa: rgba(255, 255, 255, .88); --placa-texto: #4A3D72;
    --placa-sombra: 0 0 0 .5cqw #C9B6E4, 0 .8cqw 2cqw rgba(110, 90, 160, .25);
    --borde-ventana: #FFFFFF; --fondo-ventana: #D9E6F2;
    --insignia: linear-gradient(180deg, #F7DD7E, #E7B93E); --insignia-texto: #4A3D72;
    --fondo-picto: radial-gradient(circle at 50% 35%, #FFF6D6, #C9B6E4); --color-picto: #4A3D72;
}
.cromo[data-estilo="luz"] .cromo-ambiente i {
    width: 5cqw; height: 5cqw; opacity: 0;
    background: radial-gradient(circle, #fff 0 18%, rgba(255, 246, 200, .8) 30%, transparent 70%);
    animation: luz-destello 4s ease-in-out infinite paused;
}
.cromo[data-estilo="luz"] .cromo-ambiente i:nth-child(1) { left: 7%; top: 12%; }
.cromo[data-estilo="luz"] .cromo-ambiente i:nth-child(2) { right: 6%; top: 30%; animation-delay: -1.3s; }
.cromo[data-estilo="luz"] .cromo-ambiente i:nth-child(3) { left: 5%; top: 60%; animation-delay: -2.4s; }
.cromo[data-estilo="luz"] .cromo-ambiente i:nth-child(4) { right: 9%; top: 78%; animation-delay: -3.1s; }
.cromo[data-estilo="luz"] .cromo-ambiente i:nth-child(5) { left: 46%; top: 3%; animation-delay: -.6s; }
.cromo[data-estilo="luz"] .cromo-ambiente i:nth-child(6) { left: 40%; bottom: 2%; animation-delay: -2s; }
@keyframes luz-destello { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.2); } }

/* 7 · FUEGO (Postimpresionismo, Fauvismo y Expresionismo): colores saturados y remolinos */
.cromo[data-estilo="fuego"] {
    --remolinos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cg fill='none' stroke-linecap='round' stroke-width='6'%3E%3Cpath d='M12 30a18 18 0 1 1 18 18a11 11 0 1 1-11-11a5 5 0 1 1 5 5' stroke='%23FF8A1F'/%3E%3Cpath d='M59 72a16 16 0 1 0 16-16a10 10 0 1 0-10 10a4 4 0 1 0 4-4' stroke='%23FFC93C'/%3E%3Cpath d='M0 88c15-12 30-12 45 0' stroke='%23E3261F'/%3E%3Cpath d='M55 18c12-10 30-10 45 2' stroke='%23E3261F'/%3E%3Cpath d='M58 44c8 6 16 6 24 0' stroke='%23FF8A1F' stroke-width='4'/%3E%3Cpath d='M8 62c6 4 12 4 18 0' stroke='%235F8BFF' stroke-width='4'/%3E%3C/g%3E%3C/svg%3E");
    --marco: radial-gradient(ellipse at 50% 0%, #2A3FA8, #14246B 60%, #0B1440);
    --relieve: inset 0 0 0 1.2cqw #FF8A1F, inset 0 0 0 1.7cqw #14246B, inset 0 0 6cqw rgba(0, 0, 0, .45);
    --texto: #FFF0D2; --texto-sombra: 0 .3cqw .8cqw rgba(10, 10, 50, .9); --autor-fondo: rgba(11, 20, 64, .78);
    --placa: linear-gradient(180deg, #FFA43F, #E8441E); --placa-texto: #12164A;
    --placa-sombra: 0 0 0 .5cqw #FFC93C, 0 .9cqw 2cqw rgba(0, 0, 0, .45);
    --borde-ventana: #FFC93C; --fondo-ventana: #0B1440;
    --insignia: linear-gradient(180deg, #F2512A, #B5200F); --insignia-texto: #FFF0D2;
    --fondo-picto: radial-gradient(circle at 50% 35%, #FF9A3C, #14246B); --color-picto: #FFF0D2;
}
.cromo[data-estilo="fuego"] .cromo-ambiente i:nth-child(1) {
    inset: -25%; background: var(--remolinos) 0 0 / 34cqw 34cqw; opacity: .7;
    animation: fuego-remolino 30s linear infinite paused;
}
.cromo[data-estilo="fuego"] .cromo-ambiente i:nth-child(2) {
    inset: -25%; background: var(--remolinos) 17cqw 17cqw / 24cqw 24cqw; opacity: .3;
    animation: fuego-remolino 22s linear infinite reverse paused;
}
.cromo[data-estilo="fuego"] .cromo-ambiente i:nth-child(n+3) { display: none; }
@keyframes fuego-remolino { from { transform: rotate(0deg) translateX(0); } to { transform: rotate(360deg) translateX(0); } }

/* 8 · GEOMETRÍA (Cubismo y Abstracción): primarios sobre gris y ocre; marco facetado que se fragmenta */
.cromo[data-estilo="geometria"] {
    --marco: linear-gradient(160deg, #D7D1C4, #B9AE95 55%, #A58F62);
    --relieve: inset 0 0 0 1.2cqw #141414;
    --texto: #141414;
    --placa: #FFFFFF; --placa-texto: #141414;
    --placa-sombra: 0 0 0 .9cqw #141414, 1.2cqw 1.2cqw 0 .9cqw #D7261E;
    --borde-ventana: #141414; --fondo-ventana: #F2EEE4;
    --insignia: #1C4FA0; --insignia-texto: #FFFFFF;
    --fondo-picto: linear-gradient(135deg, #F2EEE4 50%, #E8E0CC 50%); --color-picto: #141414;
}
.cromo[data-estilo="geometria"] .cromo-titulo { border-radius: 0; }
.cromo[data-estilo="geometria"] .cromo-insignia { border-radius: 0; box-shadow: 0 0 0 .6cqw #141414; }
.cromo[data-estilo="geometria"] .cromo-numero { background: #fff; padding: .8cqw 1.6cqw; box-shadow: 0 0 0 .6cqw #141414; }
.cromo[data-estilo="geometria"] { --autor-fondo: #fff; }
.cromo[data-estilo="geometria"] .cromo-ventana { border-radius: 0; clip-path: polygon(2% 0, 100% 2.5%, 98% 100%, 0 97.5%); box-shadow: none; background: #141414; padding: 1cqw; }
.cromo[data-estilo="geometria"] .cromo-ventana img { clip-path: polygon(1.5% 0, 100% 2%, 98.5% 100%, 0 98%); }
.cromo[data-estilo="geometria"] .cromo-ambiente i {
    transition: transform .35s ease-out;
    transform: translate(calc(var(--mx) * var(--k, 3) * 1cqw), calc(var(--my) * var(--k, 3) * 1cqw));
}
.cromo[data-estilo="geometria"] .cromo-ambiente i:nth-child(1) { --k: 4; inset: 0 auto auto 0; width: 46cqw; height: 34cqw; background: #D7261E; clip-path: polygon(0 0, 100% 0, 40% 100%, 0 70%); }
.cromo[data-estilo="geometria"] .cromo-ambiente i:nth-child(2) { --k: -3; inset: 0 0 auto auto; width: 40cqw; height: 44cqw; background: #F4C21E; clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 45%); }
.cromo[data-estilo="geometria"] .cromo-ambiente i:nth-child(3) { --k: 5; inset: auto auto 0 0; width: 38cqw; height: 46cqw; background: #1C4FA0; clip-path: polygon(0 20%, 70% 100%, 0 100%); }
.cromo[data-estilo="geometria"] .cromo-ambiente i:nth-child(4) { --k: -5; inset: auto 0 0 auto; width: 44cqw; height: 30cqw; background: #141414; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.cromo[data-estilo="geometria"] .cromo-ambiente i:nth-child(5) { --k: 2; top: 44cqw; left: -4cqw; width: 18cqw; height: 18cqw; background: #F2EEE4; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.cromo[data-estilo="geometria"] .cromo-ambiente i:nth-child(6) { --k: -2; top: 70cqw; right: -3cqw; width: 16cqw; height: 16cqw; border-radius: 50%; background: #D7261E; }

/* 9 · SUEÑO (Surrealismo): violetas, rosas y azul cielo; marco que ondula; cosas flotando */
.cromo[data-estilo="sueno"] {
    --marco: linear-gradient(165deg, #8E6BFF, #E98BD0 48%, #8FD3FF);
    --relieve: inset 0 0 0 1cqw rgba(255, 255, 255, .55), inset 0 0 7cqw rgba(80, 40, 160, .35);
    --texto: #FFFFFF; --texto-sombra: 0 .3cqw .8cqw rgba(70, 30, 140, .7); --autor-fondo: rgba(75, 42, 140, .35);
    --placa: rgba(255, 255, 255, .82); --placa-texto: #4B2A8C;
    --placa-sombra: 0 .8cqw 2.4cqw rgba(80, 40, 160, .35);
    --borde-ventana: rgba(255, 255, 255, .9); --fondo-ventana: #3B2A70;
    --insignia: linear-gradient(180deg, #A07CFF, #6A44D8); --insignia-texto: #FFFFFF;
    --fondo-picto: radial-gradient(circle at 50% 30%, #C9B6FF, #6A44D8 70%); --color-picto: #FFFFFF;
}
.cromo[data-estilo="sueno"] .cromo-titulo { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.cromo[data-estilo="sueno"] .cromo-ventana { animation: sueno-onda 9s ease-in-out infinite alternate paused; }
@keyframes sueno-onda {
    0% { border-radius: 6cqw 2.4cqw 7cqw 3cqw / 3cqw 6cqw 2.4cqw 7cqw; }
    50% { border-radius: 2.4cqw 7cqw 3cqw 6cqw / 7cqw 2.4cqw 6cqw 3cqw; }
    100% { border-radius: 7cqw 4cqw 2.4cqw 6cqw / 4cqw 7cqw 5cqw 2.4cqw; }
}
.cromo[data-estilo="sueno"] .cromo-ambiente i:nth-child(1),
.cromo[data-estilo="sueno"] .cromo-ambiente i:nth-child(2),
.cromo[data-estilo="sueno"] .cromo-ambiente i:nth-child(3) {
    width: 70cqw; height: 70cqw; border-radius: 50%; filter: blur(9cqw); opacity: .75;
    animation: sueno-mancha 14s ease-in-out infinite alternate paused;
}
.cromo[data-estilo="sueno"] .cromo-ambiente i:nth-child(1) { background: #FF9AD5; left: -30cqw; top: -20cqw; }
.cromo[data-estilo="sueno"] .cromo-ambiente i:nth-child(2) { background: #7FD8FF; right: -30cqw; top: 50cqw; animation-delay: -5s; }
.cromo[data-estilo="sueno"] .cromo-ambiente i:nth-child(3) { background: #B18CFF; left: 0; bottom: -40cqw; animation-delay: -9s; }
@keyframes sueno-mancha { from { transform: translate(0, 0) scale(.9); } to { transform: translate(20cqw, -15cqw) scale(1.2); } }
/* Una nube, una llave y una pluma que flotan */
.cromo[data-estilo="sueno"] .cromo-ambiente i:nth-child(n+4) {
    z-index: 2; width: 11cqw; height: 11cqw; filter: drop-shadow(0 .6cqw .8cqw rgba(70, 30, 140, .4));
    animation: sueno-flota 6s ease-in-out infinite alternate paused;
}
.cromo[data-estilo="sueno"] .cromo-ambiente i:nth-child(4) { top: 21cqw; left: 2.4cqw; width: 13cqw; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 26'%3E%3Cpath d='M10 24a8 8 0 0 1-1-16 11 11 0 0 1 21-2 8 8 0 0 1 1 18z' fill='white'/%3E%3C/svg%3E") center / contain no-repeat; }
.cromo[data-estilo="sueno"] .cromo-ambiente i:nth-child(5) { top: 92cqw; right: 2cqw; animation-delay: -2s; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23FFE9A8' stroke-width='3.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Cpath d='M17 17l17 17M28 28l-4 4M33 33l-3 3'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.cromo[data-estilo="sueno"] .cromo-ambiente i:nth-child(6) { top: 60cqw; left: 1.6cqw; animation-delay: -4s; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M8 34C14 18 22 8 34 6c-2 12-10 22-26 28z' fill='white' opacity='.92'/%3E%3Cpath d='M8 34L28 12' stroke='%23B18CFF' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; }
@keyframes sueno-flota { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-4cqw) rotate(8deg); } }

/* 10 · POP (Pop Art y Contemporáneo): primarios y fosforitos, puntos Ben-Day, contornos de cómic */
.cromo[data-estilo="pop"] {
    --marco:
        radial-gradient(circle, #FF2E88 28%, transparent 31%) 0 0 / 4.6cqw 4.6cqw,
        radial-gradient(circle, rgba(0, 200, 255, .55) 22%, transparent 25%) 2.3cqw 2.3cqw / 4.6cqw 4.6cqw,
        #FFE600;
    --relieve: inset 0 0 0 1.4cqw #111;
    --texto: #111;
    --placa: #FFFFFF; --placa-texto: #111;
    --placa-sombra: 0 0 0 1cqw #111, 1.4cqw 1.4cqw 0 1cqw #111;
    --borde-ventana: #111; --fondo-ventana: #00C8FF;
    --insignia: #E8112D; --insignia-texto: #FFFFFF;
    --fondo-picto: radial-gradient(circle, #fff 22%, transparent 25%) 0 0 / 5cqw 5cqw, #00C8FF; --color-picto: #111;
}
.cromo[data-estilo="pop"] .cromo-titulo {
    font-family: 'Inter', system-ui, sans-serif; font-weight: 900; font-style: italic; text-transform: uppercase;
    font-size: 5.4cqw; letter-spacing: .01em; transform: rotate(-2deg); border-radius: 1.4cqw;
}
.cromo[data-estilo="pop"] .cromo-ventana { border-radius: 1cqw; box-shadow: 0 0 0 1.2cqw #111, 1.8cqw 1.8cqw 0 1.2cqw #111; }
.cromo[data-estilo="pop"] .cromo-autor { font-weight: 900; text-transform: uppercase; font-size: 3.8cqw; background: #fff; border: .7cqw solid #111; border-radius: 99px; padding: .6cqw 2cqw; align-self: center; max-width: 100%; }
.cromo[data-estilo="pop"] .cromo-insignia { box-shadow: 0 0 0 .7cqw #111; }
.cromo[data-estilo="pop"] .cromo-numero { background: #fff; border: .7cqw solid #111; padding: .8cqw 1.6cqw; border-radius: 1cqw; }
/* Los puntos se mueven y "laten" */
.cromo[data-estilo="pop"] .cromo-ambiente i:nth-child(1) {
    inset: 0; background: radial-gradient(circle, rgba(255, 255, 255, .55) 18%, transparent 21%) 0 0 / 4.6cqw 4.6cqw;
    animation: pop-puntos 1.8s steps(2) infinite paused;
}
.cromo[data-estilo="pop"] .cromo-ambiente i:nth-child(2) {
    width: 30cqw; height: 30cqw; right: -8cqw; top: 60cqw;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l2 4.4 4.5-2-1.1 4.8 4.8 1.2-3.8 3.1 3.1 3.9-4.9.2.3 4.9-4.3-2.4-2.6 4.2-1.7-4.6-4.7 1.4 1.5-4.7L.6 14.1l4-2.8-2.9-4 4.9-.4-.2-4.9 4.2 2.6z' fill='%23FF2E88' stroke='%23111' stroke-width='.8'/%3E%3C/svg%3E") center / contain no-repeat;
    animation: pop-estallido 2.4s ease-in-out infinite paused;
}
.cromo[data-estilo="pop"] .cromo-ambiente i:nth-child(n+3) { display: none; }
@keyframes pop-puntos { to { background-position: 2.3cqw 2.3cqw; } }
@keyframes pop-estallido { 0%, 100% { transform: scale(.9) rotate(0deg); } 50% { transform: scale(1.08) rotate(12deg); } }

/* ── Las animaciones solo corren con el cromo en pantalla ── */
.cromo.en-pantalla .cromo-ambiente i,
.cromo.en-pantalla .cromo-ventana { animation-play-state: running; }

/* ── Estilos añadidos con las 16 épocas ────────────────── */

/* Papiro (Antiguo Egipto): lapislázuli y oro, como el ajuar de un faraón */
.cromo[data-estilo="papiro"] {
    --marco:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0 9cqw, rgba(244, 207, 122, .16) 9cqw 9.6cqw),
        radial-gradient(ellipse at 50% 0, rgba(255, 220, 140, .35), transparent 60%),
        linear-gradient(170deg, #1F4C9C, #13306E 55%, #0B1D47);
    --relieve: inset 0 0 0 1.6cqw #D9A93B, inset 0 0 0 2.4cqw #0B1D47, inset 0 0 0 2.8cqw #F2CF6B;
    --texto: #F8E2A6; --texto-sombra: 0 .3cqw .6cqw rgba(0, 0, 0, .6);
    --placa: linear-gradient(180deg, #F2D27A, #C99A30); --placa-texto: #0F2558;
    --borde-ventana: #E1B44A; --fondo-ventana: #0B1D47;
    --insignia: linear-gradient(180deg, #E5BE57, #B38425); --insignia-texto: #0F2558;
    --autor-fondo: rgba(8, 20, 50, .55);
}
/* Franja de jeroglíficos y destello de oro */
.cromo[data-estilo="papiro"] .cromo-ambiente i:nth-child(1) {
    left: 0; right: 0; bottom: 0; height: 3.4cqw;
    background: repeating-linear-gradient(90deg, #F2CF6B 0 2cqw, transparent 2cqw 3cqw, #D04A2A 3cqw 4.2cqw, transparent 4.2cqw 5.4cqw);
    opacity: .85;
}
.cromo[data-estilo="papiro"] .cromo-ambiente i:nth-child(2) {
    inset: -20% auto -20% -60%; width: 35%;
    background: linear-gradient(90deg, transparent, rgba(255, 226, 150, .55), transparent);
    transform: skewX(-18deg); mix-blend-mode: screen;
    animation: marmol-destello 7s ease-in-out infinite paused;
}
.cromo[data-estilo="papiro"] .cromo-ambiente i:nth-child(n+3) { display: none; }

/* Románico: fresco de iglesia (ocre, rojo y bandas de color) */
.cromo[data-estilo="romanico"] {
    --marco:
        linear-gradient(180deg, #B33A22 0 6cqw, #E7C27A 6cqw 7cqw, transparent 7cqw),
        var(--ruido) 0 0 / 50cqw,
        linear-gradient(160deg, #F1DDAE, #E3C485 55%, #CFA562);
    --relieve: inset 0 0 0 1.2cqw #2D4E8A, inset 0 0 0 2cqw #E7C27A, inset 0 0 0 2.6cqw #B33A22;
    --texto: #3B2410; --texto-sombra: none;
    --placa: linear-gradient(180deg, #2D4E8A, #1C3463); --placa-texto: #F6E3B2;
    --borde-ventana: #B33A22; --fondo-ventana: #2B1A0E;
    --insignia: linear-gradient(180deg, #C2492C, #8C2A16); --insignia-texto: #FFF0D2;
}
/* Arco de medio punto sobre la ventana */
.cromo[data-estilo="romanico"] .cromo-ventana { border-radius: 40cqw 40cqw 2cqw 2cqw / 18cqw 18cqw 2cqw 2cqw; }
.cromo[data-estilo="romanico"] .cromo-ambiente i:nth-child(1) {
    left: 0; right: 0; bottom: 0; height: 5cqw;
    background: repeating-linear-gradient(90deg, #2D4E8A 0 4cqw, #E7C27A 4cqw 5cqw, #B33A22 5cqw 9cqw, #E7C27A 9cqw 10cqw);
}
.cromo[data-estilo="romanico"] .cromo-ambiente i:nth-child(n+2) { display: none; }

/* Dorado (Renacimiento): marco de retablo con pan de oro */
.cromo[data-estilo="dorado"] {
    --marco:
        radial-gradient(ellipse at 30% 10%, rgba(255, 250, 220, .85), transparent 55%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .08) 0 1cqw, transparent 1cqw 2.4cqw),
        linear-gradient(160deg, #F6DE8D, #D9AE45 45%, #9C7020);
    --relieve: inset 0 0 0 1.4cqw rgba(110, 72, 12, .5), inset 1.6cqw 1.6cqw 3cqw rgba(255, 245, 210, .5), inset -1.6cqw -1.6cqw 3cqw rgba(90, 55, 5, .45);
    --texto: #3A2506; --texto-sombra: 0 .2cqw .3cqw rgba(255, 240, 200, .7);
    --placa: linear-gradient(180deg, #6E1C1C, #4A0F12); --placa-texto: #F8E2A6;
    --placa-sombra: 0 0 0 .5cqw #F6DE8D, 0 .8cqw 1.8cqw rgba(60, 30, 0, .4);
    --borde-ventana: #FFF1C2; --fondo-ventana: #2A1A08;
    --insignia: linear-gradient(180deg, #7A2222, #4A0F12); --insignia-texto: #F8E2A6;
}
.cromo[data-estilo="dorado"] .cromo-ambiente i:nth-child(1) {
    inset: -20% auto -20% -60%; width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 240, .8), transparent);
    transform: skewX(-20deg); mix-blend-mode: soft-light;
    animation: marmol-destello 5s ease-in-out infinite paused;
}
.cromo[data-estilo="dorado"] .cromo-ambiente i:nth-child(n+2) { display: none; }

/* Neoclásico: blanco y rojo pompeyano, con greca */
.cromo[data-estilo="neoclasico"] {
    --marco:
        repeating-linear-gradient(90deg, #8E2B22 0 1cqw, transparent 1cqw 3cqw) 0 0 / 100% 2.2cqw no-repeat,
        repeating-linear-gradient(90deg, #8E2B22 0 1cqw, transparent 1cqw 3cqw) 0 100% / 100% 2.2cqw no-repeat,
        linear-gradient(160deg, #FBF7EF, #EFE6D6 60%, #E2D5BE);
    --relieve: inset 0 0 0 2.6cqw rgba(255, 255, 255, 0), inset 0 0 0 3cqw #8E2B22, inset 0 0 5cqw rgba(120, 90, 50, .18);
    --texto: #4A1C16; --texto-sombra: none;
    --placa: linear-gradient(180deg, #A3352A, #74201A); --placa-texto: #FBF3E3;
    --borde-ventana: #FBF7EF; --fondo-ventana: #3A2A22;
    --insignia: linear-gradient(180deg, #2F3B4E, #1B2433); --insignia-texto: #F4E7CC;
}
.cromo[data-estilo="neoclasico"] .cromo-ambiente i { display: none; }

/* Expresión (Fauvismo y Expresionismo): colores puros a brochazos */
.cromo[data-estilo="expresion"] {
    --marco:
        radial-gradient(circle at 15% 20%, #F0C808 0 12cqw, transparent 12.5cqw),
        radial-gradient(circle at 90% 85%, #2E86AB 0 16cqw, transparent 16.5cqw),
        linear-gradient(115deg, #E23E57 0 30%, #F28C28 30% 52%, #7A3EB1 52% 76%, #1B998B 76%);
    --relieve: inset 0 0 0 1.6cqw #141414;
    --texto: #FFFFFF; --texto-sombra: 0 .3cqw 0 #141414;
    --placa: #141414; --placa-texto: #F0C808;
    --borde-ventana: #141414; --fondo-ventana: #141414;
    --insignia: #141414; --insignia-texto: #FFFFFF;
    --autor-fondo: rgba(20, 20, 20, .7);
}
.cromo[data-estilo="expresion"] .cromo-ventana { border-radius: 1.2cqw 3.8cqw 1.6cqw 4.4cqw; }
.cromo[data-estilo="expresion"] .cromo-ambiente i:nth-child(1) {
    inset: -30%; background: conic-gradient(from 0deg, rgba(255, 255, 255, .0), rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 30%);
    animation: expresion-giro 12s linear infinite paused;
}
.cromo[data-estilo="expresion"] .cromo-ambiente i:nth-child(n+2) { display: none; }
@keyframes expresion-giro { to { transform: rotate(360deg); } }

/* Trencadís (Modernismo): mosaico de cerámica de colores y curvas */
.cromo[data-estilo="trencadis"] {
    --marco:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg stroke='%23F7F3EA' stroke-width='1.6'%3E%3Cpath d='M0 0h22l-4 18H0z' fill='%232E86AB'/%3E%3Cpath d='M22 0h20l3 15-27 3z' fill='%2366B3A8'/%3E%3Cpath d='M42 0h18v20l-15-5z' fill='%23F2C14E'/%3E%3Cpath d='M0 18h18l6 20H0z' fill='%23E07A5F'/%3E%3Cpath d='M18 18l27-3 2 22-23 1z' fill='%2381B29A'/%3E%3Cpath d='M45 15l15 5v22l-13-5z' fill='%233D5A80'/%3E%3Cpath d='M0 38h24l-2 22H0z' fill='%23F2C14E'/%3E%3Cpath d='M24 38l23-1 1 23H22z' fill='%232E86AB'/%3E%3Cpath d='M47 37l13 5v18H48z' fill='%23E07A5F'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 30cqw,
        #F7F3EA;
    --relieve: inset 0 0 0 1.4cqw #F7F3EA, inset 0 0 0 2cqw #3D5A80;
    --texto: #1F2E45; --texto-sombra: 0 0 .6cqw #F7F3EA;
    --placa: linear-gradient(180deg, #F7F3EA, #E9E1CF); --placa-texto: #1F2E45;
    --placa-sombra: 0 0 0 .6cqw #3D5A80, 0 .8cqw 1.8cqw rgba(0, 0, 0, .25);
    --borde-ventana: #F7F3EA; --fondo-ventana: #1F2E45;
    --insignia: linear-gradient(180deg, #4B6B96, #2B4466); --insignia-texto: #FFFFFF;
    --autor-fondo: rgba(247, 243, 234, .88);
}
/* Curvas orgánicas: la ventana ondula como una fachada de Gaudí */
.cromo[data-estilo="trencadis"] .cromo-ventana { border-radius: 30cqw 30cqw 6cqw 6cqw / 10cqw 10cqw 4cqw 4cqw; }
.cromo[data-estilo="trencadis"] .cromo-ambiente i:nth-child(1) {
    inset: -20% auto -20% -60%; width: 30%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
    transform: skewX(-20deg); mix-blend-mode: soft-light;
    animation: marmol-destello 6.5s ease-in-out infinite paused;
}
.cromo[data-estilo="trencadis"] .cromo-ambiente i:nth-child(n+2) { display: none; }

/* ── Movimiento reducido: sin inclinación ni animaciones ── */
@media (prefers-reduced-motion: reduce) {
    .cromo-cuerpo { transition: none; }
    .cromo *, .cromo-anverso::after { animation: none !important; }
    .cromo-dialogo .cromo, .cromo-dialogo[open] { animation: none; }
    .cromo.is-volteado .cromo-cuerpo { transition: opacity .2s; }
}

/* Boca abajo no se adivina la rareza: la sombra es la misma para todos */
.cromo.is-volteado[data-rareza]::after { background: rgba(12, 8, 30, .5); }