/* JANUS_TYPO_OVERLAY_V20 | Tipografia oficial y superposicion editorial. */
@font-face {
  font-family: "Source Sans 3";
  src: url("./fonts/janus/SourceSans3-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("./fonts/janus/SourceSerif4-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display SC";
  src: url("./fonts/janus/PlayfairDisplaySC-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  --janus-body-family: "Source Sans 3", Arial, sans-serif;
  --janus-display-family: "Source Serif 4", Georgia, serif;
  --janus-subheading-family: "Playfair Display SC", Georgia, serif;
  --janus-overlay-travel: 100svh;
}
/* Jerarquia de familia / peso. Ninguna de estas reglas reconstruye los SVG. */
body, input, select, button, textarea { font-family: var(--janus-body-family); font-synthesis: none; font-kerning: normal; }
body { font-weight: 400; }
.hero .hero-subcopy, .janus-light-section p, .janus-light-section li,
.janus-hero-card p, .intro .lead, .lead, .pain-card p, .phase-panel p,
.promise p, .contact-step p, .faq-list details p, .form-note,
.method-copy, .micro, footer { font-family: var(--janus-body-family); font-weight: 400; letter-spacing: 0; }
.hero .janus-scene-layer h1, .hero .janus-scene-measure-item h1,
.hero #hero-title > h1, .intro h1, .final-banner h2,
.janus-light-section h2, .janus-contact-anchor h3,
.janus-light-section h3, .janus-hero-card h3,
.pain-card h3, .phase-panel h3, .example-card h3, .promise h3,
.contact-step h3, .h2, .serif,
.editorial-panel blockquote, .panel-message blockquote {
  font-family: var(--janus-display-family);
  font-weight: 600;
  letter-spacing: 0;
  font-kerning: normal;
}
.janus-subheading, .editorial-subheading, .closing-thought {
  font-family: var(--janus-subheading-family);
  font-weight: 400;
  letter-spacing: 0;
}
.main-nav, .main-nav a, .contact-button, .primary-button,
.janus-secondary-cta, .janus-rail-button, .janus-rail-button em,
.janus-rail-button strong, .janus-section-kicker, .janus-card-index,
.janus-card-kicker, .method-tab, .menu, .menu a,
.header-cta, .primary-cta, .quiet-link, .faq-list summary,
.form-card label, .eyebrow, .panel-kicker {
  font-family: var(--janus-body-family);
  font-weight: 600;
  letter-spacing: 0;
}
/* Descriptor funcional bajo el activo vectorial: mismo ancho, cuerpo regular. */
.hero .brand .janus-brand-caption {
  font-family: var(--janus-body-family);
  font-weight: 400;
  font-kerning: normal;
  letter-spacing: 0 !important; /* Desactiva el tracking calculado por la version antigua. */
}
/* Escala editorial aumentada: tres saltos fijos, sin interpolacion de viewport. */
@media (min-width: 1024px) {
  .hero .janus-scene-layer h1,
  .hero .janus-scene-measure-item h1,
  .hero #hero-title > h1 { font-size: 88px; line-height: 1.025; }
  .intro h1 { font-size: 64px; line-height: 1.08; }
  .janus-light-section h2, .h2, .final-banner h2 { font-size: 52px; line-height: 1.12; }
  .janus-light-section h3, .janus-contact-anchor h3,
  .janus-hero-card h3, .pain-card h3, .phase-panel h3,
  .contact-step h3 { font-size: 32px; line-height: 1.2; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero .janus-scene-layer h1,
  .hero .janus-scene-measure-item h1,
  .hero #hero-title > h1 { font-size: 62px; line-height: 1.04; }
  .intro h1 { font-size: 50px; line-height: 1.08; }
  .janus-light-section h2, .h2, .final-banner h2 { font-size: 42px; line-height: 1.12; }
  .janus-light-section h3, .janus-contact-anchor h3,
  .janus-hero-card h3, .pain-card h3, .phase-panel h3,
  .contact-step h3 { font-size: 28px; line-height: 1.2; }
}
@media (max-width: 767px) {
  .hero .janus-scene-layer h1,
  .hero .janus-scene-measure-item h1,
  .hero #hero-title > h1 { font-size: 42px; line-height: 1.075; }
  .intro h1 { font-size: 40px; line-height: 1.1; }
  .janus-light-section h2, .h2, .final-banner h2 { font-size: 34px; line-height: 1.15; }
  .janus-light-section h3, .janus-contact-anchor h3,
  .janus-hero-card h3, .pain-card h3, .phase-panel h3,
  .contact-step h3 { font-size: 25px; line-height: 1.2; }
}
@media (max-width: 420px) and (max-height: 740px) {
  /* Evita que titulares largos invadan el selector y los CTA en moviles bajos. */
  .hero .janus-scene-layer h1,
  .hero .janus-scene-measure-item h1,
  .hero #hero-title > h1 { font-size: 34px; line-height: 1.08; }
}
/* Las cards del hero mantienen su jerarquia: su medida no es la de un H3 de seccion. */
.hero .janus-hero-card h3 { font-size: 22px; line-height: 1.17; }
@media (max-width: 767px) { .hero .janus-hero-card h3 { font-size: 14px; line-height: 1.12; } }
@media (max-width: 420px) { .hero .janus-hero-card h3 { font-size: 13px; } }
/* El titulo que se anima mediante Motion y su medidor invisible deben coincidir. */
.hero .janus-scene-measure-item h1, .hero .janus-scene-layer h1 { max-width: calc(100% - 32px); }
/* Efecto: el negro se queda inmovil mientras el papel blanco sube por encima.
   La altura adicional y data-end-hold se incrementan conjuntamente:
   la duracion original de la secuencia WebP no cambia. */
.hero { height: calc(var(--hero-scroll-length) + var(--hero-end-hold) + var(--janus-overlay-travel)); }
.hero .hero-stage { position: sticky; top: 0; height: 100svh; }
#servicios.janus-light-section {
  position: relative;
  z-index: 6;
  margin-top: calc(-1 * var(--janus-overlay-travel));
  background: #fff;
  box-shadow: 0 -16px 44px rgba(0,0,0,.075);
}
.janus-light-section { position: relative; z-index: 6; background: #fff; }
/* La barra fija sigue por encima de las secciones blancas, y el observador
   existente cambia a contraste oscuro cuando llega el panel blanco. */
.hero .topbar { z-index: 20; }
@media (prefers-reduced-motion: reduce) {
  #servicios.janus-light-section { box-shadow: none; }
}