/* Recorrido 3D con dron (bimingeza.com/drone/) insertado en una página de la web.
   El visor pesa ~12 MB: no se descarga hasta que la persona lo pide (botón). En el celular se abre a pantalla
   completa en /drone/ para que el dedo no quede atrapado dentro de un iframe al desplazarse por la página. */
.r3d { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.r3d-texto h2, .r3d-texto .r3d-titulo { font-size: clamp(1.8rem, 3.2vw, 2.5rem); color: var(--tinta); font-weight: 700; letter-spacing: -0.025em; }
.r3d-texto > p { color: var(--texto-2); margin-top: 14px; max-width: 52ch; }
.r3d-lista { list-style: none; margin: 22px 0 0; display: grid; gap: 10px; }
.r3d-lista li { display: flex; gap: 10px; align-items: flex-start; color: var(--texto); }
.r3d-lista li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 8px; border-radius: 2px; background: var(--oro); transform: rotate(45deg); }
.r3d-texto .acciones { margin-top: 26px; }
.r3d-aviso { margin-top: 18px; font-size: 0.82rem; color: var(--etiqueta); }
.r3d-aviso strong { color: var(--tinta); background: var(--oro-suave); padding: 1px 6px; border-radius: 5px; font-weight: 600; letter-spacing: .04em; }
.r3d-reel { justify-self: center; position: relative; width: min(100%, 300px); aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden;
  background: var(--noche); border: 6px solid var(--noche); box-shadow: var(--sombra-alta); }
.r3d-corto .r3d-reel { width: min(100%, 240px); }
.r3d-reel video, .r3d-reel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.r3d-reel figcaption { position: absolute; right: 10px; top: 10px; font-size: 0.72rem; font-weight: 600; letter-spacing: .06em; color: #fff;
  background: rgba(20, 40, 75, 0.82); padding: 4px 9px; border-radius: 999px; }

.r3d-pausa { position: absolute; left: 10px; bottom: 10px; font: inherit; font-size: 0.74rem; font-weight: 600; color: var(--tinta);
  background: rgba(255, 255, 255, 0.92); border: 0; border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.r3d-pausa:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }

.r3d-visor { grid-column: 1 / -1; position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--borde); background: var(--fondo-suave);
  height: clamp(420px, 72vh, 720px); }
.r3d-visor iframe { display: block; width: 100%; height: 100%; border: 0; }
.r3d-portada { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px;
  background: linear-gradient(rgba(244, 246, 251, .35), rgba(244, 246, 251, .6)), var(--r3d-foto) center 45% / cover no-repeat; }
.r3d-portada > div { background: rgba(255, 255, 255, 0.96); padding: 20px 26px; border-radius: 16px; box-shadow: var(--sombra-alta); }
.r3d-portada p { color: var(--texto-2); font-size: 0.88rem; margin-top: 10px; }
.r3d-portada .boton { font-size: 1.02rem; padding: 14px 26px; }
@media (max-width: 860px) {
  .r3d { grid-template-columns: 1fr; }
  .r3d-reel { width: min(100%, 260px); }
  .r3d-visor { height: auto; aspect-ratio: 4 / 3; }
}