/* ============================================================
   landing.css - pagina publica de tuclubonline (dominio raiz).
   NO comparte hoja con el producto: estilos.css es de la app.

   Paleta y tipografias salen del manual de marca
   (marketing/IDENTIDAD-VISUAL.md). Los valores estan fijos ahi,
   no se improvisan.

   La pagina alterna dos superficies:
     .superficie-clara  -> el argumento, se lee como documento
     .superficie-oscura -> el producto, en su propio color
   Cada una redefine los mismos tokens, asi que los componentes
   (botones, titulos, pastillas) funcionan igual en las dos sin
   duplicar reglas.
   ============================================================ */

:root {
  /* Colores de marca. Seccion 6 del manual. */
  --deep-pine:    #2D6A4F;
  --signal-green: #52B788;
  --night-root:   #0A1A10;
  --warm-gold:    #C9A84C;
  --mint-text:    #74C69D;

  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans:  'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Fluido, no un techo fijo. Con 1120px llano, un monitor de 1564px o mas
     ancho dejaba ~450px de aire muerto de cada lado sin ninguna razon
     compositiva: la pagina se veia como una columna angosta flotando en el
     medio de la pantalla en vez de una pagina pensada para pantallas grandes.
     Abajo de ~1435px de viewport se queda clavado en el piso de 1120px
     (el 78vw todavia no lo supera); a partir de ahi crece con la pantalla
     hasta un techo de 1400px, asi no se estira sin limite en un ultrawide. */
  --ancho-max: clamp(1120px, 78vw, 1400px);
  --radio: 12px;
}

/* ---------- Superficie clara ---------- */
.superficie-clara {
  --fondo:        #FAF8F4;
  --fondo-suave:  #F2EFE8;
  --tinta:        #1F2E25;
  --tinta-suave:  #5C6B62;
  --acento:       var(--deep-pine);
  --linea:        rgba(45, 106, 79, .18);
  --btn-fondo:    var(--deep-pine);
  --btn-tinta:    #FFFFFF;
}

/* ---------- Superficie oscura ---------- */
.superficie-oscura {
  --fondo:        var(--night-root);
  --fondo-suave:  #16301F;
  --tinta:        #E8F5E9;
  --tinta-suave:  #8FBC8F;
  --acento:       var(--mint-text);
  --linea:        rgba(64, 145, 108, .28);
  --btn-fondo:    var(--signal-green);
  --btn-tinta:    var(--night-root);
}

.superficie-clara,
.superficie-oscura { background: var(--fondo); color: var(--tinta); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul, ol, li, figure, blockquote { margin: 0; padding: 0; }
ul[role="list"], ol[role="list"] { list-style: none; }

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  background: #FAF8F4;
  color: #1F2E25;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }

a { color: inherit; }

/* Foco visible en todo lo interactivo. Sin esto la pagina es
   inutilizable con teclado, y el manual exige contraste real. */
:focus-visible {
  outline: 2px solid var(--signal-green);
  outline-offset: 3px;
  border-radius: 3px;
}

.saltar {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--deep-pine); color: #fff;
  padding: 10px 16px; border-radius: 0 0 8px 8px;
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: top .15s;
}
.saltar:focus { top: 0; }

.contenedor {
  width: 100%; max-width: var(--ancho-max);
  margin: 0 auto; padding: 0 24px;
}

/* ---------- Lockup (isotipo + wordmark) ----------
   Proporciones de la seccion 3 del manual: wordmark a 2/3 de la
   altura del isotipo, separacion de 1/3. El isotipo nunca se
   espeja: la boca de la C mira al este, hacia el nombre. */
.lockup {
  --x: 34px;                    /* altura del isotipo */
  display: inline-flex; align-items: center;
  gap: calc(var(--x) / 3);
  text-decoration: none;
}
.lockup-isotipo { width: var(--x); height: var(--x); flex-shrink: 0; display: block; }
.lockup-wordmark {
  font-family: var(--sans);
  font-size: calc(var(--x) * 2 / 3);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
  color: var(--tinta);
}

/* ---------- Tipografia editorial ----------
   Lora para titulares (seccion 7: "titulos editoriales, landing"),
   IBM Plex Sans para todo lo demas. */
.antetitulo {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--acento);
  margin-bottom: 20px;
}

.titular-hero {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 6.2vw, 4.4rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--tinta);
  text-wrap: balance;
}

.titular-seccion {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--tinta);
  text-wrap: balance;
}

.bajada, .seccion-bajada {
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  line-height: 1.65;
  color: var(--tinta-suave);
  max-width: 58ch;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 26px;
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  border-radius: 999px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  /* Sin esto, en pantallas de 320 el boton del nav parte "Pedir una demo" en
     tres renglones y la pastilla queda deforme. */
  white-space: nowrap;
  transition: transform .12s ease, filter .15s ease, background-color .15s ease;
}
.btn-primario { background: var(--btn-fondo); color: var(--btn-tinta); }
.btn-primario:hover { filter: brightness(1.08); }
.btn-fantasma {
  background: transparent; color: var(--tinta);
  border-color: var(--linea);
}
.btn-fantasma:hover { background: var(--fondo-suave); }
.btn:active { transform: scale(.98); }
.btn-grande { padding: 15px 32px; font-size: 16px; }
.btn-bloque { width: 100%; }
.btn-nav { padding: 10px 20px; font-size: 14px; }
/* Etiqueta corta del CTA del nav: solo aparece cuando la barra se queda sin
   lugar (ver el bloque de 420px mas abajo). */
.cta-corto { display: none; }

/* ---------- Nav ---------- */
/* Transparente en el tope (se funde con el hero, que es del mismo color) y
   solida apenas se scrollea (landing.js agrega .nav-solida). Sin blur:
   se probo con backdrop-filter y el corte contra una seccion oscura
   (#sistema) se veia como una linea recta filosa - se descarto. La
   traslucidez sale de una opacidad alta (.94), y el borde de abajo es un
   degrade (::after) en vez de un border-bottom de linea recta: se apaga
   de a poco en vez de cortar de un tajo contra lo que sea que haya debajo
   en ese momento (hero claro o seccion oscura). */
.nav-barra {
  position: sticky; top: 0; z-index: 50;
  background: transparent;
  transition: background-color .3s ease;
}
.nav-barra.nav-solida { background: rgba(250, 248, 244, .94); }

/* Empieza justo en el borde de abajo del header, nunca antes: probar que
   arrancara a la mitad del header (para que el degrade se notara mas)
   pintaba el gradiente ENCIMA del logo y los links, porque el ::after es
   contenido generado y pinta por delante del propio contenido de
   .nav-interior. Se descarto: el degrade solo puede vivir por fuera de la
   caja del header. */
.nav-barra::after {
  content: '';
  position: absolute; left: 0; right: 0; top: 100%;
  height: 28px;
  background: linear-gradient(to bottom, rgba(250, 248, 244, .94), transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.nav-barra.nav-solida::after { opacity: 1; }
.nav-interior {
  display: flex; align-items: center; gap: 24px;
  min-height: 76px;
}
.nav-links {
  display: flex; gap: 28px; margin-left: auto;
  font-size: 15px;
}
.nav-links a {
  text-decoration: none; color: var(--tinta-suave);
  transition: color .15s;
}
.nav-links a:hover { color: var(--tinta); }

/* ---------- Hero ---------- */
/* El cierre de abajo es mas corto que la apertura de arriba: lo que
   sigue es otra seccion con su propio respiro, y sumados quedaban
   mas de 200px de nada entre el hero y el primer titulo. */
/* min(vw, vh) en vez de vw solo: antes el padding solo reaccionaba al ANCHO
   de la ventana, asi que en una ventana ancha pero baja (poca altura) se
   quedaba con el maximo de aire arriba y abajo sin importar cuanto lugar
   vertical habia de verdad - quedaba un colchon de espacio vacio en la
   primera pantalla en vez de asomar el principio de la seccion siguiente.
   Con vh en la mezcla, el lado que este mas apretado (ancho o alto) es el
   que manda: en una ventana baja el padding se achica aunque sea ancha. */
.hero { padding: clamp(64px, min(11vw, 14vh), 132px) 0 clamp(40px, min(5vw, 7vh), 64px); }
/* Sin max-width propio: .hero-interior es el mismo elemento que .contenedor
   (misma div, dos clases), asi que usa el --ancho-max fluido de la seccion
   Root sin que un segundo techo mas angosto lo pise. Achicarlo mas alla de
   eso no suma nada: el titulo H1 en display grande no necesita la restriccion
   de medida de lectura que si tiene .bajada (max-width: 58ch, mas abajo) para
   su parrafo. Antes este segundo techo dejaba el hero notoriamente mas
   angosto que el resto de la pagina en monitores grandes. */
.bajada { margin-top: 26px; }
.hero-acciones {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 40px;
}
.hero-nota {
  margin-top: 24px;
  font-size: 14px; color: var(--tinta-suave);
}

/* ---------- Secciones ---------- */
.seccion { padding: clamp(64px, 9vw, 116px) 0; }
.seccion-encabezado { margin-bottom: clamp(40px, 6vw, 68px); }
.seccion-bajada { margin-top: 22px; }

/* ---------- Banda modular ----------
   Recurso modular del manual (seccion 4) usado como banda
   separadora. Es patron, no marca: nunca lleva el isotipo encima
   y por eso queda entre secciones y no dentro de una.

   Va en una sola tinta y no en la version de cuatro colores por dos
   razones. Una, el dorado es "distincion puntual" (seccion 6) y aca
   ya lo usan los pasos como marca de registro: repetirlo decorativo
   a lo ancho de la pagina le saca el sentido. Dos, a la escala de una
   banda fina el patron de cuatro colores se lee como textura picada y
   se pierde justamente lo que tiene para decir.

   La altura muestra solo la fila de arriba de la baldosa, asi que
   queda el ritmo de sus dos piezas: una larga y una corta, separadas
   por la costura. El escalonado de opacidad esta permitido en el
   patron (no en el isotipo), y es lo que distingue una pieza de otra. */
.banda-modular {
  height: 12px;
  background-color: var(--night-root);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='0' y='0' width='37' height='25' fill='%232D6A4F'/%3E%3Crect x='39' y='0' width='25' height='25' fill='%232D6A4F' opacity='.55'/%3E%3Crect x='0' y='27' width='37' height='37' fill='%232D6A4F' opacity='.8'/%3E%3Crect x='39' y='27' width='25' height='37' fill='%232D6A4F'/%3E%3C/svg%3E");
  background-size: 48px 48px;
  background-repeat: repeat-x;
}

/* ---------- Problema ---------- */
.grilla-problema {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.tarjeta-problema {
  padding: 30px 28px;
  background: var(--fondo-suave);
  border-radius: var(--radio);
}
.tarjeta-problema h3 {
  font-family: var(--serif);
  font-size: 1.2rem; font-weight: 600; line-height: 1.3;
  margin-bottom: 12px;
}
.tarjeta-problema p { color: var(--tinta-suave); font-size: 15.5px; }

/* ---------- Muestra de producto ----------
   Reproduce el lenguaje visual de la app (mismo card, mismos
   bordes, mismas pastillas de estado) para que se lea como el
   producto y no como una ilustracion. */
.muestra {
  background: var(--fondo-suave);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  margin-bottom: clamp(40px, 6vw, 64px);
}
.muestra-barra {
  display: flex; align-items: center; gap: 7px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--linea);
}
.muestra-punto {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(143, 188, 143, .3);
}
.muestra-titulo {
  margin-left: 10px;
  font-size: 13px; color: var(--tinta-suave);
}

.muestra-metricas {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  background: var(--linea);
  border-bottom: 1px solid var(--linea);
}
.muestra-metrica { background: var(--fondo-suave); padding: 20px 22px; }
.metrica-etiqueta {
  display: block;
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-suave);
}
.metrica-valor {
  display: block; margin-top: 8px;
  font-size: 1.65rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.metrica-verde { color: var(--signal-green); }
.metrica-oro   { color: var(--warm-gold); }

.muestra-tabla { width: 100%; border-collapse: collapse; }
.muestra-tabla th {
  text-align: left; padding: 12px 22px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-suave);
  border-bottom: 1px solid var(--linea);
}
.muestra-tabla td {
  padding: 13px 22px; font-size: 14.5px;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--linea);
}
.muestra-tabla tr:last-child td { border-bottom: none; }
/* Va calificado con .muestra-tabla a proposito. Suelto (.col-centro) pierde
   por especificidad contra el "text-align: left" de .muestra-tabla th, asi
   que los encabezados quedaban a la izquierda mientras su columna iba
   centrada: la tabla se veia corrida. */
.muestra-tabla .col-centro { text-align: center; }

.pastilla {
  display: inline-block; padding: 3px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
}
.pastilla-ok      { background: rgba(82, 183, 136, .16);  color: var(--mint-text); }
.pastilla-espera  { background: rgba(201, 168, 76, .16);  color: var(--warm-gold); }
.pastilla-vencida { background: rgba(231, 76, 60, .16);   color: #FF9C90; }

.muestra-pie {
  padding: 12px 22px;
  border-top: 1px solid var(--linea);
  font-size: 12px; color: var(--tinta-suave);
}

/* ---------- Modulos ---------- */
/* 4 columnas fijas, no auto-fit: son 8 tarjetas siempre (2 filas parejas de
   4). Con auto-fit y minmax(250px,1fr), un contenedor ancho calzaba 5
   columnas en la primera fila; la segunda fila (3 tarjetas) dejaba 2
   columnas vacías pero visibles, porque auto-fit solo colapsa una columna
   si no tiene contenido en NINGUNA fila - y esas dos tenian contenido en la
   fila 1. Quedaba un rectangulo vacio enorme al lado de "Usuarios y
   permisos". Con un numero fijo de columnas ese escenario no puede pasar. */
.grilla-modulos {
  display: grid; gap: 1px;
  grid-template-columns: repeat(4, 1fr);
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}
@media (max-width: 860px) {
  .grilla-modulos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grilla-modulos { grid-template-columns: 1fr; }
}
.modulo { background: var(--fondo); padding: 28px 26px; }
.modulo h3 {
  font-size: 1.02rem; font-weight: 600;
  margin-bottom: 9px; color: var(--tinta);
}
.modulo p { font-size: 14.5px; color: var(--tinta-suave); line-height: 1.55; }

/* ---------- Pasos ----------
   El punto dorado marca cada paso. En la marca es el elemento que
   senala donde algo queda asentado y consultable (seccion 1), asi
   que aca hace el mismo trabajo.

   La linea que une los puntos se corta despues del ultimo y se
   desvanece: el sistema no se cierra, que es lo que dice la
   apertura de 80 grados del isotipo. */
.pasos {
  display: grid; gap: 0;
  max-width: 720px;
}
.paso {
  position: relative;
  padding: 0 0 42px 46px;
}
.paso::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--warm-gold);
}
.paso::after {
  content: ''; position: absolute;
  left: 5px; top: 24px; bottom: -2px;
  width: 1px;
  background: var(--linea);
}
.paso:last-child { padding-bottom: 0; }
.paso:last-child::after {
  bottom: auto; height: 42px;
  background: linear-gradient(var(--linea), transparent);
}
.paso h3 {
  font-family: var(--serif);
  font-size: 1.28rem; font-weight: 600; line-height: 1.3;
  margin-bottom: 10px;
}
.paso p { color: var(--tinta-suave); }

/* ---------- Caso ----------
   Lleva el mismo punto dorado que los pasos y no una barra lateral.
   En la marca el dorado es "distincion puntual" y ese punto significa
   algo preciso: aca hay un hecho asentado (seccion 1 del manual). Un
   club real usando el sistema es exactamente eso, asi que le toca la
   misma marca y no un segundo lenguaje dorado para decir lo mismo. */
.caso {
  position: relative;
  margin-top: clamp(44px, 6vw, 68px);
  padding: 26px 30px 26px 46px;
  background: var(--fondo-suave);
  border-radius: var(--radio);
  max-width: 720px;
}
.caso::before {
  content: ''; position: absolute; left: 22px; top: 33px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--warm-gold);
}
.caso-texto { font-size: 1.05rem; color: var(--tinta); }
.caso-texto strong { font-weight: 600; }

/* ---------- Contacto ---------- */
.contacto-interior {
  display: grid; gap: clamp(40px, 6vw, 72px);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .contacto-interior { grid-template-columns: 1fr 1fr; }
  .seccion-contacto .seccion-bajada { margin-bottom: 0; }
}

.formulario {
  background: var(--fondo-suave);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: clamp(26px, 4vw, 34px);
}
.campo { margin-bottom: 18px; }
.campo label {
  display: block; margin-bottom: 7px;
  font-size: 14px; font-weight: 500; color: var(--tinta);
}
.opcional { color: var(--tinta-suave); font-weight: 400; }
.campo input, .campo textarea {
  width: 100%; padding: 12px 14px;
  font-family: var(--sans); font-size: 15px;
  color: var(--tinta);
  /* Un punto por encima del Night Root del fondo, igual que el
     --dark2 de la app: con el negro pleno los campos vacios se ven
     como agujeros en la tarjeta. */
  background: #0D1F14;
  border: 1px solid var(--linea);
  border-radius: 9px;
  transition: border-color .15s, box-shadow .15s;
}
.campo input::placeholder, .campo textarea::placeholder {
  color: var(--tinta-suave); opacity: .65;
}
.campo textarea { resize: vertical; min-height: 84px; }
.campo input:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--signal-green);
  box-shadow: 0 0 0 3px rgba(82, 183, 136, .16);
}
.campo input:user-invalid, .campo textarea:user-invalid { border-color: #E74C3C; }

.formulario-aviso {
  margin-top: 16px; padding: 11px 14px;
  border-radius: 9px; font-size: 14px;
}
.formulario-aviso[hidden] { display: none; }
.formulario-aviso-ok {
  background: rgba(82, 183, 136, .14);
  border: 1px solid rgba(82, 183, 136, .34);
  color: var(--mint-text);
}
.formulario-aviso-error {
  background: rgba(231, 76, 60, .14);
  border: 1px solid rgba(231, 76, 60, .34);
  color: #FF9C90;
}

/* ---------- Pie ---------- */
.pie { border-top: 1px solid var(--linea); padding: 44px 0; }
.pie-interior {
  display: flex; flex-wrap: wrap;
  align-items: flex-start; justify-content: space-between;
  gap: 28px 40px;
}
.lockup-pie { --x: 28px; }
.pie-marca { display: grid; gap: 12px; }
.pie-nota { font-size: 14px; color: var(--tinta-suave); }

.pie-empresa {
  display: grid; gap: 6px;
  text-align: right;
}
.pie-empresa-linea { font-size: 14px; color: var(--tinta); }
.pie-empresa-linea strong { font-weight: 600; }
.pie-legal { font-size: 12.5px; color: var(--tinta-suave); }

@media (max-width: 620px) {
  /* Apilado y todo a la izquierda: alineado a la derecha en pantalla
     angosta el bloque de empresa queda colgando sin nada que lo sostenga. */
  .pie-interior { flex-direction: column; gap: 24px; }
  .pie-empresa { text-align: left; }
}

/* ---------- Entrada al hacer scroll ----------
   Solo transform y opacity, que no disparan layout. El estado
   inicial se aplica desde JS (clase en <html>) para que quien
   tenga JS desactivado vea todo el contenido igual. */
.js .revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease-out, transform .55s ease-out;
}
.js .revelar.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .js .revelar { opacity: 1; transform: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  /* Los links intermedios se caen antes que el CTA: en un telefono
     el boton de contacto es lo unico que tiene que sobrevivir. */
  .nav-links { display: none; }
  .nav-interior { min-height: 66px; }
  .nav-interior .btn-nav { margin-left: auto; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .contenedor { padding: 0 20px; }
  .hero-acciones .btn { width: 100%; }
  .lockup { --x: 28px; }
  .btn-nav { padding: 9px 15px; font-size: 13.5px; }
  .muestra-tabla th, .muestra-tabla td { padding: 11px 16px; }
  /* La tabla de muestra no scrollea: se achican las columnas menos
     utiles para que entre entera y no quede media cortada. */
  .muestra-tabla th:nth-child(2), .muestra-tabla td:nth-child(2) { display: none; }
}

/* Abajo de 420px el lockup completo mas "Pedir una demo" no entran juntos en
   la barra y el boton se salia de pantalla. Se cambia por la etiqueta corta. */
@media (max-width: 420px) {
  .cta-largo { display: none; }
  .cta-corto { display: inline; }
}