/* ============================================================
   BRIKKO · landing (brikkoapp.com)
   Los colores son los tokens de la app (src/theme/tokens.ts).
   Titulares en Unbounded, la letra del logotipo; texto en Inter,
   la de la app. Ambas autoalojadas (OFL), sin peticiones a terceros.
   ============================================================ */

@font-face { font-family: 'Unbounded'; src: url('/landing/fuentes/unbounded-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Unbounded'; src: url('/landing/fuentes/unbounded-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/landing/fuentes/inter-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/landing/fuentes/inter-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/landing/fuentes/inter-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --fondo: #0C1219;
  --elevado: #111822;
  --superficie: #1C232B;
  --superficie-alta: #272B34;
  --lima: #C1FF16;
  --lima-pulsado: #A8E600;
  --sobre-lima: #0D1117;
  --texto: #FCFFFF;
  --texto-2: #9AA1AB;
  --borde: rgba(255, 255, 255, 0.10);
  --borde-suave: rgba(255, 255, 255, 0.06);

  --titular: 'Unbounded', system-ui, sans-serif;
  --cuerpo: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* La junta del ladrillo del logo: 5 unidades sobre 16 de alto. */
  --junta: 12px;
  --ancho: 1180px;
  --lado: 16px;
  --curva: cubic-bezier(0.2, 0, 0, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 400 1rem/1.6 var(--cuerpo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }

:focus-visible { outline: 3px solid var(--lima); outline-offset: 3px; border-radius: 6px; }

.saltar {
  position: absolute; left: var(--lado); top: -60px; z-index: 100;
  background: var(--lima); color: var(--sobre-lima); padding: 10px 16px; border-radius: 999px;
  font-weight: 600; text-decoration: none;
}
.saltar:focus { top: 12px; }

.contenedor { width: min(100% - 2 * var(--lado), var(--ancho)); margin-inline: auto; }
.contenedor--estrecho { width: min(100% - 2 * var(--lado), 780px); }

.icono { width: 20px; height: 20px; flex: none; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  font: 600 1rem/1 var(--cuerpo); text-decoration: none; white-space: nowrap;
  transition: background-color 160ms var(--curva), transform 160ms var(--curva), border-color 160ms var(--curva);
}
.boton:active { transform: scale(0.97); }
.boton--lima { background: var(--lima); color: var(--sobre-lima); }
.boton--lima:hover { background: var(--lima-pulsado); }
.boton--hueco { border: 1px solid var(--borde); color: var(--texto); background: rgba(255, 255, 255, 0.02); }
.boton--hueco:hover { border-color: rgba(255, 255, 255, 0.28); }
.boton--oscuro { background: var(--sobre-lima); color: var(--texto); }
.boton--oscuro:hover { background: #1b222b; }
.boton--desactivado { background: var(--superficie-alta); color: var(--texto-2); cursor: not-allowed; }
.boton--peque { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgba(12, 18, 25, 0.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde-suave);
}
.cabecera__fila {
  width: min(100% - 2 * var(--lado), var(--ancho)); margin-inline: auto;
  height: 68px; display: flex; align-items: center; gap: 24px;
}
.marca { display: inline-flex; flex: none; }
.marca__logo { height: 26px; width: auto; }
.menu { display: flex; gap: 4px; margin-inline: auto; }
.menu a {
  padding: 10px 14px; border-radius: 999px; text-decoration: none;
  color: var(--texto-2); font-weight: 500; font-size: 0.9375rem;
}
.menu a:hover { color: var(--texto); background: rgba(255, 255, 255, 0.04); }
.cabecera__acciones { display: flex; align-items: center; gap: 8px; flex: none; }
.enlace-entrar {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  text-decoration: none; font-weight: 500; font-size: 0.9375rem;
}
.enlace-entrar:hover { color: var(--lima); }

/* ---------- Portada ---------- */
.portada { position: relative; padding-top: clamp(48px, 8vw, 96px); overflow: hidden; }
/* Un único foco de luz lima detrás del producto. */
.portada::before {
  content: ''; position: absolute; z-index: -1;
  left: 50%; top: 52%; width: min(1100px, 140vw); aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(193, 255, 22, 0.16), rgba(193, 255, 22, 0) 70%);
  pointer-events: none;
}
.antetitulo { color: var(--lima); font-weight: 600; font-size: 0.9375rem; margin-bottom: 18px; }
h1 {
  font-family: var(--titular); font-weight: 600;
  font-size: clamp(2.05rem, 5.2vw, 3.6rem); line-height: 1.08; letter-spacing: -0.03em;
  max-width: 21ch;
}
.portada__fila {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px;
  align-items: start; margin-top: 28px;
}
.portada__entradilla { color: var(--texto-2); font-size: 1.1875rem; line-height: 1.6; max-width: 54ch; }
.portada__acciones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.portada__nota { width: 100%; text-align: right; color: var(--texto-2); font-size: 0.9375rem; }

/* El escenario: el PC detrás y el móvil delante, solapados. */
.escenario {
  position: relative;
  width: min(100% - 2 * var(--lado), 1100px); margin: clamp(48px, 7vw, 80px) auto 0;
  padding-bottom: 7%;
}
.escenario__pc { margin: 0 9% 0 0; }
.escenario__movil {
  position: absolute; right: 0; bottom: 0; width: 25%;
}
.escenario__sello { position: absolute; right: 27%; bottom: 3%; }

.navegador {
  margin: 0; border-radius: 16px; overflow: hidden;
  background: var(--elevado);
  border: 1px solid var(--borde);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
}
.navegador__barra {
  display: flex; align-items: center; gap: 16px;
  height: 40px; padding: 0 16px; border-bottom: 1px solid var(--borde-suave);
}
.navegador__puntos { display: flex; gap: 7px; }
.navegador__puntos i { width: 11px; height: 11px; border-radius: 50%; background: var(--superficie-alta); }
.navegador__url {
  margin-inline: auto; padding: 4px 18px; border-radius: 999px;
  background: var(--superficie); color: var(--texto-2); font-size: 0.8125rem;
  transform: translateX(-30px);
}
.navegador img { width: 100%; height: auto; }

/* Móvil: marco, isla y la captura de la app. */
.movil {
  margin: 0; display: flex; flex-direction: column;
  padding: 3.2%; border-radius: 13% / 6%;
  background: #05080b;
  box-shadow: inset 0 0 0 1.5px #2b333d, 0 30px 60px -20px rgba(0, 0, 0, 0.8);
  container-type: inline-size;
}
.movil > img, .movil > video {
  width: 100%; height: auto; border-radius: 0 0 10.5cqi 10.5cqi; background: var(--fondo);
}
.movil__estado {
  position: relative; display: flex; align-items: center;
  height: 12cqi; padding: 0 10cqi; background: var(--fondo);
  border-radius: 10.5cqi 10.5cqi 0 0;
  color: var(--texto); font: 600 4cqi/1 var(--cuerpo);
}
.movil__estado i {
  position: absolute; left: 50%; top: 2.6cqi; transform: translateX(-50%);
  width: 30cqi; height: 8cqi; border-radius: 999px; background: #000;
}
.marco-video {
  margin: 0; width: min(100%, 360px); border-radius: 28px; overflow: hidden;
  background: var(--fondo); border: 1px solid var(--borde);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8);
}
.marco-video video { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; }

.sello {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px 12px 14px; border-radius: 999px;
  background: var(--lima); color: var(--sobre-lima);
  font-weight: 600; font-size: 0.9375rem; white-space: nowrap;
  box-shadow: 0 16px 40px -12px rgba(193, 255, 22, 0.45);
}
.sello svg { width: 20px; height: 20px; }

.plataformas {
  list-style: none; padding: 0; margin-top: 40px; margin-bottom: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px;
  color: var(--texto-2); font-size: 0.9375rem;
}
.plataformas li { display: flex; align-items: center; gap: 10px; }

/* La única coreografía de la página: al cargar, el PC sube, el móvil
   entra por la derecha y el sello se asienta cuando ya están en su sitio. */
@media (prefers-reduced-motion: no-preference) {
  .escenario__pc { animation: sube 900ms var(--curva) both; }
  .escenario__movil { animation: entra 900ms 180ms var(--curva) both; }
  .escenario__sello { animation: asienta 520ms 900ms cubic-bezier(0.34, 1.4, 0.64, 1) both; }
}
@keyframes sube { from { opacity: 0; transform: translateY(40px); } }
@keyframes entra { from { opacity: 0; transform: translate(40px, 24px); } }
@keyframes asienta { from { opacity: 0; transform: scale(0.85); } }

/* ---------- Secciones ---------- */
.seccion { padding-block: clamp(72px, 10vw, 128px); }
.seccion--elevada { background: var(--elevado); border-block: 1px solid var(--borde-suave); }
h2 {
  font-family: var(--titular); font-weight: 600;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.15; letter-spacing: -0.025em;
  max-width: 24ch;
}
h3 { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; }
.seccion__entradilla { color: var(--texto-2); font-size: 1.125rem; margin-top: 16px; max-width: 60ch; }

/* Pasos */
.pasos {
  list-style: none; padding: 0; margin: 56px 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
}
.paso p { color: var(--texto-2); margin-top: 8px; }
.paso h3 { display: flex; align-items: baseline; gap: 12px; margin-top: 24px; }
.paso__num {
  flex: none; display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--lima); color: var(--sobre-lima);
  font: 600 0.875rem/1 var(--titular); transform: translateY(-2px);
}
/* Del móvil solo se ve la parte de arriba: lo que cuenta el paso. */
.paso__imagen {
  height: clamp(300px, 30vw, 380px); overflow: hidden;
  padding: 24px 24px 0; border-radius: 20px;
  background: var(--elevado); border: 1px solid var(--borde-suave);
  -webkit-mask-image: linear-gradient(#000 70%, transparent);
  mask-image: linear-gradient(#000 70%, transparent);
}
.movil--recorte { width: min(100%, 250px); margin-inline: auto; }

/* Vídeo y dos sitios */
.dos-sitios { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 96px); align-items: center; }
.dos-sitios__video { display: flex; justify-content: center; }
.dos-sitios__texto .boton { margin-top: 36px; }
.sitio { margin-top: 32px; padding-left: 20px; border-left: 3px solid var(--lima); }
.sitio p { color: var(--texto-2); margin-top: 6px; max-width: 52ch; }

/* ---------- Aparejo: funciones en hiladas de ladrillo ----------
   12 columnas. Cada hilada tiene las juntas en otro sitio que la de
   arriba (5·4·3 / 3·5·4 / 6·3·3), como en una pared bien trabada. */
.aparejo {
  margin-top: 56px;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--junta);
}
.ladrillo {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding: 28px; border-radius: 18px;
  background: var(--superficie); border: 1px solid var(--borde-suave);
  height: 320px;
}
.ladrillo__icono {
  width: 32px; height: 32px; flex: none;
  fill: none; stroke: var(--lima); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.ladrillo--lima .ladrillo__icono { stroke: var(--sobre-lima); }
.ladrillo p { color: var(--texto-2); margin-top: 10px; }
.ladrillo--3 { grid-column: span 3; }
.ladrillo--4 { grid-column: span 4; }
.ladrillo--5 { grid-column: span 5; }
.ladrillo--6 { grid-column: span 6; }
.ladrillo--lima { background: var(--lima); color: var(--sobre-lima); border-color: transparent; }
.ladrillo--lima p { color: rgba(13, 17, 23, 0.78); }
.ladrillo--imagen { display: grid; grid-template-columns: minmax(0, 1fr) 42%; gap: 24px; padding-bottom: 0; align-items: start; }
.ladrillo--imagen > div { padding-bottom: 28px; }
.movil--asoma { width: 100%; }

/* ---------- Precios ---------- */
.planes { margin-top: 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 880px; }
.plan {
  display: flex; flex-direction: column; gap: 20px;
  padding: 32px; border-radius: 28px;
  background: var(--superficie); border: 1px solid var(--borde-suave);
}
.plan h3 { display: flex; align-items: center; gap: 12px; font-size: 1.375rem; }
.plan__precio { color: var(--texto-2); }
.plan__precio span { font: 600 2.75rem/1 var(--titular); letter-spacing: -0.03em; color: var(--texto); margin-right: 6px; }
.plan__lista { list-style: none; padding: 0; margin: 0 0 auto; display: grid; gap: 10px; }
.plan__lista li { display: flex; gap: 10px; }
.plan__lista li::before {
  content: ''; flex: none; width: 18px; height: 18px; margin-top: 3px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.plan--destacado { background: var(--lima); color: var(--sobre-lima); border-color: transparent; }
.plan--destacado .plan__precio, .plan--destacado .plan__precio span { color: var(--sobre-lima); }
.plan:not(.plan--destacado) .plan__lista { color: var(--texto-2); }
.etiqueta {
  padding: 4px 10px; border-radius: 999px; background: var(--superficie-alta);
  color: var(--texto-2); font: 500 0.8125rem/1.2 var(--cuerpo);
}
.planes__nota { margin-top: 24px; color: var(--texto-2); font-size: 0.9375rem; max-width: 72ch; }

/* ---------- Preguntas ---------- */
.preguntas { margin-top: 40px; border-top: 1px solid var(--borde); }
.preguntas details { border-bottom: 1px solid var(--borde); }
.preguntas summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 1.125rem;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: ''; flex: none; width: 14px; height: 14px;
  border-right: 2px solid var(--lima); border-bottom: 2px solid var(--lima);
  transform: translateY(-4px) rotate(45deg); transition: transform 200ms var(--curva);
}
.preguntas details[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.preguntas details p { color: var(--texto-2); padding-bottom: 24px; max-width: 66ch; }
.preguntas a { color: var(--lima); }

/* ---------- Cierre ---------- */
.cierre { padding-block: clamp(72px, 10vw, 120px); border-top: 1px solid var(--borde-suave); }
.cierre__fila { display: flex; align-items: center; gap: clamp(32px, 6vw, 80px); }
.cierre__simbolo { width: clamp(96px, 14vw, 180px); height: auto; flex: none; }
.cierre p { color: var(--texto-2); font-size: 1.125rem; margin: 16px 0 32px; max-width: 52ch; }

/* ---------- Pie ---------- */
.pie { background: var(--elevado); border-top: 1px solid var(--borde-suave); padding: 56px 0 32px; }
.pie__fila { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; }
.pie__marca p { color: var(--texto-2); margin-top: 16px; max-width: 30ch; }
.pie__enlaces { display: flex; flex-direction: column; gap: 4px; }
.pie__enlaces h2 { font: 600 0.9375rem/1.4 var(--cuerpo); letter-spacing: 0; margin-bottom: 8px; }
.pie__enlaces a {
  color: var(--texto-2); text-decoration: none; font-size: 0.9375rem;
  padding: 6px 0;
}
.pie__enlaces a:hover { color: var(--texto); }
.pie__copy { margin-top: 48px; color: var(--texto-2); font-size: 0.875rem; }

/* Barra fija de alta, solo en móvil. */
.barra-movil { display: none; }

/* ---------- Pantallas medianas ---------- */
@media (max-width: 1023px) {
  .menu { display: none; }
  .cabecera__acciones { margin-left: auto; }
  .portada__fila { grid-template-columns: 1fr; gap: 28px; }
  .portada__acciones { justify-content: flex-start; }
  .portada__nota { text-align: left; }
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .ladrillo--3, .ladrillo--4, .ladrillo--5, .ladrillo--6 { grid-column: span 6; }
  /* En dos por hilada, la trabazón se mantiene alternando qué ladrillo es el largo. */
  .ladrillo--imagen { grid-column: span 12; }
  .pie__fila { grid-template-columns: repeat(3, 1fr); }
  .pie__marca { grid-column: 1 / -1; }
}

/* ---------- Móvil ---------- */
@media (max-width: 680px) {
  .cabecera__fila { height: 60px; gap: 12px; }
  .marca__logo { height: 22px; }
  .enlace-entrar { padding: 0 8px; }
  .portada__entradilla { font-size: 1.0625rem; }
  .portada__acciones .boton { flex: 1 1 100%; }
  .escenario { padding-bottom: 46%; }
  .escenario__pc { margin-right: 0; }
  .escenario__movil { width: 44%; right: 4%; }
  .escenario__sello { right: auto; left: 0; bottom: 8%; font-size: 0.875rem; padding: 10px 16px 10px 12px; }
  .navegador { border-radius: 10px; }
  .navegador__barra { height: 26px; padding: 0 10px; }
  .navegador__puntos i { width: 7px; height: 7px; }
  .navegador__url { display: none; }
  .plataformas { justify-content: flex-start; flex-direction: column; }
  .pasos { grid-template-columns: 1fr; }
  .paso__imagen { height: 320px; }
  .dos-sitios { grid-template-columns: 1fr; }
  .marco-video { width: min(100%, 320px); }
  .ladrillo--3, .ladrillo--4, .ladrillo--5, .ladrillo--6, .ladrillo--imagen { grid-column: span 12; }
  .ladrillo { height: auto; min-height: 0; padding: 24px; }
  /* El móvil debajo del texto, asomando: el ladrillo recorta lo que sobra. */
  .ladrillo--imagen { grid-template-columns: 1fr; }
  .movil--asoma { width: 66%; margin: 0 auto -58%; }
  .planes { grid-template-columns: 1fr; }
  .plan { padding: 28px 24px; }
  .cierre__fila { flex-direction: column; align-items: flex-start; }
  .cierre .boton { width: 100%; }
  .pie__fila { grid-template-columns: 1fr 1fr; }
  .pie { padding-bottom: 104px; }
  .barra-movil:not([hidden]) {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 12px var(--lado) calc(12px + env(safe-area-inset-bottom));
    background: rgba(12, 18, 25, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--borde-suave);
  }
  .barra-movil .boton { width: 100%; }
}

@media (max-width: 400px) {
  .cabecera__acciones .boton--peque { padding: 0 14px; }
}

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