/* Muro 3D de webs: cilindro de ventanas en varias filas que gira, con una ventana destacada delante.
   CSS 3D puro, sin librerías. Variables: --pw (ancho de cada panel), --radio, --fila (separación entre filas). */
.m3d { --pw: 190px; --radio: 560px; --fila: 160px; --barra: 15px; --c: #4ADE80; --dw: 450px;
    position: relative; height: 640px; max-width: 1240px; margin: 20px auto 0; color: #fff;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }

.m3d__escena { position: absolute; inset: 0; perspective: 1300px; perspective-origin: 50% 42%; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.m3d__escena.is-arrastrando { cursor: grabbing; }

/* Ambiente: resplandor del color de la web destacada, suelo en rejilla y aros */
.m3d__brillo { position: absolute; left: 50%; top: 40%; width: min(86%, 820px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--c) 30%, transparent) 0, color-mix(in srgb, var(--c) 9%, transparent) 46%, transparent 70%); transition: background .8s; }
.m3d__suelo { position: absolute; left: 50%; top: 79%; width: 1500px; height: 560px; translate: -50% -50%; pointer-events: none; transform: rotateX(74deg); transform-origin: 50% 50%;
    background-image: linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px); background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse closest-side, #000 20%, transparent 100%); mask-image: radial-gradient(ellipse closest-side, #000 20%, transparent 100%); }
.m3d__aro { position: absolute; left: 50%; top: 77%; translate: -50% -50%; border-radius: 50%; pointer-events: none; border: 1.5px solid color-mix(in srgb, var(--c) 55%, transparent); transition: border-color .8s; }
.m3d__aro--1 { width: min(78%, 760px); height: 21%; }
.m3d__aro--2 { width: min(52%, 500px); height: 14%; border-color: color-mix(in srgb, var(--c) 36%, transparent); }

/* Cilindro */
.m3d__anillo { position: absolute; left: 50%; top: 43%; width: 0; height: 0; transform-style: preserve-3d; }
.m3d__panel { position: absolute; display: block; width: var(--pw); margin-left: calc(var(--pw) / -2); margin-top: calc((var(--pw) * .5625 + var(--barra)) / -2);
    backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform, opacity; text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; }
.m3d__panel span { display: block; border-radius: 7px; overflow: hidden; background: #1a1a20; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.m3d__panel i { display: block; height: var(--barra); background: #2a2a32; }
.m3d__panel img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; pointer-events: none; }

/* Ventana destacada (delante del cilindro) */
.m3d__destacado { position: absolute; left: 50%; top: 43%; width: var(--dw); translate: -50% -50%; z-index: 5; display: block; text-decoration: none; color: inherit;
    transition: opacity .28s ease, scale .28s ease; animation: m3d-flota 7s ease-in-out infinite; }
.m3d__destacado.is-cambiando { opacity: 0; scale: .96; }
.m3d__marco { display: block; border-radius: 14px; overflow: hidden; background: #15151a;
    box-shadow: 0 0 0 2px var(--c), 0 0 90px -8px color-mix(in srgb, var(--c) 70%, transparent), 0 40px 70px -30px rgba(0,0,0,.9); transition: box-shadow .8s; }
.m3d__marco i { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; background: #2c2c35; }
.m3d__marco i b { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.3); }
.m3d__marco i em { flex: 1; height: 12px; margin-left: 12px; border-radius: 6px; background: rgba(255,255,255,.12); }
.m3d__marco img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@keyframes m3d-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.m3d__pie { text-align: center; margin-top: 6px; color: #fff; }
.m3d__nombre { font-size: 1.35rem; font-weight: 600; }
.m3d__sector { display: inline-block; margin-left: 10px; padding: 4px 12px; border-radius: 999px; font-size: .8rem; background: color-mix(in srgb, var(--c) 18%, transparent); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); }
.m3d__tipo { margin: 6px 0 0; font-size: .82rem; opacity: .7; min-height: 1.2em; }
.m3d-sec { overflow: hidden; }
.m3d__acciones { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.m3d__flecha { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.35); background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .2s, border-color .2s; }
.m3d__flecha:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.m3d__flecha svg { width: 20px; height: 20px; }

@media (max-width: 900px) {
    .m3d { --pw: 112px; --radio: 330px; --fila: 94px; --barra: 10px; --dw: 260px; height: 480px; }
    .m3d__escena { perspective: 900px; }
    .m3d__suelo { width: 900px; height: 360px; background-size: 40px 40px; }
}
@media (prefers-reduced-motion: reduce) {
    .m3d__destacado { animation: none; transition: none; }
    .m3d__brillo, .m3d__aro, .m3d__marco { transition: none; }
}