/* ==========================================================
   D’Nice — paleta tomada del logo: crema y negro.
   El blanco es para superficies y el topo solo para detalles chicos.
   ========================================================== */
:root {
  --crema: #F4ECE1;
  --crema-claro: #FAF6F0;
  --negro: #000000;
  --tinta: #141414;
  --tinta-suave: #50493F;
  --topo: #6B5843;
  --linea: #DCD0BF;
  --blanco: #FFFFFF;
  --crema-sobre-negro: #B9AE9F;

  --serif: "Bodoni Moda", Didot, "Bodoni 72", "Times New Roman", serif;
  --sans: "Jost", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif;

  --ancho: 1240px;
  --margen: clamp(20px, 4vw, 44px);
  --radio: 6px;

  /* Movimiento */
  --salida: cubic-bezier(.16, 1, .3, 1);
  --suave: cubic-bezier(.4, 0, .2, 1);
  --rapido: .25s;
  --medio: .5s;
  --lento: 1s;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--crema); color: var(--tinta);
  font-family: var(--sans); font-size: 17px; font-weight: 500; line-height: 1.6;
  /* Bodoni a tamaño de cartel tiene trazos finos casi invisibles; "opsz" 24 los engrosa. */
  font-variation-settings: "opsz" 24;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; line-height: 1.06; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--tinta); color: var(--crema); }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding-inline: var(--margen); }

.saltar {
  position: absolute; left: 12px; top: -60px; z-index: 60;
  background: var(--tinta); color: var(--crema); padding: 10px 16px; border-radius: 4px;
  transition: top var(--rapido) var(--suave);
}
.saltar:focus { top: 12px; }

/* ---------- Íconos (trazo, mismo grosor en todo el sitio) ---------- */
.icono {
  width: 1.2em; height: 1.2em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.icono--grande { width: 26px; height: 26px; }

/* ---------- Enlaces con subrayado que se dibuja ---------- */
.enlace {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px;
  padding-bottom: 2px;
  transition: background-size var(--medio) var(--salida);
}
.enlace:hover, .enlace:focus-visible { background-size: 100% 1px; }
.enlace--visible {
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--linea), var(--linea));
  background-size: 0 1px, 100% 1px;
}
.enlace--visible:hover, .enlace--visible:focus-visible { background-size: 100% 1px, 100% 1px; }

/* ---------- Botones ---------- */
.boton {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 28px; border-radius: 999px;
  font: 500 15px/1 var(--sans); letter-spacing: 0.04em; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; background: transparent;
  transition: color var(--medio) var(--salida), border-color var(--medio) var(--salida), transform var(--rapido) var(--suave);
}
/* Relleno que sube desde abajo al pasar el cursor */
.boton::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  transform: translateY(101%); transition: transform var(--medio) var(--salida);
}
.boton:hover::before, .boton:focus-visible::before { transform: none; }
.boton:active { transform: scale(.98); }
.boton--chico { min-height: 42px; padding: 0 20px; font-size: 14px; }

.boton--solido { background: var(--tinta); color: var(--crema); }
.boton--solido::before { background: var(--topo); }
.boton--contorno { border-color: var(--tinta); color: var(--tinta); }
.boton--contorno::before { background: var(--tinta); }
.boton--contorno:hover, .boton--contorno:focus-visible { color: var(--crema); }
.boton--claro { background: var(--crema); color: var(--tinta); }
.boton--claro::before { background: var(--blanco); }
.boton--contorno-claro { border-color: rgba(244, 236, 225, .55); color: var(--crema); }
.boton--contorno-claro::before { background: var(--crema); }
.boton--contorno-claro:hover, .boton--contorno-claro:focus-visible { color: var(--tinta); border-color: var(--crema); }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Encabezado ---------- */
.encabezado {
  position: sticky; top: 0; z-index: 30;
  background: rgba(244, 236, 225, .88);
  backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  padding-top: env(safe-area-inset-top, 0px);
  transition: border-color var(--medio) var(--suave), background-color var(--medio) var(--suave);
}
.encabezado--compacto { border-bottom-color: var(--linea); }
.encabezado__fila {
  display: flex; align-items: center; justify-content: space-between; gap: 16px 24px;
  padding-block: 14px; transition: padding var(--medio) var(--salida);
}
.encabezado--compacto .encabezado__fila { padding-block: 8px; }
.encabezado__logo { display: block; flex: none; }
.encabezado__logo img { height: 40px; width: auto; transition: height var(--medio) var(--salida); }
.encabezado--compacto .encabezado__logo img { height: 32px; }
.encabezado__nav-interior { display: flex; align-items: center; gap: 30px; font-size: 15px; }
.encabezado__nav-interior .enlace { padding-block: 6px 4px; }

.encabezado__menu {
  display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px;
  background: none; border: 0; color: var(--tinta); font: 500 15px/1 var(--sans); letter-spacing: .04em; cursor: pointer;
}
.encabezado__menu-icono { position: relative; width: 22px; height: 10px; }
.encabezado__menu-icono span {
  position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform var(--medio) var(--salida), top var(--medio) var(--salida);
}
.encabezado__menu-icono span:first-child { top: 0; }
.encabezado__menu-icono span:last-child { top: 8.5px; }
.encabezado__menu[aria-expanded="true"] .encabezado__menu-icono span:first-child { top: 4.25px; transform: rotate(45deg); }
.encabezado__menu[aria-expanded="true"] .encabezado__menu-icono span:last-child { top: 4.25px; transform: rotate(-45deg); }

@media (max-width: 760px) {
  .encabezado__logo img { height: 34px; }
  .encabezado--compacto .encabezado__logo img { height: 30px; }
  .encabezado__menu { display: inline-flex; }
  .encabezado__nav {
    position: absolute; left: 0; right: 0; top: 100%;
    display: grid; grid-template-rows: 0fr;
    background: var(--crema); border-bottom: 1px solid transparent;
    transition: grid-template-rows var(--medio) var(--salida), border-color var(--medio) var(--suave);
  }
  .encabezado__nav--abierto { grid-template-rows: 1fr; border-bottom-color: var(--linea); }
  .encabezado__nav-interior {
    overflow: hidden; flex-direction: column; align-items: stretch; gap: 0;
    padding-inline: var(--margen);
  }
  .encabezado__nav-interior .enlace {
    font-family: var(--serif); font-weight: 600; font-size: 30px; padding: 12px 0; background: none;
    border-bottom: 1px solid var(--linea);
    opacity: 0; transform: translateY(-8px);
    transition: opacity var(--medio) var(--suave), transform var(--medio) var(--salida);
  }
  .encabezado__nav-interior .boton { margin: 20px 0 24px; min-height: 52px; opacity: 0; transition: opacity var(--medio) var(--suave); }
  .encabezado__nav--abierto .enlace, .encabezado__nav--abierto .boton { opacity: 1; transform: none; }
  .encabezado__nav--abierto .enlace:nth-child(2) { transition-delay: 50ms; }
  .encabezado__nav--abierto .enlace:nth-child(3) { transition-delay: 100ms; }
  .encabezado__nav--abierto .boton { transition-delay: 150ms; }
}

/* ---------- Portada ---------- */
.portada {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 6vw, 88px); align-items: center;
  padding-block: clamp(32px, 6vw, 88px) clamp(56px, 8vw, 112px);
}
.portada__texto { display: grid; gap: 30px; }
.portada__titulo { font-size: clamp(2.9rem, 5.8vw, 5.2rem); letter-spacing: -0.02em; line-height: 1.02; max-width: 11ch; }
.palabra { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.palabra > span { display: inline-block; }
.portada__bajada { font-size: 19px; color: var(--tinta-suave); max-width: 38ch; }
.portada__escena { margin: 0; display: grid; gap: 16px; }
.portada__marco { border-radius: var(--radio); overflow: hidden; }
.portada__pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; font-size: 15px; color: var(--tinta-suave); }
.portada__nombre {
  all: unset; cursor: pointer; font-family: var(--serif); font-weight: 600; font-size: 22px; color: var(--tinta);
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--linea), var(--linea));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px, 100% 1px; padding-bottom: 3px;
  transition: background-size var(--medio) var(--salida);
}
.portada__nombre:hover, .portada__nombre:focus-visible { background-size: 100% 1px, 100% 1px; }
.portada__nombre:focus-visible { outline: 2px solid var(--tinta); outline-offset: 4px; }
.portada__rotulo { display: grid; gap: 4px; justify-items: start; }
.portada__etiqueta { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--topo); }
.portada__puntos { display: flex; gap: 2px; }
.portada__punto {
  width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; border-radius: 999px;
}
.portada__punto::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px;
  border: 1px solid var(--tinta); background: transparent;
  transition: background-color var(--rapido) var(--suave), transform var(--medio) var(--salida);
}
.portada__punto[aria-pressed="true"]::before { background: var(--tinta); transform: scale(1.15); }
.portada__punto:hover::before { background: var(--linea); }
.portada__punto[aria-pressed="true"]:hover::before { background: var(--tinta); }
.pista { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 860px) {
  .portada { grid-template-columns: 1fr; }
  .portada__texto { gap: 24px; }
}

/* Entrada de la portada: solo con JavaScript, una sola vez */
.js .palabra > span { transform: translateY(110%); }
.js .entra { opacity: 0; transform: translateY(14px); }
.js .portada__marco { clip-path: inset(100% 0 0 0 round var(--radio)); }
.js .escenario--portada { transform: scale(1.12); }
.cargado .palabra > span { transform: none; transition: transform 1.1s var(--salida); }
.cargado .palabra:nth-child(2) > span { transition-delay: 60ms; }
.cargado .palabra:nth-child(3) > span { transition-delay: 120ms; }
.cargado .palabra:nth-child(4) > span { transition-delay: 180ms; }
.cargado .palabra:nth-child(5) > span { transition-delay: 240ms; }
.cargado .palabra:nth-child(6) > span { transition-delay: 300ms; }
.cargado .palabra:nth-child(7) > span { transition-delay: 360ms; }
.cargado .palabra:nth-child(8) > span { transition-delay: 420ms; }
.cargado .palabra:nth-child(9) > span { transition-delay: 480ms; }
.cargado .entra {
  opacity: 1; transform: none;
  transition: opacity .9s var(--suave) var(--retraso, 0s), transform 1s var(--salida) var(--retraso, 0s);
}
.cargado .portada__marco { clip-path: inset(0 0 0 0 round var(--radio)); transition: clip-path 1.3s var(--salida) .2s; }
.cargado .escenario--portada { transform: none; transition: transform 2s var(--salida) .2s; }

/* ---------- Escenario (foto o modelo 3D) ---------- */
.escenario { position: relative; background: var(--crema-claro); overflow: hidden; }
.escenario > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity .6s var(--suave);
}
.escenario > img.entrando { opacity: 0; }
.escenario--portada { aspect-ratio: 4 / 5; width: 100%; max-height: max(360px, calc(100svh - 230px)); }
/* En el visor la foto se muestra completa sobre un paspartú crema, sin importar su proporción */
.escenario--visor { aspect-ratio: 4 / 3; --paspartu: clamp(12px, 2.2vw, 28px); touch-action: pan-y; }
.escenario--visor.escenario--foto > img {
  inset: var(--paspartu); width: calc(100% - 2 * var(--paspartu)); height: calc(100% - 2 * var(--paspartu));
}
.escenario--modelo { background: var(--blanco); }
.escenario model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; --poster-color: transparent; }
.escenario__aviso { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; text-align: center; color: var(--tinta-suave); font-size: 15px; }
@media (max-width: 860px) { .escenario--portada { aspect-ratio: 1 / 1; } }

/* ---------- Revelado al hacer scroll ---------- */
.js .revelar { opacity: 0; transform: translateY(22px); }
.revelar.visible {
  opacity: 1; transform: none;
  transition: opacity .9s var(--suave) calc(var(--i, 0) * 90ms), transform 1.1s var(--salida) calc(var(--i, 0) * 90ms);
}

/* ---------- Catálogo ---------- */
.catalogo { background: var(--blanco); padding-block: clamp(64px, 9vw, 120px); }
.catalogo__cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.catalogo h2, .pasos h2, .visita h2 { font-size: clamp(2.3rem, 4.2vw, 3.6rem); }
.catalogo__conteo { color: var(--tinta-suave); font-size: 15px; font-variant-numeric: lining-nums; }

.filtros { display: flex; gap: 10px; margin: 28px 0 44px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.filtros::-webkit-scrollbar { display: none; }
.filtros button {
  flex: none; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 20px 0 16px; border-radius: 999px; cursor: pointer;
  font: 400 15px/1 var(--sans); letter-spacing: 0.02em;
  background: transparent; color: var(--tinta); border: 1px solid var(--linea);
  transition: background-color var(--medio) var(--salida), color var(--medio) var(--salida), border-color var(--medio) var(--salida);
}
.filtros button:hover { border-color: var(--tinta); }
.filtros button[aria-pressed="true"] { background: var(--tinta); color: var(--crema); border-color: var(--tinta); }

.rejilla {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(36px, 4vw, 56px) clamp(16px, 2.4vw, 32px);
}
.tarjeta { display: grid; gap: 14px; align-content: start; }
.js .tarjeta { opacity: 0; transform: translateY(26px); }
.tarjeta.visible {
  opacity: 1; transform: none;
  transition: opacity .8s var(--suave) calc(var(--i, 0) * 80ms), transform 1s var(--salida) calc(var(--i, 0) * 80ms);
}
.tarjeta__abrir { all: unset; cursor: pointer; display: grid; gap: 16px; border-radius: var(--radio); }
.tarjeta__abrir:focus-visible { outline: 2px solid var(--tinta); outline-offset: 5px; }
.tarjeta__foto { position: relative; aspect-ratio: 1 / 1; background: var(--crema); border-radius: var(--radio); overflow: hidden; }
.tarjeta__foto img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.02);
  transition: opacity .7s var(--suave), transform 1.4s var(--salida);
}
.tarjeta__foto img.cargada { opacity: 1; transform: none; }
.tarjeta__abrir:hover .tarjeta__foto img.cargada,
.tarjeta__abrir:focus-visible .tarjeta__foto img.cargada { transform: scale(1.05); }
/* Segunda foto: aparece al pasar el mouse */
.tarjeta__foto img.tarjeta__foto-alterna.cargada { opacity: 0; }
@media (hover: hover) {
  .tarjeta__abrir:hover .tarjeta__foto img.tarjeta__foto-alterna.cargada,
  .tarjeta__abrir:focus-visible .tarjeta__foto img.tarjeta__foto-alterna.cargada { opacity: 1; }
}
.tarjeta { position: relative; }
.tarjeta__guardar {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 44px; height: 44px; border-radius: 999px; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(250, 246, 240, .92); color: var(--tinta); border: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
  transition: transform var(--rapido) var(--suave), background-color var(--rapido) var(--suave);
}
.tarjeta__guardar:hover { background: var(--blanco); }
.tarjeta__guardar:active { transform: scale(.9); }
.tarjeta__guardar .icono { width: 21px; height: 21px; transition: fill var(--rapido) var(--suave); }
.icono--lleno,
.tarjeta__guardar[aria-pressed="true"] .icono,
#visor-guardar[aria-pressed="true"] .icono { fill: currentColor; }
.tarjeta__guardar[aria-pressed="true"] .icono { animation: latido .45s var(--salida); }
@keyframes latido { 40% { transform: scale(1.25); } }
.tarjeta__sellos { position: absolute; left: 12px; top: 12px; display: flex; gap: 6px; }
.tarjeta__ver {
  position: absolute; left: 14px; bottom: 14px; padding: 9px 16px 9px 13px;
  display: inline-flex; align-items: center; gap: 8px; border-radius: 999px;
  background: rgba(244, 236, 225, .94); color: var(--tinta); font-size: 14px; letter-spacing: .02em;
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--medio) var(--suave), transform var(--medio) var(--salida);
}
.tarjeta__abrir:hover .tarjeta__ver, .tarjeta__abrir:focus-visible .tarjeta__ver { opacity: 1; transform: none; }
@media (hover: none) { .tarjeta__ver { opacity: 1; transform: none; } }
.tarjeta__sello {
  padding: 6px 12px 6px 9px;
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
  background: rgba(250, 246, 240, .92); color: var(--tinta); font-size: 13px; font-weight: 500; letter-spacing: 0.04em;
}
.tarjeta__sello--oscuro { background: var(--tinta); color: var(--crema); letter-spacing: .06em; }
.tarjeta__nombre {
  justify-self: start; font-family: var(--serif); font-weight: 600; font-size: 25px; line-height: 1.15;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px;
  transition: background-size .6s var(--salida);
}
.tarjeta__abrir:hover .tarjeta__nombre { background-size: 100% 1px; }
.tarjeta__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; color: var(--tinta-suave); font-size: 15px; margin-top: -8px; }
.tarjeta__medidas { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: lining-nums; }
.tarjeta__medidas .icono { width: 16px; height: 16px; }
.tarjeta__wa { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; text-decoration: none; min-height: 32px; }
.tarjeta__wa .icono { width: 18px; height: 18px; }
.tarjeta__wa:hover .enlace, .tarjeta__wa:focus-visible .enlace { background-size: 100% 1px, 100% 1px; }

/* Cambio de categoría (navegadores con View Transitions) */
::view-transition-group(*) { animation-duration: .55s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }

/* ---------- Nosotros: razones ---------- */
.razones { padding-block: clamp(64px, 9vw, 120px); }
.razones__interior {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px); align-items: start;
}
.razones__cabeza { display: grid; gap: 20px; position: sticky; top: 110px; }
.razones__antetitulo { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--topo); }
.razones h2 { font-size: clamp(2.2rem, 3.8vw, 3.3rem); }
.razones__bajada { color: var(--tinta-suave); max-width: 40ch; }
.razones__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 40px clamp(24px, 3vw, 44px);
}
.razon { display: grid; gap: 10px; align-content: start; padding-top: 22px; border-top: 1px solid var(--linea); }
.razon__icono {
  width: 50px; height: 50px; border-radius: 999px; display: grid; place-items: center; margin-bottom: 6px;
  background: var(--crema-claro); border: 1px solid var(--linea); color: var(--tinta);
}
.razon__icono .icono { width: 24px; height: 24px; }
.razon h3 { font-size: 25px; }
.razon p { color: var(--tinta-suave); font-size: 16px; }
@media (max-width: 860px) {
  .razones__interior { grid-template-columns: 1fr; }
  .razones__cabeza { position: static; }
}

/* ---------- Cómo comprar ---------- */
.pasos { background: var(--blanco); padding-block: clamp(56px, 7vw, 96px); }
.pasos__interior { display: grid; gap: 36px; }
.pasos__lista {
  list-style: none; margin: 0; padding: 0; counter-reset: paso;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 32px clamp(24px, 3vw, 44px);
}
.pasos__lista li {
  counter-increment: paso; padding-top: 20px; display: grid; grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 6px; align-content: start;
  background: linear-gradient(var(--tinta), var(--tinta)) no-repeat 0 0 / 100% 1px;
}
.js .pasos__lista li { background-size: 0 1px; }
.pasos__lista li.visible { background-size: 100% 1px; transition: opacity .9s var(--suave) calc(var(--i) * 120ms), transform 1.1s var(--salida) calc(var(--i) * 120ms), background-size 1.4s var(--salida) calc(var(--i) * 120ms + .1s); }
.pasos__lista li::before { content: counter(paso); grid-row: 1 / 3; font-family: var(--serif); font-weight: 600; font-size: 46px; line-height: .9; color: var(--topo); }
.pasos__lista h3 { font-size: 27px; }
.pasos__lista p { grid-column: 2; color: var(--tinta-suave); max-width: 36ch; }

/* ---------- Visita ---------- */
.visita { background: var(--negro); color: var(--crema); padding-block: clamp(64px, 9vw, 120px); }
.visita__fila { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; justify-content: space-between; }
.visita__texto { display: grid; gap: 30px; flex: 1 1 440px; }
.visita__datos { display: grid; gap: 14px; margin: 0; }
.visita__datos > div { display: grid; grid-template-columns: 13rem 1fr; gap: 16px; }
.visita__datos dt { color: var(--crema-sobre-negro); display: flex; align-items: center; gap: 10px; align-self: start; }
.visita__datos dd { margin: 0; white-space: pre-line; }
.visita__logo { width: min(100%, 380px); flex: 0 1 380px; }
@media (max-width: 520px) { .visita__datos > div { grid-template-columns: 1fr; gap: 2px; } }

.pie { background: var(--negro); color: var(--crema-sobre-negro); border-top: 1px solid #2B2B2B; font-size: 14px; padding-bottom: env(safe-area-inset-bottom, 0px); }
.pie__credito { color: var(--crema); padding-bottom: 2px; }
.pie__fila { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 24px; }

/* ---------- WhatsApp flotante (celular) ---------- */
.wa-flotante {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 25;
  width: 58px; height: 58px; border-radius: 999px; display: none; place-items: center;
  background: var(--tinta); color: var(--crema); box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
  opacity: 0; transform: translateY(18px) scale(.9); pointer-events: none;
  transition: opacity var(--medio) var(--suave), transform var(--medio) var(--salida);
}
.wa-flotante--visible { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 760px) { .wa-flotante { display: grid; } }

/* ---------- Visor de producto ---------- */
.visor {
  padding: 0; border: 0; background: var(--blanco); color: var(--tinta);
  width: min(1120px, 100vw - 40px); max-width: none; max-height: calc(100dvh - 40px);
  border-radius: 10px; overflow: auto; overscroll-behavior: contain;
  opacity: 0; transform: translateY(18px) scale(.985);
  transition: opacity .35s var(--suave), transform .55s var(--salida), overlay .55s allow-discrete, display .55s allow-discrete;
}
.visor[open] { opacity: 1; transform: none; }
@starting-style { .visor[open] { opacity: 0; transform: translateY(18px) scale(.985); } }
.visor::backdrop {
  background: rgba(12, 10, 8, 0); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);
  transition: background-color .45s var(--suave), backdrop-filter .45s var(--suave), overlay .45s allow-discrete, display .45s allow-discrete;
}
.visor[open]::backdrop { background: rgba(12, 10, 8, .5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
@starting-style { .visor[open]::backdrop { background: rgba(12, 10, 8, 0); backdrop-filter: blur(0px); } }

.visor__marco { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); position: relative; min-height: 100%; }
.visor__medios { display: grid; align-content: start; background: var(--crema-claro); }
.visor__escena-marco { position: relative; }
.visor__flecha {
  position: absolute; top: 50%; z-index: 2; translate: 0 -50%;
  width: 44px; height: 44px; border-radius: 999px; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); color: var(--tinta); border: 1px solid var(--linea);
  transition: background-color var(--rapido) var(--suave), transform var(--rapido) var(--suave);
}
.visor__flecha:hover { background: var(--blanco); }
.visor__flecha:active { transform: scale(.92); }
.visor__flecha .icono { width: 20px; height: 20px; }
.visor__flecha--anterior { left: 12px; }
.visor__flecha--siguiente { right: 12px; }
.visor__miniaturas { display: flex; gap: 8px; padding: 12px; overflow-x: auto; }
.visor__mini {
  flex: none; width: 64px; height: 64px; padding: 0; border-radius: 4px; overflow: hidden; cursor: pointer;
  border: 1px solid var(--linea); background: var(--blanco); color: var(--tinta);
  font: 500 15px/1 var(--sans); display: grid; place-items: center;
  opacity: .7; transition: opacity var(--rapido) var(--suave), outline-color var(--rapido) var(--suave);
  outline: 2px solid transparent; outline-offset: 1px;
}
.visor__mini:hover { opacity: 1; }
.visor__mini img { width: 100%; height: 100%; object-fit: cover; }
.visor__mini[aria-pressed="true"] { opacity: 1; outline-color: var(--tinta); }
.visor__cerrar {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--linea);
  background: rgba(255, 255, 255, .92); color: var(--tinta); display: grid; place-items: center; cursor: pointer;
  transition: transform var(--medio) var(--salida), background-color var(--rapido) var(--suave);
}
.visor__cerrar:hover { transform: rotate(90deg); background: var(--blanco); }
.visor__info { padding: clamp(28px, 3.4vw, 48px); display: grid; gap: 18px; align-content: center; background: var(--crema); }
.visor__info > * { transition: opacity .6s var(--suave), transform .8s var(--salida); }
@starting-style {
  .visor[open] .visor__info > * { opacity: 0; transform: translateY(10px); }
}
.visor__info h2 { font-size: clamp(2.1rem, 3.2vw, 2.8rem); }
.visor__categoria { color: var(--topo); font-size: 15px; }
.visor__datos { display: grid; gap: 6px; margin: 4px 0 8px; font-size: 15px; }
.visor__datos > div { display: grid; grid-template-columns: 7rem 1fr; gap: 16px; }
.visor__datos dt { color: var(--tinta-suave); display: flex; align-items: center; gap: 8px; }
.visor__datos dd { margin: 0; font-variant-numeric: lining-nums; }
.medida { white-space: nowrap; }
.visor__acciones { display: grid; gap: 10px; }
.visor__secundarias { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.visor__secundarias .boton { padding: 0 14px; white-space: nowrap; }
.visor__pista { font-size: 14px; color: var(--tinta-suave); }
.visor__pista:empty { display: none; }

/* ---------- Barra "Mi lista" ---------- */
.lista-barra {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 26;
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 10px 0 20px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--tinta); color: var(--crema); font: 500 15px/1 var(--sans); letter-spacing: .04em;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .24);
  opacity: 0; transform: translate(-50%, 24px); pointer-events: none;
  transition: opacity var(--medio) var(--suave), transform var(--medio) var(--salida);
}
.lista-barra--visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.lista-barra:active { transform: translate(-50%, 0) scale(.97); }
.lista-barra .icono { width: 20px; height: 20px; }
.lista-barra__conteo {
  min-width: 32px; height: 32px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center;
  background: var(--crema); color: var(--tinta); font-variant-numeric: lining-nums tabular-nums;
}

/* ---------- Ventana "Mi lista" ---------- */
.lista {
  padding: 0; border: 0; background: var(--crema); color: var(--tinta);
  width: min(520px, 100vw - 40px); max-width: none; max-height: calc(100dvh - 40px);
  border-radius: 10px; overflow: auto; overscroll-behavior: contain;
  opacity: 0; transform: translateY(18px) scale(.985);
  transition: opacity .35s var(--suave), transform .55s var(--salida), overlay .55s allow-discrete, display .55s allow-discrete;
}
.lista[open] { opacity: 1; transform: none; }
@starting-style { .lista[open] { opacity: 0; transform: translateY(18px) scale(.985); } }
.lista::backdrop {
  background: rgba(12, 10, 8, 0);
  transition: background-color .45s var(--suave), overlay .45s allow-discrete, display .45s allow-discrete;
}
.lista[open]::backdrop { background: rgba(12, 10, 8, .5); }
@starting-style { .lista[open]::backdrop { background: rgba(12, 10, 8, 0); } }
.lista__marco { display: grid; gap: 20px; padding: clamp(24px, 4vw, 36px); }
.lista__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lista__cabeza h2 { font-size: 36px; }
.lista__cerrar, .lista__quitar {
  flex: none; width: 44px; height: 44px; border-radius: 999px; padding: 0; cursor: pointer;
  display: grid; place-items: center; background: transparent; color: var(--tinta); border: 1px solid var(--linea);
  transition: background-color var(--rapido) var(--suave);
}
.lista__cerrar:hover, .lista__quitar:hover { background: var(--crema-claro); }
.lista__quitar { width: 40px; height: 40px; border-color: transparent; }
.lista__quitar .icono { width: 18px; height: 18px; }
.lista__vacia { color: var(--tinta-suave); }
.lista__piezas { list-style: none; margin: 0; padding: 0; display: grid; }
.lista__pieza {
  display: grid; grid-template-columns: 72px 1fr auto; gap: 16px; align-items: center;
  padding-block: 14px; border-top: 1px solid var(--linea);
}
.lista__pieza:last-child { border-bottom: 1px solid var(--linea); }
.lista__pieza img { width: 72px; height: 72px; object-fit: cover; border-radius: 4px; background: var(--crema-claro); }
.lista__texto { display: grid; gap: 2px; min-width: 0; }
.lista__nombre {
  all: unset; cursor: pointer; justify-self: start; font-family: var(--serif); font-weight: 600; font-size: 21px; line-height: 1.2;
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
  background-position: 0 100%; background-size: 0 1px; transition: background-size var(--medio) var(--salida);
}
.lista__nombre:hover, .lista__nombre:focus-visible { background-size: 100% 1px; }
.lista__nombre:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.lista__detalle { font-size: 14px; color: var(--tinta-suave); }
.lista__pie { display: grid; gap: 14px; justify-items: center; }
.lista__pie .boton { width: 100%; }
.lista__vaciar { all: unset; cursor: pointer; font-size: 14px; color: var(--tinta-suave); }
.lista__vaciar:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }

/* ---------- Aviso breve ---------- */
.aviso {
  position: fixed; left: 50%; top: calc(16px + env(safe-area-inset-top, 0px)); z-index: 70;
  max-width: calc(100vw - 32px); padding: 12px 20px; border-radius: 999px;
  background: var(--tinta); color: var(--crema); font-size: 15px; text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
  opacity: 0; transform: translate(-50%, -12px); pointer-events: none;
  transition: opacity var(--rapido) var(--suave), transform var(--medio) var(--salida);
}
.aviso:empty { display: none; }
.aviso--visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 760px) {
  /* En el celular el visor sube desde abajo como una hoja */
  .visor {
    width: 100vw; max-height: 94dvh; margin: auto 0 0; border-radius: 16px 16px 0 0;
    transform: translateY(100%);
  }
  .visor[open] { transform: none; }
  @starting-style { .visor[open] { transform: translateY(100%); } }
  .visor__marco { grid-template-columns: 1fr; }
  .escenario--visor { aspect-ratio: var(--proporcion, 1); --paspartu: 0px; }
  .visor__flecha { width: 40px; height: 40px; }
  .visor__info { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
  /* "Mi lista" también sube desde abajo */
  .lista {
    width: 100vw; max-height: 88dvh; margin: auto 0 0; border-radius: 16px 16px 0 0;
    transform: translateY(100%);
  }
  .lista[open] { transform: none; }
  @starting-style { .lista[open] { transform: translateY(100%); } }
  .lista__marco { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after, ::backdrop {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0s !important;
  }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}