/* =========================================================
   SITIO — header, footer y home
   Usa los tokens de shop/tienda.css (paleta, fuentes, escala).
   ========================================================= */

:root{
  --negro:#0B0B0C;
  --negro-2:#141416;
  /* difuminado dorado-verdoso sobre carbón (tarjetas de joya suelta: colecciones y editorial) */
  --fondo-joya:radial-gradient(circle at 50% 40%, rgba(175,155,30,.22), rgba(175,155,30,0) 62%), var(--negro-2);
  --crema:#E8F0BD;
  --ancho:1320px;
  --header-h:96px;
  --fs-hero: clamp(52px, 6vw + 12px, 104px);
  --fs-seccion: clamp(32px, 2.4vw + 18px, 54px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:var(--header-h); }
body{ margin:0; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-family:var(--serif); font-weight:500; line-height:1.05; color:inherit; }

.contenedor{ max-width:var(--ancho); margin:0 auto; padding:0 28px; }

.saltar{
  position:absolute; left:-9999px; top:8px; z-index:200;
  background:var(--tinta); color:var(--sobre-tinta); padding:10px 16px; border-radius:999px;
}
.saltar:focus{ left:16px; }

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

/* =========================
   BOTONES
========================= */
.btn-oro, .btn-linea{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 26px; border-radius:999px;
  font-size:var(--fs-label); font-weight:600; letter-spacing:var(--ls-label); text-transform:uppercase;
  white-space:nowrap; transition:.25s;
}
.header-acciones > *{ flex-shrink:0; }
.btn-oro{ background:var(--oro); color:#fff; }
.btn-oro:hover{ background:var(--oro-osc); }
.btn-linea{ border:1px solid var(--tinta); color:var(--tinta); padding:10px 22px; }
.btn-linea:hover{ background:var(--tinta); color:var(--sobre-tinta); }

.enlace-flecha{
  display:inline-flex; align-items:center; gap:8px;
  font-size:var(--fs-label); font-weight:600; letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--oro);
}
.enlace-flecha span{ transition:transform .25s; }
a:hover .enlace-flecha span, .enlace-flecha:hover span{ transform:translateX(4px); }

/* =========================
   HEADER
========================= */
.sitio-header{
  position:sticky; top:0; z-index:100;
  background:var(--cabecera);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);
  transition:box-shadow .3s;
}
.sitio-header.con-sombra{ box-shadow:0 8px 28px rgba(21,23,28,.06); }

.header-in{
  max-width:var(--ancho); margin:0 auto; padding:0 28px;
  height:var(--header-h);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px;
}

.menu-principal ul{ list-style:none; margin:0; padding:0; display:flex; gap:clamp(16px, 1.6vw, 30px); }
.menu-principal a{ white-space:nowrap; }
.menu-principal a{
  position:relative; padding:6px 0;
  font-size:var(--fs-label); font-weight:600; letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--texto); transition:color .2s;
}
.menu-principal a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--oro); transform:scaleX(0); transform-origin:left; transition:transform .3s;
}
.menu-principal a:hover, .menu-principal a.activo{ color:var(--tinta); }
.menu-principal a:hover::after, .menu-principal a.activo::after{ transform:scaleX(1); }

.header-logo{ position:relative; display:block; }
.header-logo img{ height:76px; width:auto; transition:height .45s cubic-bezier(.2,.7,.2,1), opacity .35s; }
.header-logo .logo-claro{ position:absolute; top:0; left:50%; transform:translateX(-50%); opacity:0; }

/* ---------- header transparente sobre el hero (home) ----------
   Arriba: fondo transparente, logo blanco grande.
   Al bajar (.con-sombra) o con el menú móvil abierto: vuelve al header blanco compacto. */
.header-hero{
  position:fixed; left:0; right:0;
  background:transparent; border-bottom-color:transparent; backdrop-filter:none;
  transition:background .4s, border-color .4s, box-shadow .4s;
}
.header-hero .header-in{ transition:height .45s cubic-bezier(.2,.7,.2,1); }
.header-hero:not(.con-sombra):not(.menu-abierto) .header-in{ height:200px; }
.header-hero:not(.con-sombra):not(.menu-abierto) .header-logo img{ height:156px; }
.header-hero:not(.con-sombra):not(.menu-abierto) .logo-oscuro{ opacity:0; }
.header-hero:not(.con-sombra):not(.menu-abierto) .logo-claro{ opacity:1; }
.header-hero:not(.con-sombra):not(.menu-abierto) .menu-principal a{ color:rgba(255,255,255,.85); }
.header-hero:not(.con-sombra):not(.menu-abierto) .menu-principal a:hover,
.header-hero:not(.con-sombra):not(.menu-abierto) .menu-principal a.activo{ color:#fff; }
.header-hero:not(.con-sombra):not(.menu-abierto) .btn-linea{ border-color:rgba(255,255,255,.7); color:#fff; }
.header-hero:not(.con-sombra):not(.menu-abierto) .btn-linea:hover{ background:var(--superficie); color:var(--tinta); }
.header-hero:not(.con-sombra):not(.menu-abierto) .btn-carrito{ background:var(--superficie); color:var(--tinta); }
.header-hero:not(.con-sombra):not(.menu-abierto) .btn-carrito:hover{ background:var(--oro); color:#fff; }
.header-hero:not(.con-sombra):not(.menu-abierto) .menu-toggle span{ background:var(--superficie); }
.header-hero:not(.con-sombra):not(.menu-abierto) .idioma{ border-color:rgba(255,255,255,.55); }
.header-hero:not(.con-sombra):not(.menu-abierto) .idioma::before{ background:var(--superficie); }
.header-hero:not(.con-sombra):not(.menu-abierto) .idioma a{ color:rgba(255,255,255,.75); }
.header-hero:not(.con-sombra):not(.menu-abierto) .idioma a.activo{ color:var(--tinta); }
.header-hero:not(.con-sombra):not(.menu-abierto) .idioma a:not(.activo):hover{ color:var(--crema); }
.header-hero.con-sombra, .header-hero.menu-abierto{
  background:var(--cabecera); backdrop-filter:blur(10px); border-bottom-color:var(--linea);
}

.header-acciones{ display:flex; align-items:center; justify-content:flex-end; gap:14px; }

/* ---------- selector de idioma: pastilla con indicador deslizante ----------
   Misma altura y borde que "Shop now"; el idioma activo queda sobre una
   píldora oscura (blanca sobre el hero) que se desliza al cambiar. */
.idioma{
  --op:36px;
  position:relative; display:inline-flex; padding:3px;
  border:1px solid rgba(21,23,28,.18); border-radius:999px;
  transition:border-color .3s;
}
.idioma:hover{ border-color:var(--oro); }
.idioma::before{
  content:''; position:absolute; top:3px; left:3px; width:var(--op); height:calc(100% - 6px);
  border-radius:999px; background:var(--tinta);
  transition:transform .35s cubic-bezier(.3,1.3,.5,1), background .3s;
}
.idioma[data-activo="es"]::before{ transform:translateX(var(--op)); }
.idioma a{
  position:relative; z-index:1; width:var(--op); height:30px;
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-label); font-weight:600; letter-spacing:1.2px;
  color:var(--gris); transition:color .3s;
}
.idioma a.activo{ color:var(--sobre-tinta); }
.idioma a:not(.activo):hover{ color:var(--oro); }
.idioma--mini{ --op:32px; padding:2px; }
.idioma--mini::before{ top:2px; left:2px; height:calc(100% - 4px); }
.idioma--mini a{ height:22px; font-size:10px; }

/* barra superior con lema + idioma: solo en teléfonos (ver ≤640) */
.header-barra{
  display:none; align-items:center; justify-content:space-between; gap:12px;
  padding:6px 16px; border-bottom:1px solid var(--linea);
  font-size:10px; font-weight:600; letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--gris);
}
.header-hero:not(.con-sombra):not(.menu-abierto) .header-barra{ border-bottom-color:rgba(255,255,255,.18); color:rgba(255,255,255,.8); }
.btn-carrito{
  position:relative; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--tinta); color:var(--sobre-tinta); transition:.25s;
}
.btn-carrito:hover{ background:var(--oro); }

/* Con productos: píldora dorada con texto y cantidad */
.btn-carrito.con-items{
  width:auto; padding:0 6px 0 14px; gap:8px; border-radius:999px;
  background:var(--oro); color:var(--sobre-oro, #1a1a1a);
  font-size:var(--fs-label); font-weight:600; letter-spacing:var(--ls-label); text-transform:uppercase; text-decoration:none;
  box-shadow:0 6px 18px rgba(175,155,30,.35);
  animation:carritoAparece .5s ease;
}
.btn-carrito.con-items:hover{ background:var(--tinta); color:var(--sobre-tinta); }
.btn-carrito.con-items .badge{
  position:static; min-width:30px; height:30px; border-radius:50%;
  background:var(--tinta); color:var(--sobre-tinta);
}
.btn-carrito.con-items:hover .badge{ background:var(--oro); color:var(--sobre-oro, #1a1a1a); }
.header-hero:not(.con-sombra):not(.menu-abierto) .btn-carrito.con-items{ background:var(--oro); color:var(--sobre-oro, #1a1a1a); }
.header-hero:not(.con-sombra):not(.menu-abierto) .btn-carrito.con-items:hover{ background:#fff; color:var(--tinta); }
@keyframes carritoAparece{ 0%{ transform:scale(.85); opacity:0; } 60%{ transform:scale(1.05); } 100%{ transform:none; opacity:1; } }

/* Botón flotante (solo teléfonos y tabletas, cuando hay productos) */
.carrito-flotante{
  position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:90;
  display:none; align-items:center; gap:10px; padding:10px 10px 10px 18px; border-radius:999px;
  background:var(--oro); color:var(--sobre-oro, #1a1a1a); text-decoration:none;
  font-size:var(--fs-label); font-weight:600; letter-spacing:var(--ls-label); text-transform:uppercase;
  box-shadow:0 12px 30px rgba(11,11,12,.28);
  animation:carritoAparece .5s ease;
}
.carrito-flotante .badge{ position:static; min-width:28px; height:28px; border-radius:50%; background:var(--tinta); color:var(--sobre-tinta); }
@media (max-width:900px){ .carrito-flotante{ display:inline-flex; } }
@media (max-width:640px){
  .btn-carrito.con-items .btn-carrito-txt{ display:none; }   /* en teléfono: ícono + cantidad */
  .btn-carrito.con-items{ padding:0 4px 0 10px; }
}
@media (prefers-reduced-motion:reduce){ .btn-carrito.con-items, .carrito-flotante{ animation:none; } }
.badge{
  position:absolute; top:-4px; right:-4px;
  min-width:20px; height:20px; padding:0 6px; border-radius:10px;
  background:var(--rojo); color:#fff; font-size:var(--fs-label); font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

.menu-toggle{
  display:none; width:44px; height:44px; padding:12px 10px; border:none; background:none; cursor:pointer;
  flex-direction:column; justify-content:space-between;
}
.menu-toggle span{ display:block; height:1.5px; background:var(--tinta); transition:.3s; }
.menu-abierto .menu-toggle span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.menu-abierto .menu-toggle span:nth-child(2){ opacity:0; }
.menu-abierto .menu-toggle span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* =========================
   HERO
========================= */
.hero{
  position:relative; overflow:hidden;
  min-height:min(calc(100vh - var(--header-h)), 900px); min-height:min(calc(100svh - var(--header-h)), 900px);
  display:flex; flex-direction:column; justify-content:flex-end;
  background:var(--negro); color:#fff;
}
.hero-fondo{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:scale(1.06); animation:heroZoom 14s ease-out forwards;
}
.hero-fondo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,11,12,.15) 0%, rgba(11,11,12,.25) 45%, rgba(11,11,12,.85) 100%);
}
.hero-in, .hero-base{ position:relative; width:100%; max-width:var(--ancho); margin:0 auto; padding:0 28px; }
.hero-in{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; padding-bottom:56px; }
.hero-texto h1{ font-size:var(--fs-hero); font-weight:400; letter-spacing:-.5px; margin:14px 0 18px; max-width:9ch; }
.hero-texto h1 em{ color:var(--oro); font-style:italic; }
.hero-texto p{ margin:0; font-size:clamp(16px, .6vw + 13px, 22px); font-weight:300; color:rgba(255,255,255,.85); }
.hero .t-eyebrow{ color:var(--crema); }

/* home: hero a pantalla completa bajo el header transparente, contenido centrado */
.con-hero .hero{ min-height:max(640px, min(100vh, 1000px)); min-height:max(640px, min(100svh, 1000px)); }
/* texto y anillo centrados, abajo del banner */
.con-hero .hero-in{ flex-direction:column; align-items:flex-end; text-align:right; gap:14px; padding-top:230px; padding-bottom:34px; }   /* texto y botones a la derecha, abajo del banner (en teléfono, al centro) */
.con-hero .hero-texto{ max-width:560px; margin-inline:auto 0; }
.con-hero .hero-texto h1{ max-width:9.5ch; margin:14px 0 16px auto; line-height:.95; }   /* "Made by / Hecho por" en la 1.ª línea */
.con-hero .hero-anillo{ width:118px; }
.con-hero .hero-anillo span{ font-size:18px; }
.con-hero .hero-acciones{ flex-direction:row; align-items:center; gap:22px; }   /* anillo y cita lado a lado: el bloque queda bajo */
/* Foto del banner: rostro y anillo protagonistas.
   - sin zoom con transform (así el destello calcula la posición exacta del anillo)
   - centro limpio; solo viñeta suave en los bordes, oscuro a la derecha para el texto
     y arriba/abajo para el header y la franja inferior */
.con-hero .hero-fondo{
  background-position:38% 22%;   /* la modelo un poco a la izquierda: el texto queda libre a la derecha */
  transform:none; animation:heroEntrada 1.8s ease-out both;
  /* sin realce de saturación/contraste: hero-natural.jpg ya trae un acabado fotográfico suave
     (original sin procesar: assets/img/hero.jpg) */
}
.con-hero .hero-fondo::after{
  background:
    linear-gradient(270deg, rgba(11,11,12,.72) 0%, rgba(11,11,12,.38) 32%, rgba(11,11,12,0) 60%),
    linear-gradient(180deg, rgba(11,11,12,.6) 0%, rgba(11,11,12,0) 20%, rgba(11,11,12,0) 50%, rgba(11,11,12,.5) 76%, rgba(11,11,12,.85) 100%);   /* oscuro a la derecha y abajo: ahí va el texto */
}
@keyframes heroEntrada{ from{ opacity:0; } to{ opacity:1; } }

/* destello sobre el diamante (JS lo coloca sobre el anillo) */
.hero-brillo{
  position:absolute; left:0; top:0; width:0; height:0; pointer-events:none;
  opacity:0; transition:opacity .6s 1.6s;
}
.hero-brillo.listo{ opacity:1; }
.hero-brillo::before{
  content:""; position:absolute; left:-55px; top:-55px; width:110px; height:110px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.45) 0%, rgba(255,244,214,.18) 35%, rgba(255,255,255,0) 70%);
  mix-blend-mode:screen; animation:halo 3.6s ease-in-out infinite;
}
.hero-brillo svg{
  position:absolute; left:-17px; top:-17px; width:34px; height:34px; fill:#fff;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.9)) drop-shadow(0 0 14px rgba(255,236,190,.7));
  animation:destello 3.6s ease-in-out infinite;
}
@keyframes destello{
  0%, 55%, 100%{ transform:scale(0) rotate(0deg); opacity:0; }
  68%{ transform:scale(1) rotate(45deg); opacity:1; }
  82%{ transform:scale(.25) rotate(90deg); opacity:0; }
}
@keyframes halo{ 0%, 100%{ opacity:.55; transform:scale(.85); } 68%{ opacity:1; transform:scale(1.1); } }
.con-hero .hero-base{ display:grid; grid-template-columns:1fr auto 1fr; }
.con-hero .hero-base > span{ text-align:right; }

.hero-bajar{ display:block; width:1px; height:44px; background:rgba(255,255,255,.25); position:relative; overflow:hidden; }
.hero-bajar span{ position:absolute; left:0; top:-50%; width:100%; height:50%; background:var(--oro); animation:bajar 2.2s ease-in-out infinite; }
@keyframes bajar{ to{ top:100%; } }

/* manifiesto */
.manifiesto{ padding:clamp(70px, 8vw, 120px) 0; background:var(--fondo); text-align:center; }
.manifiesto p{
  max-width:900px; margin:20px auto 28px;
  font-family:var(--serif); font-size:clamp(26px, 1.6vw + 16px, 40px); line-height:1.3; color:var(--tinta);
}
.manifiesto em{ color:var(--oro); }

/* sub-bloque dentro de una sección */
.sub-bloque{ margin-top:clamp(56px, 6vw, 80px); }
.sub-titulo{
  display:flex; align-items:center; gap:20px; margin-bottom:30px;
  font-family:var(--sans); font-size:var(--fs-label); font-weight:600; letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--oro);
}
.sub-titulo::before, .sub-titulo::after{ content:''; flex:1; height:1px; background:var(--linea); }
.bloque-accion{ margin-top:clamp(44px, 5vw, 64px); text-align:center; }

/* botón anillo "Comprar" (como el anillo del logo): SVG dibujado + latido; se rellena de oro al pasar el mouse */
.hero-anillo{
  --dorado:#E2A93B;
  flex:none; position:relative; width:220px; aspect-ratio:200/230;
  display:block; color:var(--dorado);
  -webkit-tap-highlight-color:transparent;
}
.hero-anillo svg{
  position:absolute; inset:0; width:100%; height:100%; overflow:visible;
  transform-origin:50% 66%;
  animation:latido 2.6s ease-in-out 2.2s infinite;
  filter:drop-shadow(0 0 0 rgba(226,169,59,0));
  transition:filter .4s;
}
.anillo-trazo{
  fill:none; stroke:#fff; stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:trazar 2s cubic-bezier(.6,0,.2,1) .4s forwards;
  transition:stroke .4s;
}
.anillo-relleno{
  fill:var(--dorado); opacity:0;
  transform-origin:50% 66%; transform:scale(.6);
  transition:opacity .45s ease, transform .5s cubic-bezier(.3,1.4,.5,1);
}
.hero-anillo span{
  position:absolute; left:50%; top:66%; transform:translate(-50%, -50%);
  font-family:var(--serif); font-size:26px; font-style:italic; font-weight:500;
  letter-spacing:.3px; white-space:nowrap;
  transition:color .4s, letter-spacing .4s;
}
.hero-anillo span::after{
  content:''; display:block; height:1px; margin:4px auto 0; width:0;
  background:currentColor; transition:width .4s;
}
.hero-anillo:hover svg, .hero-anillo:focus-visible svg{
  animation-play-state:paused;
  filter:drop-shadow(0 10px 30px rgba(226,169,59,.45));
}
.hero-anillo:hover .anillo-relleno, .hero-anillo:focus-visible .anillo-relleno{ opacity:1; transform:scale(1); }
.hero-anillo:hover .anillo-trazo, .hero-anillo:focus-visible .anillo-trazo{ stroke:var(--dorado); }
.hero-anillo:hover span, .hero-anillo:focus-visible span{ color:#fff; letter-spacing:1.2px; }
.hero-anillo:hover span::after, .hero-anillo:focus-visible span::after{ width:60%; }
.hero-anillo:active svg{ transform:scale(.94); }
.hero-anillo:focus-visible{ outline:none; }
.anillo-relleno-gema{ fill:#fffaf0; }   /* el diamante se ilumina claro, el aro en oro */

/* anillo + botón de cita debajo */
.hero-acciones{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.hero-cita{
  display:inline-flex; align-items:center; gap:9px; padding:12px 22px; border-radius:999px;
  border:1px solid rgba(255,255,255,.7); background:rgba(11,11,12,.25); backdrop-filter:blur(6px);
  color:#fff; text-decoration:none; font-family:var(--sans); font-size:var(--fs-label); font-weight:600;
  letter-spacing:var(--ls-label); text-transform:uppercase; white-space:nowrap;
  transition:background .3s, border-color .3s, color .3s, transform .3s;
}
.hero-cita svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.hero-cita:hover, .hero-cita:focus-visible{ background:#E2A93B; border-color:#E2A93B; color:#15171c; transform:translateY(-2px); }
.hero-cita:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* texto solo para lectores de pantalla y buscadores */
.solo-lectores{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

@keyframes trazar{ to{ stroke-dashoffset:0; } }
@keyframes latido{
  0%, 40%, 100%{ transform:scale(1); }
  10%{ transform:scale(1.07); }
  20%{ transform:scale(.98); }
  30%{ transform:scale(1.05); }
}

.hero-base{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding-top:26px; padding-bottom:26px;
  border-top:1px solid rgba(255,255,255,.3);
  font-size:var(--fs-sm); letter-spacing:.5px; color:rgba(255,255,255,.85);
}
.hero-redes{ list-style:none; margin:0; padding:0; display:flex; gap:48px; }
.hero-redes a{ display:inline-flex; align-items:center; gap:10px; transition:color .2s; }
.hero-redes a::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.hero-redes a:hover{ color:var(--crema); }

/* =========================
   BLOQUES
========================= */
.bloque{ padding:clamp(64px, 7vw, 110px) 0; }
.bloque-oscuro{ background:var(--negro); color:#fff; }
.bloque-claro{ background:var(--superficie); }

.bloque-titulo{ text-align:center; margin-bottom:clamp(36px, 4vw, 56px); }
.bloque-titulo h2{ font-size:var(--fs-seccion); margin-top:12px; }
/* Joyería de autor (Signature jewelry) debajo de las piezas destacadas */
.bloque-titulo--autor{ margin-top:clamp(64px, 8vw, 110px); padding-top:clamp(48px, 6vw, 80px); border-top:1px solid var(--linea); }
.bloque-intro{ max-width:560px; margin:14px auto 0; color:var(--texto); line-height:1.7; }
.bloque-accion--autor{ margin-top:clamp(32px, 4vw, 44px); }
.bloque-titulo--linea{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  text-align:left; padding-bottom:22px; border-bottom:1px solid var(--linea);
}

/* categorías */
/* cabecera de dos columnas: título a la izquierda, intro + enlace a la derecha */
.col-cabecera{
  display:grid; grid-template-columns:1.2fr .8fr; align-items:end; gap:40px;
  padding-bottom:36px; margin-bottom:clamp(40px, 5vw, 64px);
  border-bottom:1px solid rgba(175,155,30,.3);
}
.col-cabecera h2{ font-size:var(--fs-seccion); font-weight:400; margin-top:14px; }
.col-cabecera h2 em{ color:var(--oro); }
.col-intro p{ margin:0 0 18px; font-size:15px; line-height:1.8; color:rgba(255,255,255,.65); max-width:380px; }

/* tarjetas con el texto sobre la imagen; las pares bajan un poco (ritmo editorial) */
.grid-categorias{
  display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:clamp(12px, 1.4vw, 22px);
  padding-bottom:64px;
}
.categoria:nth-child(even){ margin-top:64px; margin-bottom:-64px; }

.categoria{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:3/4.4; border-radius:var(--radio-lg);
  background:var(--negro-2); isolation:isolate;
}
/* marco dorado fino que aparece al pasar el mouse */
.categoria::after{
  content:''; position:absolute; inset:10px; z-index:2; pointer-events:none;
  border:1px solid rgba(175,155,30,0); border-radius:calc(var(--radio-lg) - 6px);
  transition:border-color .5s, inset .5s;
}
.categoria:hover::after{ border-color:rgba(175,155,30,.7); inset:14px; }

.categoria-img{ position:absolute; inset:0; }
.categoria-img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.2,.7,.2,1); }
.categoria:hover .categoria-img img{ transform:scale(1.07); }
/* degradado para leer el texto */
.categoria-img::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,11,12,0) 45%, rgba(11,11,12,.85) 100%);
  transition:opacity .5s;
}

/* joya suelta (PNG transparente): flota sobre un brillo dorado */
.categoria--producto{ background:var(--fondo-joya); }
.categoria--producto .categoria-img img{
  object-fit:contain; padding:12% 6% 34%;
  scale:var(--zoom, 1);
  filter:drop-shadow(0 24px 30px rgba(0,0,0,.6));
}
.categoria--producto:hover .categoria-img img{ transform:translateY(-8px) scale(1.05); }

.categoria-info{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:clamp(20px, 2vw, 30px);
  display:flex; flex-direction:column; gap:6px;
}
.categoria-num{ font-size:var(--fs-label); font-weight:600; letter-spacing:var(--ls-label); color:var(--oro); }
.categoria h3{
  font-size:clamp(24px, 1vw + 16px, 32px); font-weight:400; color:#fff; line-height:1.1;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.categoria-ver{
  display:inline-flex; align-items:center; gap:8px; margin-top:6px;
  font-size:var(--fs-label); font-weight:600; letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--crema);
  opacity:0; transform:translateY(8px); transition:opacity .45s, transform .45s;
}
.categoria:hover h3{ transform:translateY(-4px); }
.categoria:hover .categoria-ver, .categoria:focus-visible .categoria-ver{ opacity:1; transform:none; }

/* piezas (misma tarjeta que el visor) */
/* columnas de ancho fijo y centradas: con pocas piezas no quedan huecos a la derecha */
/* flex centrado: con cualquier cantidad de piezas la última fila queda al centro */
.grid-piezas{ display:flex; flex-wrap:wrap; justify-content:center; gap:24px; }
.pieza{ flex:0 1 270px; min-width:0; }
.pieza{
  display:flex; flex-direction:column;
  background:var(--superficie); border:1px solid var(--linea); border-radius:var(--radio-lg);
  padding:12px; box-shadow:0 6px 20px rgba(0,0,0,.03); transition:.3s;
}
.pieza:hover{ transform:translateY(-4px); border-color:var(--oro); box-shadow:var(--sombra-hover); }
.pieza-img{ position:relative; aspect-ratio:1; border-radius:var(--radio); overflow:hidden; background:var(--superficie); }
.pieza-img img{ width:100%; height:100%; object-fit:contain; transition:transform .5s; }
.pieza:hover .pieza-img img{ transform:scale(1.05); }
.pieza-tag, .pieza-desc{
  position:absolute; top:10px; padding:4px 10px; border-radius:999px;
  font-size:var(--fs-label); font-weight:700; letter-spacing:.5px;
}
.pieza-tag{ left:10px; background:var(--oro); color:#fff; text-transform:uppercase; }
.pieza-tag--autor{ background:var(--negro); color:var(--oro); }
.pieza-desc{ right:10px; background:var(--rojo); color:#fff; }
.pieza-info{ padding:14px 4px 4px; display:flex; flex-direction:column; flex:1; }
.pieza-info h3{ font-size:var(--fs-h3); font-weight:600; color:var(--tinta); margin-bottom:6px; }
.pieza-info p{ margin:0 0 12px; font-size:var(--fs-xs); color:var(--gris); }
.pieza-info p b{ color:var(--texto); }
.pieza-precio{ margin-top:auto; padding-top:10px; border-top:1px solid var(--linea); display:flex; gap:8px; align-items:baseline; }
.pieza-precio s{ font-size:var(--fs-xs); color:var(--gris); }
.pieza-precio span{ font-size:var(--fs-precio); font-weight:600; color:var(--verde); }

/* formas de anillo */
.bloque-formas{ background-size:cover; background-position:center; background-color:var(--negro); color:#fff; }
.grid-formas{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:24px; align-items:center; }
.formas-titulo h2{ font-size:var(--fs-seccion); color:var(--oro); margin:12px 0 22px; }
.formas-titulo .t-eyebrow{ color:var(--tinta); }
.forma img{ width:100%; transition:transform .6s; }
.forma:hover img{ transform:translateY(-8px) rotate(-2deg); }

/* guía de tallas (banda que abre el popup de shop/guia-tallas.php) */
.guia-talla-home{ padding:clamp(40px, 5vw, 72px) 0; background:var(--fondo); }
.guia-talla-caja{ display:flex; align-items:center; gap:clamp(16px, 3vw, 36px); width:100%; padding:clamp(22px, 3vw, 36px) clamp(20px, 3.5vw, 48px);
  border:1px solid var(--linea); border-radius:var(--radio-lg); background:var(--superficie); color:var(--tinta); text-align:left; cursor:pointer;
  font:inherit; box-shadow:var(--sombra); transition:transform .3s, box-shadow .3s, border-color .3s; }
.guia-talla-caja:hover{ transform:translateY(-3px); box-shadow:var(--sombra-hover); border-color:var(--oro); }
.guia-talla-caja:focus-visible{ outline:2px solid var(--oro); outline-offset:4px; }
.guia-talla-icono{ flex:none; display:grid; place-items:center; width:clamp(64px, 7vw, 88px); aspect-ratio:1; border-radius:50%;
  background:var(--oro-suave); border:1px dashed var(--oro); color:var(--oro-osc); }
.guia-talla-icono svg{ width:56%; height:auto; transition:transform .5s; }
.guia-talla-caja:hover .guia-talla-icono svg{ transform:rotate(-12deg) scale(1.06); }
.guia-talla-texto{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.guia-talla-texto strong{ font-family:var(--serif); font-weight:500; font-size:clamp(26px, 1.6vw + 16px, 38px); line-height:1.15; }
.guia-talla-desc{ color:var(--texto); font-size:var(--fs-body); line-height:1.6; max-width:560px; }
.guia-talla-btn{ align-self:flex-start; margin-top:8px; pointer-events:none; }

/* joya 3D al azar + las dos guías */
.guias-grid{ display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); gap:clamp(16px, 2.4vw, 28px); align-items:stretch; }
.guias-grid.sin-3d{ grid-template-columns:1fr; }
.guias-grid.sin-3d .guias-cards{ display:grid; grid-template-columns:1fr 1fr; }
.guias-cards{ display:flex; flex-direction:column; gap:clamp(16px, 2vw, 22px); }
.guias-cards .guia-talla-caja{ flex:1; align-items:flex-start; }
.guias-cards .guia-talla-texto strong{ font-size:clamp(24px, 1vw + 16px, 32px); }
.home3d{ position:relative; margin:0; min-height:clamp(340px, 34vw, 480px); border:1px solid var(--linea); border-radius:var(--radio-lg); overflow:hidden;
  background:radial-gradient(circle at 50% 38%, var(--f1, #fff) 0%, var(--f2, #e4e1d8) 100%); box-shadow:var(--sombra); }
.home3d.sin-modelo{ display:none; }
.home3d{ transition:background .4s ease; }
/* controles: tono de piel (arriba) y foco de luz, como en la ficha de la joya */
.home3d-controles{ position:absolute; top:12px; left:12px; right:12px; z-index:2; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; pointer-events:none; }
.home3d-fondos, .home3d-luz{ pointer-events:auto; display:flex; align-items:center; gap:6px; padding:5px 8px 5px 10px; border-radius:999px; background:rgba(255,255,255,.82); box-shadow:0 1px 4px rgba(0,0,0,.15); }
.home3d-fondos{ flex-wrap:wrap; }
.home3d-controles span{ color:#15171c; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; }
.home3d-fondos button{ width:22px; height:22px; padding:0; border-radius:50%; cursor:pointer; border:2px solid rgba(255,255,255,.95);
  box-shadow:0 1px 3px rgba(0,0,0,.25); background:radial-gradient(circle at 40% 35%, var(--f1), var(--f2)); transition:transform .15s; }
.home3d-fondos button:hover{ transform:scale(1.12); }
.home3d-fondos button.activo{ box-shadow:0 0 0 2px var(--oro), 0 1px 3px rgba(0,0,0,.25); }
.home3d-fondos button:focus-visible, .home3d-luz button:focus-visible{ outline:2px solid var(--oro); outline-offset:2px; }
.home3d-fondos i{ width:1px; height:16px; margin:0 2px; background:rgba(21,23,28,.18); }
.home3d-luz .luz-pad{ position:relative; width:38px; height:38px; border-radius:50%; cursor:grab; touch-action:none; flex:none;
  background:radial-gradient(circle at var(--lx, 72%) var(--ly, 22%), #fff7d6 0%, #d9d4c3 45%, #8d8a80 100%); border:1px solid rgba(21,23,28,.18); }
.home3d-luz .luz-pad:active{ cursor:grabbing; }
.home3d-luz .luz-pad:focus-visible{ outline:2px solid var(--oro); outline-offset:2px; }
.home3d-luz .luz-pad b{ position:absolute; left:var(--lx, 72%); top:var(--ly, 22%); width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:50%;
  background:#ffe9a3; border:2px solid #fff; box-shadow:0 0 0 1px var(--oro), 0 0 9px 3px rgba(255,220,120,.9); pointer-events:none; }
.home3d-luz input[type=range]{ width:70px; accent-color:var(--oro); cursor:pointer; }
.home3d-luz button{ width:24px; height:24px; padding:0; border:0; border-radius:50%; background:#15171c; color:#fff; font-size:13px; line-height:24px; cursor:pointer; }
.home3d-luz button:hover{ background:var(--oro); color:#15171c; }
/* tamaño del objeto (derecha, al centro) */
.home3d-zoom{ position:absolute; right:12px; top:50%; transform:translateY(-50%); z-index:2; display:flex; flex-direction:column; gap:6px; }
.home3d-zoom button{ width:34px; height:34px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.88); color:#15171c;
  font-size:19px; font-weight:600; line-height:34px; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.2); transition:background .15s, transform .15s; }
.home3d-zoom button:hover{ background:var(--oro); transform:scale(1.06); }
.home3d-zoom button:disabled{ opacity:.4; cursor:not-allowed; transform:none; background:rgba(255,255,255,.88); }
.home3d-zoom button:focus-visible{ outline:2px solid var(--oro); outline-offset:2px; }
.home3d-zoom button[data-zoom="reset"]{ font-size:15px; }
.home3d-zoom-val{ display:block; min-width:34px; padding:3px 0; border-radius:999px; background:rgba(21,23,28,.78); color:#fff;
  font-size:10px; font-weight:700; text-align:center; letter-spacing:.02em; font-variant-numeric:tabular-nums; }
.home3d-zoom .home3d-girar{ margin-top:6px; font-size:13px; }
.home3d-zoom .home3d-girar[aria-pressed="false"]{ background:var(--oro); }
@media (max-width:600px){ .home3d-controles span{ display:none; } .home3d-fondos button{ width:20px; height:20px; } .home3d-luz input[type=range]{ width:56px; } }
.home3d-visor{ position:absolute; inset:0; cursor:grab; touch-action:pan-y; opacity:0; transition:opacity .8s; }
.home3d-visor.listo{ opacity:1; }
.home3d-visor:active{ cursor:grabbing; }
.home3d-visor canvas{ width:100% !important; height:100% !important; display:block; }
.home3d-estado{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); padding:8px 16px; border-radius:999px;
  background:rgba(255,255,255,.85); color:#15171c; font-size:var(--fs-xs); font-weight:600; white-space:nowrap; }
/* modelo pesado: botón para cargarlo */
.home3d-cargar{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:20px 26px; border:1px solid rgba(21,23,28,.12); border-radius:20px; background:rgba(255,255,255,.9); color:#15171c; cursor:pointer;
  font-family:var(--sans); box-shadow:0 10px 30px rgba(0,0,0,.12); transition:transform .25s, background .25s; }
.home3d-cargar:hover{ transform:translate(-50%, -52%); background:#fff; }
.home3d-cargar:focus-visible{ outline:2px solid var(--oro); outline-offset:3px; }
.home3d-cargar svg{ width:40px; height:40px; fill:none; stroke:var(--oro); stroke-width:1.4; stroke-linejoin:round; }
.home3d-cargar span{ font-size:var(--fs-label); font-weight:700; letter-spacing:var(--ls-label); text-transform:uppercase; }
.home3d-cargar small{ font-size:11px; color:var(--gris); }
.home3d figcaption{ position:absolute; left:16px; right:16px; bottom:16px; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px;
  padding:14px 18px; border-radius:var(--radio); background:rgba(255,255,255,.88); backdrop-filter:blur(6px); color:#15171c; pointer-events:none; }
.home3d figcaption .t-eyebrow{ width:100%; color:#8f7f18; }
.home3d figcaption strong{ font-family:var(--serif); font-weight:500; font-size:clamp(20px, 1vw + 14px, 26px); }
.home3d figcaption a{ margin-left:auto; color:#15171c; pointer-events:auto; }
@media (max-width:900px){
  .guias-grid, .guias-grid.sin-3d .guias-cards{ grid-template-columns:1fr; }
  .home3d{ min-height:360px; }
}
@media (max-width:700px){
  .guia-talla-caja{ flex-direction:column; align-items:flex-start; }
  .guia-talla-btn{ align-self:stretch; text-align:center; }
}

/* cortes */
.grid-cortes{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px; }
.corte{
  width:150px; padding:22px 14px 18px; text-align:center;
  border:1px solid var(--linea); border-radius:var(--radio-lg); background:var(--superficie);
  box-shadow:0 6px 18px rgba(21,23,28,.04);
  display:flex; flex-direction:column; align-items:center; gap:6px; transition:.3s;
}
.corte:hover{ border-color:var(--oro); transform:translateY(-3px); box-shadow:var(--sombra-hover); }
/* las imágenes de corte son JPG con fondo blanco: sobre la tarjeta blanca no se nota el recorte,
   y multiply vuelve transparente cualquier resto de blanco */
.corte img{ width:72px; height:72px; object-fit:contain; margin-bottom:8px; mix-blend-mode:multiply; transition:transform .4s; }
.corte:hover img{ transform:scale(1.08); }
.corte span{ font-family:var(--serif); font-size:var(--fs-h3); font-weight:600; color:var(--tinta); }
.corte small{ font-size:var(--fs-label); letter-spacing:1px; text-transform:uppercase; color:var(--gris); }

/* editorial */
/* dos filas foto + tarjeta; la segunda invertida. Las fotos son verticales (3:4),
   así que la fila toma una altura que casi no las recorta. */
.editorial{ background:var(--negro); }
.editorial-fila{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  height:clamp(560px, 52vw, 860px);
}
.editorial-fila--inversa .editorial-foto{ order:2; }

.editorial-foto{ margin:0; overflow:hidden; position:relative; }
.editorial-foto img{ width:100%; height:100%; object-fit:cover; object-position:50% 40%; transition:transform 1.2s cubic-bezier(.2,.7,.2,1); }
.editorial-fila:hover .editorial-foto img{ transform:scale(1.04); }

.editorial-card{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:clamp(28px, 3vw, 44px);
  padding:clamp(40px, 6vw, 100px);
  /* el mismo difuminado de "Find your forever piece", centrado donde está la joya
     (más arriba en estas tarjetas grandes) y algo más concentrado para igualar la intensidad */
  background:radial-gradient(circle at 50% 30%, rgba(175,155,30,.26), rgba(175,155,30,0) 52%), var(--negro-2);
  color:#fff;
}
.editorial-card > img{
  align-self:center; width:min(440px, 82%); height:auto;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.55));
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.editorial-card:hover > img{ transform:translateY(-10px) scale(1.04); }
.editorial-num{
  position:absolute; top:clamp(20px, 3vw, 40px); right:clamp(24px, 4vw, 56px);
  font-family:var(--serif); font-size:clamp(70px, 7vw, 120px); line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(175,155,30,.35);
}
.editorial-texto{ width:100%; padding-top:26px; border-top:1px solid rgba(255,255,255,.14); }
.editorial-texto h2{ font-size:var(--fs-seccion); margin:12px 0 18px; color:#fff; }
.editorial-texto h2 em{ color:var(--oro); }
.editorial-card .t-eyebrow{ color:var(--crema); }
.editorial-card .enlace-flecha{ color:var(--oro); }

/* fila invertida: texto alineado hacia la foto (lado derecho) */
.editorial-fila--inversa .editorial-card{ align-items:flex-end; text-align:right; }
.editorial-fila--inversa .editorial-num{ right:auto; left:clamp(24px, 4vw, 56px); }

/* cinta */
.cinta{ overflow:hidden; background:var(--superficie); border-block:1px solid var(--linea); padding:22px 0; }
.cinta-pista{ display:flex; align-items:center; gap:36px; width:max-content; animation:cinta 40s linear infinite; }
.cinta span{
  font-family:var(--serif); font-style:italic; font-weight:400; text-transform:uppercase;
  font-size:clamp(26px, 2.6vw, 50px); letter-spacing:.2em; color:var(--tinta); white-space:nowrap;
}
.cinta i{ font-style:normal; color:var(--oro); font-size:22px; }

/* manos que crean */
.manos{
  /* foto ampliada al 125% y encuadrada en el anillo (x 54%, y 55%) para que la joya gane tamaño y respire junto al texto */
  position:relative; overflow:hidden; background-size:125% auto; background-position:54% 55%; background-repeat:no-repeat; background-color:#191919;
  color:#fff; padding:clamp(140px, 22vw, 360px) 0 clamp(80px, 12vw, 180px);
}

/* anillo protagonista: foco de luz cálida sobre la joya + viñeta que oscurece el resto
   (el JS coloca .brillo--foco sobre el anillo; ver data-x / data-y en inicio.php) */
.brillo--foco::before{
  left:-130px; top:-110px; width:260px; height:260px;
  background:radial-gradient(circle, rgba(255,236,190,.42) 0%, rgba(255,226,160,.16) 38%, rgba(255,255,255,0) 70%);
}
.brillo--foco::after{
  content:''; position:absolute; left:-1100px; top:-1100px; width:2200px; height:2200px; border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle, rgba(11,11,12,0) 0, rgba(11,11,12,0) 150px, rgba(11,11,12,.5) 560px, rgba(11,11,12,.62) 1100px);
}
.brillo--foco svg{ width:40px; height:40px; left:-20px; top:-20px; }
/* texto a la derecha: el anillo y la mano izquierda quedan visibles */
.manos::before{ content:''; position:absolute; inset:0; background:linear-gradient(270deg, rgba(11,11,12,.8) 0%, rgba(11,11,12,.45) 24%, rgba(11,11,12,0) 44%); }
.manos .contenedor{ position:relative; }
.manos-texto{ max-width:460px; margin-left:auto; }
.manos-texto h2{ font-size:var(--fs-seccion); margin:12px 0 20px; }
.manos-texto h2 em{ color:var(--oro); }
.manos-texto p{ font-size:var(--fs-body); line-height:1.8; color:rgba(255,255,255,.8); margin:0 0 30px; }
.manos .t-eyebrow{ color:var(--crema); }

/* galería */
.galeria{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); background:var(--negro); }
.galeria-item{ position:relative; aspect-ratio:1; overflow:hidden; }
.galeria-item img{ width:100%; height:100%; object-fit:cover; transition:transform .8s, opacity .4s; }
.galeria-item::after{ content:''; position:absolute; inset:0; background:var(--oro); opacity:0; transition:opacity .4s; mix-blend-mode:multiply; }
.galeria-item:hover img{ transform:scale(1.08); }
.galeria-item:hover::after{ opacity:.35; }

/* =========================
   PÁGINAS INTERNAS — cabecera
========================= */
/* texto a la izquierda (como el banner del home); la foto se ancla a la derecha para que la modelo no quede tras el título */
.pagina-hero{
  position:relative; padding:clamp(110px, 13vw, 180px) 0 clamp(64px, 7vw, 100px);
  background-size:cover; background-position:right 30%; background-color:var(--negro);
  color:#fff; text-align:left; overflow:hidden;
}
.pagina-hero::before{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(11,11,12,.88) 0%, rgba(11,11,12,.6) 38%, rgba(11,11,12,.1) 72%),
    linear-gradient(180deg, rgba(11,11,12,.25), rgba(11,11,12,.55));
}
.pagina-hero .contenedor{ position:relative; }
.pagina-hero h1{ font-size:var(--fs-hero); font-weight:400; margin:18px 0 14px; }
.pagina-hero p{ margin:0; max-width:440px; font-size:clamp(15px, .4vw + 13px, 19px); font-weight:300; color:rgba(255,255,255,.82); }
.pagina-hero p::before{ content:''; display:block; width:56px; height:1px; background:var(--oro); margin-bottom:18px; }
.migas{
  display:inline-flex; gap:10px; align-items:center;
  font-size:var(--fs-label); font-weight:600; letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--crema);
}
.migas a{ color:rgba(255,255,255,.7); transition:color .2s; }
.migas a:hover{ color:var(--oro); }

.btn-linea--claro{ border-color:rgba(255,255,255,.7); color:#fff; }
.btn-linea--claro:hover{ background:var(--superficie); color:var(--tinta); }

/* =========================
   ABOUT — intro
========================= */
.nos-intro-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(40px, 6vw, 90px); align-items:center; }
.nos-intro-texto h2{ font-size:clamp(28px, 1.8vw + 16px, 44px); line-height:1.2; margin:14px 0 22px; color:var(--tinta); }
.nos-intro-texto h2 em, .nos-esencia-texto h2 em{ color:var(--oro); }
.nos-intro-texto p{ font-size:15px; line-height:1.9; color:var(--texto); margin:0; max-width:520px; }
.nos-cifras{ display:grid; grid-template-columns:repeat(3, auto); justify-content:start; gap:clamp(24px, 4vw, 56px); margin:40px 0 0; padding-top:28px; border-top:1px solid var(--linea); }
.nos-cifras div{ margin:0; }
.nos-cifras dt{ font-family:var(--serif); font-size:clamp(34px, 2vw + 20px, 48px); color:var(--oro); line-height:1; }
.nos-cifras dd{ margin:8px 0 0; font-size:var(--fs-label); font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--gris); }

.nos-intro-img{ position:relative; aspect-ratio:1; display:flex; align-items:center; justify-content:center; }
.nos-aro{
  position:absolute; inset:6%; border-radius:50%;
  background:radial-gradient(circle at 50% 45%, #fff 0%, var(--oro-suave) 62%, transparent 63%);
  border:1px solid rgba(175,155,30,.25);
}
.nos-aro::after{
  content:''; position:absolute; inset:-5%; border-radius:50%;
  border:1px dashed rgba(175,155,30,.35); animation:girar 60s linear infinite;
}
.nos-intro-img img{ position:relative; width:86%; filter:drop-shadow(0 30px 40px rgba(21,23,28,.15)); animation:flotar 6s ease-in-out infinite; }

/* servicios */
.nos-servicios{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px; }
.servicio{
  position:relative; padding:44px 34px 38px; border-radius:var(--radio-lg);
  background:var(--fondo); border:1px solid var(--linea); overflow:hidden; transition:.35s;
}
.servicio::after{
  content:''; position:absolute; left:0; bottom:0; height:3px; width:100%;
  background:var(--oro); transform:scaleX(0); transform-origin:left; transition:transform .45s;
}
.servicio:hover{ background:var(--superficie); transform:translateY(-6px); box-shadow:var(--sombra-hover); }
.servicio:hover::after{ transform:scaleX(1); }
.servicio-num{ position:absolute; top:22px; right:26px; font-family:var(--serif); font-size:44px; color:var(--linea); line-height:1; transition:color .35s; }
.servicio:hover .servicio-num{ color:var(--oro-suave); }
.servicio-icono{
  width:58px; height:58px; padding:14px; border-radius:50%;
  background:var(--oro-suave); fill:none; stroke:var(--oro); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round;
  margin-bottom:26px; transition:.35s;
}
.servicio:hover .servicio-icono{ background:var(--oro); stroke:#fff; }
.servicio h3{ font-size:var(--fs-h2); color:var(--tinta); margin-bottom:12px; }
.servicio p{ margin:0; font-size:var(--fs-body); line-height:1.8; color:var(--texto); }

/* esencia */
.nos-esencia-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(40px, 6vw, 90px); align-items:center; }
.nos-retrato{ margin:0; position:relative; }
.nos-retrato img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 20%; border-radius:var(--radio-lg); }
.nos-retrato::before{
  content:''; position:absolute; inset:18px -18px -18px 18px; border:1px solid rgba(175,155,30,.5); border-radius:var(--radio-lg); z-index:-1;
}
.nos-esencia-grid{ position:relative; z-index:0; }
.nos-retrato figcaption{
  position:absolute; left:20px; bottom:20px; padding:8px 16px; border-radius:999px;
  background:rgba(11,11,12,.7); backdrop-filter:blur(6px);
  font-family:var(--serif); font-style:italic; font-size:16px; color:var(--crema);
}
.nos-esencia-texto .t-eyebrow{ color:var(--crema); }
.nos-esencia-texto h2{ font-size:var(--fs-seccion); margin:12px 0 22px; }
.nos-esencia-texto > p{ font-size:15px; line-height:1.9; color:rgba(255,255,255,.72); margin:0 0 34px; }

.linea-tiempo{ list-style:none; margin:0 0 34px; padding:0; display:grid; gap:0; }
.linea-tiempo li{
  position:relative; display:grid; grid-template-columns:110px 1fr; gap:18px;
  padding:16px 0 16px 26px; border-left:1px solid rgba(255,255,255,.18);
}
.linea-tiempo li::before{
  content:''; position:absolute; left:-5px; top:22px; width:9px; height:9px; border-radius:50%;
  background:var(--negro); border:1px solid var(--oro); transition:background .3s;
}
.linea-tiempo li:hover::before{ background:var(--oro); }
.linea-tiempo strong{ font-family:var(--serif); font-size:var(--fs-h3); font-weight:500; color:var(--oro); }
.linea-tiempo span{ font-size:var(--fs-sm); line-height:1.7; color:rgba(255,255,255,.7); }

.nos-sellos{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:12px; }
.nos-sellos li{
  padding:10px 20px; border:1px solid rgba(175,155,30,.5); border-radius:999px;
  font-size:var(--fs-label); font-weight:600; letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--crema);
}

/* testimonios */
/* testimonios: sección clara (crema) con tarjetas blancas; separa las dos zonas oscuras de la página */
.nos-testimonios{ position:relative; padding:clamp(70px, 8vw, 120px) 0; background:var(--fondo); color:var(--tinta); }
.testimonios-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px; max-width:1040px; margin:0 auto; }
.testimonio{
  position:relative; margin:0; padding:44px 40px 34px; border-radius:var(--radio-lg);
  background:var(--superficie); border:1px solid var(--linea); box-shadow:var(--sombra);
  display:flex; flex-direction:column; transition:.35s;
}
.testimonio::before{   /* filete dorado superior */
  content:''; position:absolute; top:-1px; left:40px; width:56px; height:2px; background:var(--oro);
}
.testimonio:hover{ border-color:rgba(175,155,30,.55); transform:translateY(-4px); box-shadow:var(--sombra-hover); }
.comillas{ font-family:var(--serif); font-size:90px; line-height:.6; color:var(--oro); height:36px; }
.testimonio blockquote{ margin:0 0 28px; font-family:var(--serif); font-size:clamp(20px, .6vw + 16px, 25px); font-style:italic; line-height:1.45; color:var(--tinta); flex:1; }
.testimonio figcaption{ display:flex; flex-direction:column; gap:4px; padding-top:20px; border-top:1px solid var(--linea); }
.testimonio figcaption strong{ font-size:var(--fs-sm); letter-spacing:1px; text-transform:uppercase; color:var(--tinta); }
.testimonio figcaption span{ font-size:var(--fs-xs); color:var(--oro); }

/* socios */
.socios{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:18px; }
.socios li{ flex:0 1 calc((100% - 4 * 18px) / 5); }
.socios li{
  aspect-ratio:3/2; display:flex; align-items:center; justify-content:center; padding:18px;
  border:1px solid var(--linea); border-radius:var(--radio); background:var(--superficie); transition:.3s;
}
.socios img{ max-height:100%; width:auto; object-fit:contain; filter:grayscale(1); opacity:.7; transition:.35s; }
.socios li:hover{ border-color:var(--oro); box-shadow:var(--sombra); }
.socios li:hover img{ filter:none; opacity:1; }

/* galería + tallas */
.nos-galeria{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); background:var(--negro); }
.nos-galeria-item{ aspect-ratio:3/4; overflow:hidden; }
.nos-galeria-item img{ width:100%; height:100%; object-fit:cover; transition:transform .8s; }
.nos-galeria-item:hover img{ transform:scale(1.07); }
.nos-galeria-cta{
  display:flex; flex-direction:column; justify-content:center; gap:14px; padding:28px;
  background:var(--oro); color:#fff; transition:background .3s;
}
.nos-galeria-cta:hover{ background:var(--oro-osc); }
.nos-galeria-cta .t-eyebrow{ color:rgba(255,255,255,.8); }
.nos-galeria-cta strong{ font-family:var(--serif); font-size:clamp(24px, 1vw + 16px, 32px); font-weight:500; line-height:1.15; }
.nos-galeria-cta .enlace-flecha{ color:#fff; }

/* llamada final */
/* llamada final en dorado claro con un halo: no se funde con el footer oscuro */
.nos-cta{
  padding:clamp(80px, 9vw, 130px) 0; text-align:center; color:var(--tinta);
  background:radial-gradient(ellipse 60% 90% at 50% 50%, #fff 0%, rgba(255,255,255,0) 70%), var(--oro-suave);
  border-top:1px solid rgba(175,155,30,.25);
}
.nos-cta h2{ font-size:var(--fs-seccion); margin:14px 0 34px; }
.nos-cta h2::after{ content:''; display:block; width:56px; height:1px; background:var(--oro); margin:26px auto 0; }
.nos-cta-botones{ display:flex; justify-content:center; flex-wrap:wrap; gap:14px; }

@keyframes girar{ to{ transform:rotate(360deg); } }
@keyframes flotar{ 50%{ transform:translateY(-12px) rotate(-2deg); } }

/* =========================
   FOOTER
========================= */
.sitio-footer{ background:var(--negro); color:rgba(255,255,255,.72); font-size:var(--fs-sm); }
.footer-marca{
  max-width:var(--ancho); margin:0 auto; padding:90px 28px 56px; text-align:center;
  display:flex; flex-direction:column; align-items:center;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-marca img{ height:clamp(120px, 10vw, 170px); width:auto; transition:opacity .3s; }
.footer-marca a:hover img{ opacity:.85; }
.footer-marca p{ font-size:clamp(20px, .6vw + 16px, 26px); font-style:italic; color:var(--crema); margin:20px 0 0; }
.footer-in{
  max-width:960px; margin:0 auto; padding:56px 28px 60px;
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:40px; text-align:center;
}
.footer-col h4{ margin:0 0 18px; }
.footer-col p{ margin:0 0 10px; line-height:1.6; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.footer-col a{ transition:color .2s; }
.footer-col a:hover{ color:var(--oro); }
.footer-base{
  max-width:var(--ancho); margin:0 auto; padding:24px 28px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.12); font-size:var(--fs-xs); color:rgba(255,255,255,.5);
}
.footer-base .t-serif{ font-size:var(--fs-h4); color:var(--oro); font-style:italic; }

/* =========================
   ANIMACIONES
========================= */
.js .revelar{ opacity:0; transform:translateY(24px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.js .revelar.visible{ opacity:1; transform:none; }

@keyframes heroZoom{ to{ transform:scale(1); } }
@keyframes cinta{ to{ transform:translateX(-50%); } }

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  .js .revelar{ opacity:1; transform:none; }
  .anillo-trazo{ stroke-dashoffset:0; }
  html{ scroll-behavior:auto; }
}

/* =========================
   RESPONSIVE
   ≤1100 portátil pequeño / tablet horizontal
   ≤900  tablet vertical (menú hamburguesa)
   ≤640  teléfono
   ≤380  teléfono pequeño
========================= */
/* menú con 6 entradas: en pantallas medianas se aprieta y, por debajo de 1240px, pasa al botón ☰ */
@media (max-width:1400px){
  .menu-principal ul{ gap:14px; }
  .menu-principal a{ letter-spacing:.8px; font-size:10.5px; }
}
@media (max-width:1240px){
  .menu-toggle{ display:flex; }
  .menu-principal{
    position:absolute; top:100%; left:0; right:0;
    background:var(--superficie);
    max-height:0; overflow:hidden; transition:max-height .4s ease;
  }
  .menu-abierto .menu-principal{ max-height:480px; border-bottom:1px solid var(--linea); box-shadow:0 20px 40px rgba(0,0,0,.08); }
  .menu-principal ul{ flex-direction:column; gap:0; padding:8px 28px 20px; }
  .menu-principal li{ border-bottom:1px solid var(--linea); }
  .menu-principal a{ display:block; padding:16px 4px; font-size:var(--fs-sm); letter-spacing:var(--ls-label); }
  .menu-principal a::after{ display:none; }
  .header-hero:not(.con-sombra):not(.menu-abierto) .menu-principal a{ color:var(--texto); }
}

@media (max-width:1100px){
  .grid-categorias{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .menu-principal ul{ gap:18px; }
  .header-acciones{ gap:10px; }
  .header-acciones .btn-linea{ padding:10px 16px; }
  .editorial-card{ padding:clamp(36px, 5vw, 64px); }
  .manos-texto{ max-width:340px; }   /* el anillo (centro de la foto) queda libre */
}

@media (max-width:900px){
  :root{ --header-h:76px; }

  /* ---------- header y menú ---------- */
  .header-in{ padding:0 16px; gap:12px; }
  .header-logo img{ height:58px; }
  .header-hero:not(.con-sombra):not(.menu-abierto) .header-in{ height:124px; }
  .header-hero:not(.con-sombra):not(.menu-abierto) .header-logo img{ height:98px; }
  .menu-toggle{ display:flex; }
  .header-acciones .btn-linea{ display:none; }
  .menu-principal{
    position:absolute; top:100%; left:0; right:0;
    background:var(--superficie);
    max-height:0; overflow:hidden; transition:max-height .4s ease;
  }
  /* borde y sombra solo con el menú abierto (cerrado dejaba una línea bajo el header) */
  .menu-abierto .menu-principal{ max-height:420px; border-bottom:1px solid var(--linea); box-shadow:0 20px 40px rgba(0,0,0,.08); }
  .menu-principal ul{ flex-direction:column; gap:0; padding:8px 16px 20px; }
  .menu-principal li{ border-bottom:1px solid var(--linea); }
  .menu-principal a{ display:block; padding:16px 4px; font-size:var(--fs-sm); }
  .menu-principal a::after{ display:none; }

  .contenedor, .hero-in, .hero-base{ padding-left:16px; padding-right:16px; }

  /* ---------- hero (home): foto arriba encuadrando rostro y anillo, texto debajo ---------- */
  /* pantalla angosta: antetítulo, texto, anillo y «Agenda una cita» centrados */
  .con-hero .hero-in{ padding-top:calc(min(80svh, 660px) - 70px); align-items:center; text-align:center; gap:22px; }
  .con-hero .hero-texto{ margin-inline:auto; }
  .con-hero .hero-texto h1{ margin-inline:auto; }
  .con-hero .hero-fondo{ bottom:auto; height:min(80svh, 660px); background-position:49% 40%; filter:none; }
  .con-hero .hero-anillo{ width:92px; }
  .con-hero .hero-anillo span{ font-size:15px; }
  .con-hero .hero-acciones{ justify-content:center; gap:16px; }
  .con-hero .hero-fondo::after{ background:linear-gradient(180deg, rgba(11,11,12,.55) 0%, rgba(11,11,12,0) 22%, rgba(11,11,12,0) 74%, rgba(11,11,12,1) 100%); }
  .con-hero .hero-base{ display:flex; }
  .con-hero .hero-base > span{ text-align:center; }
  .hero-bajar{ display:none; }
  .hero-fondo::after{ background:linear-gradient(180deg, rgba(11,11,12,.2) 0%, rgba(11,11,12,.55) 40%, rgba(11,11,12,.9) 100%); }
  .hero-in{ flex-direction:column; align-items:center; text-align:center; gap:28px; }
  .hero-texto h1{ margin-inline:auto; }
  .hero-anillo{ width:170px; }
  .hero-anillo span{ font-size:21px; }
  .hero-base{ flex-direction:column; gap:12px; }
  .hero-redes{ gap:32px; }

  /* ---------- colecciones: 2 columnas, tarjetas menos altas ---------- */
  .col-cabecera{ grid-template-columns:minmax(0, 1fr); gap:18px; align-items:start; }
  .grid-categorias{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; padding-bottom:40px; }
  .categoria{ aspect-ratio:1 / 1.12; }
  /* 5.ª colección (Joyería de autor) a lo ancho, sin desfase */
  .categoria:nth-child(5){ grid-column:1 / -1; aspect-ratio:2 / 1.05; margin-top:0; margin-bottom:0; }
  .categoria:nth-child(even){ margin-top:40px; margin-bottom:-40px; }
  .categoria-ver{ opacity:1; transform:none; }   /* sin hover en táctil: siempre visible */

  .grid-formas{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .formas-titulo{ grid-column:1/-1; text-align:center; }
  .galeria{ grid-template-columns:repeat(3, minmax(0, 1fr)); }

  /* ---------- editorial: se mantienen foto + tarjeta lado a lado ---------- */
  .editorial-fila{ height:clamp(520px, 78vw, 640px); }
  .editorial-card{ padding:36px 26px; gap:24px; }
  .editorial-card > img{ width:92%; }
  .editorial-num{ font-size:64px; }

  /* ---------- manos: foto completa arriba, texto debajo (no tapa el anillo) ---------- */
  /* foto arriba al 150% (alto = 85.7vw) encuadrando las manos y el anillo; texto debajo */
  .manos{
    padding:calc(85.7vw - 40px) 0 64px;
    background-size:150% auto; background-position:44% 0; background-repeat:no-repeat;
    background-color:var(--negro);
  }
  .manos::before{ background:linear-gradient(180deg, rgba(11,11,12,0) 0, rgba(11,11,12,0) calc(85.7vw - 200px), var(--negro) calc(85.7vw - 10px)); }
  .manos-texto{ margin-left:0; max-width:560px; }

  /* ---------- about ---------- */
  .nos-intro-grid{ grid-template-columns:1.15fr .85fr; gap:32px; }
  .nos-cifras{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
  .nos-esencia-grid{ grid-template-columns:minmax(0, 1fr); }
  .nos-retrato{ max-width:440px; margin:0 auto 18px; width:100%; }
  .nos-servicios{ gap:14px; }
  .servicio{ padding:34px 22px 28px; }
  .servicio h3{ font-size:var(--fs-h3); }
  .servicio-num{ font-size:34px; top:18px; right:18px; }
  .nos-testimonios{ background-attachment:scroll; }
  .testimonio{ padding:32px 26px 26px; }
  .socios li{ flex-basis:calc((100% - 2 * 18px) / 3); }
  .nos-galeria{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

@media (max-width:640px){
  /* el selector de idioma pasa a la barra superior: en una sola fila no caben menú, logo, idioma y carrito */
  .header-barra{ display:flex; }
  .header-acciones .idioma{ display:none; }

  .bloque-titulo--linea{ flex-direction:column; align-items:flex-start; }

  /* piezas: 2 por fila; si queda una sola, se centra */
  .grid-piezas{ gap:12px; }
  .pieza{ flex-basis:calc(50% - 6px); padding:8px; border-radius:var(--radio); }
  .corte{ width:calc(50% - 9px); }

  .categoria{ aspect-ratio:3 / 4.4; }
  .grid-categorias{ gap:12px; padding-bottom:32px; }
  .categoria:nth-child(even){ margin-top:32px; margin-bottom:-32px; }

  /* editorial apilado: foto (proporción natural) y tarjeta debajo */
  .editorial-fila{ grid-template-columns:minmax(0, 1fr); height:auto; }
  .editorial-fila--inversa .editorial-foto{ order:0; }
  .editorial-foto{ aspect-ratio:4/5; }
  .editorial-card{ padding:48px 20px 44px; }
  .editorial-card > img{ width:min(340px, 88%); }
  .editorial-fila--inversa .editorial-card{ align-items:flex-start; text-align:left; }
  .editorial-fila--inversa .editorial-num{ left:auto; right:20px; }

  .nos-intro-grid{ grid-template-columns:minmax(0, 1fr); }
  .nos-intro-img{ max-width:360px; margin:0 auto; width:100%; }
  .nos-servicios, .testimonios-grid{ grid-template-columns:minmax(0, 1fr); }
  .linea-tiempo li{ grid-template-columns:minmax(0, 1fr); gap:4px; }
  .socios{ gap:12px; }
  .socios li{ flex-basis:calc((100% - 12px) / 2); }
  .nos-galeria{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .nos-galeria-item:nth-child(5){ display:none; }
  .nos-galeria-cta{ grid-column:span 2; }
  .testimonio{ padding:30px 22px 24px; }

  .footer-marca{ padding:64px 16px 44px; }
  .footer-in{ grid-template-columns:minmax(0, 1fr); padding:44px 16px 40px; gap:32px; }
  .footer-base{ padding:20px 16px; flex-direction:column; align-items:center; text-align:center; }
}

@media (max-width:380px){
  :root{ --fs-hero:46px; }
  .header-hero:not(.con-sombra):not(.menu-abierto) .header-logo img{ height:84px; }
  .categoria h3{ font-size:21px; }
  .categoria-info{ padding:16px; }
  .nos-cifras dt{ font-size:30px; }
}

/* =========================
   BOTÓN DE TEMA EN LA CABECERA
========================= */
.header-barra-acciones{ display:inline-flex; align-items:center; gap:8px; }
.header-hero:not(.con-sombra):not(.menu-abierto) .tema-toggle{ color:#fff; border-color:rgba(255,255,255,.55); }
.header-hero:not(.con-sombra):not(.menu-abierto) .tema-toggle:hover{ color:var(--crema); border-color:var(--crema); }
@media (max-width:640px){
  .header-acciones .tema-toggle{ display:none; }   /* en teléfono va en la barra superior, junto al idioma */
}

/* =========================================================
   JOYERÍA DE AUTOR (autor.php) — siempre en tema oscuro
   ========================================================= */
.pagina-autor{ background:var(--negro); }
.pagina-autor .sitio-header{ background:rgba(11,11,12,.86); }
.pagina-autor .tema-toggle{ display:none; }   /* la página fija su tema */
.firma-hero{
  position:relative; overflow:hidden; padding:clamp(56px, 8vw, 120px) 0 clamp(64px, 8vw, 120px);
  background:
    radial-gradient(ellipse 60% 70% at 78% 40%, rgba(175,155,30,.20), transparent 70%),
    radial-gradient(ellipse 40% 50% at 10% 90%, rgba(232,240,189,.06), transparent 70%),
    var(--negro);
  color:#fff;
}
.firma-hero-grid{ display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); gap:clamp(36px, 6vw, 96px); align-items:center; }
.firma-hero .t-eyebrow{ display:block; margin-top:26px; color:var(--oro); }
.firma-hero h1{ font-size:var(--fs-hero); font-weight:400; margin:14px 0 22px; color:#fff; }
.firma-hero h1 em, .firma-titulo h2 em, .firma-proceso h2 em, .firma-cta h2 em{ color:var(--oro); font-style:italic; }
.firma-hero p{ max-width:480px; margin:0; font-size:clamp(15px, .4vw + 13px, 19px); font-weight:300; line-height:1.75; color:rgba(255,255,255,.78); }
.firma-hero p::before{ content:''; display:block; width:56px; height:1px; background:var(--oro); margin-bottom:20px; }
.firma-botones{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.firma-hero-foto{ position:relative; margin:0; justify-self:end; width:min(100%, 470px); }
.firma-hero-foto::before{ content:''; position:absolute; inset:-14px 14px 14px -14px; border:1px solid rgba(175,155,30,.55); border-radius:4px; }
.firma-hero-foto img{ position:relative; width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:4px; box-shadow:0 40px 80px rgba(0,0,0,.55); }
.firma-hero-foto figcaption{ position:absolute; left:-1px; bottom:26px; transform:translateX(-30%); }
.firma-hero-foto figcaption span{ display:inline-block; padding:12px 18px; background:var(--negro-2); border:1px solid rgba(175,155,30,.4); color:var(--crema);
  font-family:var(--serif); font-style:italic; font-size:17px; white-space:nowrap; box-shadow:0 18px 40px rgba(0,0,0,.4); }

.firma-bloque{ padding:clamp(72px, 9vw, 130px) 0; background:var(--negro); color:#fff; }
.firma-bloque + .firma-bloque{ border-top:1px solid rgba(255,255,255,.07); }
.firma-titulo{ text-align:center; margin-bottom:clamp(40px, 5vw, 64px); }
.firma-titulo h2{ font-size:var(--fs-seccion); margin-top:12px; color:#fff; }
.firma-titulo p{ margin:12px 0 0; font-size:var(--fs-label); font-weight:600; letter-spacing:var(--ls-label); text-transform:uppercase; color:rgba(255,255,255,.5); }

.firma-pilares-bloque{ background:var(--negro-2); }
.firma-pilares{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(16px, 2vw, 28px); }
.firma-pilar{ padding:0 30px 34px; overflow:hidden; border:1px solid rgba(255,255,255,.08); border-radius:var(--radio-lg); background:linear-gradient(160deg, rgba(175,155,30,.08), rgba(255,255,255,.01) 60%); transition:.35s; }
.firma-pilar:hover{ border-color:rgba(175,155,30,.45); transform:translateY(-6px); }
.firma-num{ font-family:var(--serif); font-size:48px; line-height:1; color:var(--oro); }
.firma-pilar-foto{ margin:0 -30px 26px; aspect-ratio:4/3; overflow:hidden; background:#000; }
.firma-pilar-foto img{ width:100%; height:100%; object-fit:cover; transition:transform .8s ease; }
.firma-pilar:hover .firma-pilar-foto img{ transform:scale(1.06); }

/* inspiración andina */
.firma-andes{ padding:clamp(72px, 9vw, 130px) 0; background:linear-gradient(180deg, var(--negro), #0d1220 60%, var(--negro)); color:#fff; }
.firma-andes-grid{ display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(36px, 6vw, 96px); align-items:center; }
.firma-andes-foto{ margin:0; position:relative; isolation:isolate; }
.firma-andes-foto img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:4px; box-shadow:0 40px 80px rgba(0,0,0,.6); }
.firma-andes-foto::after{ content:''; position:absolute; inset:14px -14px -14px 14px; z-index:-1; border:1px solid rgba(175,155,30,.45); border-radius:4px; }
.firma-andes h2{ font-size:var(--fs-seccion); margin:12px 0 20px; color:#fff; }
.firma-andes h2 em{ color:var(--oro); font-style:italic; }
.firma-andes p{ margin:0; max-width:480px; line-height:1.8; color:rgba(255,255,255,.72); font-size:clamp(15px, .3vw + 13px, 17px); }
.firma-cifras{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin:40px 0 0; padding-top:28px; border-top:1px solid rgba(255,255,255,.1); }
.firma-cifras dt{ font-family:var(--serif); font-size:clamp(30px, 2vw + 14px, 42px); color:var(--oro); line-height:1; }
.firma-cifras dd{ margin:8px 0 0; font-size:var(--fs-label); font-weight:600; letter-spacing:var(--ls-label); text-transform:uppercase; color:rgba(255,255,255,.55); }

/* lookbook */
.firma-look{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:clamp(10px, 1.4vw, 20px); }
.firma-look figure{ margin:0; overflow:hidden; border-radius:4px; background:#000; }
.firma-look figure:nth-child(even){ transform:translateY(clamp(20px, 3vw, 48px)); }
.firma-look img{ width:100%; aspect-ratio:3/4; object-fit:cover; filter:saturate(.9); transition:transform .9s ease, filter .5s; }
.firma-look figure:hover img{ transform:scale(1.05); filter:saturate(1.05); }
.firma-look-bloque{ padding-bottom:clamp(110px, 12vw, 170px); }
.firma-pilar h3{ margin:18px 0 10px; font-size:26px; color:#fff; }
.firma-pilar p{ margin:0; line-height:1.7; color:rgba(255,255,255,.66); }

/* tarjetas de piezas sobre negro */
.firma-grid .pieza{ background:var(--negro-2); border-color:rgba(255,255,255,.08); }
.firma-grid .pieza:hover{ border-color:rgba(175,155,30,.5); box-shadow:0 24px 50px rgba(0,0,0,.5); }
.firma-grid .pieza-img{ background:var(--fondo-joya); }
.firma-grid .pieza-info h3{ color:#fff; }
.firma-grid .pieza-info p{ color:rgba(255,255,255,.6); }
.firma-grid .pieza-precio span{ color:var(--oro); }
.firma-vacio{ max-width:520px; margin:0 auto; padding:40px; text-align:center; border:1px dashed rgba(255,255,255,.18); border-radius:var(--radio-lg); }
.firma-vacio p{ margin:0 0 22px; color:rgba(255,255,255,.7); line-height:1.7; }

.firma-proceso{ display:grid; grid-template-columns:1fr 1fr; min-height:620px; background:var(--negro-2); color:#fff; }
.firma-proceso-foto{ background-size:cover; background-position:center; position:relative; }
.firma-proceso-foto::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,20,22,0) 55%, var(--negro-2)); }
.firma-proceso-texto{ padding:clamp(56px, 7vw, 110px) clamp(28px, 6vw, 96px); align-self:center; }
.firma-proceso h2{ font-size:var(--fs-seccion); margin:12px 0 36px; color:#fff; }
.firma-pasos{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:22px; counter-reset:paso; }
.firma-pasos li{ display:grid; grid-template-columns:46px 1fr; gap:18px; align-items:start; }
.firma-pasos li > span{ display:grid; place-items:center; width:46px; height:46px; border-radius:50%; border:1px solid var(--oro); color:var(--oro); font-family:var(--serif); font-size:20px; }
.firma-pasos h3{ font-size:22px; color:#fff; margin:4px 0 6px; }
.firma-pasos p{ margin:0; line-height:1.65; color:rgba(255,255,255,.66); }

.firma-cta{ position:relative; isolation:isolate; overflow:hidden; text-align:center; padding:clamp(100px, 12vw, 180px) 0; background:var(--negro); }
.firma-cta-foto{ position:absolute; inset:0; z-index:-1; background-size:cover; background-position:center 40%; }
.firma-cta-foto::after{ content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 50% 60% at 50% 100%, rgba(175,155,30,.18), transparent 70%),
             linear-gradient(180deg, rgba(11,11,12,.88), rgba(11,11,12,.55) 50%, rgba(11,11,12,.92)); }
.firma-cta blockquote{ max-width:760px; margin:0 auto 54px; }
.firma-cta blockquote p{ margin:0; font-family:var(--serif); font-style:italic; font-size:clamp(24px, 1.6vw + 16px, 38px); line-height:1.35; color:var(--crema); }
.firma-cta blockquote p::before{ content:'“'; display:block; font-size:80px; line-height:.6; color:var(--oro); }
.firma-cta cite{ display:block; margin-top:18px; font-style:normal; font-size:var(--fs-label); font-weight:600; letter-spacing:var(--ls-label); text-transform:uppercase; color:rgba(255,255,255,.55); }
.firma-cta h2{ font-size:var(--fs-seccion); color:#fff; }
.firma-cta .firma-botones{ justify-content:center; }

@media (max-width:900px){
  .firma-hero-grid{ grid-template-columns:1fr; }
  .firma-hero-foto{ justify-self:center; width:min(84%, 420px); margin-top:10px; }
  .firma-hero-foto figcaption{ transform:none; left:-10px; }
  .firma-pilares{ grid-template-columns:1fr; }
  .firma-andes-grid{ grid-template-columns:1fr; }
  .firma-andes-foto{ width:min(86%, 440px); justify-self:center; }
  .firma-look{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .firma-cifras{ gap:10px; }
  .firma-proceso{ grid-template-columns:1fr; }
  .firma-proceso-foto{ min-height:320px; }
  .firma-proceso-foto::after{ background:linear-gradient(180deg, rgba(20,20,22,0) 55%, var(--negro-2)); }
}

/* =========================================================
   AGENDA UNA CITA (cita.php)
   ========================================================= */
.con-hero .hero-texto p{ margin-top:14px; }   /* sin el título grande, el texto va bajo el antetítulo */
.cita-bloque{ background:var(--fondo); padding-top:clamp(24px, 3vw, 40px); }
.cita-grid{ display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(260px, 1fr); gap:clamp(22px, 3vw, 40px); align-items:start; }
.cita-form{ padding:clamp(22px, 3vw, 36px); border:1px solid var(--linea); border-radius:var(--radio-lg); background:var(--superficie); box-shadow:var(--sombra); }
.cita-trampa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.cita-aviso{ margin:0 0 18px; padding:12px 16px; border-radius:12px; background:#fdecec; color:#b42318; font-weight:600; font-size:var(--fs-sm); }
.cita-paso{ margin:0 0 26px; padding:0; border:0; min-width:0; }
.cita-paso legend{ display:flex; align-items:center; gap:10px; padding:0; margin-bottom:14px; font-family:var(--serif); font-size:clamp(22px, .6vw + 18px, 28px); color:var(--tinta); }
.cita-paso legend span{ display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--tinta); color:var(--sobre-tinta);
  font-family:var(--sans); font-size:13px; font-weight:700; }
.cita-campos{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cita-ancho{ grid-column:1 / -1; }
/* cita: ¿quiere al joyero en la reunión? (check) */
.cita-joyero{ position:relative; display:flex; align-items:flex-start; gap:14px; padding:16px 18px; border:1px solid var(--linea-2); border-radius:var(--radio); background:var(--superficie); cursor:pointer; transition:border-color .2s, background .2s; }
.cita-joyero:hover{ border-color:var(--oro); }
.cita-joyero input{ position:absolute; opacity:0; width:1px; height:1px; }
.cita-joyero-caja{ flex:none; width:24px; height:24px; margin-top:1px; border:1.5px solid var(--linea-2); border-radius:7px; background:var(--superficie); display:grid; place-items:center; transition:.2s; }
.cita-joyero-caja::after{ content:""; width:6px; height:11px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg) scale(0); margin-top:-3px; transition:transform .15s; }
.cita-joyero input:checked ~ .cita-joyero-caja{ background:var(--oro); border-color:var(--oro); }
.cita-joyero input:checked ~ .cita-joyero-caja::after{ transform:rotate(45deg) scale(1); }
.cita-joyero input:focus-visible ~ .cita-joyero-caja{ outline:2px solid var(--oro); outline-offset:2px; }
.cita-joyero:has(input:checked){ border-color:var(--oro); background:var(--oro-suave); }
.cita-joyero-txt{ display:flex; flex-direction:column; gap:4px; }
.cita-joyero-txt b{ font-size:var(--fs-sm); font-weight:600; color:var(--tinta); }
.cita-joyero-txt small{ font-size:var(--fs-xs); color:var(--gris); line-height:1.5; }
.cita-campo{ display:flex; flex-direction:column; gap:6px; }
.cita-campo > span{ font-size:var(--fs-label); font-weight:600; letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--gris); }
.cita-campo input{ width:100%; padding:13px 14px; border:1px solid var(--linea-2); border-radius:var(--radio-sm); background:var(--superficie); color:var(--tinta);
  font:inherit; font-size:15px; transition:border-color .2s, box-shadow .2s; }
.cita-campo input:focus{ outline:none; border-color:var(--oro); box-shadow:0 0 0 3px rgba(175,155,30,.18); }
.cita-campo input[type=date]{ max-width:280px; }
.cita-ayuda{ font-size:var(--fs-xs); color:var(--gris); }
.cita-error{ font-size:var(--fs-xs); color:#b42318; font-weight:600; }
.cita-error:empty{ display:none; }
.con-error input{ border-color:#e36a6a; }
.cita-horas{ display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:8px; }
.cita-hora{ position:relative; cursor:pointer; }
.cita-hora input{ position:absolute; opacity:0; pointer-events:none; }
.cita-hora span{ display:block; padding:10px 0; border:1px solid var(--linea-2); border-radius:999px; text-align:center; font-weight:600; font-size:var(--fs-sm);
  background:var(--superficie); transition:background .2s, border-color .2s, color .2s; font-variant-numeric:tabular-nums; }
.cita-hora:hover span{ border-color:var(--oro); }
.cita-hora input:checked + span{ background:var(--tinta); border-color:var(--tinta); color:var(--sobre-tinta); }
.cita-hora input:focus-visible + span{ outline:2px solid var(--oro); outline-offset:2px; }
.cita-hora input:disabled + span{ opacity:.35; cursor:not-allowed; text-decoration:line-through; border-style:dashed; }
.cita-hora.ocupada{ cursor:not-allowed; }
.cita-horas.con-error .cita-hora span{ border-color:#e36a6a; }
.cita-nota{ display:block; margin-top:10px; font-size:var(--fs-xs); color:var(--gris); min-height:1em; }
.cita-enviar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:20px; border-top:1px solid var(--linea); }
.cita-resumen{ margin:0; display:flex; flex-direction:column; }
.cita-resumen span{ font-size:var(--fs-label); font-weight:600; letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--gris); }
.cita-resumen b{ font-family:var(--serif); font-size:22px; font-weight:500; color:var(--tinta); text-transform:capitalize; }
.cita-enviar .btn-oro{ border:0; cursor:pointer; padding:15px 30px; }
.cita-enviar .btn-oro:disabled{ opacity:.6; cursor:wait; }
.cita-info{ position:sticky; top:110px; padding:clamp(22px, 3vw, 32px); border-radius:var(--radio-lg); background:var(--negro); color:#fff;
  background-image:radial-gradient(circle at 100% 0%, rgba(175,155,30,.3), rgba(175,155,30,0) 60%); }
.cita-info h2{ margin:0 0 14px; font-size:var(--fs-h2); color:#fff; }
.cita-info ul{ margin:0; padding:0; list-style:none; display:grid; gap:12px; }
.cita-info li{ position:relative; padding-left:22px; color:rgba(255,255,255,.8); line-height:1.55; font-size:var(--fs-sm); }
.cita-info li::before{ content:'✦'; position:absolute; left:0; color:var(--oro); }
.cita-donde{ margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.15); }
.cita-donde .t-eyebrow{ color:var(--oro); }
.cita-donde p{ margin:6px 0 0; color:#fff; }
.cita-donde a{ color:#fff; }
.cita-ok{ grid-column:1 / -1; max-width:620px; margin:0 auto; padding:clamp(28px, 4vw, 48px); text-align:center; border:1px solid var(--linea);
  border-radius:var(--radio-lg); background:var(--superficie); box-shadow:var(--sombra); }
.cita-ok svg{ width:72px; height:72px; fill:none; stroke:var(--verde); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.cita-ok h2{ margin:14px 0 6px; font-size:var(--fs-h2); }
.cita-ok-cuando{ font-family:var(--serif); font-size:24px; color:var(--tinta); text-transform:capitalize; margin:0 0 10px; }
.cita-ok p{ color:var(--texto); }
.cita-ok-acciones{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:22px; }
@media (max-width:900px){ .cita-grid{ grid-template-columns:1fr; } .cita-info{ position:static; } }
@media (max-width:560px){ .cita-campos{ grid-template-columns:1fr; } .cita-campo input[type=date]{ max-width:none; } .cita-enviar .btn-oro{ width:100%; } }

/* cita: modalidad (presencial, Zoom, Teams, Meet, WhatsApp, teléfono, otro) */
.cita-modalidades{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:10px; }
.cita-modalidad{ position:relative; cursor:pointer; }
.cita-modalidad input{ position:absolute; opacity:0; pointer-events:none; }
.cita-modalidad > span{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; height:100%; padding:12px 14px; border:1px solid var(--linea-2);
  border-radius:var(--radio-sm); background:var(--superficie); transition:border-color .2s, background .2s, box-shadow .2s; }
/* logo en una sola tinta dentro de un círculo fino (colores de la página; dorado al elegir) */
.cita-modalidad i{ --icono-fondo:var(--superficie); display:grid; place-items:center; width:42px; height:42px; margin-bottom:8px; padding:9px;
  border:1px solid var(--linea-2); border-radius:50%; background:var(--icono-fondo); color:var(--tinta); font-style:normal;
  transition:background .25s, color .25s, border-color .25s; }
.cita-modalidad i svg{ display:block; width:100%; height:100%; }
.cita-modalidad:hover i{ border-color:var(--oro); color:var(--oro-osc); }
.cita-modalidad input:checked + span i{ --icono-fondo:var(--tinta); background:var(--icono-fondo); border-color:var(--tinta); color:var(--oro); }
.cita-modalidad b{ font-size:var(--fs-sm); color:var(--tinta); }
.cita-modalidad small{ font-size:var(--fs-xs); color:var(--gris); }
.cita-modalidad:hover > span{ border-color:var(--oro); }
.cita-modalidad input:checked + span{ border-color:var(--tinta); box-shadow:0 0 0 1px var(--tinta) inset; background:var(--oro-suave); }
.cita-modalidad input:focus-visible + span{ outline:2px solid var(--oro); outline-offset:2px; }
.cita-modalidades.con-error .cita-modalidad > span{ border-color:#e36a6a; }
.cita-mod-nota{ margin:12px 0 0; padding:10px 14px; border-radius:var(--radio-sm); background:var(--oro-suave); color:var(--oro-osc); font-size:var(--fs-xs); font-weight:600; }
.cita-mod-extra{ margin-top:12px; }
.cita-mod-extra [hidden], .cita-mod-nota[hidden]{ display:none !important; }   /* «hidden» gana a display:flex de .cita-campo */
.cita-mod-extra:not(:has(label:not([hidden]))){ margin-top:0; }
.cita-campo textarea{ width:100%; padding:12px 14px; border:1px solid var(--linea-2); border-radius:var(--radio-sm); background:var(--superficie); color:var(--tinta);
  font:inherit; font-size:15px; resize:vertical; transition:border-color .2s, box-shadow .2s; }
.cita-campo textarea:focus{ outline:none; border-color:var(--oro); box-shadow:0 0 0 3px rgba(175,155,30,.18); }
.cita-campo > span em{ font-style:normal; font-weight:400; text-transform:none; letter-spacing:0; }

/* cita: selector de país (mismo aspecto que los campos) y campos con error */
.cita-campo select{ width:100%; padding:13px 14px; border:1px solid var(--linea-2); border-radius:var(--radio-sm); background:var(--superficie); color:var(--tinta);
  font:inherit; font-size:15px; transition:border-color .2s, box-shadow .2s; }
.cita-campo select:focus{ outline:none; border-color:var(--oro); box-shadow:0 0 0 3px rgba(175,155,30,.18); }
.con-error select, .con-error textarea{ border-color:#e36a6a; }
.cita-campo[aria-invalid="true"], .cita-campo input[aria-invalid="true"]{ border-color:#e36a6a; }

/* =========================
   COLECCIÓN EXTRAORDINARIA (coleccion.php — mercadería de proveedores)
========================= */
.merc-bloque{ padding-top:clamp(36px, 5vw, 64px); }
.merc-filtros{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0 0 clamp(28px, 4vw, 44px); }
.merc-filtros a{
  display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border:1px solid var(--linea); border-radius:999px;
  font-size:var(--fs-label); font-weight:600; letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--tinta); text-decoration:none; transition:.25s;
}
.merc-filtros a small{ font-size:11px; color:var(--gris); letter-spacing:0; }
.merc-filtros a:hover{ border-color:var(--oro); }
.merc-filtros a.activo{ background:var(--negro); border-color:var(--negro); color:var(--oro); }
.merc-filtros a.activo small{ color:rgba(255,255,255,.6); }
.merc-pieza{ text-decoration:none; color:inherit; cursor:pointer; }
.merc-pieza .pieza-info h3{ font-family:var(--serif, inherit); }
.merc-agotado{ margin-left:auto; font-style:normal; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gris); }
.merc-vacio{ max-width:560px; margin:0 auto; text-align:center; padding:clamp(24px, 4vw, 48px) 0; }
.merc-vacio h2{ font-size:var(--fs-seccion, 32px); font-weight:400; margin:0 0 12px; }
.merc-vacio p{ color:var(--gris); margin:0 0 24px; }
.merc-vacio-btns, .merc-ficha-btns{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

/* ficha (dialog) */
.merc-ficha{
  width:min(960px, calc(100vw - 32px)); max-height:calc(100svh - 32px); padding:0; border:0; border-radius:var(--radio-lg, 18px);
  background:var(--superficie, #fff); color:var(--tinta); box-shadow:0 30px 80px rgba(0,0,0,.35); overflow:auto;
}
.merc-ficha::backdrop{ background:rgba(11,11,12,.72); backdrop-filter:blur(3px); }
.merc-ficha[open]{ animation:mercAbrir .35s ease-out; }
@keyframes mercAbrir{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.merc-cerrar{
  position:absolute; top:12px; right:12px; z-index:1; width:40px; height:40px; border-radius:50%; border:1px solid var(--linea);
  background:var(--superficie, #fff); color:var(--tinta); font-size:22px; line-height:1; cursor:pointer;
}
.merc-ficha-in{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
.merc-ficha-img{ margin:0; background:#f7f5ef; display:grid; place-items:center; aspect-ratio:1; }
.merc-ficha-img img{ width:100%; height:100%; object-fit:contain; }
.merc-ficha-texto{ padding:clamp(24px, 4vw, 44px); display:flex; flex-direction:column; gap:12px; }
.merc-ficha-texto h2{ font-size:clamp(26px, 2vw + 16px, 38px); font-weight:400; line-height:1.1; margin:0; }
.merc-ficha-precio{ margin:0; font-size:22px; }
.merc-ficha-precio b{ color:var(--verde); font-weight:600; }
.merc-ficha-precio s{ color:var(--gris); font-size:15px; margin-right:6px; }
.merc-ficha-desc{ margin:0; color:var(--texto, var(--tinta)); line-height:1.65; white-space:pre-line; }
.merc-ficha-datos{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px 18px; margin:4px 0 0; padding:14px 0; border-block:1px solid var(--linea); }
.merc-ficha-datos:empty{ display:none; }
.merc-ficha-datos dt{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gris); }
.merc-ficha-datos dd{ margin:2px 0 0; font-size:14px; }
.merc-ficha-disp{ margin:0; font-size:13px; color:var(--gris); }
.merc-ficha-btns{ justify-content:flex-start; margin-top:6px; }
.merc-ficha-ref{ color:var(--gris); font-size:11px; letter-spacing:.06em; }
@media (max-width:720px){
  .merc-ficha-in{ grid-template-columns:1fr; }
  .merc-ficha-img{ aspect-ratio:4/3; }
}
/* banner compacto: título y texto en una franja, las piezas quedan a la vista */
.merc-codigo{ display:block; margin-bottom:4px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--gris); }

/* compra directa desde la ficha */
.merc-comprar{ display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-top:6px; }
.merc-comprar[hidden]{ display:none; }
.merc-cant{ display:flex; flex-direction:column; gap:4px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gris); }
.merc-cant select{ height:48px; min-width:76px; padding:0 12px; border:1px solid var(--linea); border-radius:12px; background:var(--superficie, #fff); color:var(--tinta); font:inherit; font-size:15px; }
.merc-comprar .btn-oro{ flex:1; min-width:180px; justify-content:center; border:0; cursor:pointer; }
.merc-sin-stock{ margin:0; padding:10px 14px; border-radius:12px; background:#f6f5f1; color:var(--gris); font-size:13px; }
.merc-aviso{ max-width:640px; margin:0 auto 24px; padding:12px 16px; border-radius:12px; background:#fff8e6; color:#8a5a00; text-align:center; }
.merc-ficha-btns .btn-linea{ flex:1; justify-content:center; }

.merc-ficha-btns[hidden]{ display:none; }

/* cita.php · «Describe qué es lo que buscas» */
.cita-busca{ display:flex; flex-direction:column; gap:8px; }
.cita-busca-ideas{ display:flex; flex-wrap:wrap; gap:6px; }
.cita-idea{ padding:7px 13px; border:1px solid var(--linea); border-radius:999px; background:var(--superficie, #fff); color:var(--tinta); font:inherit; font-size:13px; cursor:pointer; transition:.2s; }
.cita-idea:hover{ border-color:var(--oro); }
.cita-idea[aria-pressed="true"]{ background:var(--negro); border-color:var(--negro); color:var(--oro); }
.cita-idea[aria-pressed="true"]::before{ content:'✓ '; }
.cita-idea:focus-visible{ outline:2px solid var(--oro); outline-offset:2px; }
.cita-busca > label > span{ font-size:var(--fs-label); font-weight:600; letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--gris); }
.cita-busca textarea{ width:100%; box-sizing:border-box; }

/* cita.php · aviso junto al botón cuando falta algo */
.cita-aviso-envio{ margin:12px 0 0; }
.cita-horas.con-error + .cita-nota{ color:#b42318; font-weight:600; }

/* cita.php · regalo de bienvenida (anillo medidor) */
.cita-regalo{ display:flex; align-items:center; gap:18px; margin:0 0 26px; padding:18px 22px; border-radius:18px; background:radial-gradient(ellipse at 0% 0%, rgba(175,155,30,.28), transparent 60%), #0B0B0C; color:#fff; box-shadow:0 10px 30px rgba(11,11,12,.12); }
.cita-regalo-ico{ flex:none; width:52px; height:52px; padding:10px; border-radius:50%; border:1px solid rgba(175,155,30,.55); color:#AF9B1E; }
.cita-regalo-eyebrow{ display:block; font-size:10.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:#AF9B1E; }
.cita-regalo b{ display:block; margin-top:4px; font-family:var(--serif, 'Cormorant Garamond', Georgia, serif); font-size:clamp(21px, 1.4vw + 14px, 26px); font-weight:500; line-height:1.15; }
.cita-regalo p{ margin:6px 0 0; font-size:var(--fs-sm, 14px); line-height:1.6; color:rgba(255,255,255,.78); }
.cita-regalo p b{ display:inline; margin:0; font:inherit; font-weight:600; color:#d6c25a; }
@media (max-width:560px){ .cita-regalo{ flex-direction:column; align-items:flex-start; gap:12px; padding:18px; } }

/* inicio · «Agenda una cita» + «Chatea con nosotros» (WhatsApp) lado a lado; en teléfono, uno bajo el otro */
.hero-botones{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.hero-chat svg{ stroke:none; }
.hero-chat .wa-relleno{ fill:currentColor; }
.hero-chat:hover, .hero-chat:focus-visible{ background:#25D366; border-color:#25D366; color:#0b2e17; }
@media (max-width:900px){ .con-hero .hero-acciones{ flex-wrap:wrap; } .hero-botones{ flex-direction:column; align-items:stretch; gap:10px; } .hero-botones .hero-cita{ justify-content:center; } }

/* =========================================================
   CABECERA FINA (tienda y citas): antetítulo · título · botón, sobre negro
   ========================================================= */
/* franja fina: deja ver las joyas desde el primer vistazo */
.tienda-cabecera{
  padding:14px 0; margin-bottom:clamp(20px, 2.4vw, 32px); color:#fff;
  background:radial-gradient(ellipse at 50% 0%, rgba(175,155,30,.22), rgba(175,155,30,0) 70%), var(--negro);
}
.tienda-cabecera .contenedor{ display:flex; align-items:baseline; justify-content:center; gap:14px; flex-wrap:wrap; }
.tienda-cabecera .t-eyebrow{ color:var(--crema); }
.tienda-cabecera .t-eyebrow::after{ content:'·'; margin-left:14px; color:var(--oro); }
.tienda-cabecera h1{ margin:0; font-size:clamp(22px, .8vw + 16px, 30px); font-weight:400; line-height:1.1; color:#fff; }
.tienda-cabecera h1 em{ color:var(--oro); font-style:italic; }
.tienda-cita{
  align-self:center; display:inline-flex; align-items:center; gap:8px; margin-left:6px;
  padding:8px 16px; border:1px solid var(--oro); border-radius:999px; color:var(--oro);
  font-size:var(--fs-label); font-weight:600; letter-spacing:var(--ls-label); text-transform:uppercase; text-decoration:none; transition:.2s;
}
.tienda-cita svg{ width:16px; height:16px; }
.tienda-cita:hover, .tienda-cita:focus-visible{ background:var(--oro); color:var(--negro); }
@media (max-width:560px){
  .tienda-cabecera{ padding:10px 0; }
  .tienda-cabecera .t-eyebrow{ display:none; }   /* en teléfono basta el título */
}

.cita-cabecera{ margin-bottom:0; }   /* el bloque del formulario ya trae su aire arriba */
.merc-cabecera{ margin-bottom:0; }   /* el bloque de piezas ya trae su aire arriba */
.merc-cabecera + .merc-bloque{ padding-top:clamp(24px, 3vw, 40px); }