/* ==========================================================================
   Hogarbot - Estilos del sitio
   Servido por el tema hijo: wp-content/themes/kadence-child/assets/css/hogarbot.css
   Fuente de verdad: repo aspiradora-robot, wp-theme/kadence-child/assets/css/
   Requiere: Kadence (usa sus custom properties, con fallback)

   Encolado desde functions.php con filemtime() como version: subir el archivo
   invalida la cache del navegador sola, no hay que purgar a mano.

   Este archivo reemplaza al pegado manual en Apariencia -> Personalizar ->
   CSS adicional. Ojo: ese cuadro se guarda POR TEMA, asi que al activar el
   tema hijo el CSS del Personalizador del tema padre deja de aplicarse. Es
   justamente lo que este archivo cubre.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. TOKENS — alias sobre la paleta global de Kadence

   Los --hb-* NO definen colores: son nombres con sentido editorial puestos
   sobre los --global-palette* que emite Kadence desde el Personalizador
   (<style id="kadence-global-inline-css">). Cambiar un color se hace ahí,
   no acá.

   El esquema de slots de Kadence es: 1-2 acentos, 3-6 textos de más fuerte
   a más sutil, 7-9 fondos de sutil a blanco, 10 complemento de énfasis.
   Los fallbacks son la paleta cargada el 2026-08-10, verificada en vivo.

   Ver docs/paleta-y-tokens.md.
   -------------------------------------------------------------------------- */

:root {
  --hb-primary:      var(--global-palette1, #0F3D4C);
  --hb-primary-dark: var(--global-palette2, #0A2A35);
  --hb-primary-soft: var(--global-palette7, #E7F0F2);

  --hb-accent:       var(--global-palette10, #F5A524);
  /* Sin var(): la paleta editable de Kadence no tiene un slot libre para la
     variante oscura del acento. Ver docs/paleta-y-tokens.md. */
  --hb-accent-dark:  #9F6608;

  --hb-ink:          var(--global-palette3, #10222A);
  --hb-text:         var(--global-palette4, #3A4A52);
  --hb-muted:        var(--global-palette5, #64757D);
  --hb-line:         var(--global-palette6, #DCE5E8);
  --hb-bg:           var(--global-palette9, #FFFFFF);

  /* Tipografía. Sigue a Kadence, que la resuelve desde el Personalizador.
     Hoy --global-heading-font-family vale `inherit`, que es su valor por
     defecto: los titulares heredan la fuente del cuerpo hasta que se
     configure una propia. */
  --hb-font-head:    var(--global-heading-font-family, "Figtree", system-ui, sans-serif);
  --hb-font-body:    var(--global-body-font-family, "Inter", system-ui, sans-serif);

  /* Colores semánticos. No salen de la paleta de Kadence a propósito: son
     señales de estado (sí/no/aviso), no colores de marca, y no deben moverse
     cuando se retoca la paleta. */
  --hb-ok:           #15803D;
  --hb-no:           #B91C1C;
  --hb-warn:         #92400E;
  --hb-warn-bg:      #FEF3C7;

  /* Fondos de las señales sí/no, para la tabla de ventajas/desventajas.
     Ojo con el verde: --hb-ok sobre el #E8F5EC que usaba antes la tabla da
     4.47:1, o sea NO llega a AA (el th es 1.05rem/700, que no califica como
     texto grande). Por eso el fondo se aclaró a #EEF8F1, que sube a 4.62:1.
     El rojo se dejó en su valor original: --hb-no encima da 5.66:1 y ya
     cumplía. */
  --hb-ok-bg:        #EEF8F1;
  --hb-no-bg:        #FDECEB;

  /* Geometría y escala tipográfica */
  --hb-r:            12px;
  --hb-r-sm:         8px;
  --hb-gap:          20px;
  --hb-section:      64px;
  --hb-h4:           17.5px;
  --hb-small:        14.5px;
  --hb-tiny:         12.5px;

  --hb-shadow:       0 1px 2px rgba(16,34,42,.05), 0 10px 26px -16px rgba(16,34,42,.28);
}


/* --------------------------------------------------------------------------
   1. DESCRIPCIÓN DE CATEGORÍA (pilares L1)
   Kadence la renderiza dentro del hero, a 1290px y heredando el centrado
   del H1. Aquí la devolvemos al ancho y ritmo de un artículo normal (842px).
   -------------------------------------------------------------------------- */

.post-archive-hero-section .archive-description {
  max-width: var(--global-content-narrow-width, 842px);
  margin-left: auto;
  margin-right: auto;
  margin-top: 2rem;
  text-align: left;
  font-size: 1.05rem;
  line-height: 1.75;
}

.post-archive-hero-section .archive-description * {
  text-align: left;
}

/* H1 del pilar a la izquierda, igual que el cuerpo.
   Antes el H1 salia centrado (default de Kadence) y el parrafo a la
   izquierda: dentro de la misma pagina se leia como folleto, no como
   articulo.

   Kadence centra con `.entry-hero-container-inner .entry-header`, que es
   especificidad (0,2,0). Por eso aca se suma `.post-archive-title` al
   selector y queda en (0,3,0): gana sin depender del orden de carga, que
   seria lo unico que decidiria si empataran. Sin !important.

   Ojo con el max-width del H1: tiene que ser el MISMO que el de
   .archive-description. Alinearlo a la izquierda a secas no alcanza, porque
   el H1 ocupa los 1290px del hero y el cuerpo va a 842px centrado — quedarian
   dos bordes izquierdos distintos y se veria peor que centrado. Compartir
   ancho y margenes automaticos es lo que hace que los bordes coincidan. */
.entry-hero-container-inner .entry-header.post-archive-title {
  text-align: left;
}

.post-archive-hero-section .entry-header .archive-title {
  max-width: var(--global-content-narrow-width, 842px);
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* Ritmo vertical: encabezados con aire arriba, poco abajo */
.post-archive-hero-section .archive-description h2 {
  font-size: 1.6rem;
  line-height: 1.3;
  margin: 2.5rem 0 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--global-palette7, #e5e7eb);
}

.post-archive-hero-section .archive-description h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.post-archive-hero-section .archive-description h3 {
  font-size: 1.25rem;
  line-height: 1.35;
  margin: 1.75rem 0 0.5rem;
}

.post-archive-hero-section .archive-description p {
  margin: 0 0 1.15rem;
}

.post-archive-hero-section .archive-description ul,
.post-archive-hero-section .archive-description ol {
  margin: 0 0 1.15rem;
  padding-left: 1.35rem;
}

.post-archive-hero-section .archive-description li {
  margin-bottom: 0.45rem;
}

.post-archive-hero-section .archive-description a {
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* --------------------------------------------------------------------------
   2. TABLAS GENERALES (comparativas de pilares y artículos)
   -------------------------------------------------------------------------- */

.archive-description table,
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.75rem 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

.archive-description th,
.entry-content th {
  background: var(--global-palette7, #f3f4f6);
  color: var(--global-palette3, #1f2937);
  font-weight: 600;
  text-align: left;
  padding: 0.7rem 0.85rem;
  border-bottom: 2px solid var(--global-palette6, #d1d5db);
}

.archive-description td,
.entry-content td {
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--global-palette7, #e5e7eb);
  vertical-align: top;
}

/* Zebra striping: mejora la lectura en tablas de 5+ columnas */
.archive-description tbody tr:nth-child(even),
.entry-content tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--global-palette7, #f3f4f6) 45%, transparent);
}

.archive-description tbody tr:hover,
.entry-content tbody tr:hover {
  background: color-mix(in srgb, var(--global-palette7, #f3f4f6) 80%, transparent);
}


/* --------------------------------------------------------------------------
   3. TABLA PROS / CONTRAS (paquete de conversión Tipo 6, Bloque B)
   -------------------------------------------------------------------------- */

.tabla-pros-contras {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 2rem 0;
  border: 1px solid var(--hb-line);
  border-radius: var(--hb-r-sm);
  overflow: hidden;
}

.tabla-pros-contras th {
  font-size: 1.05rem;
  font-weight: 700;
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--hb-line);
}

.tabla-pros-contras .columna-pros {
  background: var(--hb-ok-bg);
  color: var(--hb-ok);
}

.tabla-pros-contras .columna-contras {
  background: var(--hb-no-bg);
  color: var(--hb-no);
}

.tabla-pros-contras td {
  width: 50%;
  padding: 1.1rem 1rem;
  vertical-align: top;
  border-bottom: none;
  background: transparent;
}

.tabla-pros-contras td:first-child {
  border-right: 1px solid var(--hb-primary-soft);
}

.tabla-pros-contras ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tabla-pros-contras li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.7rem;
  line-height: 1.5;
}

.tabla-pros-contras li:last-child {
  margin-bottom: 0;
}

/* Marcadores: ✓ en ventajas, × en desventajas */
.tabla-pros-contras td:first-child li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--hb-ok);
  font-weight: 700;
}

.tabla-pros-contras td:last-child li::before {
  content: "×";
  position: absolute;
  left: 0;
  top: -1px;
  color: var(--hb-no);
  font-weight: 700;
  font-size: 1.15em;
}

/* Anula el zebra striping general dentro de esta tabla */
.tabla-pros-contras tbody tr:nth-child(even),
.tabla-pros-contras tbody tr:hover {
  background: transparent;
}


/* --------------------------------------------------------------------------
   4. CTA ABOVE-THE-FOLD (paquete Tipo 6, Bloque A)
   Grid de 2 columnas (imagen / contenido). Publicado por API, no por el
   bloque Columnas de Gutenberg — ver paquete-conversion-tipo6.md. Funciona
   igual si falta .atf-imagen (el bloque publica sin fotografía todavía):
   :has() colapsa el grid a una sola columna en ese caso.
   -------------------------------------------------------------------------- */

.atf-review-block {
  display: grid;
  grid-template-columns: minmax(0, 300px) 1fr;
  gap: 26px;
  align-items: center;
  padding: 24px;
  margin: 0 0 32px;
  background: var(--hb-primary-soft);
  border: 1px solid var(--hb-line);
  border-radius: var(--hb-r);
}

/* Dos condiciones distintas para colapsar a una columna, y se conservan las
   dos porque no cubren el mismo caso: una mira si .atf-contenido quedó solo,
   la otra si falta .atf-imagen. Según cómo se publique el bloque, dispara una
   u otra. */
.atf-review-block:has(.atf-contenido:only-child),
.atf-review-block:not(:has(.atf-imagen)) {
  grid-template-columns: 1fr;
}

.atf-imagen img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--hb-r-sm);
  background: #fff;
}

.atf-contenido {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.atf-texto-corto {
  margin: 0 0 18px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--hb-text);
}

/* El botón sigue al sistema: ámbar de fondo, tinta encima (8.01:1). Antes era
   petróleo con `color: #fff !important`, y ese !important era justamente lo
   que le impedía heredar cuando el resto del sitio pasó a ámbar. Fuera los
   dos !important.
   Se conserva el ancho completo, que es como está publicado: con inline-flex
   hace falta justify-content, porque text-align no centra ítems flex. */
.atf-cta-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 13px 24px;
  background: var(--hb-accent);
  color: var(--hb-ink);
  font-family: var(--hb-font-body);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  border-radius: 9px;
  transition: background 0.16s ease, color 0.16s ease, transform 0.15s ease;
}

.atf-cta-boton:hover,
.atf-cta-boton:focus {
  background: var(--hb-accent-dark);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

.atf-cta-boton:focus-visible {
  outline: 3px solid var(--global-palette3, #1f2937);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .atf-cta-boton {
    transition: none;
  }
  .atf-cta-boton:hover,
  .atf-cta-boton:focus {
    transform: none;
  }
}


/* --------------------------------------------------------------------------
   5. SECCIÓN FAQ (paquete Tipo 6, Bloque C)
   -------------------------------------------------------------------------- */

.faq-seccion {
  margin: 2.5rem 0;
  padding: 1.5rem 1.65rem;
  background: var(--global-palette7, #f7f8f9);
  border-radius: 10px;
}

.faq-seccion h2 {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}

.faq-seccion h3 {
  font-size: 1.1rem;
  font-weight: 650;
  margin: 1.5rem 0 0.4rem;
  padding-left: 1.5rem;
  position: relative;
}

.faq-seccion h3::before {
  content: "?";
  position: absolute;
  left: 0;
  color: var(--global-palette1, #1f6feb);
  font-weight: 700;
}

.faq-seccion h3:first-of-type {
  margin-top: 0.75rem;
}

.faq-seccion p {
  margin: 0 0 0.5rem;
  padding-left: 1.5rem;
}


/* --------------------------------------------------------------------------
   6. LISTADO DE POSTS HIJOS EN CATEGORÍA
   Separa visualmente el pilar del listado de sus L2.
   -------------------------------------------------------------------------- */

.post-archive .kadence-posts-list {
  padding-top: 1.5rem;
  border-top: 2px solid var(--global-palette7, #e5e7eb);
}

.post-archive .loop-entry .entry-title {
  font-size: 1.15rem;
  line-height: 1.35;
}


/* --------------------------------------------------------------------------
   7. CLUSTER DE NAVEGACIÓN FONS — grilla de pilares
   Usado en: home + pilares L1. Va como HTML crudo embebido en el .md, no
   como bloque Galería de Gutenberg — ver briefs/home.md.
   Las tarjetas funcionan con y sin <img>: hoy se publican sin imagen y
   :has() ajusta el espacio que ocuparía.
   Lleva su propio @media porque usa un breakpoint (600px) distinto al de
   la sección 8.
   -------------------------------------------------------------------------- */

.cluster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  margin: 2.5rem 0;
}

.cluster-item {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hb-line);
  /* Barra de acento de v2. Se SUMA al fondo, no lo reemplaza. */
  border-left: 3px solid var(--hb-primary);
  border-radius: var(--hb-r-sm);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  /* palette7 (= --hb-primary-soft) y no #fff: el fondo del contenido es
     palette9 (#ffffff), así que una tarjeta blanca no se distingue de la
     página — y sin imagen la tarjeta es solo eso. Mismo criterio que
     .atf-review-block y .faq-seccion. Decidido el 2026-08-05 mirando el sitio
     real; v2 proponía volver a #fff y se descartó. */
  background: var(--hb-primary-soft);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Ojo con el orden: border-color es atajo de los cuatro lados, así que la
   barra ámbar tiene que declararse DESPUÉS o se la come. */
.cluster-item:hover,
.cluster-item:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
  border-color: var(--hb-muted);
  border-left-color: var(--hb-accent);
  text-decoration: none;
}

/* La sección 1 subraya todo <a> dentro de .archive-description con
   especificidad (0,2,1), que le gana a .cluster-item (0,1,0). Sin esta
   excepción las tarjetas salen subrayadas enteras al replicar la grilla en la
   Descripción de un pilar L1. En la home no aplica: ahí el contenido va en
   .entry-content, fuera de ese selector. */
.post-archive-hero-section .archive-description a.cluster-item,
.post-archive-hero-section .archive-description a.cluster-item:hover {
  text-decoration: none;
}

.cluster-item:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.cluster-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  margin: 0;
}

.cluster-titulo {
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
  padding: .85rem 1rem .3rem;
}

.cluster-desc {
  font-size: .875rem;
  line-height: 1.45;
  opacity: .75;
  padding: 0 1rem 1rem;
}

/* Sin imagen: las tarjetas siguen funcionando como bloque de texto */
.cluster-item:not(:has(img)) .cluster-titulo {
  padding-top: 1.1rem;
}

/* Móvil: dos columnas en vez de una, para que el cluster se vea completo */
@media (max-width: 600px) {
  .cluster-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: .85rem;
  }

  .cluster-titulo {
    font-size: .95rem;
    padding: .7rem .75rem .25rem;
  }

  .cluster-desc {
    font-size: .8rem;
    padding: 0 .75rem .8rem;
  }
}


/* --------------------------------------------------------------------------
   8. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

  /* Tablas anchas: scroll horizontal en vez de romper el layout */
  .archive-description table,
  .entry-content table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .archive-description table td,
  .entry-content table td {
    white-space: normal;
    min-width: 130px;
  }

  /* Pros/contras: apiladas, no scroll */
  .tabla-pros-contras {
    display: block;
    overflow-x: visible;
    white-space: normal;
  }

  .tabla-pros-contras thead {
    display: none;
  }

  .tabla-pros-contras tbody,
  .tabla-pros-contras tr {
    display: block;
    width: 100%;
  }

  .tabla-pros-contras td {
    display: block;
    width: 100%;
    min-width: 0;
    border-right: none !important;
  }

  .tabla-pros-contras td:first-child {
    background: #e8f5ec;
    border-bottom: 1px solid var(--global-palette6, #d1d5db);
  }

  .tabla-pros-contras td:last-child {
    background: #fdeceb;
  }

  /* Encabezados propios para las celdas apiladas */
  .tabla-pros-contras td::before {
    display: block;
    margin-bottom: 0.6rem;
    font-weight: 700;
    font-size: 1rem;
  }

  .tabla-pros-contras td:first-child::before {
    content: "Ventajas";
    color: #1a6b39;
  }

  .tabla-pros-contras td:last-child::before {
    content: "Desventajas";
    color: #9b2c2c;
  }

  /* ATF: imagen arriba, contenido abajo */
  .atf-review-block {
    grid-template-columns: 1fr;
  }

  .atf-imagen {
    max-width: 240px;
    margin: 0 auto 1rem;
  }

  /* Descripción de categoría: menos padding lateral */
  .post-archive-hero-section .archive-description {
    font-size: 1rem;
  }

  .post-archive-hero-section .archive-description h2 {
    font-size: 1.35rem;
  }

  .faq-seccion {
    padding: 1.15rem 1rem;
  }
}


/* --------------------------------------------------------------------------
   9. ENLACES DENTRO DEL ARTÍCULO

   Kadence pinta los enlaces con --global-palette-highlight, que apunta al
   slot 1 (petróleo #0F3D4C). Contra el texto de párrafo, que es el slot 4
   (#3A4A52), eso da 1,27:1 — el ojo no los distingue y el enlace se lee como
   texto normal. WCAG pide 3:1 entre enlace y texto cuando el color es la
   única señal.

   El color no se toca: se refuerza la señal que no depende del color.
   El estilo de enlace activo del tema es `link-style-standard`, que no tiene
   ninguna regla propia en Kadence, así que acá no se pisa nada suyo.

   Va al final para no renumerar las secciones anteriores, que están
   referenciadas por número en CLAUDE.md.

   Los :not() excluyen los <a> que no son enlaces de texto:
     .atf-cta-boton  botón CTA del paquete Tipo 6 (sección 4)
     .cluster-item   tarjeta de la grilla de pilares (sección 7)
     .hb-btn         botón del sistema (sección 11). Cubre también
                     .hb-btn--out, que nunca va solo
     .hb-card        tarjeta del sistema cuando es <a> (sección 12)
     las clases de botón de WordPress y Kadence, por si aparece un bloque
     botón dentro de un artículo más adelante.

   Criterio para mantener esta lista: si una clase nueva declara
   `text-decoration: none` sobre un <a>, tiene que entrar acá o va a salir
   subrayada dentro de .entry-content.
   -------------------------------------------------------------------------- */

.entry-content a:not(.atf-cta-boton):not(.cluster-item):not(.hb-btn):not(.hb-card):not(.button):not(.wp-block-button__link):not(.wp-element-button) {
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
/* --------------------------------------------------------------------------
   10. GRILLAS (sistema de diseño v2)
   -------------------------------------------------------------------------- */

.hb-grid { display: grid; gap: var(--hb-gap); grid-template-columns: repeat(3, 1fr); }
.hb-grid--2 { grid-template-columns: repeat(2, 1fr); }
.hb-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 980px) {
  .hb-grid,
  .hb-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .hb-grid,
  .hb-grid--2,
  .hb-grid--4 { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   11. BOTONES
   El ámbar es fondo, nunca tinta: #F5A524 sobre blanco da 2.04:1 y no pasa.
   Texto tinta encima -> 8.01:1. Hover ámbar oscuro con blanco -> 4.80:1.
   Replica los valores del Personalizador (Diseño -> Base Button Styles) para
   que un .hb-btn y un botón nativo de Kadence se vean igual.
   -------------------------------------------------------------------------- */

.hb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--hb-font-body);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.3;
  padding: 13px 24px;
  border-radius: 9px;
  border: 1.5px solid transparent;
  background: var(--hb-accent);
  color: var(--hb-ink);
  text-decoration: none;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.hb-btn:hover,
.hb-btn:focus {
  background: var(--hb-accent-dark);
  color: #fff;
  text-decoration: none;
}

/* v2 no traía foco visible de teclado en los botones. Se agrega con el mismo
   criterio que .atf-cta-boton y .cluster-item. */
.hb-btn:focus-visible {
  outline: 3px solid var(--hb-ink);
  outline-offset: 2px;
}

/* Secundario: contorno en petróleo */
.hb-btn--out {
  background: transparent;
  color: var(--hb-primary);
  border-color: var(--hb-primary);
}

.hb-btn--out:hover,
.hb-btn--out:focus {
  background: var(--hb-primary);
  color: #fff;
}

/* Sobre banda oscura el contorno se invierte */
.hb-band .hb-btn--out {
  color: #fff;
  border-color: rgba(255, 255, 255, .45);
}

.hb-band .hb-btn--out:hover,
.hb-band .hb-btn--out:focus {
  background: #fff;
  color: var(--hb-primary);
  border-color: #fff;
}


/* --------------------------------------------------------------------------
   12. TARJETA
   Base común de tarjeta de artículo, de marca y de cluster.
   -------------------------------------------------------------------------- */

.hb-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--hb-line);
  border-radius: var(--hb-r);
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

a.hb-card {
  color: inherit;
  text-decoration: none;
}

a.hb-card:hover,
a.hb-card:focus {
  transform: translateY(-3px);
  box-shadow: var(--hb-shadow);
  border-color: var(--hb-primary);
  text-decoration: none;
}

a.hb-card:focus-visible {
  outline: 2px solid var(--hb-primary);
  outline-offset: 2px;
}

.hb-card__media {
  aspect-ratio: 16 / 10;
  background: var(--hb-primary-soft);
  border-bottom: 1px solid var(--hb-line);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.hb-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hb-card__body {
  padding: 17px 18px 19px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}

.hb-card__kicker {
  font-size: var(--hb-tiny);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hb-primary);
}

.hb-card__title {
  font-family: var(--hb-font-head);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.02em;
  color: var(--hb-ink);
  margin: 0;
}

.hb-card__desc {
  margin: 0;
  font-size: var(--hb-small);
  color: var(--hb-muted);
}

.hb-card__meta {
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px solid var(--hb-line);
  font-size: 13px;
  color: var(--hb-muted);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Precio en petróleo por defecto. La variante ámbar oscuro existe para
   destacar un precio puntual — pero no las dos en la misma página. */
.hb-card__price {
  margin-top: auto;
  padding-top: 10px;
  font-family: var(--hb-font-head);
  font-weight: 800;
  font-size: 15px;
  color: var(--hb-primary);
}

.hb-card__price--acc {
  color: var(--hb-accent-dark);
}

/* Estado "aún no publicado" — para enlazar la arquitectura completa sin 404 */
.hb-card--soon {
  background: transparent;
  border-style: dashed;
}

.hb-card--soon .hb-card__title,
.hb-card--soon .hb-card__desc {
  color: var(--hb-muted);
}

.hb-badge-soon {
  display: inline-block;
  align-self: flex-start;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hb-warn);
  background: var(--hb-warn-bg);
  padding: 3px 8px;
  border-radius: 5px;
}


/* --------------------------------------------------------------------------
   13. BANDA OSCURA
   La superficie que le da sentido al segundo color: sobre petróleo el ámbar
   funciona como tinta, cosa que sobre blanco no puede. Máximo una o dos veces
   por página.
   -------------------------------------------------------------------------- */

.hb-band {
  background: var(--hb-primary);
  color: #fff;
  padding-block: var(--hb-section);
}

.hb-band h2,
.hb-band h3,
.hb-band h4 {
  color: #fff;
}

.hb-band p {
  color: #fff;
  opacity: .72;
}

.hb-band a:not(.hb-btn) {
  color: var(--hb-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hb-panel {
  background: var(--hb-primary-dark);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  padding: 26px;
}

.hb-panel__big {
  font-family: var(--hb-font-head);
  font-weight: 800;
  font-size: 38px;
  line-height: 1;
  color: var(--hb-accent);
}

.hb-panel__lbl {
  font-size: 14px;
  color: #fff;
  opacity: .7;
  margin-top: 5px;
}

.hb-panel hr {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .13);
  margin: 20px 0;
}


/* --------------------------------------------------------------------------
   14. BLOQUES EDITORIALES
   -------------------------------------------------------------------------- */

/* Caja de dato o advertencia. El borde ámbar es de los pocos usos legítimos
   del acento dentro del cuerpo de un artículo. */
.hb-note {
  background: var(--hb-primary-soft);
  border-left: 4px solid var(--hb-accent);
  border-radius: 0 var(--hb-r-sm) var(--hb-r-sm) 0;
  padding: 18px 22px;
  margin: 28px 0;
  font-size: 16px;
  color: var(--hb-text);
}

.hb-note--warn {
  background: var(--hb-warn-bg);
  border-left-color: var(--hb-warn);
}

.hb-note strong {
  font-family: var(--hb-font-head);
  color: var(--hb-ink);
}

.hb-note > :last-child {
  margin-bottom: 0;
}

/* Pasos numerados: método editorial, tutoriales de troubleshooting */
.hb-steps {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 28px 0;
  padding: 0;
  list-style: none;
  counter-reset: hb;
}

.hb-steps li {
  display: flex;
  gap: 15px;
  counter-increment: hb;
}

.hb-steps li::before {
  content: counter(hb);
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--hb-r-sm);
  background: var(--hb-accent);
  color: var(--hb-ink);
  display: grid;
  place-items: center;
  font-family: var(--hb-font-head);
  font-weight: 800;
  font-size: 14px;
}

.hb-steps h4 {
  margin: 0;
  font-size: var(--hb-h4);
  font-weight: 700;
  color: var(--hb-ink);
}

.hb-steps p {
  margin: 3px 0 0;
  font-size: var(--hb-small);
  color: var(--hb-muted);
}

.hb-band .hb-steps h4 {
  color: #fff;
}

.hb-band .hb-steps p {
  color: #fff;
  opacity: .68;
}


/* --------------------------------------------------------------------------
   15. CTA GENÉRICO Y TABLAS DEL SISTEMA
   El paquete Tipo 6 (.atf-*) vive en la sección 4, ya reconciliado. Acá van
   los componentes equivalentes para artículos que no son Tipo 6.
   -------------------------------------------------------------------------- */

.hb-cta {
  background: var(--hb-primary-soft);
  border: 1px solid var(--hb-line);
  border-radius: var(--hb-r);
  padding: 20px 24px;
  margin: 28px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.hb-cta__txt {
  flex: 1 1 260px;
}

.hb-cta__txt strong {
  font-family: var(--hb-font-head);
  font-size: 18px;
  display: block;
  color: var(--hb-ink);
}

.hb-cta__txt span {
  font-size: var(--hb-small);
  color: var(--hb-muted);
}

/* Tabla a favor / en contra */
.hb-pros {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
}

.hb-pros th {
  width: 50%;
  padding: 12px 16px;
  text-align: left;
  font-family: var(--hb-font-head);
  font-size: 16px;
  font-weight: 700;
  border: 1px solid var(--hb-line);
  background: var(--hb-primary-soft);
}

.hb-pros th:first-child {
  color: var(--hb-ok);
}

.hb-pros th:last-child {
  color: var(--hb-no);
}

.hb-pros td {
  padding: 14px 16px;
  vertical-align: top;
  border: 1px solid var(--hb-line);
  font-size: var(--hb-small);
}

.hb-pros ul {
  margin: 0;
  padding-left: 1.15em;
}

.hb-pros li {
  margin-bottom: .45em;
}

.hb-pros li:last-child {
  margin-bottom: 0;
}

/* Ficha de especificaciones */
.hb-specs {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: var(--hb-small);
}

.hb-specs td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--hb-line);
}

.hb-specs td:first-child {
  font-weight: 600;
  color: var(--hb-muted);
  width: 42%;
}


/* --------------------------------------------------------------------------
   16. UTILIDADES
   -------------------------------------------------------------------------- */

.hb-section {
  padding-block: var(--hb-section);
}

.hb-section--alt {
  background: var(--hb-primary-soft);
  border-block: 1px solid var(--hb-line);
}

.hb-muted {
  color: var(--hb-muted);
}

.hb-center {
  text-align: center;
}


/* --------------------------------------------------------------------------
   17. MOVIMIENTO REDUCIDO
   .atf-cta-boton ya tiene el suyo en la sección 4; no se repite acá.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .hb-card,
  .hb-btn,
  .cluster-item {
    transition: none;
  }

  a.hb-card:hover,
  a.hb-card:focus,
  .cluster-item:hover,
  .cluster-item:focus-visible {
    transform: none;
  }
}


/* --------------------------------------------------------------------------
   18. HERO DE PORTADA

   Bloque de entrada de la Home, y **contiene el H1 de la pagina**.

   Ojo con la condicion que lo hace posible: por defecto el H1 de una Pagina
   lo emite Kadence desde el titulo del objeto, como <h1 class="entry-title">
   dentro de section.entry-hero, o sea FUERA de .entry-content. Con ese titulo
   visible, un <h1> aca daria DOS H1 — el bug que esta misma pagina ya tuvo con
   "Inicio" + "Hogarbot".

   Por eso la Pagina 930 lleva el meta **_kad_post_title = "hide"**, que oculta
   el titulo de la plantilla. Es meta POR OBJETO, verificado escribiendolo en
   una pagina en borrador: cambio 1 de 20 objetos y nada mas.

   **Si alguna vez se revierte ese meta, hay que sacar el <h1> de aca en el
   mismo movimiento**, o vuelven los dos H1. Y al reves: si se saca el <h1> del
   hero sin revertir el meta, la pagina se queda sin ninguno.
   Ver briefs/rediseno-home.md, Cambio 2.

   **Rehecho el 2026-08-23: de dos columnas a foto full-bleed con el texto
   superpuesto abajo.** La version de dos columnas (.hb-hero__cols, texto a la
   izquierda + .hb-hero__media a la derecha) ya no existe; si aparece en algun
   .md viejo, es markup huerfano.

   Los colores de esta seccion **no salen de la paleta de Kadence a proposito**,
   a diferencia del resto del archivo. El velo es un negro CALIDO (20,17,14) y
   no el petroleo de --hb-primary: la foto es madera y luz tibia, y un velo
   azulado encima la ensucia. Por el mismo motivo el texto del boton primario
   es #1C1C1A y no --hb-ink (#10222A, que tira a azul). Retocar la paleta en el
   Personalizador NO deberia mover el hero.

   Anexada al final a proposito: insertarla en su lugar "logico" obligaba a
   renumerar las cabeceras de la 14 a la 17 sin ganar nada.
   -------------------------------------------------------------------------- */

.hb-hero {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  margin: 0 0 28px;

  /* NO sacar este width, aunque parezca redundante en un bloque.

     Con `aspect-ratio` puesto (media queries de abajo), una altura definida
     hace que el ancho se derive de ELLA en vez de estirarse al contenedor. Y
     el `min-height` de tablet vuelve la altura definida: a 768px daba
     440 x 16/9 = 782,2px de ancho dentro de un contenedor de ~690, o sea el
     hero se salia de la pagina por la derecha. Medido en produccion, no
     deducido.

     Con el ancho fijado al 100%, la proporcion solo puede derivar la ALTURA
     desde el ancho, y el min-height queda como piso de altura — que es lo
     unico que se le pidio. */
  width: 100%;
  max-width: 100%;

  /* El contenido va anclado ABAJO. Se hace con flex y no con
     "position:absolute; bottom:0", que es lo primero que uno escribe: con la
     foto y el velo absolutos, un .hb-hero__contenido tambien absoluto dejaria
     al contenedor SIN nada en flujo, y entonces su altura seria exactamente el
     min-height. En movil el bloque de texto mide mas que esos 460px, asi que
     el overflow:hidden de arriba recortaba el borde superior del eyebrow.
     Con flex el contenido esta en flujo: el min-height es un piso, no un
     techo, y la caja crece si el copy crece. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  /* Movil: altura minima, NO aspect-ratio. Con una proporcion fija el alto lo
     manda el ancho de la pantalla y el texto no entra. */
  min-height: 460px;
}

/* La foto y el velo son capas de fondo: van absolutas para que no aporten
   altura, y el alto lo fije el min-height o el aspect-ratio de arriba. */
.hb-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* 40% y no center: el robot esta apenas por debajo de la mitad del encuadre
     original (4:3). Al recortar a 2/1 en escritorio, center se lo come por
     abajo. */
  object-position: center 40%;

  /* Baja la foto lo justo para que el texto no compita con la madera clara.
     NO agregar blur aca: el desenfoque de primer plano ya viene aplicado en
     el archivo de origen. */
  filter: brightness(0.88);

  display: block;
  margin: 0;
  z-index: 0;
}

/* Degradado de legibilidad. Arranca transparente para no ensuciar el tercio
   superior, que es donde esta el robot. */
.hb-hero__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(20, 17, 14, 0)    15%,
    rgba(20, 17, 14, 0.28) 35%,
    rgba(20, 17, 14, 0.51) 55%,
    rgba(20, 17, 14, 0.72) 75%,
    rgba(20, 17, 14, 0.97) 100%);
}

.hb-hero__contenido {
  position: relative;
  z-index: 2;
  padding: 24px 20px 28px;

  /* Flex-column solo para poder subir el eyebrow por encima del H1 con
     `order`. En el DOM el **H1 va primero**, que es la condicion que hay que
     conservar: es el primer elemento del bloque para lectores de pantalla y
     para el parseo, igual que el criterio que ya seguia .hb-hero__media en la
     version de dos columnas. Reordenar el markup para que el eyebrow quede
     antes seria mas corto de escribir y peor. */
  display: flex;
  flex-direction: column;
}

.hb-hero__contenido > :last-child {
  margin-bottom: 0;
}

.hb-hero__eyebrow {
  order: -1;
  font-family: var(--hb-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;

  /* Blanco, no el ambar de marca. En #F5A524 daba 3,29:1 sobre la foto, y era
     lo unico que obligaba a poner un segundo degradado detras del bloque de
     texto; ese degradado, recortado con mascara, dejaba un borde recto que se
     leia como una caja oscura atras del H1. En blanco el velo principal
     alcanza, y el ambar queda solo donde manda: el boton primario. */
  color: #FFFFFF;
  text-shadow: 0 1px 12px rgba(20, 17, 14, .85);
  margin: 0 0 10px;

  /* Sin nowrap y sin truncado: a 390px la linea no entra de una y tiene que
     poder pasar a dos sin cortar "PATROCINIOS" por la mitad. */
  line-height: 1.4;
}

/* El H1 real de la Home. Tamaño propio y no el de Kadence: sobre foto el
   titular tiene que sostener el bloque, y el clamp lo mantiene legible desde
   390px hasta escritorio. */
.hb-hero h1 {
  font-family: var(--hb-font-head);
  font-weight: 800;
  font-size: clamp(27px, 7vw, 46px);
  line-height: 1.15;
  color: #FFFFFF;

  /* Reemplaza al degradado extra que habia detras del bloque. Radio grande y
     offset de 1px: funciona como halo, no como sombra dura, asi que da
     contraste sin oscurecer un area entera ni dejar borde. */
  text-shadow: 0 1px 12px rgba(20, 17, 14, .85);
  margin: 0 0 12px;
  max-width: 20ch;
}

.hb-hero__lede {
  font-family: var(--hb-font-body);
  font-weight: 400;
  font-size: clamp(15px, 4vw, 18px);
  line-height: 1.5;
  color: #E4E4E2;
  text-shadow: 0 1px 10px rgba(20, 17, 14, .75);
  max-width: 48ch;
  margin: 0 0 20px;
}

.hb-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

/* Guardas contra wpautop, que corre sobre el post_content al servirlo y NO
   respeta el HTML crudo del hero. Verificado en vivo el 2026-08-23, no
   supuesto: metia un <br /> entre los dos <a> y </p> sueltos alrededor del
   <img> y del cierre del bloque de texto.

   Lo que lo hace caro es como termina en el DOM: un </p> sin apertura **no se
   descarta**, el parser HTML5 lo convierte en un <p></p> vacio. O sea quedaba
   un parrafo fantasma DENTRO de .hb-hero__contenido, que es flex: sumaba alto
   y encima se robaba el `> :last-child` que anula el margen del ultimo
   elemento. El <br />, por su parte, es un item flex mas: separaba los dos
   botones 47px en vez de los 10 del gap.

   La causa se corrige en el .md — el <img> va pegado al <section> y los dos
   <a> en una sola linea, porque wpautop reacciona a los saltos de linea
   alrededor de elementos en linea. Estas dos reglas son la red: si alguien
   reformatea el .md "para que se lea mejor", el hero no se rompe en silencio. */
.hb-hero__actions br {
  display: none;
}

.hb-hero p:empty {
  display: none;
}

/* Los dos botones se redefinen sobre .hb-btn de la seccion 11: aca el fondo es
   una foto, no --hb-bg, y los valores de contraste de esa seccion no aplican. */
.hb-hero__actions .hb-btn {
  font-family: var(--hb-font-head);
  font-weight: 700;
  font-size: 15px;
  padding: 13px 20px;
  border-radius: 10px;
  border-width: 1px;
  background: #F5A524;
  color: #1C1C1A;
  border-color: transparent;
}

.hb-hero__actions .hb-btn:hover,
.hb-hero__actions .hb-btn:focus {
  background: #FFFFFF;
  color: #1C1C1A;
}

/* Secundario: mismo criterio que .hb-band .hb-btn--out — sobre fondo oscuro el
   contorno se invierte a blanco. */
.hb-hero__actions .hb-btn--out {
  background: transparent;
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, .55);
}

.hb-hero__actions .hb-btn--out:hover,
.hb-hero__actions .hb-btn--out:focus {
  background: #FFFFFF;
  color: #1C1C1A;
  border-color: #FFFFFF;
}

.hb-hero__actions .hb-btn:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: 2px;
}

/* Franja de garantias. Salio del hero al rehacerlo: sobre la foto sumaba alto
   en movil y empujaba al H1 fuera del degradado. */
.hb-hero__ticks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.hb-hero__ticks li {
  position: relative;
  padding-left: 1.5em;
  font-size: var(--hb-small);
  color: var(--hb-text);
  margin: 0;
}

.hb-hero__ticks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  /* --hb-ok daria 4.33:1 sobre el fondo, bajo AA. Se usa el color de marca
     (10.12:1) en vez de apoyarse en la excepcion de glifo decorativo. */
  color: var(--hb-primary);
}

/* Menos de 480px: los botones apilados y a ancho completo. En pantallas de
   360-390px los dos en fila dejan cada uno en ~150px y el texto se parte. */
@media (max-width: 479px) {
  .hb-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hb-hero__actions .hb-btn {
    width: 100%;
  }
}

/* Desde tablet la foto ya tiene ancho de sobra y pasa a proporcion fija. */
@media (min-width: 768px) {
  .hb-hero {
    aspect-ratio: 16 / 9;

    /* NO `min-height: 0`. A 768px justos el 16/9 da una caja de 409,5px y el
       bloque de texto mide 412,6: los 3,1px de diferencia se los comia el
       `overflow:hidden` por arriba, recortando el borde del eyebrow. Medido a
       768px, no estimado. Este piso solo actua en el extremo angosto del
       rango — desde ~800px de ancho de tablet el 16/9 ya da mas de 440 y
       manda la proporcion. */
    min-height: 440px;
  }

  .hb-hero__contenido {
    padding: 32px 32px 36px;
  }
}

@media (min-width: 1200px) {
  .hb-hero {
    aspect-ratio: 2 / 1;
  }

  .hb-hero__contenido {
    padding: 40px 40px 44px;
  }
}