/* La landing de Mesea — tokens y piezas comunes: letra, cabecera, botones, encabezados y pie.
   Los colores son los del brandbook y SOLO viven aquí, en :root; el resto de hojas usan var().
   Donde el valor coincide con uno de web/src/estilos/tokens.css, lleva su mismo nombre. */

@font-face {
  font-family: "Figtree";
  src: url("../fuentes/Figtree-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --brand: #4b1d5c;
  --brand-hover: #3a1548;
  --brand-2: #6a3a7c;
  --brand-3: #5e2d70;
  --acento: #a0f1d0;
  --acento-hover: #c4f7e2;
  --ink: #141020;
  --texto: #2a2433;
  --ink-3: #6e6878;
  --bg: #f2f2f2;
  --surface: #ffffff;
  --line-soft: #eceaee;
  --line-2: #e2e0e5;
  /* El plano de la Sala, con los colores del de la app (web/, DESIGN.md §15): suelo, pared, mesa
     libre y sus sillas; la ocupada en pruna clara y la que llega en menta, con sus sillas. */
  --suelo: #f8f8f9;
  --pared: #d5d2da;
  --silla: #e4e1e8;
  --ocupada: #dfd3e5;
  --ocupada-silla: #cdbfd4;
  --llega-silla: #8ae0be;
  --ink-2: #3a3445;
  --sobre-brand: #e3d7ea;
  --sobre-ink: #c9c2d2;
  --warn-soft: #fdebdd;
  --warn-ink: #a64b12;
  --warn-texto: #6e4a33;
  --canal-whatsapp: #1f7a52;
  --canal-whatsapp-soft: #e3f8ee;
  --on-color: #ffffff;
  --on-color-line: rgba(255, 255, 255, 0.2);
  --on-color-line-2: rgba(255, 255, 255, 0.18);
  --on-color-soft: rgba(255, 255, 255, 0.1);
  --on-color-borde: rgba(255, 255, 255, 0.4);
  --cabecera-fondo: rgba(255, 255, 255, 0.88);
  --cabecera-tinta: rgba(20, 16, 32, 0.82);
  --cabecera-gris: rgba(242, 242, 242, 0.88);

  --font: "Figtree", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ancho: 1320px;
  --margen: clamp(16px, 3vw, 40px);
  --hueco-seccion: clamp(80px, 12vh, 140px);
}

/* ── Los temas de la página (propuesta) ─────────────────────────────────────────────────────────
   Al bajar, la página entera cambia de color según la sección que ocupa el centro de la pantalla
   (js/escena.js pone `data-tema` en el body): blanco, tinta o el gris del final. Lo que va directamente sobre
   el fondo toma sus colores de aquí; las tarjetas llevan los suyos. Registradas con @property, se
   funden de un color a otro en vez de saltar. */
@property --tema-fondo { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --tema-titulo { syntax: '<color>'; inherits: true; initial-value: #4b1d5c; }
@property --tema-enfasis { syntax: '<color>'; inherits: true; initial-value: #141020; }
@property --tema-texto { syntax: '<color>'; inherits: true; initial-value: #2a2433; }
@property --tema-suave { syntax: '<color>'; inherits: true; initial-value: #6e6878; }
@property --tema-linea { syntax: '<color>'; inherits: true; initial-value: #eceaee; }
@property --tema-cabecera { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, 0.88); }
@property --tema-boton { syntax: '<color>'; inherits: true; initial-value: #4b1d5c; }
@property --tema-boton-texto { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --tema-punto { syntax: '<color>'; inherits: true; initial-value: #a0f1d0; }

body {
  --tema-fondo: var(--surface); --tema-titulo: var(--brand); --tema-enfasis: var(--ink);
  --tema-texto: var(--texto); --tema-suave: var(--ink-3); --tema-linea: var(--line-soft);
  --tema-cabecera: var(--cabecera-fondo); --tema-boton: var(--brand); --tema-boton-texto: var(--on-color);
  --tema-punto: var(--acento);
  transition: --tema-fondo 0.7s var(--ease-out), --tema-titulo 0.7s var(--ease-out), --tema-enfasis 0.7s var(--ease-out),
    --tema-texto 0.7s var(--ease-out), --tema-suave 0.7s var(--ease-out), --tema-linea 0.7s var(--ease-out),
    --tema-cabecera 0.7s var(--ease-out), --tema-boton 0.7s var(--ease-out), --tema-boton-texto 0.7s var(--ease-out),
    --tema-punto 0.7s var(--ease-out);
}
body[data-tema="oscuro"] {
  --tema-fondo: var(--ink); --tema-titulo: var(--on-color); --tema-enfasis: var(--sobre-ink);
  --tema-texto: var(--sobre-ink); --tema-suave: var(--sobre-ink); --tema-linea: var(--on-color-line-2);
  --tema-cabecera: var(--cabecera-tinta); --tema-boton: var(--acento); --tema-boton-texto: var(--brand);
  --tema-punto: var(--brand);
}
/* El gris de fondo de la app (el mismo que se ve en la demo de «Pruébala aquí»), para toda la página
   desde la Store hasta el final; el cierre sigue siendo su franja pruna. */
body[data-tema="gris"] {
  --tema-fondo: var(--bg); --tema-linea: var(--line-2); --tema-cabecera: var(--cabecera-gris);
}

/* ── Base ───────────────────────────────────────────────────────────────────────────────────── */

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--tema-fondo);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
*, *::before, *::after { box-sizing: border-box; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--ink); }
::selection { background: var(--acento); color: var(--brand); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
button, input { font-family: inherit; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
main { position: relative; overflow-x: clip; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 999px; background: var(--brand); color: var(--on-color);
  font-weight: 700;
}
.saltar:focus { top: 12px; color: var(--on-color); }

/* Las secciones dejan 1320 px de contenido; la cabecera y la raya entre la base y la Store, 1320
   con el margen dentro (como el original: no van alineadas al píxel). */
.contenedor { max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; padding: 0 var(--margen); }
.contenedor--estrecho { max-width: var(--ancho); }
.fino { font-weight: 400; color: var(--tema-enfasis); }
.menta { color: var(--acento); }

/* ── Logotipo: el símbolo y «mesea» en Figtree 600, medidos en altos del símbolo (--h) como en
      web/ (Logotipo.module.css). 118 px de ancho en la cabecera, como el original. ─────────── */

.logo {
  --h: 22.8px;
  display: inline-flex;
  align-items: center;
  height: var(--h);
  gap: calc(var(--h) * 0.089);
  color: var(--brand);
  font-size: calc(var(--h) * 1.469);
  font-weight: 600;
  letter-spacing: -0.034em;
  line-height: 1;
}
.cabecera .logo, .cabecera .logo:hover { color: var(--tema-titulo); }
.logo:hover { color: var(--brand); }
.logo svg { width: var(--h); height: var(--h); flex: none; }
.logo span { padding-bottom: 0.2em; }
.logo--pie { --h: 23.2px; color: var(--on-color); }

/* ── Cabecera ───────────────────────────────────────────────────────────────────────────────── */

.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: var(--tema-cabecera);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--tema-linea);
}
.cabecera__dentro {
  max-width: var(--ancho); height: 72px; margin: 0 auto; padding: 0 var(--margen);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.cabecera__nav { display: flex; gap: 4px; flex-wrap: wrap; }
.cabecera__nav a {
  padding: 8px 14px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--tema-enfasis);
}
.cabecera__nav a:hover { background: var(--tema-linea); color: var(--tema-titulo); }
.cabecera__acciones { display: flex; gap: 8px; align-items: center; }
.cabecera__entrar {
  height: 44px; padding: 0 18px; border-radius: 999px;
  font-size: 15px; font-weight: 700; display: flex; align-items: center; color: var(--tema-titulo);
}
/* Los botones de la cabecera y de la portada cambian con el tema: en oscuro y en pruna, menta. */
.cabecera .boton, .hero .boton:not(.boton--borde) { background: var(--tema-boton); color: var(--tema-boton-texto); }
.cabecera .boton:hover, .hero .boton:not(.boton--borde):hover { background: var(--tema-boton); color: var(--tema-boton-texto); filter: brightness(1.08); }
.hero .boton--borde, .hero .boton--borde:hover { color: var(--tema-titulo); border-color: var(--tema-titulo); }
.hero .boton--borde:hover { background: var(--tema-linea); }

/* Para que la cabecera quepa en un móvil: por debajo de 900 px se esconden los tres enlaces —las
   secciones se alcanzan bajando— y por debajo de 440, «Entrar». */
@media (max-width: 899px) { .cabecera__nav { display: none; } }
@media (max-width: 439px) { .cabecera__entrar { display: none; } }

/* ── Botones ────────────────────────────────────────────────────────────────────────────────── */

.botones { display: flex; gap: 10px; flex-wrap: wrap; }
.boton {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--brand); color: var(--on-color); font-weight: 800;
}
.boton:hover { background: var(--brand-hover); color: var(--on-color); }
.boton--cabecera { height: 44px; padding: 0 20px; font-size: 15px; }
.boton--grande { height: 56px; padding: 0 28px; font-size: 17px; }
.boton--borde {
  background: transparent; color: var(--brand); border: 1.5px solid var(--brand); font-weight: 700;
}
.boton--borde:hover { background: var(--bg); color: var(--brand); }
.boton--menta { height: 52px; font-size: 16px; background: var(--acento); color: var(--brand); }
.boton--menta:hover { background: var(--acento-hover); color: var(--brand); }
.punto { width: 8px; height: 8px; border-radius: 2px; background: var(--tema-punto); }

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

.seccion { padding: var(--hueco-seccion) 0; }
/* En la propuesta, el gris de los precios lo pone la página entera (su tema, «gris»). */
.seccion--gris { background: transparent; }
.seccion__dentro { display: flex; flex-direction: column; gap: 48px; }
.seccion__cabeza {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 32px;
  align-items: end;
}
.seccion__entradilla { font-size: 18px; line-height: 1.55; color: var(--tema-texto); }
.titulo-seccion {
  font-size: clamp(36px, 4.6vw, 76px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  font-weight: 800;
  color: var(--tema-titulo);
}
.separador { height: 1px; margin: 0; border: 0; background: var(--tema-linea); }

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

.pie { background: var(--ink); color: var(--sobre-ink); padding: 48px 0; }
.pie__dentro {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
}
.pie p { font-size: 14px; }

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