/* Vezaira Perfumes. Paleta según docs/VEZAIRA_Paleta_de_Colores.md */
:root {
  --vezaira-primary: #3A0272;
  --vezaira-accent: #CDB379;
  --vezaira-primary-dark: #220044;
  --vezaira-accent-light: #F1E7CF;
  --vezaira-background: #FAF9FC;
  --vezaira-foreground: #181320;

  /* Sitio público: fondo violeta que baja hacia el dorado de acento */
  /* El dorado queda como un toque en la esquina de abajo a la derecha */
  --degrade: linear-gradient(160deg,
    var(--vezaira-primary-dark) 0%,
    var(--vezaira-primary) 18%,
    #4a1a7e 46%,
    #5e2d84 72%,
    #7d4a86 88%,
    #a77a80 96%,
    var(--vezaira-accent) 100%);
  --superficie: rgba(34, 0, 68, .62);
  --superficie-borde: rgba(241, 231, 207, .16);
  --texto-claro: var(--vezaira-background);
  --texto-claro-suave: rgba(250, 249, 252, .74);

  /* Color de los botones (selector de prueba: dorado, turquesa o uno propio) */
  --boton: var(--vezaira-accent);
  --boton-hover: #DCC797;
  --boton-suave: var(--vezaira-accent-light);
  --boton-texto: var(--vezaira-primary-dark);

  /* WhatsApp va siempre con su verde, sin importar el color de los botones */
  --whatsapp: #25D366;

  /* Admin y panel de pedido: superficies claras */
  --texto-suave: #5a5168;
  --linea: #e4dfeb;
  --peligro: #a3123a;

  --fuente-display: 'Marcellus', 'Times New Roman', serif;
  /* Nombre de la marca: serif clásica de alto contraste, como el logo */
  --fuente-marca: 'Cinzel', 'Times New Roman', serif;
  --fuente-texto: 'Figtree', system-ui, sans-serif;

  --ancho: 76rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --radio: 6px;
  --radio-tarjeta: 18px;
}

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

html { -webkit-text-size-adjust: 100%; background: var(--vezaira-primary-dark); }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--degrade);
  color: var(--texto-claro);
  font-family: var(--fuente-texto);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body > main { flex: 1; }

/* Aura: brillos dorados difusos, fijos a la pantalla, que se desplazan lento.
   Así el dorado acompaña desde arriba y la página no arranca en violeta plano. */
body:not(.admin) { position: relative; isolation: isolate; }
body:not(.admin)::before {
  content: '';
  position: fixed;
  inset: -15%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 34% at 82% 16%, rgba(205, 179, 121, .5), transparent 70%),
    radial-gradient(30% 28% at 8% 38%, rgba(205, 179, 121, .26), transparent 70%),
    radial-gradient(34% 30% at 62% 78%, rgba(241, 231, 207, .22), transparent 70%),
    radial-gradient(26% 24% at 30% 4%, rgba(160, 120, 255, .25), transparent 70%);
  filter: blur(30px);
  animation: aura 26s ease-in-out infinite alternate;
}
@keyframes aura {
  50% { transform: translate3d(-4%, 3%, 0) scale(1.06); }
  100% { transform: translate3d(3%, -2%, 0) rotate(6deg) scale(1.1); }
}

body.admin { background: var(--vezaira-background); color: var(--vezaira-foreground); }
body.sin-scroll { overflow: hidden; }

h1, h2, h3 {
  font-family: var(--fuente-display);
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
}

p { margin: 0; }

a { color: var(--vezaira-accent); text-underline-offset: .2em; }
.admin a, .pedido a:not(.boton) { color: var(--vezaira-primary); }
.admin .barra a { color: var(--vezaira-background); }

img { max-width: 100%; display: block; }

.icono { width: 1.25em; height: 1.25em; flex: none; }

:focus-visible {
  outline: 3px solid var(--vezaira-accent);
  outline-offset: 2px;
}

.saltar {
  position: absolute;
  left: -999px;
  top: .5rem;
  background: var(--vezaira-accent);
  color: var(--vezaira-primary-dark);
  padding: .5rem 1rem;
  z-index: 100;
}
.saltar:focus { left: .5rem; }

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Logo */
.logo-v { width: 2.25rem; height: 2.25rem; flex: none; }
.logo-v__trazo { fill: currentColor; }
.logo-v__curva { fill: var(--vezaira-accent); }
.logo-v__estrella {
  fill: var(--vezaira-accent);
  /* Titila: se achica un poco y vuelve, desde su propio centro */
  transform-box: fill-box;
  transform-origin: center;
  animation: titilar 2.6s ease-in-out infinite;
}
@keyframes titilar {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(.72); opacity: .8; }
}

/* Botones */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: .6rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radio);
  font: 600 .95rem/1.2 var(--fuente-texto);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.boton--acento { background: var(--boton); color: var(--boton-texto); }
.boton--acento:hover { background: var(--boton-hover); }
.boton--primario { background: var(--vezaira-primary); color: var(--vezaira-background); }
.boton--primario:hover { background: var(--vezaira-primary-dark); }
.boton--claro { border-color: rgba(250, 249, 252, .45); color: var(--vezaira-background); }
.boton--claro:hover { border-color: var(--vezaira-background); }
.boton--contorno { border-color: currentColor; color: var(--boton); background: transparent; }
.boton--contorno:hover { background: var(--boton); border-color: var(--boton); color: var(--boton-texto); }
.admin .boton--contorno { color: var(--vezaira-primary); }
.admin .boton--contorno:hover { background: var(--vezaira-primary); border-color: var(--vezaira-primary); color: var(--vezaira-background); }
.boton--ancho { width: 100%; }

.enlace {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--vezaira-primary);
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}
.enlace--peligro { color: var(--peligro); }

/* Barra superior */
.barra {
  background: rgba(34, 0, 68, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--superficie-borde);
  color: var(--vezaira-background);
  position: sticky;
  top: 0;
  z-index: 20;
}
.barra__interior {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: .75rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.marca {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: inherit;
  text-decoration: none;
}
.marca__nombre {
  font-family: var(--fuente-marca);
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.marca__seccion { font-size: .85rem; opacity: .75; margin-left: .25rem; }
.barra__nav { display: flex; align-items: center; gap: clamp(.75rem, 3vw, 1.75rem); }
.barra__nav a, .barra__nav .enlace { color: inherit; text-decoration: none; font-weight: 500; }
.barra__nav a:hover, .barra__nav .enlace:hover { text-decoration: underline; }
.barra__nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--vezaira-accent); text-decoration-thickness: 2px; }
.barra__nav form { margin: 0; }

.boton-pedido {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.5rem;
  padding: .4rem .5rem .4rem .9rem;
  background: transparent;
  border: 1px solid rgba(250, 249, 252, .4);
  border-radius: 999px;
  color: inherit;
  font: 500 .95rem var(--fuente-texto);
  cursor: pointer;
}
.boton-pedido:hover { border-color: var(--boton); }
.boton-pedido__cantidad {
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 .4rem;
  border-radius: 999px;
  background: var(--boton);
  color: var(--boton-texto);
  font-weight: 600;
  font-size: .85rem;
  display: inline-grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
}
.latido { animation: latido .35s ease-out; }
@keyframes latido { 50% { transform: scale(1.3); } }

@media (max-width: 34rem) {
  .barra__nav a[href="/#como-pedir"] { display: none; }
  .marca__nombre { font-size: 1.1rem; }
}

/* Portada */
.portada { position: relative; overflow: hidden; }
.portada__interior { position: relative; z-index: 1; }

/* Ondas de flujo: cada capa es el doble de ancha que la pantalla y se desplaza
   media vuelta; como el trazo se repite cada 720 unidades, el bucle no se nota. */
.ondas {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 46%;
  pointer-events: none;
}
.ondas__capa {
  position: absolute;
  inset: 0 auto 0 0;
  width: 200%;
  height: 100%;
  animation: fluir linear infinite;
}
.ondas__capa path { vector-effect: non-scaling-stroke; }
.ondas__capa--1 { animation-duration: 38s; }
.ondas__capa--2 { animation-duration: 26s; animation-direction: reverse; }
.ondas__capa--3 { animation-duration: 52s; }
.ondas__capa--4 { animation-duration: 64s; animation-direction: reverse; }
@keyframes fluir { to { transform: translateX(-50%); } }

.portada__interior {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(3rem, 9vw, 6.5rem) var(--gutter) clamp(6rem, 13vw, 10rem);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
}
.portada__sello {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.portada__sello .logo-v {
  width: clamp(7rem, 17vw, 11rem);
  height: auto;
  aspect-ratio: 1;
  color: var(--vezaira-background);
  animation: aparecer 1.1s ease-out both;
}
.portada__marca {
  font-family: var(--fuente-marca);
  font-weight: 500;
  font-size: clamp(3rem, 10vw, 6.75rem);
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: .5rem;
  animation: aparecer 1.1s .15s ease-out both;
}
/* La curva dorada que cruza la primera A, como en el logo de marca */
.portada__a { position: relative; }
.portada__a::after {
  content: '';
  position: absolute;
  left: -.28em;
  top: .3em;
  width: 1.05em;
  height: .32em;
  border-bottom: .045em solid var(--vezaira-accent);
  border-radius: 0 0 60% 60% / 0 0 100% 100%;
  transform: rotate(-9deg);
  pointer-events: none;
}
.portada__perfumes {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 26rem;
  margin-top: .75rem;
  color: var(--vezaira-accent);
  font-size: clamp(.8rem, 1.6vw, 1rem);
  letter-spacing: .5em;
  text-transform: uppercase;
  animation: aparecer 1.1s .3s ease-out both;
}
.portada__perfumes::before, .portada__perfumes::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: .6;
}
.portada__texto h1 {
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  max-width: 18ch;
}
.portada__texto p {
  margin-top: 1.25rem;
  max-width: 40ch;
  color: var(--texto-claro-suave);
  font-size: 1.075rem;
}
.portada__acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

@keyframes aparecer { from { opacity: 0; transform: translateY(.6rem); } }

@media (max-width: 52rem) {
  .portada__interior { grid-template-columns: 1fr; }
  .portada__texto { text-align: center; }
  .portada__texto h1, .portada__texto p { margin-left: auto; margin-right: auto; }
  .portada__acciones { justify-content: center; }
}

/* Secciones del inicio */
.titulo-seccion { font-size: clamp(1.6rem, 3vw, 2.1rem); }

.destacados { padding: clamp(1.5rem, 4vw, 3rem) 0; }
.destacados__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.indice { padding: 1rem 0; }
.indice__lista {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  border-top: 1px solid var(--superficie-borde);
}
.indice__lista li { border-bottom: 1px solid var(--superficie-borde); }
.indice__lista a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem .25rem;
  margin-right: 1.5rem;
  color: var(--texto-claro);
  text-decoration: none;
}
.indice__lista span { font-family: var(--fuente-display); font-size: 1.3rem; }
.indice__lista small { color: var(--texto-claro-suave); font-size: .85rem; white-space: nowrap; }
.indice__lista a:hover span { text-decoration: underline; text-decoration-color: var(--vezaira-accent); text-decoration-thickness: 2px; }

.como-pedir { padding: clamp(2.5rem, 6vw, 4rem) 0; }
.como-pedir .contenedor > * { position: relative; }
.pasos {
  list-style: none;
  counter-reset: paso;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}
.pasos li {
  counter-increment: paso;
  padding: 1.5rem;
  background: var(--superficie);
  border: 1px solid var(--superficie-borde);
  border-radius: var(--radio-tarjeta);
}
.pasos li::before {
  content: counter(paso);
  display: block;
  font-family: var(--fuente-display);
  font-size: 3rem;
  line-height: 1;
  color: var(--vezaira-accent);
  margin-bottom: .75rem;
}
.pasos h3 { font-size: 1.35rem; }
.pasos p { margin-top: .5rem; max-width: 34ch; color: var(--texto-claro-suave); }

/* Tarjeta de perfume */
.tarjeta {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--superficie-borde);
  border-radius: var(--radio-tarjeta);
  overflow: hidden;
}
.tarjeta__imagen {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 40%, rgba(205, 179, 121, .22), transparent 62%), rgba(34, 0, 68, .5);
}
.tarjeta__imagen img { width: 100%; height: 100%; object-fit: cover; }
.frasco { width: 46%; height: auto; }
.frasco__tapa { fill: var(--vezaira-accent); }
.frasco__cuello { fill: var(--vezaira-accent-light); opacity: .7; }
.frasco__cuerpo { fill: rgba(241, 231, 207, .1); stroke: var(--vezaira-accent-light); stroke-width: 2; }
.frasco__etiqueta { fill: var(--vezaira-primary-dark); stroke: var(--vezaira-accent); stroke-width: 1; }
.frasco__texto { fill: var(--vezaira-accent-light); font: 10px var(--fuente-display); letter-spacing: .08em; }

.tarjeta__cuerpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.1rem 1.25rem;
}
.tarjeta__nombre { font-size: 1.3rem; }
.tarjeta__meta { color: var(--texto-claro-suave); font-size: .9rem; margin-top: .2rem; }
.tarjeta__descripcion { font-size: .9rem; margin-top: .5rem; color: var(--texto-claro-suave); }
.tarjeta__precio {
  margin-top: .9rem;
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tarjeta__acciones {
  display: flex;
  gap: .5rem;
  margin-top: auto;
  padding-top: 1.1rem;
}
.tarjeta__agregar { flex: 1; border-radius: 999px; padding-left: .9rem; padding-right: .9rem; }
.tarjeta__agregar--hecho { background: var(--boton-suave); }
.tarjeta__wa {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--whatsapp);
  color: var(--whatsapp);
  transition: background-color .15s, color .15s;
}
.tarjeta__wa .icono { width: 1.35rem; height: 1.35rem; }
.tarjeta__wa:hover { background: var(--whatsapp); color: #fff; }

/* Carrusel */
.carrusel { position: relative; }
.carrusel__pista {
  list-style: none;
  margin: 0;
  padding: 0 0 .75rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 1rem) / 4);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista > li { scroll-snap-align: start; }
.carrusel__flecha {
  position: absolute;
  top: 38%;
  right: -1.25rem;
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--boton);
  background: var(--vezaira-primary-dark);
  color: var(--boton);
  cursor: pointer;
}
.carrusel__flecha--atras { right: auto; left: -1.25rem; }
.carrusel__flecha--atras .icono { transform: scaleX(-1); }
.carrusel__flecha:hover { background: var(--boton); color: var(--boton-texto); }
.carrusel__flecha:disabled { opacity: 0; pointer-events: none; }
.carrusel--sin-flechas .carrusel__flecha { display: none; }

@media (max-width: 64rem) { .carrusel__pista { grid-auto-columns: calc((100% - 2 * 1rem) / 3); } }
@media (max-width: 46rem) {
  .carrusel__pista { grid-auto-columns: 72%; }
  .carrusel__flecha { display: none; }
}

/* Catálogo */
.catalogo { padding: clamp(2rem, 5vw, 3.5rem) 0 4rem; }
.catalogo__cabecera h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); }
.catalogo__cabecera p { margin-top: .5rem; max-width: 62ch; color: var(--texto-claro-suave); }

.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .75rem 1rem;
  margin: 2rem 0 1rem;
  padding: 1rem;
  background: var(--superficie);
  border: 1px solid var(--superficie-borde);
  border-radius: var(--radio-tarjeta);
}
.admin .filtros { background: #fff; border-color: var(--linea); border-radius: var(--radio); }
.filtros__campo { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; font-weight: 500; color: var(--texto-claro-suave); }
.admin .filtros__campo { color: var(--texto-suave); }
.filtros__campo--texto { flex: 1 1 14rem; }
.filtros .boton--primario { background: var(--boton); color: var(--boton-texto); }
.admin .filtros .boton--primario { background: var(--vezaira-primary); color: var(--vezaira-background); }

/* Campos: bordes suaves, esquinas redondeadas y un anillo de foco violeta en
   vez del contorno grueso del navegador */
input[type="text"], input[type="search"], input[type="number"], input[type="password"], select, textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: .55rem .85rem;
  border: 1px solid #e3dcec;
  border-radius: 10px;
  background: #fff;
  color: var(--vezaira-foreground);
  font: 400 1rem var(--fuente-texto);
  box-shadow: 0 1px 2px rgba(34, 0, 68, .04);
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
input[type="text"]:hover, input[type="search"]:hover, input[type="number"]:hover, input[type="password"]:hover, select:hover, textarea:hover { border-color: #c8bbd9; }
input::placeholder, textarea::placeholder { color: #a99fb8; }
textarea { min-height: 6rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible,
input[type="text"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="password"]:focus, textarea:focus {
  border-color: var(--vezaira-primary);
  box-shadow: 0 0 0 4px rgba(58, 2, 114, .14);
}
/* Select con flecha propia */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%233A0272' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: .7rem;
  cursor: pointer;
}
input[type="file"] { font: inherit; font-size: .95rem; }
input[type="file"]::file-selector-button {
  margin-right: .8rem;
  padding: .55rem 1rem;
  border: 1px solid var(--vezaira-primary);
  border-radius: 999px;
  background: #fff;
  color: var(--vezaira-primary);
  font: 600 .9rem var(--fuente-texto);
  cursor: pointer;
}

.grupo { margin-top: 3rem; }
.grupo__marca {
  font-size: clamp(1.7rem, 3.5vw, 2.3rem);
  padding-bottom: .5rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--superficie-borde);
}
.grilla {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: 1rem;
}
/* En celular, dos tarjetas por fila: WhatsApp pasa a la esquina de la foto
   para que el botón de agregar tenga todo el ancho */
@media (max-width: 34rem) {
  .grilla { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .tarjeta { position: relative; }
  .tarjeta__cuerpo { padding: .8rem; }
  .tarjeta__nombre { font-size: 1.1rem; }
  .tarjeta__precio { font-size: 1.2rem; }
  .tarjeta__agregar { padding: .5rem .4rem; font-size: .8rem; white-space: nowrap; }
  .tarjeta__agregar .icono { display: none; }
  .tarjeta__wa {
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--vezaira-primary-dark);
  }
}

.vacio {
  padding: 3rem 1rem;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 1rem;
  color: var(--texto-claro-suave);
}
.admin .vacio { color: var(--texto-suave); }

/* Pie: franja propia en violeta nocturno, separada del degradé por una línea
   dorada. Así se lee igual sin importar qué tramo del fondo quede detrás. */
.pie {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding: clamp(2.5rem, 6vw, 3.5rem) 0 1.5rem;
  background: rgba(34, 0, 68, .94);
  border-top: 1px solid rgba(205, 179, 121, .45);
  color: var(--texto-claro);
}
.pie__interior {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 2.5rem;
}
.pie__marca { display: flex; gap: 1rem; align-items: flex-start; }
.pie__marca .logo-v { width: 3rem; height: 3rem; color: var(--vezaira-background); }
.pie__nombre { font-family: var(--fuente-marca); font-weight: 500; font-size: 1.5rem; letter-spacing: .14em; text-transform: uppercase; }
.pie__bajada { margin-top: .25rem; color: var(--texto-claro-suave); }
.pie__garantias {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1.5rem;
  font-size: .95rem;
  color: var(--texto-claro-suave);
}
.pie__garantias strong { display: block; font-weight: 600; margin-bottom: .25rem; color: var(--vezaira-accent); }
.pie__legal {
  max-width: var(--ancho);
  margin: 2.5rem auto 0;
  padding: 1.25rem var(--gutter) 0;
  border-top: 1px solid var(--superficie-borde);
  font-size: .85rem;
  color: var(--texto-claro-suave);
}
@media (max-width: 46rem) {
  .pie__interior { grid-template-columns: 1fr; }
  /* Que el WhatsApp flotante y el selector no tapen el final del pie */
  .pie { padding-bottom: 5.5rem; }
}

/* WhatsApp flotante */
.wa-flotante {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 30;
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--whatsapp);
  background: rgba(34, 0, 68, .78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--whatsapp);
  box-shadow: 0 6px 20px rgba(34, 0, 68, .45);
  transition: background-color .15s, color .15s;
}
.wa-flotante .icono { width: 1.8rem; height: 1.8rem; }
.wa-flotante:hover { background: var(--whatsapp); color: #fff; }

/* Panel de pedido (claro, para leer cómodo el detalle) */
.pedido { position: fixed; inset: 0; z-index: 50; color: var(--vezaira-foreground); }
.pedido[hidden] { display: none; }
.pedido__fondo { position: absolute; inset: 0; background: rgba(24, 19, 32, .6); }
.pedido__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(26rem, 100%);
  background: var(--vezaira-background);
  padding: 1.25rem 1.25rem 2rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  animation: entrar .25s ease-out;
}
@keyframes entrar { from { transform: translateX(100%); } }
.pedido__cabecera { display: flex; align-items: center; justify-content: space-between; }
.pedido__cabecera h2 { font-size: 1.6rem; color: var(--vezaira-primary); }
.pedido__cerrar {
  width: 2.5rem; height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  color: var(--vezaira-foreground);
}
.pedido__cerrar:hover { background: var(--linea); }
.pedido__vacio { color: var(--texto-suave); }
.pedido__lista { list-style: none; margin: 0; padding: 0; }
.pedido__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--linea);
}
.pedido__item-nombre { font-weight: 500; }
.pedido__item-precio { font-size: .85rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.cantidad { display: flex; align-items: center; border: 1px solid var(--linea); border-radius: 999px; }
.cantidad button {
  width: 2.25rem; height: 2.25rem;
  border: 0; background: transparent;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--vezaira-primary);
  border-radius: 50%;
}
.cantidad button:hover { background: var(--vezaira-accent-light); }
.cantidad span { min-width: 1.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.pedido__resumen { display: flex; flex-direction: column; gap: 1rem; }
.pedido__resumen[hidden] { display: none; }
.pedido__total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.1rem; }
.pedido__total strong { font-size: 1.4rem; color: var(--vezaira-primary); font-variant-numeric: tabular-nums; }
.pedido__campo { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; font-weight: 500; }
.pedido__nota { font-size: .85rem; color: var(--texto-suave); }

/* Error */
.error { padding: 5rem var(--gutter); display: grid; gap: 1rem; justify-items: start; }
.error h1 { font-size: 2.4rem; }

/* Administración */
.barra--admin { background: var(--vezaira-primary-dark); position: static; backdrop-filter: none; }
.admin-main { padding-top: 2rem; padding-bottom: 4rem; }
.admin-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.admin-cabecera h1 { font-size: 2.2rem; color: var(--vezaira-primary); }

.aviso { padding: .75rem 1rem; border-radius: var(--radio); margin-bottom: 1.25rem; border-left: 4px solid; }
.aviso--ok { background: var(--vezaira-accent-light); border-color: #a88a45; }
.aviso--error { background: #fbe9ee; border-color: var(--peligro); }
.aviso ul { margin: .5rem 0 0; padding-left: 1.25rem; }

.tabla-scroll { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); background: #fff; }
.tabla { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabla th, .tabla td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla th { font-weight: 600; font-size: .85rem; color: var(--texto-suave); background: #f6f3f9; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla__inactivo td { color: var(--texto-suave); }
.tabla__acciones { text-align: right; white-space: nowrap; }
.tabla__acciones > * + * { margin-left: 1rem; }
.tabla__acciones form { display: inline-block; margin: 0; }
.tabla input[type="text"] { min-width: 12rem; }
.input-corto { max-width: 5.5rem; text-align: right; }
.etiqueta { font-size: .75rem; padding: .1rem .45rem; border-radius: 999px; background: var(--vezaira-accent-light); color: var(--vezaira-primary-dark); margin-left: .35rem; }

.formulario { display: grid; gap: 1.25rem; max-width: 44rem; }
.formulario--linea { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; max-width: none; margin-bottom: 1.5rem; }
.formulario--linea .campo { flex: 1 1 16rem; max-width: 24rem; }
.campo { display: flex; flex-direction: column; gap: .35rem; font-weight: 500; font-size: .95rem; border: 0; padding: 0; margin: 0; }
.campo small { font-weight: 400; color: var(--texto-suave); }
.campo__imagen { width: 8rem; height: 8rem; object-fit: cover; border-radius: var(--radio); }
.campos-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; }
.campo--checks legend { margin-bottom: .35rem; }
.check { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
.check input { width: 1.1rem; height: 1.1rem; accent-color: var(--vezaira-primary); }
.formulario__acciones { display: flex; align-items: center; gap: 1.25rem; }
.ayuda { color: var(--texto-suave); font-size: .9rem; margin-bottom: .75rem; }

.ingresar { max-width: 24rem; margin: 3rem auto; display: grid; gap: 1rem; }
.ingresar h1 { font-size: 2.2rem; color: var(--vezaira-primary); }
.ingresar > p { color: var(--texto-suave); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .carrusel__pista { scroll-behavior: auto; }
}

/* Selector de prueba del color de botones */
.selector-botones {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .4rem .35rem .85rem;
  border-radius: 999px;
  background: rgba(34, 0, 68, .88);
  border: 1px solid var(--superficie-borde);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--texto-claro);
  font-size: .85rem;
}
.selector-botones button {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: 500 .85rem var(--fuente-texto);
  cursor: pointer;
}
.selector-botones button::before {
  content: '';
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  background: var(--muestra);
}
.selector-botones button[aria-pressed="true"] { border-color: var(--muestra); }
@media (max-width: 34rem) { .selector-botones > span:first-child, .selector-botones__custom input[type="text"] { display: none; } }

.selector-botones__custom {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding-left: .35rem;
  border-left: 1px solid var(--superficie-borde);
}
.selector-botones__custom input[type="color"] {
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 1px solid var(--superficie-borde);
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.selector-botones__custom input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.selector-botones__custom input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.selector-botones__custom input[type="color"]::-moz-color-swatch { border: 0; border-radius: 50%; }
.selector-botones__custom input[type="text"] {
  width: 5.6rem;
  min-height: 1.9rem;
  padding: .2rem .5rem;
  border-radius: 999px;
  font: 500 .8rem var(--fuente-texto);
  text-transform: uppercase;
}
.selector-botones__custom input[aria-invalid="true"] { outline: 2px solid #ff8fa8; }

/* Precio en pesos (grande) y en dólares (chico) */
.tarjeta__usd { font-size: .85rem; color: var(--texto-claro-suave); font-variant-numeric: tabular-nums; }

/* Disponibilidad: etiqueta sobre la foto (solo "En stock" y "Agotado"; "por
   encargo" va en el texto, porque es lo normal) */
.tarjeta__imagen { position: relative; }
.tarjeta__estado {
  position: absolute;
  top: .6rem;
  left: .6rem;
  z-index: 1;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
}
.tarjeta__estado--en_stock { background: var(--vezaira-accent); color: var(--vezaira-primary-dark); }
.tarjeta__estado--agotado { background: rgba(250, 249, 252, .9); color: var(--vezaira-primary-dark); }
.tarjeta--agotado .tarjeta__imagen > :not(.tarjeta__estado) { opacity: .45; }
.tarjeta--agotado .tarjeta__precio { color: var(--texto-claro-suave); }

/* Barra de herramientas del admin dentro de la web pública */
.barra__admin {
  padding: .2rem .7rem;
  border: 1px solid var(--vezaira-accent);
  border-radius: 999px;
  color: var(--vezaira-accent) !important;
}
.tarjeta__admin {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px dashed var(--superficie-borde);
  font-size: .85rem;
}
.tarjeta__admin form { margin: 0; flex: 1; }
.tarjeta__admin select { min-height: 2rem; padding: .2rem 2rem .2rem .6rem; font-size: .85rem; border-radius: 8px; }
.tarjeta__admin span { color: var(--texto-claro-suave); }

/* ---------------------------------------------------------------------------
   Métricas (admin, fondo claro) */
.rango { display: flex; gap: .4rem; flex-wrap: wrap; }
.rango a {
  padding: .35rem .8rem;
  border: 1px solid var(--linea);
  border-radius: 999px;
  text-decoration: none;
  font-size: .9rem;
}
.rango a[aria-current="page"] { background: var(--vezaira-primary); border-color: var(--vezaira-primary); color: var(--vezaira-background); }

.dolar-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
  background: var(--vezaira-primary-dark);
  color: var(--vezaira-background);
  border-radius: var(--radio);
}
.dolar-panel h2 { font-size: 1rem; font-family: var(--fuente-texto); font-weight: 600; color: var(--vezaira-accent); }
.dolar-panel__valor { font-size: 1.9rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.dolar-panel__valor span { font-size: .9rem; font-weight: 400; opacity: .7; }
.dolar-panel__nota { font-size: .85rem; opacity: .8; max-width: 60ch; }
.dolar-panel form { margin: 0; }
.dolar-panel .boton--contorno { color: var(--vezaira-accent); border-color: var(--vezaira-accent); }
.dolar-panel .boton--contorno:hover { background: var(--vezaira-accent); color: var(--vezaira-primary-dark); }

.kpis {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .75rem;
}
.kpis li {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.kpis__valor { font-size: 1.7rem; font-weight: 600; color: var(--vezaira-primary); font-variant-numeric: tabular-nums; line-height: 1.2; }
.kpis__nombre { font-weight: 500; }
.kpis__detalle { font-size: .8rem; color: var(--texto-suave); }

.panel {
  padding: 1.1rem 1.25rem 1.25rem;
  margin-bottom: 1rem;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.panel h2 { font-size: 1.15rem; color: var(--vezaira-primary); margin-bottom: .9rem; }
.paneles { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 0 1rem; }

/* Barras de visitantes por día: una sola serie, un solo color */
.barras {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 11rem;
  padding-top: 1.2rem;
  border-bottom: 1px solid var(--linea);
}
.barras__max { position: absolute; top: 0; left: 0; font-size: .75rem; color: var(--texto-suave); }
.barras__col { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; }
.barras__barra { width: 100%; min-height: 1px; background: var(--vezaira-primary); border-radius: 4px 4px 0 0; }
.barras__col:hover .barras__barra { background: var(--vezaira-primary-dark); }
.barras__col:hover::after {
  content: attr(data-valor);
  position: absolute;
  bottom: calc(100% - 1rem);
  left: 50%;
  transform: translateX(-50%);
  padding: .2rem .5rem;
  border-radius: 4px;
  background: var(--vezaira-foreground);
  color: #fff;
  font-size: .75rem;
  white-space: nowrap;
  pointer-events: none;
}
.barras__eje { display: flex; justify-content: space-between; margin-top: .3rem; font-size: .75rem; color: var(--texto-suave); }
.tabla-detalle { margin-top: .75rem; font-size: .9rem; }
.tabla-detalle summary { cursor: pointer; color: var(--vezaira-primary); }
.tabla-detalle .tabla { margin-top: .5rem; }

/* Rankings: nombre, barra proporcional y número */
.ranking { list-style: none; margin: 0; padding: 0; }
.ranking li {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(3rem, 1fr) auto;
  align-items: center;
  gap: .75rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--linea);
  font-size: .92rem;
}
.ranking li:last-child { border-bottom: 0; }
.ranking li > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking__barra { height: .5rem; background: linear-gradient(90deg, var(--vezaira-primary) var(--parte), #efeaf5 var(--parte)); border-radius: 4px; }
.ranking strong { font-variant-numeric: tabular-nums; font-weight: 600; }
.ranking--simple li { grid-template-columns: minmax(0, 1fr) auto; }

/* ---------------------------------------------------------------------------
   Planilla de precios (admin) */
.admin-cabecera__acciones { display: flex; gap: .6rem; flex-wrap: wrap; }
.admin .dolar-panel strong { color: var(--vezaira-accent); }

.planilla td, .planilla th { padding: .45rem .55rem; }
.planilla__marca { display: block; color: var(--texto-suave); font-size: .78rem; }
/* Celdas tipo planilla: se ven como texto y se "abren" al pasar o tocar */
.planilla__celda {
  width: 6.5rem;
  min-height: 2.1rem;
  padding: .3rem .55rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #f7f4fb;
  box-shadow: none;
  font: 400 .95rem var(--fuente-texto);
  transition: background-color .3s, border-color .15s, box-shadow .15s;
}
.planilla__celda--corta { width: 5rem; }
.planilla__celda--pesos { width: 7.5rem; font-weight: 600; color: var(--vezaira-primary); }
.planilla__celda:hover { background: #fff; border-color: #d6cbe4; }
.planilla__celda:focus { background: #fff; }
.planilla__celda--guardando { background: #f6f3f9; }
.planilla__celda--ok, .planilla__celda--ok:hover { background: #e6f6ec; border-color: #9fd8b3; }
.planilla__celda--error, .planilla__celda--error:hover { background: #fdecef; border-color: #e7a3b3; }
.planilla__viejo { color: #a15c00; font-weight: 600; }
.planilla select { min-height: 2.1rem; padding: .25rem 2rem .25rem .6rem; font-size: .9rem; border-radius: 8px; background-color: #f7f4fb; border-color: transparent; box-shadow: none; }
.planilla select:hover { background-color: #fff; border-color: #d6cbe4; }
.planilla tbody tr:hover td { background: #fcfbfe; }
.planilla__estado { min-height: 1.5em; margin-top: .6rem; font-size: .9rem; color: #2e7d4a; }
.planilla__estado--error { color: var(--peligro); }

.lista-ayuda { margin: 0; padding-left: 1.2rem; display: grid; gap: .4rem; color: var(--vezaira-foreground); }