/* ============================================================
   Piezas del sprint de compactación (2026-09-28):
   - .doors    tres puertas de servicio en la landing
   - .proof    resumen de "lo que ya funciona"
   - .creeds   version corta de la vieja seccion Filosofia
   - .page-*   encabezado y cierre de las paginas de servicio
   - .scroll-glass  copa que se llena como indicador de avance
   Usa los mismos tokens que styles.css; nada de colores sueltos.
   ============================================================ */

/* ---------------- Servicios: tres puertas ---------------- */

.doors {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}
/* 70rem y no 52rem: a 832px las tres puertas quedaban de 238px, con 16 a 24
   caracteres por linea y 661px de alto. Ilegibles. Hasta ahi van apiladas. */
@media (min-width: 70rem) {
  .doors { grid-template-columns: repeat(3, minmax(0, 1fr)); }

}

.door {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--surface) 70%, transparent);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.3s var(--ease-out-quart), transform 0.3s var(--ease-out-quart),
    background-color 0.3s var(--ease-out-quart);
}
.door:hover,
.door:focus-visible {
  border-color: var(--accent);
  background: color-mix(in oklch, var(--surface) 92%, transparent);
  transform: translateY(-2px);
}

.door__num {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  color: var(--accent);
}
.door h3 { font-size: 1.4rem; line-height: 1.15; }
.door > p { color: var(--ink-soft); }

.door__list {
  list-style: none;
  padding: 0;
  margin: auto 0 0;
  display: grid;
  gap: 0.35rem;
  border-top: 1px solid var(--line);
  padding-top: var(--space-sm);
}
.door__list li {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  padding-left: 1rem;
  position: relative;
}
.door__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.45rem;
  height: 1px;
  background: var(--accent);
}
.door__cta { margin-top: var(--space-sm); font-size: var(--fs-sm); }

/* Las listas de las tres puertas tienen 4, 3 y 3 items, y como se empujan al
   fondo con margin:auto el divisor de la primera quedaba 29px mas arriba que
   el de las otras dos. Con el alto de la lista mas larga (4 items de 1.9rem)
   las tres arrancan en la misma linea. Si alguna pasa a 5 items, este numero
   sube. */
@media (min-width: 70rem) {
  .door__list { min-height: 8.2rem; }
}

/* ---------------- Lo que ya funciona ---------------- */

.proof__rubros {
  list-style: none;
  padding: 0;
  margin: var(--space-xl) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.proof__rubros li {
  font-family: var(--f-mono);
  font-size: var(--fs-cap);
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink-soft);
}
.proof__foot { margin-top: var(--space-lg); }

/* ---------------- Paginas de servicio ---------------- */

.page-hero {
  /* Antes arrancaba con 9rem de aire muerto arriba del eyebrow. */
  padding: calc(var(--space-xl) + 3.5rem) 0 var(--space-xl);
  border-bottom: 1px solid var(--line);
}
.page-hero__title {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 18ch;
  margin-top: var(--space-sm);
}
.page-hero__title em { font-style: italic; color: var(--accent); }
.page-hero__lede {
  margin-top: var(--space-md);
  max-width: 54ch;
  color: var(--ink-soft);
  font-size: var(--fs-lg);
}
.page-hero__actions { margin-top: var(--space-lg); }
/* El boton principal del encabezado NO se esconde esperando la animacion de
   entrada: en un celular real ese hueco de medio segundo hace que la pantalla
   se vea vacia justo al entrar (reportado en el recorrido en 390px). */
html.anim .page-hero__actions.reveal-init { opacity: 1; transform: none; }
.page-hero__hermana { margin-top: var(--space-md); font-size: var(--fs-sm); color: var(--ink-soft); }

/* La letra chica de /capacitacion-equipos es la continuacion de la seccion de
   arriba, no una seccion nueva: sin esto se sumaban los dos paddings y el
   corte se leia como un hueco de 206px. */
#detalle { padding-top: 0; }

.page-cta { text-align: center; }
.page-cta__inner { display: grid; justify-items: center; gap: var(--space-md); }
.page-cta__inner .section-lede { max-width: 46ch; }

/* OJO: .narrow NO achica el contenedor. Si lo hiciera, como .container se
   centra con margin-inline:auto, el texto se correria (1184-928)/2 = 128px a
   la derecha y el borde izquierdo de la pagina saltaria de seccion en seccion.
   El limite de lectura se lo ponemos a los hijos, que ademas quedan todos con
   la MISMA medida: antes los parrafos cortaban a 62ch y los bullets seguian
   hasta el final del contenedor. */
.narrow > * { max-width: 44rem; }
.narrow > p { max-width: 44rem; }
/* En .narrow los parrafos son hijos directos del contenedor y no los alcanza
   ninguna regla de espaciado: quedaban pegados uno arriba del otro.
   :not(.eyebrow) porque esta regla le ganaba por especificidad a .eyebrow y
   los eyebrows de estas secciones salian grises en vez de bordo, con 24px de
   margen de mas arriba. */
.narrow > p:not(.eyebrow) { margin-top: var(--space-md); color: var(--ink-soft); }
.narrow > p.section-lede { color: var(--ink-soft); }

.bullets {
  list-style: none;
  padding: 0;
  margin: var(--space-sm) 0 0;
  display: grid;
  gap: 0.5rem;
}
.bullets li {
  position: relative;
  padding-left: 1.1rem;
  color: var(--ink-soft);
}
.bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 0.5rem;
  height: 1px;
  background: var(--accent);
}

/* ---------------- Indicador de avance (copa) ----------------
   Reemplaza a la barra de porcentaje: una copa dibujada a mano que se
   llena a medida que se baja. Decorativa, se esconde en pantallas
   chicas y con reduced-motion (ahi no aporta y molesta). */

.scroll-glass {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  width: 48px;
  height: 72px;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out-quart);
}
.scroll-glass.is-visible { opacity: 0.9; }
.scroll-glass canvas { width: 100%; height: 100%; display: block; }

@media (max-width: 48rem) {
  .scroll-glass { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-glass { display: none; }
}