:root {
  --bg:            #F7F5F1;
  --surface:       #FFFFFF;
  --ink:           #141210;
  --ink-2:         #56524E;
  --ink-3:         #9B9792;
  --accent:        #1B6844;
  --accent-hover:  #155435;
  --accent-soft:   #E6F3ED;
  /* Navy deportivo — idéntico a --sport-accent en landing.css/nativa-app.css,
     usado aquí solo como acento de identidad dual (clínica + deportiva),
     nunca como color de acción primario en esta pantalla. */
  --sport-accent:      #1E3A5F;
  --sport-accent-hover:#14293F;
  --sport-accent-soft: #E4E9F1;
  --warning:       #C98A3C;
  --border:        rgba(20, 18, 16, 0.08);
  --border-strong: rgba(20, 18, 16, 0.14);
  --radius-lg:     20px;
  --radius-xl:     28px;
  --font-display:  'Fraunces', Georgia, serif;
  --font-body:     'Hanken Grotesk', -apple-system, 'Segoe UI', sans-serif;
  --font-mono:     'JetBrains Mono', 'Courier New', monospace;
  --ease-soft:     cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100vh;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink-2);
  position: relative;
}

/* ── Malla de fondo: dos polos de color — esmeralda (clínica) y navy
   (deportiva) — en movimiento lento. Comunica la identidad dual desde el
   primer instante sin necesitar copy adicional. ────────────────────────── */
@property --mesh-x { syntax: '<percentage>'; inherits: false; initial-value: 30%; }
@property --mesh-y { syntax: '<percentage>'; inherits: false; initial-value: 30%; }

.pre-mesh {
  position: fixed;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 40% at var(--mesh-x) var(--mesh-y), rgba(27, 104, 68, 0.26), transparent 65%),
    radial-gradient(40% 36% at calc(100% - var(--mesh-x)) calc(100% - var(--mesh-y)), rgba(30, 58, 95, 0.19), transparent 60%),
    radial-gradient(30% 26% at 50% 88%, rgba(201, 138, 60, 0.14), transparent 62%),
    var(--bg);
  filter: blur(60px);
  animation: meshDrift 26s ease-in-out infinite alternate;
}
@keyframes meshDrift {
  0%   { --mesh-x: 22%; --mesh-y: 18%; }
  50%  { --mesh-x: 62%; --mesh-y: 38%; }
  100% { --mesh-x: 30%; --mesh-y: 64%; }
}
@media (prefers-reduced-motion: reduce) {
  .pre-mesh { animation: none; }
}

/* ── Retícula de puntos — motivo de precisión clínica, igual lenguaje
   visual que el hero de landing.css. Enmascarada al centro superior. ───── */
.pre-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(20, 18, 16, 0.06) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 38%, #000 30%, transparent 76%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 38%, #000 30%, transparent 76%);
}

/* ── Hojas decorativas: mismo trazo del logo, como textura botánica ────── */
.pre-leaves {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.pre-leaf-fill { fill: currentColor; }
.pre-leaf-vein { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.pre-leaf-vein--thin { stroke-width: 1.1; opacity: 0.6; }

.pre-leaf--green { color: var(--accent); opacity: 0.10; }
.pre-leaf--cream { color: var(--surface); opacity: 0.55; }

.pre-main {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 48px 24px;
  text-align: center;
}

/* ── Reveal de entrada (sin JS de scroll: todo está above-the-fold) ───── */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  animation: preReveal 0.7s var(--ease-soft) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes preReveal {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { animation: none; opacity: 1; transform: none; }
}

.pre-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.pre-logo {
  height: 64px;
  width: auto;
}

.pre-logo-fallback {
  display: none;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.pre-logo-fallback.visible { display: block; }
.pre-logo-fallback strong { font-weight: 600; color: var(--accent); }

.pre-origin-badge {
  display: inline-block;
}

/* ── Chips de alcance: clínica + deportiva, un mismo sistema ─────────── */
.pre-scope {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.pre-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  border-radius: 999px;
  border: 1px solid transparent;
}

.pre-chip svg { width: 13px; height: 13px; flex-shrink: 0; }

.pre-chip--clinica {
  color: var(--accent-hover);
  background: var(--accent-soft);
  border-color: rgba(27, 104, 68, 0.18);
}

.pre-chip--deportiva {
  color: var(--sport-accent);
  background: var(--sport-accent-soft);
  border-color: rgba(30, 58, 95, 0.16);
}

.pre-kicker {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--accent) 0%, #5BAE8B 35%, var(--warning) 55%, var(--sport-accent) 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  display: inline-block;
  animation: preKickerShimmer 7s linear infinite;
}
@keyframes preKickerShimmer {
  to { background-position: -220% center; }
}
@media (prefers-reduced-motion: reduce) {
  .pre-kicker { animation: none; }
}

.pre-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(26px, 3.6vw, 36px);
  color: var(--ink);
  letter-spacing: -0.01em;
}

.pre-subtitle {
  margin: 0 0 24px;
  max-width: 480px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

.pre-cards {
  position: relative;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Halo de color detrás del par de tarjetas — esmeralda + navy, pulso suave */
.pre-cards::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  z-index: -1;
  background:
    radial-gradient(38% 60% at 28% 50%, rgba(27, 104, 68, 0.20), transparent 70%),
    radial-gradient(38% 60% at 72% 50%, rgba(30, 58, 95, 0.16), transparent 70%);
  filter: blur(30px);
  animation: preCardsGlowPulse 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes preCardsGlowPulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .pre-cards::before { animation: none; }
}

.pre-card {
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 50%;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 290px;
  padding: 50px 32px 40px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 30px rgba(20, 18, 16, 0.06);
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(0);
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease-soft), box-shadow 0.4s var(--ease-soft), border-color 0.4s var(--ease-soft);
}

/* Barra de acento superior — degradado esmeralda→navy, una sola plataforma
   para ambos dominios. Se intensifica al hover. */
.pre-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--sport-accent));
  opacity: 0.6;
  transition: opacity 0.4s var(--ease-soft);
}
.pre-card:hover::before { opacity: 1; }

.pre-card:hover,
.pre-card:focus-visible {
  transition-duration: 0.15s, 0.4s, 0.4s;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-8px);
  border-color: var(--border-strong);
  box-shadow: 0 30px 60px rgba(20, 18, 16, 0.12), 0 8px 20px rgba(27, 104, 68, 0.10);
}

/* Halo sutil que sigue el cursor dentro de la tarjeta */
.pre-card-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(240px circle at var(--mx) var(--my), var(--accent-soft), transparent 65%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.pre-card:hover .pre-card-glow { opacity: 1; }

.pre-avatar {
  width: 92px;
  height: 92px;
  transform: translateZ(20px);
  transition: transform 0.4s var(--ease-soft);
  filter: drop-shadow(0 8px 16px rgba(27, 104, 68, 0.22));
}
.pre-card:hover .pre-avatar { transform: translateZ(20px) scale(1.05); }

/* Avatar: relleno en degradado esmeralda→navy, figura recortada en crema — más color, más peso */
.pre-avatar-bg { fill: url(#pre-avatar-gradient); }
.pre-avatar-ring { fill: none; stroke: var(--accent); stroke-opacity: 0.28; stroke-width: 1.5; }
.pre-avatar-stroke { fill: none; stroke: var(--bg); stroke-width: 3; stroke-linecap: round; }
.pre-badge-bg { fill: var(--surface); stroke: var(--accent-hover); stroke-width: 2; }
.pre-badge-stroke { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pre-badge-stroke--thin { stroke-width: 1.7; }
.pre-badge-dot { fill: var(--warning); }

.pre-card-label {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  transform: translateZ(20px);
}

.pre-card-sub {
  font-size: 13px;
  color: var(--ink-3);
  transform: translateZ(20px);
}

/* ── Franja de confianza ─────────────────────────────────────────────── */
.pre-trust {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.pre-trust-label {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.pre-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
}

.badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--accent-hover);
  background: var(--accent-soft);
  border: 1px solid rgba(27, 104, 68, 0.22);
  border-radius: 4px;
  padding: 0.2rem 0.55rem;
  letter-spacing: 0.02em;
  transition: transform 0.25s var(--ease-soft), box-shadow 0.25s var(--ease-soft);
}
.badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(27, 104, 68, 0.18);
}

.badge--sport {
  color: var(--sport-accent);
  background: var(--sport-accent-soft);
  border-color: rgba(30, 58, 95, 0.22);
}
.badge--sport:hover {
  box-shadow: 0 4px 10px rgba(30, 58, 95, 0.18);
}

.pre-origin-badge {
  color: var(--warning);
  background: rgba(201, 138, 60, 0.12);
  border-color: rgba(201, 138, 60, 0.28);
  font-weight: 600;
}

/* ── Pie de página ───────────────────────────────────────────────────── */
.pre-footer {
  position: relative;
  z-index: 1;
  padding: 0 24px 28px;
  text-align: center;
}
.pre-footer p {
  margin: 0;
  font-size: 12px;
  color: var(--ink-3);
}

@media (max-width: 540px) {
  .pre-cards { gap: 18px; }
  .pre-card { width: 100%; max-width: 320px; padding: 40px 28px 32px; }
}