/* =========================================================
   V2 · 15-10-2026 · TODA la web en negro, naranja de acento y letras blancas.
   Nada de fondos blancos ni claros (regla de Pedro). Las secciones se separan
   con un filete oscuro, no con cambios de fondo.
   Un solo gesto propio: el marcador naranja que se dibuja bajo las frases
   destacadas de los titulares. Botones planos naranjas. Sin halos ni brillos.
   ========================================================= */
:root {
  --negro: #0D0D0D;          /* fondo de toda la web */
  --negro-2: #151515;        /* tarjetas */
  --negro-3: #1E1E1E;        /* tarjetas al pasar / campos */
  --linea-osc: #2A2A2A;      /* filetes y bordes */
  --papel: #0D0D0D; --papel-2: #0D0D0D; --blanco: #FFFFFF;
  --tinta: #F4F4F4;          /* texto principal: 17:1 */
  --tinta-suave: #B3B3B3;    /* texto secundario: 9:1 */
  --claro: #F4F4F4; --claro-suave: #B3B3B3;
  --naranja-txt: #FF8A33;    /* enlaces sobre negro */
  --naranja-tit: #FF6B00;
  --radio: 14px; --radio-s: 10px;
  color-scheme: dark;
}
body { background: var(--negro); color: var(--tinta); }
h1, h2, h3 { color: var(--blanco); }
h1, h2 { letter-spacing: -.02em; font-stretch: 112%; }
a { color: var(--naranja-txt); }
::selection { background: var(--naranja); color: var(--negro); }

/* fondos: todo negro; cada bloque se separa con un filete fino */
.hz-section, .hz-section:nth-of-type(odd), .hz-local, .hp-sec, .hp-alt, .hw-papel, .hz-reviews, .hz-final, .hp-final, .hw-banda-lead { background: var(--negro); }
.hz-section, .hz-local, .hp-sec, .hz-reviews, .hz-final, .hp-final, .hw-banda-lead, .hw-papel { border-top: 1px solid var(--linea-osc); }
.hz-hero, .hp-hero, .hw-cabeza { background: var(--negro); }
.hw-cabeza { border-bottom: 1px solid var(--linea-osc); }

/* fuera la decoración difusa */
.hz-hero::before, .hp-hero::before, .hw-cabeza::before, .hz-final::before, .hp-final::before,
.hz-hero::after, .hp-hero::after, .hw-cabeza::after, .hz-highlight::after, .hz-price::before, .hp-offer::before,
.hz-service::before { content: none; }

/* --- palabras destacadas de los titulares: en naranja, sin subrayados --- */
h1 span, h2 span, .hp-hero h1 .o { color: var(--naranja) !important; background: none !important; }

/* --- escala de letra (18 px de base; titulares con proporción 1,25) --- */
body { font-size: 18px; line-height: 1.65; }
h1, .hw-cabeza h1 { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.5rem); line-height: 1.08; font-weight: 800; font-stretch: 108%; letter-spacing: -.02em; }
.hz-hero-title, .hp-hero h1 { font-size: clamp(2.5rem, 1.7rem + 3vw, 4.2rem); line-height: 1.05; font-weight: 800; font-stretch: 108%; }
h2 { font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem); line-height: 1.15; font-weight: 800; font-stretch: 106%; }
h3 { font-size: clamp(1.2rem, 1.1rem + .4vw, 1.4rem); line-height: 1.3; font-weight: 700; font-stretch: 100%; }
p, li { font-size: 1.06rem; }
.hz-p, .hz-hero-sub, .hp-sub, .hp-lead { font-size: 1.15rem; }
small, .hzl-note, .hz-rating, .hw-meta { font-size: .95rem; }

/* --- texto --- */
.hz-p, .hz-local p, .hw-texto p, .hw-texto li, .hp-lead, .hp-casesub { color: var(--tinta-suave); }
.hw-texto > p:first-child { color: var(--tinta); }
.hw-texto b, .hw-texto strong, .hz-p strong, .hz-p b { color: var(--blanco); }
.hz-section .hz-note, .hp-rev { color: var(--tinta-suave); }
.hp-rev b { color: var(--blanco); }

/* --- botones: naranja plano, letra negra --- */
.hw-boton, .hzl-btn, .hz-btn {
  border-radius: 10px; border: 0; background: var(--naranja); color: #111; font-weight: 800;
  box-shadow: none; transition: background .2s, transform .15s;
}
.hw-boton:hover, .hzl-btn:hover, .hz-btn:hover { background: #FF8A33; transform: translateY(-1px); box-shadow: none; }
.hw-boton:active, .hzl-btn:active, .hz-btn:active { transform: translateY(1px); }
.hz-btn--ghost { background: transparent; color: var(--blanco); box-shadow: inset 0 0 0 2px #444; }
.hz-btn--ghost:hover { background: transparent; box-shadow: inset 0 0 0 2px var(--naranja); }
.hw-boton--cab { min-height: 44px; }

/* --- cabecera --- */
.hw-cab { background: rgba(13, 13, 13, .96); border-bottom: 1px solid var(--linea-osc); }
.hw-cab.es-scroll { box-shadow: none; }
.hw-burger { border-radius: 10px; background: var(--negro-3); }
.hw-sub { border-radius: 12px; background: var(--negro-2); border: 1px solid var(--linea-osc); box-shadow: 0 24px 50px -20px #000; }

/* --- el texto de encima del titular: sin píldora, con un cursor naranja --- */
.hz-kicker { padding: 0; border-radius: 0; background: none; text-transform: none; letter-spacing: 0; font: 700 1.05rem/1.3 var(--letra); color: var(--tinta-suave); display: inline-flex; align-items: center; gap: 10px; }
.hz-kicker::before { content: ''; width: .55em; height: 1.05em; background: var(--naranja); animation: hw-cursor 1.05s steps(1) infinite; }
@keyframes hw-cursor { 50% { opacity: 0; } }

/* --- portada --- */
.hz-hero-title { font-stretch: 118%; line-height: 1; }
.hzl-card { border-radius: var(--radio); border: 1px solid var(--linea-osc); background: var(--negro-2); box-shadow: none; }
.hzl-card:focus-within { border-color: var(--naranja); box-shadow: none; }
.hzl-in { border-radius: 8px; border: 1px solid #3A3A3A; background: var(--negro); }
.hzl-in:focus { background: var(--negro); }
.hzl-ok { border-radius: 8px; background: var(--negro-3); }
.hz-check { border-radius: 10px; background: var(--negro-2); border: 1px solid var(--linea-osc); }
.hz-check:hover { transform: none; border-color: #3A3A3A; }
.hz-check-icon { border-radius: 6px; }

/* --- tarjetas: gris muy oscuro, filete fino; al pasar, el filete se vuelve naranja --- */
.hz-step, .hp-step, .hz-case, .hp-case, .hp-vc, .hz-slots, .hw-faq, .hp-qa, .hz-testi, .hp-tcard, .hz-review-card, .hz-service, .hz-price, .hp-offer, .hz-highlight {
  background: var(--negro-2); color: var(--tinta); border: 1px solid var(--linea-osc); border-radius: var(--radio); box-shadow: none;
  transition: border-color .2s, transform .2s;
}
.hz-step:hover, .hp-step:hover, .hz-case:hover, .hp-case:hover, .hp-vc:hover, .hw-faq:hover, .hz-testi:hover, .hp-tcard:hover, .hz-review-card:hover, .hz-service:hover {
  border-color: var(--naranja); transform: translateY(-3px); box-shadow: none;
}
.hz-step p, .hp-step p, .hp-vc p, .hz-case-body p, .hp-case-body p, .hp-qa p, .hw-faq__resp p { color: var(--tinta-suave); }
.hz-step::before, .hp-step::before { color: var(--naranja); font-size: 2.4rem; }
.hp-vc::before { border-radius: 8px; }
.hz-case-client, .hp-case-client { color: var(--blanco); font-size: 1.15rem; }
.hz-highlight { font-size: 1.2rem; }
.hz-price--hot { border: 2px solid var(--naranja); }
.hz-service-icon { border-radius: 10px; background: var(--negro-3); }
.hz-service:hover .hz-service-icon { transform: none; }
.hz-badge { border-radius: 6px; text-transform: none; letter-spacing: 0; font-size: .95rem; }
.hz-inc li::before { border-radius: 6px; background: var(--naranja); color: #111; }
.hp-trust span { border-radius: 8px; background: var(--negro-2); border: 1px solid var(--linea-osc); }
.hp-risk span { border-radius: 8px; background: var(--negro-2); border: 1px solid var(--linea-osc); color: var(--tinta); }
.hp-risk span::before { color: var(--naranja); }
.hw-faq__mas { border-radius: 8px; background: var(--negro-3); }
.hw-faq__mas::before, .hw-faq__mas::after { background: var(--blanco); }
.hw-faq.esta-abierto .hw-faq__mas::before, .hw-faq.esta-abierto .hw-faq__mas::after { background: #111; }
.hw-texto .hw-faq { background: var(--negro-2); }

/* casos: la animación de carga dentro de una ventana de navegador */
.hz-case-top, .hp-case-top { background: #000; border-bottom: 1px solid var(--linea-osc); position: relative; padding-top: 24px; aspect-ratio: auto; }
.hz-case-top::before, .hp-case-top::before { content: ''; position: absolute; left: 12px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: #3A3A3A; box-shadow: 12px 0 0 #3A3A3A, 24px 0 0 #3A3A3A; }
.hz-case-top img, .hp-case-top img { aspect-ratio: 16 / 10; height: auto; object-position: top; transition: none; }
.hz-case:hover img, .hp-case:hover img { transform: none; object-position: top; }

/* páginas de servicio y artículos */
.hw-cabeza__foto { border-radius: var(--radio); transform: none; border: 1px solid var(--linea-osc); }
.hw-cabeza__foto:hover { transform: none; }
.hw-texto ul li::before { border-radius: 2px; transform: none; width: 8px; height: 8px; top: .66em; }
.hw-texto ol li::before { border-radius: 8px; background: var(--naranja); color: #111; }
.hw-texto img { border: 1px solid var(--linea-osc); }
.hw-texto th { background: var(--negro-3); color: var(--blanco); }
.hw-texto th, .hw-texto td { border-bottom: 1px solid var(--linea-osc); }
.hw-texto td { color: var(--tinta-suave); }

/* pie */
.hw-pie { border-top: 1px solid var(--linea-osc); }

/* botón fijo de presupuesto en el móvil */
.hw-fijo { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40; width: auto; transform: translateY(160%); transition: transform .3s var(--ease); box-shadow: 0 10px 30px -8px #000; }
.hw-fijo.ver { transform: none; }
@media (min-width: 900px) { .hw-fijo { display: none; } }
#gt_float_wrapper { transition: bottom .3s var(--ease); }
@media (max-width: 899px) { body.hay-fijo #gt_float_wrapper { bottom: calc(84px + env(safe-area-inset-bottom)) !important; } }

/* sin la aparición en cascada: solo el marcador se mueve */
.js .hw-revela { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .hz-kicker::before { animation: none; } }