/* ═══════════════════════════════════════════════════════════════════
   Manos Piuranas La Premier — Recorrido 3D a pantalla completa
   La inyecta js/recorrido3d.js al abrir. Todo cuelga de .r3 y no usa
   variables ni clases de la página que lo aloja.
   Marca: noche #140C0A · crema #F7EFDC · dorado #D0A63A / #EAD08A · vino #6E1D28
   Títulos en Fraunces, texto en DM Sans (la página ya las carga).
   ═══════════════════════════════════════════════════════════════════ */
html.r3-abierto,html.r3-abierto body{overflow:hidden}
.r3{
  --noche:#140C0A;--noche-ch:20 12 10;--crema:#F7EFDC;--crema-ch:247 239 220;--oro:#D0A63A;--oro-2:#EAD08A;--vino:#6E1D28;
  --titulo:'Fraunces',Georgia,'Times New Roman',serif;--texto:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --borde:rgb(var(--crema-ch) / .2);--vidrio:rgb(var(--noche-ch) / .72);--px:clamp(1rem,3.2vw,2.5rem);--suave:cubic-bezier(.22,1,.36,1);
  position:fixed;inset:0;z-index:2147483000;background:var(--noche);color:var(--crema);overflow:hidden;text-align:left;
  font:400 1rem/1.5 var(--texto);-webkit-font-smoothing:antialiased;opacity:0;transition:opacity .42s var(--suave)}
.r3.r3-on{opacity:1}
.r3 *,.r3 *::before,.r3 *::after{box-sizing:border-box}
.r3 :is(h2,p){margin:0}
:where(.r3) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
:where(.r3) a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.r3 :is(button,a):focus-visible{outline:2px solid var(--oro-2);outline-offset:3px}
.r3 svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.r3-solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── La escena ── */
.r3-escena{position:absolute;inset:0;overflow:hidden}
/* Fondo ambiental: la misma foto, muy desenfocada y oscura */
.r3-amb{position:absolute;inset:0;overflow:hidden;background:var(--noche)}
.r3-amb i{position:absolute;inset:-12%;background:center/cover no-repeat;filter:blur(46px) brightness(.42) saturate(1.15);opacity:0;transition:opacity 1.1s var(--suave)}
.r3-amb i.on{opacity:1}
.r3-lienzo{position:absolute;inset:0;cursor:grab;touch-action:none}
.r3-lienzo.r3-agarra{cursor:grabbing}
.r3-lienzo .r3-canvas{opacity:0;transition:opacity .7s var(--suave);touch-action:none}
.r3-lienzo.r3-lista .r3-canvas{opacity:1}
.r3-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Velo: da piso al texto sin apagar la foto */
.r3-velo{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(to right,rgb(var(--noche-ch) / .84) 0%,rgb(var(--noche-ch) / .5) 24%,rgb(var(--noche-ch) / 0) 50%),
  linear-gradient(to top,rgb(var(--noche-ch) / .92) 0%,rgb(var(--noche-ch) / .5) 19%,rgb(var(--noche-ch) / 0) 40%),
  linear-gradient(to bottom,rgb(var(--noche-ch) / .62) 0%,rgb(var(--noche-ch) / 0) 17%)}

/* ── Cabecera ── */
.r3-cab{position:absolute;inset:0 0 auto 0;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:calc(env(safe-area-inset-top,0px) + .85rem) var(--px) .85rem}
.r3-marca{display:grid;gap:.1rem;min-width:0;text-shadow:0 1px 14px rgb(var(--noche-ch) / .9)}
.r3-marca b{font:600 1.22rem/1.1 var(--titulo);letter-spacing:-.01em;color:var(--crema);white-space:nowrap}
.r3-marca span{font:500 .7rem/1.2 var(--texto);letter-spacing:.11em;text-transform:uppercase;color:var(--oro-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r3-cab-der{display:flex;align-items:center;gap:.6rem;flex:none}
.r3-guia{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;padding:.4rem 1.05rem .4rem .45rem;border-radius:99px;
  background:var(--vidrio);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px var(--borde);
  font-size:.9rem;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums;transition:background .25s,box-shadow .25s}
.r3-play{width:32px;height:32px;border-radius:50%;background:var(--vino);box-shadow:inset 0 0 0 1px rgb(var(--crema-ch) / .22);display:grid;place-items:center;flex:none}
.r3-play::before{content:'';width:0;height:0;border-style:solid;border-width:5.5px 0 5.5px 9px;border-color:transparent transparent transparent var(--crema);margin-left:2px}
.r3-guia[aria-pressed="true"] .r3-play::before{width:9px;height:10px;border:0;margin:0;background:linear-gradient(to right,var(--crema) 0 3px,transparent 3px 6px,var(--crema) 6px 9px)}
.r3-cerrar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--vidrio);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px var(--borde);transition:background .25s,transform .3s var(--suave)}
@media(hover:hover){
  .r3-guia:hover{background:rgb(var(--noche-ch) / .9);box-shadow:inset 0 0 0 1px rgb(var(--crema-ch) / .4)}
  .r3-cerrar:hover{background:rgb(var(--noche-ch) / .92);transform:rotate(90deg)}
}
/* Avance de la visita guiada: una línea dorada bajo la cabecera */
.r3-progreso{position:absolute;inset:0 0 auto 0;height:3px;z-index:7;pointer-events:none;opacity:0;transition:opacity .4s}
.r3-guiando .r3-progreso{opacity:1}
.r3-progreso i{display:block;height:100%;background:linear-gradient(90deg,var(--oro),var(--oro-2));transform:scaleX(0);transform-origin:0 50%}

/* ── Ficha de la parada ── */
.r3-info{position:absolute;z-index:5;left:var(--px);bottom:calc(env(safe-area-inset-bottom,0px) + 10.4rem);width:min(26rem,calc(100% - 2 * var(--px)))}
.r3-info > *{opacity:0;transform:translateY(14px)}
.r3-info.r3-entra > *{animation:r3-sube .8s var(--suave) both}
.r3-info.r3-entra > :nth-child(2){animation-delay:.07s}
.r3-info.r3-entra > :nth-child(3){animation-delay:.14s}
.r3-info.r3-entra > :nth-child(4){animation-delay:.2s}
@keyframes r3-sube{to{opacity:1;transform:none}}
.r3-num{display:block;font:600 .72rem/1.3 var(--texto);letter-spacing:.12em;text-transform:uppercase;color:var(--oro-2);font-variant-numeric:tabular-nums;
  text-shadow:0 1px 10px rgb(var(--noche-ch) / .9)}
.r3-info h2{font:500 clamp(2.2rem,4vw,3.3rem)/1.02 var(--titulo);letter-spacing:-.022em;color:var(--crema);margin:.65rem 0 .8rem;text-wrap:balance;
  text-shadow:0 2px 24px rgb(var(--noche-ch) / .55)}
.r3-desc{font-size:1.02rem;line-height:1.6;color:rgb(var(--crema-ch) / .88);max-width:46ch;text-wrap:pretty;text-shadow:0 1px 12px rgb(var(--noche-ch) / .8)}
.r3-accion{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.3rem}
.r3-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.7rem 1.35rem;border-radius:99px;
  font:600 .95rem/1.1 var(--texto);letter-spacing:.005em;white-space:nowrap;transition:background .25s,box-shadow .25s,transform .25s var(--suave),color .25s}
.r3 a.r3-btn-oro{background:var(--oro);color:var(--noche);box-shadow:0 10px 28px -12px rgb(208 166 58 / .7)}
.r3 a.r3-btn-linea{color:var(--crema);background:rgb(var(--noche-ch) / .45);box-shadow:inset 0 0 0 1.5px rgb(var(--crema-ch) / .55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
@media(hover:hover){
  .r3 a.r3-btn-oro:hover{background:var(--oro-2);transform:translateY(-1px)}
  .r3 a.r3-btn-linea:hover{box-shadow:inset 0 0 0 1.5px var(--crema);background:rgb(var(--noche-ch) / .7)}
}
.r3-btn:active{transform:translateY(1px)}

/* ── Flechas ── */
.r3-flecha{position:absolute;z-index:4;right:var(--px);width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:rgb(var(--noche-ch) / .62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgb(var(--crema-ch) / .32);
  transition:background .25s,transform .3s var(--suave)}
.r3-sig{top:calc(50% - 60px)}.r3-ant{top:calc(50% + 4px)}
@media(hover:hover){
  .r3-flecha:hover{background:rgb(var(--noche-ch) / .9)}
  .r3-sig:hover{transform:translateX(3px)}.r3-ant:hover{transform:translateX(-3px)}
}

/* ── Pie: título de la vista, miniaturas y paradas ── */
.r3-pie{position:absolute;inset:auto 0 0 0;z-index:4;display:grid;gap:.6rem;padding:0 0 calc(env(safe-area-inset-bottom,0px) + .8rem);pointer-events:none}
.r3-pie-arriba{display:flex;align-items:flex-end;justify-content:flex-end;gap:1rem;padding:0 var(--px);min-height:64px}
.r3-leyenda{font:italic 500 1.02rem/1.3 var(--titulo);color:rgb(var(--crema-ch) / .96);text-align:right;text-shadow:0 1px 12px rgb(var(--noche-ch) / .95),0 0 2px rgb(var(--noche-ch) / .8);padding-bottom:.35rem}
.r3-vistas{display:flex;gap:.5rem;flex:none;pointer-events:auto}
.r3-vistas[hidden]{display:none}
.r3-vistas button{flex:none;width:76px;height:54px;border-radius:9px;overflow:hidden;position:relative;opacity:.62;
  box-shadow:0 0 0 1px var(--borde);transition:opacity .25s,box-shadow .25s,transform .3s var(--suave)}
.r3-vistas img{width:100%;height:100%;object-fit:cover;display:block}
@media(hover:hover){.r3-vistas button:hover{opacity:.95;transform:translateY(-2px)}}
.r3-vistas button[aria-pressed="true"]{opacity:1;box-shadow:0 0 0 2px var(--oro-2)}
.r3-zonas{display:flex;gap:.3rem;overflow-x:auto;scrollbar-width:none;padding:.7rem var(--px) 3px;border-top:1px solid rgb(var(--crema-ch) / .12);scroll-padding-inline:var(--px);pointer-events:auto}
.r3-zonas::-webkit-scrollbar{display:none}
.r3-zonas button{flex:none;display:inline-flex;align-items:baseline;gap:.5rem;min-height:44px;padding:.55rem .95rem;border-radius:99px;
  font-size:.88rem;font-weight:500;color:rgb(var(--crema-ch) / .78);white-space:nowrap;transition:background .25s,color .25s}
.r3-zonas b{font:600 .68rem/1 var(--texto);letter-spacing:.06em;color:var(--oro);font-variant-numeric:tabular-nums}
@media(hover:hover){.r3-zonas button:not([aria-pressed="true"]):hover{color:var(--crema);background:rgb(var(--crema-ch) / .09)}}
.r3-zonas button[aria-pressed="true"]{color:var(--noche);background:var(--crema)}
.r3-zonas button[aria-pressed="true"] b{color:var(--vino)}
@media(min-width:1500px){.r3-zonas{justify-content:center}}

/* ── Puntos anclados a la escena ── */
.r3-puntos{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.r3-punto{position:absolute;left:0;top:0;will-change:transform;opacity:0;visibility:hidden;transition:opacity .5s var(--suave),visibility 0s .5s}
.r3-ver .r3-punto{opacity:1;visibility:visible;transition-delay:calc(var(--i) * .14s),0s}
.r3-ver .r3-punto.r3-fuera{opacity:0;visibility:hidden;transition-delay:0s,.5s}
.r3-punto button{pointer-events:auto;position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--oro-2);
  box-shadow:0 0 0 5px rgb(234 208 138 / .24),0 2px 10px rgb(var(--noche-ch) / .6)}
.r3-punto button::before{content:'';position:absolute;inset:-16px}   /* objetivo táctil de 46 px */
.r3-punto button::after{content:'';position:absolute;inset:-5px;border-radius:50%;box-shadow:0 0 0 1px rgb(234 208 138 / .75);animation:r3-pulso 2.6s var(--suave) infinite;animation-delay:calc(var(--i) * .5s)}
@keyframes r3-pulso{from{transform:scale(.7);opacity:.9}to{transform:scale(2.4);opacity:0}}
.r3-punto span{position:absolute;left:20px;top:-16px;display:grid;gap:.12rem;white-space:nowrap;padding:.45rem .8rem;border-radius:10px;
  font-size:.76rem;line-height:1.25;color:rgb(var(--crema-ch) / .84);background:rgb(var(--noche-ch) / .7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 0 0 1px var(--borde)}
.r3-punto b{font-weight:600;font-size:.84rem;color:var(--crema)}
.r3-punto.r3-izq span{left:auto;right:20px}

/* ── Pista y carga ── */
.r3-pista{position:absolute;left:50%;top:46%;translate:-50% -50%;z-index:4;pointer-events:none;padding:.6rem 1.1rem;border-radius:99px;
  font-size:.86rem;color:var(--crema);background:rgb(var(--noche-ch) / .66);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 0 0 1px var(--borde);animation:r3-pista 5.2s var(--suave) 1.1s both;white-space:nowrap}
@keyframes r3-pista{0%{opacity:0;transform:translateY(8px)}12%,70%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.r3-toco .r3-pista,.r3-guiando .r3-pista,.r3-plano .r3-pista{animation:none;opacity:0;transition:opacity .3s}
.r3-carga{position:absolute;inset:0;display:grid;place-items:center;z-index:2;pointer-events:none}
.r3-carga i,.r3-lienzo.r3-cargando::after{width:38px;height:38px;border-radius:50%;border:1.5px solid rgb(var(--crema-ch) / .2);border-top-color:var(--oro-2);animation:r3-gira .9s linear infinite}
.r3-lienzo.r3-cargando::after{content:'';position:absolute;right:calc(var(--px) + 15px);top:calc(50% + 78px);width:22px;height:22px}
@keyframes r3-gira{to{transform:rotate(360deg)}}

/* ── Celular en vertical: la escena arriba, limpia, y la ficha debajo sobre fondo noche ── */
@media(max-width:719px){
  .r3{display:grid;grid-template-rows:minmax(0,1fr) auto auto}
  .r3-escena{position:relative;inset:auto;grid-row:1;min-height:200px}
  .r3-velo{background:
    linear-gradient(to top,var(--noche) 0%,rgb(var(--noche-ch) / .55) 12%,rgb(var(--noche-ch) / 0) 30%),
    linear-gradient(to bottom,rgb(var(--noche-ch) / .7) 0%,rgb(var(--noche-ch) / 0) 22%)}
  .r3-marca b{font-size:1.05rem}
  .r3-marca span{font-size:.6rem;letter-spacing:.09em}
  .r3-guia{padding-right:.85rem;font-size:.84rem}
  .r3-info{position:relative;inset:auto;grid-row:2;width:auto;padding:.2rem var(--px) 0}
  .r3-num{font-size:.66rem}
  .r3-info h2{font-size:clamp(1.85rem,8.6vw,2.4rem);margin:.4rem 0 .45rem;text-shadow:none}
  .r3-desc{font-size:.93rem;line-height:1.5;text-shadow:none;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
  .r3-accion{margin-top:.85rem;gap:.55rem;flex-wrap:nowrap}
  .r3-btn{flex:1 1 0;min-height:48px;padding:.6rem .7rem;font-size:.92rem}
  .r3-pie{position:relative;inset:auto;grid-row:3;gap:.35rem;padding-top:.7rem}
  .r3-pie-arriba{justify-content:space-between;min-height:0}
  .r3-leyenda{text-align:left;font-size:.9rem;text-shadow:none;padding-bottom:0;align-self:center;color:rgb(var(--crema-ch) / .8)}
  .r3-vistas button{width:54px;height:44px;border-radius:8px}
  .r3-zonas{padding-top:.5rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent)}
  .r3-flecha{width:44px;height:44px;top:auto;bottom:18px}
  .r3-sig{right:var(--px)}.r3-ant{right:calc(var(--px) + 52px)}
  .r3-pista{top:58%;font-size:.8rem}
  .r3-lienzo.r3-cargando::after{right:calc(var(--px) + 112px);top:auto;bottom:29px}
  .r3-punto span{font-size:.7rem;padding:.4rem .65rem;white-space:normal;width:max-content;max-width:min(13rem,54vw)}
  .r3-punto b{font-size:.76rem}
  /* En el celular solo la primera etiqueta va abierta; las demás, al tocar su punto */
  .r3-punto span{display:none}
  .r3-punto:first-child span,.r3-punto.r3-abre span{display:grid}
}
/* Pantallas bajas (celular acostado, ventanas chatas) */
@media(max-height:560px) and (min-width:720px){
  .r3-desc{display:none}
  .r3-info{bottom:8.6rem}
  .r3-info h2{font-size:2rem;margin:.3rem 0 .2rem}
  .r3-accion{margin-top:.7rem}
  .r3-pie-arriba{min-height:0}
  .r3-vistas button{width:56px;height:40px}
  .r3-sig{top:calc(42% - 56px)}.r3-ant{top:42%}
}
@media(max-height:620px) and (max-width:719px){
  .r3-desc{-webkit-line-clamp:2}
  .r3-info h2{font-size:1.6rem}
}
@media(prefers-reduced-motion:reduce){
  .r3,.r3 *,.r3 *::before,.r3 *::after{animation:none!important;transition:none!important}
  .r3-info > *{opacity:1;transform:none}
  .r3-pista{display:none}
}