/* Landing pública de Conexión C.O.R.E.
   =====================================================================
   Solo la cara comercial (/). El portal privado tiene los suyos en
   /app/estilos.css. Los colores NO se tocan aquí: están en /tema.css.

   Se respetan las mismas reglas de movimiento del portal: nada se mueve
   solo, nada pasa de 240 ms, solo opacity y transform.
   ===================================================================== */

/* --------------------------------- Barra --------------------------------- */

.barra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--borde);
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 5;
}

.barra .marca { font-size: 1.15rem; text-decoration: none; }

.barra nav { display: flex; align-items: center; gap: 1.25rem; }

.barra nav a {
  color: var(--tenue);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  transition: color var(--rapido) var(--curva);
}
.barra nav a:hover { color: var(--texto); }

.boton-barra {
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--acento);
  color: var(--acento) !important;
}

/* En móvil los enlaces de sección estorban; queda solo el acceso. */
@media (max-width: 560px) {
  .barra nav a:not(.boton-barra) { display: none; }
}

/* -------------------------------- Portada -------------------------------- */

main { max-width: 1000px; margin: 0 auto; padding: 0 1.5rem; }

.portada { padding: 4.5rem 0 3.5rem; text-align: center; }

.antetitulo {
  color: var(--acento);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.portada h1 {
  font-size: clamp(1.9rem, 5.5vw, 3.1rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0 0 1.25rem;
}

/* Ancho de lectura cómodo: pasado de ~70 caracteres cuesta seguir el renglón. */
.entrada {
  max-width: 62ch;
  margin: 0 auto 1.75rem;
  color: var(--tenue);
  font-size: 1.05rem;
}

.acciones {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
}

.nota { margin-top: 1rem; }

/* -------------------------------- Botones -------------------------------- */

.boton {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  border-radius: 10px;
  background: var(--acento);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  transition: transform var(--rapido) var(--curva), opacity var(--rapido) var(--curva);
}
.boton:active { transform: scale(0.97); }

.boton.secundario {
  background: transparent;
  color: var(--texto);
  border: 1px solid var(--borde);
}

/* -------------------------------- Franjas -------------------------------- */

.franja { padding: 3.5rem 0; border-top: 1px solid var(--borde); }

.franja > h2,
.cierre h2 {
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0 0 1rem;
}

.franja > .entrada { text-align: center; }

/* La alterna usa el fondo de tarjeta a todo lo ancho: separa bloques sin
   necesidad de más líneas ni más color. */
.franja.alterna {
  background: var(--fondo-2);
  margin: 0 -1.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* -------------------------------- Rejillas ------------------------------- */

.rejilla {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-top: 2.25rem;
}
.rejilla.dos { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.tarjeta {
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.5rem;
}
.franja.alterna .tarjeta { background: var(--fondo); }

.tarjeta h3 { font-size: 1.02rem; margin: 0 0 0.6rem; letter-spacing: -0.01em; }
.tarjeta p { color: var(--tenue); font-size: 0.94rem; margin: 0; }

.tarjeta ul { margin: 0.9rem 0 0; padding-left: 1.1rem; color: var(--tenue); font-size: 0.9rem; }
.tarjeta li { margin-bottom: 0.3rem; }

.numero {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--acento);
  margin-bottom: 0.75rem;
}

/* --------------------------------- Cierre -------------------------------- */

.cierre { padding: 4.5rem 0; text-align: center; border-top: 1px solid var(--borde); }

footer {
  border-top: 1px solid var(--borde);
  padding: 2.5rem 1.5rem 3.5rem;
  text-align: center;
}
footer .marca { font-size: 1rem; margin-bottom: 0.5rem; }
footer p { margin: 0 0 0.35rem; }
footer a { color: var(--acento); }

/* --------------------------------- Precios -------------------------------- */

.rejilla.tres { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Bloque de fundadores: va ANTES de los planes a propósito. Es la oferta que
   resuelve el arranque en frío, y enterrarla debajo de una tabla de precios
   sería esconder lo único que hoy diferencia. */
.fundadores {
  margin-top: 2rem;
  padding: 1.75rem;
  border: 1px solid var(--acento);
  border-radius: var(--radio);
  background: var(--acento-suave);
  text-align: center;
}
.fundadores h3 { font-size: 1.15rem; margin: 0.75rem 0 0.5rem; letter-spacing: -0.01em; }
.fundadores p { color: var(--tenue); max-width: 52ch; margin: 0 auto 1.25rem; }

/* Se escribe `.fundadores .cupos` y no `.cupos` a secas porque `.fundadores p`
   ya existe arriba y le ganaría por especificidad. */
.fundadores .cupos {
  margin: 0 auto 1.25rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--acento);
}

.etiqueta-destacada {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: var(--acento);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Columna, para que la lista de beneficios quede abajo aunque los títulos
   ocupen distinto número de renglones. */
.plan { display: flex; flex-direction: column; }

/* Mismo motivo que en `.cupos`: `.tarjeta p` tiene más peso que `.precio`. */
.plan .precio {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--texto);
  margin: 0.5rem 0 0;
  letter-spacing: -0.02em;
}
.plan .precio span { font-size: 0.95rem; font-weight: 600; color: var(--tenue); }

.plan .anual { font-size: 0.85rem; color: var(--tenue); margin: 0.25rem 0 0; }

/* `margin-top: auto` empuja las listas al fondo de cada tarjeta: sin esto,
   Aliado (que no tiene línea de precio anual) arranca su lista un renglón más
   arriba que las otras dos y la fila se ve descuadrada. */
.incluye { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.plan .incluye { margin-top: auto; padding-top: 1.25rem; }
.incluye li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.6rem;
  font-size: 0.92rem;
  color: var(--tenue);
}
.incluye li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acento);
}
.incluye strong { color: var(--texto); }

/* Solo el plan intermedio se resalta: destacar dos es no destacar ninguno. */
.plan.destacado { border-color: var(--acento); }

.franja .nota { text-align: center; margin-top: 1.75rem; }

/* ------------------------------- Movimiento ------------------------------ */

/* Revelado al entrar en pantalla.
   El estado oculto SOLO se aplica si `inicio.js` marcó el body: sin JS, todo
   se ve. Una landing que depende del script para mostrar texto es una landing
   en blanco cuando algo falla. */
.con-revelado .revela {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--normal) var(--curva), transform var(--normal) var(--curva);
}

.con-revelado .revela.visible {
  opacity: 1;
  transform: none;
}

/* Escalonado dentro de una misma rejilla: da lectura de izquierda a derecha
   sin que el último tarde tanto que se perciba como lentitud. */
.con-revelado .rejilla > *:nth-child(2) { transition-delay: 60ms; }
.con-revelado .rejilla > *:nth-child(3) { transition-delay: 120ms; }
.con-revelado .rejilla > *:nth-child(n + 4) { transition-delay: 180ms; }

/* Regla 6 del portal, también aquí: si el sistema pide menos movimiento,
   no hay movimiento. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

html { scroll-behavior: smooth; }

/* La barra es sticky, así que un salto de ancla dejaba el título de la sección
   escondido detrás de ella. */
section[id] { scroll-margin-top: 4.5rem; }