/* ============================================================================
   LA PORTADA COMO HUB

   La página abre con una pregunta, no con un discurso: quién eres. Todo el peso
   visual está en esas dos puertas, y recién debajo viene el resto. Por eso el
   hero no lleva imagen de fondo compitiendo — las dos tarjetas SON el hero.

   Se apoya en los tokens de styles.css (--primary, --line, --text-dim…) para
   que la portada no invente su propia paleta.
   ========================================================================== */

/* ---- hero con las dos puertas --------------------------------------------- */
.hub-hero {
  padding: clamp(96px, 13vw, 150px) 0 clamp(40px, 6vw, 68px);
  position: relative;
}
.hub-intro { max-width: 720px; margin-bottom: clamp(30px, 5vw, 46px); }
.hub-intro h1 {
  font-size: clamp(2.1rem, 5.6vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 12px 0 16px;
  text-wrap: balance;
}
.hub-intro .lead { max-width: 58ch; }

.puertas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 20px;
}

.puerta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(24px, 3.2vw, 34px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* La franja superior es lo único que distingue una puerta de la otra en color:
   el resto es idéntico, para que ninguna parezca la opción "correcta". */
.puerta::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 4px;
}
.puerta-miembro::before { background: var(--primary, #1D4ED8); }
.puerta-cliente::before { background: #0F766E; }

.puerta:hover, .puerta:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, .10);
  border-color: rgba(29, 78, 216, .35);
}
.puerta:focus-visible { outline: 2px solid var(--primary, #1D4ED8); outline-offset: 3px; }

.puerta-icono {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(29, 78, 216, .08);
  color: var(--primary, #1D4ED8);
}
.puerta-cliente .puerta-icono { background: rgba(15, 118, 110, .09); color: #0F766E; }
.puerta-icono svg { width: 24px; height: 24px; }

.puerta h2 { font-size: 1.42rem; margin: 0; letter-spacing: -.01em; }
.puerta p { color: var(--text-dim, #51607A); font-size: .96rem; line-height: 1.6; margin: 0; }
.puerta-cta {
  margin-top: auto;
  padding-top: 8px;
  font-family: 'Chivo Mono', ui-monospace, monospace;
  font-size: .86rem;
  font-weight: 500;
  color: var(--primary, #1D4ED8);
}
.puerta-cliente .puerta-cta { color: #0F766E; }
.puerta-cta::after { content: " →"; }

.hub-nota {
  margin-top: 18px;
  font-size: .9rem;
  color: var(--text-dim, #51607A);
  max-width: 62ch;
}

/* ---- beneficios de la membresía ------------------------------------------- */
.beneficios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.beneficio {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.beneficio h3 { font-size: 1.06rem; margin: 14px 0 8px; }
.beneficio p { color: var(--text-dim, #51607A); font-size: .93rem; line-height: 1.62; margin: 0; }

/* La tarjeta de las dos descargas incluidas es la que más rinde: se destaca y
   ocupa el ancho completo arriba, para que sea lo primero que se lee. */
.beneficio--destacado {
  grid-column: 1 / -1;
  border-color: rgba(29, 78, 216, .38);
  background: linear-gradient(100deg, rgba(29, 78, 216, .07), rgba(29, 78, 216, .02));
  box-shadow: 0 10px 30px -18px rgba(29, 78, 216, .5);
}
.beneficio--destacado h3 { font-size: 1.18rem; }
.beneficio--destacado p { color: #3B4762; font-size: .97rem; max-width: 62ch; }
.beneficio-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.beneficio-sello {
  font-family: 'Chivo Mono', ui-monospace, monospace;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--primary, #1D4ED8);
  background: rgba(29, 78, 216, .1); border: 1px solid rgba(29, 78, 216, .28);
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}

/* ---- tarifas --------------------------------------------------------------- */
.tarifas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  align-items: stretch;
}
.tarifa {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  position: relative;
}
.tarifa-destacada {
  border-color: rgba(29, 78, 216, .42);
  box-shadow: 0 10px 30px rgba(29, 78, 216, .10);
}
.tarifa-sello {
  position: absolute; top: -11px; left: 22px;
  background: var(--primary, #1D4ED8); color: #fff;
  font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.tarifa h3 { font-size: 1rem; margin: 0; color: var(--text-dim, #51607A); font-weight: 600; }
.tarifa-precio {
  display: flex; align-items: baseline; gap: 3px;
  font-family: 'Chivo Mono', ui-monospace, monospace;
  color: var(--primary, #1D4ED8);
}
.tarifa-precio .moneda { font-size: 1rem; font-weight: 500; }
.tarifa-precio .valor { font-size: 2.4rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.tarifa-precio .periodo {
  margin-left: 6px; font-family: inherit;
  font-size: .82rem; color: var(--text-dim, #51607A); font-weight: 400;
}
.tarifa p { font-size: .9rem; line-height: 1.58; color: var(--text-dim, #51607A); margin: 0; }

.tarifa-notas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.nota-col h4 { font-size: .95rem; margin: 0 0 12px; }
.nota-col ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
.nota-col li { font-size: .9rem; line-height: 1.55; color: var(--text-dim, #51607A); }
.nota-col p { font-size: .85rem; margin: 12px 0 0; line-height: 1.55; }
.lista-pct { list-style: none; padding-left: 0; }
.lista-pct b {
  font-family: 'Chivo Mono', ui-monospace, monospace;
  color: var(--primary, #1D4ED8);
  margin-right: 6px;
}

/* ---- temas de las sesiones ------------------------------------------------- */
.temas { display: flex; flex-wrap: wrap; gap: 10px; }
.tema {
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: .9rem;
  color: var(--text-dim, #51607A);
}

@media (max-width: 640px) {
  .puerta { padding: 22px; }
  .tarifa-precio .valor { font-size: 2rem; }
}

/* ---- el otro lado del trato -----------------------------------------------
   Va pegado a los beneficios a propósito: quien lee lo que recibe tiene que
   leer, en el mismo bloque, lo que se espera de él. */
.compromiso {
  margin-top: 22px;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary, #1D4ED8);
  border-radius: 14px;
  background: rgba(29, 78, 216, .035);
}
.compromiso h3 { font-size: 1.06rem; margin: 0 0 8px; }
.compromiso > p { font-size: .93rem; color: var(--text-dim, #51607A); margin: 0 0 14px; }
.compromiso ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 9px; }
.compromiso li { font-size: .93rem; line-height: 1.6; color: var(--text-dim, #51607A); }
.compromiso li b { color: var(--text, #101828); }
.compromiso .text-dim { font-size: .86rem; margin: 14px 0 0; }

/* ---- lo que viene ----------------------------------------------------------
   Se distingue a propósito de las tarjetas de beneficios: lo que todavía no
   existe no puede parecer parte de lo que se está pagando hoy. */
.proximamente {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px;
  margin-top: 22px;
  padding: 22px 26px;
  border: 1px dashed rgba(29, 78, 216, .42);
  border-radius: 14px;
  background: rgba(29, 78, 216, .03);
}
.prox-sello {
  flex: 0 0 auto;
  font-family: 'Chivo Mono', ui-monospace, monospace;
  font-size: .72rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--primary, #1D4ED8);
  border: 1px solid rgba(29, 78, 216, .35);
  border-radius: 999px;
  padding: 5px 12px;
}
.proximamente h3 { font-size: 1.04rem; margin: 0 0 6px; }
.proximamente p {
  font-size: .93rem; line-height: 1.62; margin: 0;
  color: var(--text-dim, #51607A); max-width: 68ch;
}

/* Lo que NO hacemos va junto al precio, no escondido abajo: es la diferencia
   entre lo que la gente cree que compra y lo que recibe. */
.aclaracion {
  margin-top: 14px;
  padding: 14px 18px;
  border-left: 3px solid #B45309;
  background: rgba(180, 83, 9, .05);
  border-radius: 0 10px 10px 0;
  font-size: .93rem;
  line-height: 1.62;
  color: var(--text, #101828);
  max-width: 74ch;
}

/* ---- las tarifas, ahora plegables ------------------------------------------
   La tarjeta pasó de <article> a <button>: hay que devolverle la apariencia
   que el navegador le quita a los botones (alineación, tipografía, cursor) sin
   perder lo que le da (foco visible, teclado, semántica). */
.tarifa {
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
}
.tarifa:hover { border-color: rgba(29, 78, 216, .40); }
.tarifa:focus-visible { outline: 2px solid var(--primary, #1D4ED8); outline-offset: 3px; }
.tarifa.abierta {
  border-color: var(--primary, #1D4ED8);
  box-shadow: 0 8px 26px rgba(29, 78, 216, .14);
}
.tarifa-ver {
  margin-top: auto;
  padding-top: 10px;
  font-family: 'Chivo Mono', ui-monospace, monospace;
  font-size: .8rem;
  color: var(--primary, #1D4ED8);
}
.tarifa-ver::after { content: " ↓"; }
.tarifa.abierta .tarifa-ver::after { content: " ↑"; }

.tarifa-detalle {
  margin-top: 18px;
  padding: 24px 26px;
  border: 1px solid var(--primary, #1D4ED8);
  border-radius: 14px;
  background: #fff;
}
.det-cab {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.det-cab h3 { font-size: 1.1rem; margin: 0; flex: 1 1 auto; }
.det-precio {
  font-family: 'Chivo Mono', ui-monospace, monospace;
  font-size: .9rem; color: var(--primary, #1D4ED8);
}
.det-cerrar {
  border: 1px solid var(--line); background: #fff; border-radius: 8px;
  width: 30px; height: 30px; cursor: pointer; color: var(--text-dim, #51607A);
  font-size: .9rem; line-height: 1;
}
.det-cerrar:hover { background: #F3F6FB; }
.det-cerrar:focus-visible { outline: 2px solid var(--primary, #1D4ED8); outline-offset: 2px; }

.det-lista {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px 26px;
}
.det-lista li { display: flex; flex-direction: column; gap: 3px; }
.det-lista b { font-size: .95rem; }
.det-lista b::before { content: "· "; color: var(--primary, #1D4ED8); }
.det-lista span { font-size: .89rem; line-height: 1.55; color: var(--text-dim, #51607A); }
.det-nota {
  margin: 18px 0 0; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: .89rem; line-height: 1.6; color: var(--text-dim, #51607A);
}

/* ============================================================================
   EL BANNER DE BIENVENIDA

   Fondo oscuro a sangre con el campo solar dibujado, y el texto encima. El
   contraste con el resto de la página —que sigue clara— es a propósito: marca
   dónde empieza el sitio y da el golpe de vista que una portada necesita.
   ========================================================================== */
.hub-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(120px, 16vw, 190px) 0 clamp(52px, 7vw, 88px);
  background: #080C15;
  overflow: hidden;
}
.banner-fondo { position: absolute; inset: 0; z-index: -1; }
.banner-fondo canvas,
.banner-fondo video {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}
/* Cuando haya video real, se pone encima del canvas y este queda de respaldo
   mientras carga: nunca se ve un rectángulo negro esperando. */
.banner-fondo video { position: absolute; inset: 0; }

/* El texto va sobre una imagen en movimiento: sin una sombra propia, una fila
   clara pasa por debajo de una palabra y la borra por dos segundos. */
.hub-hero .hub-intro h1,
.hub-hero .hub-intro .lead,
.hub-hero .hub-intro .eyebrow { text-shadow: 0 2px 24px rgba(8, 12, 21, .55); }

.hub-hero .hub-intro h1 { color: #F8FAFC; }
.hub-hero .hub-intro h1 .accent { color: #60A5FA; }
.hub-hero .hub-intro .lead { color: #C7D2E1; }
.hub-hero .hub-intro .eyebrow { color: #60A5FA; }
.hub-hero .hub-intro .eyebrow::before,
.hub-hero .eyebrow::before { background: #60A5FA; }
.hub-nota { color: #94A3B8; }

/* ---- las cifras, bajo el titular ------------------------------------------
   No son un adorno: son 199 folios que existen y se pueden verificar. Por eso
   van arriba, junto al titular, y no perdidas en una franja al medio. */
.banner-firma {
  margin-top: 22px; max-width: 56ch;
  font-size: .95rem; line-height: 1.6; color: #C7D2E1;
}
.banner-firma b { color: #F8FAFC; font-weight: 700; }

/* ---- las puertas, ahora sobre el fondo oscuro ----------------------------- */
.hub-hero .puerta {
  background: rgba(15, 23, 42, .58);
  border-color: rgba(148, 163, 184, .22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.hub-hero .puerta h2 { color: #F8FAFC; }
.hub-hero .puerta p { color: #B6C2D4; }
.hub-hero .puerta:hover, .hub-hero .puerta:focus-visible {
  background: rgba(15, 23, 42, .74);
  border-color: rgba(96, 165, 250, .55);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .40);
}
.hub-hero .puerta-miembro .puerta-icono {
  background: rgba(59, 130, 246, .16); color: #60A5FA;
}
.hub-hero .puerta-cliente .puerta-icono {
  background: rgba(34, 197, 94, .14); color: #4ADE80;
}
.hub-hero .puerta-miembro::before { background: #3B82F6; }
.hub-hero .puerta-cliente::before { background: #22C55E; }
.hub-hero .puerta-miembro .puerta-cta { color: #60A5FA; }
.hub-hero .puerta-cliente .puerta-cta { color: #4ADE80; }

@media (max-width: 640px) {
  .banner-firma { font-size: .9rem; }
}

/* ---- el fondo del banner ---------------------------------------------------
   El póster va siempre; el video entra encima sólo donde corresponde. Se
   arranca desde el CSS + una línea de JS, no con `autoplay`, porque autoplay
   descarga el archivo aunque el usuario esté en el teléfono con datos. */
.banner-foto,
.banner-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.banner-video { opacity: 0; transition: opacity .9s ease; }
.banner-video.lista { opacity: 1; }

.banner-fondo::after {
  /* El clip es claro —atardecer— y el titular es blanco. Sin este degradado,
     «La comunidad de» cae sobre el cielo dorado y desaparece. */
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(8,12,21,.92) 0%, rgba(8,12,21,.74) 40%,
                    rgba(8,12,21,.30) 72%, rgba(8,12,21,.50) 100%),
    linear-gradient(0deg, rgba(8,12,21,.82) 0%, rgba(8,12,21,0) 46%);
}

/* En pantalla angosta el texto ya no ocupa el tercio izquierdo: ocupa todo el
   ancho. El degradado horizontal, pensado para escritorio, tapaba la imagen
   entera y el banner quedaba en un rectángulo oscuro. Acá el velo se vuelve
   vertical: oscuro arriba, donde está el titular, y abierto abajo, donde se
   ven el lago y el volcán. */
@media (max-width: 899px) {
  .banner-fondo::after {
    background:
      linear-gradient(180deg, rgba(8,12,21,.90) 0%, rgba(8,12,21,.72) 34%,
                      rgba(8,12,21,.34) 62%, rgba(8,12,21,.66) 100%);
  }
  .banner-foto { object-position: center 32%; }
}

/* ---- las franjas de imagen -------------------------------------------------
   Van entre secciones, a sangre, para cortar el ritmo de texto y dar aire. No
   son una galería: cada una dice algo de la sección que viene, y por eso lleva
   pie. Una imagen sin pie es decoración; con pie, es un argumento. */
.franja {
  margin: clamp(20px, 4vw, 44px) 0 0;
  position: relative;
}
.franja img {
  display: block;
  width: 100%;
  height: clamp(200px, 30vw, 380px);
  object-fit: cover;
}
.franja figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 42px clamp(18px, 6vw, 64px) 18px;
  background: linear-gradient(0deg, rgba(8,12,21,.88), rgba(8,12,21,0));
  color: #E2E8F0;
  font-size: .95rem;
  line-height: 1.55;
}
.franja figcaption b { color: #fff; display: block; font-size: 1.05rem; margin-bottom: 3px; }
@media (max-width: 640px) {
  .franja figcaption { font-size: .88rem; padding-top: 34px; }
}

/* Aviso que saca al cliente de la guía del instalador hacia la licitación.
   Es una franja, no una tarjeta más: se distingue de los requisitos técnicos
   que la rodean. */
.aviso-cliente {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px;
  padding: 22px 26px;
  border: 1px solid rgba(15, 118, 110, .30);
  border-left: 3px solid #0F766E;
  border-radius: 14px;
  background: rgba(15, 118, 110, .05);
}
.aviso-cliente b { font-size: 1.02rem; }
.aviso-cliente p { margin: 6px 0 0; font-size: .92rem; color: var(--text-dim, #51607A); max-width: 62ch; line-height: 1.55; }
.aviso-cliente .btn { flex: 0 0 auto; }