/* =========================================================================
   TIME MASTER · Páginas de contenido (Cómo funciona, Aviso de privacidad…)
   Solo lo exclusivo de estas páginas. Cabecera (.tm-page-head), pasos
   (.tm-steps), breadcrumb y bloque final vienen de components.css.
   ========================================================================= */

/* Aviso de contenido pendiente: visible, sobrio, sin colores saturados */
.tm-pending {
  display: flex; gap: 12px; align-items: flex-start;
  padding: var(--tm-s-2) var(--tm-s-3);
  border: 1px dashed var(--tm-champagne);
  border-radius: var(--tm-radius-input);
  background: var(--tm-surface);
  font-size: 14px; color: var(--tm-ink);
  max-width: 72ch;
}
.tm-pending strong {
  flex: none;
  font-size: 11px; font-weight: 500; letter-spacing: var(--tm-tracking-label); text-transform: uppercase;
  color: var(--tm-champagne-text);
  padding-top: 2px;
}

/* Texto largo (legal, editorial): columna de lectura de ~68 caracteres */
.tm-prose { max-width: 68ch; display: grid; gap: var(--tm-s-4); }
.tm-prose section { display: grid; gap: 12px; padding-top: var(--tm-s-3); border-top: 1px solid var(--tm-border); }
.tm-prose h2 { font-size: var(--tm-fs-h3); }
/* Pulido 2026-11-09: texto de lectura en #C9C9CD, como la descripción de la
   Ficha y el lead del hero (más contraste que Niebla en párrafos largos) */
.tm-prose p, .tm-prose li { color: #C9C9CD; line-height: 1.75; }
.tm-prose ul { display: grid; gap: 6px; padding-left: 20px; list-style: disc; }
.tm-prose [data-pending] { font-style: italic; }

/* =========================================================================
   CÓMO FUNCIONA (como-funciona.html)
   Reutiliza .tm-page-head, .tm-steps/.tm-step, .tm-trust__item y .tm-final
   de components.css. Aquí solo: franja de certezas del hero, variante de
   4 pasos con icono, layout de "Qué incluye" y el acordeón de FAQ.
   ========================================================================= */

/* ---- 1. Hero (Cómo funciona y Confianza) -------------------------------
   Cabecera elevada .tm-page-head--lit (components.css: foco de luz,
   breadcrumb con filete, titular 72 px, entrada escalonada). Aquí solo:
   más aire abajo, lead más legible y la franja de certezas, que se separa
   con un filete de horizonte que se dibuja de izquierda a derecha; cada
   certeza entra en su turno con el icono en un anillo fino (como los
   iconos de confianza). */
.tm-how-hero .tm-lead { max-width: 60ch; }
@media (min-width: 1024px) { .tm-how-hero { padding-bottom: var(--tm-s-6); } }

.tm-how-facts {
  position: relative;
  display: flex; flex-wrap: wrap; gap: 14px var(--tm-s-5);
  margin-top: var(--tm-s-3); padding-top: var(--tm-s-3);
  font-size: 12px; font-weight: 500; letter-spacing: var(--tm-tracking-label); text-transform: uppercase;
  color: var(--tm-ink);
}
.tm-how-facts::before {
  content: ""; position: absolute; top: 0; left: 0; width: min(100%, 720px); height: 1px;
  background: linear-gradient(90deg, var(--tm-line-strong), rgba(54, 54, 58, 0));
  transform-origin: left;
}
.tm-how-facts li { display: inline-flex; align-items: center; gap: 12px; }
.tm-how-facts span {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: inline-grid; place-items: center;
  border: 1px solid rgba(214, 214, 214, 0.32); background: rgba(250, 250, 250, 0.03);
  color: var(--tm-champagne);
}
.tm-how-facts svg { width: 16px; height: 16px; }
/* Entrada: la franja no sube en bloque; se dibuja el filete y cada
   certeza aparece 90 ms después de la anterior */
.tm-motion .tm-how-hero .tm-page-head__inner > .tm-how-facts { animation: none; }
.tm-motion .tm-how-facts::before { animation: tm-draw 900ms var(--tm-ease) 380ms both; }
.tm-motion .tm-how-facts li { animation: tm-rise 700ms var(--tm-ease) both; }
.tm-motion .tm-how-facts li:nth-child(1) { animation-delay: 460ms; }
.tm-motion .tm-how-facts li:nth-child(2) { animation-delay: 550ms; }
.tm-motion .tm-how-facts li:nth-child(3) { animation-delay: 640ms; }
@media (max-width: 599px) { .tm-how-facts { flex-direction: column; } }

/* ---- 2. Pasos: 4 / 2 / 1 columnas + icono junto al número -------------- */
.tm-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1199px) { .tm-steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .tm-steps--4 { grid-template-columns: minmax(0, 1fr); } }
/* Elevación 2026-11-09: el número grande con filete (components.css) se
   estira hasta el icono, que va en un anillo plata y se ilumina y sube
   2 px cuando el cursor pasa por el paso. */
.tm-step__top { display: flex; align-items: center; justify-content: space-between; gap: var(--tm-s-2); margin-bottom: var(--tm-s-1); }
.tm-step__top .tm-step__num { flex: 1; min-width: 0; margin-bottom: 0; }
.tm-step__icon {
  flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(250, 250, 250, 0.03); border: 1px solid rgba(214, 214, 214, 0.32);
  color: var(--tm-ink);
  transition: border-color var(--tm-dur) var(--tm-ease), background-color var(--tm-dur) var(--tm-ease), transform var(--tm-dur) var(--tm-ease);
}
.tm-step__icon svg { width: 20px; height: 20px; }
@media (hover: hover) {
  .tm-step:hover .tm-step__icon { border-color: var(--tm-text); background: rgba(250, 250, 250, 0.06); transform: translateY(-2px); }
}

/* ---- 3. Qué incluye: título fijo a la izquierda, 5 puntos a la derecha -- */
.tm-how-includes { display: grid; gap: var(--tm-s-5); }
.tm-how-includes__head { display: grid; gap: var(--tm-s-2); align-content: start; }
.tm-how-includes__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tm-s-4) var(--tm-grid-gap); }
@media (min-width: 1024px) {
  .tm-how-includes { grid-template-columns: 5fr 7fr; gap: var(--tm-s-6); }
  .tm-how-includes__head { position: sticky; top: var(--tm-header-offset); } /* bajo el header flotante */
}
@media (max-width: 767px) { .tm-how-includes__list { grid-template-columns: minmax(0, 1fr); gap: var(--tm-s-4); } }
/* La lista lleva .tm-trust--lit (components.css): filete de luz que se
   dibuja sobre cada punto al aparecer e icono que se ilumina al hover,
   igual que la banda de confianza de la Home. */

/* ---- 4. FAQ: acordeón nativo <details> -------------------------------- */
.tm-how-faq { display: grid; gap: var(--tm-s-5); }
.tm-how-faq__head { display: grid; gap: var(--tm-s-2); align-content: start; }
.tm-how-faq__head p { color: var(--tm-text-muted); font-size: 15px; }
@media (min-width: 1024px) { .tm-how-faq { grid-template-columns: 5fr 7fr; gap: var(--tm-s-6); } }

/* Pulido 2026-11-09: las preguntas van en un panel Noche (mismo lenguaje
   que las especificaciones de la Ficha: borde fino, radio 16, filo de luz
   arriba). La pregunta abierta se separa con un velo de luz muy tenue. */
.tm-faq {
  position: relative;
  padding: 4px 0;
  border: 1px solid var(--tm-line);
  border-radius: var(--tm-radius-card);
  background: linear-gradient(180deg, var(--tm-graphite-2) 0%, var(--tm-night) 60%);
}
.tm-faq::before {
  content: ""; position: absolute; top: -1px; left: 24px; right: 24px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(250, 250, 250, 0), rgba(250, 250, 250, 0.22) 50%, rgba(250, 250, 250, 0));
}
.tm-faq__item {
  margin-inline: var(--tm-s-3);
  border-bottom: 1px solid var(--tm-border);
  transition: border-color var(--tm-dur) var(--tm-ease);
}
.tm-faq__item:last-child { border-bottom: 0; }
.tm-faq__item[open] { border-bottom-color: var(--tm-line-strong); }
.tm-faq__item[open] summary { color: #FFFFFF; }
.tm-faq__item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--tm-s-3);
  padding: var(--tm-s-3) 0;
  font-family: var(--tm-font-display); font-size: 24px; font-weight: 500; line-height: 1.3;
  color: var(--tm-ink);
  transition: color var(--tm-dur) var(--tm-ease);
}
.tm-faq__item summary::-webkit-details-marker { display: none; }
/* Signo +/− dibujado con CSS dentro de un anillo fino (mismo gesto que los
   iconos). Al abrir, el trazo vertical se recoge y el signo gira media
   vuelta (240/400 ms); al pasar el cursor el anillo se ilumina. */
.tm-faq__item summary::after {
  content: ""; flex: none; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(214, 214, 214, 0.32);
  background:
    linear-gradient(var(--tm-champagne), var(--tm-champagne)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--tm-champagne), var(--tm-champagne)) center / 1.5px 12px no-repeat;
  transition: background-size var(--tm-dur) var(--tm-ease), border-color var(--tm-dur) var(--tm-ease), transform var(--tm-dur-slow) var(--tm-ease);
}
.tm-faq__item[open] summary::after { background-size: 12px 1.5px, 1.5px 0; transform: rotate(180deg); border-color: var(--tm-text); }
.tm-faq__item summary:hover { color: var(--tm-champagne-text); }
.tm-faq__item summary:hover::after { border-color: var(--tm-text); }
/* La respuesta aparece suave al abrir (solo con movimiento activo) */
@keyframes tm-unfold { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.tm-motion .tm-faq__item[open] .tm-faq__body { animation: tm-unfold 400ms var(--tm-ease) both; }
.tm-faq__item summary:focus-visible { outline: 2px solid var(--tm-champagne); outline-offset: 4px; border-radius: 4px; }
.tm-faq__body { padding: 0 var(--tm-s-5) var(--tm-s-3) 0; }
.tm-faq__body p { color: var(--tm-text-muted); max-width: 64ch; }
@media (max-width: 599px) {
  .tm-faq__item { margin-inline: var(--tm-s-2); }
  .tm-faq__item summary { font-size: 21px; }
  .tm-faq__body { padding-right: 0; }
}

/* =========================================================================
   AUTENTICIDAD Y CONFIANZA (autenticidad.html)
   Reutiliza .tm-page-head, .tm-how-facts, .tm-trust__item, .tm-grid,
   .tm-how-includes, .tm-steps--4 y .tm-final. Aquí solo: separación de los
   pilares, la línea de recorrido entre pasos, la franja de plazos y el
   enlace "Agenda una visita" dentro del CTA final.
   ========================================================================= */

/* ---- 2. Pilares: misma grilla 4/2/1, ahora como tarjetas ----------------
   Elevación 2026-11-09: cada pilar es una tarjeta Noche con el mismo
   lenguaje que los pasos (filo de luz arriba, degradado Grafito → Noche,
   elevación de 3 px al hover) y el icono "en vitrina": anillo plata con
   un segundo anillo muy tenue, como el estado vacío del Catálogo. */
.tm-trust-pillars { gap: var(--tm-grid-gap); }
.tm-trust-pillars > .tm-trust__item {
  display: grid; position: relative;
  gap: var(--tm-s-2);
  padding: var(--tm-s-5) var(--tm-s-4) var(--tm-s-4);
  border: 1px solid var(--tm-line); border-radius: var(--tm-radius-card);
  background: linear-gradient(180deg, var(--tm-graphite-2) 0%, var(--tm-night) 45%);
  transition: 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);
}
.tm-trust-pillars > .tm-trust__item::before {
  content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px;
  background: linear-gradient(90deg, rgba(250, 250, 250, 0), rgba(250, 250, 250, 0.22) 50%, rgba(250, 250, 250, 0));
}
.tm-trust-pillars .tm-trust__icon {
  position: relative;
  width: 52px; height: 52px; margin: 0 0 var(--tm-s-1) 7px;
  border-color: rgba(214, 214, 214, 0.4); background: rgba(250, 250, 250, 0.03);
  color: var(--tm-text);
  transition: border-color var(--tm-dur) var(--tm-ease), background-color var(--tm-dur) var(--tm-ease), transform var(--tm-dur) var(--tm-ease);
}
.tm-trust-pillars .tm-trust__icon::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px solid rgba(250, 250, 250, 0.06);
}
.tm-trust-pillars .tm-trust__icon svg { width: 22px; height: 22px; }
/* Como tarjetas necesitan ancho: en móvil, una por fila (la grilla base
   deja 2 columnas, pensadas para tarjetas de producto) */
@media (max-width: 599px) {
  .tm-trust-pillars { grid-template-columns: minmax(0, 1fr); }
  .tm-trust-pillars > .tm-trust__item { padding: var(--tm-s-4) var(--tm-s-3) var(--tm-s-3); }
}
@media (hover: hover) {
  .tm-trust-pillars > .tm-trust__item:hover { border-color: var(--tm-line-strong); transform: translateY(var(--tm-lift)); box-shadow: var(--tm-shadow-lift); }
  .tm-trust-pillars > .tm-trust__item:hover .tm-trust__icon { border-color: var(--tm-text); background: rgba(250, 250, 250, 0.06); }
}
/* Durante la entrada escalonada manda la transición de 700 ms del
   movimiento compartido (longhands: no pisan el retraso de cada pilar);
   con .is-done vuelve el hover de 240/400 ms de arriba. */
.tm-motion .tm-trust-pillars:not(.is-done) > .tm-trust__item { transition-property: opacity, transform; transition-duration: 700ms; }

/* ---- 4. Recorrido: línea fina plata entre pasos (solo en 4 columnas) ---
   Ocupa el hueco entre tarjetas a la altura del número y continúa el
   filete del número de cada paso; es un detalle, no un elemento
   (pseudo-elemento). Usa ::after porque ::before es el filo de luz del
   paso. Al aparecer los pasos, cada tramo se dibuja tras su tarjeta. */
@media (min-width: 1200px) {
  .tm-steps--flow .tm-step + .tm-step::after {
    content: "";
    position: absolute;
    top: calc(var(--tm-s-5) + 28px);          /* padding + mitad del número (56 px) */
    left: calc(-1 * var(--tm-grid-gap));
    width: var(--tm-grid-gap); height: 1px;
    background: var(--tm-line-strong);
    transform-origin: left;
  }
  .tm-motion .tm-steps--flow .tm-step + .tm-step::after { transform: scaleX(0); }
  .tm-motion .tm-steps--flow.is-visible .tm-step + .tm-step::after { animation: tm-draw 500ms var(--tm-ease) both; }
  .tm-motion .tm-steps--flow.is-visible > :nth-child(2)::after { animation-delay: 600ms; }
  .tm-motion .tm-steps--flow.is-visible > :nth-child(3)::after { animation-delay: 690ms; }
  .tm-motion .tm-steps--flow.is-visible > :nth-child(4)::after { animation-delay: 780ms; }
}

/* ---- 4b. Plazos de entrega: tres datos en una franja con divisores ----- */
/* Elevación 2026-11-09: filete de luz sobre el borde superior que se
   dibuja al aparecer; los tres plazos entran escalonados. */
.tm-delivery-facts {
  position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--tm-s-6);
  border-top: 1px solid var(--tm-border);
  border-bottom: 1px solid var(--tm-border);
}
.tm-delivery-facts > div { display: grid; gap: 6px; padding: var(--tm-s-3) var(--tm-s-3) var(--tm-s-3) 0; }
.tm-delivery-facts > div + div { padding-left: var(--tm-s-3); border-left: 1px solid var(--tm-border); }
.tm-delivery-facts dt {
  font-size: var(--tm-fs-label); font-weight: 500;
  letter-spacing: var(--tm-tracking-label); text-transform: uppercase;
  color: var(--tm-text-muted);
}
.tm-delivery-facts dd { margin: 0; font-family: var(--tm-font-display); font-size: clamp(22px, 2vw, 24px); line-height: 1.3; color: var(--tm-ink); }
.tm-delivery-facts::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 64px; height: 1px;
  background: var(--tm-text); transform-origin: left;
}
.tm-motion .tm-delivery-facts::before { transform: scaleX(0); }
.tm-motion .tm-delivery-facts.is-visible::before { animation: tm-draw 900ms var(--tm-ease) 300ms both; }
@media (max-width: 767px) {
  .tm-delivery-facts { grid-template-columns: minmax(0, 1fr); }
  .tm-delivery-facts > div { padding: var(--tm-s-2) 0; }
  .tm-delivery-facts > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--tm-border); }
}

/* ---- 1b. Un solo responsable (pulido 2026-11-09) ----------------------
   Panel con foco de luz cenital (como .tm-final) en dos columnas: tesis a
   la izquierda; a la derecha, la cadena de 4 etapas unidas por un filete
   vertical. Cada etapa lleva el sello "Time Master" (punto del logo +
   nombre): la misma casa en todas. Sigue a la cabecera, sin doble aire. */
.tm-sole-section { padding-top: 0; }
.tm-sole {
  position: relative; isolation: isolate; overflow: clip;
  display: grid; gap: var(--tm-s-5);
  padding: var(--tm-s-5);
  border: 1px solid var(--tm-line);
  border-radius: 24px;
  background:
    radial-gradient(50% 90% at 15% 0%, rgba(250, 250, 250, 0.07), rgba(250, 250, 250, 0)),
    linear-gradient(180deg, var(--tm-graphite-2), var(--tm-graphite) 70%);
}
.tm-sole::before {
  content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(250, 250, 250, 0), rgba(250, 250, 250, 0.28) 50%, rgba(250, 250, 250, 0));
}
.tm-sole__intro { display: grid; gap: var(--tm-s-2); align-content: center; }
.tm-sole__intro h2 { font-size: clamp(34px, 4vw, 48px); line-height: 1.05; }
.tm-sole__intro .tm-lead { color: #C9C9CD; }
.tm-sole__chain { display: grid; }
.tm-sole__chain li {
  position: relative;
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: var(--tm-s-2);
  align-items: start;
  padding-block: 18px;
  border-bottom: 1px solid var(--tm-line);
}
.tm-sole__chain li:last-child { border-bottom: 0; }
/* Filete vertical que une las etapas (de punto a punto) */
.tm-sole__chain li:not(:last-child)::after {
  content: ""; position: absolute; left: 11px; top: 36px; bottom: -22px; width: 1px;
  background: linear-gradient(180deg, rgba(250, 250, 250, 0.32), rgba(250, 250, 250, 0.08));
}
.tm-sole__dot {
  width: 24px; height: 24px; margin-top: 4px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(214, 214, 214, 0.4); background: var(--tm-night);
}
.tm-sole__dot::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tm-text); }
.tm-sole__chain h3 { font-size: 24px; line-height: 1.2; }
.tm-sole__chain p { margin-top: 4px; font-size: 15px; color: var(--tm-text-2); }
.tm-sole__tag {
  display: inline-flex; align-items: center; gap: 8px; align-self: center;
  padding: 6px 12px;
  border: 1px solid var(--tm-line-strong); border-radius: var(--tm-radius-pill);
  font-family: var(--tm-font-display); font-size: 16px; line-height: 1; white-space: nowrap;
  color: var(--tm-text);
}
.tm-sole__tag::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--tm-text); }
@media (min-width: 1024px) {
  .tm-sole { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--tm-s-6); padding: var(--tm-s-6) var(--tm-s-5); }
}
@media (max-width: 599px) {
  .tm-sole { padding: var(--tm-s-4) var(--tm-s-3); border-radius: 20px; }
  .tm-sole__chain li { grid-template-columns: 24px minmax(0, 1fr); }
  .tm-sole__tag { grid-column: 2; justify-self: start; margin-top: 2px; }
  .tm-sole__chain li:not(:last-child)::after { bottom: -22px; }
}

/* ---- 5. CTA final: "Agendar visita" (.tm-textlink) y los enlaces
   de texto en FAQ y pilares usan el estilo único .tm-textlink de base.css. */

/* =========================================================================
   AIREACIÓN (pulido final 2026-11-09) · Cómo funciona y Confianza
   Que estas páginas no se sientan más densas que la Home y el Catálogo:
   un punto más de interlineado en los textos de pasos, pilares y puntos,
   más separación entre filas de la lista de dos columnas, y más margen
   interior en el panel "Un solo responsable" y en los plazos. Solo
   espaciado: no cambia estructura, tipografía ni colores. Todo va
   acotado a clases exclusivas de estas dos páginas (la Home no cambia).
   ========================================================================= */
/* Hero: la franja de certezas se separa un poco más del texto */
.tm-how-hero .tm-how-facts { margin-top: var(--tm-s-4); padding-top: var(--tm-s-4); }

/* Textos de lectura dentro de pasos, pilares y puntos: más interlineado */
:is(.tm-steps--4 .tm-step, .tm-trust-pillars > .tm-trust__item, .tm-how-includes__list > .tm-trust__item) p { line-height: 1.75; }
.tm-steps--4 > .tm-step { gap: 20px; }
.tm-how-includes__list > .tm-trust__item { gap: 14px; }

/* Lista de dos columnas ("Qué incluye" / "Claridad antes, durante y
   después"): más aire entre filas y columnas */
.tm-how-includes__list { row-gap: var(--tm-s-5); }
@media (min-width: 768px) { .tm-how-includes__list { column-gap: var(--tm-s-4); } }

/* Pasos: el pie ("El precio final…") algo más separado de las tarjetas */
.tm-steps--4 + .tm-steps__foot { margin-top: var(--tm-s-6); }

/* Panel "Un solo responsable" (Confianza): más margen interior y etapas
   menos apretadas; el filete vertical se ajusta al nuevo espaciado */
@media (min-width: 1024px) { .tm-sole { padding: var(--tm-s-6); } }
.tm-sole__chain li { padding-block: 22px; }
.tm-sole__chain li:not(:last-child)::after { top: 40px; bottom: -26px; }
.tm-sole__chain p { line-height: 1.7; }

/* Plazos de entrega: más aire arriba y abajo de cada dato */
.tm-delivery-facts > div { padding-block: var(--tm-s-4); }
@media (max-width: 767px) { .tm-delivery-facts > div { padding-block: var(--tm-s-3); } }