/* =========================================================================
   TIME MASTER · Página de Inicio
   Orden: Hero · Marcas · Piezas seleccionadas · Cómo funciona ·
          Señales de confianza · CTA final
   ========================================================================= */

/* ---- 1. HERO ----------------------------------------------------------- */
/* Dos columnas: tesis a la izquierda, una sola pieza como obra de galería a
   la derecha. Altura definida por el contenido (no 100vh).
   Elevación 2026-11-09 (paleta Obsidiana): un foco de luz blanca muy tenue
   detrás de la pieza, titular más grande y vitrina con halo. Sube bajo el
   header flotante para que la barra quede sobre el negro. */
.tm-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  margin-top: -96px;
  padding-block: calc(96px + var(--tm-s-6)) var(--tm-s-7); /* pulido: 120 abajo, el aire lo aporta la banda siguiente */
  background: linear-gradient(180deg, var(--tm-black) 0%, var(--tm-black) 30%, var(--tm-slate-deep) 100%);
}
/* Foco de galería: luz neutra al 7 % centrada en la pieza */
.tm-hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -10% -10% 0 30%;
  /* Pulido 2026-11-09: foco un punto más intenso (7 → 10 %) para dar
     contraste y presencia a la pieza sobre el negro */
  background: radial-gradient(closest-side, rgba(250, 250, 250, 0.10), rgba(250, 250, 250, 0));
}
/* Segundo foco, muy tenue, detrás del titular: el texto también "se ilumina" */
.tm-hero__grid { position: relative; }
.tm-hero__grid::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -30% 55% -20% -25%;
  background: radial-gradient(closest-side, rgba(250, 250, 250, 0.045), rgba(250, 250, 250, 0));
}
/* Línea de horizonte: cierra el hero con un filo de luz que se desvanece */
.tm-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(250, 250, 250, 0), rgba(250, 250, 250, 0.14) 50%, rgba(250, 250, 250, 0));
}
.tm-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--tm-s-6);
  align-items: center;
}
.tm-hero__copy { display: grid; gap: var(--tm-s-3); align-content: center; min-width: 0; }
/* Eyebrow con filete: firma de casa antes del titular */
.tm-hero__copy > .tm-eyebrow { display: inline-flex; align-items: center; gap: 14px; }
.tm-hero__copy > .tm-eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--tm-text-3); }
/* Jerarquía más fuerte: titular hasta 88 px, interlineado cerrado */
.tm-hero__title {
  font-size: clamp(46px, 6.6vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  max-width: 13ch;
}
/* Titulares nunca en color de acento (DS v2 §3): el énfasis es la itálica en blanco */
.tm-hero__title em { font-style: italic; color: #FFFFFF; }
/* Contraste: lead en #C9C9CD (como el texto de la Ficha), no en Niebla */
.tm-hero__copy > .tm-lead { max-width: 52ch; color: #C9C9CD; font-size: 18px; }
.tm-hero__copy > .tm-eyebrow { color: var(--tm-text-2); }
.tm-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tm-s-3); margin-top: var(--tm-s-1); }

/* Datos breves bajo el CTA: refuerzan confianza sin parecer "beneficios" */
.tm-hero__facts {
  display: flex; flex-wrap: wrap; gap: var(--tm-s-1) var(--tm-s-4);
  margin-top: var(--tm-s-3); padding-top: var(--tm-s-3);
  border-top: 1px solid rgba(250, 250, 250, 0.14);
  font-size: 14px; color: #C9C9CD;
}
.tm-hero__facts li { display: inline-flex; align-items: center; gap: 8px; }
.tm-hero__facts li > span { display: inline-grid; }
.tm-hero__facts svg { width: 16px; height: 16px; color: var(--tm-champagne); }

/* Composición visual: pieza en su vitrina iluminada, dentro de un marco con
   filo de luz arriba y halo difuso, con ficha flotante */
.tm-hero__visual { position: relative; min-width: 0; margin: 0; }
.tm-hero__frame {
  position: relative;
  background: linear-gradient(180deg, rgba(250, 250, 250, 0.06), rgba(14, 14, 15, 0.7) 40%);
  border-radius: 28px;
  padding: 14px;
  border: 1px solid rgba(250, 250, 250, 0.10);
  box-shadow: 0 60px 140px -50px rgba(250, 250, 250, 0.16), 0 40px 80px -40px rgba(0, 0, 0, 0.9);
}
.tm-hero__frame .tm-media { border-radius: 18px; aspect-ratio: 4 / 4.6; }
/* La pieza del hero (vitrina negra compartida, components.css) ocupa hasta el 90 %. */
.tm-hero__caption {
  position: absolute; left: -32px; bottom: 40px; z-index: 2;
  display: grid; gap: 4px;
  padding: 16px 20px;
  background: rgba(14, 14, 15, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--tm-line-strong);
  border-radius: var(--tm-radius-card);
  max-width: 260px;
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.9);
}
.tm-hero__caption .tm-card__model { font-size: 22px; transition: color var(--tm-dur) var(--tm-ease); }
.tm-hero__caption .tm-card__model:hover { color: #FFFFFF; }
.tm-hero__seal {
  position: absolute; top: 28px; right: 28px; left: auto;
}

@media (max-width: 1023px) {
  .tm-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--tm-s-5); }
  .tm-hero::before { inset: 35% -30% 0 -30%; }
  .tm-hero__caption { left: 24px; bottom: 24px; }
}
@media (max-width: 599px) {
  .tm-hero__copy > .tm-lead { font-size: 16px; }
  .tm-hero { padding-top: calc(96px + var(--tm-s-4)); }
  .tm-hero__frame { padding: 10px; border-radius: 22px; }
  .tm-hero__caption { position: static; margin-top: 12px; max-width: none; }
  .tm-hero__seal { top: 20px; right: 20px; }
}

/* ---- 2. MARCAS DESTACADAS ---------------------------------------------- */
/* DS v2: bloques planos por casa (como los accesos por categoría de
   Allbirds), Grafito claro; al pasar el cursor, Azul pizarra. */
.tm-brands__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--tm-grid-gap);
}
.tm-brand {
  display: grid; gap: 10px; align-content: center; justify-items: center;
  min-height: 168px; padding: var(--tm-s-3);
  background: var(--tm-graphite-2);
  border: 1px solid var(--tm-line);
  border-radius: var(--tm-radius-card);
  text-align: center;
  transition: background-color var(--tm-dur) var(--tm-ease), border-color var(--tm-dur) var(--tm-ease), transform var(--tm-dur-slow) var(--tm-ease), box-shadow var(--tm-dur-slow) var(--tm-ease);
}
/* Nombres tipográficos (sin logotipos de las casas, ver README) */
.tm-brand__name {
  font-family: var(--tm-font-display);
  font-size: 26px; line-height: 1.1; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.tm-brand__cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 500; letter-spacing: var(--tm-tracking-label); text-transform: uppercase;
  color: var(--tm-text-muted);
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--tm-dur) var(--tm-ease), transform var(--tm-dur) var(--tm-ease), color var(--tm-dur) var(--tm-ease);
}
.tm-brand__cta svg { width: 14px; height: 14px; }
.tm-brand:hover, .tm-brand:focus-visible { background: var(--tm-slate); border-color: var(--tm-line-strong); transform: translateY(var(--tm-lift)); box-shadow: var(--tm-shadow-lift); }
.tm-brand:hover .tm-brand__cta,
.tm-brand:focus-visible .tm-brand__cta { opacity: 1; transform: none; color: var(--tm-text); }
/* En pantallas táctiles no hay hover: la acción se muestra siempre */
@media (hover: none) { .tm-brand__cta { opacity: 1; transform: none; } }

@media (max-width: 1023px) { .tm-brands__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .tm-brand { min-height: 112px; padding: var(--tm-s-2); }
  .tm-brand__name { font-size: 19px; letter-spacing: 0.04em; }
}

/* ---- 3. PIEZAS SELECCIONADAS ------------------------------------------- */
.tm-pieces__note {
  margin-top: var(--tm-s-4);
  font-size: 14px; color: var(--tm-text-muted); text-align: center;
}

/* ---- 4. CÓMO FUNCIONA -------------------------------------------------- */
/* Sobre banda Grafito, los pasos van en Noche para separarse.
   Elevación 2026-11-09: número grande con un filete que lo une al siguiente
   paso (es una secuencia real), filo de luz arriba y elevación suave al
   pasar el cursor. .tm-steps / .tm-step base viven en components.css. */
/* La elevación de los pasos (filo de luz, número con filete, hover) se
   movió a components.css: la comparten Cómo funciona y Confianza. */

/* ---- 5. SEÑALES DE CONFIANZA ------------------------------------------ */
/* Banda de confianza en Grafito banda (.tm-section--slate) con un foco de
   luz arriba a la izquierda, detrás del titular. */
/* La banda .tm-section--slate (foco, filete de luz, icono con hover) se movió
   a components.css: la comparte la ficha de producto (2026-11-09). */
.tm-trust__intro h2 { font-size: clamp(34px, 4vw, 48px); line-height: 1.05; }
.tm-trust__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
  gap: var(--tm-s-6);
  align-items: start;
}
.tm-trust__intro { display: grid; gap: var(--tm-s-2); position: sticky; top: var(--tm-header-offset); }
.tm-trust__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tm-s-5) var(--tm-s-4);
}
/* .tm-trust__item / __icon viven en components.css (también los usa la ficha). */
@media (max-width: 1023px) {
  .tm-trust__grid { grid-template-columns: minmax(0, 1fr); gap: var(--tm-s-5); }
  .tm-trust__intro { position: static; }
}
@media (max-width: 599px) { .tm-trust__list { grid-template-columns: minmax(0, 1fr); gap: var(--tm-s-4); } }

/* ---- 6. CTA FINAL ------------------------------------------------------ */
/* .tm-final se movió a components.css (lo comparte la Colección). */
/* El foco de luz cenital del bloque final vive en components.css (compartido). */

/* ---- 7. MOVIMIENTO (2026-11-09) ---------------------------------------- */
/* Las reglas generales (keyframes tm-rise/tm-settle/tm-draw/tm-fade y
   [data-reveal] / [data-reveal-stagger]) viven en components.css,
   "Movimiento compartido", porque las usa también el Catálogo.
   Aquí solo lo exclusivo de la Home.
   - Entrada del hero al cargar: 700 ms, escalonada 90 ms. */
.tm-motion .tm-hero__copy > * { animation: tm-rise 700ms var(--tm-ease) both; }
.tm-motion .tm-hero__copy > :nth-child(1) { animation-delay: 80ms; }
.tm-motion .tm-hero__copy > :nth-child(2) { animation-delay: 170ms; }
.tm-motion .tm-hero__copy > :nth-child(3) { animation-delay: 260ms; }
.tm-motion .tm-hero__copy > :nth-child(4) { animation-delay: 350ms; }
.tm-motion .tm-hero__copy > :nth-child(5) { animation-delay: 440ms; }
.tm-motion .tm-hero__frame { animation: tm-settle 900ms var(--tm-ease) 200ms both; }
.tm-motion .tm-hero__caption { animation: tm-rise 700ms var(--tm-ease) 600ms both; }
.tm-motion .tm-hero::before { animation: tm-fade 1400ms var(--tm-ease) both; }

/* Señales de confianza: el filete que se dibuja vive en components.css */
/* Sello del hero arriba a la derecha (la regla general del badge lo fijaba
   también a la izquierda y lo estiraba a todo el ancho) */
.tm-hero__frame .tm-media > .tm-hero__seal { left: auto; right: 20px; top: 20px; }