/* ==========================================================================
   holajavier.com · Estilos
   1. Fuentes (alojadas en el servidor)
   2. Tokens del sistema «Hola Javier» (tokens.json)
   3. Base
   4. Componentes del sistema (bundle.css v18, sin cambios)
   5. Página: composición de la one page (diseño «holajavier.com · One page»)
   6. Correcciones al sistema
   7. Desarrollo
   Sin reglas globales de a / a:hover: cada componente define su hover y su foco.
   ========================================================================== */

/* 1. Fuentes ---------------------------------------------------------------- */
@font-face { font-family: "Montserrat"; src: url("/recursos/fuentes/montserrat-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/recursos/fuentes/montserrat-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/recursos/fuentes/source-sans-3-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/recursos/fuentes/source-sans-3-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/recursos/fuentes/source-sans-3-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* 2. Tokens ----------------------------------------------------------------- */
:root {
  --petroleo: #335C67; --petroleo-hover: #284A53; --petroleo-tinte: #EEF3F4;
  --dorado: #C8A35F; --dorado-hover: #D4B57A; --piedra: #E5E3DF;
  --negro: #0F0F0F; --negro-suave: #4A4A48; --blanco: #FFFFFF;
  --linea: #767470; --linea-suave: #D4D1CB; --error: #B3261E; --error-tinte: #FBEDEC;
  --foco: var(--petroleo);
  --font-titulares: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-texto: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --espacio-1: 4px; --espacio-2: 8px; --espacio-3: 12px; --espacio-4: 16px;
  --espacio-5: 24px; --espacio-6: 32px; --espacio-7: 48px; --espacio-8: 80px;
  --radio-sm: 4px; --radio-md: 6px; --radio-punto: 9999px;
  --tactil-min: 48px; --ancho-texto: 680px; --ancho-pagina: 1120px;
}

/* 3. Base ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; overflow-wrap: break-word; }
img, svg, video { max-width: 100%; }
picture { display: contents; }
main:focus { outline: none; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { text-wrap: balance; }
figure, blockquote { margin: 0; }

/* 4. Componentes del sistema (bundle.css v18) -------------------------------- */
/* Hola Javier — componentes en CSS puro (sin JavaScript obligatorio).
   Requiere tokens.css cargado antes. Prefijo de clases: hj- */

body { font-family: var(--font-texto); font-size: 18px; line-height: 28px; color: var(--negro); background: var(--blanco); }

/* ---------- Foco visible (todos los interactivos) ----------
   Contorno de 3 px a 2 px del elemento. Sobre fondos claros usa `foco` (petróleo: 7,3:1 sobre blanco, 5,7:1 sobre piedra);
   sobre bandas oscuras, blanco (7,3:1 sobre petróleo, 19:1 sobre negro). Siempre ≥ 3:1.
   No hay reglas globales de `a` ni `a:hover`: cada componente define su propio hover. */
.hj-btn:focus-visible, .hj-faq summary:focus-visible, .hj-field input:focus-visible,
.hj-field textarea:focus-visible, .hj-check input:focus-visible, .hj-link:focus-visible {
  outline: 3px solid var(--foco); outline-offset: 2px;
}
.hj-on-dark .hj-btn:focus-visible, .hj-on-dark .hj-link:focus-visible,
.hj-on-dark summary:focus-visible { outline-color: var(--blanco); }

/* ---------- Botones ---------- */
.hj-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espacio-2);
  min-height: var(--tactil-min); padding: var(--espacio-3) var(--espacio-5);
  font-family: var(--font-titulares); font-size: 17px; line-height: 24px; font-weight: 600;
  white-space: nowrap;
  text-decoration: none; border: 2px solid transparent; border-radius: var(--radio-md);
  cursor: pointer; transition: background-color .15s ease, color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.hj-btn svg { width: 20px; height: 20px; flex: none; fill: currentColor; }
.hj-btn--block { display: flex; width: 100%; }
/* Por debajo de 400 px, relleno lateral de 16 px para que quepa el texto sin partirse */
@media (max-width: 399.98px) { .hj-btn { padding-left: var(--espacio-4); padding-right: var(--espacio-4); } }
/* Grupo de botones: si dos no caben en una línea, se apilan */
/* Por debajo de 360 px de ventana, los botones a ancho completo pueden partirse en dos líneas (p. ej. 320 px) */
@media (max-width: 359.98px) {
  .hj-btn--block, .hj-portada__acciones .hj-btn { white-space: normal; text-align: center; }
}
.hj-botones { display: flex; flex-wrap: wrap; gap: var(--espacio-3); }

/* Principal (dorado): exclusivamente para reservar el diagnóstico. El texto sigue negro en hover, foco y pulsado. */
.hj-btn--principal { background: var(--dorado); color: var(--negro); }
.hj-btn--principal:hover { background: var(--dorado-hover); color: var(--negro); }
.hj-btn--principal:active { background: var(--dorado); color: var(--negro); }

/* Secundario relleno («Escríbeme» de la portada y envío del formulario). El texto sigue blanco en hover, foco y pulsado. */
.hj-btn--secundario { background: var(--petroleo); color: var(--blanco); }
.hj-btn--secundario:hover, .hj-btn--secundario:active { background: var(--petroleo-hover); color: var(--blanco); }

/* Secundario contorno */
.hj-btn--contorno { background: transparent; color: var(--petroleo); border-color: var(--petroleo); }
.hj-btn--contorno:hover { background: var(--petroleo); color: var(--blanco); }

/* Sobre bandas petróleo o negro, el secundario se invierte */
.hj-on-dark .hj-btn--contorno { color: var(--blanco); border-color: var(--blanco); }
.hj-on-dark .hj-btn--contorno:hover { background: var(--blanco); color: var(--petroleo); }

.hj-btn[disabled], .hj-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* Enlace de texto (dentro de párrafos: siempre subrayado) */
.hj-link { color: var(--petroleo); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.hj-link:hover { color: var(--petroleo-hover); text-decoration-thickness: 2px; }
.hj-on-dark .hj-link, .hj-on-dark .hj-link:hover { color: var(--blanco); }

/* ---------- Testimonio ---------- */
.hj-testimonio { margin: 0; padding: var(--espacio-5) 0; border-top: 1px solid var(--linea-suave); max-width: var(--ancho-texto); }
.hj-testimonio__frase { margin: 0 0 var(--espacio-2); font-family: var(--font-texto); font-size: 18px; line-height: 28px; font-weight: 700; color: var(--negro); }
.hj-testimonio__texto { margin: 0 0 var(--espacio-4); font-size: 18px; line-height: 28px; }
.hj-testimonio__firma { display: block; font-size: 16px; line-height: 24px; color: var(--negro-suave); font-style: normal; }
.hj-testimonio__firma strong { color: var(--negro); font-weight: 600; }

/* ---------- Preguntas frecuentes (details/summary nativo) ---------- */
.hj-faq { max-width: var(--ancho-texto); border-top: 1px solid var(--linea-suave); }
.hj-faq details { border-bottom: 1px solid var(--linea-suave); }
.hj-faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-4);
  min-height: var(--tactil-min); padding: var(--espacio-4) 0;
  font-family: var(--font-texto); font-size: 18px; line-height: 26px; font-weight: 600; color: var(--negro);
}
.hj-faq summary::-webkit-details-marker { display: none; }
.hj-faq__pregunta { margin: 0; font: inherit; color: inherit; }
.hj-faq summary::after {
  content: ""; flex: none; width: 12px; height: 12px; margin-right: 6px;
  border-right: 2.5px solid var(--petroleo); border-bottom: 2.5px solid var(--petroleo);
  transform: translateY(-3px) rotate(45deg); transition: transform .15s ease;
}
.hj-faq details[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.hj-faq summary:hover { color: var(--petroleo); }
.hj-faq__respuesta { padding: 0 0 var(--espacio-5); }
.hj-faq__respuesta p { margin: 0 0 var(--espacio-3); }
.hj-faq__respuesta p:last-child { margin-bottom: 0; }

/* ---------- Formulario ---------- */
.hj-form { display: grid; gap: var(--espacio-5); max-width: 560px; }
.hj-field { display: grid; gap: var(--espacio-2); }
.hj-field label { font-size: 17px; line-height: 24px; font-weight: 600; color: var(--negro); }
.hj-field .hj-opcional { font-weight: 400; color: var(--negro-suave); }
.hj-field input, .hj-field textarea {
  box-sizing: border-box; width: 100%; min-height: var(--tactil-min); padding: var(--espacio-3) var(--espacio-4);
  font-family: var(--font-texto); font-size: 18px; line-height: 24px; color: var(--negro);
  background: var(--blanco); border: 1.5px solid var(--linea); border-radius: var(--radio-sm);
}
.hj-field textarea { min-height: 128px; resize: vertical; }
.hj-field input:hover, .hj-field textarea:hover { border-color: var(--negro-suave); }
.hj-field__ayuda { margin: 0; font-size: 16px; line-height: 24px; color: var(--negro-suave); }
.hj-field__error { display: none; align-items: flex-start; gap: var(--espacio-2); margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--error); }
.hj-field__error .hj-icono-aviso { flex: none; width: 20px; height: 20px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hj-field--error input, .hj-field--error textarea,
.hj-field input[aria-invalid="true"], .hj-field textarea[aria-invalid="true"] { border-color: var(--error); border-width: 2px; }
.hj-field--error .hj-field__error { display: flex; }

.hj-check { display: flex; gap: var(--espacio-3); align-items: flex-start; font-size: 16px; line-height: 24px; }
.hj-check input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--petroleo); }
.hj-check label { padding-top: 0; }

.hj-form__info { margin: 0; font-size: 16px; line-height: 24px; color: var(--negro-suave); }

.hj-aviso { padding: var(--espacio-4) var(--espacio-5); border-radius: var(--radio-sm); font-size: 17px; line-height: 26px; }
.hj-aviso strong { display: block; font-family: var(--font-titulares); font-weight: 700; font-size: 18px; margin-bottom: var(--espacio-1); }
.hj-aviso--error { background: var(--error-tinte); color: var(--negro); border: 2px solid var(--error); }
.hj-aviso--error strong { color: var(--error); }
.hj-aviso--ok { background: var(--petroleo-tinte); color: var(--negro); border: 2px solid var(--petroleo); }
.hj-aviso--ok strong { color: var(--petroleo); }

/* ---------- Bandas de fondo ---------- */
.hj-banda { padding: var(--espacio-7) var(--espacio-4); }
.hj-banda--piedra { background: var(--piedra); }
.hj-banda--petroleo { background: var(--petroleo); color: var(--blanco); }
.hj-banda--negro { background: var(--negro); color: var(--blanco); }
@media (min-width: 768px) { .hj-banda { padding: var(--espacio-8) var(--espacio-5); } }

/* Antispam: campo trampa fuera de la vista (no usar display:none) */
.hj-trampa { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Utilidad: solo para lectores de pantalla ---------- */
.hj-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Precio (siempre con «+ IVA») ---------- */
.hj-precio { margin: 0; font-family: var(--font-titulares); color: var(--petroleo); }
.hj-precio__desde, .hj-precio__iva { font-family: var(--font-texto); font-size: 18px; line-height: 24px; font-weight: 600; color: var(--negro); }
.hj-precio__cifra { font-size: 40px; line-height: 44px; font-weight: 700; white-space: nowrap; }
.hj-on-dark .hj-precio__desde, .hj-on-dark .hj-precio__iva { color: var(--blanco); }
.hj-on-dark .hj-precio__cifra { color: var(--dorado); }

/* ---------- Cabecera ----------
   Móvil: logo corto + «Menú»; el menú se despliega debajo.
   ≥768 px: logo completo. ≥1200 px: menú en una línea, sin botón «Menú».
   Nada de la cabecera se parte en dos líneas. Sin JavaScript el menú se muestra siempre abierto. */
.hj-cabecera { container-type: inline-size; container-name: cabecera; background: var(--blanco); border-bottom: 1px solid var(--linea-suave); }
.hj-cabecera--fija { position: sticky; top: 0; z-index: 50; }
.hj-cabecera__barra { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-2); max-width: var(--ancho-pagina); margin: 0 auto; padding: var(--espacio-2) var(--espacio-4); min-height: 64px; }

.hj-cabecera__logo { order: 0; margin-right: auto; display: inline-flex; align-items: center; min-height: var(--tactil-min); text-decoration: none; }
.hj-cabecera__logo img { display: block; width: auto; }
.hj-cabecera__logo .hj-logo-corto { height: 22px; }
.hj-cabecera__logo .hj-logo-completo { display: none; height: 28px; }

.hj-cabecera__toggle {
  order: 1; display: none; align-items: center; gap: var(--espacio-2); min-height: var(--tactil-min); padding: 0 var(--espacio-3);
  font-family: var(--font-texto); font-size: 17px; line-height: 24px; font-weight: 600; white-space: nowrap; color: var(--petroleo);
  background: transparent; border: 1.5px solid var(--petroleo); border-radius: var(--radio-md); cursor: pointer;
}
.hj-cabecera__toggle svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; fill: none; }
.hj-cabecera__toggle .hj-icono-cerrar { display: none; }
.hj-cabecera__toggle[aria-expanded="true"] .hj-icono-abrir { display: none; }
.hj-cabecera__toggle[aria-expanded="true"] .hj-icono-cerrar { display: block; }
.hj-cabecera__toggle:hover { background: var(--petroleo-tinte); }
.hj-cabecera--js .hj-cabecera__toggle { display: inline-flex; }

.hj-cabecera__panel { order: 3; flex-basis: 100%; padding: var(--espacio-2) 0 var(--espacio-4); }
.hj-cabecera--js .hj-cabecera__toggle[aria-expanded="false"] + .hj-cabecera__panel { display: none; }
.hj-cabecera__panel .hj-btn { margin-top: var(--espacio-4); }

.hj-menu { list-style: none; margin: 0; padding: 0; }
/* El selector de idioma tiene el estilo de los enlaces del menú */
.hj-menu a, .hj-idioma { display: flex; align-items: center; box-sizing: border-box; min-height: var(--tactil-min); padding: 0 var(--espacio-1); border-bottom: 1px solid var(--linea-suave); font-family: var(--font-texto); font-size: 18px; line-height: 24px; font-weight: 600; white-space: nowrap; color: var(--negro); text-decoration: none; }
.hj-menu a:hover, .hj-idioma:hover { color: var(--petroleo); text-decoration: underline; text-underline-offset: 4px; }

.hj-cabecera__toggle:focus-visible,
.hj-cabecera__logo:focus-visible, .hj-menu a:focus-visible, .hj-idioma:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

@container cabecera (min-width: 768px) {
  .hj-cabecera__logo .hj-logo-corto { display: none; }
  .hj-cabecera__logo .hj-logo-completo { display: block; }
  .hj-cabecera__barra { min-height: 72px; padding: var(--espacio-2) var(--espacio-5); }
}
@container cabecera (min-width: 1200px) {
  .hj-cabecera__barra { flex-wrap: nowrap; gap: var(--espacio-4); }
  .hj-cabecera--js .hj-cabecera__toggle { display: none; }
  .hj-cabecera__panel, .hj-cabecera--js .hj-cabecera__toggle[aria-expanded="false"] + .hj-cabecera__panel { order: 1; display: flex; align-items: center; gap: var(--espacio-4); flex-basis: auto; padding: 0; }
  .hj-menu { display: flex; gap: var(--espacio-4); }
  .hj-menu a, .hj-idioma { border-bottom: 0; font-size: 17px; padding: 0 var(--espacio-1); }
  .hj-cabecera__panel .hj-btn { margin-top: 0; }
}
.hj-cabecera__panel .hj-btn { width: 100%; box-sizing: border-box; }
@container cabecera (min-width: 1200px) { .hj-cabecera__panel .hj-btn { width: auto; } }

/* ---------- Anclas bajo cabecera fija ---------- */
section[id], footer[id], main[id], .hj-ancla { scroll-margin-top: 88px; }

/* ---------- Enlace «Ir al contenido» (primer elemento de la página) ---------- */
.hj-saltar { position: absolute; z-index: 100; left: var(--espacio-4); top: var(--espacio-2); display: inline-flex; align-items: center; min-height: var(--tactil-min); padding: 0 var(--espacio-5); background: var(--petroleo); color: var(--blanco); font-family: var(--font-titulares); font-size: 17px; line-height: 24px; font-weight: 600; text-decoration: none; border-radius: var(--radio-md); transform: translateY(-300%); }
.hj-saltar:focus, .hj-saltar:focus-visible { transform: none; outline: 3px solid var(--foco); outline-offset: 2px; }

/* ---------- Lista con punto de marca ---------- */
.hj-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espacio-2); }
.hj-lista li { position: relative; padding-left: 20px; }
.hj-lista li::before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; border-radius: var(--radio-punto); background: var(--petroleo); }
.hj-on-dark .hj-lista li::before { background: var(--blanco); }

/* ---------- Barra fija (solo móvil) ----------
   Un solo botón («Reservar diagnóstico») a todo el ancho. Fondo blanco, línea superior, zona segura inferior. */
.hj-barra-fija { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; box-sizing: border-box; display: flex; align-items: center; gap: var(--espacio-2); padding: var(--espacio-2) var(--espacio-4) calc(var(--espacio-2) + env(safe-area-inset-bottom, 0px)); background: var(--blanco); border-top: 1px solid var(--linea-suave); transition: opacity .15s ease, visibility .15s ease; }
.hj-barra-fija__reservar { flex: 1 1 auto; min-width: 0; }
/* Oculta en la portada y en #diagnostico (lo gestiona un script con IntersectionObserver); sin JS nunca se aplica */
.hj-barra-fija--oculta { opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .hj-barra-fija { transition: none; } }
@media (min-width: 768px) { .hj-barra-fija { display: none; } }
/* Que no tape el envío ni el pie: alto de la barra (8 + 48 + 8 + 1 px) más la zona segura */
@media (max-width: 767.98px) {
  html:has(.hj-barra-fija) { scroll-padding-bottom: calc(81px + env(safe-area-inset-bottom, 0px)); }
  body:has(.hj-barra-fija) .hj-pie { padding-bottom: calc(var(--espacio-7) + 65px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Franja de fortalezas ----------
   Umbrales del contenedor = ventana − 48 px de margen lateral: 720 ≙ 768 px, 1152 ≙ 1200 px. */
.hj-fortalezas { container-type: inline-size; container-name: fortalezas; }
.hj-fortalezas__lista { list-style: none; margin: 0 auto; padding: 0; max-width: var(--ancho-pagina); display: grid; grid-template-columns: 1fr; gap: var(--espacio-4) var(--espacio-5); }
.hj-fortalezas__lista li { display: flex; align-items: flex-start; gap: var(--espacio-3); font-family: var(--font-titulares); font-size: 17px; line-height: 24px; font-weight: 600; color: var(--negro); }
.hj-fortalezas__lista li::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 7px; border-radius: var(--radio-punto); background: var(--dorado); }
@container fortalezas (min-width: 720px) { .hj-fortalezas__lista { grid-template-columns: 1fr 1fr; } }
@container fortalezas (min-width: 1152px) {
  .hj-fortalezas__lista { display: flex; justify-content: space-between; gap: var(--espacio-5); }
  .hj-fortalezas__lista li { white-space: nowrap; }
}

/* ---------- Situaciones («¿Te suena?») ----------
   Una columna por debajo de 1024 px (contenedor 976 ≙ ventana − 48); dos desde ahí, y la última ocupa todo el ancho si son impares. */
.hj-situaciones { container-type: inline-size; container-name: situaciones; }
.hj-situaciones__lista { list-style: none; margin: 0 auto; padding: 0; max-width: var(--ancho-pagina); display: grid; grid-template-columns: 1fr; gap: var(--espacio-4); }
.hj-situaciones__lista li { margin: 0; padding: var(--espacio-5); background: var(--blanco); border: 1px solid var(--linea-suave); border-radius: var(--radio-md); }
.hj-situaciones__lista p { margin: 0; font-size: 18px; line-height: 28px; font-weight: 400; color: var(--negro); }
@container situaciones (min-width: 976px) {
  .hj-situaciones__lista { grid-template-columns: repeat(2, 1fr); }
  .hj-situaciones__lista li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------- Pasos del método ----------
   Tres columnas solo desde 1024 px (contenedor 976 ≙ ventana − 48). */
.hj-pasos { container-type: inline-size; container-name: pasos; }
.hj-pasos__lista { list-style: none; margin: 0 auto; padding: 0; max-width: var(--ancho-pagina); display: grid; grid-template-columns: 1fr; gap: var(--espacio-6); }
.hj-pasos__entradilla { margin: 0 0 var(--espacio-7); font-size: 20px; line-height: 30px; color: var(--negro); }
.hj-paso__num { display: block; margin: 0 0 var(--espacio-2); font-family: var(--font-titulares); font-size: 40px; line-height: 44px; font-weight: 700; color: var(--petroleo); }
.hj-paso__titulo { margin: 0 0 var(--espacio-2); font-family: var(--font-titulares); font-size: 21px; line-height: 28px; font-weight: 600; color: var(--negro); }
.hj-paso__texto { margin: 0; font-size: 18px; line-height: 28px; }
@container pasos (min-width: 976px) { .hj-pasos__lista { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Tarjeta de plan ---------- */
.hj-plan { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--espacio-4); max-width: 420px; padding: var(--espacio-5); background: var(--blanco); border: 1px solid var(--linea-suave); border-radius: var(--radio-md); color: var(--negro); }
.hj-plan__titulo { margin: 0; font-family: var(--font-titulares); font-size: 21px; line-height: 28px; font-weight: 600; color: var(--petroleo); }
.hj-plan__subtitulo { margin: 0; font-size: 18px; line-height: 28px; color: var(--negro-suave); }
.hj-plan__grupo { display: grid; gap: var(--espacio-2); }
.hj-plan__subtitulo-lista { margin: 0; font-family: var(--font-titulares); font-size: 18px; line-height: 24px; font-weight: 600; color: var(--petroleo); }
/* Cada apartado es un bloque interno separado por una línea, con 24 px arriba (16 de hueco + 8) y 24 px abajo */
.hj-plan__grupo + .hj-plan__grupo { margin-top: var(--espacio-2); padding-top: var(--espacio-5); border-top: 1px solid var(--linea-suave); }
.hj-plan__no-incluye { display: grid; gap: var(--espacio-2); padding: var(--espacio-4); background: var(--piedra); border-radius: var(--radio-sm); }
.hj-plan .hj-btn { margin-top: var(--espacio-2); width: 100%; box-sizing: border-box; }

/* ---------- Pareja de planes ----------
   Una columna en móvil; dos iguales desde 768 px; desde 1024 px, principal y secundario en 3 : 2, alineados arriba,
   y la cifra del secundario a 32 px. Umbrales del contenedor = ventana − 48 px (720 ≙ 768, 976 ≙ 1024). */
.hj-planes { container-type: inline-size; container-name: planes; }
.hj-planes__rejilla { display: flex; flex-direction: column; gap: var(--espacio-5); max-width: var(--ancho-pagina); margin: 0 auto; }
.hj-planes .hj-plan { width: 100%; max-width: none; }
.hj-planes__lado { display: contents; }
.hj-planes__nota { margin: 0; max-width: var(--ancho-texto); }
@container planes (min-width: 720px) {
  .hj-planes__rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-6); align-items: start; }
  .hj-planes__nota { grid-column: 1 / -1; }
}
@container planes (min-width: 976px) {
  .hj-planes__rejilla { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .hj-planes__lado { display: flex; flex-direction: column; gap: var(--espacio-6); }
  .hj-planes__nota { grid-column: auto; }
  .hj-plan--secundario .hj-precio__cifra { font-size: 32px; line-height: 40px; }
}

/* ---------- Calendario bloqueado por cookies ---------- */
.hj-calendario { container-type: inline-size; container-name: calendario; box-sizing: border-box; max-width: var(--ancho-texto); padding: var(--espacio-5); background: var(--blanco); border: 1.5px solid var(--linea); border-radius: var(--radio-sm); color: var(--negro); }
.hj-calendario__titulo { margin: 0 0 var(--espacio-2); font-family: var(--font-titulares); font-size: 21px; line-height: 28px; font-weight: 600; color: var(--negro); }
.hj-calendario__texto { margin: 0 0 var(--espacio-5); font-size: 18px; line-height: 28px; }
.hj-calendario__acciones { display: flex; flex-direction: column; gap: var(--espacio-3); margin-bottom: var(--espacio-4); }
.hj-calendario__acciones .hj-btn { width: 100%; box-sizing: border-box; text-align: center; white-space: normal; }
.hj-calendario__nota { margin: 0; font-size: 16px; line-height: 24px; color: var(--negro-suave); }
@container calendario (min-width: 560px) { .hj-calendario__acciones { flex-direction: row; flex-wrap: wrap; } .hj-calendario__acciones .hj-btn { width: auto; } }

/* ---------- Pie ----------
   Enlaces sin subrayado; subrayado de 2 px en hover y con el foco, y contorno blanco de 3 px. */
.hj-pie { container-type: inline-size; container-name: pie; color: var(--blanco); }
.hj-pie a { color: var(--blanco); text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.hj-pie a:hover, .hj-pie a:focus-visible { color: var(--blanco); text-decoration: underline; }
.hj-pie a:focus-visible { outline: 3px solid var(--blanco); outline-offset: 2px; }
.hj-pie__rejilla { display: grid; grid-template-columns: 1fr; gap: var(--espacio-6); max-width: var(--ancho-pagina); margin: 0 auto; }
.hj-pie__logo { display: block; margin: 0 0 var(--espacio-4); }
.hj-pie__logo img { display: block; width: auto; }
.hj-pie__logo .hj-logo-completo { display: none; height: 28px; }
.hj-pie__logo .hj-logo-corto { height: 22px; }
.hj-pie p.hj-pie__nombre { margin: 0; font-size: 18px; line-height: 28px; font-weight: 700; }
.hj-pie p { margin: 0 0 var(--espacio-2); font-size: 17px; line-height: 26px; }
.hj-pie__titulo { font-family: var(--font-titulares); font-size: 17px !important; line-height: 24px !important; font-weight: 600; }
.hj-pie .hj-enlace { appearance: none; background: none; border: 0; margin: 0; padding: 0; min-height: 44px; display: inline-flex; align-items: center; font: inherit; font-size: 17px; color: var(--blanco); text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 2px; cursor: pointer; }
.hj-pie .hj-enlace:hover, .hj-pie .hj-enlace:focus-visible { text-decoration: underline; }
.hj-pie .hj-enlace:focus-visible { outline: 3px solid var(--blanco); outline-offset: 2px; }
.hj-pie p.hj-pie__copy { max-width: var(--ancho-pagina); margin: var(--espacio-6) auto 0; font-size: 16px; line-height: 24px; }
.hj-pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.hj-pie li a { display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; }
@container pie (min-width: 720px) { .hj-pie__rejilla { grid-template-columns: 1.3fr 1fr 1fr; } .hj-pie__logo .hj-logo-corto { display: none; } .hj-pie__logo .hj-logo-completo { display: block; } }

/* ---------- Portada ----------
   El contenedor es la propia banda a ancho completo y sin margen lateral, así que los umbrales coinciden con la ventana:
   una columna por debajo de 1024 px; botones a ancho completo y relleno superior espacio-5 por debajo de 768 px;
   H1 a 32/38 por debajo de 400 px. */
.hj-portada { container-type: inline-size; container-name: portada; background: var(--blanco); padding: 0; }
.hj-portada__rejilla { box-sizing: border-box; display: grid; grid-template-columns: 1fr; gap: var(--espacio-6); max-width: calc(var(--ancho-pagina) + 2 * var(--espacio-5)); margin: 0 auto; padding: var(--espacio-5) var(--espacio-4) var(--espacio-7); align-items: center; }
.hj-portada__linea { margin: 0 0 var(--espacio-2); font-size: 17px; line-height: 24px; font-weight: 600; color: var(--petroleo); }
.hj-portada__titulo { margin: 0 0 var(--espacio-3); font-family: var(--font-titulares); font-size: 36px; line-height: 42px; font-weight: 700; letter-spacing: -0.01em; color: var(--petroleo); }
.hj-portada__subtitulo { margin: 0 0 var(--espacio-4); font-size: 18px; line-height: 28px; color: var(--negro); }
.hj-portada__plan { margin: 0 0 var(--espacio-1); font-size: 16px; line-height: 24px; font-weight: 600; color: var(--petroleo); }
.hj-portada .hj-precio { margin: 0 0 var(--espacio-4); }
.hj-precio__sep { display: none; }
.hj-portada__acciones { display: flex; flex-direction: column; gap: var(--espacio-3); }
.hj-portada__acciones .hj-btn { width: 100%; box-sizing: border-box; }
.hj-portada__nota { margin: var(--espacio-3) 0 0; font-size: 16px; line-height: 24px; color: var(--negro-suave); }
.hj-portada__foto { margin: 0; overflow: hidden; border-radius: var(--radio-md); aspect-ratio: 4 / 3; background: var(--piedra); }
.hj-portada__foto img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
@container portada (max-width: 399.98px) { .hj-portada__titulo { font-size: 32px; line-height: 38px; } }
@container portada (min-width: 768px) {
  .hj-portada__rejilla { padding: var(--espacio-8) var(--espacio-5); gap: var(--espacio-7); }
  .hj-portada__linea { margin-bottom: var(--espacio-3); }
  .hj-portada__titulo { font-size: 52px; line-height: 58px; margin-bottom: var(--espacio-4); }
  .hj-portada__subtitulo { font-size: 20px; line-height: 30px; margin-bottom: var(--espacio-5); }
  .hj-portada .hj-precio { margin-bottom: var(--espacio-5); }
  /* Desde 768 px el precio va en una línea: cifra + «/mes + IVA · Sin permanencia.» */
  .hj-portada .hj-precio__sep { display: inline; font-family: var(--font-texto); font-size: 18px; line-height: 28px; font-weight: 700; color: var(--negro); }
  .hj-portada .hj-precio__nota { display: inline; }
  .hj-portada__acciones { flex-direction: row; flex-wrap: wrap; }
  .hj-portada__acciones .hj-btn { width: auto; }
}
@container portada (min-width: 768px) and (max-width: 1023.98px) { .hj-portada__foto { max-width: 480px; } }
@container portada (min-width: 1024px) {
  .hj-portada__rejilla { grid-template-columns: 1.15fr 1fr; }
  .hj-portada__foto { aspect-ratio: 4 / 5; }
}
.hj-precio__nota { display: block; font-family: var(--font-texto); font-size: 18px; line-height: 28px; font-weight: 700; color: var(--negro); }
.hj-on-dark .hj-precio__nota { color: var(--blanco); }
.hj-plan__texto { margin: 0; font-size: 18px; line-height: 28px; color: var(--negro); }
.hj-plan__enlace { align-self: flex-start; }
/* Plan dentro de una banda oscura: la tarjeta es clara, recupera los colores de fondo claro */
.hj-on-dark .hj-plan { color: var(--negro); }
.hj-on-dark .hj-plan .hj-plan__titulo, .hj-on-dark .hj-plan .hj-precio__cifra { color: var(--petroleo); }
.hj-on-dark .hj-plan .hj-precio__desde, .hj-on-dark .hj-plan .hj-precio__iva, .hj-on-dark .hj-plan .hj-precio__nota { color: var(--negro); }
.hj-on-dark .hj-plan .hj-link { color: var(--petroleo); }
.hj-on-dark .hj-plan .hj-link:hover { color: var(--petroleo-hover); }
.hj-on-dark .hj-plan .hj-lista li::before { background: var(--petroleo); }
.hj-on-dark .hj-plan .hj-btn:focus-visible, .hj-on-dark .hj-plan .hj-link:focus-visible { outline-color: var(--petroleo); }

/* ---------- Resumen mensual (muestra didáctica, no panel) ---------- */
.hj-resumen { box-sizing: border-box; margin: 0; max-width: var(--ancho-texto); padding: var(--espacio-5); background: var(--blanco); border: 1px solid var(--linea-suave); border-radius: var(--radio-md); color: var(--negro); }
.hj-resumen__titulo { margin: 0 0 var(--espacio-3); font-family: var(--font-titulares); font-size: 21px; line-height: 28px; font-weight: 600; color: var(--petroleo); text-wrap: balance; }
.hj-resumen__texto { margin: 0 0 var(--espacio-5); font-size: 18px; line-height: 28px; color: var(--negro); }
.hj-resumen__aviso { margin: 0 0 var(--espacio-4); font-size: 16px; line-height: 24px; color: var(--negro-suave); }
.hj-resumen__cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-5); margin: 0; padding: 0; list-style: none; }
.hj-resumen__cifra { display: block; font-family: var(--font-titulares); font-size: 32px; line-height: 40px; font-weight: 600; color: var(--petroleo); }
.hj-resumen__etiqueta { display: block; margin-top: var(--espacio-1); font-size: 18px; line-height: 28px; color: var(--negro); }

/* ---------- Caso ---------- */
.hj-caso { box-sizing: border-box; padding: var(--espacio-6); background: var(--piedra); border: 0; border-radius: var(--radio-md); color: var(--negro); }
.hj-caso__titulo { margin: 0 0 var(--espacio-3); max-width: var(--ancho-texto); font-family: var(--font-titulares); font-size: 21px; line-height: 28px; font-weight: 600; color: var(--petroleo); }
.hj-caso__texto { margin: 0; max-width: var(--ancho-texto); font-size: 18px; line-height: 28px; }
.hj-caso__texto + .hj-caso__texto { margin-top: var(--espacio-3); }

/* ---------- Composición en escritorio (desde 1024 px) ----------
   Las columnas de lectura no pasan de 680 px, pero ningún bloque deja vacía la mitad derecha:
   texto a un lado y acción o imagen al otro. Umbral del contenedor 976 ≙ ventana de 1024 px − 48 px de margen. */
.hj-composicion { container-type: inline-size; container-name: composicion; max-width: var(--ancho-pagina); margin: 0 auto; }
.hj-composicion__rejilla { display: grid; grid-template-columns: 1fr; gap: var(--espacio-6); }
.hj-composicion__rejilla + .hj-composicion__rejilla { margin-top: var(--espacio-7); }
.hj-composicion__texto, .hj-composicion__lado { min-width: 0; }
.hj-composicion__texto > * { max-width: var(--ancho-texto); }
/* Diagnóstico, segunda fila: bloque centrado de 720 px como máximo (H3, texto y formulario a todo el ancho) */
.hj-composicion__centro { margin-top: var(--espacio-7); }
@container composicion (min-width: 976px) {
  .hj-composicion__rejilla { grid-template-columns: repeat(12, 1fr); column-gap: var(--espacio-5); align-items: start; }
  .hj-composicion__texto { grid-column: 1 / 7; }
  .hj-composicion__lado { grid-column: 7 / 13; }
  /* Preguntas frecuentes: 4 + 7 de 12 columnas, con la columna izquierda fija al desplazarse */
  .hj-composicion__rejilla--faq .hj-composicion__texto { grid-column: 1 / 5; position: sticky; top: 104px; }
  .hj-composicion__rejilla--faq .hj-composicion__lado { grid-column: 6 / 13; }
  .hj-composicion__centro { padding-top: var(--espacio-7); border-top: 1px solid var(--linea-suave); }
  /* El bloque centrado mide 720 px como máximo; la línea superior va a ancho completo */
  .hj-composicion__centro { padding-left: max(0px, calc((100% - 720px) / 2)); padding-right: max(0px, calc((100% - 720px) / 2)); }
  .hj-composicion__centro > .hj-form { max-width: none; }
}

/* 5. Página ----------------------------------------------------------------- */
.contenedor { max-width: var(--ancho-pagina); margin: 0 auto; }
.columna-texto { max-width: var(--ancho-texto); }
.columna-texto p { margin: 0 0 var(--espacio-4); }
.titulo-seccion { margin: 0 0 var(--espacio-6); font-family: var(--font-titulares); font-size: 28px; line-height: 34px; font-weight: 700; color: var(--petroleo); }
.titulo-seccion--entradilla { margin-bottom: var(--espacio-4); }
.hj-on-dark .titulo-seccion { color: var(--blanco); }
.titulo-bloque { margin: var(--espacio-7) 0 var(--espacio-3); font-family: var(--font-titulares); font-size: 21px; line-height: 28px; font-weight: 600; color: var(--petroleo); }
.titulo-bloque--primero { margin-top: 0; }
.entradilla { margin: 0 0 var(--espacio-6); max-width: var(--ancho-texto); font-size: 20px; line-height: 30px; }
.enlace-bloque { margin: var(--espacio-6) 0 0; max-width: var(--ancho-texto); }
.nota-pequena { margin: 0; font-size: 16px; line-height: 24px; color: var(--negro-suave); }
.nota-horario { margin-top: var(--espacio-2); }
@media (min-width: 768px) { .titulo-seccion { font-size: 36px; line-height: 42px; } }

/* Portada: foto 4:5 en todos los anchos, columna de 360 px desde 1024 px */
.hj-portada .hj-portada__rejilla { padding-bottom: 0; }
.hj-portada .hj-portada__foto { aspect-ratio: 4 / 5; max-width: 480px; }
.hj-portada__foto img { object-position: center top; }
.hj-portada .hj-portada__acciones .hj-btn { display: flex; }
@media (min-width: 768px) { .hj-portada .hj-portada__acciones .hj-btn { display: inline-flex; } }
@media (min-width: 1024px) {
  .hj-portada .hj-portada__rejilla { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--espacio-7); }
  .hj-portada .hj-portada__foto { max-width: none; }
}

/* Franja de fortalezas, bajo la portada */
.franja { max-width: calc(var(--ancho-pagina) + 2 * var(--espacio-4)); margin: 0 auto; padding: var(--espacio-7) var(--espacio-4); }
.franja .hj-fortalezas { padding-top: var(--espacio-6); border-top: 1px solid var(--linea-suave); }
@media (min-width: 768px) { .franja { max-width: calc(var(--ancho-pagina) + 2 * var(--espacio-5)); padding: var(--espacio-7) var(--espacio-5) var(--espacio-8); } }

/* ¿Te suena? */
.suena-cierre { margin-top: var(--espacio-6); max-width: var(--ancho-texto); }
.suena-cierre p { margin: 0 0 var(--espacio-4); }
@media (min-width: 1024px) {
  .suena-cierre { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--espacio-7); max-width: none; }
  .suena-cierre p { margin: 0; max-width: var(--ancho-texto); }
}

/* Cómo trabajo */
.paso-detalle { margin-top: var(--espacio-3) !important; }
.trabajo-detalle { margin-top: var(--espacio-7); }
.trabajo-detalle__muestra { margin-bottom: var(--espacio-7); }
.trabajo-detalle .columna-texto > .titulo-bloque:first-child { margin-top: 0; }
.video-muestra { max-width: var(--ancho-texto); }
.video-muestra video { display: block; width: 100%; height: auto; border-radius: var(--radio-md); background: var(--negro); }
.video-muestra figcaption { margin-top: var(--espacio-2); font-size: 16px; line-height: 24px; color: var(--negro-suave); }
@media (min-width: 1024px) {
  .trabajo-detalle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--espacio-7); align-items: start; }
  .trabajo-detalle__muestra { margin-bottom: 0; }
}

/* Sobre mí */
.sobre-mi { display: grid; grid-template-columns: 1fr; gap: var(--espacio-6); }
.sobre-mi .enlace-bloque { margin-top: var(--espacio-5); }
.sobre-mi .columna-texto p strong { font-weight: 700; color: var(--negro); }
.sobre-mi__foto { margin: 0; aspect-ratio: 4 / 5; background: var(--blanco); border: 1px solid var(--linea-suave); border-radius: var(--radio-md); overflow: hidden; }
.sobre-mi__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) { .sobre-mi { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--espacio-8); align-items: start; } }

/* Precio: la entradilla y la nota van en blanco sobre petróleo.
   La entradilla ocupa el ancho del bloque, como el titular y las tarjetas; si no cabe en una línea,
   se reparte en dos líneas parecidas en lugar de dejar una palabra sola. */
#precio .entradilla, #preu .entradilla { color: var(--blanco); max-width: none; text-wrap: balance; }

/* Lo que dicen */
.testimonios { display: grid; grid-template-columns: 1fr; column-gap: var(--espacio-7); }
.caso { margin-bottom: var(--espacio-7); }
.caso .caso__acciones { max-width: var(--ancho-texto); margin: var(--espacio-3) 0; }
.caso__cita { margin-top: var(--espacio-4); max-width: var(--ancho-texto); }
.caso__cita .hj-testimonio__frase { margin-bottom: var(--espacio-1); }
@media (min-width: 768px) { .testimonios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Preguntas frecuentes: en móvil, titular → preguntas → enlace al formulario; desde 1024 px, 4 + 7 de 12 con el lado fijo */
.faq-rejilla { display: flex; flex-direction: column; }
.faq-lado { display: contents; }
.faq-lado .titulo-seccion { order: 0; }
.faq-preguntas { order: 1; }
.faq-aviso { order: 2; }
@media (min-width: 1024px) {
  .faq-rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--espacio-5); align-items: start; }
  .faq-lado { display: block; grid-column: 1 / span 4; position: sticky; top: 104px; }
  .faq-lado .enlace-bloque { margin-top: 0; }
  .faq-preguntas { grid-column: 6 / span 7; }
}

/* Diagnóstico: texto y calendario en dos columnas; debajo, línea y bloque centrado de 720 px con el formulario */
.columna-texto .destacada { margin: var(--espacio-5) 0 0; font-weight: 700; }
.cita-corta { margin-top: var(--espacio-5); }
.diag-cal, .diag-escribir { margin-top: var(--espacio-7); }
.texto-form { margin: 0 0 var(--espacio-5); }
.hj-check-grupo { display: grid; gap: var(--espacio-2); }
.hj-check-grupo.hj-field--error .hj-field__error { display: flex; }
@media (min-width: 1024px) {
  .diag { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "intro cal" "bloque bloque"; column-gap: var(--espacio-8); align-items: start; }
  .diag-intro { grid-area: intro; }
  .diag-cal { grid-area: cal; margin: 0; }
  .diag-bloque { grid-area: bloque; margin-top: var(--espacio-7); padding-top: var(--espacio-7); border-top: 1px solid var(--linea-suave); }
  .diag-bloque > * { max-width: 720px; margin-left: auto; margin-right: auto; }
  .diag-bloque .diag-escribir { margin-top: 0; }
  .diag-bloque .hj-form { max-width: none; }
}

/* Formulario: avisos enfocables (el foco se mueve a ellos al validar y al enviar) */
.hj-aviso { scroll-margin-top: 88px; }
.hj-aviso:focus { outline: 3px solid var(--foco); outline-offset: 2px; }
.hj-aviso:focus:not(:focus-visible) { outline: none; }

/* Cal.com incrustado: mientras carga no ocupa sitio (se sigue viendo la caja de cookies) */
.cal-incrustado { max-width: var(--ancho-texto); min-height: 0; }
.cal-incrustado:focus { outline: none; }
.cal-incrustado--cargando { height: 0; overflow: hidden; }
.cal-incrustado iframe { display: block; width: 100%; border: 0; }

/* reCAPTCHA (solo si se activa): el sello, por encima de la barra fija en móvil */
@media (max-width: 767.98px) { .grecaptcha-badge { bottom: calc(81px + env(safe-area-inset-bottom, 0px)) !important; } }

/* Páginas legales: columna de lectura de 680 px, mismos tipos y colores que la one page */
.legal { max-width: calc(var(--ancho-texto) + 2 * var(--espacio-4)); margin: 0 auto; }
@media (min-width: 768px) { .legal { max-width: calc(var(--ancho-texto) + 2 * var(--espacio-5)); } }
.legal__titulo { margin: 0 0 var(--espacio-3); font-family: var(--font-titulares); font-size: 32px; line-height: 38px; font-weight: 700; color: var(--petroleo); }
@media (min-width: 768px) { .legal__titulo { font-size: 40px; line-height: 48px; } }
.legal .legal__fecha { margin: 0 0 var(--espacio-6); font-size: 16px; line-height: 24px; color: var(--negro-suave); }
.legal h2 { margin: var(--espacio-7) 0 var(--espacio-3); font-family: var(--font-titulares); font-size: 22px; line-height: 30px; font-weight: 600; color: var(--petroleo); scroll-margin-top: 88px; }
.legal p, .legal ul { margin: 0 0 var(--espacio-4); }
.legal ul { padding-left: var(--espacio-5); }
.legal li { margin-bottom: var(--espacio-2); }
.legal strong { font-weight: 700; }
.legal a { color: var(--petroleo); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.legal a:hover { color: var(--petroleo-hover); text-decoration-thickness: 2px; }
.legal a:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 2px; }

/* Tablas legales: tabla normal desde 768 px; en móvil, cada fila es una tarjeta con la etiqueta de cada dato */
.legal-tabla__envoltorio { margin: 0 0 var(--espacio-5); }
.legal-tabla { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 24px; }
.legal-tabla th, .legal-tabla td { padding: var(--espacio-3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea-suave); }
.legal-tabla th { font-weight: 700; color: var(--petroleo); background: var(--petroleo-tinte); }
@media (max-width: 767.98px) {
  .legal-tabla, .legal-tabla tbody, .legal-tabla tr, .legal-tabla td { display: block; width: 100%; }
  .legal-tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .legal-tabla tr { margin-bottom: var(--espacio-3); border: 1px solid var(--linea-suave); border-radius: var(--radio-sm); }
  .legal-tabla td { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: var(--espacio-3); padding: var(--espacio-2) var(--espacio-3); }
  .legal-tabla tr td:last-child { border-bottom: 0; }
  .legal-tabla td::before { content: attr(data-label); font-weight: 700; color: var(--petroleo); }
}

/* Marcadores pendientes de los textos legales: solo se resaltan en desarrollo */
.hj-marcador { padding: 0 3px; color: var(--negro); background: #FFE58A; outline: 1px dashed #8A5A00; border-radius: 2px; }

/* 6. Correcciones al sistema ------------------------------------------------- */
/* Cabecera: el contenido de la barra se alinea con el de la página (1120 px). */
.hj-cabecera .hj-cabecera__barra { max-width: calc(var(--ancho-pagina) + 2 * var(--espacio-5)); }
/* Fortalezas: el umbral de una línea (contenedor de 1152 px) no se alcanza con el ancho máximo de 1120 px.
   Se usan las media queries de la ventana, como en el diseño. */
@media (max-width: 767.98px) { .hj-fortalezas .hj-fortalezas__lista { display: grid; grid-template-columns: 1fr; } }
@media (min-width: 768px) and (max-width: 1199.98px) { .hj-fortalezas .hj-fortalezas__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) {
  .hj-fortalezas .hj-fortalezas__lista { display: flex; justify-content: space-between; gap: var(--espacio-5); }
  .hj-fortalezas .hj-fortalezas__lista li { white-space: nowrap; }
}
/* Barra fija: botones de 48 px exactos (alto total 65 px más la zona segura). */
.hj-barra-fija .hj-btn { height: 48px; min-height: 48px; }

/* 7. Desarrollo (solo se pinta con «entorno» = «desarrollo») ----------------- */
.hj-dev-marca { display: inline-block; margin: 0 0 var(--espacio-2); padding: 2px 8px; font: 600 14px/20px var(--font-texto); color: var(--blanco); background: #B3261E; border-radius: var(--radio-sm); }
/* Nota estática al final de la página: no tapa nada. */
.hj-dev-nota { padding: var(--espacio-3) var(--espacio-4); font: 400 14px/20px var(--font-texto); color: var(--blanco); background: #6B1A15; }
.hj-dev-nota p { margin: 0; }
.hj-dev-nota ul { margin: 4px 0 0; padding-left: 18px; }
@media (max-width: 767.98px) { .hj-dev-nota { padding-bottom: calc(81px + env(safe-area-inset-bottom, 0px)); } }
/* Aviso fijo, solo si faltan textos: esquina inferior izquierda, plegado y con botón para cerrarlo. */
.hj-dev-aviso { position: fixed; z-index: 60; left: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: flex-start; gap: 4px; max-width: min(360px, calc(100vw - 16px)); padding: 4px 4px 4px 10px; font: 400 13px/18px var(--font-texto); color: var(--blanco); background: rgba(179, 38, 30, .95); border-radius: var(--radio-sm); }
.hj-dev-aviso[hidden] { display: none; }
.hj-dev-aviso summary { cursor: pointer; padding: 4px 0; font-weight: 600; }
.hj-dev-aviso ul { margin: 4px 0; padding-left: 16px; }
.hj-dev-aviso__cerrar { flex: none; width: 28px; height: 28px; padding: 0; font: 700 18px/1 var(--font-texto); color: var(--blanco); background: transparent; border: 0; border-radius: var(--radio-sm); cursor: pointer; }
.hj-dev-aviso__cerrar:focus-visible, .hj-dev-aviso summary:focus-visible { outline: 3px solid var(--blanco); outline-offset: 1px; }
/* En móvil, por encima de la barra fija cuando está visible. */
@media (max-width: 767.98px) {
  body:has(.hj-barra-fija:not(.hj-barra-fija--oculta)) .hj-dev-aviso { bottom: calc(73px + env(safe-area-inset-bottom, 0px)); }
}

/* 8. Banner de CookieYes en los colores de la marca ---------------------------
   El plan gratuito no deja cambiar los colores desde el panel, así que se fuerzan
   aquí. CookieYes pinta los colores con estilos en línea: por eso el !important.
   Se apoya en data-cky-tag, que es estable; si CookieYes cambia su HTML, el banner
   vuelve a sus colores de serie, sin romperse. Aceptar y rechazar, idénticos (AEPD). */
.cky-btn[data-cky-tag="accept-button"], .cky-btn[data-cky-tag="reject-button"],
.cky-btn[data-cky-tag="detail-accept-button"], .cky-btn[data-cky-tag="detail-reject-button"],
.cky-btn[data-cky-tag="detail-save-button"] {
  background-color: var(--petroleo) !important; border-color: var(--petroleo) !important; color: var(--blanco) !important;
}
.cky-btn[data-cky-tag="accept-button"]:hover, .cky-btn[data-cky-tag="reject-button"]:hover,
.cky-btn[data-cky-tag="detail-accept-button"]:hover, .cky-btn[data-cky-tag="detail-reject-button"]:hover,
.cky-btn[data-cky-tag="detail-save-button"]:hover {
  background-color: var(--petroleo-hover) !important; border-color: var(--petroleo-hover) !important; opacity: 1 !important;
}
.cky-btn[data-cky-tag="settings-button"] {
  background-color: var(--blanco) !important; border-color: var(--petroleo) !important; color: var(--petroleo) !important;
}
.cky-btn[data-cky-tag="settings-button"]:hover { background-color: var(--petroleo-tinte) !important; opacity: 1 !important; }
.cky-consent-container a, .cky-preference-center a,
[data-cky-tag="show-desc-button"], [data-cky-tag="hide-desc-button"] { color: var(--petroleo) !important; }
.cky-switch input[type="checkbox"]:checked, input[id^="ckySwitch"]:checked { background-color: var(--petroleo) !important; }
.cky-btn:focus-visible, .cky-consent-container a:focus-visible, .cky-preference-center a:focus-visible,
.cky-preference-center button:focus-visible, .cky-switch input:focus-visible {
  outline: 3px solid var(--foco) !important; outline-offset: 2px !important;
}

/* 9. Página de error (404 y 410) --------------------------------------------- */
.pagina-error .pagina-error__accion { margin: var(--espacio-6) 0 var(--espacio-4); }
.pagina-error a.hj-btn, .pagina-error a.hj-btn:hover { color: var(--blanco); text-decoration: none; }