/* ============================================================
   Humilde Pero Cotizado, home
   Luxe negro + dorado. Mobile first (390px) → escritorio (1440px).
   ============================================================ */

:root {
  /* Fondos */
  --negro:        #050505;
  --negro-puro:   #000000;
  --negro-barra:  #0a0806;
  --negro-campo:  #111111;
  --negro-foto:   #0e0c07;

  /* Bordes */
  --borde:        #1e1a12;
  --borde-oro:    #2b2413;
  --borde-suave:  #241f14;
  --borde-header: #1c1710;

  /* Dorados */
  --oro-claro:    #F7E3A1;
  --oro:          #C69A3E;
  --oro-brillo:   #E8C46A;
  --oro-texto:    #F1DFAE;
  --oro-crema:    #F1EADA;
  --oro-apagado:  #9c8a63;
  --oro-tenue:    #6f5f3a;
  --oro-profundo: #3a2c0d;
  --bronce:       #C9862F;
  --bronce-claro: #D9A441;

  /* Texto */
  --texto:        #EDEDED;
  --texto-2:      #bdbdbd;
  --texto-3:      #8a8a8a;
  --texto-4:      #9a9184;
  --texto-5:      #5f5f5f;

  /* WhatsApp */
  --wa-texto:     #8FCF8F;
  --wa-borde:     #3f6b3f;
  --wa-fondo:     #0d150d;

  /* Skeleton */
  --skeleton:     #1c1a15;

  /* Medidas */
  --gutter: 14px;
  --tabbar-h: 84px; /* alto real de .tabbar; reserva el aire al pie del body */
  --radio: 4px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--negro);
  color: var(--texto);
  font-family: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.35;
  overflow-x: hidden;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
}

img { max-width: 100%; display: block; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--oro-brillo);
  outline-offset: 2px;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 8px; top: -60px;
  z-index: 100;
  background: var(--oro);
  color: #12100a;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
  padding: 12px 16px;
  transition: top .18s ease;
}
.skip-link:focus { top: 8px; }

.contenedor {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ============================================================
   Tope pegajoso: la barra y el header acompañan el scroll
   ============================================================ */
.tope {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--negro-puro);
}

/* ============================================================
   Barra de beneficios en loop continuo

   --mrq-dist: ancho de UNA repetición. app.js lo mide y clona
   los grupos necesarios para que nunca quede hueco, por ancha
   que sea la pantalla. El 50% es el respaldo sin JS.
   --mrq-vel: velocidad en px por segundo; app.js calcula la
   duración a partir de ella para que el ritmo no cambie.
   ============================================================ */
.beneficios {
  --mrq-vel: 21; /* da los 34 s del diseño original en móvil */
  background: var(--negro-barra);
  border-bottom: 1px solid var(--borde);
  overflow: hidden;
  padding: 7px 0;
}

.beneficios__viewport {
  display: flex;
  width: max-content;
  animation: mrq 34s linear infinite;
  will-change: transform;
}
/* La pausa por hover es solo para mouse: en el celular el :hover
   queda pegado después del toque y la barra no arrancaba más hasta
   tocar otra parte de la página. */
@media (hover: hover) and (pointer: fine) {
  .beneficios:hover .beneficios__viewport { animation-play-state: paused; }
}
/* En pantalla táctil frena mientras el dedo está apoyado y sigue
   sola al levantarlo; app.js pone y saca la clase. */
.beneficios.is-tocada .beneficios__viewport,
.beneficios:focus-within .beneficios__viewport { animation-play-state: paused; }

.beneficios__track { display: flex; }

@keyframes mrq {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--mrq-dist, 50%))); }
}

.beneficio {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 18px;
  border-right: 1px solid var(--borde);
}

.beneficio__ico {
  flex: none;
  width: 34px; height: 23px;
  color: var(--bronce);
}

.beneficio__txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.beneficio__titulo {
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--oro-crema);
  white-space: nowrap;
}

.beneficio__sub {
  font-size: 9px;
  color: var(--texto-4);
  white-space: nowrap;
}

.chip {
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #6b4d1c;
  border-radius: 3px;
  padding: 2px 7px;
  font-size: 9px;
  color: var(--bronce-claro);
  white-space: nowrap;
}
.chip__ico { width: 9px; height: 9px; flex: none; }

/* ============================================================
   Header
   ============================================================ */
.header {
  background: var(--negro-puro);
  border-bottom: 1px solid var(--borde-header);
  position: relative;
  z-index: 30;
}

.header__fila {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 10px 8px;
}

/* El logo es un botón: al tocarlo se abre el visor a pantalla completa. */
.header__logo {
  flex: none;
  line-height: 0;
  border-radius: 50%;
  transition: box-shadow .18s ease;
}
.header__logo:hover { box-shadow: 0 0 0 2px var(--oro-profundo); }
.header__logo:active { box-shadow: 0 0 0 2px var(--oro); }
.header__logo img {
  width: 40px; height: 40px;
  border-radius: 50%;
}

/* ============================================================
   Visor del logo
   ============================================================ */
.logo-visor[hidden] { display: none; }

.logo-visor {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px;
  background: rgba(0, 0, 0, .92);
  opacity: 0;
  transition: opacity .22s ease;
}
.logo-visor.is-open { opacity: 1; }

.logo-visor__img {
  width: min(78vw, 78vh, 560px);
  height: auto;
  /* El resplandor dorado despega el logo del negro del fondo. */
  filter: drop-shadow(0 0 42px rgba(198, 154, 62, .34));
  transform: scale(.88);
  transition: transform .26s cubic-bezier(.2, .9, .3, 1.2);
}
.logo-visor.is-open .logo-visor__img { transform: scale(1); }

.logo-visor__pie {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .3em;
  color: var(--oro-apagado);
  text-align: center;
}

.logo-visor__cerrar {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: 10px;
  color: var(--oro-brillo);
}

@media (prefers-reduced-motion: reduce) {
  .logo-visor,
  .logo-visor__img { transition: none; }
  .logo-visor__img { transform: none; }
}

.buscador {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--negro-campo);
  border: 1px solid var(--borde-oro);
  border-radius: var(--radio);
  padding: 9px 12px;
  transition: border-color .18s ease;
}
.buscador:focus-within { border-color: var(--oro); }
.buscador__ico { width: 14px; height: 14px; flex: none; color: var(--oro); }
.buscador input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  color: var(--texto);
  font: inherit;
  font-size: 13px;
  padding: 0;
}
.buscador input::placeholder { color: var(--texto-3); }
.buscador input:focus { outline: none; }
.buscador input::-webkit-search-cancel-button { filter: invert(1) opacity(.4); }

.header__acciones { display: none; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  color: var(--oro-brillo);
}
.icon-btn svg { width: 21px; height: 21px; }

.hamburguesa {
  flex: none;
  width: 30px; height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
}
.hamburguesa span {
  display: block;
  width: 22px; height: 2px;
  background: var(--oro-brillo);
  transition: transform .2s ease, opacity .2s ease, width .2s ease;
}
.hamburguesa span:last-child { width: 14px; background: var(--oro); }
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { width: 22px; transform: translateY(-7px) rotate(-45deg); }

/* Nav de 4 secciones en su propia línea (móvil) */
.nav-mob {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 0 var(--gutter) 8px;
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--texto-2);
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-mob::-webkit-scrollbar { display: none; }
.nav-mob__link {
  white-space: nowrap;
  padding: 9px 0 5px;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.nav-mob__link:hover,
.nav-mob__link.is-active { color: var(--oro-brillo); border-bottom-color: var(--oro); }

.nav-desk { display: none; }

/* ============================================================
   Menú móvil
   ============================================================ */
.menu-panel[hidden],
.menu-backdrop[hidden] { display: none; }

.menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  z-index: 40;
  opacity: 0;
  transition: opacity .22s ease;
}
.menu-backdrop.is-open { opacity: 1; }

.menu-panel {
  position: fixed;
  top: 0; right: 0;
  z-index: 50;
  width: min(84vw, 320px);
  height: 100dvh;
  background: var(--negro-puro);
  border-left: 1px solid var(--borde-oro);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
}
.menu-panel.is-open { transform: translateX(0); }

.menu-panel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--borde-oro);
}
.menu-panel__titulo {
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--oro-apagado);
}

.menu-panel__nav { display: flex; flex-direction: column; }
.menu-panel__nav a,
.menu-panel__nav button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 16px 2px;
  font-size: 14px;
  letter-spacing: .12em;
  color: var(--texto-2);
  border-bottom: 1px solid var(--borde);
  transition: color .18s ease;
}
.menu-panel__nav a:hover,
.menu-panel__nav button:hover { color: var(--oro-brillo); }

.menu-panel__wa { margin-top: auto; }

/* ============================================================
   Paneles del nav (Nosotros, Envíos, Punto de encuentro, Contacto)
   Cuelgan del tope pegajoso y se superponen al contenido.
   ============================================================ */
.paneles {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
}

.panel {
  position: relative;
  background: #0a0a0a;
  border-bottom: 1px solid var(--borde-oro);
  box-shadow: 0 26px 44px rgba(0, 0, 0, .65);
  max-height: 72dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: panel-entra .22s ease both;
}
.panel[hidden] { display: none; }

@keyframes panel-entra {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

.panel__cerrar {
  position: absolute;
  top: 6px; right: 6px;
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--oro-apagado);
  transition: color .18s ease;
}
.panel__cerrar:hover { color: var(--oro-brillo); }
.panel__cerrar svg { width: 18px; height: 18px; }

.panel__grid {
  display: grid;
  gap: 18px;
  padding-block: 26px 30px;
}

.panel__titulo {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .07em;
  color: var(--oro-texto);
}

.panel__regla {
  display: block;
  width: 42px; height: 2px;
  background: var(--oro);
  margin: 11px 0 9px;
}

.panel__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 15px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--texto-2);
}
.panel__cuerpo strong { color: var(--oro-texto); font-weight: 500; }

.panel__destacado {
  color: var(--oro-brillo);
  font-weight: 500;
}

.panel__puntos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px 14px;
  font-size: 13px;
}

.panel__contactos {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.contacto__label {
  display: block;
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--oro-apagado);
  margin-bottom: 4px;
}
.contacto__valor {
  font-size: 19px;
  color: var(--oro-texto);
  border-bottom: 1px solid var(--oro-profundo);
  transition: color .18s ease, border-color .18s ease;
}
.contacto__valor:hover { color: var(--oro-brillo); border-bottom-color: var(--oro); }

/* ============================================================
   Arte principal
   ============================================================ */
.arte {
  background: var(--negro-puro);
  display: flex;
  justify-content: center;
  line-height: 0;
}
.arte img { width: 100%; height: auto; }

/* ============================================================
   Vidrieras: las dos ventanas de publicidad

   Son dos cajas hermanas separadas por una juntura dorada. El
   fondo del grid es el que se ve por el hueco, así el marco se
   dibuja solo sin bordes por ventana.

   Van lado a lado en todas las pantallas, también en el celular:
   ahí la tipografía se achica en vez de apilarse, para no perder
   el aire de las dos ventanas.
   ============================================================ */
.vidrieras {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--borde-oro);
  border-block: 1px solid var(--borde-oro);
}

.vidriera {
  position: relative;
  overflow: hidden;
  background: var(--negro-puro);
  min-height: 275px;
}

/* ------------------------------------------------------------
   Ventana 1: la gorra del mes
   ------------------------------------------------------------ */
.vidriera--top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
  align-items: center;
  gap: 2px;
  padding: 28px 10px 14px;
  background:
    radial-gradient(88% 62% at 74% 48%, rgba(150, 22, 22, .34), transparent 62%),
    linear-gradient(155deg, #0d0605, #050505 58%);
}

/* Cinta de esquina, con el corte en diagonal a la derecha. */
.cinta {
  position: absolute;
  top: 0; left: 0;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(180deg, #b4161f, #7d0d15);
  color: #ffe7e7;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 5px 13px 5px 10px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
}
/* En celular la cinta se acorta: si no, el botón de la colección,
   que va centrado arriba, le pisa la última palabra. */
.cinta__largo { display: none; }

.cinta::before {
  content: "";
  width: 4px; height: 4px;
  background: #ffd9d9;
  transform: rotate(45deg);
}

.top__texto {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.top__titulo {
  font-size: clamp(13px, 4.3vw, 40px);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: .01em;
  color: var(--texto);
}
.top__titulo span { display: block; }
.top__titulo-oro { color: var(--oro-brillo); }

.top__estrellas {
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--oro);
}

.top__nombre {
  font-size: 9.5px;
  color: var(--texto-2);
  max-width: 26ch;
}

.top__precio {
  font-size: clamp(15px, 4.8vw, 38px);
  font-weight: 700;
  color: var(--texto);
}
.top__precio:empty { display: none; }

/* Los dos botones de las ventanas achican con la caja: en el
   celular cada ventana mide media pantalla. */
.vidriera .btn-linea {
  font-size: 8px;
  letter-spacing: .08em;
  padding: 9px 8px;
  min-height: 34px;
  white-space: nowrap;  /* en 320 px el botón entra justo: mejor angosto que en dos líneas */
}

.top__cta { margin-top: 2px; }
.top__cta[disabled] {
  border-color: var(--borde-oro);
  color: var(--texto-3);
  cursor: default;
}
.top__cta[disabled]:hover { background: rgba(5,5,5,.55); color: var(--texto-3); }

/* La foto flota sobre un aro dorado, como en el arte de la marca. */
.top__foto {
  position: relative;
  display: grid;
  place-items: center;
  align-self: center;
}

.top__halo {
  position: absolute;
  width: 106%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(198, 154, 62, .5);
  background: radial-gradient(closest-side, rgba(198, 154, 62, .12), transparent 78%);
  box-shadow: 0 0 54px rgba(198, 154, 62, .16), inset 0 0 44px rgba(198, 154, 62, .08);
}

/* La regla global `img { display: block }` le gana al [hidden] del
   navegador: sin esto, mientras no hay foto queda un marco vacío. */
.top__img[hidden] { display: none; }

/* Más chica que el aro: la foto queda adentro y el aro se ve entero.
   El borde dorado es para las fotos de catálogo, que vienen con
   fondo blanco: sin él, el cuadrado blanco tapa parte del aro y
   parece un recorte mal hecho; con él se lee como un cuadro. */
.top__img {
  position: relative;
  width: 86%;
  aspect-ratio: 1;
  object-fit: contain;
  border: 1px solid rgba(198, 154, 62, .55);
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .8));
}

/* Cuando la gorra tiene su foto recortada (PNG/WebP sin fondo) no va
   marco: flota sobre el aro, que es como estaba pensada la vidriera.
   Un poco más grande, porque sin el fondo blanco alrededor la gorra
   se veía chica adentro del aro. */
.top__img--recorte {
  width: 100%;
  border: none;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .85));
}

/* ------------------------------------------------------------
   Ventana 2: el manifiesto de la marca
   ------------------------------------------------------------ */
.vidriera--marca {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 22px 10px;
}

.marca__fondos { position: absolute; inset: 0; }

/* Las fotos se turnan con un fundido; la que manda lleva is-visible. */
.marca__fondo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.marca__fondo.is-visible { opacity: 1; }

/* Velo para que el texto se lea sobre cualquiera de las fotos. */
.vidriera--marca::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.28) 34%, rgba(0,0,0,.86) 78%);
}

.marca__texto {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 8px;
}

.marca__titulo {
  font-size: clamp(13px, 4vw, 36px);
  font-weight: 700;
  line-height: 1.06;
  color: var(--texto);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .9);
}

.marca__bajada {
  font-size: clamp(9.5px, 2.7vw, 17px);
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.35;
  color: var(--oro-texto);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .9);
}

.marca__logo {
  width: clamp(46px, 14vw, 104px);
  height: auto;
  margin-top: 2px;
  filter: drop-shadow(0 0 26px rgba(198, 154, 62, .38));
}

/* ------------------------------------------------------------
   Botón de la colección

   Va montado sobre el borde de arriba, centrado en la juntura de
   las dos ventanas: cae justo abajo del arte principal. El aro
   negro del box-shadow lo despega del fondo que le toque atrás.
   ------------------------------------------------------------ */
.vidrieras__cta {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 10px 18px;
  background: linear-gradient(180deg, var(--oro-claro), var(--oro-brillo) 48%, var(--oro));
  border: 1px solid var(--oro-claro);
  color: #12100a;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: .16em;
  white-space: nowrap;
  box-shadow: 0 0 0 5px rgba(5, 5, 5, .92), 0 8px 26px rgba(198, 154, 62, .4);
  transition: filter .18s ease;
}
.vidrieras__cta:hover { filter: brightness(1.07); }
.vidrieras__cta:active { filter: brightness(.95); }

@media (prefers-reduced-motion: reduce) {
  .marca__fondo { transition: none; }
}

/* ============================================================
   Botones
   ============================================================ */
.btn-linea {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--oro);
  color: var(--oro-brillo);
  background: rgba(5,5,5,.55);
  font-size: 11px;
  letter-spacing: .18em;
  padding: 10px 16px;
  transition: background-color .18s ease, color .18s ease;
}
.btn-linea:hover { background: var(--oro); color: #12100a; }

.btn-oro {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  background: linear-gradient(180deg, var(--oro-claro), var(--oro) 60%, #a97f28);
  color: #12100a;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
  text-align: center;
  padding: 13px 6px;
  min-height: 44px;
  margin-top: 2px;
  transition: filter .18s ease;
}
.btn-oro:hover { filter: brightness(1.08); }
.btn-oro:active { filter: brightness(.94); }

.btn-oro__brillo {
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent);
  animation: shine 3.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shine {
  0%   { transform: translateX(-120%); }
  55%  { transform: translateX(320%); }
  100% { transform: translateX(320%); }
}

.btn-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--wa-borde);
  background: var(--wa-fondo);
  color: var(--wa-texto);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  padding: 11px 6px;
  min-height: 44px;
  transition: background-color .18s ease;
}
.btn-wa:hover { background: #122012; }
.btn-wa svg { width: 14px; height: 14px; flex: none; }

/* ============================================================
   Secciones
   ============================================================ */
.seccion { padding-top: 16px; }

.seccion__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}

.seccion__kicker {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .16em;
  color: var(--oro-apagado);
}

.seccion__titulo {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .06em;
  color: var(--texto);
}

.seccion__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--texto-3);
  transition: color .18s ease;
}
.seccion__link:hover { color: var(--oro-brillo); }
.seccion__link svg { width: 12px; height: 12px; }

/* Tipo de visera */
.viseras {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.visera {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 3px 10px;
  border: 1px solid var(--borde-suave);
  background: var(--negro-barra);
  min-height: 44px;
  transition: border-color .2s ease, background .2s ease;
}
.visera img {
  width: 100%;
  height: 52px;
  object-fit: contain;
  opacity: .62;
  transition: opacity .2s ease;
}
.visera span {
  font-size: 10px;
  letter-spacing: .08em;
  color: #9a9a9a;
  transition: color .2s ease;
}
.visera:hover img { opacity: .85; }
.visera.is-active {
  border-color: var(--oro);
  background: linear-gradient(180deg, #150f05, var(--negro));
}
.visera.is-active img { opacity: 1; }
.visera.is-active span { color: var(--oro-texto); }
.visera__largo { display: none; }

/* Destacados */
.grilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-bottom: 18px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card__foto {
  position: relative;
  aspect-ratio: 4 / 5;
  background: repeating-linear-gradient(-45deg, #0d0a04 0 14px, #12100a 14px 28px);
  border: 1px solid var(--borde-oro);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card__foto img { width: 100%; height: 100%; object-fit: cover; }

/* La foto de la card se desliza: las otras fotos están al lado,
   fuera del recorte. El pan-y deja que la página siga scrolleando
   con el dedo en vertical. */
.card__foto { touch-action: pan-y; }

.card__pista {
  flex: none;
  display: flex;
  width: 100%; height: 100%;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.card__pista img { flex: 0 0 100%; }

.card__minis {
  display: flex;
  gap: 5px;
}

.card__mini {
  width: 34px;
  aspect-ratio: 4 / 5;
  flex: none;
  border: 1px solid var(--borde-oro);
  overflow: hidden;
  opacity: .45;
  transition: opacity .18s ease, border-color .18s ease;
}
.card__mini img { width: 100%; height: 100%; object-fit: cover; }
.card__mini:hover { opacity: .8; }
.card__mini.is-active { opacity: 1; border-color: var(--oro); }
.card__foto-nota {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  color: var(--oro-tenue);
}

.card__nombre { font-size: 13px; color: var(--texto); }
.card__precio { font-weight: 700; font-size: 17px; color: var(--oro-texto); }

.card__badge {
  position: absolute;
  left: 8px; bottom: 8px;
  background: var(--oro-profundo);
  color: var(--oro-texto);
  font-size: 10px;
  padding: 5px 9px;
}

.btn-oro[disabled] {
  opacity: .45;
  cursor: not-allowed;
}
.btn-oro[disabled]:hover { filter: none; }

/* Filtro de visera sin resultados */
.grilla__vacio {
  grid-column: 1 / -1;
  padding: 28px 0;
  text-align: center;
  font-size: 13px;
  color: var(--texto-3);
}

/* Líneas de esqueleto mientras no hay productos cargados */
.linea {
  display: block;
  background: var(--skeleton);
}
.linea--nombre { width: 78%; height: 12px; }
.linea--precio { width: 52%; height: 18px; }

/* ============================================================
   Pie
   ============================================================ */
.pie {
  border-top: 1px solid var(--borde-oro);
  margin-top: 4px;
}

.pie__cols {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-block: 18px;
}

.pie__datos {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13px;
}

.dato { display: flex; gap: 10px; }
.dato__label {
  color: var(--oro-brillo);
  font-weight: 700;
  flex: none;
  width: 88px;
}
.dato__valor { color: var(--texto-2); }
.dato__valor a {
  color: var(--texto-2);
  border-bottom: 1px solid var(--oro-profundo);
  transition: color .18s ease, border-color .18s ease;
}
.dato__valor a:hover { color: var(--oro-brillo); border-bottom-color: var(--oro); }

.pie__nav {
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 13px;
  color: var(--texto-3);
}
.pie__titulo {
  color: var(--oro-texto);
  letter-spacing: .14em;
  font-size: 12px;
}
.pie__nav a,
.pie__nav button {
  text-align: left;
  color: var(--texto-3);
  transition: color .18s ease;
}
.pie__nav a:hover,
.pie__nav button:hover { color: var(--oro-brillo); }

.pie__base {
  border-top: 1px solid var(--borde-header);
  padding-block: 18px;
  font-size: 12px;
  color: var(--texto-5);
}

/* ============================================================
   Tabbar (solo móvil)
   ============================================================ */
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 35;
  background: var(--negro-puro);
  border-top: 1px solid var(--oro-profundo);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.tabbar__items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-top: 8px;
}

.tabbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 0;
  min-height: 44px;
  color: var(--texto-3);
  font-size: 10px;
  transition: color .18s ease;
}
.tabbar__item svg { width: 20px; height: 20px; }
.tabbar__item:hover { color: var(--oro-texto); }
.tabbar__item.is-active { color: var(--oro-brillo); }

.tabbar__handle {
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tabbar__handle span {
  width: 130px; height: 4px;
  border-radius: 2px;
  background: var(--oro-profundo);
}

/* ============================================================
   Tablet
   ============================================================ */
@media (min-width: 640px) {
  :root { --gutter: 24px; }

  .grilla { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .panel__puntos { grid-template-columns: repeat(3, 1fr); }

  .vidriera { min-height: 340px; }
  .vidriera--top { padding: 42px 16px 22px; gap: 6px; }
  .top__texto { gap: 9px; }
  .top__estrellas { font-size: 12px; letter-spacing: .2em; }
  .top__nombre { font-size: 12px; }
  .cinta { font-size: 9px; letter-spacing: .14em; padding: 7px 18px 7px 14px; }
  .cinta__corto { display: none; }
  .cinta__largo { display: inline; }
  .vidriera--top { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
  .vidriera .btn-linea { font-size: 10px; letter-spacing: .14em; padding: 10px 14px; min-height: 40px; }
  .vidriera--marca { padding: 30px 16px; }
  .marca__texto { gap: 12px; }
  .vidrieras__cta { min-height: 42px; padding: 12px 24px; font-size: 10px; }

  .visera img { height: 84px; }
  .visera span { font-size: 12px; }
  .seccion { padding-top: 28px; }
}

/* ============================================================
   Escritorio
   ============================================================ */
@media (min-width: 1024px) {
  :root { --gutter: 48px; --tabbar-h: 0px; }

  body { padding-bottom: 0; }

  .beneficios { padding: 8px 0; --mrq-vel: 23; } /* los 40 s del diseño */
  .beneficio { gap: 13px; padding: 0 34px; }
  .beneficio__ico { width: 44px; height: 30px; }
  .beneficio__titulo { font-size: 12px; }
  .beneficio__sub { font-size: 10px; }
  .chip { font-size: 9.5px; padding: 2px 8px; }

  .header__fila { gap: 28px; padding-block: 16px; }
  .header__logo img { width: 58px; height: 58px; }

  .nav-desk {
    display: flex;
    gap: 30px;
    font-size: 12px;
    letter-spacing: .14em;
    color: var(--texto-2);
  }
  .nav-desk__link {
    white-space: nowrap;
    padding: 6px 0 4px;
    border-bottom: 1px solid transparent;
    transition: color .18s ease, border-color .18s ease;
  }
  .nav-desk__link:hover,
  .nav-desk__link.is-active { color: var(--oro-brillo); border-bottom-color: var(--oro); }

  .buscador {
    flex: 1;
    max-width: 420px;
    margin-left: auto;
    padding: 12px 14px;
    gap: 9px;
  }
  .buscador__ico { width: 15px; height: 15px; }

  .header__acciones { display: flex; align-items: center; gap: 8px; flex: none; }
  .hamburguesa, .nav-mob, .tabbar { display: none; }
  .menu-panel, .menu-backdrop { display: none !important; }

  .panel__grid {
    grid-template-columns: 240px minmax(0, 640px);
    gap: 32px 48px;
    padding-block: 40px 46px;
  }
  .panel__titulo { font-size: 30px; }
  .panel__regla { width: 52px; margin: 14px 0 11px; }
  .panel__cuerpo { font-size: 14px; gap: 17px; }
  .panel__puntos { font-size: 14px; }
  .panel__cerrar { top: 10px; right: 16px; }

  .arte img { width: 900px; max-width: 100%; }

  .vidriera { min-height: 420px; }
  .vidriera--top { padding: 56px var(--gutter) 36px; gap: 12px; }
  .top__texto { gap: 13px; }
  .top__titulo { font-size: 36px; }
  .top__estrellas { font-size: 15px; }
  .top__nombre { font-size: 14px; }
  .top__precio { font-size: 34px; }
  .cinta { font-size: 10px; letter-spacing: .16em; padding: 9px 22px 9px var(--gutter); }
  .vidriera .btn-linea { font-size: 12px; letter-spacing: .18em; padding: 13px 22px; min-height: 44px; }

  .vidrieras__cta { min-height: 46px; padding: 14px 32px; font-size: 12px; letter-spacing: .2em; }

  .vidriera--marca { padding: 40px var(--gutter); }
  .marca__titulo { font-size: 32px; }
  .marca__bajada { font-size: 16px; }
  .marca__texto { gap: 14px; }

  .seccion { padding-top: 44px; }
  .seccion__head { margin-bottom: 18px; }
  .seccion__kicker { font-size: 13px; letter-spacing: .22em; }
  .seccion__titulo { font-size: 24px; letter-spacing: .08em; }
  .seccion__link { font-size: 12px; }

  .viseras { gap: 16px; }
  .visera { gap: 10px; padding: 18px 10px 20px; }
  .visera img { height: 132px; }
  .visera span { font-size: 13px; letter-spacing: .14em; }
  .visera__corto { display: none; }
  .visera__largo { display: inline; }

  .grilla { grid-template-columns: repeat(4, 1fr); gap: 22px; padding-bottom: 48px; }
  .card { gap: 9px; }
  .card__mini { width: 42px; }
  .card__nombre { font-size: 16px; }
  .card__precio { font-size: 26px; }
  .linea--precio { height: 26px; }
  .btn-oro { font-size: 13px; letter-spacing: .14em; padding: 16px; }
  .btn-wa { font-size: 12px; letter-spacing: .12em; padding: 13px; }
  .btn-wa svg { width: 15px; height: 15px; }

  .pie__cols {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 48px;
    padding-block: 40px;
  }
  .pie__datos { gap: 14px; font-size: 14px; }
  .dato__label { width: 96px; }
}

/* ============================================================
   Carrito

   El cajón es el mismo patrón que el menú móvil: fijo a la
   derecha, con backdrop y transformación. Cambia el ancho,
   porque acá adentro entran fotos, cantidades y totales.
   ============================================================ */
.carrito[hidden] { display: none; }

.carrito {
  position: fixed;
  top: 0; right: 0;
  z-index: 50;
  width: min(94vw, 420px);
  height: 100dvh;
  background: var(--negro-puro);
  border-left: 1px solid var(--borde-oro);
  display: flex;
  flex-direction: column;
  padding: 16px 16px 0;
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.4,0,.2,1);
}
.carrito.is-open { transform: translateX(0); }

/* Solo scrollea el medio: la cabecera y el pie con el total
   quedan siempre a la vista. */
.carrito__scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-inline: -16px;
  padding: 12px 16px;
}

.carrito__vacio {
  color: var(--texto-3);
  font-size: 12px;
  letter-spacing: .04em;
  padding: 28px 0;
  text-align: center;
}

.carrito__lista { display: flex; flex-direction: column; }

/* Contador sobre el ícono del carrito */
.icon-btn--carrito,
.tabbar__item--carrito { position: relative; }

.badge {
  position: absolute;
  top: -2px; right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--oro);
  color: #12100a;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.badge[hidden] { display: none; }
.tabbar__item--carrito .badge { top: 2px; right: calc(50% - 20px); }

/* ------------------------------------------------------------
   Línea de producto
   ------------------------------------------------------------ */
.linea-carrito {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--borde);
}

.linea-carrito__foto {
  width: 64px;
  flex: none;
  aspect-ratio: 4 / 5;
  background: var(--negro-foto);
  border: 1px solid var(--borde);
  overflow: hidden;
}
.linea-carrito__foto img { width: 100%; height: 100%; object-fit: cover; }

.linea-carrito__datos {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.linea-carrito__nombre { font-size: 13px; color: var(--texto); }
.linea-carrito__unitario { font-size: 10px; color: var(--texto-3); }

.linea-carrito__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}
.linea-carrito__total {
  font-weight: 700;
  font-size: 14px;
  color: var(--oro-texto);
}

.linea-carrito__quitar {
  align-self: flex-start;
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--texto-5);
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.linea-carrito__quitar:hover { color: var(--texto-2); border-bottom-color: var(--texto-5); }

.pasos {
  display: flex;
  align-items: center;
  border: 1px solid var(--borde-oro);
}
.pasos__btn {
  width: 32px;
  height: 32px;
  color: var(--oro-texto);
  font-size: 15px;
  line-height: 1;
  transition: background-color .18s ease;
}
.pasos__btn:hover { background: #171208; }
.pasos__n {
  min-width: 28px;
  text-align: center;
  font-size: 13px;
  color: var(--texto);
  border-inline: 1px solid var(--borde-oro);
  line-height: 32px;
}

/* ------------------------------------------------------------
   Cotizador de envío
   ------------------------------------------------------------ */
.envio { padding-top: 16px; }

.envio__titulo {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  color: var(--oro-apagado);
  margin-bottom: 10px;
}

.envio__destino {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

/* Buscador de códigos postales del Correo, en otra pestaña: mucha
   gente no se lo sabe y sin el CP la etiqueta del paquete queda a
   medias. */
.envio__cpa {
  justify-self: start;
  font-size: 10.5px;
  color: var(--texto-3);
  border-bottom: 1px solid var(--borde-oro);
  padding-bottom: 1px;
  transition: color .18s ease, border-color .18s ease;
}
.envio__cpa:hover { color: var(--oro-texto); border-color: var(--oro); }

.campo { display: flex; flex-direction: column; gap: 4px; }
.campo__label {
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--texto-3);
}
.campo__control {
  width: 100%;
  min-height: 42px;
  background: var(--negro-campo);
  border: 1px solid var(--borde-oro);
  color: var(--texto);
  font: inherit;
  font-size: 13px;
  padding: 8px 10px;
}
.campo__control:focus-visible { border-color: var(--oro); }
select.campo__control { appearance: none; padding-right: 26px; }

.envio__opciones { display: flex; flex-direction: column; gap: 6px; }

.envio-op {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.envio-op:hover { border-color: var(--borde-oro); }
.envio-op.is-active { border-color: var(--oro); background: #100d07; }

.envio-op__radio { accent-color: var(--oro); flex: none; margin: 0; }

.envio-op__texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.envio-op__nombre { font-size: 12px; color: var(--texto); }

/* Dos líneas y corta: el detalle lo escribe la dueña y un texto
   largo empujaría el resto de las opciones fuera de la pantalla. */
.envio-op__detalle {
  font-size: 10px;
  color: var(--texto-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.envio-op__precio {
  flex: none;
  font-weight: 700;
  font-size: 13px;
  color: var(--oro-texto);
}

.envio__nota,
.envio__pie {
  font-size: 10px;
  color: var(--texto-5);
  line-height: 1.5;
}

/* Cuando el pedido pasa de una caja, esto reemplaza a la lista de
   precios: tiene que leerse como una opción, no como una aclaración. */
.envio__nota--destacada {
  display: block;
  border: 1px solid var(--borde-oro);
  border-left: 2px solid var(--oro);
  background: var(--negro-campo);
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--oro-texto);
  margin-bottom: 8px;
}
.envio__pie { margin-top: 8px; }

/* ------------------------------------------------------------
   Pie con los totales
   ------------------------------------------------------------ */
.carrito__pie {
  flex: none;
  border-top: 1px solid var(--borde-oro);
  background: var(--negro-puro);
  margin-inline: -16px;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
}
.carrito__pie[hidden] { display: none; }

.carrito__totales { margin-bottom: 10px; }

.total {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--texto-2);
  padding: 3px 0;
}
.total--final {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--borde);
  font-weight: 700;
  font-size: 16px;
  color: var(--oro-texto);
}
.carrito__cta { width: 100%; }

@media (min-width: 640px) {
  .envio__destino { grid-template-columns: 1fr 120px; }
}

/* ============================================================
   Aviso breve
   ============================================================ */
.aviso {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  transform: translate(-50%, 12px);
  max-width: min(92vw, 420px);
  background: #12100a;
  border: 1px solid var(--oro);
  color: var(--oro-texto);
  font-size: 12px;
  letter-spacing: .04em;
  text-align: center;
  padding: 12px 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.aviso.is-open { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   Accesibilidad, menos movimiento
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .beneficios__viewport,
  .panel,
  .btn-oro__brillo { animation: none; }
  .btn-oro__brillo { display: none; }
  .menu-panel,
  .menu-backdrop,
  .carrito,
  .aviso { transition: none; }
  * { scroll-behavior: auto !important; }
}

html { scroll-behavior: smooth; }

/* ============================================================
   Ficha de producto

   Se abre encima de la home, centrada. La foto arriba con fondo
   claro, los datos abajo sobre negro y el precio con el botón
   siempre a la vista al pie, aunque la descripción sea larga.
   ============================================================ */
.ficha[hidden],
.ficha-backdrop[hidden] { display: none; }

/* Propio, y no el del menú móvil: ese está apagado en escritorio y
   la ficha quedaba flotando sobre la home sin velo ni clic afuera. */
.ficha-backdrop {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(0, 0, 0, .78);
  opacity: 0;
  transition: opacity .22s ease;
}
.ficha-backdrop.is-open { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .ficha-backdrop { transition: none; }
}

.ficha {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: 0;
  width: min(100%, 420px);
  /* El min-height mantiene el alto parejo entre una gorra y otra
     aunque a una le falte la descripción. Va acá y no en el cuerpo:
     puesto adentro impedía que la ficha se encogiera en pantallas
     bajas y el precio quedaba cortado abajo del borde. */
  min-height: min(560px, 92dvh);
  max-height: min(92dvh, 760px);
  display: flex;
  flex-direction: column;
  background: var(--negro-puro);
  border: 1px solid var(--borde-oro);
  border-bottom: none;
  overflow: hidden;
  transform: translate(-50%, 100%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.ficha.is-open { transform: translate(-50%, 0); }

/* ------------------------------------------------------------
   Galería
   ------------------------------------------------------------ */
/* La foto es cuadrada, pero nunca más alta que media pantalla: en
   una ventana baja, un cuadrado de 420 px se comía todo el alto y
   empujaba el precio afuera. */
.ficha__galeria {
  position: relative;
  flex: 0 1 auto;
  min-height: 0;
  max-height: 46dvh;
  background: var(--negro-foto);
  aspect-ratio: 1;
  overflow: hidden;
  touch-action: pan-y;
}

.ficha__pista {
  display: flex;
  height: 100%;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

/* Cada foto entra completa (contain), y lo que sobra a los lados se
   rellena con la misma foto ampliada y borrosa. Con fondo blanco no
   se nota, y las fotos sacadas a mano dejan de tener dos franjas
   blancas al costado. */
.ficha__slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
}
.ficha__slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--foto) center / cover no-repeat;
  filter: blur(24px) saturate(1.05);
  transform: scale(1.18);
}
.ficha__slide img {
  position: relative;
  width: 100%; height: 100%;
  object-fit: contain;
}

.ficha__cerrar {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--borde-oro);
  background: rgba(10, 8, 6, .82);
  color: var(--oro-crema);
  backdrop-filter: blur(4px);
  transition: background-color .18s ease;
}
.ficha__cerrar:hover { background: rgba(10, 8, 6, .9); }
.ficha__cerrar svg { width: 15px; height: 15px; }

.ficha__badge {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  background: rgba(10, 8, 6, .88);
  border: 1px solid var(--oro);
  color: var(--oro-brillo);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  padding: 5px 10px;
}
.ficha__badge[hidden] { display: none; }

/* Mismas barritas que usaba el carrusel, sobre la foto clara. */
.ficha__dots {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 6px;
}
.ficha__dots button {
  box-sizing: content-box;
  width: 16px; height: 3px;
  background: rgba(0, 0, 0, .28);
  background-clip: content-box;
  padding: 8px 0;
  transition: background-color .2s ease;
}
.ficha__dots button.is-active { background-color: var(--oro); }
.ficha__dots:has(button:only-child) { display: none; }

/* ------------------------------------------------------------
   Datos
   ------------------------------------------------------------ */
/* Se estira con lo que sobra y scrollea si la descripción crece:
   el aire de más abajo del nombre lo reserva el min-height de la
   ficha, no este bloque. */
.ficha__cuerpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 18px var(--gutter) 30px;
}

.ficha__kicker {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  color: var(--oro);
}
.ficha__kicker:empty { display: none; }

.ficha__nombre {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.15;
  color: var(--texto);
}

.ficha__desc {
  font-size: 12px;
  line-height: 1.55;
  color: var(--texto-4);
}
.ficha__desc:empty { display: none; }

.ficha__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.ficha__tags:empty { display: none; }

.ficha__tag {
  border: 1px solid var(--borde-oro);
  padding: 4px 10px;
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--oro-texto);
}

/* ------------------------------------------------------------
   Pie: precio, botón y consulta
   ------------------------------------------------------------ */
.ficha__pie {
  flex: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--negro-barra);
  border-top: 1px solid var(--borde);
}

.ficha__precio {
  font-size: 24px;
  font-weight: 700;
  color: var(--texto);
  white-space: nowrap;
}

.ficha__cta { font-size: 11px; padding: 14px 10px; }

.ficha__chat {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  flex: none;
  border: 1px solid var(--wa-borde);
  background: var(--wa-fondo);
  color: var(--wa-texto);
  transition: background-color .18s ease;
}
.ficha__chat:hover { background: #122012; }
.ficha__chat svg { width: 18px; height: 18px; }

/* La foto de la card abre la ficha: es un botón, no un div. */
.card__foto { display: block; width: 100%; text-align: inherit; }

@media (min-width: 640px) {
  .ficha {
    top: 50%;
    bottom: auto;
    border: 1px solid var(--borde-oro);
    transform: translate(-50%, -46%) scale(.97);
    opacity: 0;
    transition: transform .26s cubic-bezier(.2, .9, .3, 1.1), opacity .2s ease;
  }
  .ficha.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  .ficha__cuerpo { padding-bottom: 34px; }
  .ficha__nombre { font-size: 27px; }
  .ficha__precio { font-size: 27px; }
  .ficha__cta { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ficha, .ficha__pista { transition: none; }
}

/* ============================================================
   Filtros

   El botón vive en la cabecera de Destacados y despliega el panel
   abajo. Los botones de tipo de visera de más arriba escriben en
   el mismo estado, así que se ven marcados los dos lados.
   ============================================================ */
.filtros__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--borde-oro);
  color: var(--oro-texto);
  font-size: 11px;
  letter-spacing: .14em;
  white-space: nowrap;
  transition: border-color .18s ease, color .18s ease;
}
.filtros__btn:hover { border-color: var(--oro); color: var(--oro-brillo); }
.filtros__btn svg { width: 14px; height: 14px; }

.filtros__cuenta {
  display: grid;
  place-items: center;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  background: var(--oro);
  color: #12100a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
}
.filtros__cuenta[hidden] { display: none; }

.filtros[hidden] { display: none; }

.filtros {
  border: 1px solid var(--borde-oro);
  background: var(--negro-barra);
  padding: 14px;
  margin-bottom: 16px;
  animation: filtros-entra .18s ease;
}

@keyframes filtros-entra {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.filtros__grupos {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.filtros__titulo {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  color: var(--oro);
  margin-bottom: 7px;
}

.filtros__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filtros__chip {
  border: 1px solid var(--borde);
  padding: 7px 11px;
  font-size: 11px;
  color: var(--texto-2);
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.filtros__chip:hover { border-color: var(--oro-tenue); color: var(--texto); }
.filtros__chip.is-active {
  border-color: var(--oro);
  background: var(--oro-profundo);
  color: var(--oro-brillo);
}

.filtros__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--borde);
}

.filtros__resultado { font-size: 11px; color: var(--texto-3); }

.filtros__limpiar {
  font-size: 11px;
  color: var(--oro-texto);
  border-bottom: 1px solid var(--borde-oro);
  transition: color .18s ease, border-color .18s ease;
}
.filtros__limpiar:hover { color: var(--oro-brillo); border-color: var(--oro); }

/* ============================================================
   Carrito flotante

   En móvil se apoya arriba de la barra inferior; en escritorio,
   donde esa barra no existe, baja al pie de la pantalla.
   ============================================================ */
.fab-carrito {
  position: fixed;
  right: 14px;
  bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom, 0px));
  z-index: 36;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  background: linear-gradient(180deg, var(--oro-claro), var(--oro-brillo) 48%, var(--oro));
  border: 1px solid var(--oro-claro);
  color: #12100a;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .55), 0 0 18px rgba(198, 154, 62, .22);
  transition: filter .18s ease;
}
.fab-carrito:hover { filter: brightness(1.07); }
.fab-carrito:active { filter: brightness(.94); }
.fab-carrito svg { width: 24px; height: 24px; }

/* El contador va afuera del cuadrado, sobre la esquina. */
.fab-carrito .badge {
  top: -7px;
  right: -7px;
  border: 1px solid var(--negro-puro);
}

@media (min-width: 1024px) {
  .fab-carrito { right: 24px; bottom: 24px; width: 58px; height: 58px; }
  .fab-carrito svg { width: 26px; height: 26px; }
  .filtros { padding: 18px 20px; }
  .filtros__grupos { flex-direction: row; flex-wrap: wrap; gap: 14px 34px; }
  .filtros__btn { font-size: 12px; padding: 8px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .filtros { animation: none; }
}

/* ============================================================
   Escritorio: tipografía y cajas

   Este bloque va último a propósito. Los tamaños de más arriba
   están pensados para un teléfono a 390 px, donde la pantalla se
   mira de cerca; en un monitor a 1440 px esas mismas letras de 9
   y 10 px quedan ilegibles. Acá se sube el piso de tamaño y se
   acomodan las cajas que dependen de él.

   Tiene que estar después de las secciones que corrige (carrito,
   filtros, ficha): las media queries no suman especificidad, así
   que gana la regla que aparece última en el archivo.
   ============================================================ */
@media (min-width: 1024px) {
  /* Barra de beneficios */
  .beneficio__titulo { font-size: 13px; }
  .beneficio__sub { font-size: 11.5px; }
  .chip { font-size: 10.5px; padding: 3px 9px; }
  .chip__ico { width: 10px; height: 10px; }

  /* Home */
  .cinta { font-size: 11px; }
  .card__badge { font-size: 11px; padding: 5px 9px; }
  .seccion__link { font-size: 13px; }
  .nav-desk { font-size: 13px; }

  /* Pie */
  .pie__titulo { font-size: 13px; }
  .pie__nav, .pie__datos { font-size: 14px; }
  .pie__base { font-size: 12.5px; }
  .contacto__label { font-size: 12.5px; }

  /* Filtros */
  .filtros__titulo { font-size: 11.5px; }
  .filtros__chip { font-size: 12px; padding: 8px 13px; }
  .filtros__resultado, .filtros__limpiar { font-size: 12px; }
  .filtros__cuenta { font-size: 11px; min-width: 18px; height: 18px; }

  /* ------------------------------------------------------------
     Carrito

     El cajón se ensancha junto con la letra: con el ancho de
     móvil, el nombre del envío y su precio se pisaban.
     ------------------------------------------------------------ */
  .carrito { width: min(94vw, 468px); padding: 20px 20px 0; }
  .carrito__scroll { margin-inline: -20px; padding: 14px 20px; }
  .carrito__pie { margin-inline: -20px; padding: 14px 20px 16px; }

  .badge { font-size: 11px; min-width: 17px; height: 17px; line-height: 17px; }
  .linea-carrito__nombre { font-size: 14px; }
  .linea-carrito__unitario { font-size: 11.5px; }
  .linea-carrito__quitar { font-size: 11px; }
  .linea-carrito__total { font-size: 15px; }

  .envio__titulo { font-size: 12px; }
  .campo__label { font-size: 11.5px; }
  .campo__control { font-size: 14px; min-height: 44px; }
  .envio__cpa { font-size: 11.5px; }
  .envio-op { padding: 11px 13px; }
  .envio-op__nombre { font-size: 13px; }
  .envio-op__detalle { font-size: 11.5px; }
  .envio-op__precio { font-size: 14px; }
  .envio__nota, .envio__pie { font-size: 11px; }
  .envio__nota--destacada { font-size: 13px; }
  .total { font-size: 13px; }
  .total--final { font-size: 17px; }
  .carrito__vacio { font-size: 13px; }

  /* ------------------------------------------------------------
     Ficha apaisada

     En una sola columna la foto cuadrada ocupaba media pantalla y
     el precio quedaba abajo del borde en cualquier notebook. Acá
     la foto pasa a la izquierda y los datos a la derecha: el alto
     de la ficha lo marca la foto, así que entra siempre.
     ------------------------------------------------------------ */
  .ficha {
    display: grid;
    grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    width: min(92vw, 900px);
    min-height: 0;
    max-height: min(88dvh, 620px);
  }
  .ficha__galeria {
    grid-row: 1 / -1;
    max-height: none;
    border-right: 1px solid var(--borde-oro);
  }
  .ficha__cuerpo {
    gap: 11px;
    padding: 32px 32px 24px;
  }
  .ficha__pie { padding: 16px 32px; gap: 12px; }
  .ficha__kicker { font-size: 11.5px; }
  .ficha__nombre { font-size: 30px; }
  .ficha__desc { font-size: 13.5px; }
  .ficha__tag { font-size: 11.5px; padding: 5px 12px; }
  .ficha__badge { font-size: 10px; padding: 6px 11px; }
  .ficha__precio { font-size: 28px; }
  .ficha__cta { font-size: 12.5px; padding: 15px 12px; }
  .ficha__chat { width: 50px; height: 50px; }
  .ficha__chat svg { width: 20px; height: 20px; }
}