/* ============================================================
   SYMBIO · SECCIONES
   Ritmo de dos columnas sobre el void, según DESIGN.md: titular
   grande a la izquierda, cuerpo a la derecha, alternando el lado
   en cada sección para crear zigzag de lectura.
   ============================================================ */

.section {
  position: relative;
  z-index: var(--z-body);
  padding-block: var(--section-y);
}

/* ============================================================ HERO */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-block: clamp(6rem, 13vh, 9rem) var(--s-60);
  overflow: hidden;
}

/* El cerebro ocupa la mitad derecha a gran escala. La máscara lo
   hace nacer de la oscuridad en vez de recortarlo con un canto duro,
   y mantiene limpio el lado del titular. */
.hero__brain {
  position: absolute; inset: 0;
  z-index: var(--z-canvas);
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 2s var(--ease-out);
  -webkit-mask-image: linear-gradient(90deg, transparent 4%, rgba(0,0,0,.30) 32%, #000 56%);
          mask-image: linear-gradient(90deg, transparent 4%, rgba(0,0,0,.30) 32%, #000 56%);
}
.hero__brain.is-ready { opacity: 1; }

.hero__grid { position: relative; z-index: var(--z-body); }
.hero__copy { max-width: 44rem; }

.hero__title {
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  margin-bottom: var(--s-30);
  max-width: 13ch;
}

.hero__lead {
  max-width: 34rem;
  font-size: clamp(1.06rem, 1.35vw, 1.25rem);
  color: var(--silver);
  margin-bottom: var(--s-36);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-12); }

.hero__cue {
  position: absolute; bottom: var(--s-30); left: 50%;
  z-index: var(--z-body);
  transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--s-12);
  font-size: var(--t-caption);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ash);
  transition: color var(--d-fast) var(--ease);
}
.hero__cue:hover { color: var(--white); }
.hero__cue-line {
  width: 46px; height: 1px;
  background: rgba(255,255,255,.18);
  position: relative; overflow: hidden;
}
.hero__cue-line::after {
  content: ""; position: absolute; inset: 0;
  background: var(--blue-bright);
  animation: drift 2.6s var(--ease) infinite;
}
@keyframes drift {
  0%       { transform: translateX(-100%); }
  55%,100% { transform: translateX(100%); }
}

/* ============================================================ SPLIT */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.split--reverse .split__head { order: 2; }
.split--reverse .split__body { order: 1; }

.split__body p { color: var(--silver); max-width: 46ch; }
.split__body .lead { color: var(--white); }

/* ---------------------------------------------- Lista de chequeo */

.checks {
  list-style: none;
  margin: var(--s-36) 0 0; padding: 0;
  display: grid; gap: var(--s-12);
}
.checks li {
  position: relative;
  padding-left: var(--s-30);
  font-size: var(--t-nav);
  color: var(--white);
}
.checks li::before {
  content: "";
  position: absolute; left: 0; top: .55em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 10px rgba(74,125,255,.8);
}

/* ============================================================ COSTO
   La lista tachada es el argumento visual de la sección: cada ítem
   es un costo que desaparece. Se entiende sin leer el párrafo. */

.strike {
  list-style: none;
  margin: var(--s-60) 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-12);
}
.strike li {
  display: flex; align-items: center;
  min-height: 76px;
  padding: var(--s-18) var(--s-24);
  border-radius: var(--r-sm);
  font-size: var(--t-nav);
  color: var(--ash);
  transition: color var(--d-mid) var(--ease), border-color var(--d-mid) var(--ease);
}
.strike li span {
  position: relative;
  display: inline-block;
}
/* El tachado se dibuja al entrar en pantalla, no viene hecho: el
   gesto de tacharse es la idea. */
.strike li span::after {
  content: "";
  position: absolute; left: -2px; right: -2px; top: 52%;
  height: 1px;
  background: var(--blue-bright);
  box-shadow: 0 0 8px rgba(99,200,255,.8);
  transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--ease-out);
  transition-delay: calc(var(--rd, 0ms) + 260ms);
}
.strike li.is-in span::after { transform: scaleX(1); }
.strike li:hover { color: var(--white); border-color: var(--glass-line-hi); }

/* ============================================================ TIEMPO */

.stats {
  margin-top: var(--s-36);
  display: grid; gap: var(--s-12);
}
.stat {
  padding: var(--s-24);
  border-radius: var(--r-sm);
  transition: border-color var(--d-mid) var(--ease), transform var(--d-mid) var(--ease-out);
}
.stat:hover { border-color: var(--glass-line-hi); transform: translateY(-2px); }
.stat em {
  display: block;
  font-style: normal;
  font-size: var(--t-nav);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tr-nav);
  text-transform: uppercase;
  color: var(--blue-bright);
  margin-bottom: var(--s-6);
}
.stat span { font-size: var(--t-nav); color: var(--silver); }

/* ============================================================ CONTACTO */

.section--contacto { padding-bottom: var(--s-120); }

.contacto__head { max-width: 46rem; margin-bottom: var(--s-60); }
.contacto__head .h-lg { max-width: 18ch; margin-bottom: var(--s-24); }
.contacto__head .lead { color: var(--silver); max-width: 44ch; }

.channels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-18);
}

.channel {
  display: flex; align-items: center; gap: var(--s-18);
  padding: var(--s-24);
  transition: border-color var(--d-mid) var(--ease),
              transform var(--d-mid) var(--ease-out),
              background var(--d-mid) var(--ease);
}
.channel:hover {
  border-color: var(--glass-line-hi);
  background: var(--glass-bg-hi);
  transform: translateY(-3px);
}

.channel__icon {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(74,125,255,.12);
  border: 1px solid rgba(74,125,255,.28);
  color: var(--blue-bright);
  transition: background var(--d-mid) var(--ease), color var(--d-mid) var(--ease);
}
.channel__icon svg { width: 20px; height: 20px; }
.channel:hover .channel__icon { background: rgba(74,125,255,.22); color: var(--white); }

.channel__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.channel__body em {
  font-style: normal;
  font-size: var(--t-caption);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ash);
}
.channel__body > span {
  font-size: var(--t-nav);
  color: var(--white);
  overflow-wrap: anywhere;      /* el mail largo no puede desbordar la tarjeta */
}

.channel__go {
  margin-left: auto;
  font-size: 1rem;
  color: var(--ash);
  transition: color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease-out);
}
.channel:hover .channel__go { color: var(--blue-bright); transform: translate(2px, -2px); }

/* ============================================================ FOOTER */

.footer {
  position: relative;
  z-index: var(--z-body);
  padding-block: var(--s-60);
  border-top: 1px solid rgba(255,255,255,.07);
}
.footer__inner { display: flex; flex-direction: column; gap: var(--s-24); }
.footer__claim {
  margin: 0;
  font-size: var(--t-nav);
  color: var(--ash);
}
.footer__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-12) var(--s-30);
  padding-top: var(--s-24);
  border-top: 1px solid rgba(255,255,255,.07);
  font-size: var(--t-caption);
  color: var(--ash);
}
.footer__meta a { transition: color var(--d-fast) var(--ease); }
.footer__meta a:hover { color: var(--white); }