/* =====================================================================
   MC SYSTEMS · home.css — THE SETPOINT (hero validado F2a) + bloques 2-5
   ===================================================================== */

/* ---------------- ① HERO «THE SETPOINT» ---------------- */
.hero { position:relative; width:100%; height:100vh; min-height:620px; overflow:hidden;
  background:var(--cold-deep); }
.hero-scene { position:absolute; inset:0; }
.hero-scene img { width:100%; height:100%; object-fit:cover; object-position:center; }
.field { position:absolute; top:0; bottom:0; width:80vw; pointer-events:none; opacity:.45; }
.field img { width:100%; height:100%; object-fit:fill; }
.heat-field { left:0; }
.cold-field { right:0; }
.hero-ghost { position:absolute; top:14%; right:11%; z-index:4; font-family:var(--fd);
  font-weight:700; font-size:min(16vw,300px); line-height:1; color:transparent;
  -webkit-text-stroke:2px rgba(245,247,251,.9); opacity:.14; letter-spacing:.02em;
  pointer-events:none; }
.hero-eyebrow { position:absolute; top:19.4%; left:6.2vw; z-index:8; font-weight:600;
  font-size:13px; letter-spacing:.14em; color:var(--paper); text-transform:uppercase; }
.hero-eyebrow .d { color:#FF6B71; }
.hero-h1 { position:absolute; top:24.5%; left:6vw; z-index:5; font-family:var(--fd);
  font-weight:700; font-size:clamp(3.4rem,9.6vw,9.8rem); line-height:.92;
  letter-spacing:.01em; text-transform:uppercase; color:var(--paper);
  /* 0720-a #4: sombra de contacto + halo suave para despegar del cielo claro
     Y de la parte blanca del techo. Alcance <=16px (cabe en la caja .hl
     overflow:hidden, mismo patron probado en .band h2). No toca el split de
     color: CLIMA blanco / BALANCEADO gradiente rojo->azul lo hereda la sombra. */
  text-shadow:
    0 1px 2px rgba(16,20,31,.36),
    0 2px 10px rgba(16,20,31,.26),
    0 0 22px rgba(16,20,31,.18); }
.hero-h1 .l2-w { display:inline-block;
  background:linear-gradient(90deg, var(--heat) 0, var(--heat) var(--wstop), var(--cold) var(--wstop), var(--cold) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
/* ---------------- REGISTRO 1:1 DEL CUTOUT SOBRE SU GEMELA (R2) ----------------
   hero-scene.webp YA TRAE la unidad horneada (sombra y perspectiva reales); el
   cutout .hero-rtu debe quedar CLAVADO encima para que el dolly mueva escena y
   cutout como UN SOLO objeto y el traveler despegue desde el sitio exacto.
   CAUSA DEL DESCUADRE (corregida aqui): el cutout se posicionaba en unidades de
   VIEWPORT (vw/vh) mientras la escena se dibuja con object-fit:cover. Son dos
   sistemas de coordenadas distintos que solo coinciden en UNA relacion de
   aspecto (la del tuneo); en cualquier otra ventana el cutout se despegaba de su
   gemela = "descuadrado" + doble borde.
   SOLUCION: .hero-stage reproduce en CSS puro la MISMA matematica de cover con
   unidades de contenedor (cq*), y el cutout se posiciona en % DE LA IMAGEN
   DIBUJADA. Exacto en cualquier viewport, sin JS y a prueba de resize.
   Constantes medidas por template-match a nivel de pixel (err medio 2/255):
     desktop hero-scene.webp    1600x893  -> x=681 y=391 w=611
     movil   hero-scene-sm.webp  780x1560 -> x=188 y=683 w=1069
   (la escena -sm es OTRO encuadre: unidad mas grande y cortada a la derecha) */
.hero-stage { position:absolute; inset:0; z-index:6; pointer-events:none; }
.hero-rtu { position:absolute; pointer-events:none; }
.hero-rtu img { width:100%; max-width:none; height:auto; }

/* legado sin unidades de contenedor: coordenadas de viewport (lo de siempre).
   Va en su propio @supports NEGADO para que jamas pise al calc moderno: las dos
   ramas son excluyentes y cada breakpoint solo cambia variables, no reglas. */
@supports not (container-type:size) {
  .hero-rtu { left:41.55vw; top:43.68vh; width:42.85vw; }
}
@supports (container-type:size) {
  .hero-stage { container-type:size;
    --iw:1600; --ih:893;                          /* nativo de la escena en uso */
    --rx:.425625; --ry:.437850; --rw:.381875;     /* gemela, en fraccion de la escena */
    /* geometria exacta de object-fit:cover sobre la caja del hero */
    --cw:max(100cqw, calc(100cqh * var(--iw) / var(--ih)));
    --ch:max(100cqh, calc(100cqw * var(--ih) / var(--iw)));
    --cx:calc((100cqw - var(--cw)) / 2);
    --cy:calc((100cqh - var(--ch)) / 2); }
  .hero-rtu {
    left:calc(var(--cx) + var(--cw) * var(--rx));
    top:calc(var(--cy) + var(--ch) * var(--ry));
    width:calc(var(--cw) * var(--rw)); }
}
.hero-streams { position:absolute; inset:0; z-index:7; pointer-events:none; }
.hero-readout { position:absolute; top:12%; right:3.4vw; z-index:8;
  background:rgba(245,247,251,.86); border:1px solid rgba(16,20,31,.10);
  border-radius:14px; padding:10px 18px; font-family:var(--fd); font-weight:700;
  font-variant-numeric:tabular-nums; color:var(--ink); font-size:30px;
  box-shadow:0 10px 30px rgba(16,20,31,.18); }
.hero-readout small { display:block; font-family:var(--fu); font-weight:600; font-size:9px;
  letter-spacing:.12em; color:var(--cold-deep); text-transform:uppercase; }
.hero-ctas { position:absolute; top:62%; left:6.2vw; z-index:8; display:flex; gap:14px; }
.hero-chips { position:absolute; bottom:7%; left:6.2vw; z-index:8; display:flex; gap:16px; }
.hero-cue { position:absolute; bottom:4.5%; left:50%; transform:translateX(-50%); z-index:8;
  width:26px; height:42px; border:1.5px solid rgba(245,247,251,.7); border-radius:999px; }
.hero-cue i { position:absolute; top:8px; left:50%; margin-left:-1.5px; width:3px; height:8px;
  border-radius:3px; background:var(--paper); }

/* ---------------- traveler del journey (doc-space, 0702-d) ----------------
   oculto de nacimiento: SOLO el journey (>=901px + motion) lo enciende.
   0720-a #3 (doble borde): en reposo el traveler queda visibility:hidden
   (opacity:0) — su antiguo .001 dejaba un eco fantasma sobre el hero-rtu.
   El JS lo enciende/apaga con autoAlpha (visibility+opacity) SOLO en vuelo.
   La textura es la MISMA de .hero-rtu (ya subida a GPU), sin hitch de upload. */
.travel-rtu { position:absolute; top:0; left:0; z-index:30; pointer-events:none;
  will-change:transform; opacity:0; visibility:hidden; }

/* ---------------- ② MANIFIESTO + DOCK (C5) ---------------- */
.manifest { position:relative; background:var(--paper-2); overflow:clip;
  padding:clamp(4rem,8vw,8rem) 0; min-height:92vh; }
/* patron filtro-plisado 5% (CODIGO, dieta 4.G) — tile SVG diminuto:
   rasterizar un bitmap repetido es mucho mas barato que computar el
   gradiente sobre toda la seccion (rueda fria 0714-c) */
.manifest::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.05;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M-2 20 20 -2M-2 38 38 -2' stroke='%232C3199' stroke-width='1'/%3E%3C/svg%3E") repeat; }
.manifest-grid { position:relative; width:min(92vw,1360px); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);
  gap:clamp(2rem,4vw,5rem); align-items:center; }
.manifest-copy h2 { font-family:var(--fd); font-weight:700; text-transform:uppercase;
  font-size:clamp(2rem,5.6vw,4.6rem); line-height:1.02; letter-spacing:.005em;
  color:var(--ink); margin:18px 0 22px; }
.manifest-copy h2 em { font-style:normal; color:var(--heat); }
.manifest-copy .kicker { color:var(--cold-deep); }
.manifest-copy p { font-size:15.5px; line-height:1.75; max-width:52ch; color:#2A3040; }
.manifest-copy .btn { margin-top:26px; }
.manifest-ghost { position:absolute; left:-1vw; bottom:-2vw; font-family:var(--fd);
  font-weight:700; font-size:min(14vw,220px); line-height:1; color:transparent;
  -webkit-text-stroke:1.5px rgba(44,49,153,.14); pointer-events:none; }
.dock { position:relative; }
.dock-panel { position:relative; background:var(--paper); border:1px solid var(--hairline);
  border-radius:22px; padding:clamp(1.4rem,2.4vw,2.4rem);
  box-shadow:0 24px 60px rgba(16,20,31,.08); }
.dock-panel::after { content:""; position:absolute; left:12%; right:12%; bottom:10px;
  height:22px; border-radius:50%; background:radial-gradient(ellipse at center, rgba(16,20,31,.22), transparent 70%); }
.dock-slot { position:relative; z-index:2; }
.dock-slot img { width:100%; height:auto; }
.dock-sticker { position:absolute; top:-14px; left:-16px; z-index:3; transform:rotate(-4deg);
  background:var(--cold); color:var(--paper); font-family:var(--fd); font-weight:600;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; padding:8px 14px;
  border-radius:8px; box-shadow:0 10px 24px rgba(31,35,115,.35); }
.dock-photo { position:absolute; right:-7%; bottom:-13%; z-index:3; width:min(15vw,205px);
  transform:rotate(3deg); background:var(--paper); padding:8px 8px 12px;
  border:1px solid var(--hairline); border-radius:12px;
  box-shadow:0 18px 40px rgba(16,20,31,.18); }
.dock-photo img { border-radius:6px; }
.dock-photo figcaption { font-size:10.5px; font-weight:600; letter-spacing:.06em;
  color:var(--cold-deep); text-transform:uppercase; margin-top:7px; text-align:center; }

/* ---------------- ③ FOTO FULL-BLEED + VIDRIO (C4) ---------------- */
.band { position:relative; height:66vh; min-height:440px; overflow:hidden; background:var(--ink); }
.band-photo { position:absolute; inset:-12% 0; }
.band-photo img { width:100%; height:100%; object-fit:cover; object-position:center 38%; }
.band-scrim { position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(16,20,31,.78) 0%, rgba(16,20,31,.55) 46%, rgba(16,20,31,.18) 100%); }
.band-inner { position:relative; z-index:2; width:min(92vw,1360px); margin:0 auto;
  height:100%; display:flex; flex-direction:column; justify-content:center; gap:26px; }
.band h2 { font-family:var(--fd); font-weight:700; text-transform:uppercase;
  font-size:clamp(2rem,5.5vw,4.4rem); line-height:1.04; color:var(--paper); max-width:16ch; }
.band h2 em { font-style:normal; color:#FF7B82; }
.band .chip { align-self:flex-start; background:rgba(245,247,251,.14);
  border-color:rgba(245,247,251,.35); color:var(--paper); }
.band-rail { position:absolute; right:4vw; top:50%; transform:translateY(-50%); z-index:2;
  display:flex; flex-direction:column; gap:10px; }
.band-rail i { width:6px; height:6px; border-radius:50%; background:rgba(245,247,251,.45); }
.band-rail i.on { background:var(--heat); }

/* ---------------- ④·5 PACTO DE SERVICIO (.pact · ley 0720-a #5) ----------------
   HERMANA de ② .manifest, no de ③ .band: NADA de foto a sangre con texto
   encima. Mismo editorial partido (columna de copy + dock con panel, sticker
   y foto), REFLEJADO: dock a la IZQUIERDA, copy a la DERECHA.
   Dualidad frio/calor invertida respecto a manifest: alli el kicker es FRIO y
   la keyword CALOR; aqui el kicker es CALOR y la keyword FRIO. Superficie:
   mismo papel frio, un grado mas profundo, para separarse de .anatomy. */
.pact { position:relative; overflow:clip; padding:clamp(4rem,8vw,8rem) 0;
  background:linear-gradient(180deg, var(--paper-2) 0%, #DFE7F4 100%);
  border-top:1px solid var(--hairline); }
/* eco del tile plisado de .manifest, espejado (contra-diagonal) y en tinte
   CALOR: misma familia de textura, distinto sentido termico */
.pact::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.05;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M20 20 -2 -2M20 38 -18 -2' stroke='%23D6010A' stroke-width='1'/%3E%3C/svg%3E") repeat; }
.pact-grid { position:relative; width:min(92vw,1360px); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.05fr);
  gap:clamp(2rem,4vw,5rem); align-items:center; }
/* DOM = copy primero (lectura y apilado movil naturales); la INVERSION visual
   se hace con colocacion de grid, no con order ni con transform */
.pact-copy { grid-column:2; grid-row:1; }
.pact .dock { grid-column:1; grid-row:1; }
.pact-copy h2 { font-family:var(--fd); font-weight:700; text-transform:uppercase;
  font-size:clamp(2rem,5.6vw,4.6rem); line-height:1.02; letter-spacing:.005em;
  color:var(--ink); margin:18px 0 22px; }
.pact-copy h2 em { font-style:normal; color:var(--cold); }
.pact-copy .kicker { color:var(--heat-deep); }
.pact-copy .kicker .d { color:var(--cold); }
.pact-copy p { font-size:15.5px; line-height:1.75; max-width:52ch; color:#2A3040; }
.pact-copy .btn { margin-top:26px; }
.pact-facts { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.pact-facts .chip { background:rgba(245,247,251,.9); }
.pact-facts .chip-link { text-decoration:none; color:var(--cold-deep);
  font-variant-numeric:tabular-nums; }
/* espejo EXACTO del ghost de manifest (alli abajo-IZQUIERDA): abajo-DERECHA y
   sangrando por el BORDE INFERIOR. Sangrar por arriba lo dejaba cortado a media
   altura y parecia un error, no una decision. */
.pact-ghost { position:absolute; right:-1vw; bottom:-2vw; font-family:var(--fd);
  font-weight:700; font-size:min(14vw,220px); line-height:1; color:transparent;
  -webkit-text-stroke:1.5px rgba(214,1,10,.11); pointer-events:none; }
/* mismo panel/sticker/foto que el dock de manifest, espejado y en calor */
.pact .dock-slot img { border-radius:14px; }
.pact .dock-sticker { left:auto; right:-16px; transform:rotate(4deg);
  background:var(--heat); box-shadow:0 10px 24px rgba(168,0,8,.32); }
.pact .dock-photo { right:auto; left:-7%; transform:rotate(-3deg); }
.pact .dock-photo figcaption { color:var(--heat-deep); }

/* ---------------- ④ ANATOMIA ANOTADA (C5) ---------------- */
.anatomy { position:relative; background:var(--paper); overflow:clip;
  padding:clamp(4rem,7vw,7rem) 0 clamp(3rem,5vw,5rem); }
/* regla de ticks de termometro, borde izquierdo (P7) */
.anatomy::before { content:""; position:absolute; left:0; top:6%; bottom:6%; width:14px;
  pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(to bottom, var(--cold) 0 2px, transparent 2px 26px);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); }
.anatomy-head { width:min(92vw,1360px); margin:0 auto clamp(2rem,3.4vw,3.4rem);
  text-align:center; }
.anatomy-head .kicker { color:var(--cold-deep); }
.anatomy-head h2 { font-family:var(--fd); font-weight:700; text-transform:uppercase;
  font-size:clamp(2rem,5vw,4.2rem); line-height:1.02; margin:14px 0 10px; }
.anatomy-head h2 em { font-style:normal; color:var(--heat); }
.anatomy-head p { font-size:15px; color:#3A4152; }
.anatomy-stage { position:relative; width:min(94vw,1420px); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(1rem,2vw,2rem); align-items:center; min-height:56vh; }
.anatomy-ghost { position:absolute; right:2%; top:-4%; font-family:var(--fd); font-weight:700;
  font-size:min(12vw,190px); color:transparent; -webkit-text-stroke:1.5px rgba(214,1,10,.12);
  pointer-events:none; }
.anatomy-obj { position:relative; z-index:2; }
.anatomy-obj img { width:100%; height:auto; }
.anatomy-lines { position:absolute; inset:0; z-index:1; pointer-events:none; }
.anatomy-lines path { fill:none; stroke-width:1.5; }
.anatomy-lines .ln-cold { stroke:var(--cold); }
.anatomy-lines .ln-heat { stroke:var(--heat); }
.anatomy-lines rect { stroke:none; }
.a-col { display:flex; flex-direction:column; gap:clamp(1rem,2vh,1.8rem); z-index:3; }
.callout { display:flex; gap:12px; align-items:flex-start; background:var(--paper);
  border:1px solid var(--hairline); border-radius:14px; padding:13px 16px;
  box-shadow:0 8px 22px rgba(16,20,31,.06); max-width:300px; }
.a-col.right .callout { align-self:flex-end; }
.callout svg { flex:0 0 26px; width:26px; height:26px; stroke-width:1.7; fill:none;
  stroke:var(--cold-deep); margin-top:2px; }
.callout.hot svg { stroke:var(--heat-deep); }
.callout h3 { font-family:var(--fd); font-weight:600; font-size:14.5px;
  text-transform:uppercase; letter-spacing:.05em; }
.callout p { font-size:12.5px; line-height:1.5; color:#3A4152; margin-top:3px; }
/* indice de servicios (SXO — enlaces profundos) */
.svc-strip { width:min(92vw,1360px); margin:clamp(2.6rem,4.5vw,4.5rem) auto 0;
  border-top:1px solid var(--hairline); padding-top:clamp(1.6rem,2.6vw,2.6rem);
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.svc-strip .lbl { font-family:var(--fd); font-weight:600; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--cold-deep); margin-right:8px; }
.svc-pill { font-size:13px; font-weight:500; color:var(--ink); text-decoration:none;
  border:1px solid var(--hairline); border-radius:999px; padding:9px 16px;
  background:var(--paper-2); }
.svc-more { font-size:13px; font-weight:600; color:var(--heat-deep); text-decoration:none;
  margin-left:auto; }

/* ---------------- ⑤ CTA «SERVICE CALL» (C2) ---------------- */
.cta-band { position:relative; height:64vh; min-height:460px; overflow:hidden; background:var(--ink-2); }
.cta-photo { position:absolute; inset:-10% 0; }
.cta-photo img { width:100%; height:100%; object-fit:cover; object-position:center 62%; }
.cta-scrim { position:absolute; inset:0; background:rgba(14,18,32,.8); }
.cta-inner { position:relative; z-index:3; width:min(92vw,1200px); margin:0 auto; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:20px; }
.cta-inner .kicker { color:var(--steel); }
.cta-inner .kicker .d { color:#FF6B71; }
.cta-inner h2 { font-family:var(--fd); font-weight:700; text-transform:uppercase;
  font-size:clamp(2.1rem,4.6vw,3.9rem); line-height:1.03; color:var(--paper); }
.cta-inner h2 em { font-style:normal; color:var(--ice); }
.cta-inner p { font-size:15px; color:var(--steel); max-width:52ch; }
.cta-btns { display:flex; gap:14px; flex-wrap:nowrap; }
.cta-eco { position:absolute; right:3vw; bottom:-4%; z-index:2; width:min(22vw,300px);
  opacity:.9; pointer-events:none; }

/* H1 espanol: "BALANCEADO" (10 glifos vs 8) — tamano propio para conservar
   la mordida ~10% del cowl sobre la ultima letra (receta F2a) */
.hero-h1.is-es { font-size:clamp(3rem,7.9vw,8.1rem); }

/* ---------------- MQ TABLET/MOBILE (ley l) ---------------- */
@media (max-width:900px) {
  .manifest-grid { grid-template-columns:1fr; }
  .dock { margin-top:1.4rem; }
  .dock-photo { right:2%; bottom:-9%; width:min(30vw,190px); }
  /* .pact apilado: se sueltan las colocaciones de grid y el DOM manda
     (copy → dock), igual que manifest en movil */
  .pact-grid { grid-template-columns:1fr; }
  .pact-copy, .pact .dock { grid-column:auto; grid-row:auto; }
  .pact .dock-photo { left:2%; right:auto; bottom:-9%; width:min(30vw,190px); }
  .anatomy-stage { grid-template-columns:1fr 1fr; min-height:0; }
  .anatomy-obj { grid-column:1 / -1; order:-1; width:min(78vw,520px); margin:0 auto 1rem; }
  .anatomy-lines { display:none; }
  .a-col.right .callout { align-self:flex-start; }
  .callout { max-width:none; }
}
@media (max-width:760px) {
  .hero { min-height:100svh; }
  .hero-eyebrow { top:13.6%; left:6vw; font-size:10.5px; width:62vw; line-height:1.7; }
  .hero-h1 { top:18%; left:6vw; font-size:clamp(2.6rem,13vw,4.4rem); }
  .hero-h1.is-es { font-size:clamp(2.2rem,10.8vw,3.7rem); }
  .hero-ghost { top:33%; right:4vw; font-size:38vw; -webkit-text-stroke:1.5px rgba(245,247,251,.9); }
  @supports not (container-type:size) {
    .hero-rtu { left:21.8vw; top:43.6vh; width:148vw; }
  }
  /* la escena movil es OTRO encuadre (780x1560): su gemela vive en otro sitio.
     Solo se cambian VARIABLES — el calc de .hero-rtu es unico y vive arriba. */
  @supports (container-type:size) {
    .hero-stage { --iw:780; --ih:1560; --rx:.241026; --ry:.437821; --rw:1.370513; }
  }
  .hero-readout { top:10.5%; right:4vw; font-size:22px; padding:8px 14px; }
  .hero-ctas { top:40%; left:6vw; flex-direction:column; width:60vw; }
  .hero-chips { flex-direction:column; gap:8px; bottom:5%; left:6vw; }
  .hero-chips .chip:nth-child(3) { display:none; }
  .hero-cue { display:none; }
  .band { height:auto; min-height:0; padding:clamp(4rem,14vw,6rem) 0; }
  .band-inner { padding:0; }
  .band h2 { text-shadow:0 1px 2px rgba(16,20,31,.45), 0 2px 10px rgba(16,20,31,.30); }
  .band-rail { display:none; }
  /* .pact en movil: el ghost baja de escala para no invadir el titular y la
     foto colgante se mete dentro del ancho (cero overflow-x) */
  .pact-ghost { font-size:26vw; top:auto; bottom:-1vw; right:2vw; }
  .pact-copy p { max-width:none; }
  .pact .dock-photo { left:3%; bottom:-7%; width:min(34vw,170px); }
  .anatomy-stage { grid-template-columns:1fr; }
  .svc-more { margin-left:0; }
  .cta-band { height:auto; min-height:0; padding:clamp(4rem,14vw,6rem) 0; }
  .cta-inner { padding:0; }
  .cta-btns { flex-direction:column; width:min(78vw,320px); }
  .cta-eco { display:none; }
}
@media (max-width:560px) {
  .cta-btns { flex-direction:column; }
}