/* =============================================================================
   Hawk Tax Advisors — capa cinematográfica
   Personalidad: despacho de alta gama. Serif Fraunces con cursivas, oro sobre
   negro y bandas de papel crema. Aristas casi rectas (6 px), composición
   centrada y ceremonial. Nada que ver con la retícula técnica de Barracuda.
   ========================================================================== */

:root {
  --bg: #050505;
  --bg-2: #12100B;
  --fg: #F3EAD7;
  --fg-2: #CFC4AC;
  --fg-3: #9E9481;
  --light: #F7F2E7;
  --light-2: #EDE4D2;
  --ink: #17130C;
  --ink-2: #4A4133;
  --ink-3: #6B6050;
  --b1: #C9A14E;
  --b2: #8A6A2C;
  --b3: #E8CC7A;
  --on-b1: #17130C;
  --b-on-light: #6B5220;   /* el oro sobre papel tintado: #8A6A2C daba 3,98:1 */
  --grad: linear-gradient(115deg, #B8893A, #C9A14E 45%, #E8CC7A);
  --veil: 5, 5, 5;

  /* El quiz heredado usa estos dos nombres; se mantienen. */
  --gold: #C9A14E;
  --cream: #F3EAD7;
  --cream-muted: #9E9481;

  --font-d: "Fraunces", Georgia, serif;
  --font-b: "Inter", system-ui, sans-serif;
  --font-m: "JetBrains Mono", ui-monospace, monospace;

  --radius: 6px;
  --radius-sm: 4px;
  --maxw: 1220px;

  --st-curtain-bg: #050505;
  --st-progress-bg: var(--grad);
  --st-grain: .03;
}

/* El display de Hawk es de peso ligero: el serif manda por forma, no por grosor. */
h1, h2, h3 { font-weight: 400; letter-spacing: -.012em; }
.d0, .d1 { letter-spacing: -.018em; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--b3); }
.on-light h1 em, .on-light h2 em, .on-light h3 em { color: var(--b2); }
.eyebrow { font-weight: 500; letter-spacing: .26em; border-radius: 2px; }

body { background: var(--bg); }

/* --- héroe centrado -------------------------------------------------------- */
.hero { min-height: 100svh; display: flex; align-items: center; text-align: center;
  padding: 130px 0 5rem; }
.hero .wrap > * { margin-inline: auto; }
.hero h1 { margin-top: 1.6rem; max-width: 16ch; }
.hero .lead { margin-top: 1.8rem; text-align: center; max-width: 62ch; color: #DDD3BE; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.5rem; justify-content: center; }
.hero-emblem { width: clamp(72px, 9vw, 108px); margin: 0 auto; opacity: .95; mix-blend-mode: screen; }

.stats { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.6rem, 5vw, 4.5rem);
  margin-top: clamp(3rem, 6vw, 4.5rem); }
.stat { text-align: center; }
.stat b { display: block; font-family: var(--font-d); font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  font-weight: 400; color: var(--b3); letter-spacing: -.02em; }
.stat span { display: block; font-family: var(--font-m); font-size: .66rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--fg-3); margin-top: .55rem; max-width: 18ch; }

/* --- banda de perfiles ----------------------------------------------------- */
.belt { border-block: 1px solid rgba(201,161,78,.22); padding: 1.1rem 0;
  background: linear-gradient(90deg, #0A0803, #17110A, #0A0803); }
.belt .st-marquee-track { --st-marquee-gap: 2.4rem; --st-marquee-dur: 62s; }
.belt span { font-family: var(--font-m); font-size: .74rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--fg-3); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 2.4rem; }
.belt span::after { content: "✦"; color: var(--b1); }

/* --- servicios: papel crema ------------------------------------------------ */
.svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.7rem);
  margin-top: clamp(2.6rem, 5vw, 3.8rem); }
.svc article { background: #fff; border: 1px solid rgba(23,19,12,.09); border-radius: var(--radius);
  padding: clamp(1.6rem, 2.5vw, 2.1rem); box-shadow: var(--shadow-1);
  transition: box-shadow .35s, transform .35s var(--ease); }
.svc article:hover { box-shadow: var(--shadow-2); }
.svc-n { font-family: var(--font-m); font-size: .68rem; letter-spacing: .22em; color: var(--b2); }
.svc h3 { font-size: 1.32rem; margin-top: 1rem; }
.svc p { color: var(--ink-2); font-size: .945rem; margin-top: .8rem; }
.svc ul { list-style: none; margin-top: 1.3rem; border-top: 1px solid rgba(23,19,12,.08); padding-top: 1rem;
  display: grid; gap: .5rem; }
.svc li { font-size: .87rem; color: var(--ink-3); display: flex; gap: .6rem; align-items: baseline; }
.svc li::before { content: "✦"; color: var(--b1); font-size: .7rem; }
@media (max-width: 950px) { .svc { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .svc { grid-template-columns: 1fr; } }

/* --- método: cuatro tiempos, centrado -------------------------------------- */
.method { display: grid; gap: 0; margin-top: clamp(2.8rem, 5vw, 4rem);
  border-top: 1px solid rgba(201,161,78,.20); }
.method article { display: grid; grid-template-columns: 8rem 1fr; gap: clamp(1.2rem, 3vw, 3rem);
  padding: clamp(1.8rem, 3.2vw, 2.6rem) 0; border-bottom: 1px solid rgba(201,161,78,.20);
  align-items: baseline; }
.method-n { font-family: var(--font-d); font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 400;
  line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(201,161,78,.55); }
.method h3 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); }
.method p { color: var(--fg-2); margin-top: .8rem; max-width: 62ch; }
@media (max-width: 700px) { .method article { grid-template-columns: 1fr; gap: .5rem; } }

/* --- por qué: cuatro columnas con filete ----------------------------------- */
.why { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(2.6rem, 5vw, 3.8rem);
  border-top: 1px solid rgba(23,19,12,.12); }
.why > div { padding: clamp(1.6rem, 2.4vw, 2.1rem) clamp(1.1rem, 1.8vw, 1.6rem)
  clamp(1.6rem, 2.4vw, 2.1rem) 0; border-right: 1px solid rgba(23,19,12,.10); }
.why > div:not(:first-child) { padding-left: clamp(1.1rem, 1.8vw, 1.6rem); }
.why > div:last-child { border-right: 0; }
.why-mark { color: var(--b2); font-size: 1rem; }
.why h3 { font-size: 1.06rem; margin-top: .9rem; }
.why p { color: var(--ink-2); font-size: .91rem; margin-top: .6rem; }
@media (max-width: 900px) { .why { grid-template-columns: repeat(2, 1fr); }
  .why > div:nth-child(2n) { border-right: 0; }
  .why > div:nth-child(-n+2) { border-bottom: 1px solid rgba(23,19,12,.10); } }
@media (max-width: 540px) { .why { grid-template-columns: 1fr; }
  .why > div { border-right: 0 !important; border-bottom: 1px solid rgba(23,19,12,.10);
  padding-left: 0 !important; } }

/* --- compromisos: citas grandes -------------------------------------------- */
.vows { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 2.6rem);
  margin-top: clamp(2.8rem, 5vw, 4rem); }
.vow { border-left: 1px solid rgba(201,161,78,.35); padding-left: clamp(1.2rem, 2vw, 1.8rem); }
.vow blockquote { font-family: var(--font-d); font-style: italic; font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  line-height: 1.42; color: var(--fg); }
.vow cite { display: block; font-style: normal; font-family: var(--font-m); font-size: .66rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--b1); margin-top: 1.2rem; }
.vow small { display: block; font-family: var(--font-m); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fg-3); margin-top: .4rem; }
@media (max-width: 860px) { .vows { grid-template-columns: 1fr; } }

/* --- planes ----------------------------------------------------------------- */
.toggle { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--light-2);
  margin-top: 1.9rem; }
.toggle button { min-height: 44px; padding: .55rem 1.25rem; border-radius: 999px; font-size: .87rem;
  font-weight: 600; color: var(--ink-3); transition: background-color .3s, color .3s, box-shadow .3s; }
.toggle button.is-active { background: #fff; color: var(--ink); box-shadow: var(--shadow-1); }
.toggle .save { font-size: .72rem; color: var(--b-on-light); margin-left: .35rem; }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 1.8vw, 1.5rem);
  margin-top: clamp(2.4rem, 5vw, 3.4rem); align-items: start; }
.plan { background: #fff; border-radius: var(--radius); padding: clamp(1.7rem, 2.6vw, 2.2rem);
  border: 1px solid rgba(23,19,12,.09); box-shadow: var(--shadow-1); display: flex; flex-direction: column; }
.plan.is-top { background: linear-gradient(168deg, #14110A, #050505); color: var(--fg);
  border-color: var(--b1); box-shadow: 0 34px 70px -26px rgba(201,161,78,.45); }
.plan.is-top h3 { color: var(--fg); }
.plan-tag { font-family: var(--font-m); font-size: .63rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-3); }
.plan.is-top .plan-tag { color: var(--b3); }
.plan h3 { font-size: 1.7rem; margin-top: 1rem; }
.plan-price { margin-top: 1.2rem; display: flex; align-items: baseline; gap: .4rem; }
.plan-price b { font-family: var(--font-d); font-size: clamp(2.1rem, 3.2vw, 2.8rem); font-weight: 400;
  letter-spacing: -.02em; }
.plan-price span { font-family: var(--font-m); font-size: .74rem; color: var(--ink-3); }
.plan.is-top .plan-price span { color: var(--fg-3); }
.plan-desc { font-size: .93rem; color: var(--ink-2); margin-top: 1.1rem; }
.plan.is-top .plan-desc { color: var(--fg-2); }
.plan ul { list-style: none; margin-top: 1.5rem; display: grid; gap: .6rem; }
.plan li { display: flex; gap: .6rem; font-size: .89rem; color: var(--ink-2); align-items: baseline; }
.plan.is-top li { color: var(--fg-2); }
.plan li::before { content: "✦"; color: var(--b1); font-size: .68rem; flex: 0 0 auto; }
.plan .btn { margin-top: auto; width: 100%; margin-top: 1.9rem; }
[data-billing="monthly"] .p-year, [data-billing="annual"] .p-month { display: none; }
@media (max-width: 940px) { .plans { grid-template-columns: 1fr; } }

.addons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(23,19,12,.12); margin-top: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid rgba(23,19,12,.12); border-radius: var(--radius); overflow: hidden; }
.addons > div { background: var(--light); padding: clamp(1.2rem, 2vw, 1.6rem); }
.addons h4 { font-family: var(--font-d); font-size: 1.02rem; font-weight: 400; }
.addons b { display: block; font-family: var(--font-m); font-size: .92rem; color: var(--b2); margin-top: .5rem; }
.addons p { font-size: .85rem; color: var(--ink-2); margin-top: .7rem; }
@media (max-width: 900px) { .addons { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .addons { grid-template-columns: 1fr; } }

.note { margin-top: clamp(1.6rem, 3vw, 2.2rem); padding: clamp(1.3rem, 2.2vw, 1.8rem);
  border-left: 2px solid var(--b1); background: rgba(201,161,78,.07); border-radius: var(--radius); }
.note p { color: var(--ink-2); font-size: .93rem; max-width: 82ch; }
.note a { color: var(--b-on-light); font-weight: 600; display: inline-flex; align-items: center;
  margin-top: .9rem; min-height: 44px; }
.note a:hover { text-decoration: underline; }

/* --- formulario de contacto ------------------------------------------------ */
.contact-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-meta { list-style: none; margin-top: 2rem; display: grid; gap: 1rem; }
.contact-meta li { font-size: .93rem; color: var(--fg-2); word-break: break-word; }
.contact-meta span { display: block; font-family: var(--font-m); font-size: .62rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--b1); margin-bottom: .3rem; }

form[data-form] { background: rgba(243,234,215,.045); border: 1px solid rgba(201,161,78,.24);
  border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.2rem); }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-family: var(--font-m); font-size: .64rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--b1); margin-bottom: .5rem; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: .8rem 1rem; font: inherit; font-size: .95rem;
  color: var(--fg); background: rgba(5,5,5,.55); border: 1px solid rgba(243,234,215,.20);
  border-radius: var(--radius-sm); transition: border-color .25s, background-color .25s; }
.field textarea { min-height: 110px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #7E7566; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--b1); background: rgba(5,5,5,.75); outline-offset: 1px; }
.field select { appearance: none; background-image:
  linear-gradient(45deg, transparent 50%, var(--b1) 50%), linear-gradient(135deg, var(--b1) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.6rem; }
.field select option { background: #12100B; color: var(--fg); }
.field-error { display: block; font-size: .8rem; color: #E9A0A0; margin-top: .4rem; min-height: 1em; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #C46A6A; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }
.btn-submit { width: 100%; }
.btn-submit.is-sent { background: #2E7D53; color: #fff; }
.form-note { font-size: .84rem; color: var(--fg-3); margin-top: 1rem; text-align: center; }
.form-note.is-ok { color: var(--b3); }
[data-booking-status] { font-size: .84rem; color: var(--b3); margin-top: -.4rem; margin-bottom: 1rem; }
[data-booking-status].is-error { color: #E9A0A0; }

/* --- pie -------------------------------------------------------------------- */
footer { background: #030303; border-top: 1px solid rgba(201,161,78,.18); position: relative; z-index: 2; }
.foot-top { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.3fr; gap: 2rem;
  padding: clamp(3rem, 6vw, 4.5rem) 0 2.6rem; }
.foot-top h4 { font-family: var(--font-m); font-size: .64rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--fg-3); font-weight: 500; }
.foot-top ul { list-style: none; margin-top: 1.1rem; display: grid; gap: .55rem; }
.foot-top a, .foot-top button { font-size: .88rem; color: var(--fg-2); transition: color .25s; }
.foot-top a:hover, .foot-top button:hover { color: var(--b3); }
.foot-brand p { color: var(--fg-3); font-size: .87rem; margin-top: 1rem; max-width: 34ch; }
.foot-mark { font-family: var(--font-d); font-size: clamp(2.4rem, 12vw, 10rem); font-weight: 400;
  letter-spacing: -.03em; line-height: .85; color: transparent;
  -webkit-text-stroke: 1px rgba(201,161,78,.30); user-select: none; padding-bottom: .08em; }
.foot-legal { border-top: 1px solid rgba(201,161,78,.14); padding: 1.3rem 0 2.2rem;
  font-size: .81rem; color: var(--fg-3); display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between; }
.foot-legal a, .foot-legal button { color: var(--fg-3); }
.foot-legal a:hover, .foot-legal button:hover { color: var(--b3); }
@media (max-width: 860px) { .foot-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-top { grid-template-columns: 1fr; } }

/* --- marca ------------------------------------------------------------------ */
.brand { display: inline-flex; align-items: center; gap: .7rem; min-height: 44px; }
.brand img { width: 34px; height: auto; mix-blend-mode: screen; }
.brand-words { display: grid; line-height: 1; }
.brand-name { font-family: var(--font-d); font-size: 1.12rem; letter-spacing: .12em; color: var(--fg); }
.brand-tag { font-family: var(--font-m); font-size: .53rem; letter-spacing: .3em; color: var(--b1); margin-top: .28rem; }

/* --- banda de cookies ------------------------------------------------------- */
.cookie-banner { position: fixed; left: 50%; bottom: 1.2rem; transform: translate(-50%, 140%);
  z-index: 95; width: min(920px, calc(100% - 2rem)); background: rgba(10,9,6,.96);
  border: 1px solid rgba(201,161,78,.28); border-radius: var(--radius);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: transform .55s var(--ease); }
.cookie-banner.is-visible { transform: translate(-50%, 0); }
.cookie-inner { display: flex; align-items: center; gap: 1.2rem; padding: 1.15rem 1.4rem; flex-wrap: wrap; }
.cookie-icon { color: var(--b1); font-size: 1.1rem; }
.cookie-text { flex: 1; min-width: 240px; }
.cookie-title { font-family: var(--font-d); font-size: 1rem; color: var(--fg); }
.cookie-text p { font-size: .84rem; color: var(--fg-2); margin-top: .3rem; }
.cookie-text a { color: var(--b3); text-decoration: underline; }
.cookie-actions { display: flex; gap: .6rem; margin-left: auto; }
.cookie-actions .btn { min-height: 44px; padding: .6rem 1.2rem; font-size: .87rem; }

/* --- menú de cuenta --------------------------------------------------------- */
.account { position: relative; }
.account-menu { position: absolute; right: 0; top: calc(100% + .6rem); min-width: 220px;
  background: #12100B; border: 1px solid rgba(201,161,78,.26); border-radius: var(--radius);
  padding: .7rem; display: grid; gap: .2rem; opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .25s, transform .25s var(--ease), visibility .25s; box-shadow: var(--shadow-2); }
.account.is-open .account-menu { opacity: 1; visibility: visible; transform: none; }
.account-menu a, .account-menu button { display: block; padding: .6rem .8rem; min-height: 44px;
  font-size: .88rem; color: var(--fg-2); border-radius: var(--radius-sm); text-align: left;
  transition: background-color .2s, color .2s; }
.account-menu a:hover, .account-menu button:hover { background: rgba(201,161,78,.12); color: var(--fg); }
.account-hi { padding: .5rem .8rem; font-size: .82rem; color: var(--fg-3); }
.account-sep { height: 1px; background: rgba(201,161,78,.2); margin: .35rem 0; }
.account-toggle { min-height: 44px; }
/* Con sesion abierta la barra lleva DOS piezas: el boton que entra al area de
   cliente y, pegado a el, un desplegable estrecho solo con la flecha para los
   accesos directos y el cierre de sesion. Sin esto el segundo boton heredaba
   el ancho del primero y quedaba un rectangulo enorme con una flecha suelta. */
.account { display: flex; align-items: center; gap: .3rem; }
.account-caret { min-width: 44px; width: 44px; padding-left: 0; padding-right: 0; }
.account-caret svg { transition: transform .25s var(--ease); }
.account.is-open .account-caret svg { transform: rotate(180deg); }
.account [data-account-go] { text-decoration: none; }

/* El quiz heredado trae sus propios estilos en línea; sólo se le da marco. */
#hawk-quiz { border-radius: var(--radius) !important; }
#hawk-quiz .btn-primary { background: var(--grad); color: var(--on-b1); }

/* Velo del heroe: es ademas el objetivo del parallax de main.js, que sin el
   avisaba por consola de que no encontraba `.hero-mesh`. */
.hero-mesh { position: absolute; inset: -10% -5% auto; height: 70%; z-index: 1;
  pointer-events: none;
  background: radial-gradient(58% 62% at 50% 30%, rgba(201,161,78,.16), transparent 70%); }

/* --- pastilla del plan destacado ------------------------------------------
   En movil empezaba 28 px a la izquierda del borde de la pantalla y se veia
   cortada: `left` le llegaba resuelto a 28 px en lugar de al 50 % de la
   tarjeta. Se fija el centrado sin ambiguedad y se le pone tope de ancho,
   porque con `white-space: nowrap` una tarjeta estrecha no puede contenerla. */
.plan-card .plan-badge {
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 2rem);
  white-space: normal;
  text-align: center;
}

/* --- test de la portada (#test) --------------------------------------------
   Revisión de diseño 2026-08-22.

   1. Los iconos eran emoji (📞 💶 🗓️ 🤝 📊 🔍 · 🚨 🟡 🟢 · 🔴 ✅ 💡). Cada
      sistema operativo los dibuja con su propia paleta: sobre negro y oro
      aparecían pegatinas azules y verdes ajenas a la marca, con un peso
      distinto en cada máquina y sin heredar el color del contexto. Ahora son
      SVG de trazo de la misma familia que el resto del sitio.
   2. Los botones de respuesta se pintaban con `style.cssText` y el hover se
      hacía con `onmouseenter`/`onmouseleave` en JavaScript, así que **no había
      ningún estado de foco**: con el teclado no se veía qué opción estaba
      seleccionada. Ahora son CSS, con :hover y :focus-visible de verdad.
   -------------------------------------------------------------------------- */
.qz-ico { width: 1em; height: 1em; display: block; color: var(--b1); }
#qz-r-icon .qz-ico { margin-inline: auto; }

/* --- flechas de los botones: que no las encoja el flex --------------------
   `.btn svg` (cine.css) mide 17x17, pero al ser hijo de un contenedor flex
   SIN tamano intrinseco el navegador lo encogia hasta 0-13 px y la punta de
   la flecha quedaba recortada. `flex:0 0 auto` fija la caja; el `viewBox`
   del propio SVG (en el HTML) escala la rejilla de 24 a esos 17 px. */
.btn svg { flex: 0 0 auto; overflow: visible; }
.btn > svg { width: 17px; height: 17px; }

/* --- respuestas del test: contraste ---------------------------------------
   Estas tres respuestas son lo unico pulsable de la seccion y casi no se
   veian. Habia tres causas sumadas, y las tres estan corregidas aqui:

     1. El fondo era `rgba(255,255,255,.02)` — un 2% de blanco. Encima NO hay
        un color plano: hay una escena 3D animada con brillo (`data-stage-glow
        ="1.5"`), asi que el fondo real cambiaba fotograma a fotograma y en los
        destellos el boton desaparecia. Ahora la caja es practicamente opaca,
        de modo que el contraste ya no depende de lo que pase por detras.
     2. El texto era `--fg-3` (#9E9481), el gris de apoyo de la marca, pensado
        para textos secundarios, no para la unica accion de la seccion. Pasa a
        `--fg` (#F3EAD7): 16,2:1 sobre el fondo nuevo, muy por encima del 4,5:1
        que exige la norma.
     3. El borde al 18% de oro no llegaba a leerse como boton. Sube al 42% y
        el estado de hover deja de ser un matiz para ser un cambio evidente. */
.qz-opt {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: .9375rem;
  line-height: 1.45;
  padding: 14px 18px;
  border-radius: 10px;
  border: 1px solid rgba(201, 161, 78, .42);
  background: rgba(13, 9, 4, .88);
  color: var(--fg);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
@supports (backdrop-filter: blur(2px)) {
  /* Refuerzo por si la escena pasa muy clara justo detras del boton. */
  .qz-opt { backdrop-filter: blur(3px); }
}
.qz-opt:hover {
  border-color: var(--b1, #C9A14E);
  background: rgba(201, 161, 78, .16);
  color: #FFF7E6;
  box-shadow: 0 6px 20px -8px rgba(201, 161, 78, .5);
}
.qz-opt:focus-visible {
  outline: 2px solid var(--b3);
  outline-offset: 2px;
  border-color: var(--b1);
  background: rgba(201, 161, 78, .08);
  color: var(--fg);
}
.qz-opt:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) {
  .qz-opt { transition: none; }
  .qz-opt:active { transform: none; }
}

/* La tarjeta contenedora llevaba `rgba(255,255,255,.03)` en un `style=` del
   HTML. Se refuerza aqui para que el test entero se lea como una superficie
   sobre la escena, no como texto flotando encima de ella. */
#hawk-quiz {
  background: rgba(9, 6, 3, .72) !important;
  border-color: rgba(201, 161, 78, .3) !important;
  box-shadow: 0 24px 70px -30px rgba(0, 0, 0, .9);
}

.qz-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(201, 161, 78, .1);
  border-radius: 8px;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--fg-2, #D9CDB4);
  background: rgba(13, 9, 4, .8);
  border-color: rgba(201, 161, 78, .26);
}
.qz-item .qz-ico { width: 1.15em; height: 1.15em; margin-top: .12em; flex: 0 0 auto; }
.qz-punto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-top: .42em;
  flex: 0 0 auto;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .06);
}
.qz-punto-rojo  { color: #EF4444; }
.qz-punto-ambar { color: #F59E0B; }
.qz-punto-verde { color: #22C55E; }

/* --- reserva de sitio para el emblema -------------------------------------
   Los logotipos se dimensionan solo por `width` (o solo por `height` con
   `w-auto`), asi que hasta que la imagen no carga su otra dimension vale 0 y
   la maqueta da un salto. Declarando la proporcion nativa del PNG
   (1397x1126) el navegador reserva la caja desde el primer pintado. */
.brand img,
.hero-emblem,
.auth-brand img,
.st-curtain-mark img { aspect-ratio: 1397 / 1126; }

/* --- pie de las páginas legales -------------------------------------------
   El botón «Cambiar mis preferencias» de la página de cookies vive en la misma
   fila que los tres enlaces de `.legal-toc`, pero llevaba su aspecto copiado a
   mano en un atributo `style`: otro borde (`--line-2` en vez de `--line`), otro
   color de texto (oro en vez de crema), sin relleno de fondo, sin estado de
   hover y —al ser un `inline-block` con `min-height: 44px`— con la etiqueta
   pegada al borde de arriba mientras sus tres vecinos la tienen centrada.
   Aquí comparte exactamente la regla de sus vecinos, así que no puede volver a
   separarse. Va en esta hoja, y no en `styles.css`, porque `styles.css` se
   sirve minificado en producción y esta no. */
.legal-toc .legal-toc-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: .82rem;
  padding: .4rem .9rem;
  border: 1px solid var(--line, rgba(243, 234, 215, .10));
  border-radius: 999px;
  color: var(--cream-2, #cfc4ac);
  background: rgba(201, 161, 78, .04);
  transition: border-color .3s, color .3s;
}
.legal-toc .legal-toc-btn:hover {
  border-color: var(--gold, #C9A14E);
  color: var(--gold-soft, #e3c785);
}
@media (prefers-reduced-motion: reduce) { .legal-toc .legal-toc-btn { transition: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   Revisión con sesión iniciada — 2026-08-23
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. El lienzo 3D se llevaba el clic de los controles que tiene debajo.
   `.st-stage` es decoración (va con aria-hidden="true"), pero es un
   `position: absolute; inset: 0` con `z-index: 0` dentro de `.scene`. En el
   orden de pintado de CSS, un posicionado con z-index 0 va POR ENCIMA de todo
   el contenido en flujo normal que no esté posicionado — y ni `main.pricing-wrap`
   ni `main.legal-wrap` lo están. Medido con elementFromPoint en los 7 anchos,
   con y sin sesión: el conmutador «Pago mensual / Pago anual» de precios.html
   y los enlaces cruzados entre los tres legales (y el correo del DPD y la
   dirección web) NO recibían su propio clic en ninguna de las 14 combinaciones.
   `pointer-events: none` es lo correcto para un adorno: el motor 3D no
   necesita el ratón sobre el lienzo (su parallax escucha en `window` y el
   `data-tilt` va en otros elementos, ver wow3d/stage.js §7).
   El fallo está en el núcleo compartido `wow3d/stage.css`; se corrige aquí,
   en la hoja propia de Hawk, para no tocar la copia común. */
.st-stage { pointer-events: none; }

/* 2. Con el menú móvil abierto, la banda de cookies tapaba el acceso.
   `.cookie-banner` va en z-index 95 y el panel `.sheet` del menú en 89, así que
   en la PRIMERA visita —cuando la banda todavía está— el aviso se pintaba por
   encima del menú a pantalla completa. Medido a 360×640 y 390×844: «Iniciar
   sesión», «Área de clientes» y «06 Contacto» no recibían su propio clic; se
   los llevaban el texto del aviso y sus botones «Rechazar / Aceptar». Es la
   primera pantalla que ve el tráfico de pago en móvil.
   Mientras el menú está abierto la banda se retira, y vuelve al cerrarlo: el
   consentimiento no se pierde ni se da por supuesto. */
body.menu-open .cookie-banner { display: none; }