/* ============================================================================
   SREAL ECOSYSTEM — Design System (Light / Chrome)
   Dirección de arte: direccion-arte-ecosystem.md — blanco / plata / cromo,
   estética Apple. PROHIBIDO azules eléctricos, morados, neones, saturaciones.
   Autocontenido: system fonts, sin CDNs, sin librerías externas.
   E1 · SREAL AI · 2026-07-18
   ============================================================================ */

:root {
  /* — Paleta luz (tomada del logotipo cromado SREAL) — */
  --white:        #FFFFFF;   /* principal */
  --warm-white:   #F8F8F8;   /* secundario, secciones alternas */
  --gray-100:     #EFEFEF;   /* fondos alternos, divisores */
  --gray-200:     #E2E2E4;   /* bordes suaves */
  --gray-300:     #B5B5B5;   /* gris medio */
  --gray-500:     #6E6E73;   /* texto secundario (E5: AA sobre blanco, contraste ~4.8:1) */
  --gray-600:     #555555;   /* texto cuerpo (art direction) */
  --ink:          #1D1D1F;   /* titulares near-black, jerarquía fuerte */

  /* — Cromo: acabado plateado metálico de la marca — */
  --chrome-hi:    #FFFFFF;
  --chrome-mid:   #C4C4CA;
  --chrome-lo:    #8E8E94;
  /* Gradiente cromo reutilizable para titulares e íconos (clip a texto) */
  /* acero pulido: cada stop legible sobre blanco (nunca blanco puro en extremos) */
  --grad-chrome: linear-gradient(
      175deg,
      #8A8A90 0%,
      #E8E8EC 16%,
      #6E6E74 38%,
      #C9C9CF 52%,
      #55555B 66%,
      #D8D8DC 84%,
      #8A8A90 100%);
  /* Gradiente cromo horizontal (para líneas/divisores metálicos) */
  --grad-chrome-h: linear-gradient(
      90deg, transparent, var(--gray-300), var(--chrome-hi), var(--gray-300), transparent);
  /* Superficie aluminio cepillado sutil para tarjetas destacadas */
  --grad-alu: linear-gradient(160deg, #FFFFFF 0%, #F6F6F7 55%, #EFEFF1 100%);

  /* — Glass / cristal (para chips y overlays sobre fondos claros) — */
  --glass:        rgba(255, 255, 255, 0.66);
  --glass-brd:    rgba(255, 255, 255, 0.9);

  /* — Tipografía: system sans limpia, estilo Apple — */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
               Helvetica, Arial, "Inter", system-ui, sans-serif;
  /* Escala fluida con clamp() */
  --fs-display: clamp(2.6rem, 6.4vw, 5rem);
  --fs-h1:      clamp(2.1rem, 4.6vw, 3.4rem);
  --fs-h2:      clamp(1.7rem, 3.2vw, 2.5rem);
  --fs-h3:      clamp(1.25rem, 2vw, 1.6rem);
  --fs-lead:    clamp(1.05rem, 1.6vw, 1.28rem);
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;
  --lh-tight:   1.08;
  --lh-snug:    1.28;
  --lh-body:    1.62;
  --tracking-eyebrow: 0.34em;

  /* — Espaciado generoso (base 8) — */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 6rem;
  --sp-8: 8rem;
  --section-y: clamp(4rem, 9vw, 8rem);
  --gutter:    clamp(1.25rem, 5vw, 2.5rem);
  --maxw:      1180px;
  --maxw-text: 720px;

  /* — Radios — */
  --r-sm: 10px;
  --r:    18px;
  --r-lg: 26px;
  --r-pill: 999px;

  /* — Sombras: luz suave, cristal, sin dureza — */
  --sh-1: 0 1px 2px rgba(20, 20, 25, 0.04), 0 2px 8px rgba(20, 20, 25, 0.05);
  --sh-2: 0 4px 14px rgba(20, 20, 25, 0.06), 0 10px 34px rgba(20, 20, 25, 0.07);
  --sh-3: 0 10px 30px rgba(20, 20, 25, 0.08), 0 24px 70px rgba(20, 20, 25, 0.10);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.8);

  /* — Movimiento — */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 180ms;
  --dur-2: 360ms;
  --dur-3: 640ms;
}

/* ---------------------------------------------------------------------------
   Reset / base
   --------------------------------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--gray-600);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--gray-300); color: var(--ink); }

h1, h2, h3, h4 { color: var(--ink); line-height: var(--lh-snug); font-weight: 600; letter-spacing: -0.02em; }

/* ---------------------------------------------------------------------------
   Tipografía — utilidades
   --------------------------------------------------------------------------- */
.display { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -0.035em; font-weight: 600; }
.h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.03em; }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.lead { font-size: var(--fs-lead); line-height: var(--lh-snug); color: var(--gray-500); font-weight: 400; }
.small { font-size: var(--fs-sm); }
.muted { color: var(--gray-500); }

.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gray-500);
}

/* — Cromo: gradiente plateado recortado al texto — */
.chrome {
  background: var(--grad-chrome);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* micro-relieve metálico */
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.7))
          drop-shadow(0 1px 1px rgba(20, 20, 25, 0.12));
}
/* Brillo cromado animado sutil (barrido de luz) */
.chrome-shine {
  /* brillos acotados: ningún tramo se lava sobre blanco */
  background: linear-gradient(100deg,
      #6E6E74 0%, #55555B 18%, #D8D8DC 32%, #9A9AA0 42%,
      #4A4A50 55%, #D8D8DC 68%, #77777D 82%, #55555B 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: chrome-sweep 7s var(--ease) infinite;
}
@keyframes chrome-sweep { 0% { background-position: 180% 0; } 100% { background-position: -80% 0; } }

/* ---------------------------------------------------------------------------
   Layout — contenedores y secciones
   --------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container-text { max-width: var(--maxw-text); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section--alt { background: var(--warm-white); }
.section--gray { background: var(--gray-100); }
.center { text-align: center; }
.stack > * + * { margin-top: var(--sp-3); }

/* Divisor metálico fino */
.divider {
  height: 1px;
  border: 0;
  background: var(--grad-chrome-h);
  opacity: 0.9;
  max-width: var(--maxw);
  margin-inline: auto;
}

/* ---------------------------------------------------------------------------
   Superficies — tarjetas de cristal / aluminio
   --------------------------------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
  transition: transform var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--gray-300); }
.card--alu { background: var(--grad-alu); box-shadow: var(--sh-2), var(--sh-inset); }
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
}

/* ---------------------------------------------------------------------------
   Botones
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  padding: 0.9em 1.6em;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.01em;
  line-height: 1; white-space: nowrap;
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease-out),
              background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn--primary {
  color: var(--white);
  background: linear-gradient(180deg, #3A3A3F 0%, #1D1D1F 100%);
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.btn--primary:hover { box-shadow: var(--sh-3), inset 0 1px 0 rgba(255, 255, 255, 0.22); transform: translateY(-2px); }
.btn--ghost {
  color: var(--ink);
  background: var(--white);
  border-color: var(--gray-300);
  box-shadow: var(--sh-1);
}
.btn--ghost:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--sh-2); }
.btn--wa { color: #0b6b3a; background: #eafaf0; border-color: #bfe8cf; }
.btn--wa:hover { background: #dcf6e6; border-color: #0b6b3a; transform: translateY(-2px); }
.btn--lg { padding: 1.05em 2em; font-size: var(--fs-body); }

/* ---------------------------------------------------------------------------
   Chips / etiquetas
   --------------------------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.4em 0.9em;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em;
  color: var(--gray-600);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-1);
}

/* ---------------------------------------------------------------------------
   Lockup de servicio (isologo + nombre) — regla dura de identidad
   El isologo NUNCA va suelto: siempre acompañado del nombre.
   --------------------------------------------------------------------------- */
.lockup { display: inline-flex; flex-direction: column; align-items: center; gap: 0.75em; text-align: center; }
.lockup__iso {
  height: 68px; width: auto; object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(20, 20, 25, 0.14));
  transition: transform var(--dur-2) var(--ease-out);
}
.lockup:hover .lockup__iso { transform: translateY(-3px) scale(1.03); }
.lockup__name {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink);
}
.lockup__tag { font-size: var(--fs-xs); color: var(--gray-500); letter-spacing: 0.02em; }

/* Marca SREAL — lockup isologo + wordmark */
.brand-lockup { display: inline-flex; align-items: center; gap: 0.6em; }
.brand-lockup img.iso { height: 30px; width: auto; }
.brand-lockup img.word { height: 20px; width: auto; }

/* ---------------------------------------------------------------------------
   Animaciones base — reveal al scroll y entrada
   Sutiles, con propósito. Respetan prefers-reduced-motion.
   --------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal="scale"] { transform: translateY(22px) scale(0.97); }
[data-reveal="scale"].is-visible { transform: none; }
[data-reveal-delay="1"] { transition-delay: 90ms; }
[data-reveal-delay="2"] { transition-delay: 180ms; }
[data-reveal-delay="3"] { transition-delay: 270ms; }
[data-reveal-delay="4"] { transition-delay: 360ms; }

@keyframes fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes float-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.anim-fade-up { animation: fade-up var(--dur-3) var(--ease-out) both; }
.anim-float { animation: float-soft 6s var(--ease) infinite; }

/* Ambiente luz: halos plateados muy tenues de fondo */
.ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ambient::before, .ambient::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(60px);
}
.ambient::before {
  top: -20%; left: 50%; width: 900px; height: 900px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(181, 181, 181, 0.18), transparent 62%);
  animation: float-soft 22s var(--ease) infinite;
}
.ambient::after {
  bottom: -18%; right: -8%; width: 640px; height: 640px;
  background: radial-gradient(circle, rgba(200, 200, 206, 0.14), transparent 60%);
  animation: float-soft 28s var(--ease) infinite reverse;
}

/* ---------------------------------------------------------------------------
   Accesibilidad — respeto de movimiento reducido
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .chrome-shine { animation: none; }
  .ambient::before, .ambient::after { animation: none; }
}

/* Focus visible accesible */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

/* Utilidades varias */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.grid { display: grid; gap: var(--sp-3); }
.flex { display: flex; }
.wrap { flex-wrap: wrap; }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.items-center { align-items: center; }
.justify-center { justify-content: center; }