/* Vitrina de joyería: fondos gris perla y blanco humo, el oro solo para
   títulos y botones, y mucho aire alrededor de cada pieza. */
:root {
  --perla: #DCDFE3;
  --perla-suave: #E8EAED;
  --humo: #F6F6F4;
  --blanco: #FFFFFF;
  --oro: #8A6A36;
  --oro-texto: #6B5229;
  --oro-claro: #C9A96E;
  --plata: #5E646B;
  --grafito: #2B2D31;
  --texto-suave: #4F555C;
  --borde: #C9CDD2;

  --f-titulo: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --f-texto: 'Jost', 'Segoe UI', system-ui, sans-serif;

  --ancho: 1180px;
  --radio: 2px;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--humo);
  color: var(--grafito);
  font-family: var(--f-texto);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
}

body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 30;
  background: var(--humo);
}

h1, h2, h3 {
  font-family: var(--f-titulo);
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

a { color: var(--oro-texto); }

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

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

.envoltura {
  max-width: var(--ancho);
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

@media (min-width: 720px) {
  .envoltura {
    padding-left: max(32px, env(safe-area-inset-left, 0px));
    padding-right: max(32px, env(safe-area-inset-right, 0px));
  }
}

.etiqueta {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--oro-texto);
}

/* Símbolo de los dos eslabones */
.eslabon-plata, .eslabon-oro, .eslabon-hueco { fill: none; stroke-width: 3.4; }
.eslabon-plata { stroke: var(--plata); }
.eslabon-oro { stroke: var(--oro); }
.eslabon-hueco { stroke: var(--humo); stroke-width: 9; }

/* Botones */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  border: 1px solid var(--oro);
  border-radius: var(--radio);
  font-family: var(--f-texto);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.boton-principal { background: var(--oro); color: var(--blanco); }
.boton-principal:hover { background: var(--oro-texto); }
.boton-secundario { background: transparent; color: var(--oro-texto); }
.boton-secundario:hover { background: var(--perla-suave); }
.boton[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* Cabecera */
.cabecera {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: var(--humo);
  border-bottom: 1px solid var(--perla);
}
.cabecera-interior {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 72px;
}
.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  margin-right: auto;
}
.simbolo { width: 52px; height: 21px; }
.marca-nombre {
  font-family: var(--f-titulo);
  font-size: 24px;
  letter-spacing: 0.18em;
  color: var(--oro);
}
.menu { display: none; gap: 28px; }
.menu a {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grafito);
  text-decoration: none;
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--oro-texto); }
.menu a[aria-current="page"] { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
@media (min-width: 860px) { .menu { display: flex; } }
/* En el celular el menú baja a una segunda fila, debajo del logo. */
@media (max-width: 859px) {
  html { scroll-padding-top: 124px; }
  .cabecera-interior { flex-wrap: wrap; row-gap: 0; }
  .menu {
    display: flex;
    order: 3;
    width: 100%;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    overflow-x: auto;
  }
  .menu a { font-size: 12px; letter-spacing: 0.12em; white-space: nowrap; }
}

.boton-carrito {
  position: relative;
  width: 48px;
  height: 48px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.boton-carrito svg { width: 24px; height: 24px; fill: none; stroke: var(--grafito); stroke-width: 1.4; stroke-linejoin: round; }
.carrito-contador {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--oro);
  color: var(--blanco);
  font-size: 11px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
}

/* Portada */
.portada { background: var(--perla); }
.portada-interior {
  display: grid;
  gap: 40px;
  padding-block: 56px;
  align-items: center;
}
@media (min-width: 860px) {
  .portada-interior { grid-template-columns: 1.1fr 0.9fr; padding-block: 88px; }
}
.portada-texto { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.portada h1 {
  font-size: clamp(44px, 7vw, 84px);
  color: var(--grafito);
}
.portada-bajada { max-width: 34em; font-size: 18px; color: var(--texto-suave); }
.portada-acciones { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }

.portada-vitrina {
  position: relative;
  aspect-ratio: 1;
  max-width: 100%;
  background: var(--humo);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vitrina-collar { width: 72%; height: auto; }
.vitrina-collar path, .vitrina-collar ellipse { fill: none; stroke: var(--oro); stroke-width: 0.8; }
.vitrina-sello {
  position: absolute;
  left: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.vitrina-sello svg { width: 40px; height: 16px; }
.vitrina-sello .eslabon-plata, .vitrina-sello .eslabon-oro { stroke-width: 4; }
.vitrina-sello .eslabon-hueco { stroke-width: 10; }

/* Secciones */
.seccion { padding-block: 80px; }
.seccion-encabezado { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }
.seccion h2 { font-size: clamp(34px, 4.5vw, 52px); }

/* Colecciones */
.colecciones { display: grid; gap: 20px; }
@media (min-width: 720px) { .colecciones { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }
.coleccion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-height: 260px;
  justify-content: flex-end;
  padding: 36px;
  border: none;
  border-radius: var(--radio);
  font-family: var(--f-texto);
  text-align: left;
  cursor: pointer;
  transition: transform 0.3s;
}
.coleccion:hover { transform: translateY(-3px); }
.coleccion-claro { background: var(--perla); color: var(--grafito); }
.coleccion-oscuro { background: var(--grafito); color: var(--humo); }
.coleccion-nombre { font-family: var(--f-titulo); font-size: 36px; line-height: 1; }
.coleccion-texto { max-width: 30em; font-size: 15px; font-weight: 300; }
.coleccion-claro .coleccion-texto { color: var(--texto-suave); }
.coleccion-enlace {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.coleccion-claro .coleccion-enlace { color: var(--oro-texto); }
.coleccion-oscuro .coleccion-enlace { color: var(--oro-claro); }

/* Catálogo */
.seccion-catalogo { background: var(--blanco); }
.filtros { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.filtro-grupo { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--borde);
  border-radius: 20px;
  background: transparent;
  color: var(--grafito);
  font-family: var(--f-texto);
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}
.chip:hover { border-color: var(--oro); }
.chip.activo { background: var(--grafito); border-color: var(--grafito); color: var(--humo); }
.catalogo-conteo { font-size: 14px; color: var(--texto-suave); margin-bottom: 24px; }

.grid-productos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 40px 24px;
}
.producto { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.producto-imagen {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 100%;
  background: var(--perla);
  border: none;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.producto-imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.producto-imagen { display: flex; align-items: center; justify-content: center; }
.producto-imagen:hover img, .producto-imagen:hover .dibujo { transform: scale(1.04); }
.dibujo { width: 62%; height: auto; transition: transform 0.5s; }
.dibujo * { fill: none; stroke-width: 1; }
.dibujo-plata * { stroke: var(--plata); }
.dibujo-oro * { stroke: var(--oro); }
.sin-foto {
  position: absolute;
  bottom: 12px;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.sello-nuevo {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  background: var(--humo);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--oro-texto);
}
.producto-info { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.producto-nombre { font-family: var(--f-titulo); font-size: 24px; line-height: 1.1; }
.producto-material { font-size: 13px; color: var(--texto-suave); }
.producto-precio { font-size: 16px; font-weight: 400; color: var(--oro-texto); white-space: nowrap; font-variant-numeric: tabular-nums; }
.producto-agregar {
  align-self: flex-start;
  min-height: 44px;
  padding: 0;
  border: none;
  border-bottom: 1px solid var(--oro);
  background: transparent;
  color: var(--oro-texto);
  font-family: var(--f-texto);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
}
.catalogo-vacio { grid-column: 1 / -1; padding: 40px 0; color: var(--texto-suave); }

/* Cuidados */
.cuidados {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 32px;
}
@media (min-width: 720px) { .cuidados { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cuidados li { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid var(--oro); }
.cuidado-numero { font-family: var(--f-titulo); font-size: 32px; line-height: 1; color: var(--oro); }
.cuidados h3 { font-size: 26px; }
.cuidados p { color: var(--texto-suave); }

/* Envíos */
.seccion-envios { background: var(--grafito); color: var(--humo); }
.seccion-envios .etiqueta { color: var(--oro-claro); }
.envios { display: grid; gap: 32px; }
@media (min-width: 720px) { .envios { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.envio { display: flex; flex-direction: column; gap: 10px; }
.envio h3 { font-size: 26px; color: var(--oro-claro); }
.envio p { color: var(--perla); }

/* Páginas internas (Cuidados, Envíos) */
.encabezado-pagina { background: var(--perla); padding-block: 64px; }
.encabezado-pagina h1 { font-size: clamp(40px, 6vw, 68px); color: var(--grafito); }
.encabezado-pagina-bajada { max-width: 36em; font-size: 18px; color: var(--texto-suave); }
.seccion-blanca { background: var(--blanco); }
.seccion-blanca .envio h3 { color: var(--oro); }
.seccion-blanca .envio p { color: var(--texto-suave); }
.volver-interior { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }

/* Joyas 3D (js/joyas3d.js): un lienzo fijo dibuja cada pieza dentro de su .joya-3d.
   Va debajo de la cabecera y del carrito; sin 3D se queda el dibujo plano. */
.lienzo-joyas { position: fixed; top: 0; left: 0; z-index: 15; pointer-events: none; }
.joya-3d { display: block; }
.con-3d .joya-3d > svg { visibility: hidden; }
.portada-vitrina .joya-3d { position: absolute; inset: 6%; display: flex; align-items: center; justify-content: center; }
.nosotros .joya-3d { width: min(340px, 86%); height: 150px; }
.coleccion { position: relative; }
.coleccion-joya { position: absolute; top: 12px; right: 12px; width: 40%; height: 52%; }
.colecciones .coleccion { min-height: 330px; }
.encabezado-pagina .envoltura { display: grid; gap: 8px; align-items: center; }
.encabezado-pagina-texto { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.encabezado-pagina .joya-3d { height: 200px; }
@media (min-width: 860px) {
  .encabezado-pagina .envoltura { grid-template-columns: 1.5fr 1fr; }
  .encabezado-pagina .joya-3d { height: 260px; }
}

/* Nosotros */
.nosotros { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.nosotros p:last-child { max-width: 38em; font-size: 18px; color: var(--texto-suave); }

/* Pie */
.pie { background: var(--perla); }
.pie-interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  padding-block: 40px;
}
.pie-marca { font-family: var(--f-titulo); font-size: 26px; letter-spacing: 0.18em; color: var(--oro); }
.pie-lema { font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--oro-texto); margin-right: auto; }
.pie-contacto { display: flex; gap: 24px; }
.pie-contacto a { font-size: 14px; color: var(--grafito); }
.pie-legal { width: 100%; font-size: 13px; color: var(--texto-suave); }

/* Botón cerrar compartido */
.cerrar {
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cerrar svg { width: 22px; height: 22px; fill: none; stroke: var(--grafito); stroke-width: 1.4; }

/* Selector de cantidad (carrito y página de la pieza) */
.cantidad {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.cantidad button {
  width: 44px;
  height: 46px;
  border: none;
  background: transparent;
  font-size: 18px;
  color: var(--grafito);
  cursor: pointer;
}
.cantidad span { min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; }

/* Carrito */
.overlay { position: fixed; inset: 0; z-index: 40; background: rgba(43, 45, 49, 0.45); }
.panel-carrito {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--humo);
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  visibility: hidden;
}
.panel-carrito.abierto { transform: translateX(0); visibility: visible; }
.panel-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 16px 16px 24px;
  border-bottom: 1px solid var(--perla);
}
.panel-cabecera h2 { font-size: 30px; }
.lista-carrito { flex: 1; overflow-y: auto; padding: 8px 24px; }
.carrito-vacio { padding: 32px 0; color: var(--texto-suave); }
.fila-carrito {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--perla);
}
.fila-carrito-nombre { font-family: var(--f-titulo); font-size: 21px; line-height: 1.1; }
.fila-carrito-detalle { font-size: 13px; color: var(--texto-suave); }
.fila-carrito-subtotal { font-variant-numeric: tabular-nums; color: var(--oro-texto); }
.fila-carrito .cantidad button { width: 36px; height: 34px; font-size: 16px; }
.fila-carrito .quitar {
  justify-self: end;
  align-self: center;
  min-height: 34px;
  border: none;
  background: transparent;
  color: var(--texto-suave);
  font-family: var(--f-texto);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}
.panel-pie { display: flex; flex-direction: column; gap: 14px; padding: 20px 24px 24px; border-top: 1px solid var(--perla); background: var(--blanco); }
.datos-cliente { display: grid; gap: 6px; }
.datos-cliente label { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--texto-suave); }
.datos-cliente input {
  min-height: 44px;
  padding: 0 12px;
  margin-bottom: 6px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--humo);
  color: var(--grafito);
  font-family: var(--f-texto);
  font-size: 16px;
}
.carrito-total { display: flex; justify-content: space-between; font-size: 18px; font-weight: 400; }
#carrito-total-monto { color: var(--oro-texto); font-variant-numeric: tabular-nums; }
.panel-nota { font-size: 13px; color: var(--texto-suave); text-align: center; }

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

/* Toque fino: títulos más livianos, botones delgados, más aire entre secciones,
   cabecera translúcida y bloques que aparecen despacio (js/animaciones.js). */
h1, h2 { font-weight: 300; }
.portada h1 { letter-spacing: -0.01em; }

.etiqueta { display: inline-flex; align-items: center; gap: 14px; }
.etiqueta::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.6; }
.nosotros .etiqueta::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.6; }

.boton {
  min-height: 46px;
  padding: 0 30px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.26em;
  transition: background-color 0.4s, color 0.4s, border-color 0.4s;
}
.boton-secundario { border-color: rgba(138, 106, 54, 0.45); }
.boton-secundario:hover { background: transparent; border-color: var(--oro); }

@media (min-width: 860px) {
  .seccion { padding-block: 120px; }
  .seccion-encabezado { margin-bottom: 56px; }
}

.cabecera { transition: background-color 0.4s, border-color 0.4s; }
.cabecera.desplazada {
  background: rgba(246, 246, 244, 0.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: rgba(201, 205, 210, 0.6);
}

.anima .aparece {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.6, 0.2, 1);
  transition-delay: var(--retraso, 0s);
}
.anima .aparece.visible { opacity: 1; transform: none; }

/* Ajustes por tamaño de pantalla: celular (hasta 599px), tablet (600–1023px)
   y computador (desde 1024px). */

/* Celular */
@media (max-width: 599px) {
  .seccion { padding-block: 64px; }
  .seccion-encabezado { margin-bottom: 28px; }
  .portada-interior { padding-block: 40px 48px; gap: 32px; }
  .portada-bajada, .encabezado-pagina-bajada, .nosotros p:last-child { font-size: 16px; }
  .portada-acciones { flex-direction: column; }
  .portada-acciones .boton { width: 100%; }
  .portada-vitrina { aspect-ratio: 4 / 3; }
  .vitrina-sello { left: 16px; bottom: 14px; }

  /* filtros en una sola fila que se desliza con el dedo */
  .filtro-grupo {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: -16px;
    padding-inline: 16px;
    scrollbar-width: none;
  }
  .filtro-grupo::-webkit-scrollbar { display: none; }
  .chip { flex: none; min-height: 38px; padding: 0 16px; white-space: nowrap; }

  /* catálogo en dos columnas, con la información más compacta */
  .grid-productos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; }
  .producto { gap: 10px; }
  .producto-info { flex-direction: column; gap: 4px; }
  .producto-nombre { font-size: 19px; }
  .producto-material { font-size: 12px; line-height: 1.35; }
  .producto-precio { font-size: 14px; }
  .producto-agregar { min-height: 40px; font-size: 10px; letter-spacing: 0.16em; }
  .sello-nuevo { top: 8px; left: 8px; padding: 3px 8px; font-size: 9px; }
  .sin-foto { font-size: 8px; letter-spacing: 0.18em; bottom: 8px; }

  .colecciones .coleccion { min-height: 290px; padding: 28px 24px; }
  .coleccion-nombre { font-size: 30px; }
  .coleccion-joya { width: 42%; height: 50%; }

  .encabezado-pagina { padding-block: 44px 36px; }
  .encabezado-pagina .joya-3d { height: 180px; }
  .nosotros .joya-3d { height: 120px; }

  .pie-lema { margin-right: 0; width: 100%; }
}

/* Tablet */
@media (min-width: 600px) and (max-width: 1023px) {
  .grid-productos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 16px; }
  .producto-info { flex-direction: column; gap: 4px; }
  .producto-nombre { font-size: 21px; }
}
@media (min-width: 700px) and (max-width: 859px) {
  /* portada y encabezados a dos columnas: texto a un lado, pieza al otro */
  .portada-interior { grid-template-columns: 1.15fr 0.85fr; padding-block: 64px; }
  .portada h1 { font-size: 48px; }
  .encabezado-pagina .envoltura { grid-template-columns: 1.5fr 1fr; }
}
@media (min-width: 720px) and (max-width: 859px) {
  /* en tablet ya cabe el menú al lado del logo */
  html { scroll-padding-top: 88px; }
  .cabecera-interior { flex-wrap: nowrap; }
  .menu { order: 0; width: auto; gap: 20px; padding-bottom: 0; overflow: visible; }
}

/* Pantallas muy grandes: la vitrina no crece de más */
@media (min-width: 1440px) {
  .portada-vitrina { max-height: 620px; justify-self: end; width: 100%; }
}

/* Botón flotante de WhatsApp (js/contacto.js) */
.whatsapp-flotante {
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  z-index: 35;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grafito);
  box-shadow: 0 8px 24px rgba(43, 45, 49, 0.22);
  transition: transform 0.3s, opacity 0.3s;
}
.whatsapp-flotante:hover { transform: translateY(-2px); }
.whatsapp-flotante svg { width: 26px; height: 26px; fill: none; stroke: var(--oro-claro); stroke-width: 1.3; stroke-linejoin: round; }
.whatsapp-flotante.oculto { opacity: 0; pointer-events: none; }

/* Página de la pieza */
.ficha { padding-top: 28px; padding-bottom: 72px; }
.migas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; font-size: 13px; color: var(--texto-suave); }
.migas a { color: var(--texto-suave); text-decoration: none; }
.migas a:hover { color: var(--oro-texto); }
.ficha-grid { display: grid; gap: 36px; }
@media (min-width: 860px) {
  .ficha-grid { grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: start; }
  .galeria { position: sticky; top: 100px; }
}
.galeria { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.galeria-principal {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--perla);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
}
.galeria-principal img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.galeria-principal.acercada { cursor: zoom-out; }
.galeria-principal.acercada img { transform: scale(2); }
.galeria-principal .dibujo { width: 55%; }
.galeria-miniaturas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.galeria-miniaturas:empty { display: none; }
.galeria-miniaturas button { aspect-ratio: 1; padding: 0; border: 1px solid transparent; background: var(--perla); cursor: pointer; overflow: hidden; }
.galeria-miniaturas button[aria-pressed="true"] { border-color: var(--oro); }
.galeria-miniaturas img { width: 100%; height: 100%; object-fit: cover; }
.ficha-info { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ficha-info h1 { font-size: clamp(38px, 5vw, 56px); }
.ficha-precio { font-size: 22px; color: var(--oro-texto); font-variant-numeric: tabular-nums; }
.ficha-descripcion { font-size: 17px; color: var(--texto-suave); }
.ficha-datos { margin: 0; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--perla); padding-top: 18px; }
.ficha-datos div { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.ficha-datos dt { color: var(--texto-suave); }
.ficha-datos dd { margin: 0; text-align: right; }
.ficha-compra { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 6px; }
.ficha-compra .boton { flex: 1 1 200px; }
.ficha-info > .boton-secundario { width: 100%; }
.ficha-aviso { min-height: 1.6em; font-size: 14px; color: var(--oro-texto); }
.ficha-ventajas { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--perla); display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--texto-suave); }
.ficha-ventajas li::before { content: "✦"; margin-right: 10px; color: var(--oro); font-size: 10px; }
.guia { border-top: 1px solid var(--perla); border-bottom: 1px solid var(--perla); }
.guia summary {
  padding: 16px 0;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--grafito);
  list-style: none;
  display: flex;
  justify-content: space-between;
}
.guia summary::-webkit-details-marker { display: none; }
.guia summary::after { content: "+"; font-size: 18px; letter-spacing: 0; color: var(--oro); }
.guia[open] summary::after { content: "−"; }
.guia-contenido { padding-bottom: 18px; display: flex; flex-direction: column; gap: 14px; font-size: 14px; color: var(--texto-suave); }
.guia-contenido table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.guia-contenido th { text-align: left; font-weight: 400; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--oro-texto); padding: 8px 6px; border-bottom: 1px solid var(--perla); }
.guia-contenido td { padding: 8px 6px; border-bottom: 1px solid var(--perla-suave); color: var(--grafito); }
.ficha-compartir {
  align-self: flex-start;
  min-height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  font-family: var(--f-texto);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oro-texto);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 6px;
}
.relacionados { background: var(--blanco); }
@media (max-width: 599px) {
  .ficha { padding-bottom: 48px; }
  .ficha-grid { gap: 24px; }
  .galeria-principal { aspect-ratio: 1; }
  .ficha-compra .boton { padding: 0 16px; letter-spacing: 0.16em; }
}

/* Página de políticas */
.politicas { display: grid; gap: 32px; }
@media (min-width: 860px) {
  .politicas { grid-template-columns: 220px 1fr; gap: 72px; align-items: start; }
  .politicas-indice { position: sticky; top: 110px; flex-direction: column; }
}
.politicas-indice { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.politicas-indice a { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-suave); text-decoration: none; }
.politicas-indice a:hover { color: var(--oro-texto); }
.politicas-texto { display: flex; flex-direction: column; gap: 48px; max-width: 46em; }
.politicas-texto article { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 110px; }
.politicas-texto h2 { font-size: 34px; }
.politicas-texto p { color: var(--texto-suave); }
.pie-contacto { flex-wrap: wrap; }