/* ============================================================
   hub.css: portada hub (index.html), versión 2
   Solo usa variables de global.css, así el modo oscuro sale solo.
   La landing de páginas web (paginas-web.html) sigue con home.css.
   ============================================================ */

/* Dos valores propios de esta página, armados con variables globales.
   --hub-navy: en oscuro --accent es celeste y el texto blanco encima no
   se lee (2,6:1), así que ahí se oscurece hacia la banda oscura (7,6:1). */
:root {
  --hub-navy: var(--accent);
  --hub-sombra: 0 1px 2px color-mix(in srgb, var(--bg-dark) 8%, transparent),
                0 12px 28px -14px color-mix(in srgb, var(--bg-dark) 32%, transparent);

  /* Franja de color de las tarjetas de productos: navy profundo con un
     resplandor celeste. En claro el celeste sale de aclarar el navy. */
  --hub-celeste: color-mix(in srgb, var(--accent) 50%, white);
  --hub-franja-a: var(--surface-dark);
  --hub-franja-b: var(--bg-dark);

  /* Tintes de las mini tarjetas: el tono pinta el ícono y el borde, el
     fondo tiñe la tarjeta. Coral, navy, celeste y arena; nada de verde ni
     violeta. El celeste y la arena se oscurecen en claro para que el ícono
     se vea sobre su propio fondo. */
  --hub-tinte-coral: var(--accent-2);
  --hub-tinte-coral-fondo: color-mix(in srgb, var(--accent-2) 7%, var(--card));
  --hub-tinte-navy: var(--accent);
  --hub-tinte-navy-fondo: color-mix(in srgb, var(--accent) 9%, var(--card));
  --hub-tinte-celeste: #3f7cb8;
  --hub-tinte-celeste-fondo: color-mix(in srgb, #a9c0e0 24%, var(--card));
  --hub-tinte-arena: #a8741f;
  --hub-tinte-arena-fondo: color-mix(in srgb, #f0c46c 16%, var(--bg));
}

/* En oscuro --bg-dark y --surface-dark son grises, así que la franja se
   tiñe con el celeste de --accent para que siga siendo navy y no gris. */
html[data-theme="dark"] {
  --hub-navy: color-mix(in srgb, var(--accent) 45%, var(--bg-dark));
  --hub-celeste: var(--accent);
  --hub-franja-a: color-mix(in srgb, var(--accent) 50%, black);
  --hub-franja-b: color-mix(in srgb, var(--accent) 26%, black);

  /* Tintes en oscuro: poca carga del tono sobre la tarjeta y el ícono en
     el tono claro. El navy va profundo para no confundirse con el celeste. */
  --hub-tinte-coral-fondo: color-mix(in srgb, var(--accent-2) 11%, var(--card));
  --hub-tinte-navy-fondo: color-mix(in srgb, #3d5a80 38%, var(--card));
  --hub-tinte-celeste: #a9c0e0;
  --hub-tinte-celeste-fondo: color-mix(in srgb, #a9c0e0 12%, var(--card));
  --hub-tinte-arena: #e2b565;
  --hub-tinte-arena-fondo: color-mix(in srgb, #e2b565 9%, var(--card));
}

/* El celeste de --accent es pastel y al oscurecerlo con una mezcla queda
   gris pizarra. Donde se puede, se baja la luminosidad sin perder el tono. */
@supports (color: oklch(from red l c h)) {
  html[data-theme="dark"] {
    --hub-franja-a: oklch(from var(--accent) 0.4 0.08 h);
    --hub-franja-b: oklch(from var(--accent) 0.27 0.06 h);
  }
}

.hub-wrap {
  max-width: 760px;
  margin-inline: auto;
}

.hub-seccion {
  padding-block: clamp(3.5rem, 8vw, 6rem);
}

/* Título de sección grande y centrado ("Lo que hago", "Productos", FAQ) */
.hub-rotulo {
  font-size: clamp(28px, 2.2vw + 18px, 44px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
  text-align: center;
  text-wrap: balance;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* ── PORTADA ─────────────────────────────────────────────────── */
.hub-portada {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding-bottom: clamp(3.25rem, 7vw, 5.5rem);
}

/* Fondo de puntitos en CSS, se desvanece hacia abajo y a los lados */
.hub-portada::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle, var(--border) 1.5px, transparent 1.8px);
  background-size: 22px 22px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 30%, black 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 75% at 50% 30%, black 40%, transparent 100%);
}

/* La cabeza lleva H1, bajada y píldora. En móvil y tablet las fichas
   viven en una franja reservada ARRIBA del H1 (--banda); en escritorio
   viven en los costados (--lado), fuera de la columna de texto. */
.hub-cabeza {
  --lado: clamp(1rem, 5vw, 2rem);
  --banda: 96px;
  position: relative;
  padding: calc(var(--banda) + 0.75rem) var(--lado) 0;
  text-align: center;
}

.hub-h1 {
  font-size: clamp(34px, 3.6vw + 18px, 64px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--ink);
  text-wrap: balance;
  margin: 0 auto 1.25rem;
}

.hub-bajada {
  font-size: clamp(16px, 0.4vw + 14.5px, 19px);
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 62ch;
  margin-inline: auto;
  text-wrap: pretty;
}

/* Píldora del producto del momento: coral muy suave */
.hub-nuevo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.75rem;
  padding: 0.55rem 1.1rem 0.55rem 0.8rem;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--accent-2) 45%, var(--border));
  background: color-mix(in srgb, var(--accent-2) 10%, var(--card));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-2) 7%, transparent);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.3;
  transition: border-color 0.15s, transform 0.15s;
}

.hub-nuevo svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--accent-2);
}

.hub-nuevo:hover {
  border-color: var(--accent-2);
  transform: translateY(-1px);
}

/* Los siete accesos: píldoras con ícono que envuelven y se centran */
.hub-pildoras {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  max-width: 980px;
  margin: clamp(2rem, 4vw, 2.75rem) auto 0;
}

.hub-pildora {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.65rem 1.25rem 0.65rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--bg-dark) 6%, transparent);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.25;
  transition: transform 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.hub-pildora svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--accent);
}

.hub-pildora:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--hub-sombra);
}

.hub-pildora--coral {
  background: var(--btn-cta-bg);
  border-color: var(--btn-cta-bg);
  color: var(--btn-cta-ink);
}

.hub-pildora--navy {
  background: var(--hub-navy);
  border-color: var(--hub-navy);
  color: var(--btn-cta-ink);
}

.hub-pildora--coral svg,
.hub-pildora--navy svg {
  color: currentColor;
}

.hub-pildora--coral:hover {
  background: var(--btn-cta-bg-hover);
  border-color: var(--btn-cta-bg-hover);
}

.hub-pildora--navy:hover {
  border-color: var(--hub-navy);
  background: color-mix(in srgb, var(--hub-navy) 88%, var(--bg-dark));
}

.hub-nuevo:focus-visible,
.hub-pildora:focus-visible,
.hub-mini:focus-visible,
.hub-boton:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ── FICHAS FLOTANTES ────────────────────────────────────────── */
.hub-fichas {
  position: absolute;
  inset: 0 0 auto;
  height: var(--banda);
  pointer-events: none;
}

.hub-ficha {
  --tam: 56px;
  --rot: 0deg;
  position: absolute;
  display: grid;
  place-items: center;
  width: var(--tam);
  height: var(--tam);
  border-radius: 28%;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--hub-sombra);
  color: var(--accent);
  transform: rotate(var(--rot));
  animation: hub-flotar 7s ease-in-out infinite;
}

.hub-ficha svg {
  width: 46%;
  height: 46%;
}

.hub-ficha--circulo { border-radius: 50%; }
.hub-ficha--coral   { color: var(--accent-2); }

@keyframes hub-flotar {
  0%, 100% { transform: translateY(0) rotate(var(--rot)); }
  50%      { transform: translateY(-7px) rotate(var(--rot)); }
}

/* Sin gate de prefers-reduced-motion a propósito: regla del repo, el Windows
   de Álvaro tiene la reducción activada y las animaciones de marketing
   tienen que verse igual. */

/* Móvil: cuatro fichas chicas en la franja sobre el H1 */
.hub-ficha--3,
.hub-ficha--4,
.hub-ficha--7,
.hub-ficha--8 { display: none; }

.hub-ficha--1 { --tam: 52px; --rot: -8deg; left: 6%;  top: 22px; animation-duration: 7.5s; }
.hub-ficha--2 { --tam: 38px;               left: 29%; top: 50px; animation-duration: 6.2s; animation-delay: -2s; }
.hub-ficha--5 { --tam: 44px; --rot: 6deg;  right: 29%; top: 8px; animation-duration: 8.4s; animation-delay: -4s; }
.hub-ficha--6 { --tam: 52px; --rot: 5deg;  right: 6%; top: 32px; animation-duration: 6.8s; animation-delay: -1s; }

/* Tablet: la misma franja, más alta y con fichas más grandes */
@media (min-width: 720px) {
  .hub-cabeza { --banda: 128px; }

  .hub-ficha--1 { --tam: 72px; left: 12%; top: 26px; }
  .hub-ficha--2 { --tam: 48px; left: 31%; top: 64px; }
  .hub-ficha--5 { --tam: 60px; right: 31%; top: 10px; }
  .hub-ficha--6 { --tam: 72px; right: 12%; top: 38px; }
}

/* Escritorio: las ocho fichas en los costados de la columna de texto.
   --lado es el ancho de cada costado; las fichas se miden desde el borde
   de la columna hacia afuera, así nunca entran a la zona del texto.
   Tamaños y distancias crecen con el ancho (en vw) hasta 1280px, para
   que a 1024px, con 150px de costado, no queden pegadas al borde. */
@media (min-width: 1024px) {
  .hub-cabeza {
    --lado: max(150px, calc((100% - 880px) / 2));
    --banda: 0px;
    padding-top: clamp(4.5rem, 7vw, 6.5rem);
  }

  .hub-fichas {
    inset: 0;
    height: auto;
  }

  .hub-ficha { inset: auto; }

  .hub-ficha--3,
  .hub-ficha--4,
  .hub-ficha--7,
  .hub-ficha--8 { display: grid; }

  .hub-ficha--grande { --tam: clamp(84px, 8.1vw, 104px); }
  .hub-ficha--media  { --tam: clamp(62px, 5.9vw, 76px); }
  .hub-ficha--chica  { --tam: clamp(46px, 4.4vw, 56px); }

  /* Costado izquierdo */
  .hub-ficha--1 { --rot: -8deg; top: 12%;    right: calc(100% - var(--lado) + 2.8vw); }
  .hub-ficha--2 {               top: 39%;    right: calc(100% - var(--lado) + 6.9vw); }
  .hub-ficha--3 { --rot: 7deg;  top: 58%;    right: calc(100% - var(--lado) + 1.4vw); animation-duration: 8.8s; animation-delay: -3s; }
  .hub-ficha--4 { --rot: -5deg; bottom: 3%;  right: calc(100% - var(--lado) + 6.4vw); animation-duration: 6.4s; animation-delay: -5s; }

  /* Costado derecho */
  .hub-ficha--5 { --rot: 6deg;  top: 8%;     left: calc(100% - var(--lado) + 4.8vw); }
  .hub-ficha--6 { --rot: 5deg;  top: 34%;    left: calc(100% - var(--lado) + 1.7vw); }
  .hub-ficha--7 {               top: 66%;    left: calc(100% - var(--lado) + 6.2vw); animation-duration: 7.2s; animation-delay: -2.5s; }
  .hub-ficha--8 { --rot: -6deg; bottom: 2%;  left: calc(100% - var(--lado) + 1.1vw); animation-duration: 8.2s; animation-delay: -6s; }
}

/* ── ÍCONO EN FICHA (pilares, mini tarjetas y productos) ─────── */
.hub-icono {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  color: var(--accent);
}

.hub-icono svg {
  width: 26px;
  height: 26px;
}

.hub-icono--coral {
  background: color-mix(in srgb, var(--accent-2) 10%, var(--card));
  border-color: color-mix(in srgb, var(--accent-2) 25%, var(--border));
  color: var(--accent-2);
}

.hub-icono--chico {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.hub-icono--chico svg {
  width: 21px;
  height: 21px;
}

.hub-icono--grande {
  width: 104px;
  height: 104px;
  border-radius: 28px;
  background: var(--card);
  box-shadow: var(--hub-sombra);
}

.hub-icono--grande svg {
  width: 48px;
  height: 48px;
}

/* ── LO QUE HAGO ─────────────────────────────────────────────── */
.hub-pilares {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 720px) and (max-width: 959px) {
  .hub-pilares {
    max-width: 640px;
    margin-inline: auto;
  }
}

@media (min-width: 960px) {
  .hub-pilares { grid-template-columns: repeat(3, 1fr); }
}

.hub-pilar-col {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.hub-pilar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--hub-sombra);
}

.hub-pilar h2,
.hub-pilar h3 {
  font-size: clamp(20px, 0.5vw + 17px, 23px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
  text-wrap: balance;
  margin: 1.25rem 0 0.75rem;
}

.hub-pilar p {
  font-size: var(--text-sm);
  color: var(--ink-2);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  text-wrap: pretty;
}

.hub-pilar .hub-enlace {
  margin-top: auto;
  font-size: var(--text-sm);
}

.hub-enlace {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  color: var(--accent);
}

.hub-enlace::after {
  content: '';
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s;
}

.hub-enlace:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hub-enlace:hover::after {
  transform: translateX(3px) rotate(45deg);
}

.hub-enlace:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Los accesos 4 a 7 en mini tarjetas */
.hub-minis {
  display: grid;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

@media (min-width: 560px) {
  .hub-minis { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .hub-minis { grid-template-columns: repeat(4, 1fr); }
}

.hub-minis > li { display: flex; }

/* Cada mini tarjeta elige su tinte con un modificador (--coral, --navy,
   --celeste, --arena). Sin modificador queda en blanco con tono navy. */
.hub-mini {
  --tono: var(--accent);
  --fondo: var(--card);
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 1.25rem;
  background: var(--fondo);
  border: 1px solid color-mix(in srgb, var(--tono) 24%, transparent);
  border-radius: 18px;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.hub-mini--coral   { --tono: var(--hub-tinte-coral);   --fondo: var(--hub-tinte-coral-fondo); }
.hub-mini--navy    { --tono: var(--hub-tinte-navy);    --fondo: var(--hub-tinte-navy-fondo); }
.hub-mini--celeste { --tono: var(--hub-tinte-celeste); --fondo: var(--hub-tinte-celeste-fondo); }
.hub-mini--arena   { --tono: var(--hub-tinte-arena);   --fondo: var(--hub-tinte-arena-fondo); }

.hub-mini .hub-icono {
  background: color-mix(in srgb, var(--tono) 14%, var(--fondo));
  border-color: color-mix(in srgb, var(--tono) 30%, transparent);
  color: var(--tono);
}

.hub-mini:hover {
  border-color: var(--tono);
  transform: translateY(-2px);
  box-shadow: var(--hub-sombra);
}

.hub-mini__titulo {
  margin-top: 0.5rem;
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

.hub-mini__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* En una columna, el ícono va al lado y no encima: ahorra alto */
@media (max-width: 559px) {
  .hub-mini {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
    row-gap: 0.2rem;
    padding: 1.1rem 1.25rem;
  }

  .hub-mini .hub-icono { grid-row: span 2; }
  .hub-mini__titulo { margin-top: 0; }
}

/* ── PRODUCTOS ───────────────────────────────────────────────── */
/* .hub-banda es la misma franja gris para las secciones de las páginas
   de producto (producto.css) */
.hub-productos,
.hub-banda {
  background: var(--muted);
  border-block: 1px solid var(--border);
}

.hub-prods {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 720px) and (max-width: 899px) {
  .hub-prods {
    max-width: 560px;
    margin-inline: auto;
  }
}

/* Escritorio: el pack ocupa la columna izquierda entera y las otras dos
   van apiladas a la derecha. Las filas son auto: la tarjeta del pack
   abarca las dos, así que las de la derecha suman su mismo alto. */
@media (min-width: 900px) {
  .hub-prods { grid-template-columns: repeat(2, 1fr); }
  .hub-prod--destacado { grid-row: span 2; }
}

.hub-prod {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.25rem 1.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--hub-sombra);
}

.hub-prod--destacado {
  border-color: color-mix(in srgb, var(--accent-2) 50%, var(--border));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-2) 10%, transparent), var(--hub-sombra);
}

/* Misma altura de "imagen" en las tres, así los títulos parten parejos.
   La franja es navy con degradado y un resplandor celeste arriba; la del
   pack suma un brillo coral abajo para que se note que es la destacada. */
.hub-prod__media {
  --hub-brillo: radial-gradient(90% 75% at 50% 0%, color-mix(in srgb, var(--hub-celeste) 34%, transparent), transparent 70%);
  --hub-franja: linear-gradient(160deg, var(--hub-franja-a), var(--hub-franja-b));
  position: relative;
  display: grid;
  place-items: center;
  height: 236px;
  margin-bottom: 1.5rem;
  border-radius: 16px;
  overflow: hidden;
  background: var(--hub-brillo), var(--hub-franja);
}

/* El fondo es navy igual que la franja: el halo celeste detrás de la
   imagen es lo que la despega del fondo mientras carga */
.hub-prod__media--coral {
  background: radial-gradient(70% 60% at 88% 100%, color-mix(in srgb, var(--accent-2) 30%, transparent), transparent 70%),
              radial-gradient(38% 62% at 50% 50%, color-mix(in srgb, var(--hub-celeste) 42%, transparent), transparent 75%),
              var(--hub-franja);
}

/* Etiqueta píldora coral: arriba a la izquierda en las franjas, y suelta
   en las páginas de producto */
.hub-etiqueta {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--btn-cta-bg);
  color: var(--btn-cta-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.hub-prod__media .hub-etiqueta {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
}

/* La ilustración llena la franja entera detrás de la píldora, sin
   deformarse: mismo tratamiento en la franja ancha (pack, y en móvil
   las de la derecha) que en la vertical que abre .hub-prod--fila en
   escritorio. El degradado de .hub-prod__media queda detrás como
   respaldo mientras la imagen carga. */
.hub-prod__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 899px) {
  .hub-prod__media { height: 184px; }
}

.hub-prod__titulo {
  font-size: clamp(22px, 0.5vw + 18px, 26px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 0.6rem;
}

.hub-prod__desc {
  font-size: var(--text-sm);
  color: var(--ink-2);
  line-height: 1.65;
  text-wrap: pretty;
}

.hub-prod__lista {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.hub-prod__lista li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
}

.hub-prod__lista svg {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  padding: 6px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent-2) 11%, var(--card));
  color: var(--accent-2);
}

/* Precio y botón siempre al fondo: con la misma altura quedan alineados */
.hub-prod__pie {
  margin-top: auto;
  padding-top: 1.5rem;
}

.hub-prod__precio {
  margin-bottom: 1.1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  color: var(--ink);
  line-height: 1.1;
}

.hub-prod__precio strong {
  font-size: clamp(32px, 1.2vw + 26px, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.hub-prod__precio--texto strong {
  font-size: clamp(22px, 0.5vw + 18px, 26px);
  letter-spacing: -0.02em;
}

.hub-prod__antes {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-2);
}

.hub-prod__nota {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--text-sm);
  color: var(--ink-3);
}

/* Mentoría y Páginas web en escritorio: horizontales, con la ilustración
   en una franja vertical a la izquierda y el texto, precio y botón a la derecha */
@media (min-width: 900px) {
  .hub-prod--fila {
    display: grid;
    /* 124px de mínimo: menos que eso y la etiqueta "Mentoría" no cabe */
    grid-template-columns: clamp(124px, 13vw, 170px) 1fr;
    grid-template-rows: auto auto 1fr;
    column-gap: 1.5rem;
    padding: 1.25rem 1.5rem 1.25rem 1.25rem;
  }

  .hub-prod--fila .hub-prod__media {
    grid-row: 1 / -1;
    height: auto;
    margin-bottom: 0;
  }

  .hub-prod--fila .hub-prod__titulo { margin-top: 0.35rem; }

  .hub-prod--fila .hub-prod__pie {
    align-self: end;
    margin-top: 0;
  }
}

.hub-boton {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  min-height: 50px;
  padding: 0.8rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}

.hub-boton::after {
  content: '';
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s;
}

.hub-boton:hover { transform: translateY(-1px); }
.hub-boton:hover::after { transform: translateX(3px) rotate(45deg); }

.hub-boton--coral {
  background: var(--btn-cta-bg);
  color: var(--btn-cta-ink);
}

.hub-boton--coral:hover { background: var(--btn-cta-bg-hover); }

.hub-boton--navy {
  background: var(--hub-navy);
  color: var(--btn-cta-ink);
}

.hub-boton--navy:hover { background: color-mix(in srgb, var(--hub-navy) 88%, var(--bg-dark)); }

.hub-boton--borde {
  background: var(--card);
  border-color: var(--border);
  color: var(--ink);
}

.hub-boton--borde:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── PREGUNTAS FRECUENTES ────────────────────────────────────── */
/* Mismo acordeón de la portada anterior: el marcado es igual y lo
   maneja main.js. Estas reglas son copia de home.css, que acá no carga. */
.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-item__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  gap: 1rem;
  cursor: pointer;
}

.faq-item__btn::after {
  content: '+';
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.25s, border-color 0.25s;
  color: var(--accent);
}

.faq-item__btn[aria-expanded="true"]::after {
  transform: rotate(45deg);
  border-color: var(--accent);
}

.faq-item__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.faq-item__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-item__body.open {
  max-height: 400px;
}

.faq-item__body p {
  padding-bottom: 1.25rem;
  font-size: var(--text-sm);
  color: var(--ink-2);
  line-height: 1.7;
}

/* ── CIERRE (banda navy) ─────────────────────────────────────── */
.hub-cierre {
  background: var(--bg-dark);
  text-align: center;
  padding-block: clamp(4rem, 9vw, 6.5rem);
}

.hub-cierre h2 {
  font-size: clamp(28px, 4.6vw, 46px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  max-width: 22ch;
  margin: 0 auto 2rem;
  text-wrap: balance;
  background: var(--gradient-on-dark);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hub-cierre .btn {
  padding: 14px 28px;
  font-size: var(--text-md);
}

/* ── SOBRE MÍ (pie de la portada, discreto) ──────────────────── */
.hub-sobre {
  padding-block: clamp(2.5rem, 6vw, 3.5rem);
}

.hub-sobre__caja {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.hub-sobre__foto {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--card);
  box-shadow: 0 0 0 1px var(--border);
}

.hub-sobre p {
  font-size: var(--text-sm);
  color: var(--ink-2);
  line-height: 1.7;
  text-wrap: pretty;
}