/* ==========================================================================
   ORO BANCO — TODO EL CSS DEL FRONTAL
   --------------------------------------------------------------------------
   Lo carga el plugin como fichero con versión. El navegador lo descarga UNA
   vez y lo guarda; antes iban estos 74 KB escritos dentro del HTML de cada
   página, así que se volvían a descargar en cada visita.

   ORDEN DE LOS BLOQUES (importa: los últimos ganan a los primeros)
     1–7    cabecera y hero
     13     barra de precios
     14–18  ventajas, tiendas, cotización, formas, calculadora
     19     SISTEMA — radios, alturas de botón, etiquetas. Se toca AQUÍ.
     20–21  ritmo: banda oscura, alturas, ancho completo
     22     el pie
   ========================================================================== */


:root{
  /* Sello de versión. Sirve para comprobar desde el navegador si el CSS que
     se está aplicando es el completo o una copia recortada por LiteSpeed:
        getComputedStyle(document.documentElement).getPropertyValue('--ob-css')
     Si no devuelve la versión, es que no está cargando este fichero. */
  --ob-css: "1.4.1";

  --obh-ink:      #14130F;
  --obh-cream:    #FAF7F0;
  --obh-line:     #E4DCCB;
  --obh-gold:     #ECB702;
  --obh-gold-w:   #D4A93C;   /* oro sobre oscuro — 8,4:1 */
  --obh-gold-d:   #8A660D;   /* oro sobre claro  — 4,9:1 */
  --obh-tx:       #14130F;
  --obh-tx-2:     #5C574C;
  --obh-tx-inv:   #F7F3EA;
  --obh-tx-inv-2: #B8B1A2;
  --obh-ease:     .3s cubic-bezier(.4,0,.2,1);
  --obh-alto:     140px;     /* lo recalcula el JS */
}


/* ==========================================================================
   1. FUERA LA CABECERA DE WOODMART
   ========================================================================== */
.whb-header,
.whb-sticky-header,
.whb-clone{ display: none !important; }


/* ==========================================================================
   2. LA CABECERA PROPIA
   ========================================================================== */
.obh{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  font-family: 'Inter', system-ui, sans-serif;
  transition: background-color .35s ease, box-shadow .35s ease;
}
body.admin-bar .obh{ top: 32px; }
@media (max-width: 782px){ body.admin-bar .obh{ top: 46px; } }

.obh-wrap{
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 34px;
  display: flex;
  align-items: center;
  gap: 30px;
}

/* --- Barra fina de arriba --- */
.obh-top{
  background: rgba(20,19,15,.92);
  border-bottom: 1px solid rgba(247,243,234,.10);
  transition: background-color .35s ease;
}
.obh-top .obh-wrap{ height: 46px; justify-content: space-between; }
.obh-top-l,
.obh-top-r{ display: flex; align-items: center; gap: 30px; }
.obh-top a,
.obh-top span{
  font-size: 14px;
  color: var(--obh-tx-inv-2);
  text-decoration: none;
  transition: color var(--obh-ease);
}
.obh-top a:hover{ color: var(--obh-gold-w); }

.obh-lang{ display: flex; gap: 4px; }
.obh-lang span{
  padding: 3px 10px;
  border-radius: 5px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  cursor: pointer;
  transition: var(--obh-ease);
}
.obh-lang span.is-on{ background: var(--obh-gold); color: var(--obh-ink); }
.obh-lang span:not(.is-on):hover{ background: rgba(255,255,255,.12); color: var(--obh-tx-inv); }

/* --- Fila principal --- */
.obh-main{ transition: background-color .35s ease, border-color .35s ease; }
.obh-main .obh-wrap{ height: 92px; }

/* --- Logo + marca --- */
.obh-logo{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  text-decoration: none !important;
}
.obh-logo img{
  height: 40px; width: auto;
  transition: filter var(--obh-ease);
}
.obh-marca{ display: flex; flex-direction: column; line-height: 1; }
.obh-marca b{
  font-family: 'Fraunces', Georgia, serif;
  font-size: 27px;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--obh-tx-inv);
  transition: color var(--obh-ease);
}
.obh-marca i{
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3em;
  color: var(--obh-tx-inv-2);
  margin-top: 6px;
  transition: color var(--obh-ease);
}

/* --- Menú --- */
.obh-nav{
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.obh-item{ position: relative; }
.obh-item > a{
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  padding: 12px 15px;
  font-size: 16px;
  font-weight: 500;
  color: var(--obh-tx-inv);
  text-decoration: none !important;
  white-space: nowrap;
  transition: color var(--obh-ease);
}
.obh-item > a::after{
  content: "";
  position: absolute;
  left: 15px; right: 15px; bottom: 2px;
  height: 2px;
  background: var(--obh-gold);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--obh-ease);
}
.obh-item > a.is-active::after,
.obh-item:hover > a::after{ transform: scaleX(1); }
.obh-caret{ opacity: .65; transition: transform var(--obh-ease); }
.obh-item.has-mega:hover .obh-caret{ transform: rotate(180deg); }

/* --- El panel grande de "Tienda" --- */
.obh-mega{
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translate(-50%, 10px);
  width: min(980px, 92vw);
  background: var(--obh-cream);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(20,19,15,.28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: var(--obh-ease);
}
.obh-item.has-mega:hover .obh-mega{
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
}
/* Puente invisible: al bajar el ratón del menú al panel no se cierra */
.obh-item.has-mega::after{
  content: "";
  position: absolute;
  top: 100%; left: 0; right: 0; height: 14px;
}
.obh-mega-in{
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.05fr;
  gap: 36px;
  padding: 36px 38px;
}
.obh-mega-col{ display: flex; flex-direction: column; }
.obh-mega-col h6{
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--obh-gold-d);
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--obh-line);
}
.obh-mega-col a{
  font-size: 17px;
  font-weight: 400;
  color: var(--obh-tx);
  text-decoration: none !important;
  padding: 9px 0;
  transition: var(--obh-ease);
}
.obh-mega-col a:hover{ color: var(--obh-gold-d); transform: translateX(5px); }

.obh-mega-feat{
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  min-height: 230px;
  display: flex;
  align-items: flex-end;
  background: #8A8A8A;
  text-decoration: none !important;
}
.obh-mega-feat img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.obh-mega-feat:hover img{ transform: scale(1.06); }
.obh-mega-feat span{
  position: relative; z-index: 2;
  width: 100%;
  padding: 20px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(to top, rgba(20,19,15,.85), transparent);
}
.obh-mega-feat b{ color: var(--obh-gold-w); transition: var(--obh-ease); }
.obh-mega-feat:hover b{ transform: translateX(4px); display: inline-block; }

/* --- Iconos --- */
.obh-tools{ display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.obh-tool{
  position: relative;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: none; background: transparent;
  border-radius: 10px;
  color: var(--obh-tx-inv);
  cursor: pointer;
  text-decoration: none !important;
  transition: var(--obh-ease);
}
.obh-tool:hover{ background: rgba(255,255,255,.14); }
.obh-count{
  position: absolute; top: 6px; right: 5px;
  min-width: 19px; height: 19px;
  padding: 0 5px;
  background: var(--obh-gold);
  color: var(--obh-ink);
  border-radius: 10px;
  font-size: 11px; font-weight: 700;
  display: grid; place-items: center;
}
.obh-burger{ display: none; }


/* ==========================================================================
   3. ESTADO CLARO (al bajar, o en páginas sin hero)
   ========================================================================== */
body.ob-header-solid .obh{ box-shadow: 0 2px 26px rgba(20,19,15,.10); }
body.ob-header-solid .obh-top{
  background: var(--obh-ink);
  border-bottom-color: transparent;
}
body.ob-header-solid .obh-main{
  background: rgba(250,247,240,.96);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--obh-line);
}
/* El logo es claro: sobre crema hay que invertirlo para que se vea */
body.ob-header-solid .obh-logo img{ filter: invert(1) brightness(.12); }
body.ob-header-solid .obh-marca b{ color: var(--obh-tx); }
body.ob-header-solid .obh-marca i{ color: var(--obh-tx-2); }
body.ob-header-solid .obh-item > a{ color: var(--obh-tx); }
body.ob-header-solid .obh-item > a:hover{ color: var(--obh-gold-d); }
body.ob-header-solid .obh-tool{ color: var(--obh-tx); }
body.ob-header-solid .obh-tool:hover{ background: rgba(20,19,15,.07); }

/* Páginas sin hero: se reserva el hueco para que la cabecera fija
   no tape el principio del contenido */
body.ob-sin-hero .main-page-wrapper,
body.ob-sin-hero .wd-page-content{ padding-top: var(--obh-alto); }


/* ==========================================================================
   4. MÓVIL
   ========================================================================== */
.obh-movil{
  background: var(--obh-cream);
  border-top: 1px solid var(--obh-line);
  padding: 14px 0 22px;
  max-height: 70vh;
  overflow-y: auto;
}
.obh-movil a{
  display: block;
  padding: 13px 34px;
  font-size: 17px;
  font-weight: 500;
  color: var(--obh-tx);
  text-decoration: none !important;
}
.obh-movil a:active{ background: var(--obh-cream); }
.obh-movil-tit{
  display: block;
  padding: 20px 34px 8px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--obh-gold-d);
}
.obh-movil-sub{ padding-left: 48px !important; font-size: 16px !important; color: var(--obh-tx-2) !important; }

@media (max-width: 1500px){
  .obh-wrap{ padding: 0 22px; }
  .obh-item > a{ padding: 12px 11px; font-size: 15px; }
  .obh-marca b{ font-size: 24px; }
}
@media (max-width: 1180px){
  .obh-nav{ display: none; }
  .obh-burger{ display: grid; }
  .obh-tools{ margin-left: auto; }
  .obh-top-l span.obh-horario,
  .obh-claim{ display: none; }
}
@media (min-width: 1181px){
  .obh-movil{ display: none !important; }
}
@media (max-width: 640px){
  .obh-wrap{ padding: 0 16px; gap: 12px; }
  .obh-top .obh-wrap{ height: 40px; }
  .obh-top a, .obh-top span{ font-size: 12.5px; }
  .obh-main .obh-wrap{ height: 72px; }
  .obh-logo img{ height: 32px; }
  .obh-marca b{ font-size: 19px; }
  .obh-marca i{ font-size: 8px; letter-spacing: .22em; margin-top: 4px; }
  .obh-top-l a:nth-child(2){ display: none; }
}


/* ==========================================================================
   5. EL HERO
   ========================================================================== */

/* Que el contenedor de Elementor no lo empuje hacia abajo.
   Mi propia regla global .e-con.e-parent{padding:84px 0} lo hundía 84px,
   más 40px del .content-layout-wrapper de Woodmart. */
.e-con:has(.ob-hero),
.e-con.e-parent:has(.ob-hero),
.elementor-element:has(> .elementor-widget-container .ob-hero){
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
}
body.ob-header-overlay .content-layout-wrapper,
body.ob-header-overlay .wd-content-area,
body.ob-header-overlay .site-content,
body.ob-header-overlay .entry-content{
  padding-top: 0 !important;
  margin-top: 0 !important;
}
@supports not selector(:has(*)){
  .ob-hero{ margin-top: -84px; }
}

/* PANTALLA COMPLETA. Antes 92vh y sobraban 65px por abajo.
   svh es la altura real de la ventana en móvil, sin contar las barras
   del navegador; vh queda de reserva para navegadores viejos. */
.ob-hero{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--obh-ink);
  isolation: isolate;
}
body.admin-bar .ob-hero{ height: calc(100vh - 32px); height: calc(100svh - 32px); }

.ob-slides{ position: absolute; inset: 0; }
.ob-slide{ position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.ob-slide.is-on{ opacity: 1; }
.ob-slide img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
  display: block;
}
.ob-slide.is-on img{ animation: obKb 15s ease-out forwards; }
@keyframes obKb{ from{ transform: scale(1.02);} to{ transform: scale(1.13);} }

/* Velo ligero. Medí el brillo de hero_monedas.png donde va el titular:
   25/255. Con el velo al 62% el texto blanco sale a 16:1 de contraste.
   Si algún día usas una imagen CLARA ahí, sube el .62 a .78. */
.ob-slides::after{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(20,19,15,.62) 0%,
    rgba(20,19,15,.30) 16%,
    rgba(20,19,15,.06) 32%,
    rgba(20,19,15,0)   46%,
    rgba(20,19,15,0)   76%,
    rgba(20,19,15,.42) 100%);
}

.ob-hero-body{
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 3; padding-bottom: 96px;
}
.ob-wrap{ max-width: 1560px; margin: 0 auto; padding: 0 34px; }
.ob-txt{ display: none; max-width: 760px; }
.ob-txt.is-on{ display: block; animation: obUp .8s cubic-bezier(.16,1,.3,1) both; }
@keyframes obUp{ from{ opacity:0; transform: translateY(26px);} to{ opacity:1; transform:none;} }

.ob-badge{
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--obh-gold); color: var(--obh-ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 9px 20px; border-radius: 100px; margin-bottom: 26px;
}
.ob-badge::before{
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--obh-ink); animation: obPulse 1.8s infinite;
}
@keyframes obPulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.7)} }

.ob-hero .ob-txt h2{
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: clamp(38px, 5.4vw, 76px) !important;
  color: var(--obh-tx-inv) !important;
  font-weight: 300 !important;
  line-height: 1.06 !important;
  letter-spacing: -.03em;
  margin: 0 !important;
  text-shadow: 0 2px 24px rgba(20,19,15,.6), 0 1px 3px rgba(20,19,15,.4);
}
.ob-hero .ob-txt h2 em{ font-style: normal; color: var(--obh-gold-w); }
.ob-hero .ob-txt p{
  color: var(--obh-tx-inv) !important;
  font-size: 20px !important;
  margin: 18px 0 0 !important;
  max-width: 44ch; opacity: .95;
  text-shadow: 0 1px 14px rgba(20,19,15,.65);
}

.ob-cta{ display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.ob-btn{
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 17px; font-weight: 600;
  padding: 19px 38px; min-height: 60px;
  border-radius: 12px; border: 1.5px solid transparent;
  text-decoration: none !important;
  transition: .3s cubic-bezier(.4,0,.2,1);
  position: relative; overflow: hidden;
}
.ob-btn-gold{ background: var(--obh-gold); color: var(--obh-ink) !important; box-shadow: 0 4px 18px rgba(236,183,2,.32); }
.ob-btn-gold:hover{ background: #D9A802; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(236,183,2,.44); }
.ob-btn-gold::after{
  content: ""; position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transition: left .6s ease;
}
.ob-btn-gold:hover::after{ left: 140%; }
.ob-btn-ghost{
  background: rgba(20,19,15,.4);
  backdrop-filter: blur(10px);
  border-color: rgba(247,243,234,.45);
  color: var(--obh-tx-inv) !important;
}
.ob-btn-ghost:hover{ border-color: var(--obh-gold-w); color: var(--obh-gold-w) !important; background: rgba(20,19,15,.65); }

/* --- Señal de "desliza" --- */
.ob-scroll{
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--obh-tx-inv-2);
  pointer-events: none;
  animation: obBob 2.4s ease-in-out infinite;
}
@keyframes obBob{ 0%,100%{ transform: translate(-50%,0);} 50%{ transform: translate(-50%,8px);} }

/* --- Flechas --- */
.ob-arrows{ position: absolute; right: 34px; bottom: 40px; z-index: 4; display: flex; gap: 12px; }
.ob-arrows button{
  width: 52px; height: 52px;
  min-height: 0 !important;      /* Woodmart pone min-height a los <button> */
  padding: 0 !important;
  border-radius: 50%;
  border: 1.5px solid rgba(247,243,234,.35);
  background: rgba(20,19,15,.32);
  backdrop-filter: blur(8px);
  color: var(--obh-tx-inv);
  cursor: pointer;
  display: grid; place-items: center;
  transition: .3s cubic-bezier(.4,0,.2,1);
}
.ob-arrows button:hover{ background: var(--obh-gold); border-color: var(--obh-gold); color: var(--obh-ink); }
/* Sin aro dorado grueso al hacer clic con el ratón */
.ob-arrows button:focus{ outline: none; }
.ob-arrows button:focus-visible{ outline: 2px solid var(--obh-gold); outline-offset: 3px; }

/* --- BARRA DE PROGRESO ---
   ESTO ES LO QUE SALÍA GORDO: medí 42px de alto en vez de 3px, porque
   Woodmart aplica min-height a TODOS los <button> y aplastaba estos.
   Por eso van con !important y con min-height a 0. */
.ob-dots{
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 5;
  display: flex;
  width: 100%;
  gap: 0;
}
.ob-dots .ob-dot{
  flex: 1 1 0;
  height: 2px !important;
  min-height: 0 !important;
  max-height: 2px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: rgba(247,243,234,.18) !important;
  box-shadow: none !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: block;
  line-height: 0;
  transition: background-color var(--obh-ease);
}
.ob-dots .ob-dot:hover{ background: rgba(247,243,234,.34) !important; }
.ob-dots .ob-dot::after,
.ob-dots .ob-dot::before{ content: none !important; }   /* el brillo de los botones globales, fuera */
.ob-dots .ob-dot > span{
  position: absolute; inset: 0;
  display: block;
  background: var(--obh-gold);
  transform: scaleX(0);
  transform-origin: left;
}
.ob-dots .ob-dot.is-on > span{ animation: obFill 7s linear forwards; }
.ob-dots .ob-dot.is-done > span{ transform: scaleX(1); }
.ob-dots .ob-dot:focus{ outline: none; }
.ob-dots .ob-dot:focus-visible{ outline: 2px solid var(--obh-gold); outline-offset: 2px; }
@keyframes obFill{ from{ transform: scaleX(0);} to{ transform: scaleX(1);} }


/* ==========================================================================
   6. HERO EN MÓVIL
   ========================================================================== */
@media (max-width: 900px){
  .ob-hero-body{ padding-bottom: 76px; }
  .ob-arrows{ display: none; }
}
@media (max-width: 640px){
  .ob-wrap{ padding: 0 18px; }
  .ob-hero .ob-txt h2{ font-size: 34px !important; }
  .ob-hero .ob-txt p{ font-size: 16.5px !important; }
  .ob-badge{ font-size: 11px; padding: 7px 16px; margin-bottom: 18px; }
  .ob-cta{ gap: 10px; margin-top: 26px; }
  .ob-cta .ob-btn{ width: 100%; font-size: 16px; padding: 16px 24px; min-height: 54px; }
  .ob-hero-body{ padding-bottom: 62px; }
  .ob-scroll{ display: none; }
}


/* ==========================================================================
   7. SALVAGUARDAS
   ========================================================================== */
body.elementor-editor-active .obh{ position: static; }
body.elementor-editor-active .ob-hero{ height: 70vh; }
body.elementor-editor-active .ob-slide.is-on img,
body.elementor-editor-active .ob-txt.is-on{ animation: none !important; }

body.obh-movil-abierto{ overflow: hidden; }

@media (prefers-reduced-motion: reduce){
  .ob-slide.is-on img,
  .ob-txt.is-on,
  .ob-badge::before,
  .ob-scroll{ animation: none !important; }
  .ob-dots .ob-dot.is-on > span{ animation: none !important; transform: scaleX(1); }
}


/* ==========================================================================
   13. BARRA DE PRECIOS EN VIVO
   Va con el snippet PHP "Oro Banco — Barra de precios".
   ========================================================================== */

.ob-ticker{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--obh-ink, #14130F);
  border-top: 1px solid var(--obh-gold, #ECB702);
  border-bottom: 1px solid rgba(247,243,234,.10);
  overflow: hidden;
  padding: 17px 0;
  font-family: 'Inter', system-ui, sans-serif;
}

/* Difuminado en los bordes: los precios aparecen y desaparecen en vez de
   cortarse en seco contra el borde de la pantalla. */
.ob-ticker::before,
.ob-ticker::after{
  content: "";
  position: absolute; top: 0; bottom: 0;
  width: 140px;
  z-index: 2;
  pointer-events: none;
}
.ob-ticker::before{ left: 0;  background: linear-gradient(90deg,  var(--obh-ink, #14130F), transparent); }
.ob-ticker::after { right: 0; background: linear-gradient(270deg, var(--obh-ink, #14130F), transparent); }

/* El carril. El contenido va duplicado, así que recorrer el 50% deja la
   segunda copia exactamente donde estaba la primera: bucle sin costura. */
.ob-ticker-track{
  display: flex;
  width: max-content;
  animation: obTicker 46s linear infinite;
  will-change: transform;
}
@keyframes obTicker{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}
.ob-ticker.is-paused .ob-ticker-track{ animation-play-state: paused; }

/* Cada precio */
.ob-ti{
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 34px;
  white-space: nowrap;
  border-right: 1px solid rgba(247,243,234,.12);
}
.ob-ti-k{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--obh-tx-inv-2, #B8B1A2);
}
.ob-ti-v{
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--obh-tx-inv, #F7F3EA);
  font-variant-numeric: tabular-nums;   /* al cambiar la cifra no baila */
  letter-spacing: -.01em;
  transition: color .3s ease;
}
.ob-ti-u{
  font-size: 13px;
  color: var(--obh-tx-inv-2, #B8B1A2);
}

/* Destello dorado corto cuando un precio cambia */
.ob-ti-v.ob-ti-flash{ animation: obFlash 1.1s ease-out; }
@keyframes obFlash{
  0%   { color: var(--obh-gold, #ECB702); }
  100% { color: var(--obh-tx-inv, #F7F3EA); }
}

@media (max-width: 640px){
  .ob-ticker{ padding: 13px 0; }
  .ob-ti{ padding: 0 22px; gap: 8px; }
  .ob-ti-k{ font-size: 10.5px; letter-spacing: .1em; }
  .ob-ti-v{ font-size: 18px; }
  .ob-ti-u{ font-size: 11.5px; }
  .ob-ticker::before,
  .ob-ticker::after{ width: 60px; }
  .ob-ticker-track{ animation-duration: 34s; }
}

/* Con "reducir movimiento" activado la barra se queda quieta: los precios
   se siguen viendo y actualizando, simplemente no se desplaza. */
@media (prefers-reduced-motion: reduce){
  .ob-ticker-track{ animation: none; }
  .ob-ti-v.ob-ti-flash{ animation: none; }
  .ob-ticker{ overflow-x: auto; }
}


/* ==========================================================================
   14. SECCIÓN DE VENTAJAS  —  [oro_ventajas]
   Va con la función oro_banco_ventajas_shortcode() del snippet PHP.
   ========================================================================== */

.obv{
  position: relative;
  background: var(--obh-cream);
  padding: clamp(44px, 4.5vw, 64px) 0;
  overflow: hidden;
  font-family: 'Inter', system-ui, sans-serif;
}
/* Resplandor cálido arriba a la derecha, muy sutil */
.obv::before{
  content: "";
  position: absolute;
  top: -28%; right: -8%;
  width: 680px; height: 680px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236,183,2,.16), transparent 66%);
  pointer-events: none;
  animation: obvFloat 14s ease-in-out infinite;
}
@keyframes obvFloat{
  0%,100%{ transform: translate(0,0); }
  50%    { transform: translate(-36px, 30px); }
}
.obv-wrap{
  position: relative; z-index: 2;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 34px;
}

/* --- Encabezado --- */
.obv-head{
  max-width: 720px;
  margin-bottom: 30px;
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.obv-head.is-in{ opacity: 1; transform: none; }

.obv-eyebrow{
  display: flex; align-items: center; gap: 12px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--obh-gold-d);
  margin-bottom: 14px;
}
.obv-eyebrow::before{
  content: ""; width: 44px; height: 1px;
  background: var(--obh-gold-d); flex-shrink: 0;
}
.obv h2{
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: clamp(30px, 3.4vw, 44px) !important;
  font-weight: 300 !important;
  line-height: 1.1 !important;
  letter-spacing: -.03em;
  color: var(--obh-tx) !important;
  margin: 0 !important;
}
.obv h2 em{ font-style: italic; color: var(--obh-gold-d); }
.obv-sub{
  font-size: 17px;
  color: var(--obh-tx-2);
  margin: 12px 0 0 !important;
}

/* --- Rejilla --- */
.obv-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}

/* --- Tarjeta --- */
.obv-card{
  position: relative;
  display: flex; flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--obh-line);
  border-radius: 14px;
  padding: 26px 26px 24px;
  overflow: hidden;
  opacity: 0; transform: translateY(28px);
  transition:
    opacity .7s cubic-bezier(.16,1,.3,1) var(--obv-d, 0ms),
    transform .7s cubic-bezier(.16,1,.3,1) var(--obv-d, 0ms),
    box-shadow var(--obh-ease),
    border-color var(--obh-ease);
}
.obv-card.is-in{ opacity: 1; transform: none; }
.obv-card:hover{
  border-color: var(--obh-gold);
  box-shadow: 0 20px 50px rgba(20,19,15,.10);
  transform: translateY(-6px);
}

/* Filete dorado que crece al pasar el ratón */
.obv-card::before{
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--obh-gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s ease;
}
.obv-card:hover::before{ transform: scaleX(1); }

/* La tarjeta destacada: en negro, con el filete siempre puesto */
.obv-card.is-dest{
  background: var(--obh-ink);
  border-color: var(--obh-ink);
  box-shadow: 0 20px 50px rgba(20,19,15,.18);
}
.obv-card.is-dest::before{ transform: scaleX(1); }
.obv-card.is-dest:hover{ transform: translateY(-8px); }

.obv-tag{
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--obh-gold-d);
  margin-bottom: 16px;
}
.obv-card.is-dest .obv-tag{ color: var(--obh-gold-w); }

/* --- El número grande --- */
.obv-num{
  display: flex; align-items: flex-start;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(50px, 5vw, 66px);
  font-weight: 300;
  line-height: .88;
  letter-spacing: -.04em;
  color: var(--obh-tx);
  font-variant-numeric: tabular-nums;   /* al contar no da saltos de ancho */
  margin-bottom: 14px;
}
.obv-num i{
  font-style: normal;
  font-size: .38em;
  color: var(--obh-gold-d);
  margin-top: .18em;
}
.obv-card.is-dest .obv-num{ color: var(--obh-tx-inv); }
.obv-card.is-dest .obv-num i{ color: var(--obh-gold-w); }

/* --- Las dos fichas Au / Ag --- */
.obv-tiles{
  display: flex; gap: 10px;
  margin-bottom: 14px;
}
.obv-tile{
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: 13px 10px 11px;
  border: 1px solid var(--obh-line);
  border-radius: 10px;
  background: var(--obh-cream);
  transition: var(--obh-ease);
}
.obv-tile:hover{ border-color: var(--obh-gold); transform: translateY(-3px); }
.obv-tile-s{
  font-family: 'Fraunces', Georgia, serif;
  font-size: 29px; font-weight: 400;
  line-height: 1; letter-spacing: -.02em;
}
.obv-tile.au .obv-tile-s{ color: var(--obh-gold-d); }
.obv-tile.ag .obv-tile-s{ color: #63686D; }
.obv-tile-n{
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--obh-tx-2);
  margin-top: 7px;
}

/* --- Textos de la tarjeta --- */
.obv-card h3{
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 21px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  letter-spacing: -.02em;
  color: var(--obh-tx) !important;
  margin: 0 0 9px !important;
}
.obv-card h3 em{ font-style: italic; color: var(--obh-gold-d); }
.obv-card.is-dest h3{ color: var(--obh-tx-inv) !important; }
.obv-card.is-dest h3 em{ color: var(--obh-gold-w); }

.obv-card p{
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--obh-tx-2) !important;
  margin: 0 0 16px !important;
  flex: 1;
}
.obv-card.is-dest p{ color: var(--obh-tx-inv-2) !important; }

/* --- Enlace --- */
.obv-cta{
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 600;
  color: var(--obh-gold-d);
  text-decoration: none !important;
  align-self: flex-start;
  transition: var(--obh-ease);
}
.obv-cta b{ transition: transform var(--obh-ease); }
.obv-cta:hover b{ transform: translateX(5px); }
.obv-card.is-dest .obv-cta{ color: var(--obh-gold-w); }

/* --- Responsive --- */
@media (max-width: 1100px){
  .obv-grid{ grid-template-columns: 1fr; gap: 14px; }
  .obv-card{ padding: 22px 22px 20px; }
  .obv-num{ font-size: 54px; margin-bottom: 12px; }
  .obv-head{ margin-bottom: 24px; }
  /* En una columna, el número al lado del título aprovecha el ancho */
  .obv-card{ display: grid; grid-template-columns: auto 1fr; column-gap: 22px; align-items: start; }
  .obv-tag{ grid-column: 1 / -1; margin-bottom: 10px; }
  .obv-num, .obv-tiles{ grid-row: 2 / span 3; margin-bottom: 0; align-self: center; }
  .obv-card h3{ margin-top: 0 !important; }
  .obv-cta{ grid-column: 2; }
}
@media (max-width: 640px){
  .obv{ padding: 34px 0; }
  .obv-wrap{ padding: 0 16px; }
  .obv h2{ font-size: 27px !important; }
  .obv-sub{ font-size: 15px; margin-top: 9px !important; }
  .obv-eyebrow{ font-size: 10.5px; margin-bottom: 10px; }
  .obv-eyebrow::before{ width: 20px; }
  .obv-card{ column-gap: 16px; padding: 18px 18px 16px; }
  .obv-num{ font-size: 44px; }
  .obv-tile{ padding: 10px 8px 8px; }
  .obv-tile-s{ font-size: 24px; }
  .obv-tile-n{ font-size: 9px; margin-top: 5px; }
  .obv-card h3{ font-size: 18px !important; margin-bottom: 7px !important; }
  .obv-card p{ font-size: 14px; margin-bottom: 12px !important; }
  .obv-cta{ font-size: 14px; }
}

/* Sin animación si el sistema pide movimiento reducido: todo visible */
@media (prefers-reduced-motion: reduce){
  .obv::before{ animation: none; }
  .obv-card, .obv-head{ opacity: 1 !important; transform: none !important; transition: none; }
}


/* ==========================================================================
   15. SECCIÓN DE TIENDAS  —  [oro_tiendas]
   --------------------------------------------------------------------------
   El shortcode dibuja el título y las dos fichas.
   EL MAPA lo pones tú en Elementor con TU widget de Google Maps, y le das
   la clase CSS  ob-mapa  para que quede con el borde y las esquinas del
   diseño. Ver PASOS.md.
   ========================================================================== */

.obt{
  background: var(--obh-cream-2, #F2EDE3);
  padding: clamp(44px, 4.5vw, 64px) 0 clamp(32px, 3.2vw, 44px);
  font-family: 'Inter', system-ui, sans-serif;
}
.obt-wrap{ max-width: 1560px; margin: 0 auto; padding: 0 34px; }

/* --- Encabezado, centrado --- */
.obt-head{ max-width: 760px; margin: 0 auto 28px; text-align: center; }
.obt-eyebrow{
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--obh-gold-d);
  margin-bottom: 14px;
}
.obt-eyebrow::before,
.obt-eyebrow::after{
  content: ""; width: 40px; height: 1px;
  background: var(--obh-gold-d); flex-shrink: 0;
}
.obt h2{
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: clamp(30px, 3.4vw, 44px) !important;
  font-weight: 300 !important;
  line-height: 1.1 !important;
  letter-spacing: -.03em;
  color: var(--obh-tx) !important;
  margin: 0 !important;
}
.obt h2 em{ font-style: italic; color: var(--obh-gold-d); }
.obt-sub{
  font-size: 16.5px;
  color: var(--obh-tx-2);
  margin: 11px auto 0 !important;
  max-width: 56ch;
}

/* --- Las dos fichas, una al lado de otra --- */
.obt-cards{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.obt-card{
  position: relative;
  background: #FFFFFF;
  border: 1px solid var(--obh-line);
  border-radius: 14px;
  padding: 22px 24px 20px;
  transition: var(--obh-ease);
}
.obt-card:hover{
  border-color: var(--obh-gold);
  box-shadow: 0 16px 40px rgba(20,19,15,.09);
  transform: translateY(-4px);
}
.obt-card h3{
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  letter-spacing: -.02em;
  color: var(--obh-tx) !important;
  margin: 0 !important;
}
.obt-zona{
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--obh-gold-d);
  margin: 4px 0 14px;
}

/* --- Los datos --- */
.obt-datos{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 18px;
  margin: 0 0 16px;
}
.obt-datos dt{
  font-size: 12px;
  color: var(--obh-tx-2);
  white-space: nowrap;
}
.obt-datos dd{
  margin: 0;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--obh-tx);
  line-height: 1.4;
}
.obt-datos dd a{ color: inherit; text-decoration: none; }
.obt-datos dd a:hover{ color: var(--obh-gold-d); }

.obt-btn{
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14.5px; font-weight: 600;
  padding: 11px 24px; min-height: 42px;
  border: 1.5px solid var(--obh-line);
  border-radius: 10px;
  background: var(--obh-cream);
  color: var(--obh-tx) !important;
  text-decoration: none !important;
  transition: var(--obh-ease);
}
.obt-btn:hover{
  border-color: var(--obh-gold);
  background: var(--obh-gold);
  color: var(--obh-ink) !important;
  transform: translateY(-2px);
}

/* --- El mapa, debajo y a todo el ancho --- */
.obt-mapa{
  position: relative;
  margin-top: 18px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--obh-line);
  background: #E8E4DC;
  height: 320px;
}
.obt-mapa iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  display: block;
  opacity: 0;
  transition: opacity .5s ease;
  filter: saturate(.94);   /* que no cante junto al crema */
}
.obt-mapa.is-listo iframe{ opacity: 1; }

/* Rótulo mientras carga */
.obt-mapa-ph{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--obh-tx-2);
  font-size: 14px;
  transition: opacity .4s ease;
}
.obt-mapa-ph span{ display: inline-flex; align-items: center; gap: 10px; }
.obt-mapa-ph span::before{
  content: ""; width: 14px; height: 14px;
  border: 2px solid var(--obh-line);
  border-top-color: var(--obh-gold-d);
  border-radius: 50%;
  animation: obtSpin .9s linear infinite;
}
@keyframes obtSpin{ to{ transform: rotate(360deg); } }
.obt-mapa.is-listo .obt-mapa-ph{ opacity: 0; pointer-events: none; }

/* --- La ficha activa: filete dorado a la izquierda --- */
.obt-card{ cursor: pointer; }
.obt-card::before{
  content: "";
  position: absolute; left: 0; top: 16px; bottom: 16px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--obh-gold);
  transform: scaleY(0); transform-origin: top;
  transition: transform .4s ease;
}
.obt-card.is-on{ border-color: var(--obh-gold); box-shadow: 0 16px 40px rgba(20,19,15,.10); }
.obt-card.is-on::before{ transform: scaleY(1); }
.obt-card:focus-visible{ outline: 3px solid var(--obh-gold); outline-offset: 3px; }

/* --- Responsive --- */
@media (max-width: 900px){
  .obt-cards{ grid-template-columns: 1fr; gap: 14px; }
  .obt-mapa{ height: 260px; }
  /* En una columna cabe la etiqueta y el dato en la misma línea */
  .obt-datos{ gap: 6px 16px; }
}
@media (max-width: 640px){
  .obt{ padding: 34px 0 26px; }
  .obt-wrap{ padding: 0 16px; }
  .obt h2{ font-size: 27px !important; }
  .obt-sub{ font-size: 15px; margin-top: 9px !important; }
  .obt-head{ margin-bottom: 20px; }
  .obt-eyebrow{ font-size: 10.5px; margin-bottom: 10px; }
  .obt-eyebrow::before,
  .obt-eyebrow::after{ width: 18px; }
  .obt-card{ padding: 18px 18px 16px; }
  .obt-card h3{ font-size: 20px !important; }
  .obt-zona{ font-size: 10px; margin: 3px 0 11px; }
  .obt-datos{ gap: 5px 14px; margin-bottom: 13px; }
  .obt-datos dt{ font-size: 11px; }
  .obt-datos dd{ font-size: 13.5px; }
  .obt-btn{ width: 100%; font-size: 14px; min-height: 42px; padding: 10px 18px; }
  .obt-mapa{ height: 230px; margin-top: 14px; }
}

@media (prefers-reduced-motion: reduce){
  .obt-mapa-ph span::before{ animation: none; }
  .obt-card::before{ transition: none; }
}


/* ==========================================================================
   16. COTIZACIÓN DE HOY  —  [oro_cotizacion]
   ========================================================================== */

.obc{
  background: var(--obh-cream);
  padding: clamp(36px, 3.6vw, 48px) 0;
  font-family: 'Inter', system-ui, sans-serif;
}
.obc-wrap{ max-width: 1560px; margin: 0 auto; padding: 0 34px; }

/* --- Encabezado --- */
.obc-head{ max-width: 720px; margin-bottom: 12px; }
.obc-eyebrow{
  display: flex; align-items: center; gap: 12px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--obh-gold-d);
  margin-bottom: 14px;
}
.obc-eyebrow::before{
  content: ""; width: 44px; height: 1px;
  background: var(--obh-gold-d); flex-shrink: 0;
}
.obc h2{
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  font-weight: 300 !important;
  line-height: 1.1 !important;
  letter-spacing: -.03em;
  color: var(--obh-tx) !important;
  margin: 0 !important;
}
.obc h2 em{ font-style: italic; color: var(--obh-gold-d); }
.obc-sub{
  font-size: 17px;
  color: var(--obh-tx-2);
  margin: 9px 0 0 !important;
  max-width: 54ch;
}

/* --- Rejilla: tabla + tarjeta --- */
.obc-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

/* --- La tarjeta de la tabla --- */
.obc-card{
  background: #FFFFFF;
  border: 1px solid var(--obh-line);
  border-radius: 14px;
  overflow: hidden;
}
.obc-card-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 15px 24px;
  border-bottom: 1px solid var(--obh-line);
}
.obc-card-head h3{
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 19px !important;
  font-weight: 400 !important;
  letter-spacing: -.02em;
  color: var(--obh-tx) !important;
  margin: 0 !important;
}
.obc-cuando{
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px;
  color: var(--obh-tx-2);
  white-space: nowrap;
}
/* El puntito verde que late: dice "esto está vivo" */
.obc-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: #3BA55D;
  flex-shrink: 0;
  animation: obcPing 2.2s infinite;
}
@keyframes obcPing{
  0%  { box-shadow: 0 0 0 0 rgba(59,165,93,.5); }
  70% { box-shadow: 0 0 0 9px rgba(59,165,93,0); }
  100%{ box-shadow: 0 0 0 0 rgba(59,165,93,0); }
}

/* --- La tabla --- */
.obc-tabla{
  width: 100%;
  border-collapse: collapse;
  margin: 0 !important;
}
/* IMPORTANTE: las celdas heredaban el line-height 1.65 del body, y eso
   añadía 9px a CADA fila. Con 7 filas eran 63px de aire invisible.
   Medido en la web: fila de 53px -> 45px. */
.obc-tabla thead th{ line-height: 1.2 !important; }
.obc-tabla tbody th,
.obc-tabla tbody td{ line-height: 1.25 !important; }
.obc-tabla thead th{
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--obh-tx-2) !important;
  background: var(--obh-cream) !important;
  text-align: right;
  padding: 9px 24px !important;
  border-bottom: 1px solid var(--obh-line) !important;
}
.obc-tabla thead th:first-child{ text-align: left; }

.obc-tabla tbody th{
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 16.5px !important;
  font-weight: 400 !important;
  letter-spacing: -.01em;
  color: var(--obh-tx) !important;
  text-align: left;
  padding: 10px 24px !important;
  border-bottom: 1px solid var(--obh-line) !important;
  background: transparent !important;
}
.obc-tabla tbody td{
  text-align: right;
  padding: 10px 24px !important;
  border-bottom: 1px solid var(--obh-line) !important;
  font-variant-numeric: tabular-nums;   /* las cifras alineadas en columna */
}
.obc-tabla tbody tr:last-child th,
.obc-tabla tbody tr:last-child td{ border-bottom: none !important; }
.obc-tabla tbody tr{ transition: background-color var(--obh-ease); }
.obc-tabla tbody tr:hover{ background: var(--obh-gold-soft, #FBF3DC); }

/* Lo que pagáis: es el dato importante, va grande y en negro */
.obc-pago{
  font-family: 'Fraunces', Georgia, serif;
  font-size: 19.5px;
  font-weight: 500;
  color: var(--obh-tx);
  letter-spacing: -.02em;
}
/* El de mercado es de referencia: más discreto */
.obc-mercado{
  font-size: 14.5px;
  color: var(--obh-tx-2);
}

.obc-notas{
  padding: 9px 24px 11px;
  background: var(--obh-cream);
  border-top: 1px solid var(--obh-line);
}
.obc-notas p{
  font-size: 11px !important;
  line-height: 1.45;
  color: var(--obh-tx-2) !important;
  margin: 0 0 2px !important;
}
.obc-notas p:last-child{ margin-bottom: 0 !important; }

/* --- La tarjeta oscura --- */
.obc-cta{
  background: var(--obh-ink);
  border-radius: 14px;
  padding: 26px 26px 22px;
  position: sticky;
  top: 160px;   /* se queda pegada al hacer scroll, bajo la cabecera */
}
.obc-cta h3{
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  letter-spacing: -.02em;
  color: var(--obh-tx-inv) !important;
  margin: 0 0 10px !important;
}
.obc-cta p{
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--obh-tx-inv-2) !important;
  margin: 0 0 18px !important;
}
.obc-btn{
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  font-size: 15px; font-weight: 600;
  padding: 12px 22px; min-height: 46px;
  border-radius: 9px;
  text-decoration: none !important;
  margin-bottom: 9px;
  transition: var(--obh-ease);
  position: relative; overflow: hidden;
}
.obc-btn-gold{
  background: var(--obh-gold);
  color: var(--obh-ink) !important;
  border: 1.5px solid var(--obh-gold);
  box-shadow: 0 4px 16px rgba(236,183,2,.28);
}
.obc-btn-gold:hover{ background: #D9A802; transform: translateY(-2px); box-shadow: 0 8px 26px rgba(236,183,2,.4); }
.obc-btn-line{
  background: transparent;
  color: var(--obh-tx-inv) !important;
  border: 1.5px solid rgba(247,243,234,.35);
}
.obc-btn-line:hover{ border-color: var(--obh-gold-w); color: var(--obh-gold-w) !important; }
.obc-fine{
  font-size: 12px !important;
  color: var(--obh-tx-inv-2) !important;
  text-align: center;
  margin: 11px 0 0 !important;
}

/* --- Responsive --- */
@media (max-width: 1100px){
  .obc-grid{ grid-template-columns: 1fr; }
  .obc-cta{ position: static; }
}
@media (max-width: 640px){
  .obc{ padding: 34px 0; }
  .obc-wrap{ padding: 0 16px; }
  .obc h2{ font-size: 27px !important; }
  .obc-sub{ font-size: 15px; margin-top: 9px !important; }
  .obc-head{ margin-bottom: 20px; }
  .obc-eyebrow{ font-size: 10.5px; margin-bottom: 10px; }
  .obc-eyebrow::before{ width: 20px; }
  .obc-card-head{ padding: 12px 14px; }
  .obc-card-head h3{ font-size: 16px !important; }
  .obc-cuando{ font-size: 11.5px; }
  .obc-tabla thead th{ padding: 7px 14px !important; font-size: 9.5px !important; letter-spacing: .08em; }
  .obc-tabla tbody th{ font-size: 14px !important; padding: 8px 14px !important; }
  .obc-tabla tbody td{ padding: 8px 14px !important; }
  .obc-pago{ font-size: 16px; }
  .obc-mercado{ font-size: 12.5px; }
  .obc-notas{ padding: 9px 14px 11px; }
  .obc-notas p{ font-size: 10.5px !important; }
  .obc-cta{ padding: 20px 18px 18px; }
  .obc-cta h3{ font-size: 21px !important; }
  .obc-cta p{ font-size: 13.5px; margin-bottom: 14px !important; }
  .obc-btn{ font-size: 14px; min-height: 44px; padding: 11px 18px; }
}
/* Móvil estrecho: la columna de mercado sobra antes que la de lo que pagáis */
@media (max-width: 400px){
  .obc-tabla thead th:last-child,
  .obc-tabla tbody td.obc-mercado{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .obc-dot{ animation: none; }
}


/* ==========================================================================
   17. TRES FORMAS DE TRABAJAR CON TU ORO  —  [oro_formas]
   Va con el snippet PHP "Oro Banco — Cuerpo".
   ========================================================================== */

.obf{
  background: var(--obh-cream);
  padding: clamp(40px, 4vw, 56px) 0;
  font-family: 'Inter', system-ui, sans-serif;
}
.obf-wrap{ max-width: 1560px; margin: 0 auto; padding: 0 34px; }

.obf-head{
  max-width: 720px;
  margin-bottom: 26px;
  opacity: 0; transform: translateY(20px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.obf-head.is-in{ opacity: 1; transform: none; }
.obf-eyebrow{
  display: flex; align-items: center; gap: 12px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--obh-gold-d);
  margin-bottom: 14px;
}
.obf-eyebrow::before{ content: ""; width: 44px; height: 1px; background: var(--obh-gold-d); flex-shrink: 0; }
.obf h2{
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  font-weight: 300 !important;
  line-height: 1.1 !important;
  letter-spacing: -.03em;
  color: var(--obh-tx) !important;
  margin: 0 !important;
}
.obf h2 em{ font-style: italic; color: var(--obh-gold-d); }
.obf-sub{ font-size: 17px; color: var(--obh-tx-2); margin: 9px 0 0 !important; }

/* --- La fila --- */
.obf-fila{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
  padding: 26px 0;
  border-top: 1px solid var(--obh-line);
  opacity: 0; transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.obf-fila.is-in{ opacity: 1; transform: none; }
/* La segunda y la tercera alternan lado: la imagen se va a la derecha */
.obf-fila.is-alt .obf-media{ order: 2; }

.obf-media{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  /* TOPE IMPORTANTE: sin él, en una columna de ~724px la imagen mide 452px
     de alto y cada fila se va a 500px. Tres filas serían 1.700px. */
  max-height: 280px;
  background: var(--obh-cream-2, #F2EDE3);
}
.obf-media img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1s cubic-bezier(.2,.8,.2,1);
}
.obf-fila:hover .obf-media img{ transform: scale(1.05); }

.obf-body{ position: relative; }

/* El número gigante de fondo, en dorado casi transparente */
.obf-n{
  position: absolute;
  top: -18px; left: -6px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(70px, 8vw, 118px);
  font-weight: 300;
  line-height: .8;
  letter-spacing: -.05em;
  color: var(--obh-gold);
  opacity: .15;
  pointer-events: none;
  z-index: 0;
}
.obf-body > *:not(.obf-n){ position: relative; z-index: 1; }

.obf-body h3{
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: clamp(24px, 2.6vw, 34px) !important;
  font-weight: 300 !important;
  line-height: 1.15 !important;
  letter-spacing: -.03em;
  color: var(--obh-tx) !important;
  margin: 0 0 12px !important;
}
.obf-body h3 em{ font-style: italic; color: var(--obh-gold-d); }

/* La píldora con el dato fuerte (8%, 5%) */
.obf-pill{
  display: inline-flex; align-items: center; gap: 11px;
  background: var(--obh-gold-soft, #FBF3DC);
  border: 1px solid rgba(236,183,2,.42);
  border-radius: 100px;
  padding: 7px 18px;
  margin: 0 0 12px;
}
.obf-pill b{
  font-family: 'Fraunces', Georgia, serif;
  font-size: 23px;
  color: var(--obh-gold-d);
  letter-spacing: -.02em;
  line-height: 1;
}
.obf-pill span{
  font-size: 12.5px; font-weight: 600;
  color: var(--obh-tx-2);
  line-height: 1.3;
}

.obf-body p{
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--obh-tx-2) !important;
  margin: 0 0 14px !important;
}

.obf-pts{
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 7px;
}
.obf-pts li{
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--obh-tx-2);
}
.obf-pts li::before{
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--obh-gold);
  flex-shrink: 0;
  margin-top: 7px;
}

.obf-btn{
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600;
  padding: 12px 26px; min-height: 46px;
  border-radius: 10px;
  background: var(--obh-ink);
  color: var(--obh-tx-inv) !important;
  text-decoration: none !important;
  transition: var(--obh-ease);
}
.obf-btn:hover{ background: #2A2721; transform: translateY(-2px); }

@media (max-width: 1000px){
  .obf-fila{ grid-template-columns: 1fr; gap: 20px; padding: 22px 0; }
  .obf-fila.is-alt .obf-media{ order: 0; }
  .obf-media{ aspect-ratio: 21 / 9; max-height: 240px; }
  .obf-n{ top: -14px; font-size: 66px; }
}
@media (max-width: 640px){
  .obf{ padding: 30px 0; }
  .obf-wrap{ padding: 0 16px; }
  .obf h2{ font-size: 27px !important; }
  .obf-sub{ font-size: 15px; }
  .obf-head{ margin-bottom: 18px; }
  .obf-eyebrow{ font-size: 10.5px; margin-bottom: 10px; }
  .obf-eyebrow::before{ width: 20px; }
  .obf-fila{ gap: 16px; padding: 18px 0; }
  .obf-media{ aspect-ratio: 2 / 1; max-height: 180px; border-radius: 12px; }
  .obf-body h3{ font-size: 21px !important; margin-bottom: 9px !important; }
  .obf-n{ font-size: 50px; top: -10px; left: -3px; }
  .obf-pill{ padding: 6px 14px; gap: 9px; }
  .obf-pill b{ font-size: 19px; }
  .obf-pill span{ font-size: 11.5px; }
  .obf-body p{ font-size: 14px; margin-bottom: 11px !important; }
  .obf-pts{ gap: 5px; margin-bottom: 14px; }
  .obf-pts li{ font-size: 13.5px; }
  .obf-btn{ width: 100%; font-size: 14px; min-height: 42px; padding: 11px 20px; }
}
@media (prefers-reduced-motion: reduce){
  .obf-head, .obf-fila{ opacity: 1 !important; transform: none !important; transition: none; }
}


/* ==========================================================================
   18. CALCULADORA  —  [oro_calculadora]
   ========================================================================== */

.obk{
  background: var(--obh-cream-2, #F2EDE3);
  padding: clamp(40px, 4vw, 56px) 0;
  font-family: 'Inter', system-ui, sans-serif;
}
.obk-wrap{
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 34px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
}

.obk-txt{ min-width: 0; }   /* evita que el texto largo desborde la rejilla */

.obk-eyebrow{
  display: flex; align-items: center; gap: 12px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--obh-gold-d);
  margin-bottom: 14px;
}
.obk-eyebrow::before{ content: ""; width: 44px; height: 1px; background: var(--obh-gold-d); flex-shrink: 0; }
.obk h2{
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: clamp(28px, 3.2vw, 44px) !important;
  font-weight: 300 !important;
  line-height: 1.08 !important;
  letter-spacing: -.03em;
  color: var(--obh-tx) !important;
  margin: 0 !important;
}
.obk h2 em{ font-style: italic; color: var(--obh-gold-d); }
.obk-p1{
  font-size: 17px;
  line-height: 1.6;
  color: var(--obh-tx-2) !important;
  margin: 14px 0 0 !important;
  max-width: 52ch;
}
.obk-p2{
  font-size: 15px;
  line-height: 1.6;
  color: var(--obh-tx-2) !important;
  margin: 10px 0 0 !important;
  max-width: 52ch;
}

/* --- La tarjeta --- */
.obk-card{
  background: #FFFFFF;
  border: 1px solid var(--obh-line);
  border-radius: 16px;
  padding: 26px 26px 22px;
  box-shadow: 0 16px 44px rgba(20,19,15,.08);
}

/* Selector Oro / Plata */
.obk-seg{
  display: flex;
  border: 1.5px solid var(--obh-line);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
}
.obk-seg button{
  flex: 1;
  padding: 11px 10px;
  min-height: 0;
  border: none;
  background: var(--obh-cream);
  color: var(--obh-tx-2);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14.5px; font-weight: 600;
  cursor: pointer;
  transition: var(--obh-ease);
}
.obk-seg button.is-on{ background: var(--obh-ink); color: var(--obh-tx-inv); }
.obk-seg button:not(.is-on):hover{ background: var(--obh-gold-soft, #FBF3DC); color: var(--obh-gold-d); }

.obk-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.obk-field label{
  display: block;
  font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--obh-tx-2);
  margin-bottom: 7px;
}
.obk-field select,
.obk-field input{
  width: 100%;
  padding: 12px 14px !important;
  min-height: 48px;
  border: 1.5px solid var(--obh-line) !important;
  border-radius: 10px !important;
  background: var(--obh-cream) !important;
  color: var(--obh-tx) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 16px !important;   /* menos de 16 hace que iOS haga zoom al enfocar */
  font-weight: 500;
  transition: var(--obh-ease);
}
.obk-field select:focus,
.obk-field input:focus{
  border-color: var(--obh-gold) !important;
  box-shadow: 0 0 0 3px rgba(236,183,2,.18) !important;
  outline: none;
}

/* El resultado */
.obk-res{
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  background: var(--obh-ink);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 14px;
}
.obk-res-l{
  font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--obh-tx-inv-2);
  line-height: 1.35;
}
.obk-res-v{
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 400;
  color: var(--obh-gold-w);
  letter-spacing: -.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;   /* al recalcular no baila el ancho */
  transition: opacity .15s ease;
  text-align: right;
}

.obk-btn{
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  font-size: 15px; font-weight: 600;
  padding: 13px 22px; min-height: 50px;
  border-radius: 10px;
  background: var(--obh-gold);
  color: var(--obh-ink) !important;
  text-decoration: none !important;
  box-shadow: 0 4px 16px rgba(236,183,2,.28);
  transition: var(--obh-ease);
}
.obk-btn:hover{ background: #D9A802; transform: translateY(-2px); box-shadow: 0 8px 26px rgba(236,183,2,.4); }

.obk-nota{
  font-size: 11.5px !important;
  line-height: 1.5;
  color: var(--obh-tx-2) !important;
  margin: 12px 0 0 !important;
}

@media (max-width: 1000px){
  .obk-wrap{ grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 640px){
  .obk{ padding: 30px 0; }
  .obk-wrap{ padding: 0 16px; gap: 18px; }
  .obk h2{ font-size: 26px !important; }
  .obk-p1{ font-size: 15px; margin-top: 10px !important; }
  .obk-p2{ font-size: 14px; }
  .obk-eyebrow{ font-size: 10.5px; margin-bottom: 10px; }
  .obk-eyebrow::before{ width: 20px; }
  .obk-card{ padding: 18px 18px 16px; border-radius: 14px; }
  .obk-row{ grid-template-columns: 1fr; gap: 10px; }
  .obk-res{ padding: 14px 16px; }
  .obk-res-v{ font-size: 26px; }
  .obk-btn{ font-size: 14px; min-height: 46px; }
}


/* ==========================================================================
   19. SISTEMA — la fuente de la verdad
   ==========================================================================
   Este bloque va EL ÚLTIMO a propósito: unifica lo que se me había ido
   desviando al construir cada sección por separado.

   Lo que había medido en la web antes de esto:
     · 9 estilos de tarjeta distintos (radios 9/10/12/14/16px)
     · botones de 49, 51, 52 y 69px de alto
     · titulares de tarjeta a 19, 21, 22, 24 y 34px
     · etiquetas en mayúsculas con 5 espaciados y 3 tamaños

   Si quieres cambiar un radio, una altura de botón o el estilo de las
   etiquetas, se toca AQUÍ y afecta a todo. No busques en cada sección.
   ========================================================================== */

:root{
  /* Radios: solo dos */
  --ob-r-card:  14px;   /* tarjetas, mapas, imágenes de bloque */
  --ob-r-ctrl:  10px;   /* botones, campos, fichas pequeñas */

  /* Alturas de control: solo tres */
  --ob-h-sm:    44px;   /* secundario, móvil */
  --ob-h-md:    48px;   /* el normal en todo el cuerpo */
  --ob-h-lg:    56px;   /* solo el hero */

  /* Escala de titulares: solo tres */
  --ob-t-card:  22px;   /* título dentro de una tarjeta */
  --ob-t-block: 26px;   /* título de un bloque grande (filas de "formas") */
  /* el de sección se queda en clamp(28px, 3vw, 40px) */

  /* La etiqueta en mayúsculas: una sola */
  --ob-lab-size: 11px;
  --ob-lab-ls:   .18em;
}


/* --------------------------------------------------------------------------
   19.1  TARJETAS — mismo radio, mismo borde, sin sombra en reposo
   La sombra pasa a ser señal de interacción, no decoración permanente.
   -------------------------------------------------------------------------- */
.obv-card,
.obc-card,
.obc-cta,
.obt-card,
.obk-card,
.obt-mapa,
.obf-media{
  border-radius: var(--ob-r-card) !important;
}
.obv-card,
.obc-card,
.obt-card,
.obk-card{
  box-shadow: none !important;
}
/* La sombra solo al pasar el ratón, y la misma para todas */
.obv-card:hover,
.obt-card:hover,
.obt-card.is-on{
  box-shadow: 0 16px 40px rgba(20,19,15,.10) !important;
}
/* Excepción a propósito: la tarjeta negra del 8% es la única destacada,
   y lleva sombra siempre para que se despegue del resto. */
.obv-card.is-dest{
  box-shadow: 0 20px 50px rgba(20,19,15,.18) !important;
}

/* Elementos pequeños: el otro radio */
.obv-tile,
.obk-seg,
.obk-field select,
.obk-field input{
  border-radius: var(--ob-r-ctrl) !important;
}


/* --------------------------------------------------------------------------
   19.2  BOTONES — una altura, un radio, un tamaño de letra
   El del hero es el único distinto, y es deliberado.
   -------------------------------------------------------------------------- */
.obt-btn,
.obf-btn,
.obc-btn,
.obk-btn{
  min-height: var(--ob-h-md) !important;
  padding: 12px 26px !important;
  border-radius: var(--ob-r-ctrl) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}
.ob-btn{                      /* hero */
  min-height: var(--ob-h-lg) !important;
  border-radius: 12px !important;
}
/* El selector Oro/Plata salía a 39px: por debajo de los 44px que necesita
   un dedo. Solo la altura — el ancho lo reparte el flex. */
.obk-seg button{ min-height: var(--ob-h-sm) !important; }


/* --------------------------------------------------------------------------
   19.3  TITULARES DE TARJETA — un solo tamaño
   -------------------------------------------------------------------------- */
.obv-card h3,
.obt-card h3,
.obc-cta h3,
.obc-card-head h3{
  font-size: var(--ob-t-card) !important;
  font-weight: 400 !important;
  line-height: 1.22 !important;
}
/* Las filas de "Tres formas" son bloques, no tarjetas: un escalón por
   encima. Estaban a 34px, que es tamaño de titular de sección, y por eso
   esa parte parecía de otra web. */
.obf-body h3{
  font-size: var(--ob-t-block) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}


/* --------------------------------------------------------------------------
   19.4  LA ETIQUETA EN MAYÚSCULAS — una sola, en dos colores

   Es el elemento que más se repite en toda la página y no había dos
   iguales. Ahora solo cambia el color según sobre qué fondo va.
   -------------------------------------------------------------------------- */
.obv-eyebrow,
.obf-eyebrow,
.obk-eyebrow,
.obc-eyebrow,
.obt-eyebrow,
.obv-tag,
.obt-zona,
.obc-tabla thead th,
.obk-field label,
.obk-res-l,
.obv-tile-n{
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: var(--ob-lab-size) !important;
  font-weight: 700 !important;
  letter-spacing: var(--ob-lab-ls) !important;
  text-transform: uppercase !important;
}
/* Dorada: las que encabezan algo */
.obv-eyebrow,
.obf-eyebrow,
.obk-eyebrow,
.obc-eyebrow,
.obt-eyebrow,
.obt-zona{ color: var(--obh-gold-d) !important; }

/* Gris: las que solo etiquetan un dato */
.obc-tabla thead th,
.obk-field label,
.obv-tile-n{ color: var(--obh-tx-2) !important; }

/* Sobre fondo oscuro */
.obv-card.is-dest .obv-tag,
.obk-res-l{ color: var(--obh-tx-inv-2) !important; }

/* El filete que precede a las eyebrow: siempre igual */
.obv-eyebrow::before,
.obf-eyebrow::before,
.obk-eyebrow::before,
.obc-eyebrow::before,
.obt-eyebrow::before,
.obt-eyebrow::after{ width: 40px !important; }


/* --------------------------------------------------------------------------
   19.5  EL ENLACE CON FLECHA — mismo estilo en todas partes
   -------------------------------------------------------------------------- */
.obv-cta,
.obt-datos dd a{
  font-size: 15px !important;
  font-weight: 600 !important;
}


/* --------------------------------------------------------------------------
   19.6  MÓVIL — el sistema también aquí
   -------------------------------------------------------------------------- */
@media (max-width: 640px){
  .obt-btn,
  .obf-btn,
  .obc-btn,
  .obk-btn{
    min-height: var(--ob-h-sm) !important;
    padding: 11px 20px !important;
    font-size: 14px !important;
  }
  .obv-card h3,
  .obt-card h3,
  .obc-cta h3,
  .obc-card-head h3{ font-size: 19px !important; }
  .obf-body h3{ font-size: 22px !important; }
  :root{ --ob-lab-size: 10.5px; }
}


/* ==========================================================================
   20. RITMO — que la página respire y no sea una sola masa crema
   ==========================================================================
   Tres problemas medidos, tres arreglos:

   1) Cinco secciones crema seguidas con saltos de contraste de 1,09x
      (imperceptibles). La CALCULADORA pasa a fondo oscuro: está justo en
      el centro y es la sección con una sola idea dentro, así que aguanta
      el peso. Parte la página en dos mitades legibles.

   2) "Tres formas" medía 1.351px frente a 490–894 del resto. A dieta.

   3) Las cinco cabeceras eran idénticas: filete + palabra dorada + titular
      + subtítulo, cinco veces. Ahora solo tres llevan la etiqueta dorada,
      y todas se alinean a la izquierda (antes tiendas iba centrada sin
      motivo).
   ========================================================================== */


/* --------------------------------------------------------------------------
   20.1  LA CALCULADORA, EN OSCURO
   -------------------------------------------------------------------------- */
.obk{
  background: var(--obh-ink) !important;
  color-scheme: dark;                    /* el desplegable nativo sale oscuro */
  position: relative;
}
/* Un halo dorado muy tenue detrás de la tarjeta, para que el negro no sea plano */
.obk::before{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 100% at 78% 50%, rgba(236,183,2,.10), transparent 62%);
}
.obk-wrap{ position: relative; z-index: 1; }

.obk h2{ color: var(--obh-tx-inv) !important; }
.obk h2 em{ color: var(--obh-gold-w) !important; }
.obk-p1,
.obk-p2,
.obk-nota{ color: var(--obh-tx-inv-2) !important; }

.obk-eyebrow{ color: var(--obh-gold-w) !important; }
.obk-eyebrow::before{ background: var(--obh-gold-w) !important; }

/* La tarjeta: cristal sobre el negro, no un bloque blanco */
.obk-card{
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(247,243,234,.16) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.35) !important;
}

/* Selector Oro / Plata */
.obk-seg{ border-color: rgba(247,243,234,.20) !important; }
.obk-seg button{
  background: transparent !important;
  color: var(--obh-tx-inv-2) !important;
}
.obk-seg button.is-on{
  background: var(--obh-gold) !important;
  color: var(--obh-ink) !important;
}
.obk-seg button:not(.is-on):hover{
  background: rgba(255,255,255,.08) !important;
  color: var(--obh-tx-inv) !important;
}

/* Campos */
.obk-field label{ color: var(--obh-tx-inv-2) !important; }
.obk-field select,
.obk-field input{
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(247,243,234,.20) !important;
  color: var(--obh-tx-inv) !important;
}
.obk-field select option{ background: #1E1C17; color: #F7F3EA; }
.obk-field input::placeholder{ color: rgba(184,177,162,.65) !important; }
.obk-field select:focus,
.obk-field input:focus{
  border-color: var(--obh-gold) !important;
  background: rgba(255,255,255,.11) !important;
}

/* El resultado: dentro de una tarjeta oscura, un bloque negro desaparecía.
   Pasa a ser dorado translúcido. */
.obk-res{
  background: rgba(236,183,2,.11) !important;
  border: 1px solid rgba(236,183,2,.30) !important;
}
.obk-res-l{ color: var(--obh-tx-inv-2) !important; }
.obk-res-v{ color: var(--obh-gold) !important; }


/* --------------------------------------------------------------------------
   20.2  "TRES FORMAS" A DIETA
   Medía 1.351px. El resto de secciones están entre 490 y 894.
   -------------------------------------------------------------------------- */
.obf-media{ max-height: 200px !important; }
.obf-fila{ padding: 16px 0 !important; gap: 38px !important; }
.obf-body p{ margin-bottom: 10px !important; }
.obf-pts{ margin-bottom: 12px !important; gap: 5px !important; }
.obf-pill{ margin-bottom: 10px !important; padding: 5px 15px !important; }
.obf-pill b{ font-size: 20px !important; }
.obf-n{ font-size: clamp(52px, 5.5vw, 80px) !important; top: -12px !important; }
.obf-body h3{ margin-bottom: 9px !important; }


/* --------------------------------------------------------------------------
   20.3  CABECERAS — que dejen de ser el mismo sello cinco veces

   Con etiqueta dorada (las que ABREN un tema nuevo):
       ventajas · calculadora · tiendas
   Sin etiqueta (las que CONTINÚAN el tema anterior):
       formas · cotización
   -------------------------------------------------------------------------- */
.obf-eyebrow,
.obc-eyebrow{ display: none !important; }

/* Sin la etiqueta, el titular necesita un punto de anclaje: un filete corto
   dorado encima. Distinto pero de la misma familia. */
.obf-head,
.obc-head{ padding-top: 16px !important; position: relative; }
.obf-head::before,
.obc-head::before{
  content: "";
  position: absolute; top: 0; left: 0;
  width: 40px; height: 2px;
  background: var(--obh-gold);
  border-radius: 2px;
}
/* Y un escalón menos de tamaño: son continuación, no apertura */
.obf h2,
.obc h2{ font-size: clamp(26px, 2.6vw, 34px) !important; }

/* Una sola alineación en toda la página. Tiendas iba centrada sin motivo. */
.obt-head{ text-align: left !important; margin-left: 0 !important; margin-right: auto !important; }
.obt-eyebrow{ justify-content: flex-start !important; }
.obt-eyebrow::after{ display: none !important; }   /* el filete de la derecha ya no hace falta */


/* --------------------------------------------------------------------------
   20.4  MÓVIL
   -------------------------------------------------------------------------- */
@media (max-width: 640px){
  .obf-media{ max-height: 168px !important; }
  .obf-fila{ padding: 14px 0 !important; gap: 16px !important; }
  .obf-n{ font-size: 44px !important; }
  .obf h2,
  .obc h2{ font-size: 25px !important; }
  .obf-head,
  .obc-head{ padding-top: 13px !important; }
  .obk::before{ background: radial-gradient(90% 60% at 50% 12%, rgba(236,183,2,.12), transparent 65%); }
}


/* --------------------------------------------------------------------------
   20.5  ALTURAS Y FONDOS ALTERNOS

   Con lo anterior "formas" seguía en 1.195px. Lo que la inflaba no era la
   imagen: era la LISTA de puntos dentro de cada fila, 93px por fila, que
   repite lo que ya dicen la píldora (8%, 5%) y el párrafo.

   Fuera la lista:  1.351px → 932px.  El rango de secciones queda 491–932
   en vez de 490–1.351.

   >>> Si quieres recuperar las listas, borra la línea de .obf-pts. <<<
   -------------------------------------------------------------------------- */
.obf-pts{ display: none !important; }

/* Los fondos alternan para que dos secciones seguidas no se fundan en una
   sola masa. Antes ventajas, formas y cotización eran el mismo crema. */
.obf{ background: var(--obh-cream-2, #F2EDE3) !important; }
.obc{ background: var(--obh-cream) !important; }
.obt{ background: var(--obh-cream-2, #F2EDE3) !important; }

/* El ritmo resultante de arriba abajo:
     hero      oscuro
     ticker    negro
     ventajas  crema        608px
     formas    crema-2      932px
     calc      OSCURO       491px   <- la banda que parte la página
     cotización crema       708px
     tiendas   crema-2      894px                                          */


/* ==========================================================================
   21. ANCHO COMPLETO — un fallo que llevaba ahí desde el principio
   ==========================================================================
   Medido en tu web: ventana 1.920px, y las cinco secciones del cuerpo
   medían 1.171px. Nunca fueron a sangre. No se veía porque el fondo crema
   de la sección era casi idéntico al fondo de la página.

   En cuanto la calculadora pasó a fondo oscuro quedó a la vista: una caja
   negra flotando con 370px de crema a cada lado.

   Misma técnica que el hero. Comprobado: no aparece scroll horizontal.
   ========================================================================== */
.obv, .obf, .obk, .obc, .obt{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: 0 !important;
}
/* Con esto el contenido queda a 1.560px, la misma anchura que la cabecera
   y que el hero. Ahora las tarjetas arrancan en la misma vertical que el
   logo. Antes iban 165px más adentro. */


/* ==========================================================================
   22. EL PIE DE PÁGINA  —  lo dibuja el bloque 6 del snippet 19908
   ==========================================================================
   Se oculta el pie de Woodmart y se dibuja uno propio, igual que hicimos
   con la cabecera. Así no dependemos del Footer Builder del tema.
   ========================================================================== */

/* --- Fuera el pie de Woodmart --- */
.site-footer,
.footer-container,
.copyrights-wrapper,
footer.footer-container{ display: none !important; }

/* --- El pie propio --- */
.obp{
  background: var(--obh-ink);
  color: var(--obh-tx-inv-2);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  padding: 64px 0 0;
  /* A sangre: va colgado de wp_footer, fuera del contenedor de Elementor */
  width: 100%;
}
.obp-wrap{ max-width: 1560px; margin: 0 auto; padding: 0 34px; }

.obp-grid{
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
}

/* --- Columna de marca --- */
.obp-logo{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none !important;
}
.obp-logo img{ height: 40px; width: auto; }
.obp-nombre{
  display: flex; flex-direction: column; line-height: 1;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 25px;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--obh-tx-inv);
}
.obp-nombre small{
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .3em;
  color: var(--obh-tx-inv-2);
  margin-top: 6px;
}
.obp-desc{
  margin: 20px 0 0 !important;
  line-height: 1.7;
  max-width: 38ch;
  color: var(--obh-tx-inv-2) !important;
  font-size: 14.5px !important;
}
.obp-legal{
  font-size: 13px !important;
  color: #8F887A !important;          /* 4,9:1 sobre el negro */
  margin: 16px 0 0 !important;
}

/* --- Redes --- */
.obp-redes{ display: flex; gap: 10px; margin-top: 24px; }
.obp-redes a{
  width: 44px; height: 44px;          /* 44px: la zona mínima para un dedo */
  border-radius: var(--ob-r-ctrl, 10px);
  border: 1px solid rgba(247,243,234,.20);
  display: grid; place-items: center;
  color: var(--obh-tx-inv-2);
  text-decoration: none !important;
  transition: var(--obh-ease);
}
.obp-redes a:hover,
.obp-redes a:focus-visible{
  background: var(--obh-gold);
  border-color: var(--obh-gold);
  color: var(--obh-ink);
  transform: translateY(-3px);
}

/* --- Las tres columnas de enlaces --- */
.obp h5{
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: var(--ob-lab-size, 11px) !important;
  font-weight: 700 !important;
  letter-spacing: var(--ob-lab-ls, .18em) !important;
  text-transform: uppercase;
  color: var(--obh-tx-inv) !important;
  margin: 0 0 20px !important;
}
.obp ul{ list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.obp li{ margin: 0; }
/* El padding va en el <a>, no separación entre <li>: así la zona que se
   puede pulsar es de 30px en vez de los 18px del texto pelado. */
.obp-col a{ display: inline-block; padding: 6px 0; }
.obp a{
  color: var(--obh-tx-inv-2);
  text-decoration: none !important;
  transition: color var(--obh-ease);
}
.obp-col a{ font-size: 14.5px; }
.obp a:hover,
.obp a:focus-visible{ color: var(--obh-gold-w); }

/* --- La barra de abajo --- */
.obp-bot{
  border-top: 1px solid rgba(247,243,234,.12);
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 13.5px;
}
.obp-bot-c{ display: flex; gap: 20px; }
.obp-bot-c a{ font-size: 13.5px; }

/* --- Foco visible con teclado --- */
.obp a:focus-visible{
  outline: 2px solid var(--obh-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Móvil --- */
@media (max-width: 1000px){
  .obp-grid{ grid-template-columns: 1fr 1fr; gap: 36px; }
  .obp-marca{ grid-column: 1 / -1; }
}
@media (max-width: 640px){
  .obp{ padding: 40px 0 0; }
  .obp-wrap{ padding: 0 16px; }
  .obp-grid{ grid-template-columns: 1fr; gap: 30px; padding-bottom: 32px; }
  .obp-desc{ max-width: none; }
  .obp-bot{ flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 0; }
  .obp-bot-c{ flex-direction: column; gap: 8px; }
  .obp-col a{ padding: 9px 0; }   /* 36px de zona táctil en el móvil */
}


/* ==========================================================================
   23. DESPLEGABLE NORMAL DE LA CABECERA
   ==========================================================================
   Fallo mío: al pasar el menú a Apariencia → Menús dejé un camino que no
   dibujaba nada. Si una pestaña tenía hijos SUELTOS (sin columnas), en el
   móvil salían pero en el ordenador no aparecía nada al pasar el ratón.

   Ahora hay dos comportamientos y se eligen solos:
     · hijos con hijos  → panel grande (el de siempre)
     · hijos sueltos    → este desplegable
   ========================================================================== */

.obh-drop{
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translate(-50%, 10px);
  min-width: 230px;
  padding: 10px;
  background: var(--obh-cream);
  border-radius: var(--ob-r-card, 14px);
  box-shadow: 0 24px 60px rgba(20,19,15,.24);
  display: grid;
  gap: 1px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: var(--obh-ease);
  z-index: 10;
}
.obh-item.has-drop:hover .obh-drop,
.obh-item.has-drop:focus-within .obh-drop{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

/* Puente invisible: al bajar el ratón del menú al panel no se cierra */
.obh-item.has-drop::after{
  content: "";
  position: absolute;
  top: 100%; left: 0; right: 0; height: 14px;
}

.obh-drop a{
  display: block;
  padding: 10px 14px;
  border-radius: var(--ob-r-ctrl, 10px);
  font-size: 15px;
  font-weight: 400;
  color: var(--obh-tx) !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: var(--obh-ease);
}
.obh-drop a:hover,
.obh-drop a:focus-visible{
  background: var(--obh-gold-soft, #FBF3DC);
  color: var(--obh-gold-d) !important;
}

/* La flechita gira igual que en el panel grande */
.obh-item.has-drop:hover .obh-caret{ transform: rotate(180deg); }


/* ==========================================================================
   24. EL SELECTOR DE IDIOMA
   ==========================================================================
   Antes eran <span> decorativos que no hacían nada. Ahora son botones de
   verdad que le pasan la orden al plugin GTranslate.

   También escondemos los widgets propios de GTranslate: están DOS veces en
   la página (por eso su flags.js se descarga dos veces) y además viven
   dentro de la cabecera de Woodmart, que ocultamos. Aquí solo los tapamos;
   quitar el duplicado hay que hacerlo en los ajustes del plugin.
   ========================================================================== */

.gtranslate_wrapper{ display: none !important; }

.obh-lang-b{
  padding: 3px 10px;
  border: none;
  background: transparent;
  border-radius: 5px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--obh-tx-inv-2);
  min-height: 0;                 /* Woodmart pone min-height a todo <button> */
  line-height: 1.4;
  cursor: pointer;
  transition: var(--obh-ease);
}
.obh-lang-b.is-on{ background: var(--obh-gold); color: var(--obh-ink); }
.obh-lang-b:not(.is-on):hover{ background: rgba(255,255,255,.12); color: var(--obh-tx-inv); }
.obh-lang-b:focus-visible{ outline: 2px solid var(--obh-gold); outline-offset: 2px; }


/* ==========================================================================
   25. LAS FICHAS Au / Ag, PULSABLES
   ==========================================================================
   Antes eran adorno. Ahora bajan a la calculadora con ese metal elegido.
   Como ya son <button>, hay que anular el min-height que Woodmart le pone
   a TODOS los botones — el mismo problema que tuvimos con la barra del hero.
   ========================================================================== */

.obv-tile{
  position: relative;
  width: 100%;
  min-height: 0 !important;
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: var(--obh-ease);
}
.obv-tile:hover,
.obv-tile:focus-visible{
  border-color: var(--obh-gold) !important;
  background: var(--obh-gold-soft, #FBF3DC) !important;
  transform: translateY(-2px);
}
.obv-tile:focus-visible{ outline: 2px solid var(--obh-gold); outline-offset: 2px; }
.obv-tile:active{ transform: translateY(0); }

/* "Calcular →" aparece al pasar por encima, sin cambiar el alto de la ficha */
.obv-tile-go{
  position: absolute;
  left: 0; right: 0; bottom: 6px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--obh-gold-d);
  opacity: 0;
  transform: translateY(6px);
  transition: var(--obh-ease);
  pointer-events: none;
}
.obv-tile:hover .obv-tile-go,
.obv-tile:focus-visible .obv-tile-go{ opacity: 1; transform: none; }

/* En táctil no hay "pasar por encima": se enseña siempre */
@media (hover: none){
  .obv-tile{ padding-bottom: 22px !important; }
  .obv-tile-go{ opacity: 1; transform: none; }
}

/* El destello de la calculadora al llegar */
@keyframes obDestello{
  0%   { box-shadow: 0 0 0 0 rgba(236,183,2,.55); }
  100% { box-shadow: 0 0 0 16px rgba(236,183,2,0); }
}
.ob-destello{ animation: obDestello 1.2s ease-out 2; }
@media (prefers-reduced-motion: reduce){
  .ob-destello{ animation: none; }
}

/* El hueco para la cabecera fija al saltar a la calculadora. Va en CSS y no
   calculado en JS: es lo que el navegador tiene pensado para esto. */
.obk{ scroll-margin-top: calc(var(--obh-alto, 140px) + 12px); }


/* ==========================================================================
   26. LA PASADA "QUICKGOLD" — menos ruido, no menos información
   ==========================================================================
   MEDIDO EN LAS DOS WEBS EL MISMO DÍA:

                              Oro Banco   Quickgold
     alto de la portada          7.420px     4.471px
     elementos visibles             764         212     ← 3,6 veces más
     tamaños de letra                23          16
     colores de texto                13           9
     tipografías                      2           1
     llamadas a la acción            13           5

   La sensación de "satura" no era una impresión: eran 764 elementos y 13
   botones peleándose. Este bloque ataca eso.

   DATO QUE CAMBIA LA ESTRATEGIA: quickgold.es NO enseña ni un precio en su
   portada. Te obliga a elegir ciudad antes de ver un número. Nosotros los
   enseñamos en directo nada más entrar. Eso NO se copia: se mantiene.
   ========================================================================== */


/* --------------------------------------------------------------------------
   26.1  UNA SOLA ESCALA. De 23 tamaños a 7.
   -------------------------------------------------------------------------- */
:root{
  --t-1: 12px;   /* etiquetas en mayúsculas, notas al pie */
  --t-2: 14px;   /* texto secundario, enlaces de listas */
  --t-3: 16px;   /* el texto normal. Nunca menos en el cuerpo */
  --t-4: 20px;   /* título de tarjeta */
  --t-5: 26px;   /* título de bloque */
  --t-6: 34px;   /* título de sección */
  --t-7: 52px;   /* el titular del hero, y solo él */
}

/* Todo lo que era 15, 15.5, 17 → el mismo 16 */
.obv p, .obf-body p, .obk-p1, .obk-p2, .obc-sub, .obt-sub, .obs-sub,
.obf-sub, .obv-sub{ font-size: var(--t-3) !important; line-height: 1.6 !important; }

/* Los titulares de sección: uno solo, no cuatro */
.obv h2, .obf h2, .obk h2, .obc h2, .obt h2, .obs h2{
  font-size: clamp(26px, 4.4vw, var(--t-6)) !important;
  line-height: 1.12 !important;
}

/* Los de tarjeta: uno solo */
.obv-card h3, .obt-card h3, .obc-cta h3, .obc-card-head h3,
.obf-body h3, .obs-card h3{
  font-size: var(--t-4) !important;
  line-height: 1.25 !important;
}

/* Las notas y pies: uno solo */
.obk-nota, .obc-nota, .obt-nota, .obp-legal{ font-size: var(--t-1) !important; }


/* --------------------------------------------------------------------------
   26.2  SERVICIOS — cuatro tarjetas IDÉNTICAS

   Lo importante aquí es lo que NO cambia entre una tarjeta y otra: mismo
   icono de 26px, mismo título, mismo párrafo, mismo enlace, misma altura.
   Solo la del 8% cambia el fondo, porque es el argumento que más vende.
   -------------------------------------------------------------------------- */
.obs{
  background: var(--obh-cream);
  padding: clamp(38px, 5vw, 64px) 0;
  font-family: 'Inter', system-ui, sans-serif;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
}
.obs-wrap{ max-width: 1560px; margin: 0 auto; padding: 0 34px; }

.obs-head{ max-width: 620px; margin-bottom: 30px; }
.obs-eyebrow{
  display: block;
  font-size: var(--ob-lab-size, 11px);
  font-weight: 700;
  letter-spacing: var(--ob-lab-ls, .18em);
  text-transform: uppercase;
  color: var(--obh-gold-d);
  margin-bottom: 12px;
}
.obs h2{
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 300 !important;
  letter-spacing: -.03em;
  color: var(--obh-tx) !important;
  margin: 0 !important;
}
.obs h2 em{ font-style: italic; color: var(--obh-gold-d); }
.obs-sub{ color: var(--obh-tx-2) !important; margin: 10px 0 0 !important; }

.obs-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.obs-card{
  display: flex;
  flex-direction: column;
  padding: 26px 24px 22px;
  background: #FFFFFF;
  border: 1px solid var(--obh-line);
  border-radius: var(--ob-r-card, 14px);
  text-decoration: none !important;
  transition: var(--obh-ease);
  /* Aparecen escalonadas, pero poco: 60ms, no 200 */
  animation: obsEntra .5s cubic-bezier(.16,1,.3,1) both;
  animation-delay: calc(var(--obs-i, 0) * 60ms);
}
@keyframes obsEntra{ from{ opacity:0; transform: translateY(14px);} to{ opacity:1; transform:none;} }
@media (prefers-reduced-motion: reduce){ .obs-card{ animation: none; } }

.obs-card:hover,
.obs-card:focus-visible{
  border-color: var(--obh-gold);
  box-shadow: 0 16px 40px rgba(20,19,15,.10);
  transform: translateY(-3px);
}
.obs-card:focus-visible{ outline: 2px solid var(--obh-gold); outline-offset: 3px; }

.obs-ico{
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--ob-r-ctrl, 10px);
  background: var(--obh-gold-soft, #FBF3DC);
  color: var(--obh-gold-d);
  margin-bottom: 18px;
}

.obs-card h3{
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 400 !important;
  color: var(--obh-tx) !important;
  margin: 0 0 8px !important;
}
.obs-dato{
  display: inline-block;
  font-weight: 400;
  color: var(--obh-gold-d);
  margin-right: 4px;
  font-variant-numeric: tabular-nums;
}

.obs-card p{
  font-size: var(--t-3) !important;
  line-height: 1.55 !important;
  color: var(--obh-tx-2) !important;
  margin: 0 0 18px !important;
  flex: 1;                       /* empuja el enlace abajo: todas alineadas */
}

.obs-cta{
  font-size: var(--t-2);
  font-weight: 600;
  color: var(--obh-gold-d);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.obs-cta i{ font-style: normal; transition: var(--obh-ease); }
.obs-card:hover .obs-cta i{ transform: translateX(4px); }

/* La única que rompe el molde */
.obs-card.is-dest{
  background: var(--obh-ink);
  border-color: var(--obh-ink);
  box-shadow: 0 20px 50px rgba(20,19,15,.18);
}
.obs-card.is-dest h3{ color: var(--obh-tx-inv) !important; }
.obs-card.is-dest p{ color: var(--obh-tx-inv-2) !important; }
.obs-card.is-dest .obs-ico{ background: rgba(236,183,2,.15); color: var(--obh-gold); }
.obs-card.is-dest .obs-dato,
.obs-card.is-dest .obs-cta{ color: var(--obh-gold); }
.obs-card.is-dest:hover{ border-color: var(--obh-gold); }


/* --------------------------------------------------------------------------
   26.3  MÓVIL — que es donde dijiste que peor estaba

   Quickgold en móvil apila TODO en una columna y no baja de 16px en el
   texto del cuerpo. Aquí igual: nada de dos columnas apretadas.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px){
  .obs-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px){
  .obs{ padding: 30px 0; }
  .obs-wrap{ padding: 0 18px; }
  .obs-grid{ grid-template-columns: 1fr; gap: 12px; }
  .obs-head{ margin-bottom: 22px; }

  /* La tarjeta en móvil: el icono al lado del título, no encima.
     Ahorra 64px por tarjeta = 256px en las cuatro. */
  .obs-card{
    display: grid;
    grid-template-columns: 46px 1fr;
    grid-template-areas: "ico titulo" ".   texto" ".   cta";
    column-gap: 14px;
    row-gap: 6px;
    padding: 18px;
  }
  .obs-ico{ grid-area: ico; margin: 0; width: 46px; height: 46px; }
  .obs-card h3{ grid-area: titulo; align-self: center; margin: 0 !important; }
  .obs-card p{ grid-area: texto; margin: 4px 0 10px !important; }
  .obs-cta{ grid-area: cta; }

  /* El cuerpo nunca por debajo de 16px: es donde se pierde la gente */
  .obs-card p,
  .obv p, .obf-body p, .obk-p1, .obc-sub, .obt-sub, .obs-sub{
    font-size: 16px !important;
  }
}


/* ==========================================================================
   27. BLOQUE DE PRECIO — la estructura de la página de tienda de Quickgold
   ==========================================================================
   Copiada la ESTRUCTURA, no la estética: colores y tipografías siguen
   siendo los nuestros (crema, negro, dorado, Fraunces + Inter).

   POR QUÉ EL SUYO SE ENTIENDE Y EL NUESTRO NO:

     Ellos    un número gigante, QUIETO, con su unidad €/g al lado, y
              debajo un solo botón.
     Nosotros el precio iba dentro de una barra que se mueve y dentro de
              una tabla de siete filas, a 2.000px de la entrada.

   Un número que se mueve no se lee: se mira. Ese era el problema.

   Fondo CLARO a propósito. El hero oscuro es bonito pero tapa el dato.
   ========================================================================== */

.obq{
  background: var(--obh-cream);
  padding: clamp(28px, 5vw, 64px) 0 clamp(34px, 5vw, 64px);
  font-family: 'Inter', system-ui, sans-serif;
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw);
  position: relative;
}
.obq-wrap{
  max-width: 1560px; margin: 0 auto; padding: 0 34px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 48px;
  align-items: center;
}

/* --- Izquierda: qué somos --- */
.obq-h1{
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: clamp(32px, 5vw, var(--t-7, 52px)) !important;
  font-weight: 300 !important;
  line-height: 1.05 !important;
  letter-spacing: -.03em;
  color: var(--obh-tx) !important;
  margin: 0 !important;
}
.obq-h1 em{ font-style: italic; color: var(--obh-gold-d); }

.obq-sub{
  font-size: var(--t-3, 16px) !important;
  line-height: 1.55;
  color: var(--obh-tx-2) !important;
  margin: 12px 0 0 !important;
  max-width: 46ch;
}

.obq-sello{
  display: inline-flex; align-items: center; gap: 8px;
  margin: 18px 0 0 !important;
  padding: 6px 13px;
  border: 1px solid var(--obh-line);
  border-radius: 100px;
  background: #fff;
  font-size: var(--t-1, 12px) !important;
  font-weight: 600;
  color: var(--obh-tx-2) !important;
}
.obq-sello svg{ color: var(--obh-gold-d); flex-shrink: 0; }

.obq-gar{
  list-style: none; padding: 0;
  margin: 22px 0 0 !important;
  display: grid; gap: 9px;
}
.obq-gar li{
  display: flex; align-items: flex-start; gap: 10px;
  font-size: var(--t-3, 16px);
  line-height: 1.45;
  color: var(--obh-tx) !important;
  margin: 0;
}
.obq-gar svg{ color: var(--obh-gold-d); flex-shrink: 0; margin-top: 2px; }

/* --- Derecha: LA TARJETA DEL PRECIO --- */
.obq-card{
  background: #FFFFFF;
  border: 1px solid var(--obh-line);
  border-radius: var(--ob-r-card, 14px);
  padding: 22px 24px 20px;
  box-shadow: 0 20px 50px rgba(20,19,15,.08);
}

.obq-card-top{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.obq-lab{
  font-size: var(--ob-lab-size, 11px);
  font-weight: 700;
  letter-spacing: var(--ob-lab-ls, .18em);
  text-transform: uppercase;
  color: var(--obh-gold-d);
}

/* Abierto / cerrado. Verde y rojo miden 4,6:1 sobre blanco. */
.obq-estado{
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--t-1, 12px);
  font-weight: 600;
  color: #9A2C2C;
}
.obq-estado.is-on{ color: #1E6B3A; }
.obq-estado i{
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.obq-estado.is-on i{ animation: obqLatido 2s infinite; }
@keyframes obqLatido{ 0%,100%{opacity:1} 50%{opacity:.35} }
@media (prefers-reduced-motion: reduce){ .obq-estado.is-on i{ animation: none; } }

/* Las pastillas de pureza */
.obq-chips{
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 16px;
}
.obq-chip{
  min-height: 38px !important;
  padding: 8px 14px;
  border: 1px solid var(--obh-line);
  border-radius: 100px;
  background: var(--obh-cream);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--t-2, 14px);
  font-weight: 600;
  color: var(--obh-tx-2);
  cursor: pointer;
  transition: var(--obh-ease);
}
.obq-chip:hover{ border-color: var(--obh-gold); color: var(--obh-gold-d); }
.obq-chip.is-on{
  background: var(--obh-ink);
  border-color: var(--obh-ink);
  color: var(--obh-tx-inv);
}
.obq-chip:focus-visible{ outline: 2px solid var(--obh-gold); outline-offset: 2px; }

.obq-que{
  font-size: var(--t-2, 14px) !important;
  font-weight: 600;
  color: var(--obh-tx-2) !important;
  margin: 0 0 2px !important;
}

/* EL NÚMERO. Es lo más grande de toda la página, y no se mueve. */
.obq-precio{
  display: flex; align-items: baseline; gap: 8px;
  margin: 0 0 18px !important;
}
.obq-num{
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(46px, 8vw, 68px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--obh-tx);
  font-variant-numeric: tabular-nums;   /* al cambiar no baila el ancho */
  transition: opacity .15s ease;
}
.obq-uni{
  font-size: var(--t-4, 20px);
  font-weight: 600;
  color: var(--obh-tx-2);
}

.obq-btn{
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  min-height: var(--ob-h-md, 48px);
  padding: 12px 22px;
  border-radius: var(--ob-r-ctrl, 10px);
  background: var(--obh-gold);
  color: var(--obh-ink) !important;
  font-size: var(--t-3, 16px);
  font-weight: 600;
  text-decoration: none !important;
  box-shadow: 0 4px 16px rgba(236,183,2,.28);
  transition: var(--obh-ease);
}
.obq-btn:hover{ background: #D9A802; transform: translateY(-2px); box-shadow: 0 8px 26px rgba(236,183,2,.4); }

.obq-pie{
  font-size: var(--t-1, 12px) !important;
  color: var(--obh-tx-2) !important;
  margin: 12px 0 0 !important;
}
.obq-pie a{ color: var(--obh-gold-d) !important; font-weight: 600; text-decoration: none !important; }
.obq-pie a:hover{ text-decoration: underline !important; }


/* --------------------------------------------------------------------------
   27.1  LA BARRA FIJA DE MÓVIL

   Quickgold la lleva y es lo más usado desde el teléfono: quien busca
   "compro oro" quiere llamar, no leer. En el ordenador no se ve.
   -------------------------------------------------------------------------- */
.obq-barra{ display: none; }

@media (max-width: 860px){

  .obq-wrap{ grid-template-columns: 1fr; gap: 24px; padding: 0 18px; }

  /* EL PRECIO PRIMERO. En móvil el dato va antes que el discurso. */
  .obq-card{ order: -1; padding: 18px; }
  .obq-h1{ font-size: clamp(28px, 8vw, 38px) !important; }
  .obq-num{ font-size: clamp(44px, 13vw, 58px); }
  .obq-gar li{ font-size: 15px; }

  /* Hueco para que la barra fija no tape el final de la página */
  body{ padding-bottom: 66px; }

  .obq-barra{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 480;
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    gap: 8px;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
    background: rgba(20,19,15,.96);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(247,243,234,.12);
  }
  .obq-barra-b{
    display: flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 46px;                /* zona táctil */
    border-radius: var(--ob-r-ctrl, 10px);
    border: 1px solid rgba(247,243,234,.22);
    font-size: 14px;
    font-weight: 600;
    color: var(--obh-tx-inv) !important;
    text-decoration: none !important;
  }
  .obq-barra-b.is-cta{
    background: var(--obh-gold);
    border-color: var(--obh-gold);
    color: var(--obh-ink) !important;
  }
}


/* ==========================================================================
   28. PLANTILLA DE PÁGINA DE SERVICIO
   ==========================================================================
   Los componentes que se repiten en las seis páginas de servicio. Si cambias
   algo aquí, cambia en las seis a la vez. Ese es el objetivo.

   Todos los bloques comparten: mismo ancho (1560), mismo padding lateral
   (34px / 18px en móvil), misma escala de letra y los fondos alternando
   crema y crema-2 para que se distingan sin líneas divisorias.
   ========================================================================== */

.obp-pag{ display: block; }

.obp-pag > *{
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw);
}
.obm-wrap, .obcab-wrap, .obpr-wrap, .obve-wrap,
.obta-wrap, .obfa-wrap, .oble-wrap{
  max-width: 1560px; margin: 0 auto; padding: 0 34px;
}


/* --------------------------------------------------------------------------
   28.1  MIGAS DE PAN
   -------------------------------------------------------------------------- */
.obm{ background: var(--obh-cream); padding: 16px 0 0; font-family: 'Inter', system-ui, sans-serif; }
.obm ol{ list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.obm li{ display: flex; align-items: center; gap: 8px; margin: 0; }
.obm a, .obm span{ font-size: var(--t-1, 12px); color: var(--obh-tx-2); text-decoration: none !important; }
.obm a{ color: var(--obh-gold-d); }
.obm a:hover{ text-decoration: underline !important; }
.obm-sep{ opacity: .45; }


/* --------------------------------------------------------------------------
   28.2  CABECERA CON EL DATO GIGANTE
   -------------------------------------------------------------------------- */
.obcab{ background: var(--obh-cream); padding: 26px 0 clamp(34px, 5vw, 56px); font-family: 'Inter', system-ui, sans-serif; }
.obcab-wrap{ display: grid; grid-template-columns: 1.25fr .75fr; gap: 44px; align-items: center; }

.obcab h1{
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: clamp(30px, 5vw, var(--t-7, 52px)) !important;
  font-weight: 300 !important;
  line-height: 1.05 !important;
  letter-spacing: -.03em;
  color: var(--obh-tx) !important;
  margin: 0 !important;
}
.obcab h1 em{ font-style: italic; color: var(--obh-gold-d); }

.obcab-intro{
  font-size: clamp(16px, 2vw, 18px) !important;
  line-height: 1.6 !important;
  color: var(--obh-tx-2) !important;
  margin: 14px 0 0 !important;
  max-width: 58ch;
}

.obcab-btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--ob-h-md, 48px);
  margin-top: 22px;
  padding: 12px 26px;
  border-radius: var(--ob-r-ctrl, 10px);
  background: var(--obh-gold);
  color: var(--obh-ink) !important;
  font-size: var(--t-3, 16px); font-weight: 600;
  text-decoration: none !important;
  box-shadow: 0 4px 16px rgba(236,183,2,.28);
  transition: var(--obh-ease);
}
.obcab-btn:hover{ background: #D9A802; transform: translateY(-2px); }

/* El dato: negro, para que sea lo que más pesa de la pantalla */
.obcab-dato{
  background: var(--obh-ink);
  border-radius: var(--ob-r-card, 14px);
  padding: 24px 26px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(20,19,15,.18);
}
.obcab-dato-lab{
  display: block;
  font-size: var(--ob-lab-size, 11px); font-weight: 700;
  letter-spacing: var(--ob-lab-ls, .18em); text-transform: uppercase;
  color: var(--obh-gold-w);
  margin-bottom: 10px;
}
.obcab-dato-n{
  display: flex; align-items: baseline; justify-content: center; gap: 6px;
  margin: 0 !important;
}
.obcab-dato-n b{
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(46px, 7vw, 66px);
  font-weight: 400; line-height: 1; letter-spacing: -.03em;
  color: var(--obh-gold);
  font-variant-numeric: tabular-nums;
}
.obcab-dato-n i{ font-style: normal; font-size: var(--t-4, 20px); font-weight: 600; color: var(--obh-tx-inv-2); }
.obcab-dato-pie{
  display: block; margin-top: 10px;
  font-size: var(--t-1, 12px); color: var(--obh-tx-inv-2);
}


/* --------------------------------------------------------------------------
   28.3  TÍTULOS DE SECCIÓN — uno solo para toda la plantilla
   -------------------------------------------------------------------------- */
.obpr h2, .obve h2, .obta h2, .obfa h2, .oble h2{
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: clamp(25px, 4vw, var(--t-6, 34px)) !important;
  font-weight: 300 !important;
  line-height: 1.15 !important;
  letter-spacing: -.03em;
  color: var(--obh-tx) !important;
  margin: 0 0 24px !important;
}


/* --------------------------------------------------------------------------
   28.4  PROCESO EN 4 PASOS
   -------------------------------------------------------------------------- */
.obpr{ background: var(--obh-cream-2, #F2EDE3); padding: clamp(34px, 5vw, 56px) 0; font-family: 'Inter', system-ui, sans-serif; }
.obpr-lista{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.obpr-paso{
  position: relative; margin: 0;
  padding: 22px 20px;
  background: #fff;
  border: 1px solid var(--obh-line);
  border-radius: var(--ob-r-card, 14px);
}
.obpr-n{
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--obh-ink);
  color: var(--obh-gold);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  margin-bottom: 14px;
}
.obpr-paso h3{
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: var(--t-4, 20px) !important; font-weight: 400 !important;
  line-height: 1.25 !important;
  color: var(--obh-tx) !important;
  margin: 0 0 7px !important;
}
.obpr-paso p{ font-size: var(--t-3, 16px) !important; line-height: 1.55 !important; color: var(--obh-tx-2) !important; margin: 0 !important; }


/* --------------------------------------------------------------------------
   28.5  VENTAJAS — seis tarjetas idénticas
   -------------------------------------------------------------------------- */
.obve{ background: var(--obh-cream); padding: clamp(34px, 5vw, 56px) 0; font-family: 'Inter', system-ui, sans-serif; }
.obve-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.obve-card{
  padding: 22px 20px;
  background: #fff;
  border: 1px solid var(--obh-line);
  border-radius: var(--ob-r-card, 14px);
  transition: var(--obh-ease);
}
.obve-card:hover{ border-color: var(--obh-gold); box-shadow: 0 16px 40px rgba(20,19,15,.08); }
.obve-ico{
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--ob-r-ctrl, 10px);
  background: var(--obh-gold-soft, #FBF3DC);
  color: var(--obh-gold-d);
  margin-bottom: 14px;
}
.obve-card h3{
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: var(--t-4, 20px) !important; font-weight: 400 !important;
  color: var(--obh-tx) !important; margin: 0 0 6px !important;
}
.obve-card p{ font-size: var(--t-3, 16px) !important; line-height: 1.55 !important; color: var(--obh-tx-2) !important; margin: 0 !important; }


/* --------------------------------------------------------------------------
   28.6  TABLA TÉCNICA
   -------------------------------------------------------------------------- */
.obta{ background: var(--obh-cream-2, #F2EDE3); padding: clamp(34px, 5vw, 56px) 0; font-family: 'Inter', system-ui, sans-serif; }
.obta-intro{ font-size: var(--t-3, 16px) !important; line-height: 1.6; color: var(--obh-tx-2) !important; margin: -12px 0 22px !important; max-width: 68ch; }
.obta-scroll{ background: #fff; border: 1px solid var(--obh-line); border-radius: var(--ob-r-card, 14px); overflow: hidden; }
.obta table{ width: 100%; border-collapse: collapse; margin: 0; }
.obta thead th{
  text-align: left;
  padding: 13px 18px;
  background: var(--obh-cream);
  border-bottom: 1px solid var(--obh-line);
  font-size: var(--ob-lab-size, 11px) !important; font-weight: 700 !important;
  letter-spacing: var(--ob-lab-ls, .18em); text-transform: uppercase;
  color: var(--obh-tx-2) !important;
}
.obta tbody th, .obta tbody td{
  padding: 13px 18px;
  border-bottom: 1px solid var(--obh-line);
  font-size: var(--t-3, 16px);
  line-height: 1.3;
  color: var(--obh-tx-2);
  text-align: left;
}
.obta tbody th{ font-weight: 600; color: var(--obh-tx); }
.obta tbody tr:last-child th, .obta tbody tr:last-child td{ border-bottom: none; }
.obta tbody tr:hover{ background: var(--obh-gold-soft, #FBF3DC); }
.obta-nota{ font-size: var(--t-2, 14px) !important; color: var(--obh-tx-2) !important; margin: 14px 0 0 !important; }


/* --------------------------------------------------------------------------
   28.7  PREGUNTAS FRECUENTES

   Con <details>: se abre y cierra sin JavaScript, funciona con teclado, y
   Ctrl+F del navegador encuentra el texto aunque esté cerrado.
   -------------------------------------------------------------------------- */
.obfa{ background: var(--obh-cream); padding: clamp(34px, 5vw, 56px) 0; font-family: 'Inter', system-ui, sans-serif; }
.obfa-lista{ max-width: 900px; display: grid; gap: 8px; }

.obfa-item{
  background: #fff;
  border: 1px solid var(--obh-line);
  border-radius: var(--ob-r-card, 14px);
  overflow: hidden;
  transition: border-color var(--obh-ease);
}
.obfa-item[open]{ border-color: var(--obh-gold); }

.obfa-item summary{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px;
  min-height: 56px;                    /* zona táctil de sobra */
  cursor: pointer;
  list-style: none;
  font-size: var(--t-3, 16px);
  font-weight: 600;
  color: var(--obh-tx);
}
.obfa-item summary::-webkit-details-marker{ display: none; }
.obfa-item summary:hover{ color: var(--obh-gold-d); }
.obfa-item summary:focus-visible{ outline: 2px solid var(--obh-gold); outline-offset: -2px; }

/* El signo + que gira a × */
.obfa-item summary i{
  position: relative;
  width: 18px; height: 18px;
  flex-shrink: 0;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.obfa-item summary i::before,
.obfa-item summary i::after{
  content: ""; position: absolute; top: 50%; left: 0;
  width: 18px; height: 2px;
  background: var(--obh-gold-d);
  border-radius: 2px;
}
.obfa-item summary i::after{ transform: rotate(90deg); }
.obfa-item[open] summary i{ transform: rotate(135deg); }
@media (prefers-reduced-motion: reduce){ .obfa-item summary i{ transition: none; } }

.obfa-r{ padding: 0 20px 18px; }
.obfa-r p{
  font-size: var(--t-3, 16px) !important;
  line-height: 1.65 !important;
  color: var(--obh-tx-2) !important;
  margin: 0 0 10px !important;
  max-width: 72ch;
}
.obfa-r p:last-child{ margin-bottom: 0 !important; }


/* --------------------------------------------------------------------------
   28.8  TEXTO LARGO
   -------------------------------------------------------------------------- */
.oble{ background: var(--obh-cream-2, #F2EDE3); padding: clamp(34px, 5vw, 56px) 0 clamp(44px, 6vw, 70px); font-family: 'Inter', system-ui, sans-serif; }
.oble-wrap{ max-width: 900px !important; }
.oble p{
  font-size: var(--t-3, 16px) !important;
  line-height: 1.75 !important;
  color: var(--obh-tx-2) !important;
  margin: 0 0 18px !important;
}
.oble h3{
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: var(--t-5, 26px) !important; font-weight: 300 !important;
  color: var(--obh-tx) !important;
  margin: 30px 0 14px !important;
}
.oble-puntos{ list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.oble-puntos li{
  position: relative;
  padding-left: 26px;
  font-size: var(--t-3, 16px);
  line-height: 1.65;
  color: var(--obh-tx-2);
  margin: 0;
}
.oble-puntos li::before{
  content: ""; position: absolute; left: 0; top: 10px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--obh-gold);
}
.oble-puntos strong{ color: var(--obh-tx); }


/* --------------------------------------------------------------------------
   28.9  MÓVIL
   -------------------------------------------------------------------------- */
@media (max-width: 1000px){
  .obcab-wrap{ grid-template-columns: 1fr; gap: 26px; }
  .obpr-lista{ grid-template-columns: repeat(2, 1fr); }
  .obve-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px){

  .obm-wrap, .obcab-wrap, .obpr-wrap, .obve-wrap,
  .obta-wrap, .obfa-wrap, .oble-wrap{ padding: 0 18px; }

  /* EL DATO PRIMERO. En móvil la cifra va antes que el discurso. */
  .obcab-dato{ order: -1; padding: 18px; }
  .obcab-wrap{ gap: 20px; }
  .obcab{ padding: 20px 0 34px; }

  .obpr-lista{ grid-template-columns: 1fr; gap: 10px; }
  .obve-grid{ grid-template-columns: 1fr; gap: 10px; }

  /* La tarjeta con el número al lado, no encima: ahorra 48px por tarjeta */
  .obpr-paso{
    display: grid;
    grid-template-columns: 34px 1fr;
    grid-template-areas: "n titulo" ". texto";
    column-gap: 13px; row-gap: 4px;
    padding: 16px;
  }
  .obpr-n{ grid-area: n; margin: 0; }
  .obpr-paso h3{ grid-area: titulo; align-self: center; }
  .obpr-paso p{ grid-area: texto; }

  .obve-card{
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-areas: "ico titulo" ". texto";
    column-gap: 13px; row-gap: 4px;
    padding: 16px;
  }
  .obve-ico{ grid-area: ico; margin: 0; }
  .obve-card h3{ grid-area: titulo; align-self: center; }
  .obve-card p{ grid-area: texto; }

  /* LA TABLA DEJA DE SER TABLA.
     Cinco columnas en 390px obligan a scroll lateral y ahí se pierde
     la gente. Cada fila pasa a ser una ficha con sus etiquetas. */
  .obta thead{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .obta table, .obta tbody, .obta tr, .obta th, .obta td{ display: block; width: 100%; }
  .obta-scroll{ background: transparent; border: none; border-radius: 0; }
  .obta tbody tr{
    background: #fff;
    border: 1px solid var(--obh-line);
    border-radius: var(--ob-r-card, 14px);
    padding: 6px 0;
    margin-bottom: 10px;
  }
  .obta tbody tr:hover{ background: #fff; }
  .obta tbody th{
    font-family: 'Fraunces', Georgia, serif;
    font-size: var(--t-4, 20px);
    font-weight: 400;
    border-bottom: 1px solid var(--obh-line);
    padding: 10px 16px 12px;
  }
  .obta tbody td{
    display: flex; justify-content: space-between; gap: 14px;
    padding: 8px 16px;
    border-bottom: none;
    font-size: 15px;
  }
  .obta tbody td::before{
    content: attr(data-col);
    font-size: var(--ob-lab-size, 11px);
    font-weight: 700;
    letter-spacing: var(--ob-lab-ls, .18em);
    text-transform: uppercase;
    color: var(--obh-tx-2);
    flex-shrink: 0;
  }
  .obta tbody td{ text-align: right; color: var(--obh-tx); }

  .obfa-item summary{ padding: 14px 16px; font-size: 15px; }
  .obfa-r{ padding: 0 16px 16px; }
  .oble-wrap{ max-width: none !important; }
}


/* ==========================================================================
   29. GANARLE AL TEMA DONDE HACE FALTA
   ==========================================================================
   COMPROBADO EN LA WEB, NO SUPUESTO:

   Nuestro CSS se carga en la posición 25 de 98. Hay 73 hojas que van
   DESPUÉS, incluida base.min.css del tema. Con la misma especificidad,
   gana la última: la del tema.

   El caso que se veía: los botones de idioma. El tema los pilla con
       :is(.btn, .button, button, [type="submit"], [type="button"])
   que vale lo mismo que .obh-lang-b, así que ganaba él:
       55x42px, radio 0, min-height 42px   en vez de   35x24px, radio 5px

   Aquí subimos la especificidad de lo nuestro poniendo el padre delante.
   .obh .obh-lang-b vale más que :is(...) y ya no hay pelea.
   ========================================================================== */

.obh .obh-lang{ display: flex; gap: 4px; align-items: center; }

.obh .obh-lang-b{
  padding: 3px 10px;
  border: none;
  background: transparent;
  border-radius: 5px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.4;
  color: var(--obh-tx-inv-2);
  min-height: 0;
  height: auto;
  width: auto;
  box-shadow: none;
  text-transform: none;
  cursor: pointer;
  transition: var(--obh-ease);
}
.obh .obh-lang-b.is-on{ background: var(--obh-gold); color: var(--obh-ink); }
.obh .obh-lang-b:not(.is-on):hover{ background: rgba(255,255,255,.12); color: var(--obh-tx-inv); }
.obh .obh-lang-b:focus-visible{ outline: 2px solid var(--obh-gold); outline-offset: 2px; }

/* Lo mismo para los otros botones nuestros que el tema podría pisar */
.obh .obh-tool,
.obk .obk-seg button,
.obq .obq-chip,
.obv .obv-tile{
  height: auto;
  width: auto;
  text-transform: none;
  box-shadow: none;
}
.obq .obq-chip{ min-height: 38px; }
.obk .obk-seg button{ min-height: 44px; width: 100%; }
.obv .obv-tile{ width: 100%; min-height: 0; }