@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;900&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================
   HABLIKO · CAPA STEAMPUNK  (override, no toca el markup)
   Latón · cobre · pergamino · pátina. Se aplica encima del CSS
   base redefiniendo las variables --hbk-* y algunos componentes.
   Cargar SIEMPRE después del <style> base / de hbk-seo.css.
   ============================================================ */

:root{
  /* Pergamino / superficies */
  --hbk-cream:#D9C6A0;
  --hbk-sand:#CBB585;
  --hbk-ink:#2A1E12;
  --hbk-ink-soft:#6A5333;
  /* Latón / cobre (acento primario) */
  --hbk-fox:#B26A2A;
  --hbk-fox-deep:#8A4E1B;
  /* Bronce oscuro (secciones oscuras, antes verde pino) */
  --hbk-pine:#2A2016;
  --hbk-pine-soft:#7A5F3C;
  /* Oro/latón brillante */
  --hbk-gold:#D9B23A;
  --hbk-line:rgba(42,24,10,.20);
  --hbk-radius:10px;
  --hbk-shadow:0 16px 42px -20px rgba(42,24,10,.6);
  --hbk-display:"Fraunces",Georgia,serif;      /* titulares siguen legibles */
  --hbk-engrave:"Cinzel","Fraunces",serif;      /* placas grabadas */
  /* Gradientes metálicos */
  --hbk-brass:linear-gradient(135deg,#F0D68A 0%,#C9A227 40%,#8A5A1E 74%,#6E4410 100%);
  --hbk-brass-h:linear-gradient(135deg,#F6E09A 0%,#D3AC2E 40%,#956320 74%,#764C14 100%);
  --hbk-copper:linear-gradient(135deg,#D89A5E 0%,#B26A3A 46%,#7A4423 100%);
}

/* Textura de papel sutil sobre el pergamino */
body{
  background-color:var(--hbk-cream)!important;
  background-image:
    radial-gradient(rgba(90,60,25,.055) 1px,transparent 1px),
    radial-gradient(rgba(90,60,25,.04) 1px,transparent 1px)!important;
  background-size:22px 22px,22px 22px!important;
  background-position:0 0,11px 11px!important;
}

/* Acentos grabados en Cinzel */
.hbk-brand,.hbk-eyebrow,.hbk-btn,.hbk-price,.hbk-stat b,.hbk-step-n,
.hbk-level b,.hbk-plan h3,.hbk-price small{font-family:var(--hbk-engrave)!important;}
.hbk-eyebrow{letter-spacing:.2em!important;}

/* --------- Botones metálicos --------- */
.hbk-btn{
  text-transform:uppercase;letter-spacing:.06em;font-weight:700!important;
  border-radius:11px!important;position:relative;
}
.hbk-btn--primary{
  background:var(--hbk-brass)!important;color:#2A1A06!important;
  border:1px solid #5E3B12!important;text-shadow:0 1px 0 rgba(255,246,214,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 5px rgba(60,35,8,.38),
             0 8px 16px -8px rgba(42,24,10,.6)!important;
}
.hbk-btn--primary:hover{background:var(--hbk-brass-h)!important;filter:brightness(1.03);transform:translateY(-2px)}
/* remaches en los extremos del CTA principal */
.hbk-btn--primary::before,.hbk-btn--primary::after{
  content:"";position:absolute;top:50%;width:6px;height:6px;border-radius:50%;
  transform:translateY(-50%);
  background:radial-gradient(circle at 35% 30%,#FBEFC6,#8A5A1E 70%,#4A2E0A);
  box-shadow:0 1px 1px rgba(0,0,0,.5),inset 0 0 1px rgba(255,255,255,.6);
}
.hbk-btn--primary::before{left:10px}
.hbk-btn--primary::after{right:10px}
.hbk-btn--ghost{
  background:linear-gradient(180deg,#EAD196,#C9A227)!important;color:#3A2A10!important;
  border:1px solid #7A5310!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 10px -6px rgba(42,24,10,.5)!important;
}
.hbk-btn--ghost:hover{background:linear-gradient(180deg,#F0DBA6,#D3AC2E)!important;transform:translateY(-2px)}

/* --------- CABECERA (rehecha) --------- */
.hbk-header{
  position:sticky;top:0;z-index:40;
  background:linear-gradient(180deg,#3A2C18 0%,#2A2012 100%)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border-bottom:3px solid #C9A227!important;
  box-shadow:0 4px 14px -6px rgba(0,0,0,.5);
}
.hbk-nav{gap:10px;min-height:64px}
.hbk-nav .hbk-btn{white-space:nowrap}
.hbk-brand{color:#F1DCA0!important}
.hbk-brand img,.hbk-brand svg{border-radius:8px;box-shadow:0 0 0 2px #C9A227,0 2px 6px rgba(0,0,0,.4)}
.hbk-nav-install img{box-shadow:0 0 0 1px #C9A227;border-radius:9px}

/* Proporciones móvil de la cabecera (el fallo del botón gigante) */
@media(max-width:900px){
  .hbk-nav-cta{display:inline-flex!important;padding:10px 16px!important;font-size:13px!important}
}
@media(max-width:640px){
  .hbk-header .hbk-btn--ghost{display:none!important}   /* "Para institutos" fuera en móvil */
}
@media(max-width:400px){
  .hbk-brand{font-size:18px!important}
  .hbk-nav-cta{padding:9px 12px!important;font-size:12.5px!important}
  .hbk-nav{gap:8px}
}

/* --------- Resaltes de titular (em / palabra rotativa) --------- */
.hbk-h1 em,.hbk-rot,.hbk-rot-lang{color:var(--hbk-fox-deep)!important}

/* --------- Tarjeta "corrección en vivo" + chip de Foxi --------- */
.hbk-card{
  background:linear-gradient(180deg,#F3E7CB,#E7D3AC)!important;
  border:1px solid var(--hbk-line)!important;border-radius:14px!important;
  box-shadow:inset 0 0 0 2px rgba(201,162,39,.35),inset 0 1px 0 rgba(255,255,255,.5),var(--hbk-shadow)!important;
}
.hbk-foxchip{
  position:relative;
  background:radial-gradient(circle at 50% 40%,#EFD9B4,#E4D0A6)!important;
  border:2px solid #6E4410;box-shadow:inset 0 0 0 2px #C9A227;
}
.hbk-foxchip::before{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px dashed #7A5310;opacity:.5;animation:hbkCog 22s linear infinite;
}
@keyframes hbkCog{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.hbk-foxchip::before{animation:none}}
.hbk-mode--on{background:var(--hbk-brass)!important;color:#2A1A06!important;border-color:#5E3B12!important}
.hbk-bubble--fox{background:linear-gradient(180deg,#332619,#241A10)!important;border:1px solid #5E3B12}
.hbk-bubble--fox b{color:var(--hbk-gold)!important}
.hbk-fix{color:var(--hbk-fox-deep)!important}
.hbk-strike{text-decoration-color:var(--hbk-fox)!important}

/* --------- Secciones oscuras = paneles de bronce --------- */
.hbk-pine-sec,.hbk-stat,.hbk-cta-final,.hbk-multi,.hbk-final.hbk-pine-sec{
  background:linear-gradient(180deg,#332619 0%,#241A10 100%)!important;
  border:1px solid #5E3B12;
}
.hbk-pine-sec{border-left:0;border-right:0}
.hbk-stat b,.hbk-multi b{color:var(--hbk-gold)!important}

/* --------- Pasos, niveles, precios, tabla, FAQ --------- */
.hbk-step,.hbk-level,.hbk-plan,.hbk-related a{
  background:linear-gradient(180deg,#F3E7CB,#EADCBB)!important;border:1px solid var(--hbk-line)!important;
}
.hbk-step-n{background:var(--hbk-brass)!important;color:#2A1A06!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 3px 8px -4px rgba(42,24,10,.6)}
.hbk-level b,.hbk-step-n,.hbk-price{color:var(--hbk-fox-deep)}
.hbk-plan--best{border:2px solid #8A5A1E!important}
.hbk-plan--best::after{background:var(--hbk-brass)!important;color:#2A1A06!important;font-family:var(--hbk-engrave);border:1px solid #5E3B12}
.hbk-plan li::before{border-left-color:var(--hbk-fox)!important;border-bottom-color:var(--hbk-fox)!important}
.hbk-anchor{background:#EADCBB!important;border:1px solid var(--hbk-line)}
.hbk-offer{border:1.5px dashed var(--hbk-fox)!important;background:#F3E7CB!important}
.hbk-table{background:#F3E7CB!important;border:1px solid var(--hbk-line)!important}
.hbk-table thead th{background:var(--hbk-sand)!important;font-family:var(--hbk-engrave)}
.hbk-yes{color:#4B6B3A!important}
.hbk-q summary::after{color:var(--hbk-fox-deep)!important}

/* --------- Footer + sticky móvil --------- */
.hbk-footer{background:linear-gradient(180deg,#241A10,#1A130B)!important}
.hbk-sticky{background:rgba(42,32,18,.96)!important;border-top:3px solid #C9A227!important;backdrop-filter:none!important}

/* --------- Migas y QR (satélite) --------- */
.hbk-crumbs a{color:var(--hbk-fox-deep)!important}
.hbk-qr-col img.hbk-code{background:#fff;box-shadow:0 0 0 2px #C9A227,inset 0 0 0 3px #fff}

/* ============================================================
   FOXI DINÁMICO  ·  componente .foxi-logo (retratos que rotan)
   Anillo en latón/cobre para casar con el tema steampunk.
   El motor JS (hbk-foxi.js) inyecta las imágenes y el fundido.
   ============================================================ */
.foxi-logo{
  --fl-size:36px;
  --fl-ring:conic-gradient(from 210deg,#F5DE9A,#C9A227,#8A5A1E,#B26A3A,#F5DE9A);
  display:inline-block;vertical-align:middle;position:relative;flex:none;
  width:var(--fl-size);height:var(--fl-size);border-radius:50%;padding:3px;
  background:var(--fl-ring);cursor:pointer;-webkit-tap-highlight-color:transparent;
  box-shadow:0 2px 8px -2px rgba(42,24,10,.6);
  animation:fl-float 5.5s ease-in-out infinite;will-change:transform;
}
.foxi-logo::after{content:"";position:absolute;inset:-6px;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(201,162,39,.45),transparent 70%);
  opacity:0;transition:opacity .3s}
.foxi-logo:hover::after{opacity:1}
.foxi-logo .fl-frame{display:block;position:relative;width:100%;height:100%;border-radius:50%;
  overflow:hidden;background:#1a1206;
  box-shadow:inset 0 0 0 2px rgba(255,246,214,.25),0 6px 16px -8px rgba(0,0,0,.55);
  animation:fl-breathe 6s ease-in-out infinite}
.foxi-logo .fl-frame img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 34%;opacity:0;transition:opacity .6s ease}
.foxi-logo .fl-frame img.on{opacity:1}
.foxi-logo:hover{animation:fl-wobble 1.1s ease-in-out infinite}
@keyframes fl-float{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-5px) rotate(1.2deg)}}
@keyframes fl-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes fl-wobble{0%,100%{transform:translateY(-2px) rotate(-3deg) scale(1.05)}50%{transform:translateY(-5px) rotate(3deg) scale(1.05)}}
@media(prefers-reduced-motion:reduce){.foxi-logo,.foxi-logo .fl-frame,.foxi-logo:hover{animation:none!important}}
/* En la cabecera de bronce, un pelín de separación con el texto de marca */
.hbk-brand .foxi-logo{margin-right:2px}

/* ── Palabra rotativa del titular: ticker suave (sin hueco al cambiar) ──
   Antes se desvanecía a opacidad 0 (dejaba un hueco visible ~350ms).
   Ahora la palabra saliente sube y se difumina mientras la entrante baja
   a su sitio, de modo que la ranura nunca queda vacía. */
.hbk-rot,.hbk-rot-lang{
  display:inline-block;
  transition:opacity .28s ease, transform .28s ease;
  will-change:opacity, transform;
}
.hbk-rot.is-out,.hbk-rot-lang.is-out{
  opacity:0;
  transform:translateY(-0.38em);
}
@media(prefers-reduced-motion:reduce){
  .hbk-rot,.hbk-rot-lang{transition:none}
  .hbk-rot.is-out,.hbk-rot-lang.is-out{transform:none;opacity:1}
}

/* ============================================================
   REPALETA (2026-09-08) · Marrones → AZUL fondo-4 · Ocres → neutros
   Azules: #0E2731 (más oscuro) · #12303B · #173845 · #3E5A66 (medio)
   Neutros: #F4EFE6 (pergamino claro) · #D7C7B3 (greige) · #e7c5aa (cálido)
   Acento de marca: naranja Foxi #E4571B / #C4460F (se mantiene)
   Va al final: gana al resto por cascada.
   ============================================================ */
:root{
  --hbk-cream:#F4EFE6;          /* superficie clara / fondo página */
  --hbk-sand:#D7C7B3;           /* greige (paneles suaves, bordes) */
  --hbk-ink:#12303B;            /* texto principal (azul profundo) */
  --hbk-ink-soft:#3E5A66;       /* texto suave (azul medio) */
  --hbk-fox:#E4571B;            /* acento naranja (se mantiene) */
  --hbk-fox-deep:#C4460F;
  --hbk-pine:#12303B;           /* secciones oscuras (antes bronce) */
  --hbk-pine-soft:#3E5A66;
  --hbk-gold:#e7c5aa;           /* antes oro; ahora neutro cálido */
  --hbk-line:rgba(18,48,59,.18);
  /* Metálicos "champán" neutros (antes latón/cobre) */
  --hbk-brass:linear-gradient(135deg,#F7F2EA 0%,#e7c5aa 42%,#D7C7B3 74%,#C9B7A1 100%);
  --hbk-brass-h:linear-gradient(135deg,#FBF7F0 0%,#EED0B4 42%,#DDCDB8 74%,#D0BEA8 100%);
  --hbk-copper:linear-gradient(135deg,#EFD9C4 0%,#e7c5aa 46%,#CDB79E 100%);
}

/* Textura de papel: puntos azulados en vez de marrones */
body{
  background-color:var(--hbk-cream)!important;
  background-image:
    radial-gradient(rgba(18,48,59,.055) 1px,transparent 1px),
    radial-gradient(rgba(18,48,59,.04) 1px,transparent 1px)!important;
}

/* Cabecera azul */
.hbk-header{
  background:linear-gradient(180deg,#173845 0%,#0E2731 100%)!important;
  border-bottom:3px solid #D7C7B3!important;
}
.hbk-brand{color:#F4EFE6!important}
.hbk-brand img,.hbk-brand svg{box-shadow:0 0 0 2px #D7C7B3,0 2px 6px rgba(0,0,0,.4)!important}
.hbk-nav-install img{box-shadow:0 0 0 1px #D7C7B3!important}

/* CTA principal = naranja de marca (pop) · fantasma = champán neutro */
.hbk-btn--primary{
  background:var(--hbk-fox)!important;color:#fff!important;border:1px solid #A83B0C!important;
  text-shadow:0 1px 0 rgba(0,0,0,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 16px -8px rgba(18,48,59,.6)!important;
}
.hbk-btn--primary:hover{background:var(--hbk-fox-deep)!important}
.hbk-btn--primary::before,.hbk-btn--primary::after{
  background:radial-gradient(circle at 35% 30%,#FFE9D6,#C4460F 70%,#7A2A08)!important;
}
.hbk-btn--ghost{
  background:linear-gradient(180deg,#F4EFE6,#D7C7B3)!important;color:#12303B!important;
  border:1px solid #C3B199!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 4px 10px -6px rgba(18,48,59,.5)!important;
}
.hbk-btn--ghost:hover{background:linear-gradient(180deg,#FBF7F0,#E1D2BE)!important}

/* Tarjeta "corrección en vivo" + chip */
.hbk-card{
  background:linear-gradient(180deg,#FBF7F0,#E7DBC9)!important;
  box-shadow:inset 0 0 0 2px rgba(215,199,179,.55),inset 0 1px 0 rgba(255,255,255,.6),var(--hbk-shadow)!important;
}
.hbk-foxchip{
  background:radial-gradient(circle at 50% 40%,#F7F2EA,#e7c5aa)!important;
  border:2px solid #234A58!important;box-shadow:inset 0 0 0 2px #D7C7B3!important;
}
.hbk-foxchip::before{border:2px dashed #3E5A66!important}
.hbk-bubble--fox{background:linear-gradient(180deg,#173845,#0E2731)!important;border:1px solid #234A58!important}
.hbk-bubble--fox b{color:#e7c5aa!important}

/* Secciones oscuras = paneles azules */
.hbk-pine-sec,.hbk-stat,.hbk-cta-final,.hbk-multi,.hbk-final.hbk-pine-sec{
  background:linear-gradient(180deg,#173845 0%,#0E2731 100%)!important;border:1px solid #234A58!important;
}
.hbk-stat b,.hbk-multi b{color:#e7c5aa!important}

/* Pasos, niveles, precios, tabla, FAQ */
.hbk-step,.hbk-level,.hbk-plan,.hbk-related a{
  background:linear-gradient(180deg,#FBF7F0,#EFE3D2)!important;border:1px solid var(--hbk-line)!important;
}
.hbk-step-n{background:var(--hbk-brass)!important;color:#12303B!important}
.hbk-plan--best{border:2px solid #234A58!important}
.hbk-plan--best::after{background:var(--hbk-brass)!important;color:#12303B!important;border:1px solid #C3B199!important}
.hbk-anchor{background:#EFE3D2!important;border:1px solid var(--hbk-line)!important}
.hbk-offer{border:1.5px dashed var(--hbk-fox)!important;background:#FBF7F0!important}
.hbk-table{background:#FBF7F0!important;border:1px solid var(--hbk-line)!important}
.hbk-table thead th{background:var(--hbk-sand)!important}

/* Footer + sticky móvil azules */
.hbk-footer{background:linear-gradient(180deg,#0E2731,#081920)!important}
.hbk-sticky{background:rgba(14,39,49,.96)!important;border-top:3px solid #D7C7B3!important}
.hbk-qr-col img.hbk-code{box-shadow:0 0 0 2px #D7C7B3,inset 0 0 0 3px #fff!important}

/* Anillo del Foxi: champán neutro en vez de latón */
.foxi-logo{--fl-ring:conic-gradient(from 210deg,#F7F2EA,#e7c5aa,#D7C7B3,#e7c5aa,#F7F2EA)!important}
.foxi-logo::after{background:radial-gradient(closest-side,rgba(231,197,170,.5),transparent 70%)!important}

/* Sube el texto de la 1ª sección (El problema): menos hueco tras el hero */
.hbk-hero + .hbk-section{padding-top:44px!important}

/* ============================================================
   HERO CON VÍDEO DE FONDO  (las capas <video> las inyecta hbk-foxi.js)
   Alto = proporción del vídeo -> se ve la imagen entera llenando el ancho.
   Texto del hero en claro + velo degradado para que se lea.
   ============================================================ */
.hbk-hero{position:relative;isolation:isolate;overflow:hidden;
  padding-top:88px!important;padding-bottom:108px!important;min-height:56.25vw}
.hbk-hero .hero-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:opacity 2.5s linear;will-change:opacity;filter:saturate(1.06) contrast(1.03)}
.hbk-hero .hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(4,12,18,.74) 0%,rgba(4,12,18,.5) 44%,rgba(4,12,18,.26) 100%)}
.hbk-hero .hbk-wrap{position:relative;z-index:2}
.hbk-hero .hbk-eyebrow{color:#8fd8f0!important}
.hbk-hero .hbk-h1{color:#f4fafe!important;text-shadow:0 2px 22px rgba(0,0,0,.55)}
.hbk-hero .hbk-h1 em{color:#ffd9a3!important}
.hbk-hero .hbk-rot{color:#7fd0ef!important}
.hbk-hero .hbk-lead{color:#e6eef4!important;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.hbk-hero .hbk-microcopy{color:#cfe0ea!important}
.hbk-hero .hbk-qr-block span{color:#e6eef4!important}
@media(max-width:820px){.hbk-hero .hero-scrim{background:rgba(4,12,18,.62)}}
@media(prefers-reduced-motion:reduce){.hbk-hero .hero-v{transition:none}}

/* Hero de páginas SECUNDARIAS: fondo estático fijo, el texto desfila por encima */
.hbk-hero.hero-static{min-height:clamp(340px,52vh,560px)!important;
  background-position:center;background-size:cover;background-repeat:no-repeat;background-attachment:fixed;
  display:flex;align-items:center}
.hbk-hero.hero-static .hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,12,18,.66),rgba(4,12,18,.46))}
@media(max-width:820px){.hbk-hero.hero-static{background-attachment:scroll}}

/* ============================================================
   ARREGLOS MÓVIL (2026-09-09)
   ============================================================ */
/* Ninguna página debe poder desplazarse en horizontal */
html,body{overflow-x:hidden!important}

@media(max-width:640px){
  /* Tabla comparativa: scroll horizontal propio en vez de cortarse
     (y así deja de empujar/cortar el resto de la sección) */
  .hbk-table{display:block!important;width:100%!important;overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;border-radius:10px}
  .hbk-table th,.hbk-table td{padding:12px 12px!important;font-size:14px!important;white-space:normal}
  .hbk-table thead th{font-size:14px!important}

  /* CTA fija inferior: que el texto quepa (se ajusta a 1-2 líneas) */
  .hbk-sticky .hbk-btn{white-space:normal!important;line-height:1.15;
    padding:12px 14px!important;font-size:14.5px!important;letter-spacing:.02em!important}
}

/* Hero: la tarjeta de ejemplo alineada ARRIBA (no centrada), para que NO suba/baje
   cuando cambia la palabra rotativa del titular (que varía el alto del texto). */
.hbk-hero-grid{align-items:start!important}
.hbk-hero-grid .hbk-card{align-self:start}

/* Botones pequeños: quita los remaches para que el texto respire */
@media(max-width:480px){
  .hbk-btn--primary::before,.hbk-btn--primary::after{display:none!important}
  .hbk-nav-cta{letter-spacing:.02em!important}
}