/* Casa Blanca Tiqui · página de las mascotas en realidad aumentada (pensada primero para el celular) */
:root {
  --cal: #EFEBE4; --crema: #F4EFE6; --arena: #DED3C1; --lago: #0F2C3E; --tinta: #13202A; --terracota: #B9492A;
  --sombra: rgba(30, 42, 53, .15);
  /* una matita de pasto, con los verdes del pasto de las mascotas */
  --matita: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Cpath fill='%236c8e3c' d='M8 30C9 22 6 15 1 10c7 3 11 10 12 20zM25 30c0-9 2-18 7-27 0 9-1 18 0 27z'/%3E%3Cpath fill='%2387a84b' d='M15 30c-1-8 1-16 6-22-1 7-1 15 1 22zM31 30c2-8 7-14 15-17-5 5-9 11-9 17zM45 30c3-5 8-9 14-10-4 3-7 6-8 10z'/%3E%3C/svg%3E");
  --letra: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
}
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overscroll-behavior: none; background: var(--cal); }
body {
  color: var(--tinta); font: 500 16px/1.4 var(--letra); font-stretch: 100%;
  -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%;
  display: flex; flex-direction: column; min-height: 100svh; overflow-x: hidden;
}
button, a { touch-action: manipulation; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- cabecera ---------- */
.hud { padding: calc(env(safe-area-inset-top) + 14px) calc(env(safe-area-inset-right) + 18px) 0 calc(env(safe-area-inset-left) + 18px); }
.marca { display: inline-block; padding: 7px 0; }
.marca img { display: block; height: 30px; width: auto; }

/* ---------- escena 2D ---------- */
.escenario {
  position: relative; flex: 0 0 auto; width: min(100%, 520px, calc((100svh - 330px) * .8)); margin: 0 auto;
  aspect-ratio: 4 / 5; touch-action: manipulation; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* el paisaje: una franja del ancho de la pantalla, centrada en la escena, que recorta lo que se sale (si no, el
   teléfono achica la página para que entre). Adentro, las medidas horizontales van en cqw (centésimas del ancho
   de la escena), con un valor de respaldo para navegadores viejos */
.escenario { container-type: inline-size; }
.escenario .paisaje { position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); overflow: hidden;
                      z-index: 2; pointer-events: none; }
/* el camino: su borde de atrás (al 39 % del alto) es recto, y Risa se esconde detrás: su recorte queda un poco más
   abajo, tapado por el camino, así que nunca se ve cortada en el aire */
.paisaje .suelo {
  position: absolute; left: 0; right: 0; bottom: 3%; height: 36%;
  background: linear-gradient(to bottom, #cdbfa5 0, #dcd1bd 1.4%, #e5dbca 30%, var(--arena) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent);
}
/* el claro donde están las mascotas, más grande que la escena */
.paisaje .claro {
  position: absolute; left: 50%; width: 144%; width: 144cqw; transform: translateX(-50%); bottom: 5%; height: 30%; border-radius: 50%;
  background: radial-gradient(closest-side, #ede6da 0 55%, rgba(237, 230, 218, 0) 100%);
}
/* matitas sobre el borde del camino */
.paisaje .matita {
  position: absolute; bottom: 38.4%; aspect-ratio: 2;
  background: var(--matita) center bottom / contain no-repeat;
}
.paisaje .matita-1 { left: 10%; left: calc(50% - 70cqw); width: 12%; width: 12cqw; }
.paisaje .matita-2 { left: 68%; left: calc(50% + 18cqw); width: 9%; width: 9cqw; }
.paisaje .matita-3 { left: 90%; left: calc(50% + 58cqw); width: 10%; width: 10cqw; }
.escenario .pieza { position: absolute; }
/* Ventolera cruza toda la pantalla, como el camino */
.escenario .cielo { left: 50%; top: 8%; width: 100vw; transform: translateX(-50%); height: 22%; z-index: 6; overflow: hidden; }
.escenario .gaviota { width: auto; height: 71%; }      /* el mismo tamaño de antes, medido por el alto (el carril ahora es tan ancho como la pantalla) */
/* el botón al medio; Kiki, reflejado, lo picotea desde la derecha (su pico, al 23 % de su ancho, cae sobre el
   lado derecho del disco) y Canela mira desde la izquierda */
.escenario .canela { left: 9%; bottom: 24%; width: 34%; aspect-ratio: 400 / 500; z-index: 5; }
.escenario .boton { left: 40%; bottom: 16.5%; width: 20%; aspect-ratio: 150 / 250; z-index: 4; }
.escenario .kiki { left: 50%; bottom: 21%; width: 34%; aspect-ratio: 420 / 460; z-index: 5; }
/* Risa sale de detrás del borde del camino, junto a la matita, a la derecha de Kiki (el camino va delante y tapa
   el corte) */
.escenario .rana-marco { left: 70%; bottom: 37.5%; width: 30%; height: 45%; z-index: 1; }
/* o detrás del borde de arriba del botón «Activar la cámara», que también es recto: la ventana termina justo en
   ese borde, junto a una matita (ver .cta-caja) */
.escenario .sombra-canela { left: 14%; bottom: 22.5%; width: 24%; height: 5%; z-index: 3; }
.escenario .sombra-kiki { left: 56.5%; bottom: 19.5%; width: 24%; height: 5%; z-index: 3; }
.escenario .sombra-boton { left: 41%; bottom: 15.5%; width: 18%; height: 4%; z-index: 3; }

/* ---------- piezas (las mismas en 2D y en RA) ---------- */
/* las animaciones traen su propia sombra dibujada de pie: se usa solo la plana, que se acuesta en el suelo */
.sombra-dibujo { display: none; }
.sombra { border-radius: 50%; background: radial-gradient(closest-side, var(--sombra), rgba(30, 42, 53, .1) 70%, transparent); pointer-events: none; }
/* solo lo dibujado recibe el toque: el lienzo transparente de Kiki no debe tapar el botón que picotea */
.mascota { cursor: pointer; outline: none; pointer-events: none; }
.mascota svg * { pointer-events: visiblePainted; }
.mascota:focus-visible { outline: 3px solid var(--terracota); outline-offset: 4px; border-radius: 14px; }
.mascota svg { display: block; overflow: visible; }
.eje { position: absolute; top: 50%; width: 1px; height: 1px; pointer-events: none; }
/* reflejado (lottie pone su propio transform en línea al SVG); las notas musicales se vuelven a dar vuelta solas */
.espejo > svg { transform: scaleX(-1) !important; }
.espejo .voltear { transform: scaleX(-1); transform-box: fill-box; transform-origin: center; }
.cielo { pointer-events: none; overflow: visible; }
.gaviota { position: absolute; top: 0; left: 0; width: 15%; aspect-ratio: 320 / 240; will-change: transform; visibility: hidden; }
.rana-ventana { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.rana-toque { position: absolute; left: 18%; right: 18%; bottom: 0; height: 18%; margin: 0; padding: 0; border: 0;
              background: none; border-radius: 40% 40% 0 0; cursor: pointer; pointer-events: none; }
.rana-marco.asoma .rana-toque { pointer-events: auto; }
.rana-toque:focus-visible { outline: 3px solid var(--terracota); outline-offset: 2px; }
.rana { position: absolute; left: 0; bottom: 0; width: 100%; aspect-ratio: 1; transform: translateY(100%); will-change: transform;
        transition: transform .8s cubic-bezier(.32, .72, 0, 1); }
/* la rana ocupa del 49 % al 92 % de su lienzo: con 36 % asoma la cabeza hasta debajo de los ojos */
.rana.asoma { transform: translateY(var(--asoma, 36%)); }
.rana.salta { transform: translateY(0); transition-duration: .35s; }

/* botón: el símbolo N2 en un disco Lago, con flechitas que invitan a tocarlo */
/* el enlace no recibe el toque: lo reciben el disco y su zona agrandada, que crece hacia la izquierda y abajo, lejos de Kiki */
.boton { display: block; text-decoration: none; color: inherit; pointer-events: none; }
/* zona de toque más grande que el dibujo (en RA el botón es chico en pantalla) */
.boton::before { content: ''; position: absolute; inset: auto 0 -10% -30%; height: 75%; pointer-events: auto; }
.boton .disco {
  position: absolute; left: 0; bottom: 0; width: 100%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: var(--lago); box-shadow: 0 0 0 5px var(--cal); transition: transform .12s; pointer-events: auto;
}
.boton .disco img { width: 62%; height: auto; display: block; transform: translateY(-3%); }
.boton.picado .disco, .boton:active .disco { transform: scale(.92); }
.boton:focus-visible .disco { outline: 3px solid var(--terracota); outline-offset: 7px; }
.boton .flechas { position: absolute; left: 22%; right: 22%; bottom: 66%; height: 34%; }
.boton .flechas i {
  position: absolute; left: 0; right: 0; height: 34%; background: var(--terracota);
  clip-path: polygon(0 0, 50% 60%, 100% 0, 100% 40%, 50% 100%, 0 40%);
  animation: flecha 1.2s cubic-bezier(.4, 0, .2, 1) infinite; opacity: 0;
}
.boton .flechas i:nth-child(1) { top: 0; animation-delay: 0s; }
.boton .flechas i:nth-child(2) { top: 33%; animation-delay: .15s; }
.boton .flechas i:nth-child(3) { top: 66%; animation-delay: .3s; }
@keyframes flecha { 0% { opacity: 0; transform: translateY(-30%); } 35% { opacity: 1; } 70% { opacity: 1; transform: translateY(20%); } 100% { opacity: 0; transform: translateY(40%); } }

/* ---------- pieza viva: la copia de la cara, pegada al papel (medidas en unidades del ancla) ---------- */
.viva { pointer-events: none; }
/* hasta que cargan el fondo y las mascotas no se ve: mientras, se ve el papel real. inherit, porque MindAR oculta
   la pieza con visibility al perderla */
.viva-dentro { position: absolute; inset: 0; visibility: hidden; }
.viva.lista .viva-dentro { visibility: inherit; }
/* lo que el fondo trae de más alrededor (8 mm): entero los 2 mm más cercanos al corte y después se desvanece */
/* los llaveros traen su forma (esquinas y agujero) en la transparencia del fondo: sin borde que se desvanece */
.viva-fondo.con-forma { -webkit-mask-image: none; mask-image: none; }
.viva-fondo {
  position: absolute; display: block; max-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 calc(var(--sangrado) * .75), #000 calc(100% - var(--sangrado) * .75), transparent),
                      linear-gradient(to bottom, transparent, #000 calc(var(--sangrado) * .75), #000 calc(100% - var(--sangrado) * .75), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 calc(var(--sangrado) * .75), #000 calc(100% - var(--sangrado) * .75), transparent),
              linear-gradient(to bottom, transparent, #000 calc(var(--sangrado) * .75), #000 calc(100% - var(--sangrado) * .75), transparent);
  mask-composite: intersect;
}
.viva-recorte { position: absolute; inset: 0; overflow: hidden; }
.viva-detras { position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; }
.viva-sube { position: absolute; inset: 0; transition: transform .8s cubic-bezier(.32, .72, 0, 1); }
.viva-sube.salta { transform: translateY(calc(-1 * var(--sube))); transition-duration: .35s; }
.viva-mascota { position: absolute; }
.viva-mascota svg { display: block; }
.viva-toque { position: absolute; margin: 0; padding: 0; border: 0; background: none; border-radius: 14px; cursor: pointer;
              pointer-events: auto; }
.viva-toque:focus-visible { outline: 6px solid var(--terracota); outline-offset: 4px; }
/* datos de contacto: se marcan al tocarlos y brillan dos veces al aparecer la pieza */
.viva-enlace { position: absolute; display: block; border-radius: 10px; pointer-events: auto; }
.viva-enlace:active { background: rgba(255, 255, 255, .25); box-shadow: 0 0 0 6px rgba(185, 73, 42, .55); }
.viva-enlace:focus-visible { outline: 6px solid var(--terracota); outline-offset: 2px; }
.viva.saluda .viva-enlace { animation: brillo 1.4s ease-in-out 2; }
@keyframes brillo { 50% { background: rgba(255, 255, 255, .25); box-shadow: 0 0 0 6px rgba(185, 73, 42, .5); } }

/* ---------- hoja inferior ---------- */
.hoja {
  position: relative; z-index: 10; text-align: center;
  padding: 14px calc(env(safe-area-inset-right) + 18px) calc(env(safe-area-inset-bottom) + 16px) calc(env(safe-area-inset-left) + 18px);
}
.hoja h1 { margin: 0; font: 800 clamp(1.6rem, 7.4vw, 2.2rem)/1.02 var(--letra); font-stretch: 112%; letter-spacing: -.01em; text-transform: uppercase; }
.hoja p { margin: 8px auto 14px; max-width: 32ch; font: 400 1.25rem/1.25 var(--serif); }   /* Instrument Serif normal, como la web */
.cta {
  display: block; width: 100%; max-width: 420px; margin: 0 auto; min-height: 56px; border: 0; border-radius: 16px;
  background: var(--lago); color: #fff; font: 700 1.05rem/1 var(--letra); font-stretch: 112%; letter-spacing: .04em;
  text-transform: uppercase; cursor: pointer; transition: transform .12s;
}
.cta:active { transform: scale(.97); }
.cta-caja { position: relative; max-width: 420px; margin: 0 auto; }
.cta-caja .rana-cta { position: absolute; left: 18%; bottom: 100%; width: 28%; aspect-ratio: 1; pointer-events: none; }
.cta-caja .rana-toque-cta { left: 17%; right: auto; width: 30%; bottom: 100%; height: 13%; height: max(13%, 30px); pointer-events: auto; }
.cta-caja .matita-cta { position: absolute; left: 7%; bottom: calc(100% - 2px); width: 13%; aspect-ratio: 2; pointer-events: none;
                        background: var(--matita) center bottom / contain no-repeat; }
.cta[hidden] ~ .matita-cta, .cta[hidden] ~ .rana-cta { display: none; }
.cta:focus-visible, .secundario:focus-visible, .salir:focus-visible { outline: 3px solid var(--terracota); outline-offset: 3px; }
.cta[disabled] { opacity: .6; }
.secundario { display: inline-block; margin-top: 8px; padding: 11px 6px; color: var(--tinta); font-weight: 600; text-underline-offset: 3px; }
.aviso { margin: 4px auto 14px !important; padding: 10px 12px; max-width: 34ch; border-radius: 12px; background: var(--crema);
         font: 500 .95rem/1.35 var(--letra) !important; box-shadow: inset 0 0 0 1px var(--arena); }

/* ---------- realidad aumentada ---------- */
.ra { position: fixed; inset: 0; z-index: 20; background: #000; overflow: hidden; }
.ra video { object-fit: cover; }
/* el recuadro guía va más abajo: arriba de la pieza queda lugar para las mascotas */
.buscando { position: absolute; inset: 0; display: grid; place-content: end center; justify-items: center; gap: 18px;
            padding-bottom: calc(env(safe-area-inset-bottom) + 18svh); pointer-events: none; z-index: 5; }
.buscando .marco { position: relative; width: min(72vw, 340px); aspect-ratio: 85 / 55; animation: respira 2.4s ease-in-out infinite; }
.ra[data-pieza="volante"] .buscando .marco { width: min(56vw, 260px); aspect-ratio: 148 / 210; }
.ra[data-pieza="llavero"] .buscando .marco { width: min(46vw, 210px); aspect-ratio: 30 / 40; border-radius: 18px; }
.buscando .marco span { position: absolute; width: 22%; height: 22%; border: 4px solid #fff; border-radius: 6px; }
.buscando .marco span:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.buscando .marco span:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.buscando .marco span:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.buscando .marco span:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.buscando p { margin: 0; padding: 8px 14px; border-radius: 999px; background: rgba(15, 44, 62, .78); color: #fff; font-weight: 700; }
@keyframes respira { 50% { transform: scale(1.04); } }
.ra.encontrado .buscando { display: none; }
.cargando { position: absolute; left: 50%; top: 50%; translate: -50% -50%; margin: 0; color: #fff; font-weight: 700; z-index: 6;
            text-align: center; width: min(86vw, 340px); }
.cargando small { font-weight: 500; opacity: .85; }
.salir {
  position: absolute; z-index: 7; top: calc(env(safe-area-inset-top) + 12px); right: calc(env(safe-area-inset-right) + 12px);
  min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(15, 44, 62, .78); color: #fff;
  font: 700 .95rem var(--letra); cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .rana, .boton .disco, .cta, .viva-sube { transition-duration: .01ms !important; }
  .boton .flechas i { animation: none; opacity: 1; }
  .buscando .marco, .viva.saluda .viva-enlace { animation: none; }
}
@media (orientation: landscape) and (max-height: 520px) {
  body { flex-direction: row; flex-wrap: wrap; }
  .hud { width: 100%; }
  .escenario { height: max(220px, calc(100svh - 70px)); width: calc(max(220px, calc(100svh - 70px)) * .8); flex: 0 0 auto;
               margin: 0 0 0 calc(env(safe-area-inset-left) + 8px); }
  .escenario .paisaje { width: 170%; }      /* acostado, la escena va a la izquierda: el camino no pasa bajo el texto */
  .hoja { flex: 1 1 260px; align-self: center; }
}