/* paginas.css — Páginas de servicio y de ciudad (SEO) y el bloque "Cómo funciona".
   Reutiliza los tokens y componentes de estilos.css (cargar DESPUÉS de él). */

/* ---------- migas de pan ---------- */
.migas{margin:0 0 22px;font-size:13px;}
.migas ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 10px;color:var(--text-muted);}
.migas li + li::before{content:"/";margin-right:10px;color:var(--gold);}
.migas a{color:var(--text-secondary);text-underline-offset:4px;text-decoration-color:var(--border-strong);}
.migas a:hover{color:var(--navy);text-decoration-color:var(--gold);}

/* ---------- portada de página interna ---------- */
.pag-portada .portada-in{padding-top:clamp(36px,5vw,64px);padding-bottom:clamp(48px,7vw,88px);}
.pag-portada h1{font-size:clamp(2rem,1.2rem + 3vw,3.3rem);}
.pag-portada--solo .portada-in{grid-template-columns:minmax(0,820px);}
.pag-portada .portada-foto img{height:auto;aspect-ratio:4/3;}

/* ---------- texto de la página ---------- */
.pag-seccion{padding:clamp(48px,7vw,84px) 0;}
.prosa{max-width:760px;}
.prosa h2{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem);margin-bottom:18px;}
.prosa h2::after{content:"";display:block;width:40px;height:1px;background:var(--gold);margin-top:18px;}
.prosa p{color:var(--text-secondary);margin-top:16px;max-width:68ch;}
.prosa a,.faq-resp a,.cf-nota a{color:var(--navy);text-decoration-color:var(--gold);text-underline-offset:4px;}
.prosa a:hover,.faq-resp a:hover,.cf-nota a:hover{color:var(--gold-d);}
.prosa strong{color:var(--navy);font-weight:600;}
.prosa-lista{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:12px;max-width:68ch;}
.prosa-lista li{position:relative;padding-left:26px;color:var(--text-secondary);}
.prosa-lista li::before{content:"";position:absolute;left:2px;top:.72em;width:10px;height:1px;background:var(--gold);}
.pag-pasos{margin:22px 0 0;padding:0;list-style:none;counter-reset:pp;display:grid;gap:18px;max-width:68ch;}
.pag-pasos li{counter-increment:pp;position:relative;padding-left:56px;color:var(--text-secondary);min-height:40px;}
.pag-pasos li::before{
  content:counter(pp);position:absolute;left:0;top:-2px;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--gold-line);display:grid;place-items:center;
  font:500 1.05rem/1 var(--font-display);color:var(--gold-d);background:var(--cream);
}

/* ---------- preguntas frecuentes ---------- */
.faq{display:grid;gap:10px;max-width:820px;}
.faq-item{background:var(--cream);border:1px solid var(--border);border-radius:var(--radio);transition:border-color .25s ease, box-shadow .25s ease;}
.faq-item[open]{border-color:var(--gold-line);box-shadow:var(--sombra);}
.faq-item summary{
  list-style:none;cursor:pointer;padding:18px 56px 18px 22px;position:relative;min-height:56px;
  font:500 1.05rem/1.4 var(--font-display);color:var(--navy);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;margin-top:-7px;
  border-right:1.5px solid var(--gold-d);border-bottom:1.5px solid var(--gold-d);transform:rotate(45deg);transition:transform .25s ease;
}
.faq-item[open] summary::after{transform:rotate(-135deg);margin-top:-2px;}
.faq-item summary:focus-visible{outline:2px solid var(--gold-d);outline-offset:-2px;}
.faq-resp{padding:0 22px 20px;}
.faq-resp p{color:var(--text-secondary);max-width:64ch;}

/* ---------- ciudades ---------- */
.ciudades{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.ciudades a{
  display:flex;flex-direction:column;gap:4px;padding:24px 26px;text-decoration:none;background:var(--cream);
  border:1px solid var(--border);border-radius:var(--radio);transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.ciudades a:hover{transform:translateY(-3px);border-color:var(--gold-line);box-shadow:var(--sombra);}
.ciudades strong{font:500 1.35rem/1.2 var(--font-display);color:var(--navy);}
.ciudades span{font-size:14px;color:var(--text-muted);}

/* ---------- franja de llamada final ---------- */
.cta-banda{background:var(--navy);color:var(--cream);padding:clamp(56px,8vw,96px) 0;text-align:center;}
.cta-in{max-width:720px;margin:0 auto;padding:0 var(--gutter);}
.cta-banda h2{color:var(--cream);font-size:clamp(1.7rem,1.2rem + 2vw,2.5rem);}
.cta-banda p{margin:16px auto 30px;color:rgba(250,247,241,.72);max-width:52ch;}
.cta-banda .btn-oro{background:var(--gold);border-color:var(--gold);color:var(--navy);}
.cta-banda .btn-oro:hover{background:var(--gold-l);border-color:var(--gold-l);}

/* ---------- pie con más columnas ---------- */
.pie-in{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);}
.pie-titulo{margin:0 0 8px;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-l);}

/* ---------- Cómo funciona: carnet + joya = dinero inmediato ---------- */
.cf-pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,6vw,88px);position:relative;}
.cf-paso{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;}
.cf-medalla{
  width:clamp(112px,12vw,148px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:var(--cream);border:1px solid var(--gold-line);
  box-shadow:0 0 0 7px var(--ivory), 0 0 0 8px var(--gold-line), var(--sombra);
}
.cf-medalla svg{width:46%;height:46%;fill:none;stroke:var(--gold-d);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
.cf-paso--resultado .cf-medalla{background:var(--navy);border-color:var(--gold);box-shadow:0 0 0 7px var(--ivory), 0 0 0 8px var(--gold), var(--sombra-oro);}
.cf-paso--resultado .cf-medalla svg{stroke:var(--gold-l);}
.cf-paso h3{margin-top:30px;font-size:clamp(1.2rem,1rem + .7vw,1.5rem);}
.cf-paso p{margin-top:8px;max-width:26ch;color:var(--text-secondary);font-size:15px;line-height:1.6;}
/* signos "+" y "=" entre las medallas (decorativos: no los lee el lector de pantalla) */
.cf-mas::before,.cf-igual::before{
  position:absolute;left:calc(-1 * clamp(28px,6vw,88px) / 2 - .5em);top:calc(clamp(112px,12vw,148px) / 2 - .5em);
  font:400 3.2rem/1 var(--font-display);color:var(--gold);width:1em;text-align:center;
}
.cf-mas::before{content:"+";content:"+" / "";}
.cf-igual::before{content:"=";content:"=" / "";}
.cf-nota{margin-top:clamp(36px,5vw,56px);text-align:center;font-size:14.5px;color:var(--text-muted);}

@media (max-width:1020px){
  .ciudades{grid-template-columns:1fr;}
}
@media (max-width:720px){
  .pie-in{grid-template-columns:1fr;}
  .cf-pasos{grid-template-columns:1fr;gap:56px;}
  .cf-mas::before,.cf-igual::before{left:50%;top:-44px;margin-left:-.5em;font-size:2rem;}
  .cf-paso p{max-width:34ch;}
}
@media (prefers-reduced-motion: reduce){
  .faq-item,.faq-item summary::after,.ciudades a{transition:none;}
}

/* ---------- barra superior con más enlaces: sin saltos de línea y más compacta ---------- */
.nav-lista a{white-space:nowrap;}
@media (min-width:1061px) and (max-width:1180px){
  .nav-lista{gap:0;}
  .nav-lista a{padding-inline:8px;letter-spacing:.1em;font-size:10px;}
  .cabecera-in{gap:18px;}
}
@media (min-width:1181px){
  .nav-lista a{padding-inline:10px;}
}

.cabecera-acciones .btn{white-space:nowrap;}

/* ---------- calculadora de oro y valoración de joyas (/vende-tu-joya) ---------- */
.calc [hidden],.val-joyas [hidden]{display:none !important;}
.calc-caja{max-width:860px;margin:0 auto;background:var(--cream);border:1px solid var(--border);border-radius:var(--radio);box-shadow:var(--sombra);padding:clamp(22px,4vw,48px);}
.calc-aviso{color:var(--text-secondary);text-align:center;}
.calc-aviso h3{font-size:1.4rem;font-weight:500;margin-bottom:10px;color:var(--text);}
.calc-aviso a{color:var(--navy);font-weight:600;text-decoration-color:var(--gold);text-underline-offset:4px;}
.calc-onza{text-align:center;padding-bottom:clamp(20px,3vw,32px);border-bottom:1px solid var(--border);margin-bottom:clamp(20px,3vw,32px);}
.calc-onza-etq{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--text-muted);}
.calc-onza-valor{font-family:var(--font-display);font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.1;color:var(--navy);margin-top:6px;font-variant-numeric:tabular-nums;}
.calc-fecha{margin-top:6px;font-size:13px;color:var(--text-muted);}
.calc-viejo{margin:14px auto 0;max-width:46ch;padding:10px 14px;border-left:2px solid var(--gold);background:var(--gold-dim);font-size:13.5px;text-align:left;}
.calc-entrada{max-width:340px;margin:0 auto clamp(20px,3vw,32px);}
.calc-entrada input{font-size:1.25rem;text-align:center;font-variant-numeric:tabular-nums;}
.calc-tabla{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;}
.calc-cap{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.calc-tabla th,.calc-tabla td{padding:14px 10px;text-align:right;border-bottom:1px solid var(--border);vertical-align:top;}
.calc-tabla thead th{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:600;color:var(--text-muted);}
.calc-tabla tbody th{text-align:left;font-family:var(--font-display);font-size:1.15rem;font-weight:500;color:var(--navy);white-space:nowrap;}
.calc-tabla thead th:first-child{text-align:left;}
.calc-bs{display:block;font-weight:600;color:var(--text);}
.calc-usd{display:block;font-size:13px;color:var(--text-muted);margin-top:2px;}
.calc-total .calc-bs{color:var(--gold-text);font-size:1.05rem;}
.calc-nota{margin-top:20px;font-size:13px;color:var(--text-muted);text-align:center;}

.val-joyas{border:0;padding:0;margin:26px 0 0;min-width:0;}
.val-joyas legend{padding:0;margin-bottom:12px;font-size:10.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.15em;font-weight:600;}
.val-pieza{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,.9fr) auto;gap:12px;align-items:end;padding:14px 0;border-top:1px solid var(--border);}
.val-pieza:first-child{border-top:0;padding-top:0;}
.val-pieza .btn{min-height:48px;}
.val-joyas #btn-val-mas{margin-top:8px;}
.val-estimado{margin-top:16px;padding:12px 16px;border-left:2px solid var(--gold);background:var(--gold-dim);font-size:15px;font-weight:500;}
.form-exito #val-exito-estimado{margin-top:12px;font-weight:500;}

@media (max-width:720px){
  .val-pieza{grid-template-columns:1fr 1fr;}
  .val-pieza .campo:first-child{grid-column:1 / -1;}
  .val-pieza .val-quitar{grid-column:1 / -1;justify-self:start;}
  .calc-tabla th,.calc-tabla td{padding:12px 6px;}
  .calc-tabla tbody th{font-size:1rem;}
}

/* ---------- calculadora de la home: texto + calculadora compacta ---------- */
.calc-dos-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start;}
.calc-dos-texto{position:sticky;top:calc(var(--alto-cabecera) + 32px);}
.calc-dos h2{font-size:clamp(2rem,1.2rem + 3vw,3.3rem);line-height:1.12;font-weight:500;max-width:14ch;}
.calc-dos-sub{margin-top:22px;max-width:48ch;font-size:clamp(1rem,.95rem + .25vw,1.1rem);color:var(--text-secondary);}
.calc-dos-pts{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px;color:var(--text-secondary);font-size:15px;}
.calc-dos-pts li{padding-left:22px;position:relative;}
.calc-dos-pts li::before{content:"";position:absolute;left:0;top:.7em;width:10px;height:1px;background:var(--gold);}
.calc-dos .portada-cta{margin-top:30px;}
.calc-dos .calc-caja{max-width:none;margin:0;padding:clamp(20px,2.6vw,36px);}
.calc-dos .calc-onza{padding-bottom:16px;margin-bottom:18px;}
.calc-dos .calc-onza-valor{font-size:clamp(2rem,3.6vw,2.8rem);}
.calc-dos .calc-entrada{margin-bottom:16px;}
.calc-dos .calc-tabla th,.calc-dos .calc-tabla td{padding:10px 8px;}
@media (max-width:900px){
  .calc-dos-in{grid-template-columns:1fr;}
  .calc-dos-texto{position:static;}
  .calc-dos h2{max-width:none;}
}

/* ---------- calculadora dentro de la portada de /vende-tu-joya ---------- */
.pag-portada--calc .portada-in{align-items:start;}
.pag-portada--calc .calc-caja{max-width:none;margin:0;padding:clamp(20px,2.6vw,36px);}
.pag-portada--calc .calc-onza{padding-bottom:16px;margin-bottom:18px;}
.pag-portada--calc .calc-onza-valor{font-size:clamp(2rem,3.6vw,2.8rem);}
.pag-portada--calc .calc-entrada{margin-bottom:16px;}
.pag-portada--calc .calc-tabla th,.pag-portada--calc .calc-tabla td{padding:10px 8px;}
@media (max-width:1020px){
  .pag-portada--calc .calc-caja{margin-top:8px;}
}

.calc-mas{margin-top:22px;text-align:center;font-size:14px;}
.calc-mas a{color:var(--navy);font-weight:600;text-decoration-color:var(--gold);text-underline-offset:4px;}
#calculadora,#valorar{scroll-margin-top:calc(var(--alto-cabecera) + 24px);}