/* ============================================================
   GOOD LIFE PEPS · Portada (index.html)
   Pantalla completa sin desplazamiento: video de fondo con velo,
   disco de vidrio con la marca, anillo de trazos y 4 accesos de
   categoría también de vidrio (ahumado, con el tinte de cada una).

   Todo escala con --u (el tamaño del nombre de cada botón). --u se
   calcula para que la composición quepa a lo ancho y a lo alto:
   u = mínimo entre (ancho útil / ancho reservado) y
   (alto útil / alto reservado), con un tope inferior y superior.
   Los coeficientes --k-* (en unidades u) salen de medir los textos
   reales en Archivo / IBM Plex Mono, con un margen de seguridad.
   Solo aplica dentro de html.pagina-portada.

   Cuando la composición no cabe (zoom del navegador, espaciado de
   texto, letra grande o pantalla diminuta), portada.js pone la clase
   html.portada-no-cabe: todo se acomoda en una columna con letra en
   rem (crece con el zoom) y la página se desplaza. Los topes en rem
   de --u y del lema hacen que el texto nunca se achique al hacer zoom.
   ============================================================ */

html.pagina-portada {
  /* La miel (#C98A2B) con texto blanco da 2.94:1 y no pasa AA.
     #8A5C17 es el mismo matiz (36°) más oscuro: 5.79:1 con blanco. */
  --portada-miel: #8A5C17;

  /* Vidrio: todo lo interactivo de la portada es vidrio ahumado sobre el video.
     El fondo del vidrio es oscuro (no blanco) para que el texto blanco pase AA aunque detrás
     haya un píxel blanco puro del video: velo 0.6 + vidrio 0.30 + tinte 0.46 + luz 0.14 arriba
     = 4.9:1 en el peor caso (miel oscura, bajo la luz del borde donde no hay texto) y más en las
     demás. El disco va algo más ahumado (0.38) con un tinte cobalto ligero (la marca) porque
     «PEPS» en azul claro necesita 4.5:1 en teléfonos chicos (ahí mide menos de 18.7 px).
     Script de las cuentas: .raw/glp-2026-10-28-vidrio-portada/contraste-vidrio.mjs (cerebro). */
  --vidrio: rgba(12, 14, 20, 0.30);
  --vidrio-disco: rgba(12, 14, 20, 0.38);
  --vidrio-blur: 20px;
  --vidrio-filo: inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.34);
  --vidrio-luz: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02) 55%);
  --peps-claro: #B4C4F7; /* cobalto claro: 4.5:1 sobre el disco en el peor caso */

  /* Medidas fijas en px (barra superior y márgenes) */
  --g: 24px;                 /* margen lateral */
  --barra-pad: 16px;         /* aire arriba de la barra */
  --alto-boton-barra: 46px;  /* alto de «Menú» y «Herramientas» */
  --pad-arriba: 10px;
  --pad-abajo: 18px;
  --fijo: calc(var(--barra-pad) + var(--alto-boton-barra) + var(--pad-arriba) + var(--pad-abajo) + 8px);

  /* Cruz (escritorio y tableta). Botones con nombre en una sola línea. */
  --k-disco: 13;      /* diámetro del disco */
  --k-anillo: 17.8;   /* diámetro del anillo punteado */
  --k-solape: 0.8;    /* cuánto se mete cada botón sobre el anillo */
  --k-ancho: 47.2;    /* ancho reservado: anillo + 2 x (botón más ancho - solape) */
  --k-alto: 24.2;     /* alto reservado: anillo + 2 x (alto del botón - solape) */
  --k-hueco: 1.5;     /* aire entre la órbita y el lema */
  /* Lema: «Sentirte bien no debería ser complicado» es el protagonista (PDF de correcciones v1, §2):
     Cormorant Garamond itálica a 1.5u (36 px con u = 24, tope 2.25rem) y la frase de arriba baja a 1u (24 px) */
  --k-lema: 1;
  --k-lema2: 1.5;
  --k-total: 29.4;    /* alto de órbita + hueco + lema (24.2 + 1.5 + 1 × 1.15 + 0.35 + 1.5 × 1.1 = 28.85) */
  /* Topes en rem: crecen con el zoom y con el tamaño de letra del navegador.
     Si u no alcanza el piso, la composición no cabe y portada.js la pasa a una columna. */
  --u-min: 0.8125rem; /* 13 px */
  --u-max: 1.5rem;    /* 24 px */
  --lema-min: 1.125rem;   /* 18 px */
  --lema2-min: 1.75rem;   /* 28 px: el lema en escritorio va de 28 a 36 px (PDF de correcciones v1, §2) */
  --lema2-max: 2.25rem;   /* 36 px */

  --u: clamp(var(--u-min), min(calc((100vw - 2 * var(--g)) / var(--k-ancho)), calc((100vh - var(--fijo)) / var(--k-total))), var(--u-max));
}
/* Una propiedad personalizada acepta cualquier valor, así que el respaldo con vh va por @supports
   (repetir la declaración no serviría: en un navegador sin dvh ganaría la segunda y quedaría inválida) */
@supports (height: 100dvh) {
  html.pagina-portada {
    --u: clamp(var(--u-min), min(calc((100vw - 2 * var(--g)) / var(--k-ancho)), calc((100dvh - var(--fijo)) / var(--k-total))), var(--u-max));
  }
}
/* En pantallas táctiles el desenfoque del vidrio cuesta más por cuadro: radio menor, mismo aspecto */
@media (pointer: coarse) {
  html.pagina-portada { --vidrio-blur: 14px; }
}

/* Tableta angosta (560-719 px): «Anti-envejecimiento» se parte en el guion y baja a dos líneas para no encoger todo */
@media (min-width: 560px) and (max-width: 719px) and (min-height: 501px) {
  html.pagina-portada { --g: 16px; --k-ancho: 36.8; }
}

/* Horizontal bajo (teléfono acostado): disco más chico y lema compacto */
@media (min-width: 560px) and (max-height: 500px) {
  html.pagina-portada {
    --barra-pad: 8px; --pad-arriba: 6px; --pad-abajo: 8px;
    --k-disco: 9; --k-anillo: 13; --k-solape: 0.7;
    --k-ancho: 42.6; --k-alto: 19.8;
    --k-hueco: 0.9; --k-lema: 1; --k-lema2: 1.55; --k-total: 24; /* 19.8 + 0.9 + 1.15 + 0.35 + 1.705 = 23.9 */
    --lema2-max: 1.5rem; /* 24 px */
    --u-min: 0.78125rem; /* 12.5 px: 844x390 cabe; 640x360 (1280x720 al 200%) pasa a una columna */
  }
}
/* Teléfono acostado de verdad (pantalla táctil): 740x360, 800x360 o Safari con su barra (unos 340 px de alto)
   deben caber sin desplazamiento, como pidió el dueño. En el teléfono el zoom es de pellizco y no cambia
   el diseño, así que estos pisos más bajos no afectan WCAG 1.4.4; con zoom de escritorio (puntero fino)
   siguen los pisos de arriba y la portada pasa a una columna. */
@media (min-width: 560px) and (max-height: 500px) and (pointer: coarse) {
  html.pagina-portada { --u-min: 0.6875rem; --lema-min: 0.8125rem; --lema2-min: 0.6875rem; } /* 11, 13 y 11 px */
}

/* Teléfono vertical angosto: los 4 botones van en diagonal */
@media (max-width: 559px) {
  html.pagina-portada {
    --g: 16px; --barra-pad: 12px; --pad-arriba: 8px; --pad-abajo: 16px;
    --k-disco: 12; --k-anillo: 18.5;
    --k-ancho: 22;      /* ancho de la composición */
    --k-alto: 23.8;     /* 2 x (radio del disco + aire + botón de tres líneas) */
    --k-hueco: 1.1; --k-lema: 1; --k-lema2: 1.6; --k-total: 29.8;
    --u-min: 0.75rem; --u-max: 1.0625rem; /* 12 y 17 px */
    /* En teléfono el lema va de 20 a 24 px y la frase de arriba baja a 16-17 px para que el lema sea el protagonista
       (el zoom del teléfono es de pellizco: estos pisos no afectan WCAG 1.4.4) */
    --lema-min: 1rem; --lema2-min: 1.25rem; --lema2-max: 1.5rem;
  }
}

/* ---------- Página: exactamente una pantalla cuando cabe ----------
   El cuerpo mide al menos una pantalla y crece si el contenido no cabe: así nada queda
   inalcanzable aunque falle portada.js. Cuando cabe, mide justo una pantalla y no hay desplazamiento. */
/* styles.css reserva 88 px arriba para el encabezado fijo de las demás páginas; la portada no lo tiene,
   y con 88 px un botón enfocado con Tab quedaba cortado abajo en pantallas muy bajas */
html.pagina-portada { scroll-behavior: auto; scroll-padding: 16px 0; }
html.pagina-portada:not(.portada-no-cabe) { overscroll-behavior: none; }
html.pagina-portada body {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--oscuro);
  color: #fff;
}

/* ---------- Fondo: video + velo (fijo: se queda quieto si la página se desplaza) ---------- */
.portada__fondo {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden;
  background: var(--oscuro);
}
.portada__video { width: 100%; height: 100%; object-fit: cover; }
/* Velo: nunca baja de 0.6 de opacidad. Sobre un píxel blanco puro del video,
   el texto blanco queda en 5.17:1 (AA pide 4.5:1). Arriba y abajo, más oscuro. */
.portada__velo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 12, 16, 0.68) 0%,
    rgba(10, 12, 16, 0.6) 22%,
    rgba(10, 12, 16, 0.6) 70%,
    rgba(10, 12, 16, 0.7) 100%);
}

/* ---------- Barra superior: Menú (izq.) y Herramientas (der.) ---------- */
.portada__barra {
  position: relative; z-index: 2;
  flex: none;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: var(--barra-pad) var(--g) 0;
  color: #fff;
}
/* styles.css oculta .btn-menu arriba de 1280 px y le esconde el texto abajo de 480 px: aquí se ve siempre, con texto */
.portada__barra .btn-menu {
  display: inline-flex;
  width: auto; height: auto; min-height: var(--alto-boton-barra);
  padding: 0 1em;
}
.portada__barra .btn-menu__texto {
  position: static; width: auto; height: auto;
  overflow: visible; clip-path: none; white-space: nowrap;
}
/* Herramientas y Carrito van juntos a la derecha */
.portada__barra-der { display: flex; align-items: center; gap: 8px; }
/* styles.css le pone margin-left:auto abajo de 1280 px y lo achica abajo de 480 px */
.portada__barra .btn--herramientas,
.portada__barra .btn--carrito {
  margin-left: 0;
  min-height: var(--alto-boton-barra);
  padding: 0 1.15em;
  font-size: 0.95rem;
}
/* Mismo lenguaje de vidrio que el resto de la portada, pero sin desenfoque: están sobre la franja
   más oscura del velo, el desenfoque no se nota y cada backdrop-filter cuesta una lectura del video
   por cuadro. El filo es el borde de 1 px que ya tienen. */
.portada__barra .btn-menu,
.portada__barra .btn--herramientas,
.portada__barra .btn--carrito {
  border-color: rgba(255, 255, 255, 0.3);
  background: var(--vidrio-luz), rgba(12, 14, 20, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* Teléfono angosto: Menú, Herramientas y Carrito deben caber en una fila sin desplazar la portada.
   Abajo de 420 px el botón Menú queda solo con su ícono (su nombre sigue para lectores de pantalla). */
@media (max-width: 419px) {
  .portada__barra .btn-menu { width: var(--alto-boton-barra); padding: 0; }
  .portada__barra .btn-menu__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .portada__barra .btn--herramientas, .portada__barra .btn--carrito { padding: 0 0.85em; }
}

/* ---------- Composición central ---------- */
/* flex 1 0 auto: si el contenido no cabe, la portada crece hacia abajo (nunca se encima con la barra) */
.portada {
  position: relative; z-index: 1;
  flex: 1 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  align-items: safe center;
  padding: var(--pad-arriba) var(--g) var(--pad-abajo);
}

.portada__orbita {
  position: relative;
  flex: none;
  width: calc(var(--k-ancho) * var(--u));
  height: calc(var(--k-alto) * var(--u));
  /* distancia del centro al borde interior de cada botón (cruz) */
  --r: calc((var(--k-anillo) / 2 - var(--k-solape)) * var(--u));
}

.portada__anillo,
.portada__disco {
  position: absolute; inset: 0; margin: auto;
  border-radius: 50%;
}
.portada__anillo {
  width: calc(var(--k-anillo) * var(--u));
  height: calc(var(--k-anillo) * var(--u));
  border: 1px dashed rgba(255, 255, 255, 0.46);
}
.portada__disco {
  width: calc(var(--k-disco) * var(--u));
  height: calc(var(--k-disco) * var(--u));
  display: grid; place-items: center;
  isolation: isolate;
  /* vidrio ahumado con un tinte cobalto ligero: el disco es la marca, no una pastilla más */
  background: linear-gradient(rgba(43, 80, 199, 0.16), rgba(43, 80, 199, 0.16)), var(--vidrio-disco);
  color: #fff;
  /* filo de 1 px (más marcado que el de las pastillas) y luz en el borde de arriba, dentro de la caja: no cambia las medidas */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 24px 70px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(var(--vidrio-blur)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--vidrio-blur)) saturate(120%);
}
/* Luz en el borde de arriba, concéntrica (vidrio plano, no «bola de cristal»); en la marca vale ~0.01 */
.portada__disco::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: radial-gradient(60% 38% at 50% -6%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 60%, transparent 80%);
  pointer-events: none;
}
/* (0,2,1): gana a .marca em de styles.css sin depender del orden de las hojas */
.portada__disco .portada__marca em { color: var(--peps-claro); }

/* Marca: el wordmark .marca, grande y en dos líneas */
.portada__titulo {
  margin: 0;
  font-size: calc(var(--k-disco) * var(--u) * 0.11);
  line-height: 0.95;
  text-align: center;
}
.portada__marca { display: block; font-size: 1em; }
.portada__marca em { display: block; }

.portada-oculto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Botones de categoría ---------- */
.portada__cat {
  position: absolute; z-index: 1;
  width: max-content;
  min-height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(0.3 * var(--u));
  padding: calc(0.75 * var(--u)) calc(1.1 * var(--u));
  border-radius: calc(0.7 * var(--u));
  isolation: isolate;
  /* vidrio ahumado + tinte de la categoría + luz en el borde de arriba; el filo va en
     box-shadow inset para no cambiar las medidas que usan los coeficientes --k-* */
  background: var(--vidrio-luz), linear-gradient(var(--cat-tinte), var(--cat-tinte)), var(--vidrio);
  color: #fff;
  text-align: center;
  box-shadow: var(--vidrio-filo), 0 18px 40px -14px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(var(--vidrio-blur)) saturate(120%);
  -webkit-backdrop-filter: blur(var(--vidrio-blur)) saturate(120%);
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
/* Al pasar el puntero el vidrio se llena de su color (sube el contraste, no lo baja) */
.portada__cat::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: var(--cat);
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
  pointer-events: none;
}
.portada__cat-nombre {
  font-size: var(--u);
  font-weight: 600;
  font-stretch: 108%;
  letter-spacing: -0.01em;
  line-height: 1.15;
  white-space: nowrap;
}
.portada__cat-sub {
  font-family: var(--f-mono);
  /* al menos 11 px (0.6875rem), pero nunca más grande que el nombre */
  font-size: max(min(0.6875rem, var(--u)), calc(0.66 * var(--u)));
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
}

/* --cat-tinte = el color de la categoría al 46 % (literal, para no depender de color-mix()).
   Al 36 % el cobalto y el abeto se volvían grises sobre el atardecer del video. */
.portada__cat--peso    { --cat: var(--cobalto);      --cat-tinte: rgba(43, 80, 199, 0.46); }
.portada__cat--edad    { --cat: var(--portada-miel); --cat-tinte: rgba(138, 92, 23, 0.46); }
.portada__cat--sexual  { --cat: var(--vino);         --cat-tinte: rgba(164, 52, 74, 0.46); }
.portada__cat--capilar { --cat: var(--abeto);        --cat-tinte: rgba(47, 109, 79, 0.46); }

/* Cruz: cada botón se apoya sobre el anillo en su punto cardinal */
.portada__cat--peso    { bottom: calc(50% + var(--r)); left: 50%; translate: -50% 0; }
.portada__cat--edad    { left: calc(50% + var(--r)); top: 50%; translate: 0 -50%; }
.portada__cat--sexual  { top: calc(50% + var(--r)); left: 50%; translate: -50% 0; }
.portada__cat--capilar { right: calc(50% + var(--r)); top: 50%; translate: 0 -50%; }

@media (min-width: 560px) and (max-width: 719px) and (min-height: 501px) {
  .portada__cat--edad { max-width: calc(10 * var(--u)); }
  .portada__cat--edad .portada__cat-nombre { white-space: normal; text-wrap: balance; }
}

/* Diagonal: arriba-izquierda, arriba-derecha, abajo-derecha, abajo-izquierda (sentido horario).
   El borde interior de cada botón queda a (radio del disco + 0.8u) del centro: nunca toca el disco. */
@media (max-width: 559px) {
  .portada__orbita { --r: calc((var(--k-disco) / 2 + 0.8) * var(--u)); }
  .portada__cat {
    top: auto; right: auto; bottom: auto; left: auto;
    translate: none;
    max-width: calc((var(--k-ancho) - 0.8) / 2 * var(--u));
    /* misma altura para los 4: la de un nombre en dos líneas (2 x 1.15u + hueco 0.3u + subtítulo + relleno 1.5u) */
    min-height: calc(4.1 * var(--u) + max(0.89375rem, 0.858 * var(--u)));
  }
  .portada__cat-nombre { white-space: normal; text-wrap: balance; }
  .portada__cat--peso    { left: 0;  bottom: calc(50% + var(--r)); }
  .portada__cat--edad    { right: 0; bottom: calc(50% + var(--r)); }
  .portada__cat--sexual  { right: 0; top: calc(50% + var(--r)); }
  .portada__cat--capilar { left: 0;  top: calc(50% + var(--r)); }
}

/* ---------- Lema ---------- */
.portada__lema {
  flex: none;
  max-width: 100%;
  margin-top: calc(var(--k-hueco) * var(--u));
  text-align: center;
}
/* Pisos en rem: con zoom, la órbita horizontal usa un lema más chico que la cruz; el piso evita que se achique */
.portada__lema-principal {
  margin: 0;
  font-size: max(var(--lema-min), calc(var(--k-lema) * var(--u)));
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-wrap: balance;
}
/* El lema protagonista: Cormorant Garamond itálica (assets/fonts, solo para esta frase), nunca la marca */
.portada__lema-secundario {
  margin: calc(0.35 * var(--u)) 0 0;
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 600;
  font-size: min(var(--lema2-max), max(var(--lema2-min), calc(var(--k-lema2) * var(--u))));
  line-height: 1.1;
  letter-spacing: 0;
  text-wrap: balance;
}

/* ---------- No cabe: una columna que se desplaza ----------
   portada.js pone html.portada-no-cabe cuando la composición fija se sale de la pantalla o algo
   se encima. Todo va en el orden del documento (marca, categorías, lema) y la letra va en rem. */
html.pagina-portada.portada-no-cabe .portada__barra { flex-wrap: wrap; }
html.pagina-portada.portada-no-cabe .portada {
  gap: 2rem;
  padding: 1.5rem var(--g) 2.5rem;
}
html.pagina-portada.portada-no-cabe .portada__orbita {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 2rem;
  width: 100%; max-width: 36rem;
  height: auto;
}
/* El anillo y el disco comparten la primera celda: el anillo rodea al disco como en la composición fija */
html.pagina-portada.portada-no-cabe .portada__anillo,
html.pagina-portada.portada-no-cabe .portada__disco {
  grid-area: 1 / 1;
  position: relative; inset: auto;
  align-self: center;
  height: auto; aspect-ratio: 1;
}
html.pagina-portada.portada-no-cabe .portada__anillo { width: 13.5rem; max-width: 100%; }
html.pagina-portada.portada-no-cabe .portada__disco { width: 10rem; max-width: 100%; }
/* 0.11 del diámetro, como en la composición fija; si el disco se angosta (menos de 10rem), la marca baja con él */
html.pagina-portada.portada-no-cabe .portada__titulo { font-size: min(1.1rem, calc((100vw - 2 * var(--g)) * 0.11)); }
html.pagina-portada.portada-no-cabe .portada__categorias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.75rem;
  width: 100%;
}
html.pagina-portada.portada-no-cabe .portada__cat {
  position: relative; inset: auto;
  translate: none;
  width: auto; max-width: none;
  min-height: 44px;
  gap: 0.3rem;
  padding: 0.9rem 1.1rem;
  border-radius: 0.75rem;
}
html.pagina-portada.portada-no-cabe .portada__cat-nombre { font-size: 1.25rem; white-space: normal; }
html.pagina-portada.portada-no-cabe .portada__cat-sub { font-size: 0.75rem; white-space: normal; }
html.pagina-portada.portada-no-cabe .portada__lema { margin-top: 0; max-width: 36rem; }
/* Debajo de unos 206 px de ancho, «tecnología» a 1.75rem ya no cabe: solo ahí el lema baja con el ancho */
html.pagina-portada.portada-no-cabe .portada__lema-principal { font-size: min(1.75rem, calc((100vw - 2 * var(--g)) / 6.2)); }
html.pagina-portada.portada-no-cabe .portada__lema-secundario { margin-top: 0.5rem; font-size: 2rem; }
/* Último recurso en pantallas angostísimas o con espaciado de texto: una palabra que no cabe se parte */
html.pagina-portada.portada-no-cabe .portada__cat-nombre,
html.pagina-portada.portada-no-cabe .portada__lema-principal,
html.pagina-portada.portada-no-cabe .portada__lema-secundario { overflow-wrap: anywhere; }

/* ---------- Foco visible (blanco sobre el velo oscuro) ---------- */
.portada__barra .btn-menu:focus-visible,
.portada__barra .btn--herramientas:focus-visible,
.portada__barra .btn--carrito:focus-visible,
.portada__cat:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* ---------- Interacción ---------- */
@media (hover: hover) and (pointer: fine) {
  /* el hover oscurece y marca el filo (sube el contraste, no lo baja: aclarar bajaba de 4.5:1 en el peor píxel) */
  .portada__barra .btn-menu:hover,
  .portada__barra .btn--herramientas:hover,
  .portada__barra .btn--carrito:hover { background: var(--vidrio-luz), rgba(12, 14, 20, 0.7); border-color: rgba(255, 255, 255, 0.5); }
  .portada__cat:hover {
    transform: translateY(-2px);
    box-shadow: var(--vidrio-filo), 0 24px 48px -16px rgba(0, 0, 0, 0.6);
  }
  .portada__cat:hover::after { opacity: 0.26; }
}
.portada__cat:active { transform: scale(0.97); }

/* ---------- Navegador sin desenfoque de fondo: vidrio más opaco ----------
   Sin desenfoque el video se vería nítido a través del vidrio y estorbaría al texto.
   A propósito NO se respeta prefers-reduced-transparency: en Windows se activa con solo apagar
   «Efectos de transparencia» (así está la PC del dueño) y mataría el diseño; la legibilidad ya
   está cubierta: contraste AA calculado sobre el peor píxel y fondo desenfocado. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .portada__disco { background: linear-gradient(rgba(43, 80, 199, 0.16), rgba(43, 80, 199, 0.16)), rgba(14, 16, 22, 0.86); }
  .portada__cat { background: var(--vidrio-luz), linear-gradient(var(--cat-tinte), var(--cat-tinte)), rgba(12, 14, 20, 0.7); }
}

/* ---------- Entrada (todo termina antes de 500 ms; los clics funcionan desde el inicio) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .portada__disco  { animation: portada-aparece 320ms var(--ease-out) backwards; }
  .portada__anillo { animation: portada-aparece 320ms var(--ease-out) 40ms backwards; }
  .portada__cat    { animation: portada-aparece 240ms var(--ease-out) backwards; }
  .portada__cat:nth-child(1) { animation-delay: 60ms; }
  .portada__cat:nth-child(2) { animation-delay: 120ms; }
  .portada__cat:nth-child(3) { animation-delay: 180ms; }
  .portada__cat:nth-child(4) { animation-delay: 240ms; }
  .portada__lema   { animation: portada-fundido 260ms var(--ease-out) 200ms backwards; }
}
/* Con «reducir movimiento»: solo fundidos, sin escala ni desplazamientos */
@media (prefers-reduced-motion: reduce) {
  .portada__disco, .portada__anillo, .portada__cat, .portada__lema { animation: portada-fundido 200ms ease backwards; }
  .portada__cat, .portada__cat:hover, .portada__cat:active { transform: none; transition: box-shadow 200ms ease; }
}
@keyframes portada-aparece { from { opacity: 0; transform: scale(0.96); } }
@keyframes portada-fundido { from { opacity: 0; } }