/* Infobrujas · Gabinete de Yolanda Hermes
   Cargar únicamente en las páginas que incorporen estos componentes. */

:root {
  --hb-ink: var(--colorprimari, #2a2731);
  --hb-blue: #39466f;
  --hb-blue-soft: #eef0f7;
  --hb-lavender: var(--colorblau, rgb(128,140,197));
  --hb-grey: var(--colorgris, #e1e7ee);
  --hb-cream: var(--colorvainilla, #fbf0d6);
  --hb-paper: #fdfaf3;
  --hb-muted: #595662;
  --hb-line: #cbd0dc;
  --hb-green: #245740;
  --hb-green-bg: #eff6f0;
  --hb-amber: #755000;
  --hb-amber-bg: #fff6df;
  --hb-red: #8a3035;
  --hb-red-bg: #fff0ef;
  --hb-bar: 6.5rem;
}

.hb-page,
.hb-mobile {
  color: var(--hb-ink);
  font: 400 1rem/1.75 "Poppins", sans-serif;
  overflow-wrap: anywhere;
}

.hb-page *,
.hb-page *::before,
.hb-page *::after,
.hb-mobile,
.hb-mobile * {
  box-sizing: border-box;
}

.hb-page :where(h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote) {
  margin: 0;
}

.hb-page :where(h1,h2,h3) {
  color: inherit;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  text-wrap: balance;
}

.hb-page h1 {
  max-width: 23ch;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.16;
  letter-spacing: -.035em;
}

.hb-page h2 {
  margin-bottom: 1.25rem;
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  line-height: 1.3;
  letter-spacing: -.025em;
}

.hb-page h3 {
  margin-bottom: .65rem;
  font-size: 1.125rem;
  line-height: 1.45;
}

.hb-page p + p { margin-top: 1rem; }

.hb-page a {
  color: var(--hb-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

.hb-page a:hover { text-decoration-thickness: 2px; }

.hb-page :where(a,button,input,summary):focus-visible,
.hb-mobile a:focus-visible {
  outline: 3px solid var(--hb-blue);
  outline-offset: 4px;
  box-shadow: 0 0 0 7px #fff;
}

.hb-page [id] { scroll-margin-top: 8rem; }

.hb-page img {
  display: block;
  max-width: 100%;
}

.hb-page .hb-band {
  margin: 0;
  padding: 2.75rem 0;
  background: #fff;
}

.hb-page .hb-band.hb-soft { background: var(--hb-paper); }

.hb-page .hb-band.hb-dark {
  background: var(--hb-ink);
  color: #fff;
}

.hb-dark a { color: var(--hb-cream); }
.hb-dark .hb-note,
.hb-dark .hb-kicker { color: var(--hb-grey); }

.hb-wrap {
  width: 100%;
  max-width: 1120px;
  padding-inline: 16px;
  margin-inline: auto;
}

.hb-reading { max-width: 800px; }

.hb-intro {
  max-width: 66ch;
  margin-bottom: 1.5rem;
}

.hb-kicker {
  display: block;
  margin-bottom: .75rem;
  color: var(--hb-blue);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.hb-lead {
  max-width: 58ch;
  font-size: 1.125rem;
  line-height: 1.75;
}

.hb-note {
  color: var(--hb-muted);
  font-size: .9375rem;
  line-height: 1.65;
}

.hb-space { margin-top: 1.5rem; }

.hb-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.hb-grid > *,
.hb-hero > *,
.hb-cta > * { min-width: 0; }

.hb-page .hb-button,
.hb-mobile .hb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  width: 100%;
  min-height: 48px;
  padding: .85rem 1rem;
  border: 2px solid var(--hb-blue);
  border-radius: 2px;
  color: #fff;
  background: var(--hb-blue);
  font: 600 1rem/1.5 "Poppins", sans-serif;
  text-align: center;
  text-decoration: none;
}

.hb-page .hb-button:hover,
.hb-mobile .hb-button:hover {
  color: #fff;
  background: #283451;
  border-color: #283451;
}

.hb-dark .hb-button {
  color: var(--hb-ink);
  background: var(--hb-cream);
  border-color: var(--hb-cream);
}

.hb-dark .hb-button:hover {
  color: var(--hb-ink);
  background: #fff;
  border-color: #fff;
}

/* 1. Cabecera: titular + ficha de condiciones */
.hb-crumbs { margin-bottom: 2rem; }

.hb-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .65rem;
  padding: 0;
  list-style: none;
  font-size: .875rem;
}

.hb-crumbs li {
  display: inline-flex;
  align-items: baseline;
  gap: .65rem;
  min-width: 0;
}

.hb-crumbs a {
  display: inline-block;
  padding-block: .4rem;
}

.hb-hero {
  display: grid;
  gap: 2rem;
  padding-top: 1.5rem;
  border-top: 5px solid var(--hb-blue);
}

.hb-file {
  padding: 1.25rem;
  border: 1px solid var(--hb-line);
  background: var(--hb-blue-soft);
}

.hb-page .hb-file h2 {
  margin-bottom: 1rem;
  font-size: 1.125rem;
}

.hb-facts { margin-bottom: 1.25rem; }

.hb-facts > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .25rem 1rem;
  padding-block: .65rem;
  border-bottom: 1px solid var(--hb-line);
}

.hb-facts dt { font-weight: 400; }
.hb-facts dd { font-weight: 600; }
.hb-file .hb-note { margin-top: .85rem; }

/* 2. Respuesta corta */
.hb-answer {
  padding: 1.5rem;
  border-top: 4px solid var(--hb-blue);
  border-bottom: 1px solid var(--hb-blue);
  background: var(--hb-blue-soft);
}

.hb-page .hb-answer h2 {
  font-size: .9375rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--hb-blue);
}

.hb-answer p {
  max-width: 70ch;
  font-size: 1.125rem;
  line-height: 1.8;
}

/* 3. Semáforo: el color siempre tiene un equivalente textual */
.hb-signal {
  --hb-signal-color: var(--hb-green);
  padding: 1.5rem;
  border: 1px solid var(--hb-line);
  border-top: 5px solid var(--hb-signal-color);
  background: var(--hb-green-bg);
}

.hb-signal.hb-amber {
  --hb-signal-color: var(--hb-amber);
  background: var(--hb-amber-bg);
}

.hb-signal.hb-red {
  --hb-signal-color: var(--hb-red);
  background: var(--hb-red-bg);
}

.hb-level {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .75rem;
  color: var(--hb-signal-color);
  font-size: .8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.hb-level::before {
  content: "";
  flex: 0 0 .65rem;
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  background: currentColor;
}

.hb-page .hb-signal blockquote {
  margin: 1rem 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.65;
}

/* 4. Comprobador: inputs hermanos, sin límite de combinaciones */
.hb-checker {
  min-width: 0;
  margin: 0;
  padding: 1.25rem;
  border: 1px solid var(--hb-line);
  counter-reset: hb-checks;
  background: #fff;
  color: var(--hb-ink);
}

.hb-checker legend {
  float: none;
  width: auto;
  max-width: 100%;
  padding-inline: .5rem;
  color: var(--hb-ink);
  font-size: 1rem;
  font-weight: 600;
}

.hb-options {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  align-items: start;
  column-gap: .75rem;
  margin-block: 1rem;
}

.hb-options input {
  appearance: auto;
  width: 1.3rem;
  height: 1.3rem;
  margin: .85rem 0 0;
  accent-color: var(--hb-blue);
  cursor: pointer;
}

.hb-options input:checked { counter-increment: hb-checks; }

.hb-options label {
  display: block;
  min-height: 48px;
  padding: .65rem .25rem;
  border-bottom: 1px solid var(--hb-line);
  cursor: pointer;
}

.hb-options input:checked + label {
  color: var(--hb-blue);
  background: var(--hb-blue-soft);
}

.hb-count { font-weight: 600; }
.hb-count::after { content: counter(hb-checks); }

.hb-results { margin-top: 1rem; }

.hb-verdict {
  display: none;
  padding: 1rem;
  border-left: 4px solid var(--hb-blue);
  background: var(--hb-blue-soft);
}

.hb-checker .hb-verdict { margin: 0; }

.hb-rules {
  margin: 1rem 0 0;
  padding-left: 1.25rem;
}

.hb-rules li + li { margin-top: .5rem; }

.hb-checker .hb-critical {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 2px solid var(--hb-red);
  color: var(--hb-red);
  font-weight: 600;
}

/* Sin :has(), quedan las casillas, el contador y todas las reglas. */
@supports selector(:has(input:checked)) {
  .hb-rules { display: none; }
  .hb-verdict.hb-zero { display: block; }

  .hb-checker:has(.hb-options input:checked) .hb-zero {
    display: none;
  }

  .hb-checker:has(.hb-options input:checked) .hb-some {
    display: block;
  }

  .hb-checker:has(
    .hb-options input:checked ~ input:checked ~ input:checked
  ) .hb-some {
    display: none;
  }

  .hb-checker:has(
    .hb-options input:checked ~ input:checked ~ input:checked
  ) .hb-many {
    display: block;
    color: var(--hb-red);
    background: var(--hb-red-bg);
    border-color: var(--hb-red);
  }
}

/* 5. Tabla: en móvil cada criterio forma una tarjeta comparativa.
   Los encabezados y las asociaciones permanecen en el HTML. */
.hb-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  color: var(--hb-ink);
  background: #fff;
  font-size: .9375rem;
  line-height: 1.7;
}

.hb-table caption {
  padding: 0 0 1rem;
  color: var(--hb-muted);
  caption-side: top;
  text-align: left;
}

.hb-table th,
.hb-table td {
  padding: 1rem;
  border: 1px solid var(--hb-line);
  vertical-align: top;
  text-align: left;
  overflow-wrap: anywhere;
}

.hb-table thead th {
  color: #fff;
  background: var(--hb-blue);
}

.hb-table tbody th {
  font-weight: 600;
  background: var(--hb-blue-soft);
}

.hb-cell-label {
  display: block;
  margin-bottom: .25rem;
  color: var(--hb-blue);
  font-weight: 600;
}

@media (max-width: 767.98px) {
  .hb-table,
  .hb-table tbody,
  .hb-table tr,
  .hb-table th,
  .hb-table td { display: block; }

  .hb-table caption {
    display: block;
    width: 100%;
  }

  .hb-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .hb-table tbody tr {
    margin-bottom: 1rem;
    border: 1px solid var(--hb-line);
  }

  .hb-table tbody th,
  .hb-table tbody td {
    border: 0;
    padding: .9rem 1rem;
  }

  .hb-table tbody td + td {
    border-top: 1px solid var(--hb-line);
  }
}

/* 6. Línea de tiempo: números impresos, sin círculos */
.hb-timeline {
  display: grid;
  gap: 0;
  padding: 0;
  list-style: none;
}

.hb-timeline li {
  position: relative;
  padding: 0 0 1.75rem 2rem;
  border-left: 1px solid var(--hb-lavender);
}

.hb-timeline li::before {
  content: "";
  position: absolute;
  left: -4px;
  top: .35rem;
  width: 7px;
  height: 7px;
  background: var(--hb-blue);
}

.hb-timeline li:last-child { padding-bottom: 0; }

.hb-step {
  display: block;
  margin-bottom: .4rem;
  color: var(--hb-blue);
  font-size: .875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* 7. Tarifas: fichas con cabecera lateral y línea de recibo */
.hb-rate {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border: 1px solid var(--hb-line);
  border-left: 5px solid var(--hb-blue);
  color: var(--hb-ink);
  background: #fff;
}

.hb-rate-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem 1.5rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px dashed #8a8e9a;
}

.hb-rate-top h3 { margin: 0; }

.hb-price {
  font-size: 2.75rem;
  line-height: 1.15;
  letter-spacing: -.04em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.hb-price small {
  display: block;
  margin-top: .4rem;
  font-size: .8125rem;
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 400;
}

.hb-rate .hb-button { margin-top: auto; }
.hb-rate-body { padding-bottom: 1.5rem; }

.hb-policy {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hb-line);
}

/* 8. Cita editorial */
.hb-quote {
  display: grid;
  gap: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hb-lavender);
}

.hb-page .hb-quote blockquote {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-style: normal;
  line-height: 1.3;
}

.hb-quote figcaption {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: .9375rem;
}

.hb-quote img {
  flex: 0 0 64px;
  width: 64px;
  height: 80px;
  object-fit: cover;
  object-position: center 25%;
  border-radius: 0;
}

.hb-quote figcaption span { display: block; }

/* 9. Reglas del gabinete */
.hb-rule {
  padding: 1.5rem 0;
  border-top: 3px solid var(--hb-blue);
}

.hb-rule.hb-rule-no { border-color: var(--hb-red); }

.hb-list {
  padding-left: 1.25rem;
  margin: 0;
}

.hb-list li + li { margin-top: .7rem; }
.hb-list li::marker { color: var(--hb-blue); }
.hb-rule-no li::marker { color: var(--hb-red); }

/* 10. FAQ */
.hb-faq { border-top: 2px solid var(--hb-blue); }

.hb-faq details {
  border-bottom: 1px solid var(--hb-line);
  background: #fff;
  color: var(--hb-ink);
}

.hb-faq summary {
  position: relative;
  display: block;
  min-height: 56px;
  padding: 1.25rem 3rem 1.25rem .75rem;
  list-style: none;
  cursor: pointer;
}

.hb-faq summary::-webkit-details-marker { display: none; }
.hb-faq summary::marker { content: ""; }
.hb-faq summary h3 { margin: 0; font-size: 1rem; }

.hb-faq summary::before,
.hb-faq summary::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  width: 16px;
  height: 2px;
  background: var(--hb-blue);
}

.hb-faq summary::after { transform: rotate(90deg); }
.hb-faq details[open] summary::after { display: none; }
.hb-faq details[open] summary { background: var(--hb-blue-soft); }

.hb-faq-answer { padding: 1rem .75rem 1.5rem; }

/* 11. Nota práctica */
.hb-practical {
  padding: 1.5rem;
  border: 1px solid var(--hb-line);
  border-top: 5px solid var(--hb-blue);
  background: var(--hb-paper);
}

.hb-practical ol { padding-left: 1.5rem; }
.hb-practical li { padding-left: .35rem; }
.hb-practical li + li { margin-top: 1rem; }
.hb-practical li::marker { color: var(--hb-blue); font-weight: 600; }
.hb-practical strong { display: block; }

/* 12. Lecturas: índice editorial */
.hb-reading-card {
  position: relative;
  padding: 1.25rem 2.25rem 1.25rem 0;
  border-top: 1px solid var(--hb-blue);
}

.hb-reading-card::after {
  content: "";
  position: absolute;
  top: 1.65rem;
  right: .4rem;
  width: .6rem;
  height: .6rem;
  border-top: 2px solid var(--hb-blue);
  border-right: 2px solid var(--hb-blue);
  transform: rotate(45deg);
}

.hb-reading-card h3 { font-size: 1.0625rem; }
.hb-reading-card a { display: inline-block; padding-block: .25rem; }
.hb-reading-card p { font-size: .9375rem; color: var(--hb-muted); }

/* 13. CTA de contenido y barra móvil */
.hb-cta {
  display: grid;
  align-items: center;
  gap: 1.5rem;
}

.hb-cta h2 { margin-bottom: .75rem; }

.hb-mobile {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  height: calc(var(--hb-bar) + env(safe-area-inset-bottom, 0px));
  padding: .75rem 16px
    calc(.75rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--hb-line);
  background: #fff;
}

.hb-mobile .hb-button { min-height: 56px; }

/* Huecos editoriales: la clase original se conserva */

@media (max-width: 767.98px) {
  /* Reserva para la barra: no depende del soporte de :has(). */
  body {
    padding-bottom: calc(var(--hb-bar) + env(safe-area-inset-bottom, 0px));
  }

  .hb-page :where(a,summary,input) {
    scroll-margin-bottom:
      calc(var(--hb-bar) + env(safe-area-inset-bottom, 0px) + 1rem);
  }

  /* Control ya existente en el tema. */
  body .scroll-to-top {
    bottom: calc(var(--hb-bar) + env(safe-area-inset-bottom, 0px) + 12px);
  }
}

@media (min-width: 768px) {
  .hb-page .hb-band { padding-block: 4rem; }
  .hb-grid { gap: 1.5rem; }
  .hb-two,
  .hb-four { grid-template-columns: repeat(2, minmax(0,1fr)); }

  .hb-page .hb-button { width: auto; }
  .hb-file .hb-button,
  .hb-rate .hb-button { width: 100%; }

  .hb-answer,
  .hb-checker,
  .hb-practical { padding: 2rem; }

  .hb-cell-label { display: none; }
  .hb-mobile { display: none; }

  .hb-quote {
    grid-template-columns: minmax(0,1fr) 240px;
    align-items: end;
  }
}

@media (min-width: 992px) {
  .hb-page .hb-band { padding-block: 5rem; }

  .hb-hero {
    grid-template-columns: minmax(0,1fr) 320px;
    gap: 3rem;
    align-items: start;
  }

  .hb-three { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .hb-four { grid-template-columns: repeat(4,minmax(0,1fr)); }

  .hb-cta {
    grid-template-columns: minmax(0,1fr) auto;
    gap: 3rem;
  }

  .hb-timeline {
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 1.25rem;
  }

  .hb-timeline li,
  .hb-timeline li:last-child {
    padding: 1.5rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--hb-lavender);
  }

  .hb-timeline li::before { top: -4px; left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }

  .hb-page *,
  .hb-page *::before,
  .hb-page *::after,
  .hb-mobile * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  body { padding-bottom: 0 !important; }
  .hb-mobile { display: none !important; }
  .hb-page .hb-band { padding-block: 1.5rem; }
  .hb-page details > .hb-faq-answer { display: block !important; }
}