/* ==========================================================================
   Perfumitos Chile - Estilos (Etapa 2)

   CÓMO CAMBIAR LA TIPOGRAFÍA SIN REHACER EL DISEÑO
   Toda la tipografía sale de las variables de la sección "TIPOGRAFÍA".
   Cuando la licencia de Kiona esté resuelta:
     1) Copia Kiona-Regular.ttf a la carpeta publicar/fuentes/
     2) Quita los comentarios del bloque @font-face de abajo
     3) En --fuente-titulos pon "Kiona" primero
     4) Pon --peso-destacado en 400 (Kiona solo tiene un peso, no simula negrita)
   No hace falta tocar nada más.
   ========================================================================== */

/* Bloque listo para activar (NO activar hasta tener la licencia):
@font-face {
  font-family: "Kiona";
  src: url("fuentes/Kiona-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
*/

/* ---------- PALETA OFICIAL ---------- */
:root {
  --petroleo: #1d3a4a;
  --gris: #6e7e85;      /* contraste 4,21 sobre blanco: solo decorativo o texto grande */
  --negro: #0d0d0d;
  --claro: #cfcfcf;     /* contraste 1,56 sobre blanco: solo bordes y fondos */
  --blanco: #ffffff;

  /* ---------- TIPOGRAFÍA (provisional) ---------- */
  --fuente-titulos: "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
  --fuente-texto: "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
  --titulos-mayusculas: uppercase;   /* Kiona es una fuente de solo mayúsculas */
  --titulos-espaciado: 0.04em;
  --peso-destacado: 600;             /* con Kiona: 400 */

  /* ---------- MEDIDAS ---------- */
  --ancho-maximo: 1200px;
  --margen: 16px;
  --separacion: 12px;
}

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

[hidden] { display: none !important; }

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

body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--negro);
  background: var(--blanco);
}

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

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

/* ---------- CABECERA CON LOGO ---------- */
.cabecera {
  background: var(--petroleo);
  padding: 12px var(--margen) 20px;
  display: flex;
  justify-content: center;
}
/* El foco por defecto es petróleo y sobre el fondo petróleo no se vería */
.cabecera :focus-visible,
.barra-carrito :focus-visible { outline-color: var(--blanco); }

/* Barra fija arriba con el carrito (siempre visible al bajar por la lista) */
.barra-carrito {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  justify-content: flex-end;
  padding: 8px max(var(--margen), calc((100% - var(--ancho-maximo)) / 2));
  background: var(--petroleo);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
/* Que los saltos a un elemento no lo dejen escondido bajo la barra fija */
html { scroll-padding-top: 68px; }
.carrito-enlace {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  color: var(--blanco);
  text-decoration: none;
  border: 1px solid var(--claro);
  border-radius: 4px;
  font-size: 0.9375rem;
}
.carrito-enlace:hover { background: rgba(255, 255, 255, 0.12); }
.insignia {
  min-width: 24px;
  padding: 0 8px;
  background: var(--blanco);
  color: var(--petroleo);
  border-radius: 999px;
  text-align: center;
  font-weight: var(--peso-destacado);
  line-height: 24px;
}

/* El archivo del logo es un cuadrado con mucho margen transparente. Se muestra el
   original SIN modificar y se recorta solo visualmente al área del texto:
   contenido = 1481 x 508 px dentro de 1654 x 1654, desde (84, 560). */
.logo {
  position: relative;
  display: block;
  width: min(260px, 70vw);
  aspect-ratio: 1481 / 508;
  overflow: hidden;
}
.logo img {
  position: absolute;
  width: 111.68%;     /* 1654 / 1481 */
  height: auto;
  left: -5.672%;      /* -84 / 1481 */
  top: -110.24%;      /* -560 / 508 */
  max-width: none;
}

/* ---------- CONTENIDO ---------- */
.contenedor {
  width: min(var(--ancho-maximo), 100% - 2 * var(--margen));
  margin-inline: auto;
  padding-block: 24px 40px;
}

.encabezado-catalogo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px var(--separacion);
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--claro);
}

.titulo-pagina {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-size: 1.5rem;
  font-weight: var(--peso-destacado);
  line-height: 1.2;
  letter-spacing: var(--titulos-espaciado);
  text-transform: var(--titulos-mayusculas);
  color: var(--petroleo);
}

.resumen {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--negro);
}

.estado {
  margin: 24px 0;
  padding: 16px;
  border: 1px solid var(--claro);
  color: var(--negro);
}
.estado--error {
  border-color: var(--petroleo);
  border-left-width: 6px;
}

/* ---------- GRILLA ---------- */
.grilla {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--separacion);
}
.grilla[hidden] { display: none; }

@media (min-width: 640px) {
  .grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .titulo-pagina { font-size: 1.75rem; }
}
@media (min-width: 960px) {
  .grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- TARJETA DE ARTÍCULO ---------- */
.tarjeta {
  display: flex;
  min-width: 0;
}

.tarjeta__articulo {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  background: var(--blanco);
  border: 1px solid var(--claro);
  border-radius: 4px;
  overflow: hidden;
}

.tarjeta__foto {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--blanco);
  border-bottom: 1px solid var(--claro);
}
.tarjeta__foto { overflow: hidden; }
/* Las imágenes de una tarjeta van apiladas; solo la «activa» se ve (Etapa 10) */
.tarjeta__foto img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.75s ease;   /* 0,75 s para pasar a la imagen siguiente */
}
.tarjeta__foto img.tarjeta__img--activa { opacity: 1; }

.marcador-foto {
  position: absolute;
  inset: 10px;
  display: grid;
  place-items: center;
  padding: 8px;
  border: 1px dashed var(--gris);   /* decorativo: el texto va en petróleo */
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--petroleo);
}

.tarjeta__cuerpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  min-width: 0;
}

.tarjeta__fila-marca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
}

/* Categoría comercial de la marca: discreta, con borde gris de control y texto en petróleo */
.categoria {
  flex: none;
  padding: 0 6px;
  border: 1px solid var(--gris);
  border-radius: 2px;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--petroleo);
}

.tarjeta__marca {
  flex: 1 1 auto;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: var(--peso-destacado);
  line-height: 1.3;
  color: var(--petroleo);
  overflow-wrap: anywhere;
}

.tarjeta__nombre {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-size: 0.9375rem;
  font-weight: var(--peso-destacado);
  line-height: 1.25;
  letter-spacing: var(--titulos-espaciado);
  text-transform: var(--titulos-mayusculas);
  color: var(--negro);
  overflow-wrap: anywhere;
}

.tarjeta__presentacion {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 0.875rem;
}

.etiqueta {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid var(--petroleo);
  border-radius: 2px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--petroleo);
}
.etiqueta--promocion {
  background: var(--petroleo);
  color: var(--blanco);
}

.tarjeta__detalle {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--negro);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.tarjeta__precio {
  margin: auto 0 0;
  padding-top: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
}
.precio-final {
  font-family: var(--fuente-titulos);
  font-size: 1.125rem;
  font-weight: var(--peso-destacado);
  line-height: 1.2;
  color: var(--petroleo);
}
.precio-anterior {
  font-size: 0.875rem;
  color: var(--negro);
  text-decoration: line-through;
}

.tarjeta__disponibilidad {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--negro);
}
.tarjeta__disponibilidad::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border: 2px solid var(--petroleo);
  border-radius: 50%;
  background: var(--petroleo);
}
.tarjeta--agotado .tarjeta__disponibilidad::before { background: transparent; }
.tarjeta--agotado .tarjeta__disponibilidad { font-weight: var(--peso-destacado); }
/* Solo se atenúa la FOTO. El texto nunca se atenúa: perdería contraste de lectura. */
.tarjeta--agotado .tarjeta__foto img.tarjeta__img--activa { opacity: 0.5; }

/* ---------- RESULTADOS ---------- */
.resultados {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
}

/* ---------- BOTONES Y CAMPOS ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 16px;
  font: inherit;
  font-size: 0.9375rem;
  border-radius: 4px;
  cursor: pointer;
}
.boton--secundario {
  background: var(--blanco);
  color: var(--petroleo);
  border: 1px solid var(--petroleo);
}
.boton--principal {
  justify-content: center;
  background: var(--petroleo);
  color: var(--blanco);
  border: 1px solid var(--petroleo);
}
.boton--texto {
  padding: 0 4px;
  background: none;
  border: 0;
  color: var(--petroleo);
  text-decoration: underline;
}
a.boton--principal, a.boton--secundario { text-decoration: none; }
.boton[disabled] {
  background: var(--blanco);
  color: var(--petroleo);
  border: 1px dashed var(--gris);
  cursor: not-allowed;
}
.contador { font-weight: var(--peso-destacado); }

/* Bordes de los controles en gris oficial: contraste 4,21, suficiente para componentes (mínimo 3). */
.campo {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  font: inherit;
  font-size: 1rem;
  color: var(--negro);
  background: var(--blanco);
  border: 1px solid var(--gris);
  border-radius: 4px;
}
.campo::placeholder { color: var(--petroleo); opacity: 0.8; }

/* ---------- BÚSQUEDA Y FILTROS ---------- */
.buscador { margin-bottom: 16px; }

.buscador__fila {
  display: flex;
  gap: 8px;
}
.buscador__fila .campo { flex: 1 1 auto; min-width: 0; }
.buscador__fila .boton { flex: none; }

/* Panel lateral izquierdo (Etapa 12): cerrado queda fuera de pantalla y fuera del teclado. */
.panel-filtros {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  width: min(380px, 92vw);
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  box-shadow: 4px 0 24px rgba(13, 13, 13, 0.25);
  transform: translateX(-105%);
  visibility: hidden;
  transition: transform 0.25s ease, visibility 0s linear 0.25s;
}
.panel-filtros.abierto {
  transform: none;
  visibility: visible;
  transition: transform 0.25s ease;
}
.panel-filtros:focus { outline: none; }
.panel-filtros__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--claro);
  background: var(--petroleo);
  color: var(--blanco);
}
.panel-filtros__titulo {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-size: 1rem;
  text-transform: var(--titulos-mayusculas);
  letter-spacing: var(--titulos-espaciado);
}
.panel-filtros__cerrar {
  min-width: 44px;
  min-height: 44px;
  font: inherit;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--blanco);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.panel-filtros__cuerpo {
  flex: 1 1 auto;
  overflow-y: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 16px;
  padding: 16px;
}
.panel-filtros__pie {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--claro);
  background: var(--blanco);
}
.panel-filtros__pie .boton { justify-content: center; }
.panel-filtros__pie #cerrar-filtros { flex: 1 1 auto; }
.fondo-filtros {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(13, 13, 13, 0.45);
}
.fondo-filtros[hidden] { display: none; }
body.filtros-abiertos { overflow: hidden; }
@media (min-width: 768px) {
  .opcion { min-height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .panel-filtros, .panel-filtros.abierto { transition: none; }
}

.grupo {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.grupo legend,
.grupo__titulo {
  display: block;
  padding: 0;
  margin-bottom: 4px;
  font-size: 0.9375rem;
  font-weight: var(--peso-destacado);
  color: var(--petroleo);
}
.grupo__subtitulo {
  display: block;
  margin-bottom: 2px;
  font-size: 0.8125rem;
}

.opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
}
.opcion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 0.9375rem;
  cursor: pointer;
}
.opcion input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--petroleo);
}

.precios {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ayuda {
  margin: 8px 0 0;
  padding-left: 8px;
  border-left: 4px solid var(--petroleo);
  font-size: 0.8125rem;
  color: var(--negro);
}

/* Disponibilidad y Promociones comparten columna para que el panel de escritorio quede en una fila */
.grupo-doble {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

#sin-resultados p { margin: 0 0 12px; }

/* ---------- ENLACE DE LA TARJETA (toda la tarjeta lleva a la ficha) ---------- */
.tarjeta__enlace {
  color: inherit;
  text-decoration: none;
}
.tarjeta__enlace::after {
  content: "";
  position: absolute;
  inset: 0;
  cursor: pointer;
}
.tarjeta__enlace:focus-visible { outline: none; }
.tarjeta__enlace:focus-visible::after {
  outline: 3px solid var(--petroleo);
  outline-offset: -3px;
  border-radius: 4px;
}
.tarjeta__articulo:hover { border-color: var(--petroleo); }

/* ---------- FICHA DE ARTÍCULO ---------- */
.ficha__nav { margin-bottom: 12px; }
.ficha__volver { padding-left: 0; }
.ficha__volver::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.ficha__articulo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
@media (min-width: 768px) {
  .ficha__articulo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; align-items: start; }
}

.ficha__galeria { min-width: 0; }
.ficha__principal {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--blanco);
  border: 1px solid var(--claro);
  border-radius: 4px;
  overflow: hidden;
}
.ficha__principal img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ficha__miniaturas {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ficha__miniatura {
  display: block;
  width: 64px;
  height: 64px;
  padding: 0;
  background: var(--blanco);
  border: 1px solid var(--gris);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
}
.ficha__miniatura img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ficha__miniatura[aria-pressed="true"] { border: 3px solid var(--petroleo); }
@media (max-width: 767px) {
  /* Foto cuadrada en el móvil: el nombre y el precio se ven sin tener que bajar tanto */
  .ficha__principal { aspect-ratio: 1 / 1; }
  /* Área táctil mínima de 44 px también en las miniaturas */
  .ficha__miniatura { width: 56px; height: 56px; }
}

.ficha__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.ficha__fila-marca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
}
.ficha__titulo {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-size: 1.5rem;
  font-weight: var(--peso-destacado);
  line-height: 1.2;
  letter-spacing: var(--titulos-espaciado);
  text-transform: var(--titulos-mayusculas);
  color: var(--negro);
  overflow-wrap: anywhere;
}
.ficha__titulo:focus { outline: none; }
.ficha__subtitulo {
  margin: 8px 0 0;
  font-size: 0.9375rem;
  font-weight: var(--peso-destacado);
  color: var(--petroleo);
}
.ficha__texto {
  margin: 0;
  overflow-wrap: anywhere;
}
.ficha__info .precio-final { font-size: 1.5rem; }
.ficha__info .precio-anterior { font-size: 1rem; }
.ficha__info .tarjeta__precio { margin-top: 8px; }
.ficha__info .tarjeta__disponibilidad { font-size: 1rem; }
.ficha--agotado .tarjeta__disponibilidad::before { background: transparent; }
.ficha--agotado .tarjeta__disponibilidad { font-weight: var(--peso-destacado); }

/* Otras presentaciones */
.ficha__otras {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--claro);
}
.ficha__subtitulo--seccion { margin: 0 0 12px; font-size: 1.125rem; }
.ficha__lista-otras {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.otra { display: flex; min-width: 0; }
.otra__enlace {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 12px;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--claro);
  border-radius: 4px;
}
.otra__enlace:hover { border-color: var(--petroleo); }
.otra__texto {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.otra__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 0.875rem;
}
.otra--agotada .tarjeta__disponibilidad::before { background: transparent; }
.otra--agotada .tarjeta__disponibilidad { font-weight: var(--peso-destacado); }

/* ---------- MINIATURAS (cuadro pequeño con la foto) ---------- */
.miniatura-foto {
  position: relative;
  flex: none;
  width: 96px;
  height: 96px;
  background: var(--blanco);
  border: 1px solid var(--claro);
  border-radius: 4px;
  overflow: hidden;
}
.miniatura-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.miniatura-foto .marcador-foto {
  inset: 4px;
  padding: 2px;
  font-size: 0.75rem;
  line-height: 1.2;
}
.miniatura-foto--grande { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.miniatura-foto--vacia { border-style: dashed; }

/* ---------- OTROS PERFUMES DE LA MARCA ---------- */
.ficha__sugeridos {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--claro);
}
.ficha__lista-sugeridos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.sugerido { display: flex; min-width: 0; }
.sugerido__enlace {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 10px;
  color: inherit;
  text-decoration: none;
  border: 1px solid var(--claro);
  border-radius: 4px;
}
.sugerido__enlace:hover { border-color: var(--petroleo); }
.sugerido__nombre {
  font-family: var(--fuente-titulos);
  font-size: 0.875rem;
  font-weight: var(--peso-destacado);
  line-height: 1.25;
  letter-spacing: var(--titulos-espaciado);
  text-transform: var(--titulos-mayusculas);
  color: var(--negro);
  overflow-wrap: anywhere;
}
.sugerido__nota { font-size: 0.8125rem; }
.sugerido--agotado .tarjeta__disponibilidad::before { background: transparent; }
.sugerido--agotado .tarjeta__disponibilidad { font-weight: var(--peso-destacado); }
.ficha__ver-marca { margin-top: 12px; }

/* ---------- AGREGAR AL CARRITO ---------- */
.tarjeta__agregar {
  position: relative;
  z-index: 2;            /* por encima del enlace que cubre toda la tarjeta */
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}
.ficha__agregar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.ficha__agregar-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.cantidad { display: flex; align-items: center; }
.cantidad__boton {
  min-width: 44px;
  min-height: 44px;
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--petroleo);
  background: var(--blanco);
  border: 1px solid var(--gris);
  cursor: pointer;
}
.cantidad__boton:first-child { border-radius: 4px 0 0 4px; }
.cantidad__boton:last-child { border-radius: 0 4px 4px 0; }
.cantidad__boton:disabled { color: var(--gris); background: #f4f4f4; cursor: not-allowed; }
.cantidad__valor {
  min-width: 48px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--gris);
  border-bottom: 1px solid var(--gris);
  font-weight: 600;
}
.ficha__boton-agregar { flex: 1 1 200px; justify-content: center; }
.ficha__nota { margin: 0; font-size: 0.875rem; }
.ficha__ver-carrito { font-size: 0.875rem; color: var(--petroleo); }

/* ---------- AVISO BREVE ---------- */
/* Aparece justo bajo la barra del carrito (no abajo, donde taparía los botones «Agregar» de las
   tarjetas). Además deja pasar los toques: solo el enlace «Ver carrito» responde. */
.aviso {
  position: fixed;
  left: 50%;
  top: 68px;
  z-index: 50;
  max-width: min(560px, 100% - 32px);
  padding: 12px 16px;
  transform: translateX(-50%);
  background: var(--petroleo);
  color: var(--blanco);
  border-radius: 4px;
  font-size: 0.9375rem;
  pointer-events: none;
}
.aviso__enlace { color: var(--blanco); font-weight: var(--peso-destacado); text-decoration: underline; pointer-events: auto; }

/* ---------- CARRITO ---------- */
.carrito__titulo { margin: 8px 0 12px; }
.carrito__titulo:focus { outline: none; }
.carrito__lineas {
  list-style: none;
  margin: 16px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.linea {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--claro);
  border-radius: 4px;
}
.linea--invalida { border-color: var(--petroleo); border-left-width: 6px; }
.linea__cuerpo { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.linea__cuerpo .tarjeta__marca { flex: none; }   /* sin esto la marca se estira y deja un hueco */
.linea__nombre {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-size: 0.9375rem;
  font-weight: var(--peso-destacado);
  letter-spacing: var(--titulos-espaciado);
  text-transform: var(--titulos-mayusculas);
  overflow-wrap: anywhere;
}
.linea__enlace { color: var(--negro); text-decoration: none; }
.linea__enlace:hover { text-decoration: underline; }
.linea__aviso {
  margin: 6px 0 0;
  padding-left: 8px;
  border-left: 4px solid var(--petroleo);
  font-size: 0.875rem;
}
.linea__lado {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 16px;
}
.linea__cantidad select { width: auto; min-width: 84px; }
.linea__cantidad-fija { margin: 0; }
.linea__subtotal { margin: 0; font-size: 1rem; }
.linea__subtotal-valor { color: var(--petroleo); }
@media (min-width: 640px) {
  .linea { grid-template-columns: 96px minmax(0, 1fr) auto; }
  .linea__lado { grid-column: auto; flex-direction: column; align-items: flex-end; justify-content: flex-start; }
}

.carrito__resumen {
  margin-top: 24px;
  padding: 16px;
  border: 1px solid var(--petroleo);
  border-radius: 4px;
}
.carrito__total { margin: 0 0 8px; font-size: 1.25rem; }
.carrito__total-valor { color: var(--petroleo); }
.carrito__aviso-legal { margin: 0 0 12px; font-size: 0.875rem; }
.carrito__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.carrito__whatsapp { flex: 1 1 240px; justify-content: center; }
.carrito__copiado { font-size: 0.875rem; }
.carrito__mensaje { margin-top: 12px; }
.carrito__mensaje summary { padding: 10px 0; cursor: pointer; color: var(--petroleo); }   /* conserva la flecha del desplegable */
.carrito__mensaje-texto {
  margin: 0;
  padding: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  font-size: 0.875rem;
  background: var(--blanco);
  border: 1px solid var(--claro);
  border-radius: 4px;
}
.carrito__vaciar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.carrito__confirmar { margin: 0; }
.carrito__vacio p { margin: 0 0 12px; }

/* ---------- PIE ---------- */
.pie {
  padding: 20px var(--margen);
  background: var(--petroleo);
  color: var(--claro);
  text-align: center;
  font-size: 0.875rem;
}
.pie p { margin: 0; }

/* ---------- DATOS OLFATIVOS (Etapas 7 y 8) ---------- */
.tarjeta__perfil {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
  border-top: 1px solid var(--claro);
  border-bottom: 1px solid var(--claro);
}
.tarjeta__genero,
.tarjeta__concentracion {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 0.8125rem;
  color: var(--negro);
}
.tarjeta__genero { font-weight: var(--peso-destacado); }
.tarjeta__icono {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--petroleo);
  color: var(--blanco);
}
.tarjeta__concentracion-texto { min-width: 0; overflow-wrap: anywhere; }
.barra--mini { flex: none; width: 44px; gap: 2px; }
.barra--mini .barra__tramo { height: 6px; border-radius: 1px; }

.ficha__olfativa {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--claro);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ficha__olfativa .ficha__subtitulo--seccion { margin: 0; }
.olfativa__etiqueta,
.perfil__etiqueta {
  font-size: 0.8125rem;
  font-weight: var(--peso-destacado);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--petroleo);
}

/* Recuadros: Género, Concentración, Duración, Proyección */
.perfil {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.perfil__recuadro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--claro);
  border-radius: 8px;
}
.perfil__valor {
  font-size: 1rem;
  font-weight: var(--peso-destacado);
  overflow-wrap: anywhere;
}
.perfil__nivel { font-size: 0.8125rem; }
.perfil__genero { display: flex; align-items: center; gap: 8px; min-width: 0; }
.perfil__icono {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--petroleo);
  color: var(--blanco);
}
.barra { display: flex; gap: 3px; }
.barra__tramo {
  flex: 1;
  height: 9px;
  border-radius: 2px;
  background: var(--claro);
}
.barra__tramo--lleno { background: var(--petroleo); }

/* Acordes (píldoras llenas) y notas por capa */
.olfativa__acordes { display: flex; flex-direction: column; gap: 8px; }
.olfativa__pildoras,
.olfativa__notas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.olfativa__pildoras { gap: 8px; }
.olfativa__pildora {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--petroleo);
  color: var(--blanco);
  font-size: 0.9375rem;
}
.olfativa__capas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.olfativa__capa {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  background: #f4f6f7;
  border-top: 4px solid var(--petroleo);
  border-radius: 0 0 8px 8px;
}
.olfativa__nota {
  padding: 3px 12px;
  border: 1px solid var(--gris);
  border-radius: 999px;
  background: var(--blanco);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--negro);
}
.ficha__fragrantica { align-self: flex-start; }
@media (min-width: 768px) {
  .perfil { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .perfil__recuadro { padding: 16px; gap: 10px; }
  .perfil__icono { width: 40px; height: 40px; }
  .perfil__valor { font-size: 1.125rem; }
  .barra__tramo { height: 10px; }
  .barra { gap: 4px; }
  .olfativa__capas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .olfativa__capa { padding: 16px; }
}

/* ---------- ETAPA 9: íconos de notas y filtros como botones redondeados ---------- */
.olfativa__nota { display: inline-flex; align-items: center; gap: 6px; padding-left: 8px; }
.nota__icono { flex: none; color: var(--petroleo); }

/* Cada opción de filtro se ve como un botón redondeado. El campo real (casilla o círculo) sigue
   ahí, invisible pero cubriendo todo el botón: se puede pulsar, tabular y leer con lector de pantalla. */
.opciones { gap: 8px; }
.opcion {
  position: relative;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--petroleo);
  border-radius: 999px;
  color: var(--petroleo);
  background: var(--blanco);
}
.opcion input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.opcion:has(input:checked) { background: var(--petroleo); color: var(--blanco); }
.opcion:has(input:focus-visible) { outline: 3px solid var(--negro); outline-offset: 2px; }
@media (min-width: 768px) { .opcion { min-height: 36px; } }

/* Tarjetas angostas (celular): la barra de concentración va sobre su texto para que no se parta. */
@media (max-width: 599px) {
  .tarjeta__concentracion { flex-direction: column; align-items: flex-start; gap: 4px; }
}


/* ==========================================================================
   ETAPA 10: franja de acordes, pago y despacho, franja superior, pie, políticas
   ========================================================================== */

/* ---------- Franja de acordes de la tarjeta (solo con cursor o con el teclado) ---------- */
.franja-acordes {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 34px 12px 10px;   /* el espacio de arriba es el tramo translúcido del degradado */
  /* Degradado: translúcido arriba, sólido abajo (así el texto se lee sobre cualquier foto) */
  background: linear-gradient(to bottom,
    rgba(13, 13, 13, 0) 0%,
    rgba(13, 13, 13, 0.72) 38%,
    rgba(13, 13, 13, 0.94) 70%,
    rgb(13, 13, 13) 100%);
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
  pointer-events: none;
}
.franja-acordes p { margin: 0; }
.franja-acordes__titulo {
  color: var(--blanco);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(13, 13, 13, 0.9);
}
.franja-acordes__lista {
  margin-top: 2px !important;
  color: var(--blanco);
  text-shadow: 0 1px 3px rgba(13, 13, 13, 0.9);
  font-size: 0.8125rem;
  line-height: 1.35;
}
@media (hover: hover) and (pointer: fine) {
  .tarjeta__articulo:hover .franja-acordes { transform: none; opacity: 1; }
}
.tarjeta__articulo:has(:focus-visible) .franja-acordes { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .franja-acordes { transition: none; }
  .tarjeta__foto img { transition-duration: 0.01s; }
}

/* ---------- Medios de pago y despacho en la ficha ---------- */
.ficha__condiciones {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}
.condicion {
  padding: 12px 14px;
  border: 1px solid var(--claro);
  border-radius: 4px;
  background: var(--blanco);
}
.condicion__titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 0.9375rem;
  color: var(--petroleo);
}
.condicion__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 0.875rem; }
.condicion__fila { display: flex; justify-content: space-between; gap: 12px; }
.condicion__nota { margin: 8px 0 0; font-size: 0.875rem; }
.bandera { flex: none; }

/* ---------- Franja superior: enlace a decants ---------- */
.barra-carrito { justify-content: space-between; align-items: center; gap: 12px; }
.barra__decants {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--blanco);
  text-decoration: none;
  font-size: 0.9375rem;
  min-width: 0;
}
.barra__decants:hover .barra__decants-titulo { text-decoration: underline; }
.barra__decants-titulo { font-weight: 600; }
.barra__decants-extra { display: none; color: var(--claro); font-size: 0.8125rem; }
@media (min-width: 720px) {
  .barra__decants-extra { display: inline; }
}

/* ---------- Pie de página (rediseñado en la Etapa 11) ---------- */
.pie { text-align: left; padding: 0; }
.pie__contenido { max-width: var(--ancho-maximo); margin: 0 auto; }
.pie :focus-visible { outline-color: var(--blanco); }
.pie a { color: var(--blanco); }
.pie p { margin: 0; line-height: 1.5; }

/* Franja de confianza: tres mensajes separados por líneas finas */
.pie__garantias {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.pie__garantia {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 20px var(--margen);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.pie__garantia:first-child { border-top: 0; }
.pie__icono {
  flex: none;
  box-sizing: content-box;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  color: var(--blanco);
}
.pie__garantia .pie__titulo { margin-bottom: 2px; }
.pie__garantia-texto p { color: var(--claro); font-size: 0.875rem; }

/* Columnas de información */
.pie__columnas { display: grid; gap: 28px; padding: 28px var(--margen); }
.pie__garantia { padding-left: var(--margen); }
.pie__titulo {
  margin: 0 0 8px;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--blanco);
}
.pie__columnas .pie__titulo {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blanco);
}
.pie__col p { color: var(--claro); font-size: 0.875rem; }
.pie__col--marca .pie__titulo { font-size: 1rem; letter-spacing: 0.06em; }
.pie__contacto-botones { display: grid; gap: 10px; margin-top: 12px; }
.pie__contacto-boton, .pie__enlace-decants {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 4px;
  text-decoration: none;
  color: var(--blanco);
}
.pie__contacto-boton:hover, .pie__enlace-decants:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--blanco); }
.pie__contacto-etiqueta { font-weight: 700; }
.pie__contacto-dato { color: var(--claro); margin-left: auto; font-size: 0.875rem; }
.pie__enlace-decants { margin-top: 12px; }
.pie__datos { margin: 0 0 8px; padding: 0; list-style: none; display: grid; gap: 8px; }
.pie__dato { display: flex; align-items: center; gap: 8px; color: var(--claro); font-size: 0.875rem; line-height: 1.4; }
.pie__dato:not(:has(svg)) { padding-left: 28px; }
.pie__enlace { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.875rem; text-decoration: underline; text-underline-offset: 3px; }

/* Línea final */
.pie__legal { padding: 16px var(--margen); border-top: 1px solid rgba(255, 255, 255, 0.18); text-align: center; }
.pie__copia { color: var(--claro); font-size: 0.8125rem; }

@media (min-width: 720px) {
  .pie__columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .pie__garantias { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pie__garantia { border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.18); padding: 24px; }
  .pie__garantia:first-child { border-left: 0; padding-left: var(--margen); }
  .pie__columnas { grid-template-columns: 1.1fr 1.2fr 1.4fr 1.3fr; gap: 32px; padding: 36px var(--margen); }
  .pie__contacto-dato { margin-left: 0; }
}

/* ---------- Políticas de cambios y devoluciones ---------- */
.politicas { max-width: 800px; padding-bottom: 32px; }
.politicas p, .politicas li { line-height: 1.55; }
.politicas__intro { margin-bottom: 8px; }
.politicas__seccion { margin-top: 24px; }
.politicas__subtitulo { margin: 16px 0 4px; font-size: 1rem; color: var(--petroleo); }
.politicas__lista { margin: 4px 0 0; padding-left: 20px; }
.politicas__contacto { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--claro); }


/* ==========================================================================
   ETAPA 11: elección de pago y entrega en el carrito
   ========================================================================== */
.eleccion {
  margin: 16px 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.eleccion__titulo {
  padding: 0;
  margin-bottom: 8px;
  font-weight: var(--peso-destacado);
  color: var(--petroleo);
}
.eleccion__opcion {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--claro);
  border-radius: 4px;
  background: var(--blanco);
  cursor: pointer;
}
.eleccion__opcion input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--petroleo); }
.eleccion__opcion:hover { border-color: var(--petroleo); }
.eleccion__opcion:has(input:checked) { border-color: var(--petroleo); box-shadow: inset 0 0 0 1px var(--petroleo); background: #f4f7f8; }
.eleccion__opcion:has(input:focus-visible) { outline: 2px solid var(--petroleo); outline-offset: 2px; }
.eleccion__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.eleccion__nombre { font-weight: 600; }
.eleccion__detalle { font-size: 0.8125rem; color: var(--negro); opacity: 0.8; }

.carrito__resumen .eleccion + .carrito__total, .carrito__resumen .carrito__total:not(.carrito__total--final) { margin-top: 20px; }
.carrito__desglose { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--claro); }
.carrito__linea-desglose { display: flex; justify-content: space-between; gap: 12px; margin: 6px 0 0; }
.carrito__total--final { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--claro); font-size: 1.375rem; }

/* Etapa 11b: íconos en medios de pago */
.condicion__medio { display: flex; align-items: flex-start; gap: 10px; }
.condicion__icono { flex: none; color: var(--petroleo); margin-top: 1px; }