/* Joyería Ferraz — sistema visual base.
   CSS plano y servido directo: todavía no hay build. Cuando entre Tailwind
   con Vite, estas variables pasan tal cual al tema. */

/* La web va en negro SIEMPRE, no según el tema del navegador.
   Es una decisión de identidad, no una preferencia del sistema: el oro y las
   piedras se ven como en una vitrina, sobre fondo oscuro y con luz encima.
   Por eso no hay bloque prefers-color-scheme: hay un solo mundo visual y
   todos los colores se pintan de forma explícita.

   --paper ya no es «papel blanco» sino el fondo de la página, y --ink el
   color del texto. Los nombres se mantienen para no tocar las 900 reglas que
   los usan. */
:root{
  --paper:#0C0E0D;            /* fondo de la página, casi negro con sesgo verde */
  --paper-2:#141817;          /* superficies elevadas: tarjetas, tablas, pie */
  --paper-3:#1C2120;          /* cabeceras de tabla y chips */
  --ink:#F0F2ED;              /* texto principal */
  --ink-2:#B7BDB7;            /* texto secundario */
  --ink-3:#868D87;            /* apoyos, unidades, metadatos */
  --rule:#252A28; --rule-strong:#3A403D;
  --brass:#C99B4E; --brass-bright:#DCB268; --brass-wash:#221B0F;
  --on-brass:#17120B;          /* texto encima del laton: nunca blanco, no contrasta */
  --patina:#6FB3A6; --patina-wash:#10201D;
  --oxide:#DE8F88; --oxide-wash:#241413;
  --maxw:min(1200px, 100% - 2.5rem);

  /* Para que los controles de formulario y las barras de scroll del
     navegador se pinten oscuros y no aparezcan cajas blancas. */
  color-scheme:dark;
}

*{box-sizing:border-box}
/* El atributo hidden debe ganar a cualquier display propio: sin esto, un
   display:flex en la regla del componente lo deja visible igualmente. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
/* La banda del teléfono sangra a todo el ancho con 100vw, y 100vw incluye la
   barra de scroll: eso dejaba ~8 px de desplazamiento horizontal en TODAS las
   anchuras de escritorio. El sobrante se recorta en un contenedor propio
   alrededor de <main> (no en body: ahí el recorte se propaga al viewport y el
   navegador lo ignora). Va con clip y no con hidden para no convertirlo en
   contenedor de scroll. */
.bleed-host{overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:Archivo,"Segoe UI",system-ui,sans-serif;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;text-wrap:balance;font-family:"Bodoni Moda",Georgia,serif;font-weight:400}
p{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--brass);text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--brass-bright);outline-offset:2px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}

.wrap{width:var(--maxw);margin-inline:auto}

/* cabecera */
/* Aquí solo vive el comportamiento de la barra. El logotipo, el menú y el
   acordeón están más abajo, en su propio bloque: lo que había aquí eran
   reglas duplicadas de cuando el logotipo era texto y el menú tenía
   desplegables, y competían con las nuevas. */
.site-header{border-bottom:1px solid var(--rule);background:var(--paper);
  position:sticky;top:0;z-index:40}

/* migas */
.breadcrumb{font-size:.78rem;color:var(--ink-3);padding:1.1rem 0 0}
.breadcrumb a{color:var(--ink-3);text-decoration:none}
.breadcrumb a:hover{color:var(--brass)}
.breadcrumb span{margin:0 .4rem;opacity:.5}

/* cabecera de sección */
.page-head{padding:1.6rem 0 2rem;border-bottom:1px solid var(--rule);margin-bottom:2rem}
.page-head h1{font-size:clamp(1.9rem,4.5vw,3rem);line-height:1.08;letter-spacing:-.015em}
.page-head .sub{margin-top:.7rem;color:var(--ink-2);max-width:62ch}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass);margin-bottom:.7rem}

/* aviso de que el catálogo es bajo pedido */
.notice{border-left:3px solid var(--brass);background:var(--brass-wash);
  padding:.85rem 1.1rem;margin:1.4rem 0;font-size:.9rem;color:var(--ink-2);max-width:78ch}
.notice strong{color:var(--ink)}

/* rejilla de producto */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1.6rem 1.2rem;
  margin:2rem 0}
.card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.card .thumb{aspect-ratio:1;background:var(--paper-2);border:1px solid var(--rule);
  display:grid;place-items:center;overflow:hidden}
/* Las fotos del proveedor vienen recortadas sobre blanco. Sobre fondo oscuro no
   se pueden multiplicar (la joya saldria negra sobre negro): se pintan tal cual,
   y el recorte claro hace de caja de luz dentro de la tarjeta. */
.card .thumb img{width:100%;height:100%;object-fit:contain}
.card .thumb .noimg{font-size:.72rem;color:var(--ink-3);font-family:"IBM Plex Mono",monospace}
.card h3{font-family:Archivo,sans-serif;font-size:.88rem;font-weight:500;line-height:1.35;
  margin-top:.7rem;color:var(--ink)}
.card .ref{font-family:"IBM Plex Mono",monospace;font-size:.68rem;color:var(--ink-3);
  letter-spacing:.04em;margin-top:.25rem}
.card .price{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:1rem;font-weight:600;color:var(--brass);margin-top:.4rem}
.card:hover h3{color:var(--brass)}

/* categorías */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);margin:2rem 0}
.cats a{background:var(--paper-2);padding:1.1rem 1.2rem;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:.25rem}
.cats a:hover{background:var(--brass-wash)}
.cats .n{font-size:1rem;font-weight:600}
.cats .c{font-family:"IBM Plex Mono",monospace;font-size:.74rem;color:var(--ink-3)}

/* ficha */
.product{display:grid;grid-template-columns:minmax(280px,1fr) minmax(300px,1fr);
  gap:2.5rem;align-items:start;margin:2rem 0 3rem}
@media (max-width:820px){.product{grid-template-columns:minmax(0,1fr);gap:1.6rem}}
.gallery .main{aspect-ratio:1;border:1px solid var(--rule);background:var(--paper-2);
  display:grid;place-items:center;overflow:hidden}
.gallery .main img{width:100%;height:100%;object-fit:contain}
.gallery .thumbs{display:flex;gap:.5rem;margin-top:.6rem;flex-wrap:wrap}
.gallery .thumbs img{width:64px;height:64px;object-fit:contain;border:1px solid var(--rule);
  background:var(--paper-2);cursor:pointer}
.gallery .thumbs img[aria-current="true"]{border-color:var(--brass)}

.product h1{font-size:clamp(1.4rem,3vw,2rem);line-height:1.15;letter-spacing:-.01em}
.product .sku{font-family:"IBM Plex Mono",monospace;font-size:.78rem;color:var(--ink-3);
  margin-top:.6rem;letter-spacing:.04em}
.product .price{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  font-size:2rem;font-weight:600;color:var(--brass);margin:1.2rem 0 .3rem}
.product .price-note{font-size:.8rem;color:var(--ink-3)}

.specs{border-top:1px solid var(--rule);margin-top:1.6rem;width:100%;border-collapse:collapse}
.specs th,.specs td{text-align:left;padding:.5rem 0;border-bottom:1px solid var(--rule);
  font-size:.87rem;vertical-align:top}
.specs th{font-weight:500;color:var(--ink-3);width:40%;font-size:.8rem}
.specs td{font-family:"IBM Plex Mono",monospace}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 1.4rem;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  font-family:Archivo,sans-serif;font-size:.9rem;font-weight:600;letter-spacing:.02em;
  text-decoration:none;cursor:pointer;border-radius:2px}
.btn:hover{background:var(--brass);border-color:var(--brass);color:var(--on-brass)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-strong)}
.btn-ghost:hover{background:var(--paper-2);color:var(--brass);border-color:var(--brass)}
.btn-block{width:100%}

/* formulario me interesa */
.interest{border:1px solid var(--rule-strong);background:var(--paper-2);padding:1.3rem;
  margin-top:1.8rem}
.interest h2{font-family:Archivo,sans-serif;font-size:1rem;font-weight:700}
.interest .lead{font-size:.87rem;color:var(--ink-2);margin-top:.35rem}
/* La referencia, visible antes de enviar: es lo que identifica la pieza en el
   correo que recibe la tienda, y quien pregunta por varias necesita ver cuál
   está pidiendo. */
.interest-ref{margin-top:.7rem;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass);border-top:1px solid var(--rule);padding-top:.7rem}
.field{margin-top:1rem}
.field label{display:block;font-size:.78rem;font-weight:600;letter-spacing:.03em;
  margin-bottom:.3rem}
.field label .why{font-weight:400;color:var(--ink-3);letter-spacing:0}
.field input,.field textarea{width:100%;padding:.6rem .7rem;border:1px solid var(--rule-strong);
  background:var(--paper);color:var(--ink);font-family:inherit;font-size:.92rem;border-radius:2px}
.field textarea{min-height:80px;resize:vertical}
.field .err{color:var(--oxide);font-size:.79rem;margin-top:.3rem}
.check{display:flex;gap:.6rem;align-items:flex-start;margin-top:1rem;font-size:.81rem;
  color:var(--ink-2)}
.check input{margin-top:.25rem;flex:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* paginación */
.pager{display:flex;gap:.4rem;flex-wrap:wrap;margin:2rem 0;font-family:"IBM Plex Mono",monospace;
  font-size:.82rem}
.pager a,.pager span{padding:.45rem .7rem;border:1px solid var(--rule);text-decoration:none;
  color:var(--ink-2)}
.pager a:hover{border-color:var(--brass);color:var(--brass)}
.pager [aria-current]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* confirmación */
.thanks{max-width:60ch;margin:4rem auto;text-align:center}
.thanks .tick{width:52px;height:52px;border-radius:50%;background:var(--patina-wash);
  color:var(--patina);display:grid;place-items:center;margin:0 auto 1.4rem;font-size:1.5rem}
.thanks h1{font-size:2rem}
.thanks p{margin-top:.9rem;color:var(--ink-2)}
.thanks .ref{font-family:"IBM Plex Mono",monospace;font-size:.85rem;color:var(--ink-3);
  margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--rule)}

/* pie */
.site-footer{border-top:1px solid var(--rule);margin-top:4rem;padding:2rem 0 3rem;
  font-size:.84rem;color:var(--ink-3)}
.site-footer .wrap{display:flex;gap:1.5rem;justify-content:space-between;flex-wrap:wrap}
.site-footer a{color:var(--ink-3)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* insignia de variantes en la tarjeta del listado */
.card .thumb{position:relative}
.card .badge{position:absolute;left:.5rem;bottom:.5rem;
  background:var(--paper);color:var(--ink-2);border:1px solid var(--rule-strong);
  font-family:"IBM Plex Mono",monospace;font-size:.63rem;letter-spacing:.04em;
  padding:.2rem .4rem;border-radius:2px;line-height:1}

/* bloque de otras referencias en la ficha */
.variants{border:1px solid var(--rule);background:var(--paper-2);padding:1rem 1.1rem;
  margin-top:1.6rem}
.variants h2{font-family:Archivo,sans-serif;font-size:.9rem;font-weight:700}
.variants p{font-size:.84rem;color:var(--ink-2);margin-top:.3rem}
.variants ul{list-style:none;padding:0;margin:.8rem 0 0;display:flex;flex-wrap:wrap;gap:.4rem}
.variants li a{display:inline-block;padding:.35rem .6rem;border:1px solid var(--rule-strong);
  background:var(--paper);font-family:"IBM Plex Mono",monospace;font-size:.75rem;
  text-decoration:none;color:var(--ink-2);border-radius:2px}
.variants li a:hover{border-color:var(--brass);color:var(--brass)}
.variants li a[aria-current="page"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.variants .more{font-size:.78rem;color:var(--ink-3);align-self:center;padding-left:.3rem}

/* ---------------------------------------------------------------- home */
.hero{padding:3.2rem 0 2.4rem;border-bottom:1px solid var(--rule)}
.hero h1{font-size:clamp(2.2rem,6vw,3.8rem);line-height:1.03;letter-spacing:-.02em;max-width:14ch}
.hero-sub{margin-top:1.1rem;font-size:1.08rem;color:var(--ink-2);max-width:56ch}
.cta-row{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.8rem}

.prices{padding:2.6rem 0;border-bottom:1px solid var(--rule)}
.prices-head{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.prices h2,.calc-block h2,.steps-block h2,.closing h2{font-size:clamp(1.6rem,3.4vw,2.2rem);letter-spacing:-.01em}
.updated{font-size:.78rem;color:var(--ink-3);margin-left:auto}
.prices-intro{margin-top:.7rem;color:var(--ink-2);max-width:62ch}
.prices-foot{margin-top:.8rem;font-size:.83rem;color:var(--ink-3);max-width:70ch}

.tscroll{overflow-x:auto;margin:1.4rem 0 0;border:1px solid var(--rule)}
.price-table{border-collapse:collapse;width:100%;min-width:520px;background:var(--paper-2)}
.price-table th,.price-table td{padding:.75rem 1rem;border-bottom:1px solid var(--rule);text-align:left}
.price-table thead th{font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);background:var(--paper-3);white-space:nowrap}
.price-table tbody tr:last-child th,.price-table tbody tr:last-child td{border-bottom:0}
.price-table tbody th{font-family:"Bodoni Moda",Georgia,serif;font-size:1.15rem;font-weight:600;width:1%;white-space:nowrap}
.price-table .num{text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.price-table .big{font-size:1.25rem;font-weight:600;color:var(--brass)}
.price-table .muted{color:var(--ink-3);font-size:.86rem}

.calc-block{padding:2.6rem 0;border-bottom:1px solid var(--rule)}
.calc-intro{margin-top:.6rem;color:var(--ink-2);max-width:60ch}
.calc-form{display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-end;margin-top:1.4rem}
.calc-field{display:flex;flex-direction:column;gap:.35rem}
.calc-field label{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.calc-field select,.calc-field input{padding:.7rem .8rem;border:1px solid var(--rule-strong);
  background:var(--paper);color:var(--ink);font-family:"IBM Plex Mono",monospace;font-size:1rem;
  border-radius:2px;min-width:9rem}
.calc-result{display:flex;flex-direction:column;gap:.2rem;margin-top:1.6rem;padding:1.2rem 1.4rem;
  border:1px solid var(--brass);background:var(--brass-wash)}
.calc-label{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass)}
.calc-total{font-size:clamp(2rem,5vw,2.8rem);font-weight:600;color:var(--brass);line-height:1.1;
  font-variant-numeric:tabular-nums}
.calc-detail{font-size:.85rem;color:var(--ink-2)}
.calc-note{margin-top:1rem;font-size:.83rem;color:var(--ink-3);max-width:70ch}

.steps-block{padding:2.6rem 0;border-bottom:1px solid var(--rule)}
.steps-block ol.steps{counter-reset:s;list-style:none;padding:0;margin:1.4rem 0 0;max-width:72ch}
.steps-block ol.steps li{counter-increment:s;position:relative;padding-left:2.6rem;padding-bottom:1.3rem;
  border-left:1px solid var(--rule);margin-left:.7rem}
.steps-block ol.steps li:last-child{border-left-color:transparent;padding-bottom:0}
.steps-block ol.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:-.78rem;top:0;
  width:1.55rem;height:1.55rem;background:var(--paper);border:1px solid var(--rule-strong);color:var(--brass);
  font-family:"IBM Plex Mono",monospace;font-size:.64rem;display:grid;place-items:center;border-radius:50%;font-weight:600}
.steps-block ol.steps li b{display:block;font-size:1rem}
.steps-block ol.steps li span{font-size:.9rem;color:var(--ink-2)}


/* ------------------------------------------------- preguntas frecuentes */
.faq-block{padding:2.6rem 0;border-bottom:1px solid var(--rule)}
.faq-list{margin-top:1.4rem;border-top:1px solid var(--rule);max-width:76ch}
.faq-list details{border-bottom:1px solid var(--rule)}
.faq-list summary{padding:.95rem 0;cursor:pointer;font-weight:600;font-size:1rem;
  list-style:none;display:flex;align-items:flex-start;gap:.7rem}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::before{content:"+";color:var(--brass);font-family:"IBM Plex Mono",monospace;
  font-weight:400;flex:none;line-height:1.5}
.faq-list details[open] summary::before{content:"\2212"}
.faq-list summary:hover{color:var(--brass)}
.faq-list details p{padding:0 0 1.1rem 1.6rem;color:var(--ink-2);font-size:.94rem;max-width:68ch}

/* -------------------------------------------------------------- ubicación */
.place-block{padding:2.6rem 0;border-bottom:1px solid var(--rule)}
.place-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2rem;margin-top:1.4rem}
.nap-block{font-style:normal;line-height:1.7}
.nap-block strong{font-size:1.05rem}
.nap-block .muted{color:var(--ink-3);font-size:.88rem}
.nap-block .phones{margin-top:.9rem;font-family:"IBM Plex Mono",monospace;font-size:1rem}
.nap-block .hours{margin-top:.7rem;color:var(--ink-2);font-size:.92rem}
.nap-block .btn{margin-top:1.1rem}
.place-block h3{font-family:Archivo,sans-serif;font-size:.78rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:.5rem}
.place-block h3:not(:first-child){margin-top:1.6rem}
ul.transport{list-style:none;padding:0;margin:0}
ul.transport li{padding-left:1.05rem;position:relative;font-size:.92rem;color:var(--ink-2);margin-top:.35rem}
ul.transport li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  background:var(--brass);border-radius:50%}
.areas{font-size:.92rem;color:var(--ink-2)}

/* ------------------------------------------------------------------- pie */
.site-footer .nap{font-style:normal;line-height:1.7}
.site-footer .nap strong{color:var(--ink)}

/* ------------------------------------------------------------- landings */
.landing-body{padding:1rem 0 0}
.landing-body section{padding:1.6rem 0;border-bottom:1px solid var(--rule)}
.landing-body h2{font-size:clamp(1.3rem,2.6vw,1.7rem);letter-spacing:-.005em}
.landing-body p{margin-top:.7rem;color:var(--ink-2);max-width:72ch;font-size:1rem}

.related-block{padding:2.2rem 0}
.related-links{list-style:none;padding:0;margin:1rem 0 0;display:flex;flex-wrap:wrap;gap:.6rem}
.related-links a{display:inline-block;padding:.55rem .9rem;border:1px solid var(--rule-strong);
  text-decoration:none;color:var(--ink-2);font-size:.88rem;border-radius:2px;background:var(--paper-2)}
.related-links a:hover{border-color:var(--brass);color:var(--brass)}

/* ---------------------------------------------------- formulario tasación */
.form-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(240px,1fr);gap:2.5rem;
  align-items:start;margin-bottom:3rem}
@media (max-width:860px){.form-layout{grid-template-columns:minmax(0,1fr);gap:2rem}}
.valuation-form fieldset{border:0;padding:0;margin:0 0 2rem}
.valuation-form legend{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;padding:0;margin-bottom:.9rem}
.field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem}
.valuation-form .field input,.valuation-form .field select,.valuation-form .field textarea{
  width:100%;padding:.65rem .75rem;border:1px solid var(--rule-strong);background:var(--paper);
  color:var(--ink);font-family:inherit;font-size:.95rem;border-radius:2px}
.valuation-form .field input[type=file]{padding:.5rem;font-size:.85rem}
.hint{font-size:.8rem;color:var(--ink-3);margin-top:.5rem;max-width:64ch}
.radio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.5rem;
  margin-bottom:1.2rem}
.radio-card{position:relative;display:block}
.radio-card input{position:absolute;opacity:0;width:0;height:0}
.radio-card span{display:block;padding:.6rem .5rem;border:1px solid var(--rule-strong);
  text-align:center;font-size:.88rem;border-radius:2px;cursor:pointer;background:var(--paper-2)}
.radio-card input:checked+span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.radio-card input:focus-visible+span{outline:2px solid var(--brass-bright);outline-offset:2px}
.notice.warn{border-left-color:var(--oxide);background:var(--oxide-wash)}
.notice.warn ul{margin:.4rem 0 0;padding-left:1.1rem;font-size:.88rem}

.form-aside{border:1px solid var(--rule);background:var(--paper-2);padding:1.2rem 1.3rem}
.form-aside h2{font-family:Archivo,sans-serif;font-size:.8rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600}
.form-aside h2:not(:first-child){margin-top:1.6rem}
.form-aside p{margin-top:.5rem;font-size:.92rem;color:var(--ink-2)}
.form-aside .btn{margin-top:1rem;width:100%}
.mini-prices{width:100%;border-collapse:collapse;margin-top:.6rem}
.mini-prices th,.mini-prices td{padding:.35rem 0;border-bottom:1px solid var(--rule);font-size:.9rem}
.mini-prices th{text-align:left;font-family:"Bodoni Moda",Georgia,serif;font-weight:600}
.mini-prices td{text-align:right;font-family:"IBM Plex Mono",monospace;color:var(--brass);
  font-variant-numeric:tabular-nums}

/* --------------------------------------------------- grafico de velas */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);
  gap:3rem;align-items:center}
@media (max-width:900px){.hero{grid-template-columns:minmax(0,1fr);gap:2rem}}
.hero-text h1{max-width:14ch}

.hero-chart{border:1px solid var(--rule);background:var(--paper-2);padding:1rem 1.1rem 1.1rem}
.chart-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.chart-label{font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.chart-price{font-size:1.7rem;font-weight:600;line-height:1.15;margin-top:.15rem;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.chart-price span{font-size:.85rem;color:var(--ink-3);font-weight:400}
.chart-change{font-size:.85rem;font-weight:600;font-variant-numeric:tabular-nums;
  padding:.2rem .45rem;border-radius:2px}
.chart-change.up{color:var(--patina);background:var(--patina-wash)}
.chart-change.down{color:var(--oxide);background:var(--oxide-wash)}

.chart-canvas{margin-top:.8rem;height:200px}
.candles{width:100%;height:100%;display:block}
.candles-grid{stroke:var(--rule);stroke-width:1;shape-rendering:crispEdges}
.candles-axis{fill:var(--ink-3);font-family:"IBM Plex Mono",monospace;font-size:9px}
.candle-wick{stroke-width:1.2}
.candle-wick.candle-up,.candle-body.candle-up{stroke:var(--patina)}
.candle-wick.candle-down,.candle-body.candle-down{stroke:var(--oxide)}
.candle-body{stroke-width:1}
.candle-body.candle-up{fill:var(--patina)}
.candle-body.candle-down{fill:var(--oxide)}
.candles-last{stroke:var(--brass);stroke-width:1;stroke-dasharray:3 3}
.candles-last-label{fill:var(--brass);font-family:"IBM Plex Mono",monospace;font-size:9.5px;
  font-weight:600}
.candles-empty{fill:var(--ink-3);font-family:"IBM Plex Mono",monospace;font-size:12px}

.chart-foot{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  margin-top:.7rem;flex-wrap:wrap}
.chart-intervals{display:flex;gap:.25rem}
.chart-intervals button{font-family:"IBM Plex Mono",monospace;font-size:.68rem;
  padding:.28rem .5rem;border:1px solid var(--rule);background:transparent;color:var(--ink-3);
  cursor:pointer;border-radius:2px;line-height:1}
.chart-intervals button:hover{border-color:var(--brass);color:var(--brass)}
.chart-intervals button.is-active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chart-note{font-size:.68rem;color:var(--ink-3)}
.chart-disclaimer{font-size:.72rem;color:var(--ink-3);margin-top:.7rem;line-height:1.5}
.chart-disclaimer a{color:var(--brass)}

/* ====================================================== barra superior */
/* La franja dorada de joyeriaferraz.com, copiada tal cual. El degradado es el
   de la web actual, medido en su hoja de estilos: oro viejo en los extremos,
   oro claro a un tercio y casi blanco justo en el centro. Eso es lo que hace
   que parezca lámina de oro y no un relleno plano.

   Sobre ese dorado el texto va en negro; no sirve ninguno de los tonos claros
   de la página, así que esta barra y sus hijos se pintan aparte. */
.topbar{
  background:linear-gradient(90deg,
    #9C731B 3%, #FCDD92 33%, #FFFCE5 49.28%, #FEE07B 67%, #9A741A 99%);
  color:var(--on-brass);
  border-bottom:1px solid rgba(0,0,0,.22)}
.topbar .wrap{display:flex;align-items:center;gap:1.2rem;min-height:38px}
.topbar-tel{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:.78rem;
  color:var(--on-brass);text-decoration:none;letter-spacing:.03em;white-space:nowrap;opacity:.82;
  font-weight:600}
.topbar-tel:hover{opacity:1;color:#000;text-decoration:underline;text-underline-offset:3px}

/* Mensajes que rotan, en CSS puro: sin JavaScript y sin saltos de maquetación. */
.ticker{position:relative;flex:1;height:38px;overflow:hidden;display:flex;justify-content:center}
.ticker span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;font-weight:600;
  color:var(--on-brass);opacity:0;
  animation:ticker calc(var(--n) * 4s) infinite;
  animation-delay:calc(var(--i) * 4s)}
@keyframes ticker{
  0%,2%   {opacity:0;transform:translateY(6px)}
  6%,22%  {opacity:.92;transform:translateY(0)}
  26%,100%{opacity:0;transform:translateY(-6px)}
}
@media (prefers-reduced-motion:reduce){
  .ticker span{animation:none;opacity:0}
  .ticker span:first-child{opacity:.92}
}
@media (max-width:720px){.ticker{display:none}}

.social{display:flex;gap:.55rem;list-style:none;margin:0;padding:0}
.social a{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  color:currentColor;opacity:.72;transition:opacity .15s,color .15s}
.social a:hover{opacity:1;color:var(--brass-bright)}
.social svg{width:17px;height:17px;fill:currentColor}
.social-sm a{width:26px;height:26px}
.social-sm svg{width:15px;height:15px}
.topbar .social{color:var(--on-brass)}
/* El dorado del hover general es invisible sobre la propia lámina de oro. */
.topbar .social a:hover{color:#000;opacity:1}

/* ============================================================ cabecera */
.site-header .wrap{display:flex;align-items:center;gap:2rem;padding:1rem 0;flex-wrap:wrap}
.logo{display:block;line-height:0;flex:none}
.logo img{width:auto;height:34px}

/* En escritorio el envoltorio del acordeón desaparece de la maquetación: el
   menú y el botón vuelven a ser hijos directos de la cabecera y todo queda
   como antes de existir el acordeón. */
.nav-panel{display:contents}
.nav-toggle{display:none}
.nav-tel{display:none}

.site-nav{display:flex;gap:1.4rem;margin-left:auto;font-size:.79rem;letter-spacing:.09em;
  text-transform:uppercase;flex-wrap:wrap;align-items:center}
.header-cta{flex:none}
.btn-sm{padding:.55rem .95rem;font-size:.8rem}

/* --------------------------------------------------- acordeón en móvil */
@media (max-width:820px){
  .site-header .wrap{gap:1rem;padding:.8rem 0}
  .logo img{height:28px}

  /* 44 px de lado: es el mínimo cómodo para un dedo. */
  .nav-toggle{display:inline-flex;align-items:center;gap:.45rem;margin-left:auto;
    min-height:44px;padding:.5rem .7rem;background:transparent;cursor:pointer;
    border:1px solid var(--rule-strong);border-radius:2px;color:var(--ink);
    font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.12em;
    text-transform:uppercase}
  .nav-toggle:hover{border-color:var(--brass);color:var(--brass)}
  .nav-toggle-icono{display:block;line-height:0}
  .nav-toggle-icono svg{width:20px;height:20px;display:block}

  /* Al abrir, el icono pasa a aspa. */
  .nav-toggle[aria-expanded="true"]{border-color:var(--brass);color:var(--brass)}
  .nav-toggle .icono-cerrar{display:none}
  .nav-toggle[aria-expanded="true"] .icono-abrir{display:none}
  .nav-toggle[aria-expanded="true"] .icono-cerrar{display:block}

  /* Aquí el envoltorio sí existe: es la lámina que se despliega. */
  .nav-panel{display:block;width:100%;order:3;
    border-top:1px solid var(--rule);margin-top:.2rem;padding-top:.3rem}
  .site-nav{display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%;margin-left:0;
    font-size:.82rem;letter-spacing:.1em}
  .site-nav .nav-link{display:block;padding:.85rem .2rem;
    border-bottom:1px solid var(--rule)}
  .site-nav .nav-link[aria-current]{color:var(--brass)}
  .header-cta{margin:1rem 0 0}
  .header-cta .btn{width:100%;justify-content:center;padding:.8rem 1rem;font-size:.88rem}
  .nav-tel{display:block;margin:.9rem 0 .4rem;text-align:center;
    font-family:"IBM Plex Mono",monospace;font-size:1.05rem;letter-spacing:.04em}
  .nav-tel a{color:var(--ink);text-decoration:none}
}

/* =============================================================== pie */
.site-footer{border-top:1px solid var(--rule);margin-top:4rem;background:var(--paper-2);padding:0}
.footer-grid{display:grid;grid-template-columns:1.15fr .9fr 1fr;gap:2.5rem;padding:3rem 0 2.4rem}
@media (max-width:900px){.footer-grid{grid-template-columns:minmax(0,1fr);gap:2rem}}
.footer-logo{width:auto;height:38px;margin-bottom:1.1rem}
.footer-claim{font-size:.9rem;color:var(--ink-2);max-width:42ch;line-height:1.65}
.footer-brand .social{margin-top:1.2rem;color:var(--ink-2)}

.footer-shop{margin:0}
.footer-shop img{width:100%;height:auto;border:1px solid var(--rule);display:block}
.footer-shop figcaption{margin-top:.5rem;font-family:"IBM Plex Mono",monospace;
  font-size:.72rem;color:var(--ink-3);letter-spacing:.05em}

.footer-contact h2{font-family:Archivo,sans-serif;font-size:.75rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:.9rem}
.footer-contact address{font-style:normal;line-height:1.7;font-size:.93rem}
.footer-contact .muted{color:var(--ink-3);font-size:.85rem}
.footer-phones{margin-top:.9rem;font-family:"IBM Plex Mono",monospace;font-size:1rem}
.footer-phones a{text-decoration:none}
.footer-phones .sep{color:var(--ink-3);margin:0 .4rem}
.footer-hours{margin-top:.8rem;font-size:.9rem;color:var(--ink-2);line-height:1.7}
.footer-actions{display:flex;gap:.5rem;margin-top:1.2rem;flex-wrap:wrap}

.footer-legal{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1.1rem 0 1.4rem;border-top:1px solid var(--rule);font-size:.8rem;color:var(--ink-3)}
.footer-legal nav{display:flex;gap:1.1rem;flex-wrap:wrap}
.footer-legal a{color:var(--ink-3);text-decoration:none}
.footer-legal a:hover{color:var(--brass)}

/* ================================================== barra fija en móvil */
.mobile-bar{display:none}
@media (max-width:760px){
  .mobile-bar{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;
    z-index:60;background:#101413;border-top:1px solid var(--rule-strong)}
  .mobile-bar a{padding:.85rem .4rem;text-align:center;color:var(--ink);text-decoration:none;
    font-size:.78rem;font-weight:600;letter-spacing:.02em}
  .mobile-bar a+a{border-left:1px solid var(--rule)}
  .mobile-bar a:active{background:var(--brass);color:var(--on-brass)}
  body{padding-bottom:52px}
}

/* ============================================ imagen del bloque calculadora */
.calc-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(250px,.85fr);
  gap:3rem;align-items:center;margin-top:1.4rem}
@media (max-width:900px){.calc-layout{grid-template-columns:minmax(0,1fr);gap:1.8rem}}
.calc-figure{margin:0}
.calc-figure img{width:100%;height:auto;display:block}
.calc-figure figcaption{margin-top:.7rem;font-size:.78rem;color:var(--ink-3);
  font-family:"IBM Plex Mono",monospace;line-height:1.55}

/* =============================================================== blog */
.post-cats{display:flex;gap:.45rem;flex-wrap:wrap;margin:1.4rem 0 2rem}
.post-cats a{padding:.42rem .75rem;border:1px solid var(--rule-strong);text-decoration:none;
  color:var(--ink-2);font-size:.82rem;border-radius:2px;background:var(--paper-2)}
.post-cats a span{font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--ink-3);
  margin-left:.2rem}
.post-cats a:hover{border-color:var(--brass);color:var(--brass)}
.post-cats a.is-active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.post-cats a.is-active span{color:var(--paper);opacity:.6}

.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:2rem 1.6rem;margin:2rem 0}
.post-card a{text-decoration:none;color:inherit;display:block}
.post-thumb{display:block;aspect-ratio:3/2;background:var(--paper-2);border:1px solid var(--rule);
  overflow:hidden}
.post-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.post-card a:hover .post-thumb img{transform:scale(1.03)}
.post-meta{display:block;font-size:.7rem;color:var(--ink-3);letter-spacing:.05em;margin-top:.8rem}
.post-meta a{color:var(--brass);text-decoration:none}
.post-card h2{font-family:Archivo,sans-serif;font-size:1rem;font-weight:600;line-height:1.35;
  margin-top:.4rem}
.post-card a:hover h2{color:var(--brass)}
.post-card p{font-size:.87rem;color:var(--ink-2);margin-top:.45rem;line-height:1.55}

.post{max-width:74ch;margin:0 auto}
.post-header h1{font-size:clamp(1.9rem,4.2vw,2.9rem);line-height:1.1;letter-spacing:-.015em;
  margin-top:.6rem}
.post-lead{margin-top:1rem;font-size:1.08rem;color:var(--ink-2);line-height:1.6}
.post-cover{margin:2rem 0}
.post-cover img{width:100%;height:auto;border:1px solid var(--rule)}
.post-body{font-size:1.02rem;line-height:1.75;color:var(--ink-2)}
.post-body h2{font-family:"Bodoni Moda",Georgia,serif;font-size:1.6rem;color:var(--ink);
  margin:2.4rem 0 .8rem;line-height:1.2}
.post-body h3{font-family:Archivo,sans-serif;font-size:1.1rem;font-weight:700;color:var(--ink);
  margin:1.8rem 0 .6rem}
.post-body p{margin-top:1rem}
.post-body ul,.post-body ol{margin:1rem 0;padding-left:1.3rem}
.post-body li{margin-top:.4rem}
.post-body strong{color:var(--ink)}
.post-body a{color:var(--brass)}
.post-body blockquote{border-left:3px solid var(--brass);padding-left:1.1rem;margin:1.6rem 0;
  color:var(--ink);font-style:italic}
.post-body table{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.92rem}
.post-body th,.post-body td{border-bottom:1px solid var(--rule);padding:.55rem .6rem;text-align:left}

.post-cta{border:1px solid var(--rule-strong);background:var(--brass-wash);padding:1.6rem 1.7rem;
  margin:3rem 0 0}
.post-cta h2{font-family:Archivo,sans-serif;font-size:1.05rem;font-weight:700}
.post-cta p{margin-top:.5rem;font-size:.93rem;color:var(--ink-2);max-width:60ch}

/* =============================================== llamada destacada */
/* La banda del telefono. Ahora que la pagina entera es negra, ya no basta con
   que la banda sea oscura: se separaria del fondo solo por medio tono. Se
   distingue por tres cosas — el negro es calido en vez de verdoso, la luz
   dorada de arriba es mas intensa, y hay filete de laton arriba y abajo. Sigue
   con literales propios y no con los tokens de la pagina: son los colores de
   esta banda concreta, no los del sitio. */
.callout{
  --callout-bg:#16110D;
  --callout-fg:#F7F4ED;
  --callout-accent:#DCB268;
  background:var(--callout-bg);color:var(--callout-fg);
  border-top:1px solid rgba(220,178,104,.34);
  border-bottom:1px solid rgba(220,178,104,.34);
  margin:3.5rem 0;width:100vw;position:relative;left:50%;right:50%;
  margin-left:-50vw;margin-right:-50vw;padding:3.4rem 1.25rem;overflow:hidden}
.callout::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 120% at 80% 0%, rgba(220,178,104,.22), transparent 70%),
    linear-gradient(180deg, rgba(220,178,104,.10), transparent 40%)}
.callout-inner{position:relative;width:var(--maxw);margin-inline:auto;text-align:center;
  display:flex;flex-direction:column;align-items:center}
.callout-eyebrow{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--callout-accent)}
.callout-message{font-family:"Bodoni Moda",Georgia,serif;font-weight:400;
  font-size:clamp(1.9rem,5vw,3.4rem);line-height:1.12;letter-spacing:-.015em;
  margin-top:1rem;max-width:20ch;text-wrap:balance;color:var(--callout-fg)}
.callout-message em{font-style:italic;color:var(--callout-accent)}
.callout-sub{margin-top:1.1rem;max-width:56ch;font-size:1rem;line-height:1.6;
  color:color-mix(in srgb, var(--callout-fg) 72%, transparent)}
.callout-actions{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;margin-top:1.9rem}
.btn-lg{padding:1rem 1.9rem;font-size:1rem}
.callout-tel{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  letter-spacing:.02em;font-weight:600}
.callout .btn{background:var(--callout-fg);color:var(--callout-bg);border-color:var(--callout-fg)}
.callout .btn:hover{background:var(--callout-accent);border-color:var(--callout-accent);
  color:var(--callout-bg)}
.callout .btn-outline{background:transparent;color:var(--callout-fg);
  border-color:color-mix(in srgb, var(--callout-fg) 42%, transparent)}
.callout .btn-outline:hover{background:color-mix(in srgb, var(--callout-fg) 12%, transparent);
  color:var(--callout-fg);border-color:var(--callout-fg)}
.callout-price{margin-top:1.6rem;font-size:.85rem;font-variant-numeric:tabular-nums;
  color:color-mix(in srgb, var(--callout-fg) 62%, transparent)}
.callout-price strong{color:var(--callout-accent);font-weight:600}

/* ==================================================== qué compramos */
.materials-block{padding:2.8rem 0;border-bottom:1px solid var(--rule)}
.materials-block h2{font-size:clamp(1.6rem,3.4vw,2.2rem);letter-spacing:-.01em}
.materials-intro{margin-top:.7rem;color:var(--ink-2);max-width:64ch}
.materials-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:1.8rem}
.material-card{background:var(--paper-2);padding:1.5rem 1.4rem 1.6rem;text-decoration:none;
  color:inherit;display:flex;flex-direction:column;gap:.15rem;transition:background .15s}
.material-card:hover{background:var(--brass-wash)}
.material-icon{color:var(--brass);display:block;margin-bottom:.85rem}
.material-icon svg{width:44px;height:44px;display:block}
.material-card:hover .material-icon{color:var(--brass-bright)}
.material-name{font-family:"Bodoni Moda",Georgia,serif;font-size:1.3rem;line-height:1.2;
  color:var(--ink)}
.material-text{font-size:.85rem;color:var(--ink-2);line-height:1.5;margin-top:.35rem}

/* ========================================================= galería */
.gallery-block{padding:2.8rem 0;border-bottom:1px solid var(--rule)}
.gallery-block h2{font-size:clamp(1.6rem,3.4vw,2.2rem);letter-spacing:-.01em}
.gallery-intro{margin-top:.7rem;color:var(--ink-2);max-width:66ch}
.gallery-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.1rem;margin-top:1.8rem}
.gallery-item{margin:0;grid-column:span 2}
.gallery-item.is-wide{grid-column:span 3}
@media (max-width:860px){
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-item,.gallery-item.is-wide{grid-column:span 1}
}
.gallery-item img{width:100%;height:230px;object-fit:cover;display:block;
  border:1px solid var(--rule);background:var(--paper-2)}
.gallery-item.is-wide img{height:230px}
.gallery-item figcaption{margin-top:.55rem;font-family:"IBM Plex Mono",monospace;
  font-size:.72rem;color:var(--ink-3);letter-spacing:.03em;line-height:1.5}
/* En móvil se mantienen las DOS columnas y se recortan las fotos: en una sola
   columna, cinco fotos de 230 px convertían la sección en un pasillo de más de
   1.400 px que nadie baja entero. */
@media (max-width:520px){
  .gallery-grid{gap:.7rem;grid-auto-flow:dense}
  /* Las dos anchas vuelven a ocupar la fila entera: una de ellas es un cartel
     con texto y a media columna salía partido por la mitad. */
  .gallery-item.is-wide{grid-column:span 2}
  /* Cinco fotos en dos columnas, con dos de ellas a fila entera, dan siete
     huecos: siempre sobra uno. La cuarta (relojería, 1100x450) también pasa a
     fila entera y la cuenta cuadra en ocho, sin agujeros. */
  .gallery-item:nth-child(4){grid-column:span 2}
  .gallery-item:nth-child(4) img{height:170px}
  .gallery-item img{height:148px}
  .gallery-item.is-wide img{height:170px}
  .gallery-item figcaption{font-size:.66rem;margin-top:.4rem}
}

/* ========================================================= menú principal */
/* Aquí vivía el menú de tres desplegables con <details>. Se quitó al acortar
   la cabecera y las reglas se quedaron: .nav-drop, .nav-panel-head y un
   .nav-panel que era un desplegable flotante. Ese último colisionaba con el
   .nav-panel del acordeón nuevo y lo dejaba en display:flex flotando sobre la
   página. Fuera todas; queda solo lo que usan las vistas. */
.nav-link{padding:.5rem .6rem;border-radius:2px;color:var(--ink-3);text-decoration:none}
.nav-link:hover{color:var(--brass)}
.nav-link[aria-current]{color:var(--brass)}

/* ============================ precio + grafico en las landings de metal */
.metal-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.85fr);
  gap:2.5rem;align-items:start;margin-top:1.2rem}
/* minmax(0,1fr) y no 1fr: «1fr» nunca baja del contenido mínimo, y dentro va
   la tabla de precios con min-width 520 px. En un móvil de 375 px la columna
   se quedaba en 522 px y se salía la tabla, la fecha y el titular. */
@media (max-width:940px){.metal-layout{grid-template-columns:minmax(0,1fr);gap:1.8rem}}
.metal-block{padding:2rem 0 2.6rem;border-bottom:1px solid var(--rule)}
.metal-layout .hero-chart{margin-top:0}

/* ===================================================== mapa del sitio */
.footer-map{width:var(--maxw);margin-inline:auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2rem;
  padding:2rem 0;border-top:1px solid var(--rule)}
.footer-map h2{font-family:Archivo,sans-serif;font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:.7rem}
.footer-map ul{list-style:none;padding:0;margin:0}
.footer-map li{margin-top:.35rem}
.footer-map a{font-size:.87rem;color:var(--ink-2);text-decoration:none}
.footer-map a:hover{color:var(--brass)}

/* ================================================ bloques con fotografía */
/* Dos columnas en escritorio, una sola en móvil. En el HTML la foto va
   SIEMPRE primero: así en móvil sale antes que el texto sin reordenar nada, y
   en escritorio basta con mover una columna con order. Reordenar solo en el
   lado ancho evita que el lector de pantalla y la vista táctil discrepen. */
.foto-bloque{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(1.6rem,4vw,3.2rem);align-items:center;
  padding:clamp(2.6rem,6vw,5rem) 0;border-bottom:1px solid var(--rule)}
.foto-bloque-texto{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
.foto-bloque-texto h2{font-size:clamp(1.7rem,3.4vw,2.4rem);letter-spacing:-.01em}
.foto-bloque-texto p{color:var(--ink-2);max-width:46ch;line-height:1.65}
.foto-bloque-texto .cta-row{margin-top:.3rem}

/* El hueco lo fija la proporción, no la imagen: la página no da el salto de
   maquetación al cargar la foto (CLS). */
.foto{display:block;width:100%;aspect-ratio:var(--foto-ratio,16/9);
  border:1px solid var(--rule);background:var(--paper-2);overflow:hidden}
.foto img{width:100%;height:100%;object-fit:cover;display:block}

/* Marco de espera mientras el archivo no exista. Se dibuja con la misma
   ilustración de línea de «Qué compramos», no con un hueco roto ni con una
   foto de banco de imágenes. */
.foto-pendiente{display:grid;place-items:center;color:var(--brass);
  background:linear-gradient(160deg,var(--paper-3),var(--paper-2) 62%)}
.foto-pendiente svg{width:clamp(46px,9vw,78px);height:auto;opacity:.45}

/* Lista de garantías. La marca va dibujada y no con el carácter ✓, para que
   herede el trazo fino del resto de la página. */
.checklist{list-style:none;margin:.1rem 0 0;padding:0;
  display:flex;flex-direction:column;gap:.55rem}
.checklist li{position:relative;padding-left:1.55rem;color:var(--ink-2);font-size:.94rem}
.checklist li::before{content:"";position:absolute;left:.15rem;top:.36em;
  width:.6rem;height:.32rem;transform:rotate(-45deg);
  border-left:1.5px solid var(--brass);border-bottom:1.5px solid var(--brass)}
/* El cierre del catálogo. La foto es apaisada, así que se le da la mitad del
   ancho igual que a los otros bloques y se contiene a 520 px: el lomo del
   catálogo lleva letra fina y a 380 px se perdía. */
.bloque-catalogo{grid-template-columns:1fr 1fr;border-bottom:0}
.bloque-catalogo .foto{max-width:520px;margin-left:auto}

@media (min-width:861px){
  .foto-bloque--texto-izq .foto{order:2}
  .foto-bloque--texto-izq .foto-bloque-texto{order:1}
}

@media (max-width:860px){
  .foto-bloque{grid-template-columns:minmax(0,1fr);gap:1.3rem;
    padding:clamp(2rem,7vw,2.9rem) 0}
  /* Petición expresa: en móvil la foto no puede comerse la pantalla. Al
     recortar la altura, object-fit:cover recorta en vez de deformar. */
  .foto{max-height:280px}
  .bloque-catalogo{grid-template-columns:minmax(0,1fr)}
  .bloque-catalogo .foto{max-width:none;margin-left:0}
  .foto-bloque-texto .cta-row{width:100%}
  .foto-bloque-texto .cta-row .btn{flex:1 1 100%;justify-content:center}
}

/* ================================================== ajustes de pantalla estrecha */
/* Lo que sigue corrige cosas que en escritorio están bien y en un móvil de
   360 px no: botones de anchos distintos en la misma fila, campos de
   formulario que se quedan a medio ancho y rejillas que se convierten en una
   columna interminable. Va agrupado y al final a propósito, para poder leer de
   un tirón cómo se comporta la web en el ancho en el que más se visita. */

/* Nota sobre minmax(0,1fr): todas las rejillas de una sola columna de esta
   hoja usan eso y no «1fr». Una pista 1fr nunca baja del ancho mínimo de su
   contenido, así que basta con que dentro haya una tabla con min-width para
   que la columna se quede más ancha que la pantalla y se salga todo. Pasó en
   la landing de la plata: columna de 522 px en un móvil de 375. */

/* Filas de botones: o caben los dos, o van apilados y a todo el ancho. Dos
   botones de anchos distintos uno debajo de otro es lo que hace que una web
   parezca sin terminar. */
@media (max-width:560px){
  .cta-row,.callout-actions,.footer-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:.6rem}
  .cta-row .btn,.callout-actions .btn,.footer-actions .btn{width:100%;justify-content:center}
  .calc-block .cta-row{margin-top:1.4rem}
}

/* Calculadora: el select de quilates y el peso a todo el ancho. Con 9rem de
   mínimo quedaban dos cajas pequeñas y descolgadas a la izquierda. */
@media (max-width:560px){
  .calc-form{display:grid;grid-template-columns:minmax(0,1fr);gap:.9rem;align-items:stretch}
  .calc-field select,.calc-field input{width:100%;min-width:0}
  .calc-form .btn{width:100%;justify-content:center;min-height:46px}
}

/* La hora de actualización deja de irse al borde derecho: en una columna
   estrecha queda como un texto suelto sin dueño. */
@media (max-width:560px){
  .prices-head{gap:.3rem}
  .updated{margin-left:0}
}

/* Qué compramos: dos columnas también en móvil. Con ocho materiales en una
   sola columna había que bajar casi 2.000 px para ver «Lingotes». */
@media (max-width:640px){
  .materials-grid{grid-template-columns:1fr 1fr}
  .material-card{padding:1.1rem .9rem 1.25rem}
  .material-icon{margin-bottom:.6rem}
  .material-icon svg{width:34px;height:34px}
  .material-name{font-size:1.08rem}
  .material-text{font-size:.79rem;line-height:1.45}
}

/* Aviso de que la tabla se desplaza. Sin esto, en móvil se ve la columna de
   precios cortada por la derecha y nada indica que hay más. */
.tscroll-aviso{display:none}
@media (max-width:760px){
  .tscroll-aviso{display:block;margin-top:.5rem;font-family:"IBM Plex Mono",monospace;
    font-size:.68rem;letter-spacing:.06em;color:var(--ink-3)}
}

/* ==================================================== tienda física */
/* Comparte .grid y .card con el catálogo: para el visitante son lo mismo, y
   dos sistemas de tarjetas distintos solo sirven para que se despeguen. */
.bloque-titulo{font-size:clamp(1.4rem,3vw,1.9rem);margin:2.6rem 0 0;letter-spacing:-.01em}
.card .thumb{position:relative}
.cinta{position:absolute;top:.5rem;left:.5rem;font-family:"IBM Plex Mono",monospace;
  font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.22rem .5rem;background:var(--brass);color:var(--on-brass);border-radius:2px}
.cinta-vendida{background:var(--paper-3);color:var(--ink-3)}
.cinta-reservada{background:var(--patina);color:#0B1917}
.producto-texto{margin-top:1.6rem;color:var(--ink-2);line-height:1.7}
.producto-texto p+p{margin-top:.9rem}
.vacio-seccion{margin:2rem 0;padding:1.4rem;border:1px dashed var(--rule-strong);
  color:var(--ink-3);font-size:.92rem}
.closing-tienda{margin-top:3.5rem;padding-top:2rem;border-top:1px solid var(--rule)}
.closing-tienda h2{font-size:clamp(1.4rem,3vw,1.9rem)}
.closing-tienda p{margin-top:.6rem;color:var(--ink-2);max-width:64ch}

/* ============================================== WhatsApp flotante */
/* Solo en escritorio: en móvil la barra fija de abajo ya lleva WhatsApp, y dos
   botones idénticos en la misma pantalla no ayudan, estorban.

   Verde de WhatsApp y no dorado: aquí la función manda sobre la paleta. El
   círculo verde se reconoce sin leer, y un botón de contacto que hay que
   descifrar no cumple su trabajo. Se compensa con un tamaño contenido y sin
   animaciones: el sitio sigue pareciendo una joyería, no una landing. */
.wa-flotante{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:50;
  display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  background:#25D366;color:#fff;
  box-shadow:0 6px 20px -6px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.25);
  transition:transform .15s ease, box-shadow .15s ease}
.wa-flotante svg{width:30px;height:30px;display:block}
.wa-flotante:hover{transform:translateY(-2px);
  box-shadow:0 10px 26px -8px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.25)}
.wa-flotante:focus-visible{outline:2px solid var(--brass-bright);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .wa-flotante,.wa-flotante:hover{transition:none;transform:none}
}

@media (max-width:760px){
  .wa-flotante{display:none}
}

/* ============================================ reseñas de Google */
/* Banda que se desliza sola. El movimiento es CSS puro: va en la primera
   pantalla y no puede esperar a que cargue un script.

   La pista lleva las reseñas DUPLICADAS y se desplaza exactamente el 50 %. Al
   llegar al final, la segunda copia está justo donde empezó la primera, así
   que el bucle no da el tirón que se ve en los carruseles hechos con saltos. */
.resenas{padding:2.6rem 0;border-bottom:1px solid var(--rule);overflow:hidden}
.resenas-cabecera{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin-bottom:1.3rem}
.resenas-eyebrow{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass)}
.resenas-ficha{font-size:.82rem;text-decoration:none;color:var(--ink-3)}
.resenas-ficha:hover{color:var(--brass)}

/* Se difuminan los dos extremos para que las tarjetas no aparezcan y
   desaparezcan de golpe contra el borde de la pantalla. */
.resenas-marco{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}

.resenas-pista{display:flex;gap:1rem;width:max-content;
  animation:resenas-desfile calc(var(--n,6) * 7s) linear infinite}
.resenas-marco:hover .resenas-pista,
.resenas-pista:focus-within{animation-play-state:paused}

@keyframes resenas-desfile{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

.resena{margin:0;width:min(340px,78vw);flex:none;display:flex;flex-direction:column;
  background:var(--paper-2);border:1px solid var(--rule);padding:1.2rem 1.3rem}
.resena-estrellas{display:flex;gap:.1rem;margin-bottom:.7rem}
.resena-estrellas svg{width:15px;height:15px;display:block}
.resena-estrellas .llena{fill:var(--brass)}
.resena-estrellas .vacia{fill:var(--rule-strong)}
.resena blockquote{margin:0;font-size:.9rem;line-height:1.6;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.resena figcaption{display:flex;align-items:center;gap:.6rem;margin-top:1rem;
  padding-top:.8rem;border-top:1px solid var(--rule)}
.resena figcaption img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none}
.resena-inicial{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--brass-wash);color:var(--brass);font-weight:600;font-size:.9rem;flex:none}
.resena figcaption strong{display:block;font-size:.85rem;color:var(--ink);font-weight:600}
.resena figcaption small{font-size:.74rem;color:var(--ink-3)}

/* Quien ha pedido menos movimiento no tiene por qué pelearse con una banda que
   se desliza: se queda quieta y se desplaza con el dedo o la rueda. */
@media (prefers-reduced-motion:reduce){
  .resenas-marco{overflow-x:auto}
  .resenas-pista{animation:none;width:auto}
}

@media (max-width:560px){
  .resenas{padding:2rem 0}
  .resena{padding:1rem 1.1rem}
}

/* ===================================================================
   Cuenta de cliente: acceso, «mi cuenta» y agenda de direcciones.
   Reutiliza los tokens y las clases de formulario del resto de la web;
   aquí solo va lo que no existía.
   =================================================================== */

/* Formularios de acceso: más estrechos, se leen mejor centrados. */
.form-layout--estrecho{max-width:520px}

/* Casilla con su texto al lado, alineados. */
.check-inline{display:flex;gap:.55rem;align-items:flex-start;margin:.4rem 0 1.2rem;
  font-size:.9rem;color:var(--ink-2);cursor:pointer}
.check-inline input{margin-top:.15rem;flex:0 0 auto}

/* Botón a todo el ancho del formulario. */
.btn-block{display:block;width:100%;text-align:center}
.btn-fino{padding:.5rem .9rem;font-size:.85rem}

/* Enlace del header a la cuenta. */
.nav-cuenta{color:var(--ink);text-decoration:none;font-size:.9rem;font-weight:600;
  padding:.35rem .2rem;white-space:nowrap}
.nav-cuenta:hover{color:var(--brass-bright)}

/* Botón que parece enlace, para acciones dentro de un formulario. */
.link-btn{background:none;border:0;padding:0;font:inherit;color:var(--brass);
  cursor:pointer;text-decoration:underline}
.link-btn--rojo{color:var(--oxide)}

/* «Mi cuenta»: tarjetas de resumen. */
.cuenta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:1rem;margin:1.4rem 0}
.cuenta-tarjeta{border:1px solid var(--rule);border-radius:6px;padding:1.1rem 1.2rem;
  background:var(--paper-2)}
.cuenta-tarjeta h2{font-size:1rem;margin:0 0 .6rem}
.cuenta-dato{color:var(--ink-2);font-size:.9rem;margin:.15rem 0}
.cuenta-enlace{display:inline-block;margin-top:.7rem;color:var(--brass);
  text-decoration:none;font-size:.88rem;font-weight:600}
.cuenta-enlace:hover{text-decoration:underline}
.cuenta-salir{margin-top:1.6rem}

/* Agenda de direcciones. */
.dir-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:1rem;margin:1.2rem 0}
.dir-tarjeta{position:relative;border:1px solid var(--rule);border-radius:6px;
  padding:1.1rem 1.2rem;background:var(--paper-2)}
.dir-etiqueta{display:inline-block;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--on-brass);background:var(--brass);padding:.15rem .5rem;border-radius:3px;margin-bottom:.5rem}
.dir-nombre{font-weight:600;margin:0 0 .3rem}
.dir-acciones{display:flex;gap:1rem;align-items:center;margin-top:.9rem}
.dir-acciones form{display:inline}

/* ===================================================================
   Tienda online: carrito, checkout y pago. Reutiliza tokens y clases
   de formulario existentes; aquí solo lo nuevo.
   =================================================================== */

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

/* Icono del carrito en la cabecera. */
.nav-carrito{position:relative;display:inline-flex;align-items:center;color:var(--ink);padding:.35rem}
.nav-carrito:hover{color:var(--brass-bright)}
.nav-carrito-n{position:absolute;top:-2px;right:-4px;min-width:16px;height:16px;padding:0 3px;
  border-radius:8px;background:var(--brass);color:var(--on-brass);font-size:.66rem;font-weight:700;
  line-height:16px;text-align:center}

/* Botón de compra en las fichas. */
.comprar-form{margin:1rem 0}

/* Carrito. */
.carro{border-top:1px solid var(--rule);margin-top:1.2rem}
.carro-fila{display:grid;grid-template-columns:80px 1fr auto 90px auto auto;gap:1rem;align-items:center;
  padding:1rem 0;border-bottom:1px solid var(--rule)}
.carro-fila--no{opacity:.6}
.carro-foto img{border-radius:4px;object-fit:cover;background:var(--paper-2)}
.carro-foto-vacia{display:block;width:80px;height:80px;border-radius:4px;background:var(--paper-2)}
.carro-nombre{color:var(--ink);text-decoration:none;font-weight:600}
.carro-nombre:hover{color:var(--brass-bright)}
.carro-ref{color:var(--ink-3);font-size:.78rem;margin:.2rem 0 0}
.carro-aviso{color:var(--oxide);font-size:.82rem;margin:.3rem 0 0}
.carro-precio,.carro-subtotal{font-variant-numeric:tabular-nums;white-space:nowrap}
.carro-subtotal{font-weight:600}
.carro-cantidad input{width:64px;padding:.4rem .5rem;background:var(--paper-2);border:1px solid var(--rule-strong);
  border-radius:4px;color:var(--ink);text-align:center}
.carro-pie{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-top:1.2rem;flex-wrap:wrap}
.carro-total{text-align:right;margin-left:auto}
.carro-total span{color:var(--ink-2);font-size:.85rem;display:block}
.carro-total strong{font-size:1.5rem}
.carro-envio{color:var(--ink-3);font-size:.78rem;margin:.2rem 0 0}
.carro-acciones{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem}

/* Checkout: formulario + resumen. */
.checkout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:2rem;align-items:start;margin-top:1.4rem}
.checkout-form fieldset{border:1px solid var(--rule);border-radius:6px;padding:1.1rem 1.2rem;margin:0 0 1.2rem}
.checkout-form legend{padding:0 .5rem;font-weight:600;color:var(--brass-bright)}
.checkout-resumen{border:1px solid var(--rule);border-radius:6px;padding:1.2rem;background:var(--paper-2);position:sticky;top:1rem}
.checkout-resumen h2{font-size:1.05rem;margin:0 0 .9rem}
.resumen-linea{display:flex;justify-content:space-between;gap:1rem;font-size:.88rem;color:var(--ink-2);padding:.35rem 0}
.resumen-precio{font-variant-numeric:tabular-nums;white-space:nowrap}
.resumen-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:.9rem;
  padding-top:.9rem;border-top:1px solid var(--rule)}
.resumen-total strong{font-size:1.35rem}
.resumen-envio{color:var(--ink-3);font-size:.78rem;margin:.4rem 0 0}

@media (max-width:820px){
  .checkout{grid-template-columns:minmax(0,1fr)}
  .checkout-resumen{position:static;order:-1}
  .carro-fila{grid-template-columns:64px 1fr auto;grid-template-areas:"foto info precio" "foto cant quitar";row-gap:.5rem}
  .carro-foto{grid-area:foto}.carro-info{grid-area:info}.carro-precio{grid-area:precio;text-align:right}
  .carro-cantidad{grid-area:cant}.carro-subtotal{display:none}.carro-quitar{grid-area:quitar;text-align:right}
}

/* ===================================================================
   Páginas legales: prosa larga, cómoda de leer, medida contenida.
   =================================================================== */
.legal{max-width:72ch}
.legal h2{font-size:1.05rem;margin:2rem 0 .6rem;color:var(--brass-bright)}
.legal p,.legal li{color:var(--ink-2);line-height:1.7}
.legal p{margin:.6rem 0}
.legal ul{margin:.6rem 0;padding-left:1.3rem}
.legal li{margin:.35rem 0}
.legal a{color:var(--brass);text-underline-offset:3px}
.legal strong{color:var(--ink)}
.legal .mono{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:.92em}
.legal-fecha{margin-top:2.4rem;padding-top:1rem;border-top:1px solid var(--rule);
  color:var(--ink-3);font-size:.82rem}

/* ===================================================================
   Medios de pago aceptados (pie y checkout). Marcas por su nombre, no
   se reproducen los logotipos; card-chips propias y sobrias.
   =================================================================== */
.medios-pago{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  font-size:.78rem;color:var(--ink-3);margin:.4rem 0}
.medios-pago-txt{font-weight:600;color:var(--ink-2)}
.medios-pago-logos{display:inline-flex;align-items:center;gap:.4rem}
.pago-card{display:inline-flex;align-items:center;justify-content:center;height:26px;padding:0 .5rem;
  border-radius:4px;font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:.72rem;
  letter-spacing:.03em;line-height:1;border:1px solid rgba(255,255,255,.14)}
.pago-card--visa{background:#1A1F71;color:#fff;font-style:italic;letter-spacing:.12em}
.pago-card--mc{background:#fff;color:#222}
.pago-lock{color:var(--brass)}
.medios-pago-nota{color:var(--ink-3)}
/* En el checkout, centrado bajo el botón. */
.checkout-form .medios-pago{justify-content:center;margin-top:1rem}

/* ===================================================================
   Aviso de cookies (barra inferior). Solo aparece si hay analítica.
   =================================================================== */
.cookie-aviso{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:60;
  max-width:640px;margin:0 auto;background:var(--paper-2);border:1px solid var(--rule-strong);
  border-radius:8px;padding:1rem 1.1rem;box-shadow:0 10px 30px rgba(0,0,0,.4);
  display:flex;flex-direction:column;gap:.7rem}
.cookie-texto{font-size:.85rem;color:var(--ink-2);line-height:1.5;margin:0}
.cookie-texto a{color:var(--brass)}
.cookie-botones{display:flex;gap:.6rem;flex-wrap:wrap}
@media(min-width:560px){ .cookie-aviso{flex-direction:row;align-items:center;justify-content:space-between} .cookie-botones{flex:0 0 auto} }

/* ---- Buscador del catálogo ------------------------------------------------ */
.buscador{position:relative;display:flex;gap:.5rem;margin:0 0 1.6rem;max-width:620px}
.buscador input[type=search]{flex:1;min-width:0;background:var(--paper-2);border:1px solid var(--rule-strong);
  color:var(--ink);font:inherit;font-size:.95rem;padding:.7rem .9rem;border-radius:.5rem;-webkit-appearance:none}
.buscador input[type=search]:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 2px var(--brass-wash)}
.buscador input::placeholder{color:var(--ink-3)}
.buscador button{flex:0 0 auto;background:var(--brass);color:var(--on-brass);border:0;font:inherit;font-weight:600;
  padding:.7rem 1.1rem;border-radius:.5rem;cursor:pointer}
.buscador button:hover{background:var(--brass-bright)}
/* Autocompletado */
.ac{position:absolute;top:calc(100% + .35rem);left:0;right:0;z-index:40;background:var(--paper-2);
  border:1px solid var(--rule-strong);border-radius:.6rem;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.45)}
.ac a{display:flex;align-items:center;gap:.7rem;padding:.5rem .7rem;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--rule)}
.ac a:last-child{border-bottom:0}
.ac a:hover{background:var(--brass-wash)}
.ac img,.ac .noimg{width:40px;height:40px;flex:0 0 auto;object-fit:contain;background:var(--paper-3);border-radius:.3rem}
.ac .t{flex:1;min-width:0;font-size:.85rem;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac .p{flex:0 0 auto;font-family:"IBM Plex Mono",monospace;font-size:.78rem;color:var(--brass)}

/* ---- Chips de filtros activos --------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.4rem}
.chip{display:inline-flex;align-items:center;gap:.45rem;background:var(--paper-3);border:1px solid var(--rule-strong);
  color:var(--ink-2);font-size:.8rem;padding:.35rem .7rem;border-radius:2rem;text-decoration:none}
.chip span{color:var(--ink-3);font-weight:700}
.chip:hover{border-color:var(--brass);color:var(--ink)}
.chip-limpiar{background:transparent;color:var(--ink-3)}

/* ---- Rejilla buscador: filtros + resultados ------------------------------- */
.finder{display:grid;grid-template-columns:1fr;gap:1.8rem}
@media(min-width:860px){ .finder{grid-template-columns:240px 1fr;gap:2rem;align-items:start} }

.filtros{display:flex;flex-direction:column;gap:1.3rem}
@media(min-width:860px){ .filtros{position:sticky;top:1rem} }
.facet h2{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  font-family:"IBM Plex Mono",monospace;margin:0 0 .5rem;font-weight:600}
.facet ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.facet li a{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.4rem .5rem;text-decoration:none;color:var(--ink-2);font-size:.9rem;border-radius:.35rem}
.facet li a:hover{background:var(--paper-2);color:var(--ink)}
.facet li a.on{background:var(--brass-wash);color:var(--brass-bright);font-weight:600}
.facet li a.on::before{content:"\2713 ";font-size:.8em}
.facet li a em{font-family:"IBM Plex Mono",monospace;font-style:normal;font-size:.75rem;color:var(--ink-3)}
.facet .rango{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.facet .rango input{width:5.2rem;background:var(--paper-2);border:1px solid var(--rule-strong);color:var(--ink);
  font:inherit;font-size:.85rem;padding:.4rem .5rem;border-radius:.4rem}
.facet .rango button{background:var(--paper-3);border:1px solid var(--rule-strong);color:var(--ink);
  font:inherit;font-size:.8rem;padding:.4rem .7rem;border-radius:.4rem;cursor:pointer}
.facet .rango button:hover{border-color:var(--brass);color:var(--brass)}

/* ---- Barra de resultados -------------------------------------------------- */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-bottom:1rem;margin-bottom:1.4rem;border-bottom:1px solid var(--rule)}
.toolbar .cuenta{margin:0;color:var(--ink-2);font-size:.9rem}
.orden{display:flex;align-items:center;gap:.5rem}
.orden label{font-size:.82rem;color:var(--ink-3)}
.orden select{background:var(--paper-2);border:1px solid var(--rule-strong);color:var(--ink);
  font:inherit;font-size:.85rem;padding:.4rem .6rem;border-radius:.4rem;cursor:pointer}
.orden button{margin-left:.4rem;background:var(--paper-3);border:1px solid var(--rule-strong);color:var(--ink);
  font:inherit;font-size:.82rem;padding:.4rem .7rem;border-radius:.4rem;cursor:pointer}
.sin-resultados{padding:2.5rem 0;color:var(--ink-2);line-height:1.6}
.sin-resultados a{color:var(--brass)}