/* =========================================================
   TIENDA — estilos compartidos (visor.php, joyagemavisor.php)
   Paleta, fuentes y escala tipográfica únicas para toda la tienda.
   ========================================================= */

/* Las fuentes (Cormorant Garamond + Montserrat) se cargan con <link> en cada página. */

:root{
  /* ---------- paleta ---------- */
  --oro:#AF9B1E;
  --oro-osc:#8f7f18;
  --oro-suave:#f7f3e1;
  --tinta:#15171c;
  --texto:#4b5563;
  --gris:#8a8f98;
  --linea:#eceae3;
  --fondo:#faf9f6;
  --blanco:#ffffff;
  --verde:#1f6f3a;
  --rojo:#d64545;

  /* superficies y detalles que cambian con el tema claro / oscuro */
  --superficie:#ffffff;          /* tarjetas, paneles, campos */
  --superficie-2:#f3f1ea;        /* fondos suaves dentro de tarjetas */
  --linea-2:#e3e1d9;             /* bordes de campos */
  --cabecera:rgba(255,255,255,.94);
  --sobre-tinta:#ffffff;         /* texto sobre fondo color tinta */
  --sobre-oro:#ffffff;           /* texto sobre fondo dorado */
  --foto:#ffffff;                /* fondo de las fotos de joyas (siempre claro) */

  /* tonos oscuros del home (bloques negros con dorado y crema) */
  --negro:#0B0B0C;
  --negro-2:#141416;
  --crema:#E8F0BD;
  --fondo-joya:radial-gradient(circle at 50% 40%, rgba(175,155,30,.22), rgba(175,155,30,0) 62%), var(--negro-2);

  /* ---------- fuentes ---------- */
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Montserrat', Arial, Helvetica, sans-serif;

  /* ---------- escala tipográfica ----------
     Serif (Cormorant) para nombres y títulos; sans (Montserrat) para el resto.
     Los títulos crecen con la pantalla y nunca bajan de un mínimo legible. */
  --fs-display: clamp(32px, 1.6vw + 22px, 46px);   /* nombre de la joya en el detalle */
  --fs-h2:      clamp(24px, 0.8vw + 18px, 30px);   /* títulos de sección */
  --fs-h3:      clamp(18px, 0.3vw + 15px, 20px);   /* nombre en tarjetas */
  --fs-h4:      16px;                              /* nombre en tarjetas pequeñas */

  --fs-precio-lg: clamp(24px, 0.6vw + 19px, 28px); /* precio en el detalle */
  --fs-precio:    17px;                            /* precio en tarjetas */

  --fs-body:  14px;   /* texto corrido, descripciones */
  --fs-sm:    13px;   /* botones, opciones */
  --fs-xs:    12px;   /* datos secundarios */
  --fs-label: 11px;   /* etiquetas en mayúsculas (mínimo de la tienda) */

  --ls-label: 1.5px;  /* espaciado de las etiquetas en mayúsculas */

  /* ---------- formas ---------- */
  --radio-lg:20px;
  --radio:16px;
  --radio-sm:12px;
  --sombra:0 14px 36px rgba(21,23,28,.06);
  --sombra-hover:0 18px 40px rgba(21,23,28,.09);
  color-scheme:light;
}

/* ---------- tema oscuro (se activa con el botón ☾ de la cabecera) ---------- */
:root[data-tema="oscuro"]{
  --oro:#C4AE2C;                 /* un poco más luminoso para leerse sobre negro */
  --oro-osc:#AF9B1E;
  --oro-suave:#262314;
  --tinta:#F2EFE6;
  --texto:#C9C5BB;
  --gris:#8F8B82;
  --linea:#2A2A2E;
  --linea-2:#34343A;
  --fondo:#0E0E10;
  --superficie:#17171A;
  --superficie-2:#1F1F23;
  --cabecera:rgba(14,14,16,.9);
  --sobre-tinta:#15171c;
  --sobre-oro:#15171c;           /* sobre el dorado luminoso del modo oscuro se lee mejor el texto oscuro */
  --verde:#5CC08A;
  --rojo:#E36A6A;
  --crema:#E8F0BD;
  --sombra:0 14px 36px rgba(0,0,0,.35);
  --sombra-hover:0 18px 40px rgba(0,0,0,.5);
  color-scheme:dark;
}

body{
  background:var(--fondo);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:var(--fs-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ---------- utilidades de texto ---------- */
.t-serif{ font-family:var(--serif) !important; font-weight:500; letter-spacing:.2px; }

.t-eyebrow{
  font-family:var(--sans);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  color:var(--oro);
}

.t-label{
  font-family:var(--sans);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--gris);
}

/* =========================================================
   TEMA CLARO / OSCURO — reglas comunes
   ========================================================= */
html{ background:var(--fondo); }
body{ transition:background-color .35s ease, color .35s ease; }

/* las fotos de las joyas vienen sobre blanco: su marco siempre es claro */
html :is(.pieza-img, .mini-img, .card-img, .item-img, .ri-img, .ok-item-img, .lb-thumb),
html .producto .visor-galeria .img-visor,
html img.lb-media{ background:var(--foto); }
:root[data-tema="oscuro"] :is(.corte img, .corte-item img){ background:var(--foto); mix-blend-mode:normal; border-radius:10px; }

/* logos: en oscuro, la versión clara */
:root[data-tema="oscuro"] .header-logo .logo-oscuro{ opacity:0; }
:root[data-tema="oscuro"] .header-logo .logo-claro{ opacity:1; }
/* barra propia de carrito / pedido: logo oscuro en tema claro y logo claro en tema oscuro */
.logo-area .logo-claro{ display:none; }
:root[data-tema="oscuro"] .logo-area .logo-oscuro{ display:none; }
:root[data-tema="oscuro"] .logo-area .logo-claro{ display:block; }
:root[data-tema="oscuro"] .logo-area .logo-img{ filter:invert(1) brightness(1.1); }

/* detalles que en oscuro necesitan otro contraste */
:root[data-tema="oscuro"] .idioma{ border-color:rgba(255,255,255,.2); }
:root[data-tema="oscuro"] .sitio-footer{ border-top:1px solid var(--linea); }
:root[data-tema="oscuro"] .tienda-cabecera{ border-bottom:1px solid var(--linea); }
:root[data-tema="oscuro"] input::placeholder, :root[data-tema="oscuro"] textarea::placeholder{ color:#6f6c66; }
:root[data-tema="oscuro"] select option{ background:var(--superficie); color:var(--tinta); }

/* ---------- botón para cambiar el tema ---------- */
.tema-toggle{
  position:relative; flex-shrink:0;
  width:40px; height:40px; border-radius:50%; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--linea-2); background:transparent; color:var(--tinta);
  transition:border-color .25s, color .25s, transform .25s;
}
.tema-toggle:hover{ border-color:var(--oro); color:var(--oro); }
.tema-toggle svg{ width:18px; height:18px; transition:transform .45s ease, opacity .3s; }
.tema-toggle .icono-sol{ position:absolute; opacity:0; transform:rotate(-90deg) scale(.6); }
:root[data-tema="oscuro"] .tema-toggle .icono-luna{ opacity:0; transform:rotate(90deg) scale(.6); }
:root[data-tema="oscuro"] .tema-toggle .icono-sol{ opacity:1; transform:none; }
.tema-toggle--mini{ width:28px; height:28px; }
.tema-toggle--mini svg{ width:14px; height:14px; }
@media (prefers-reduced-motion:reduce){ body, .tema-toggle svg{ transition:none; } }

/* texto e iconos sobre fondo dorado: en oscuro, oscuros (el blanco no se lee sobre el dorado luminoso) */
:root[data-tema="oscuro"] :is(
  .btn-oro, .btn-add, .pieza-tag:not(.pieza-tag--autor), .fila-trending .fila-label,
  .paso.actual .paso-num, .seg button.on[data-v="1"], .nos-galeria-cta, .nos-galeria-cta .enlace-flecha,
  .btn-carrito:hover, .servicio:hover .servicio-icono, .lb-close:hover, .lb-arrow:hover, .ok-check
){ color:var(--sobre-oro); }
:root[data-tema="oscuro"] .nos-galeria-cta .t-eyebrow{ color:rgba(21,23,28,.7); }
:root[data-tema="oscuro"] .ok-check{ border-color:var(--fondo); }