/* Sitio público de Antifrágil Inversiones.
 *
 * Los colores salen de los tokens REALES de la app
 * (`../antifragil-app/lib/core/theme/antifragil_tokens.dart`), para que la web
 * y la app se vean de la misma familia. Si cambia el manual de marca, se
 * corrige allá primero y acá después.
 *
 * Oscuro a propósito, igual que la app. El tablero administrativo es claro:
 * son herramientas distintas para personas distintas.
 */

:root {
  --fondo: #020015;
  --superficie: #161129;
  --superficie-alt: #070425;
  --primario: #972fea;
  --primario-claro: #b99eff;
  --texto: #ffffff;
  --texto-suave: #cbc9da;
  --borde: rgba(255, 255, 255, 0.12);
  --exito: #51d65f;
  --titulo: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --cuerpo: "Inter", system-ui, -apple-system, sans-serif;
  --ancho: 1080px;
  --radio: 16px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation: none !important;
    transition: none !important;
  }
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--titulo);
  text-wrap: balance;
  margin: 0;
  line-height: 1.15;
}

p {
  margin: 0;
}

a {
  color: var(--primario-claro);
}

img {
  max-width: 100%;
}

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

/* ── Barra superior ─────────────────────────────────────────────────────── */

.barra {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(2, 0, 21, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde);
}

.barra .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 14px;
}

.marca {
  font-family: var(--titulo);
  font-weight: 700;
  font-size: 18px;
  color: var(--texto);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.marca span {
  color: var(--primario-claro);
}

.barra nav {
  display: flex;
  gap: 22px;
  font-size: 15px;
}

.barra nav a {
  color: var(--texto-suave);
  text-decoration: none;
}

.barra nav a:hover,
.barra nav a:focus-visible {
  color: var(--texto);
}

@media (max-width: 760px) {
  .barra nav {
    display: none;
  }
}

/* ── Secciones ──────────────────────────────────────────────────────────── */

section {
  padding-block: 72px;
  border-bottom: 1px solid var(--borde);
}

.encabezado-seccion {
  max-width: 62ch;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 40px;
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primario-claro);
  font-weight: 600;
}

h2 {
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 700;
}

.bajada {
  color: var(--texto-suave);
  font-size: 18px;
}

/* ── Portada ────────────────────────────────────────────────────────────── */

.portada {
  padding-block: clamp(64px, 10vw, 112px);
  background:
    radial-gradient(
      70% 120% at 15% 0%,
      rgba(151, 47, 234, 0.22) 0%,
      transparent 60%
    ),
    var(--fondo);
}

.portada h1 {
  font-size: clamp(36px, 7vw, 60px);
  font-weight: 700;
  letter-spacing: -0.02em;
  max-width: 18ch;
  margin-block: 18px 22px;
}

.portada p {
  color: var(--texto-suave);
  font-size: clamp(18px, 2.4vw, 21px);
  max-width: 58ch;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.boton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  border: 1px solid transparent;
}

.boton-primario {
  background: var(--primario);
  color: #fff;
}

.boton-primario:hover,
.boton-primario:focus-visible {
  background: #a747f0;
}

.boton-secundario {
  border-color: var(--borde);
  color: var(--texto);
}

.boton-secundario:hover,
.boton-secundario:focus-visible {
  border-color: var(--primario-claro);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--primario-claro);
  outline-offset: 3px;
}

/* ── Grillas de tarjetas ────────────────────────────────────────────────── */

.grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tarjeta h3 {
  font-size: 19px;
  font-weight: 700;
}

.tarjeta p {
  color: var(--texto-suave);
  font-size: 16px;
}

.tarjeta .icono {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(151, 47, 234, 0.18);
  color: var(--primario-claro);
  font-size: 20px;
  margin-bottom: 4px;
}

/* ── Franja de contraste (la tesis) ─────────────────────────────────────── */

.franja {
  background: var(--superficie-alt);
}

.comparacion {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.comparacion > div {
  border-radius: var(--radio);
  padding: 26px;
  border: 1px solid var(--borde);
}

.antes {
  background: rgba(255, 255, 255, 0.02);
}

.despues {
  background: rgba(151, 47, 234, 0.1);
  border-color: rgba(185, 158, 255, 0.35);
}

.comparacion h3 {
  font-size: 17px;
  margin-bottom: 12px;
}

.comparacion ul {
  margin: 0;
  padding-left: 20px;
  color: var(--texto-suave);
  font-size: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (max-width: 760px) {
  .comparacion {
    grid-template-columns: 1fr;
  }
}

/* ── Estado de la app ───────────────────────────────────────────────────── */

.estado {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto-suave);
  font-size: 14px;
  font-weight: 500;
}

.punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--exito);
}

/* ── Equipo y contacto ──────────────────────────────────────────────────── */

.dos-columnas {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 32px;
  align-items: start;
}

@media (max-width: 860px) {
  .dos-columnas {
    grid-template-columns: 1fr;
  }
}

.dato-legal {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 15px;
  color: var(--texto-suave);
}

.dato-legal strong {
  color: var(--texto);
  font-weight: 600;
}

/* ── Páginas de texto (legales, soporte) ────────────────────────────────── */

.documento {
  padding-block: 56px 80px;
}

.documento h1 {
  font-size: clamp(30px, 5vw, 40px);
  margin-bottom: 10px;
}

.documento .fecha {
  color: var(--texto-suave);
  font-size: 15px;
  margin-bottom: 36px;
}

.documento article {
  max-width: 72ch;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.documento h2 {
  font-size: 22px;
  margin-bottom: -12px;
}

.documento p,
.documento li {
  color: var(--texto-suave);
  font-size: 17px;
}

.documento ul {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aviso {
  border: 1px solid rgba(185, 158, 255, 0.35);
  background: rgba(151, 47, 234, 0.1);
  border-radius: var(--radio);
  padding: 18px 22px;
  color: var(--texto-suave);
  font-size: 16px;
}

/* ── Pie ────────────────────────────────────────────────────────────────── */

footer {
  padding-block: 44px 64px;
  color: var(--texto-suave);
  font-size: 14.5px;
}

footer .contenedor {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.pie-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.pie-links a {
  color: var(--texto-suave);
  text-decoration: none;
}

.pie-links a:hover {
  color: var(--texto);
}

.descargo {
  max-width: 78ch;
  font-size: 13.5px;
  line-height: 1.6;
  opacity: 0.85;
}

/* ── Agregados del 23-sep-2026 ──────────────────────────────────────────── */
/* Salen de mirar nicolasmessa.com: títulos centrados con rótulo arriba,
 * llamados a la acción con resplandor y tarjetas con borde vivo. El tono de
 * la web de ellos ya está probado con sus clientes; no hay por qué inventar
 * otro. */

.centrado {
  text-align: center;
  margin-inline: auto;
}

.centrado.encabezado-seccion,
.portada .centrado {
  align-items: center;
}

.acciones-centro {
  justify-content: center;
}

.portada h1 {
  margin-inline: auto;
}

.portada p {
  margin-inline: auto;
}

/* Las capturas del prototipo, en marco de teléfono */
.telefonos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
  margin-bottom: 14px;
}

.telefono {
  margin: 0;
  width: 258px;
  max-width: 100%;
  background: linear-gradient(
    160deg,
    rgba(151, 47, 234, 0.35),
    rgba(255, 255, 255, 0.06)
  );
  padding: 9px;
  border-radius: 30px;
  box-shadow: 0 24px 60px rgba(2, 0, 21, 0.75);
}

.telefono img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
  background: var(--fondo);
}

.telefono figcaption {
  text-align: center;
  color: var(--texto-suave);
  font-size: 14.5px;
  padding-top: 12px;
}

.pie-nota {
  text-align: center;
  color: var(--texto-suave);
  font-size: 14px;
  opacity: 0.8;
  margin-bottom: 44px;
}

.grilla-dos {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  max-width: 820px;
  margin-inline: auto;
}

.tarjeta-destacada {
  background: linear-gradient(
    165deg,
    rgba(151, 47, 234, 0.16),
    rgba(22, 17, 41, 0.9)
  );
  border-color: rgba(185, 158, 255, 0.3);
}

.enlace-flecha {
  margin-top: 6px;
  font-weight: 600;
  text-decoration: none;
  font-size: 15.5px;
}

.enlace-flecha:hover {
  text-decoration: underline;
}

/* La banda de cierre, con el resplandor que usan en su web */
.banda {
  border: 1px solid rgba(185, 158, 255, 0.35);
  border-radius: 24px;
  padding: clamp(32px, 6vw, 56px);
  background:
    radial-gradient(
      90% 140% at 50% 0%,
      rgba(151, 47, 234, 0.25) 0%,
      transparent 65%
    ),
    var(--superficie-alt);
  box-shadow: 0 0 60px rgba(151, 47, 234, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.banda h2 {
  max-width: 20ch;
}

.banda .bajada {
  max-width: 52ch;
}

/* ── Luces y movimiento ─────────────────────────────────────────────────── */
/* La web de ellos usa resplandores y degradados; esto los trae sin pegar un
 * hex crudo: todo sale del violeta de marca con transparencia.
 *
 * ⚠️ Todo el movimiento muere bajo `prefers-reduced-motion` gracias a la regla
 * global de arriba. Por eso `.revelar` tiene que quedar VISIBLE en ese caso, y
 * también cuando no hay JS: un texto que sólo aparece con animación es un texto
 * que a veces no aparece.
 */

section {
  position: relative;
  overflow: hidden;
}

.orbe {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  background: radial-gradient(circle, rgba(151, 47, 234, 0.9), transparent 70%);
  animation: flotar 22s ease-in-out infinite alternate;
}

.orbe-1 {
  width: 520px;
  height: 520px;
  top: -180px;
  left: -140px;
}

.orbe-2 {
  width: 420px;
  height: 420px;
  bottom: -200px;
  right: -120px;
  animation-delay: -8s;
  background: radial-gradient(circle, rgba(45, 212, 191, 0.5), transparent 70%);
}

@keyframes flotar {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(40px, 30px, 0) scale(1.12);
  }
}

.contenedor {
  position: relative;
  z-index: 1;
}

/* Aparecer al scrollear */
.revelar {
  opacity: 1;
}

html.js .revelar {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

html.js .revelar.visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.js .revelar {
    opacity: 1;
    transform: none;
  }
}

/* Filas alternadas: texto de un lado, teléfono del otro */
.fila {
  display: grid;
  grid-template-columns: 1fr 296px;
  gap: 48px;
  align-items: center;
  padding-block: 34px;
}

.fila.invertida {
  grid-template-columns: 296px 1fr;
}

.fila .telefono {
  width: 100%;
}

.fila-texto h3 {
  font-family: var(--titulo);
  font-size: clamp(22px, 3vw, 28px);
  margin-bottom: 12px;
}

.fila-texto p {
  color: var(--texto-suave);
  font-size: 17px;
}

.fila-texto .eyebrow {
  margin-bottom: 10px;
}

@media (max-width: 860px) {
  .fila,
  .fila.invertida {
    grid-template-columns: 1fr;
    gap: 26px;
    justify-items: center;
    text-align: center;
  }
  .fila .telefono {
    max-width: 264px;
  }
}

/* El teléfono levanta al pasar el mouse */
.telefono {
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.telefono:hover {
  transform: translateY(-8px);
  box-shadow: 0 34px 70px rgba(151, 47, 234, 0.28);
}

/* Brillo en el borde de las tarjetas destacadas */
.tarjeta-destacada {
  position: relative;
  overflow: hidden;
}

.tarjeta-destacada::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 40%,
    rgba(185, 158, 255, 0.14) 50%,
    transparent 60%
  );
  transform: translateX(-100%);
  transition: transform 0.8s ease;
  pointer-events: none;
}

.tarjeta-destacada:hover::after {
  transform: translateX(100%);
}

/* ── Portada con el trío de teléfonos ───────────────────────────────────── */

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
  text-align: left;
}

.hero-texto .acciones {
  justify-content: flex-start;
}

.portada .hero-texto h1 {
  margin-inline: 0;
  font-size: clamp(34px, 4.3vw, 50px);
  max-width: 14ch;
}

.portada .hero-texto p {
  margin-inline: 0;
  max-width: 46ch;
}

/* Tres teléfonos apilados, el del medio al frente. Las rotaciones son chicas a
 * propósito: la app es la protagonista, no el efecto. */
.trio {
  position: relative;
  height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.trio .telefono {
  position: absolute;
  width: 206px;
  margin: 0;
  animation: respirar 9s ease-in-out infinite alternate;
}

.trio .tel-centro {
  width: 234px;
  z-index: 3;
  transform: translateY(-6px);
  box-shadow: 0 40px 90px rgba(2, 0, 21, 0.85);
}

.trio .tel-izq {
  z-index: 2;
  transform: translateX(-136px) translateY(38px) rotate(-9deg) scale(0.95);
  animation-delay: -3s;
}

.trio .tel-der {
  z-index: 1;
  transform: translateX(136px) translateY(32px) rotate(9deg) scale(0.95);
  animation-delay: -6s;
}

.trio .telefono:hover {
  z-index: 4;
}

@keyframes respirar {
  from {
    margin-top: 0;
  }
  to {
    margin-top: -14px;
  }
}

/* El resplandor que sostiene al trío */
.trio::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(151, 47, 234, 0.45), transparent 68%);
  filter: blur(60px);
  z-index: 0;
}

@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-texto .acciones {
    justify-content: center;
  }
  .portada .hero-texto h1,
  .portada .hero-texto p {
    margin-inline: auto;
  }
  .trio {
    height: 430px;
    transform: scale(0.82);
  }
}

@media (max-width: 560px) {
  .trio {
    height: 380px;
    transform: scale(0.66);
  }
}

/* ── La sección de funciones, con más volumen ───────────────────────────── */

.titulo-grande {
  font-size: clamp(32px, 5.5vw, 52px);
  letter-spacing: -0.02em;
}

.degrade {
  background: linear-gradient(100deg, #ffffff 35%, var(--primario-claro) 75%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.bento .tarjeta {
  position: relative;
  padding: 30px;
  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease;
}

.bento .tarjeta::before {
  content: "";
  position: absolute;
  inset-inline: 22px;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(185, 158, 255, 0.75),
    transparent
  );
  opacity: 0;
  transition: opacity 0.35s ease;
}

.bento .tarjeta:hover {
  transform: translateY(-5px);
  border-color: rgba(185, 158, 255, 0.4);
  background: linear-gradient(
    165deg,
    rgba(151, 47, 234, 0.14),
    rgba(22, 17, 41, 0.95)
  );
}

.bento .tarjeta:hover::before {
  opacity: 1;
}

.bento .tarjeta h3 {
  font-size: 21px;
}

.bento .icono {
  width: 46px;
  height: 46px;
  font-size: 22px;
  background: linear-gradient(
    150deg,
    rgba(151, 47, 234, 0.5),
    rgba(151, 47, 234, 0.12)
  );
  color: #fff;
}

/* Las dos piezas grandes del bento llevan pantalla adentro */
.tarjeta-ancha {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1fr 190px;
  gap: 20px;
  align-items: center;
  padding-right: 0;
  overflow: hidden;
}

.tarjeta-ancha .recorte {
  align-self: end;
  height: 236px;
  border-radius: 18px 0 0 0;
  border: 1px solid var(--borde);
  border-right: 0;
  border-bottom: 0;
  overflow: hidden;
  box-shadow: -18px 24px 50px rgba(2, 0, 21, 0.7);
}

.tarjeta-ancha .recorte img {
  display: block;
  width: 100%;
  height: auto;
}

/* La pieza que ocupa el ancho completo del bento */
.tarjeta-full {
  grid-column: span 3;
  grid-template-columns: 1fr 220px;
}

@media (max-width: 900px) {
  .tarjeta-full {
    grid-column: span 1;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .bento {
    grid-template-columns: 1fr;
  }
  .tarjeta-ancha {
    grid-column: span 1;
    grid-template-columns: 1fr;
    padding-right: 30px;
  }
  .tarjeta-ancha .recorte {
    display: none;
  }
}

/* Etiquetas de contenido, para que una tarjeta ancha no quede vacía */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.chip {
  font-size: 13.5px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: rgba(255, 255, 255, 0.03);
  color: var(--texto-suave);
}