@font-face {
  font-family: "Poppins";
  src: url("imagenes/Poppins-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: light;
  font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

/* Papel calido en lugar de blanco de imprenta: el claro tambien es material. */
body {
  background: #f8f4ee;
}

button,
label {
  -webkit-tap-highlight-color: transparent;
}

/* Paleta de la pieza (ronda 2, 2026-08-28):
     nogal  #2b2016  masa oscura calida, tinta y CTA
     crema  #f6efe3  texto en negativo sobre nogal   (13.9:1)
     arena  #cfc2ae  texto de apoyo sobre nogal      (9.1:1)
     papel  #f8f4ee  fondo; nogal sobre papel        (14.5:1)
   El negro casi puro de la ronda 1 (#211915 sobre #ffffff) daba contraste pero
   leia a cartel. Mismo reparto de masas, temperatura de nogal y laca.

   Ronda 3 (replanteamiento): la pieza son TRES piezas —cabecera con marca y
   titular, foto grande con la UI integrada, y CTA dinamico—. El zocalo bajo la
   foto desaparece entero y su altura se la queda la foto. Los scrims sobre la
   fotografia se pintan con el mismo nogal en alfa, no con negro: la temperatura
   es la misma en la banda solida y en el disco de una flecha. */
.ad {
  position: relative;
  width: 300px;
  height: 600px;
  overflow: hidden;
  color: #2b2016;
  background: #f8f4ee;
  border: 1px solid #ddd4c6;
  isolation: isolate;
}

.ad::after {
  content: "";
  position: absolute;
  z-index: 20;
  inset: 0;
  border: 1px solid #ddd4c6;
  pointer-events: none;
}

.state-input {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* El logotipo viene sin transparencia (wordmark sobre blanco): se multiplica
   sobre el papel para que no aparezca un recorte blanco alrededor.
   El multiply va en .brand y no en la imagen: .brand lleva z-index, o sea que
   abre contexto de apilamiento, y el backdrop de un hijo suyo seria transparente
   (mezcla nula). Aqui el grupo se mezcla contra el papel de .ad, que es lo que
   se quiere. Si un motor no soporta mix-blend-mode, degrada a la caja blanca de
   siempre: nada se rompe. */
.brand {
  position: absolute;
  z-index: 5;
  top: 18px;
  left: 18px;
  width: 126px;
  height: 24px;
  overflow: hidden;
  background: transparent;
  mix-blend-mode: multiply;
}

.brand img {
  display: block;
  width: 126px;
  height: 22px;
  object-fit: contain;
  object-position: left center;
}

/* Banda solida de nogal con el titular en crema, y NADA mas: este rectangulo es
   el elemento declarado `mensaje`, asi que lo que N-39 mide con Otsu es
   exactamente el par crema/nogal (13.9:1) y no una fotografia de interior claro.
   El aire real bajo el logo (22 px de papel) se conserva de la ronda 2.
   El left:-1 compensa el borde de 1px de .ad: la banda sale a sangre. */
.titular {
  position: absolute;
  z-index: 2;
  top: 64px;
  left: -1px;
  width: 300px;
  height: 64px;
  padding: 15px 18px 0;
  overflow: hidden;
  background: #2b2016;
  font-size: 26px;
}

.titular h1 {
  height: 35px;
  margin: 0;
  color: #f6efe3;
  font-size: inherit;
  font-weight: 600;
  line-height: 34px;
  /* -0.035em es el unico paso que deja "Encuentra tu espacio" en una linea
     dentro de los 264 px utiles (261,7 px medidos en los tres motores). */
  letter-spacing: -0.035em;
}

/* La foto llega desde la banda hasta el canal de papel del CTA: 400 px, los 302
   de la ronda 2 mas los 81 del zocalo suprimido mas los 17 del hueco que habia
   entre uno y otro. 300x400 es exactamente el 3:4 de los originales 900x1200:
   el `cover` ya no recorta nada. */
.stage {
  position: absolute;
  z-index: 2;
  top: 128px;
  left: -1px;
  width: 300px;
  height: 400px;
  overflow: hidden;
  background: #2b2016;
  perspective: 800px;
  touch-action: pan-y;
  cursor: grab;
  font-size: 12px;
}

.stage:active {
  cursor: grabbing;
}

.scene {
  --turn: 0deg;
  position: absolute;
  inset: 0;
  width: 300px;
  height: 400px;
  transform: translateZ(-150px) rotateY(var(--turn)) scale(1);
  transform-style: preserve-3d;
  transition: transform 800ms cubic-bezier(0, 0, 0.3, 1);
  animation: reveal-cube 1000ms cubic-bezier(0, 0, 0.3, 1);
}

@keyframes reveal-cube {
  0% {
    transform: translateZ(-150px) rotateY(var(--turn)) scale(1);
  }

  50% {
    transform: translateZ(-150px) rotateY(calc(var(--turn) - 45deg)) scale(0.8);
  }

  100% {
    transform: translateZ(-150px) rotateY(var(--turn)) scale(1);
  }
}

.ad.is-manual .scene {
  animation: none;
  transition: none;
}

.face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #ece5da;
  border-radius: 4px;
  backface-visibility: hidden;
}

.face--salon {
  transform: rotateY(0deg) translateZ(150px);
}

.face--dormitorio {
  transform: rotateY(90deg) translateZ(150px);
}

.face--comedor {
  transform: rotateY(180deg) translateZ(150px);
}

.face--iluminacion {
  transform: rotateY(270deg) translateZ(150px);
}

.face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tap-target {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: none;
  border-radius: 8px;
  outline: none;
}

.tap-target:focus-visible {
  box-shadow: inset 0 0 0 3px #f4e390;
}

/* --- UI integrada en la fotografia ---------------------------------------- */

/* Chapa de ambiente. Va arriba y a la izquierda, no centrada: las cuatro caras
   tienen pared clara en la banda alta, asi que las dos posiciones eran legibles
   y manda la composicion. A la izquierda la chapa cae en el mismo eje vertical
   que el logotipo, el titular y el CTA; centrada abria un quinto eje para nada.
   El left de 9 px pone el TEXTO en 19, que es donde empieza el logotipo. */
.chapa {
  position: absolute;
  z-index: 6;
  top: 12px;
  left: 9px;
  display: none;
  margin: 0;
  padding: 5px 10px;
  color: #f6efe3;
  background: rgba(43, 32, 22, 0.82);
  border-radius: 3px;
  font-size: inherit;
  line-height: 1.25;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
}

.chapa strong {
  font-weight: 600;
}

.chapa span {
  margin-left: 5px;
  color: #cfc2ae;
}

/* Flechas integradas: la caja tactil mide 44x44 y lo unico que se pinta es un
   disco de 34 con el chevron dentro, como resolvio enate-brand-stories. El
   scrim de nogal al 50 % mas el filo de crema mantienen el chevron legible tanto
   sobre la pared blanca del salon como sobre la madera oscura del comedor. */
.nav {
  display: none;
}

.nav__boton {
  position: absolute;
  z-index: 6;
  top: 178px;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: #f6efe3;
  background: transparent;
  border: 0;
  cursor: pointer;
  outline: none;
}

.nav__boton--anterior {
  left: 6px;
}

.nav__boton--siguiente {
  right: 6px;
}

.nav__boton::before {
  content: "";
  position: absolute;
  inset: 5px;
  background: rgba(43, 32, 22, 0.5);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(246, 239, 227, 0.45);
  transition: background-color 160ms ease, box-shadow 160ms ease;
}

.nav__boton:hover::before,
.nav__boton:focus-visible::before {
  background: rgba(43, 32, 22, 0.86);
  box-shadow: inset 0 0 0 1px rgba(246, 239, 227, 0.92);
}

.nav__boton:focus-visible::before {
  box-shadow: inset 0 0 0 1px rgba(246, 239, 227, 0.92), 0 0 0 2px #f4e390;
}

.nav__boton:active::before {
  background: #f4e390;
}

.nav__boton:active {
  color: #2b2016;
}

.chevron {
  position: relative;
  z-index: 1;
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

/* El giro desplaza la masa del chevron dentro de su caja: se recentra sobre el
   disco con una traslacion aplicada despues del giro. */
.chevron--anterior {
  rotate: -135deg;
  translate: 3px 0;
}

.chevron--siguiente {
  rotate: 45deg;
  translate: -3px 0;
}

/* Pista de gesto. La gramatica del corpus pide ritmo lento y un solo recurso
   saliente: la pista no arranca hasta que el revelado del cubo ha terminado
   (1000 ms), hace DOS ciclos de 800 ms y se desvanece. No hay movimiento
   perpetuo, y al primer gesto desaparece (.is-manual). El chevron se desplaza
   hacia la izquierda porque arrastrar hacia la izquierda es lo que avanza al
   ambiente siguiente, igual que la flecha derecha. */
.pista {
  position: absolute;
  z-index: 6;
  bottom: 16px;
  left: 50%;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 6px 14px;
  color: #f6efe3;
  background: rgba(43, 32, 22, 0.82);
  border-radius: 999px;
  font-size: inherit;
  line-height: 1.25;
  letter-spacing: 0.06em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  translate: -50% 0;
  animation:
    pista-aparece 300ms ease 1000ms both,
    pista-desaparece 400ms ease 2900ms forwards;
}

.pista__chevron {
  display: block;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  rotate: 45deg;
  animation: pista-desliza 800ms ease-in-out 1300ms 2;
}

@keyframes pista-aparece {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes pista-desaparece {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes pista-desliza {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: -5px 0;
  }
}

.ad.is-manual .pista {
  display: none;
}

/* --- estado ---------------------------------------------------------------- */

#face-salon:checked ~ #escena .scene {
  --turn: 0deg;
}

#face-dormitorio:checked ~ #escena .scene {
  --turn: -90deg;
}

#face-comedor:checked ~ #escena .scene {
  --turn: -180deg;
}

#face-iluminacion:checked ~ #escena .scene {
  --turn: -270deg;
}

#face-salon:checked ~ #escena .tap-target--salon,
#face-dormitorio:checked ~ #escena .tap-target--dormitorio,
#face-comedor:checked ~ #escena .tap-target--comedor,
#face-iluminacion:checked ~ #escena .tap-target--iluminacion {
  display: block;
}

#face-salon:checked ~ #escena .nav--salon,
#face-dormitorio:checked ~ #escena .nav--dormitorio,
#face-comedor:checked ~ #escena .nav--comedor,
#face-iluminacion:checked ~ #escena .nav--iluminacion {
  display: block;
}

#face-salon:checked ~ #escena .chapa--salon,
#face-dormitorio:checked ~ #escena .chapa--dormitorio,
#face-comedor:checked ~ #escena .chapa--comedor,
#face-iluminacion:checked ~ #escena .chapa--iluminacion {
  display: block;
}

.cta {
  position: absolute;
  z-index: 5;
  top: 542px;
  left: 18px;
  /* separado de la foto por papel: la foto va a sangre y el CTA flota a 264 */
  display: flex;
  width: 264px;
  height: 44px;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  color: #f6efe3;
  background: #2b2016;
  border: 1px solid #2b2016;
  border-radius: 4px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.cta:hover,
.cta:focus-visible {
  color: #2b2016;
  background: #f4e390;
}

.cta:active {
  color: #f6efe3;
  background: #1d150e;
  transform: scale(0.985);
}

.cta__copy {
  display: none;
}

.cta__arrow {
  position: relative;
  display: block;
  width: 18px;
  height: 10px;
}

.cta__arrow::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 15px;
  height: 2px;
  background: currentColor;
}

.cta__arrow::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 0;
  width: 7px;
  height: 8px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%, 30% 50%);
}

#face-salon:checked ~ #cta .cta__copy--salon,
#face-dormitorio:checked ~ #cta .cta__copy--dormitorio,
#face-comedor:checked ~ #cta .cta__copy--comedor,
#face-iluminacion:checked ~ #cta .cta__copy--iluminacion {
  display: inline;
}

.ad.no-3d .stage {
  perspective: none;
}

.ad.no-3d .scene {
  transform: none !important;
  transform-style: flat;
  animation: none;
}

.ad.no-3d .face {
  opacity: 0;
  transform: none;
  transition: opacity 240ms ease;
}

.ad.no-3d #face-salon:checked ~ #escena .face--salon,
.ad.no-3d #face-dormitorio:checked ~ #escena .face--dormitorio,
.ad.no-3d #face-comedor:checked ~ #escena .face--comedor,
.ad.no-3d #face-iluminacion:checked ~ #escena .face--iluminacion {
  z-index: 2;
  opacity: 1;
}

@supports not ((transform-style: preserve-3d) and (perspective: 800px)) {
  .stage {
    perspective: none;
  }

  .scene {
    transform: none !important;
    transform-style: flat;
    animation: none;
  }

  .face {
    opacity: 0;
    transform: none;
  }

  #face-salon:checked ~ #escena .face--salon,
  #face-dormitorio:checked ~ #escena .face--dormitorio,
  #face-comedor:checked ~ #escena .face--comedor,
  #face-iluminacion:checked ~ #escena .face--iluminacion {
    z-index: 2;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .scene {
    transform: translateZ(-150px) rotateY(var(--turn)) scale(1);
    animation: none;
    transition: none;
  }

  /* Sin movimiento la pista NO se anima: se queda quieta y visible. El reset de
     arriba dejaria correr sus dos animaciones en 0,01 ms y la de salida ganaria,
     asi que la pista desapareceria en vez de quedarse. Se anula explicitamente y
     se fija la opacidad final de entrada. */
  .pista {
    opacity: 1;
    animation: none;
  }

  .pista__chevron {
    animation: none;
  }
}