/* G5KINGSS — landing catálogo. El mundo de sus historias de Instagram: cemento oscuro con la marca de agua
   del logo, tarjetas blancas redondeadas, títulos anchos en mayúsculas y el @ al pie. */

:root {
  --negro: #1a1a1a;
  --oscuro: #262626;
  --oscuro-2: #303030;
  --claro: #e4e4e4;
  --gris: #cfcfcf;
  --blanco: #ffffff;
  --tinta: #141414;
  --tinta-suave: #4a4a4a;
  --tinta-clara: #f2f2f2;
  --tinta-clara-suave: #b9b9b9;
  --verde: #25d366;
  --verde-hover: #2ee072;
  --verde-tinta: #0b3d1f;

  --letra: "Anybody", system-ui, sans-serif;
  --titulo: "Anybody", system-ui, sans-serif;
  --ancho: 135%;
  --ancho-texto: 110%;
  --alto-barra: 76px;
  --alto-grande: 300px;
  --logo-grande: 380px;
  --logo-chico: 132px;
  --logo-escala: 0.3474; /* logo-chico / logo-grande */

  --t-display: clamp(42px, 5.4vw, 88px);
  --t-titulo: clamp(30px, 3.4vw, 54px);
  --t-nombre: clamp(17px, 1.35vw, 21px);
  --t-texto: 16px;
  --t-chico: 14px;

  --margen: clamp(16px, 2.5vw, 36px);
  --separacion: clamp(88px, 10vw, 168px);
  --radio: 22px;
  --radio-foto: 14px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-barra) + 8px); -webkit-text-size-adjust: 100%; overflow-x: clip; -webkit-tap-highlight-color: transparent; }
/* Sin el recuadro azul de Android al tocar (cada botón ya tiene su propia respuesta al tocar) y sin la espera del doble toque */
a, button, select, [role="button"] { touch-action: manipulation; }
/* Enlace para saltar directo al catálogo con el teclado: invisible hasta que recibe el foco */
.saltar {
  position: fixed; left: 12px; top: 12px; z-index: 60; padding: 10px 16px; border-radius: 999px;
  background: var(--blanco); color: var(--tinta); font-weight: 700; text-decoration: none;
  translate: 0 -160%; transition: translate 200ms var(--ease-out);
}
.saltar:focus-visible { translate: none; }
body {
  margin: 0;
  background: var(--claro);
  color: var(--tinta);
  font-family: var(--letra);
  font-stretch: var(--ancho-texto);
  font-weight: 450;
  letter-spacing: 0.005em;
  font-size: var(--t-texto);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; font-stretch: inherit; }
figure { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--titulo); font-stretch: var(--ancho); text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }
::selection { background: var(--tinta); color: var(--blanco); }

/* ---------- Fondos de marca ---------- */
.fondo-marca {
  background-color: var(--oscuro);
  background-image: url("img/patron-oscuro.png"), url("img/cemento-oscuro.webp");
  background-size: 520px, 700px;
  color: var(--tinta-clara);
}
.fondo-claro {
  background-color: var(--claro);
  background-image: url("img/patron-claro.png"), url("img/cemento-claro.webp");
  background-size: 520px, 700px;
}

/* ---------- Tarjeta tipo historia ---------- */
.historia {
  background: var(--blanco);
  color: var(--tinta);
  border-radius: var(--radio);
  text-align: center;
}
.historia-titulo {
  font-weight: 800; font-family: var(--titulo); font-stretch: var(--ancho); text-transform: uppercase;
  letter-spacing: 0; line-height: 1.12;
}
.historia-arroba {
  font-weight: 800; font-family: var(--titulo); font-stretch: var(--ancho); font-size: var(--t-chico);
  letter-spacing: -0.01em; color: var(--tinta);
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 28px;
  border: 0; border-radius: 999px;
  font: 800 16px/1 var(--titulo); font-stretch: 115%;
  text-decoration: none; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.boton:active { transform: scale(0.97); }
.boton-chico { min-height: 42px; padding: 0 18px; font-size: 16px; }
.boton-wsp { background: var(--verde); color: var(--verde-tinta); }
.boton-claro { background: var(--blanco); color: var(--tinta); }
.boton-oscuro { background: var(--tinta); color: var(--tinta-clara); }
/* Instagram: con el degradado de la marca para que se reconozca al tiro */
.boton-instagram {
  color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / 0.18);
  background: radial-gradient(circle at 18% 120%, #fdf497 0%, #fdf497 6%, #fd5949 42%, #d6249f 62%, #285aeb 100%);
  transition: transform 160ms var(--ease-out), filter 200ms ease;
}
@media (hover: hover) and (pointer: fine) { .boton-instagram:hover { filter: brightness(1.08) saturate(1.1); } }
@media (hover: hover) and (pointer: fine) {
  .boton-wsp:hover { background: var(--verde-hover); }
  .boton-claro:hover { background: var(--gris); }
  .boton-oscuro:hover { background: #333; }
}

/* ---------- Cabeceras de sección ---------- */
.cabeza { text-align: center; max-width: 900px; margin: 0 auto clamp(48px, 5vw, 80px); }
.cabeza h2 {
  font-size: var(--t-display); font-weight: 900; text-transform: uppercase;
  line-height: 0.95; letter-spacing: -0.02em;
}
.cabeza p { margin: 24px auto 0; max-width: 52ch; }
.cabeza-clara p { color: var(--tinta-clara); }

/* ---------- Barra superior: arriba es grande con el logo neón al centro; al bajar se achica, el logo
   queda chico al centro y entran los enlaces a cada lado. app.js solo escribe --p (0 = grande, 1 = chica). ---------- */
.barra {
  position: fixed; inset: 0 0 auto 0; z-index: 30; height: var(--alto-barra);
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  padding: 0 var(--margen);
  color: var(--tinta-clara);
}
.barra-fondo {
  /* Siempre mide lo de la barra grande y se desliza hacia arriba (transform, sin recalcular el diseño):
     se ve igual que si se achicara, pero no obliga al navegador a medir de nuevo en cada cuadro del scroll */
  position: absolute; inset: 0 0 auto 0; z-index: -1; pointer-events: none;
  height: var(--alto-grande);
  background: rgb(18 18 18 / 0.78);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.06);
}
@media (prefers-reduced-transparency: reduce) { .barra-fondo { background: var(--negro); backdrop-filter: none; -webkit-backdrop-filter: none; } }
.barra-marca {
  /* Fijo en su lugar de la barra grande; al bajar, app.js solo lo traslada y lo achica desde su centro de arriba
     (así queda centrado todo el camino) */
  position: absolute; display: block; width: var(--logo-grande); transform-origin: 50% 0;
  left: calc(50% - var(--logo-grande) / 2);
  top: calc((var(--alto-grande) - var(--logo-grande) * 0.305) / 2);
  /* capa propia: el brillo neón (4 sombras difusas) se dibuja una vez y no en cada cuadro del scroll */
  will-change: transform;
}
.barra-logo { width: 100%; height: auto; }
/* Neón: el mismo logo con varias capas de brillo blanco; se apaga a medida que la barra se achica */
.barra-neon {
  position: absolute; inset: 0;
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 10px rgb(255 255 255 / 0.85)) drop-shadow(0 0 26px rgb(255 255 255 / 0.55)) drop-shadow(0 0 60px rgb(255 255 255 / 0.35));
  animation: encender 1500ms 300ms backwards;
}
@keyframes encender {
  0% { opacity: 0; } 7% { opacity: 0.9; } 11% { opacity: 0.1; } 18% { opacity: 1; } 24% { opacity: 0.35; } 30% { opacity: 0.35; } 38%, 100% { opacity: 1; }
}
/* Enlaces y botones: escondidos en la barra grande, entran en cascada cuando se achica */
.barra-links li, .barra-wsp, .barra-menu {
  opacity: 0; translate: 0 -8px; filter: blur(4px); visibility: hidden;
  transition: opacity 200ms ease, translate 200ms ease, filter 200ms ease, visibility 0s 200ms, transform 160ms var(--ease-out), background-color 200ms ease;
}
.barra.compacta :is(.barra-links li, .barra-wsp, .barra-menu) {
  opacity: 1; translate: none; filter: none; visibility: visible;
  transition: opacity 300ms ease, translate 360ms var(--ease-out), filter 300ms ease, visibility 0s, transform 160ms var(--ease-out), background-color 200ms ease;
  transition-delay: calc(var(--i, 0) * 45ms), calc(var(--i, 0) * 45ms), calc(var(--i, 0) * 45ms), calc(var(--i, 0) * 45ms), 0s, 0s;
}
.barra-wsp { --i: 2; } .barra-menu { --i: 0; }
.barra-links { display: flex; gap: 28px; }
.barra-der { margin-left: auto; }
.barra-links a { text-decoration: none; font-size: var(--t-chico); font-weight: 600; letter-spacing: 0.01em; color: var(--tinta-clara); transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .barra-links a:hover { color: var(--tinta-clara-suave); } }
.barra-menu { display: none; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.12); color: var(--tinta-clara); cursor: pointer; transition: transform 100ms ease-out; }
.barra-menu:active { transform: scale(0.94); }

/* ---------- Portada, al estilo de una página de producto: todo centrado, el mazo es el producto ---------- */
.portada { min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; padding-top: var(--alto-grande); }
.portada-cuerpo {
  flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(24px, 4vw, 56px) var(--margen) clamp(32px, 5vw, 72px);
}
.portada-texto { display: flex; flex-direction: column; align-items: center; }
.portada h1 {
  font-size: var(--t-display); font-weight: 800; text-transform: uppercase;
  line-height: 0.95; letter-spacing: -0.025em;
}
.portada-bajada { margin: 22px auto 30px; max-width: 46ch; font-size: var(--t-nombre); line-height: 1.45; color: var(--tinta-clara); }
.portada-acciones { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; }
.enlace-flecha { font-weight: 700; color: var(--tinta-clara); text-decoration: none; font-size: 17px; }
.enlace-flecha span { display: inline-block; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .enlace-flecha:hover span { transform: translateX(4px); } }
/* Mazo de pares destacados: se inclina con el mouse, la de adelante se pasa tocando o deslizando */
.abanico {
  position: relative; width: 100%; height: min(58svh, 540px); margin-top: clamp(16px, 3vw, 40px); perspective: 1600px;
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline-offset: 12px;
}
.abanico.arrastrando { cursor: grabbing; }
.mazo { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.historia-mini {
  position: absolute; top: 50%; left: 50%;
  width: min(300px, 46%); padding: 22px 16px 18px;
  box-shadow: 0 30px 60px rgb(0 0 0 / 0.45);
  transition: transform 700ms cubic-bezier(0.32, 0.72, 0, 1), opacity 500ms ease, filter 500ms ease, visibility 500ms;
}
.historia-mini.suelta { transition: none; }
.historia-mini .historia-titulo { font-size: clamp(14px, 1.3vw, 19px); }
.historia-mini img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radio-foto); margin: 16px 0 14px; background: #000; pointer-events: none; }
/* Brillo que sigue al mouse sobre la carta de adelante, como un vidrio */
.historia-mini::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--bx, 50%) var(--by, 30%), rgb(255 255 255 / 0.35), transparent 55%);
  mix-blend-mode: soft-light; opacity: 0; transition: opacity 400ms ease;
}
@media (hover: hover) and (pointer: fine) { .abanico:hover .historia-mini.delante::after { opacity: 1; } }
.historia-mini .historia-arroba { font-size: var(--t-chico); }

/* ---------- Cinta ---------- */

/* ---------- Catálogo ---------- */
.catalogo { padding: var(--separacion) var(--margen); }
/* Ruta (migas): aparece al entrar a una marca y queda pegada arriba */
.catalogo { scroll-margin-top: 0; }
.ruta {
  position: sticky; top: var(--alto-barra); z-index: 6;
  display: flex; align-items: center; gap: 16px;
  margin: 0 calc(var(--margen) * -1) clamp(32px, 4vw, 56px); padding: 10px var(--margen);
  background: rgb(20 20 20 / 0.72); color: var(--tinta-clara);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
}
@media (prefers-reduced-transparency: reduce) { .ruta { background: var(--tinta); backdrop-filter: none; -webkit-backdrop-filter: none; } }
.ruta[hidden] { display: none; }
.ruta-atras {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px 0 12px; border-radius: 999px;
  background: var(--blanco); color: var(--tinta); text-decoration: none;
  font-weight: 800; font-family: var(--titulo); font-stretch: 115%; font-size: var(--t-chico); text-transform: uppercase;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.ruta-atras:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .ruta-atras:hover { background: var(--gris); } }
.ruta-migas { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; white-space: nowrap; font-weight: 700; font-size: var(--t-chico); }
.ruta-migas a { color: var(--tinta-clara-suave); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .ruta-migas a:hover { color: var(--tinta-clara); } }
.ruta-migas [aria-current] { color: var(--tinta-clara); text-transform: uppercase; font-family: var(--titulo); font-stretch: 115%; overflow: hidden; text-overflow: ellipsis; }
.ruta-sep { color: #6a6a6a; }

.vista-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.vista-cabeza h3 { font-size: var(--t-titulo); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; }
.vista-cabeza p { font-weight: 700; color: var(--tinta-suave); white-space: nowrap; }

/* Tarjetas de marca y de modelo: abren el siguiente nivel */
.tarjetas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tarjeta {
  display: flex; flex-direction: column; padding: 10px 10px 18px; text-decoration: none;
  animation: aparecer 500ms var(--ease-out) both; animation-delay: calc(var(--n, 0) * 40ms);
  transition: transform 300ms var(--ease-out);
}
.tarjeta:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .tarjeta:hover { transform: translateY(-4px) rotate(-0.6deg); }
  .tarjeta:hover .tarjeta-foto img { transform: scale(1.05); }
}
.tarjeta-foto { display: block; aspect-ratio: 3 / 2; border-radius: var(--radio-foto); overflow: hidden; background: #000; }
.tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 250ms var(--ease-out); }
.tarjeta-titulo { margin-top: 14px; font-size: var(--t-nombre); }
.tarjeta-titulo { overflow-wrap: anywhere; }
.tarjeta-dato { margin-top: 4px; font-size: var(--t-chico); font-weight: 600; color: var(--tinta-suave); }

/* Marcas: tarjeta oscura con el logo neón de borde a borde, el nombre y el dato abajo */
.tarjetas-marcas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tarjeta.tarjeta-marca {
  padding: 0 0 18px; overflow: hidden; border-radius: var(--radio); text-align: center;
  background: #161616; color: var(--tinta-clara);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.06) inset, 0 18px 40px -24px rgb(0 0 0 / 0.55);
}
.tarjetas-marcas .tarjeta-marca .tarjeta-foto { aspect-ratio: 1; border-radius: 0; background: #2a2a2a; }
.tarjetas-marcas .tarjeta-marca .tarjeta-titulo { font-size: clamp(16px, 1.5vw, 22px); margin-top: 16px; padding: 0 10px; }
.tarjeta-marca .tarjeta-dato { color: var(--tinta-clara-suave); }
/* El logo aparece encendido de una vez (sin parpadeo, a pedido del dueño); con el mouse brilla un poco más */
.con-logo .tarjeta-foto img { transition: transform 250ms var(--ease-out), filter 250ms ease; }
@media (hover: hover) and (pointer: fine) {
  .con-logo:hover .tarjeta-foto img { filter: brightness(1.18) contrast(1.05); }
}

.grilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ficha { position: relative; padding: 10px 10px 16px; transition: transform 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .ficha:hover { transform: translateY(-4px) rotate(-0.6deg); } }
.ficha-foto {
  display: block; width: 100%; padding: 0; border: 0; border-radius: var(--radio-foto);
  background: #000; cursor: zoom-in; overflow: hidden; aspect-ratio: 3 / 2;
}
.ficha-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 250ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .ficha-foto:hover img { transform: scale(1.04); } }
.ficha-num { margin-top: 14px; font-size: var(--t-nombre); }
.ficha-pedir {
  position: absolute; right: 18px; top: 18px;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--verde); color: var(--verde-tinta);
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.ficha-pedir:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .ficha-pedir:hover { background: var(--verde-hover); } }

.ver-mas-caja { display: flex; justify-content: center; padding: 56px 0 0; }
.ver-mas-caja[hidden] { display: none; }
.sin-js { padding: 24px 0; text-align: center; }

/* ---------- Cómo comprar ---------- */
.comprar { padding: var(--separacion) var(--margen); }
.pasos {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch;
  max-width: 1280px; margin: 0 auto; padding-top: 48px;
}
.paso { position: relative; padding: 64px 22px 30px; }
.paso-num {
  position: absolute; top: -42px; left: 50%; transform: translateX(-50%);
  display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%;
  background: var(--blanco); color: var(--tinta);
  font-weight: 900; font-family: var(--titulo); font-stretch: var(--ancho); font-size: var(--t-titulo); line-height: 1;
}
.paso .historia-titulo { font-size: var(--t-nombre); }
.paso p { font-size: var(--t-texto); margin-top: 14px; color: var(--tinta-suave); }
.paso p + p { margin-top: 8px; }

.aviso { position: relative; padding: 88px clamp(20px, 4vw, 56px) 32px; }
.aviso-circulo {
  position: absolute; top: -56px; left: 50%; transform: translateX(-50%);
  display: grid; place-items: center; width: 124px; height: 124px; border-radius: 50%;
  background: var(--blanco); color: var(--tinta);
}
.condiciones { margin: clamp(120px, 11vw, 168px) auto 0; max-width: 1180px; }
.condiciones-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; text-align: left; }
.condiciones h3 { font-size: var(--t-nombre); font-weight: 900; text-transform: uppercase; margin-bottom: 14px; }
.condiciones li + li { margin-top: 10px; }
.condiciones .historia-arroba { margin-top: 36px; }

/* ---------- Clientes ---------- */
.clientes { padding: var(--separacion) 0; overflow: hidden; }
.clientes .cabeza { padding: 0 var(--margen); }
/* Carrusel infinito: la historia del centro grande, las de los lados más chicas y giradas hacia adentro.
   Sin JS se ve como fila deslizable. */
.carrusel {
  display: flex; gap: 16px; overflow-x: auto; padding: 0 var(--margen); scrollbar-width: none;
}
.carrusel::-webkit-scrollbar { display: none; }
.carrusel img {
  flex: none; width: clamp(240px, 24vw, 340px); height: auto; aspect-ratio: 9 / 15;
  object-fit: cover; border-radius: var(--radio); background: var(--gris);
}
.carrusel.vivo {
  margin-bottom: 8px; position: relative; display: block; overflow: visible; padding: 0;
  height: clamp(480px, 76svh, 720px);
  perspective: 1400px; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
}
.carrusel.vivo { cursor: pointer; }
.carrusel.vivo.arrastrando { cursor: grabbing; }
.carrusel.vivo img {
  position: absolute; left: 50%; top: 0; height: 100%; width: auto;
  box-shadow: 0 30px 70px rgb(0 0 0 / 0.35);
  transition: transform 750ms cubic-bezier(0.32, 0.72, 0, 1), opacity 500ms ease, filter 500ms ease;
  will-change: transform; -webkit-user-drag: none;
}
/* ---------- Info (guía de tallas) ---------- */
.info {
  width: min(880px, 100vw); height: min(92dvh, 1100px); max-width: none; max-height: none; margin: auto; padding: 0; border: 0;
  border-radius: var(--radio); overflow: hidden;
  display: none; flex-direction: column;
  opacity: 0; transform: translateY(16px) scale(0.98);
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), overlay 240ms allow-discrete, display 240ms allow-discrete;
}
.info[open] { display: flex; opacity: 1; transform: none; }
@starting-style { .info[open] { opacity: 0; transform: translateY(16px) scale(0.98); } }
.info::backdrop { background: rgb(0 0 0 / 0.65); }
.info-cabeza { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--margen); }
.info-titulo { font-size: var(--t-nombre); font-weight: 900; font-family: var(--titulo); font-stretch: var(--ancho); text-transform: uppercase; }
.info-cuerpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px var(--margen) 40px; }
.info .cabeza { margin-bottom: 32px; }
.info .cabeza h2 { font-size: var(--t-titulo); }
html.info-abierta { overflow: hidden; }

/* ---------- Hojas (menú del celular e Info): suben desde abajo y se cierran deslizando hacia abajo ---------- */
.hoja-asa { display: none; width: 38px; height: 5px; border-radius: 999px; background: rgb(255 255 255 / 0.35); margin: 0 auto 10px; flex: none; }
.menu {
  position: fixed; inset: auto 0 0 0; width: 100%; max-width: 560px; max-height: none; margin: 0 auto;
  padding: 10px var(--margen) calc(24px + env(safe-area-inset-bottom)); border: 0; border-radius: 22px 22px 0 0;
  background: rgb(26 26 26 / 0.86); color: var(--tinta-clara);
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  transform: translateY(100%);
  /* cerrar (280 ms) más rápido que abrir (450 ms): cuando el cliente decide cerrar, la página responde al tiro */
  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1), overlay 280ms allow-discrete, display 280ms allow-discrete;
}
.menu[open] { transform: none; transition-duration: 450ms; }
@starting-style { .menu[open] { transform: translateY(100%); } }
.menu .hoja-asa { display: block; }
.menu::backdrop { background: rgb(0 0 0 / 0); transition: background-color 300ms ease, overlay 300ms allow-discrete, display 300ms allow-discrete; }
.menu[open]::backdrop { background: rgb(0 0 0 / 0.45); }
@starting-style { .menu[open]::backdrop { background: rgb(0 0 0 / 0); } }
@media (prefers-reduced-transparency: reduce) { .menu { background: var(--oscuro); backdrop-filter: none; -webkit-backdrop-filter: none; } }
.menu-links { margin: 8px 0 20px; }
.menu-links a {
  display: block; padding: 12px 4px; text-decoration: none; color: var(--tinta-clara);
  font-family: var(--titulo); font-stretch: var(--ancho); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; text-transform: uppercase;
  transition: opacity 150ms ease;
}
.menu-links a:active { opacity: 0.6; }
.menu-wsp { width: 100%; }

/* Tallas: hoja G5 (cemento + logo de fondo) con una tarjeta blanca por talla, como las historias */
.tallas {
  position: fixed; inset: auto 0 0 0; width: 100%; max-width: 620px; max-height: min(88dvh, 760px); margin: 0 auto;
  padding: 10px var(--margen) calc(20px + env(safe-area-inset-bottom)); border: 0; border-radius: 22px 22px 0 0;
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateY(100%);
  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1), overlay 280ms allow-discrete, display 280ms allow-discrete;
}
.tallas[open] { transform: none; transition-duration: 450ms; }
@starting-style { .tallas[open] { transform: translateY(100%); } }
.tallas::backdrop { background: rgb(0 0 0 / 0); transition: background-color 300ms ease, overlay 300ms allow-discrete, display 300ms allow-discrete; }
.tallas[open]::backdrop { background: rgb(0 0 0 / 0.5); }
@starting-style { .tallas[open]::backdrop { background: rgb(0 0 0 / 0); } }
.tallas .hoja-asa { display: block; }
.tallas-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 16px; touch-action: none; }
.tallas-titulo { font-family: var(--titulo); font-stretch: var(--ancho); font-weight: 900; font-size: clamp(22px, 3vw, 30px); text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; }
.tallas-nota { margin: 10px 0 18px; font-size: var(--t-chico); color: var(--tinta-clara-suave); }
.tallas-nota a { color: var(--tinta-clara); font-weight: 700; }
.tallas-grilla { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
/* Al abrirse, el foco cae en la grilla (no en el botón de cerrar) para que no aparezca un anillo de foco suelto;
   la grilla no es un control, cada talla sí muestra su foco */
.tallas-grilla:focus, .visor-escena:focus { outline: none; }
.talla {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 64px; padding: 8px 2px; border: 0; border-radius: 14px; cursor: pointer;
  background: var(--blanco); color: var(--tinta);
  box-shadow: inset 0 0 0 2px transparent;
  transition: transform 160ms var(--ease-out), background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.talla:active { transform: scale(0.95); }
.talla-eur { font-family: var(--titulo); font-stretch: 112%; font-weight: 900; font-size: 19px; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.talla-cm { font-size: 12px; font-weight: 600; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
/* La elegida se invierte: negra con borde blanco, como el logo sobre el cemento */
.talla[aria-pressed="true"] { background: var(--negro); color: var(--tinta-clara); box-shadow: inset 0 0 0 2px var(--blanco); }
.talla[aria-pressed="true"] .talla-cm { color: var(--tinta-clara-suave); }
@media (hover: hover) and (pointer: fine) { .talla:hover { background: var(--gris); } .talla[aria-pressed="true"]:hover { background: var(--negro); } }
.tallas-sin {
  display: block; width: 100%; margin-top: 14px; min-height: 48px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgb(255 255 255 / 0.1); color: var(--tinta-clara); font-weight: 700; font-size: 16px;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.tallas-sin:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .tallas-sin:hover { background: rgb(255 255 255 / 0.16); } }
.tallas-arroba { margin-top: 16px; text-align: center; color: var(--tinta-clara); }
.hoja.arrastrando { transition: none !important; }
.hoja-asa, .info-cabeza, .menu { touch-action: none; }
.menu-links, .menu-wsp { touch-action: manipulation; }

.tabla-caja { max-width: 760px; margin: 0 auto; padding: clamp(24px, 4vw, 48px) clamp(16px, 4vw, 56px) 32px; }
.tabla-tallas { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: var(--t-nombre); }
.tabla-tallas th {
  font-weight: 900; font-family: var(--titulo); font-stretch: var(--ancho); text-transform: uppercase; font-size: 16px;
  padding: 0 0 16px; border-bottom: 2px solid var(--tinta);
}
.tabla-tallas td { padding: 10px 0; text-align: center; }
.tabla-tallas tbody tr:nth-child(even) td { background: #f1f1f1; }
.tabla-tallas td:first-child { font-weight: 800; font-family: var(--titulo); font-stretch: var(--ancho); }
.tabla-caja .historia-arroba { margin-top: 28px; }

/* ---------- Contacto ---------- */
.contacto { padding: calc(var(--separacion) + 40px) var(--margen) var(--separacion); }
.contacto-tarjeta { max-width: 760px; margin: 0 auto; padding-top: 96px; }
.aviso-wsp { width: 132px; height: 132px; top: -62px; }
.contacto-tarjeta h2 { font-size: var(--t-nombre); font-weight: 900; text-transform: uppercase; line-height: 1; letter-spacing: -0.02em; }
.contacto-numero {
  display: inline-block; margin-top: 24px; text-decoration: none;
  font-size: var(--t-titulo); font-weight: 900; font-family: var(--titulo); font-stretch: var(--ancho); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.contacto-botones { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.contacto-datos { margin-top: 32px; }
.contacto-datos li + li { margin-top: 8px; }
.contacto-tarjeta .historia-arroba { margin-top: 32px; }

/* ---------- Pie ---------- */
.pie { padding: clamp(48px, 6vw, 80px) var(--margen) 104px; }
.pie-links { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px 12px; font-size: 16px; }
.pie-links ul:first-child { grid-column: 1 / 7; display: grid; grid-template-columns: repeat(2, max-content); gap: 10px 48px; }
.pie-links ul:last-child { grid-column: 9 / 13; }
.pie-links ul:last-child li + li { margin-top: 10px; }
.pie-links a { text-decoration: none; color: var(--tinta-clara); }
@media (hover: hover) and (pointer: fine) { .pie-links a:hover { color: var(--tinta-clara-suave); } }
.pie-final { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 56px; font-size: var(--t-chico); color: var(--tinta-clara-suave); }

/* ---------- WhatsApp flotante ---------- */
.wsp-flotante {
  position: fixed; right: 20px; bottom: 20px; z-index: 20;
  display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%;
  background: var(--verde); color: var(--verde-tinta);
  box-shadow: 0 10px 28px rgb(0 0 0 / 0.35);
  transition: transform 200ms var(--ease-out), background-color 200ms ease;
}
.wsp-flotante:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .wsp-flotante:hover { background: var(--verde-hover); transform: translateY(-2px); } }
html.visor-abierto .wsp-flotante { display: none; }

/* ---------- Visor (foto en grande) ---------- */
.visor {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--tinta-clara);
  display: none; flex-direction: column;
}
.visor[open] { display: flex; }
/* El fondo es una capa aparte para poder aclararlo mientras la foto viaja o se arrastra */
.visor-fondo {
  position: absolute; inset: 0; z-index: -1;
  background-color: var(--negro);
  background-image: url("img/patron-oscuro.png"), url("img/cemento-oscuro.webp");
  background-size: 520px, 700px;
  transition: opacity 320ms ease;
}
.visor.abriendo .visor-fondo, .visor.cerrando .visor-fondo { opacity: 0; }
.visor-cabeza, .visor-pie { transition: opacity 250ms ease; }
.visor.abriendo .visor-cabeza, .visor.abriendo .visor-pie, .visor.cerrando .visor-cabeza, .visor.cerrando .visor-pie { opacity: 0; }
.visor.abriendo .visor-escena, .visor.cerrando .visor-escena, .visor.arrastre .visor-escena { background: transparent; overflow: visible; }
.visor-vuelo { position: fixed; z-index: 5; transform-origin: 0 0; object-fit: cover; border-radius: var(--radio-foto); pointer-events: none; will-change: transform; }
.visor-vuelo[hidden] { display: none; }.visor::backdrop { background: rgb(0 0 0 / 0); }
.visor-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px var(--margen); }
.visor-titulo { font-size: var(--t-nombre); font-weight: 900; font-family: var(--titulo); font-stretch: var(--ancho); text-transform: uppercase; }
.visor-titulo span { font-family: var(--letra); font-weight: 600; font-stretch: var(--ancho-texto); text-transform: none; color: var(--tinta-clara-suave); margin-left: 8px; font-size: 16px; }
.visor-cerrar, .visor-flecha {
  display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: var(--blanco); color: var(--tinta); cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.visor-cerrar:active, .visor-flecha:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .visor-cerrar:hover, .visor-flecha:hover { background: var(--gris); } }
.visor-escena { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: none; margin: 0 var(--margen); border-radius: var(--radio-foto); background: #000; }
.visor-img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto; transform-origin: 0 0; user-select: none; -webkit-user-select: none; }
/* Sin will-change a propósito: con él, el navegador dibuja la foto una sola vez a su tamaño normal y al hacer zoom
   estira ese dibujo (se ve borroso aunque sea de alta calidad). Sin él, la vuelve a dibujar nítida al terminar el zoom. */
.visor-flecha { position: absolute; top: 50%; margin-top: -24px; }
.visor-ant { left: 16px; }
.visor-sig { right: 16px; }
.visor-ayuda {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  padding: 8px 14px; border-radius: 999px; background: rgb(0 0 0 / 0.65);
  font-size: var(--t-chico); color: var(--tinta-clara); pointer-events: none;
  width: max-content; max-width: calc(100% - 32px); text-align: center;
  transition: opacity 300ms ease;
}
.visor-ayuda.oculta { opacity: 0; }
.visor-pie { display: flex; align-items: center; gap: 14px 24px; padding: 16px var(--margen); flex-wrap: wrap; }
.visor-talla { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 16px; font-weight: 700; }
/* Botón de talla: píldora blanca G5 con la etiqueta chica y la talla en letra ancha */
.talla-boton {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px 0 20px; border: 0; border-radius: 999px;
  background: var(--blanco); color: var(--tinta); cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.talla-boton:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .talla-boton:hover { background: var(--gris); } }
.talla-boton-etiqueta { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-suave); }
.talla-boton-valor { font-family: var(--titulo); font-stretch: var(--ancho); font-weight: 900; font-size: 18px; text-transform: uppercase; }
.talla-boton svg { margin-left: auto; }
.visor-guia { font-size: 16px; font-weight: 600; color: var(--tinta-clara); }
.visor-mensaje { flex: 1; min-width: 220px; font-size: 16px; color: var(--tinta-clara-suave); }
html.visor-abierto { overflow: hidden; }

/* ---------- Movimiento ---------- */
/* Entradas al hacer scroll, al estilo Apple: suben poco y pasan de desenfocado a nítido */
html.js [data-entra] > *, html.js .historia[data-entra] { opacity: 0; translate: 0 36px; filter: blur(10px); }
html.js [data-entra].visto > *, html.js .historia[data-entra].visto {
  opacity: 1; translate: 0 0; filter: none;
  transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1), translate 900ms cubic-bezier(0.16, 1, 0.3, 1), filter 900ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--retraso, 0ms);
}
html.js .historia[data-entra] > * { opacity: 1; translate: none; }
html.js [data-entra].visto > *:nth-child(2) { transition-delay: 90ms; }

html.js .portada-texto > * { animation: aparecer 800ms var(--ease-out) both; }
html.js .portada-texto > :nth-child(2) { animation-delay: 90ms; }
html.js .portada-texto > :nth-child(3) { animation-delay: 180ms; }
html.js .portada-texto > :nth-child(4) { animation-delay: 270ms; }
@keyframes aparecer { from { opacity: 0; translate: 0 24px; } }
/* Cambio de nivel del catálogo (View Transitions): lo viejo sale rápido, lo nuevo entra suave */
.vista { view-transition-name: vista; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(vista) { animation: vt-salir 200ms ease-out both; }
::view-transition-new(vista) { animation: vt-entrar 300ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes vt-salir { to { opacity: 0; transform: scale(0.985); } }
@keyframes vt-entrar { from { opacity: 0; transform: translateY(18px); } }

/* La portada se aleja suavemente al bajar (solo donde el navegador lo soporta) */
@supports (animation-timeline: view()) {
  .portada-cuerpo { animation: alejar linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
  @keyframes alejar { to { opacity: 0.35; transform: scale(0.94) translateY(-4%); } }
}
.ficha { animation: aparecer 500ms var(--ease-out) both; animation-delay: calc(var(--n, 0) * 40ms); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-entra] > *, html.js .historia[data-entra] { translate: none; filter: none; }
  .portada-cuerpo { animation: none; }
  .historia-mini { transition: opacity 300ms ease, filter 300ms ease, visibility 300ms; }
  html.js [data-entra].visto > *, html.js .historia[data-entra].visto { transition: opacity 300ms ease; }
  html.js .portada-texto > *, .ficha, .tarjeta { animation-name: fundido; }
  .carrusel.vivo img { transition: opacity 300ms ease, filter 300ms ease; }
  .ficha, .ficha-foto img { transition: none; }
  .visor-fondo { transition: none; }
  .barra-neon { animation: none; }
  .barra-links li, .barra-wsp, .barra-menu, .barra.compacta :is(.barra-links li, .barra-wsp, .barra-menu) { translate: none; filter: none; transition-property: opacity, visibility; transition-delay: 0s; }
}
@keyframes fundido { from { opacity: 0; } }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .tarjetas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px 16px; }
}
/* Desde aquí los enlaces no caben en una línea: la barra chica muestra WhatsApp y el botón de menú */
@media (max-width: 980px) {
  .barra-links { display: none; }
  .barra-wsp { --i: 0; }
  .barra-menu { display: grid; }
}

/* ---------- Celular ---------- */
@media (max-width: 760px) {
  :root { --t-display: clamp(30px, 8.6vw, 46px); --t-titulo: 24px; --radio: 18px; }
  :root { --alto-barra: 66px; --alto-grande: 210px; --logo-grande: 220px; --logo-chico: 110px; --logo-escala: 0.5; }
  .barra { gap: 10px; }
  /* WhatsApp queda redondo, solo el ícono, para que el logo tenga su espacio al centro */
  .barra-wsp { width: 44px; min-height: 44px; padding: 0; }
  .barra-wsp-texto { display: none; }
  .portada-cuerpo { padding-top: 22px; }
  .portada-bajada { font-size: var(--t-texto); margin: 16px auto 24px; }
  .portada-acciones { gap: 20px; }
  .abanico { height: 104vw; margin-top: 8px; }
  .historia-mini { width: 46%; padding: 14px 10px 12px; }
  .historia-mini img { margin: 10px 0; }
  .historia-mini .historia-arroba { display: none; }
  .abanico { cursor: default; }


  .tarjetas, .tarjetas-marcas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tarjeta { padding: 6px 6px 12px; }
  .tarjeta-titulo, .tarjetas-marcas .tarjeta-titulo { font-size: 16px; margin-top: 10px; }
  .tarjeta-dato { font-size: 13px; }
  .tarjeta.tarjeta-marca { padding: 0 0 14px; }
  .tarjetas-marcas .tarjeta-marca .tarjeta-titulo { font-size: 15px; margin-top: 12px; }
  .tarjeta-marca .tarjeta-dato span { display: block; }
  .tarjeta-marca .tarjeta-dato .dato-sep { display: none; }
  .ruta { gap: 12px; padding: 8px var(--margen); }
  .ruta-atras { padding: 0 14px 0 8px; }
  .ruta-migas > a, .ruta-migas > .ruta-sep { display: none; }
  .vista-cabeza h3 { font-size: 26px; }
  .grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ficha { padding: 6px 6px 12px; }
  .ficha-num { font-size: var(--t-chico); margin-top: 10px; }
  .ficha-pedir { width: 40px; height: 40px; right: 10px; top: 10px; }

  .pasos { grid-template-columns: 1fr; gap: 64px; }
  .paso { padding: 56px 18px 26px; }
  .paso-num { width: 72px; height: 72px; top: -36px; }
  .condiciones-cols { grid-template-columns: 1fr; gap: 28px; }
  .aviso-circulo { width: 104px; height: 104px; top: -48px; }
  .aviso { padding-top: 72px; }

  .carrusel { gap: 10px; }
  .carrusel img { width: 70vw; }
  .carrusel.vivo { height: clamp(420px, 66svh, 560px); }
  .info { width: 100vw; height: 92dvh; margin: auto 0 0; border-radius: 22px 22px 0 0; transform: translateY(100%); transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1), overlay 280ms allow-discrete, display 280ms allow-discrete; }
  .info[open] { transform: none; transition-duration: 450ms; }
  @starting-style { .info[open] { transform: translateY(100%); } }
  .info .hoja-asa { display: block; margin-top: 10px; }

  .tabla-tallas { font-size: 16px; }
  .tabla-tallas th { font-size: var(--t-chico); }

  .contacto-botones .boton { width: 100%; }

  .pie-links { display: flex; flex-direction: column; gap: 28px; }
  .pie-links ul:first-child { gap: 10px 32px; }
  .wsp-flotante { width: 56px; height: 56px; right: 14px; bottom: 14px; }

  .visor-flecha { display: none; }
  .visor-escena { margin: 0; border-radius: 0; }
  .visor-pie { flex-direction: column; align-items: stretch; gap: 12px; }
  .talla-boton { flex: 1; }
  .tallas-grilla { gap: 6px; }
  .talla { min-height: 60px; }
  .talla-eur { font-size: 17px; }
  .visor-mensaje { min-width: 0; }
}