@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&display=swap');

/*
 * TERREY Industry — SISTEMA TIPOGRÁFICO GLOBAL
 * Única fuente de tamaños para TODAS las páginas de contenido.
 * Se carga después de los estilos históricos. Para cambios futuros, modificar aquí.
 * Las seis funciones son: display, section, subheading, body, supporting, ui.
 */
:root {
  --type-display: clamp(3rem, 5.8vw, 5.375rem);
  --type-section: clamp(2.25rem, 3.4vw, 3.125rem);
  --type-subheading: clamp(1.5rem, 2.4vw, 2.125rem);
  --type-body: 1.125rem;
  --type-supporting: 0.9375rem;
  --type-ui: 1rem;
  --type-leading-display: 1.08;
  --type-leading-heading: 1.18;
  --type-leading-body: 1.65;
  --type-leading-supporting: 1.5;
}
@media (max-width: 760px) {
  :root {
    --type-display: clamp(2.75rem, 10vw, 4.25rem);
    --type-section: clamp(2.125rem, 7.6vw, 2.75rem);
    --type-subheading: clamp(1.5rem, 5.7vw, 2rem);
    --type-body: 1.0625rem;
  }
}

/* Classes for future sections. Avoid new one-off font-size values in page CSS. */
.type-display {font-size: var(--type-display);line-height: var(--type-leading-display)}
.type-section {font-size: var(--type-section);line-height: var(--type-leading-heading)}
.type-subheading {font-size: var(--type-subheading);line-height: var(--type-leading-heading)}
.type-body {font-size: var(--type-body);line-height: var(--type-leading-body)}
.type-supporting {font-size: var(--type-supporting);line-height: var(--type-leading-supporting)}
.type-ui {font-size: var(--type-ui);line-height: 1.45}

/* Defaults: all page text is comfortably readable, including privacy. */
body {font-size: var(--type-body);line-height: var(--type-leading-body)}
body main p:not(.eyebrow) {font-size: var(--type-body);line-height: var(--type-leading-body)}
body main li,
body main dd {font-size: var(--type-body);line-height: var(--type-leading-body)}

/* Display role: only the lead headline for a page or project. */
body main :is(
  .hero h1,
  .brand-hero h1,
  .product-hero h1,
  .ramp-review .product-hero h1,
  .projects-hero h1,
  .project-detail-copy h1,
  .legal h1
) {
  font-size: var(--type-display);
  line-height: var(--type-leading-display);
  letter-spacing: -0.025em;
}

/* Section role: equal hierarchy regardless of landing, project, or service. */
body main :is(
  h2,
  .product-section-title h2,
  .product-faq .product-section-title h2,
  .ramp-heading h2,
  .ramp-application h2,
  .ramp-contact h2,
  .application-section h2,
  .product-closing h2,
  .project-cta h2,
  .project-story-body h2,
  .project-result h2
) {
  font-size: var(--type-section);
  line-height: var(--type-leading-heading);
  letter-spacing: -0.018em;
}

/* Subheading role: cards, process stages, project and product subsections. */
body main :is(
  h3, h4,
  .card h3,
  .need-card h3,
  .benefit-list h3,
  .steps h3,
  .project-copy h3,
  .project-story-grid h3,
  .evaluation-grid h3,
  .application-list h3,
  .product-process h3,
  .ramp-cards h3,
  .ramp-project h3,
  .ramp-application dt
) {
  font-size: var(--type-subheading);
  line-height: var(--type-leading-heading);
  letter-spacing: -0.01em;
}

/* Body role: override legacy 12–16px paragraphs from separate landing CSS. */
body main :is(
  .hero-copy > p:not(.eyebrow),
  .section-head > p,
  .card p,
  .benefits > div > p:not(.eyebrow),
  .benefit-list p,
  .steps p,
  .brand-feature p,
  .need-card p,
  .urgent-strip p,
  .project-copy p,
  .project-story-body p:not(.eyebrow),
  .project-story-grid p,
  .project-lead,
  .project-specs li,
  .contact > div > p:not(.eyebrow),
  .ramp-cards p,
  .ramp-application dd,
  .ramp-faq details p,
  .product-lead,
  .product-intro-copy p,
  .evaluation-grid p,
  .application-list p,
  .proof-grid p,
  .product-process p,
  .product-faq details p,
  .product-section > p,
  .product-hero-copy > p:not(.eyebrow),
  .faq details p,
  .legal p,
  .legal li,
  .lf-contact-intro > p:not(.eyebrow),
  .lf-widget .lf-help
) {
  font-size: var(--type-body);
  line-height: var(--type-leading-body);
}
/* Historical !important in the project case-study must respect the shared scale. */
body main .project-story-grid p {
  font-size: var(--type-body) !important;
}

/* Supporting role: captions, overlines, metadata and technical notes. */
body :is(
  .eyebrow,
  .review,
  .ribbon,
  .scroll-cue,
  .hero-caption,
  .hero-image > span,
  .hero-services span,
  .cardnum,
  .note,
  .visual-note,
  .brand-note,
  .brand-feature > div:last-child > span,
  .project-visual > span,
  .project-meta,
  .projects-foot,
  .projects-foot p,
  .project-back,
  .project-link,
  .project-facts span,
  .project-facts strong,
  .project-source span,
  .project-source > div > p:not(.eyebrow),
  .project-story > aside span,
  .next-project span,
  .case-copy > a,
  .case-study figcaption,
  .product-hero .breadcrumb,
  .product-hero-media figcaption,
  .contact-line span,
  .contact-line a,
  .contact-line strong,
  .decision-grid small,
  .application-list span,
  .legal-note,
  .ramp-small,
  .ramp-secondary,
  .ramp-contact #ramp-status,
  .lf-optional,
  .lf-widget .lf-eyebrow,
  .lf-widget .lf-choice-help,
  .lf-widget .lf-progress small,
  .lf-widget .lf-form label small,
  .lf-widget .lf-contact-requirement,
  .lf-widget .lf-contact-hint,
  .lf-widget .lf-review,
  .lf-widget .lf-status,
  .lf-widget .lf-form .lf-check,
  .lf-widget .lf-form .lf-contact-method .lf-method-copy small,
  .lf-widget .lf-form input[type="file"]
) {
  font-size: var(--type-supporting);
  line-height: var(--type-leading-supporting);
}
body figcaption {font-size:var(--type-supporting);line-height:var(--type-leading-supporting)}

/* Interface role: navigation, buttons, links used as actions, form labels. */
body header :is(nav, nav a, .menu),
body :is(
  .btn, .btn.small, .textlink, .ramp-text-link, .direct-whatsapp,
  .project-link, .project-source > div > a,
  .case-copy > a, .project-back, .project-cta .btn,
  .product-closing .btn, .product-hero .btn, .wa,
  .lf-widget .lf-back, .lf-widget .lf-next, .lf-widget .lf-submit,
  .lf-widget .lf-skip
) {
  font-size: var(--type-ui);
  line-height: 1.45;
}
body main :is(
  .decision-grid strong,
  .product-faq summary,
  .ramp-faq summary,
  .lf-widget .lf-form label,
  .lf-widget .lf-contact-preferences legend,
  .lf-widget .lf-form .lf-contact-method .lf-method-copy b,
  .lf-widget .lf-summary strong
) {
  font-size: var(--type-ui);
  line-height: 1.5;
}
body main :is(
  .lf-widget .lf-choice-title,
  .lf-widget .lf-form input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
  .lf-widget .lf-form textarea,
  .lf-widget .lf-form input::placeholder,
  .lf-widget .lf-form textarea::placeholder
) {
  font-size: var(--type-body);
  line-height: 1.5;
}
/* Maintain visual hierarchy in the unified lead flow. */
body main .lf-widget .lf-card h3 {font-size:var(--type-subheading)}
body main .lf-widget .lf-card h4 {font-size:var(--type-subheading)}
body main .lf-widget .lf-summary {font-size:var(--type-supporting);line-height:1.55}

/* Footer is readable, not miniature. */
body footer,
body footer :is(p, a, span, .footbottom) {
  font-size: var(--type-supporting);
  line-height: var(--type-leading-supporting);
}
body footer h3 {font-size:var(--type-ui);line-height:1.4}
body footer .brand img {max-width:100%}

/* Preserve space for enlarged labels without modifying approved photography. */
body main :is(.card p, .project-copy p, .product-process p, .evaluation-grid p) {
  overflow-wrap:break-word;
}
body :is(.lf-widget, .product-landing, .projects-catalog) {min-width:0}
@media(max-width:760px) {
  body header nav {font-size:var(--type-ui)}
  body main .product-hero h1,
  body main .hero h1,
  body main .projects-hero h1,
  body main .project-detail-copy h1 {overflow-wrap:break-word}
}
/* Home compacta: mismos roles tipográficos, menor escala contextual para las seis tarjetas. */
body main #soluciones .card h3{font-size:var(--type-subheading);line-height:var(--type-leading-heading)}
body main #soluciones .card p{font-size:var(--type-supporting);line-height:var(--type-leading-supporting)}
@media(max-width:760px){
  body main #soluciones .card h3{font-size:var(--type-body);line-height:var(--type-leading-heading)}
}

/*
 * TERREY · Opción A aprobada: Oswald para titulares + Barlow para lectura.
 * SISTEMA GLOBAL, no limitado a la página principal.
 * Interlineados ajustados para acentos/diéresis en titulares de varias líneas.
 * Google Fonts se usa temporalmente; autoalojar tras obtener WOFF2 autorizados.
 */
:root {
  --type-display: clamp(2.85rem, 4.5vw, 4.9rem);
  --type-section: clamp(2.125rem, 3.1vw, 3.125rem);
  --type-subheading: clamp(1.35rem, 2.2vw, 1.95rem);
  --type-leading-display: 1.29;
  --type-leading-heading: 1.24;
}
body,
body main :is(p,li,dd),
body :is(input,select,textarea,.lf-widget) {
  font-family: 'Barlow', Arial, sans-serif;
}
/* Cubrir todas las familias de títulos, incluso las landings con CSS específico. */
body main :is(h1,h2,h3,h4),
body footer h3 {
  font-family: 'Oswald', 'Barlow Condensed', 'Arial Narrow', sans-serif !important;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: -0.012em;
}
body main :is(
  .hero h1,
  .brand-hero h1,
  .product-hero h1,
  .intent-hero h1,
  .projects-hero h1,
  .project-detail-copy h1,
  .legal h1
) {
  font-family: 'Oswald', 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  font-size: var(--type-display);
  line-height: var(--type-leading-display);
  letter-spacing: -0.016em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
body main h1 {
  font-family: 'Oswald', 'Barlow Condensed', 'Arial Narrow', sans-serif !important;
  font-weight: 700;
  line-height: var(--type-leading-display) !important;
  text-transform: uppercase;
}
body main :is(h2,h3,h4) {
  line-height: var(--type-leading-heading) !important;
  text-wrap: pretty;
}
body main #soluciones .card h3 {
  font-family: 'Oswald', 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-size: clamp(var(--type-ui), 1.55vw, var(--type-subheading));
  font-weight: 600;
  line-height: var(--type-leading-heading);
  letter-spacing: -0.005em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
body header :is(nav,nav a,.menu),
body :is(.btn,.btn.small,.wa),
body main .urgent-strip a {
  font-family: 'Oswald', 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-weight: 600;
  letter-spacing: 0.018em;
  text-transform: uppercase;
}
@media (max-width: 760px) {
  :root {
    --type-display: clamp(2.3rem, 8.8vw, 3.55rem);
    --type-section: clamp(2rem, 7.2vw, 2.625rem);
    --type-subheading: clamp(1.25rem, 5vw, 1.65rem);
    --type-leading-display: 1.32;
    --type-leading-heading: 1.27;
  }
  body main :is(
    .hero h1,
    .brand-hero h1,
    .product-hero h1,
    .intent-hero h1,
    .projects-hero h1,
    .project-detail-copy h1
  ) {
    max-width: 100%;
    text-wrap: wrap;
    overflow-wrap: break-word;
  }
  body main #soluciones .card h3 {
    font-size: var(--type-ui);
    line-height: var(--type-leading-heading);
  }
}

/* TERREY mobile-first visual rhythm: photographs visibly integrated with products. */
.mobile-solution-photo{display:none;width:100%;aspect-ratio:16/10;object-fit:cover;background:#e8ebe5;border-radius:3px;margin:0 0 15px}
@media(max-width:760px){
 .mobile-solution-photo{display:block}
 /* Product hero: stop burying industrial photography under a full-height dark overlay. */
 body main.product-landing .product-hero{
   display:flex;flex-direction:column;min-height:0;height:auto;overflow:visible;background:#202522
 }
 body main.product-landing .product-hero::after{display:none}
 body main.product-landing .product-hero-copy{
   position:relative;order:1;width:100%;min-height:0;height:auto;
   padding:30px 6% 28px;max-width:none;box-sizing:border-box;background:#202522
 }
 body main.product-landing .product-hero-media{
   order:2;display:block;position:relative;inset:auto;width:100%;
   height:auto;min-height:0;aspect-ratio:16/10;overflow:hidden;background:#dfe4de
 }
 body main.product-landing .product-hero-media picture{display:block;width:100%;height:100%}
 body main.product-landing .product-hero-media img{
   display:block;width:100%;height:100%;object-fit:cover;object-position:center
 }
 body main.product-landing .product-hero-media figcaption{bottom:9px;right:10px;left:auto;max-width:78%}
 body main.product-landing .product-hero .breadcrumb{margin-bottom:15px}
 body main.product-landing .product-hero h1{font-size:clamp(2.3rem,9.6vw,3.7rem);margin:10px 0 14px}
 body main.product-landing .product-lead{font-size:var(--type-body);line-height:1.48}
 body main.product-landing .hero-services{margin-top:15px}
 body main.product-landing .product-hero .actions{margin-top:19px}
 body main.product-landing .contact-line{margin-top:19px}
 /* Image-led product cards, with spacing calibrated for a phone. */
 body main .application-list article{overflow:hidden}
 body main .application-list .mobile-solution-photo{
   width:calc(100% + 0px);height:auto;margin:0 0 14px;aspect-ratio:16/10;
 }
 body main .intent-hero{display:flex;flex-direction:column}
 body main .intent-hero-copy{order:1}
 body main .intent-hero-media{
   order:2;position:relative;display:block;min-height:0;height:auto;
   max-height:none;aspect-ratio:16/10;overflow:hidden
 }
 body main .intent-hero-media img{width:100%;height:100%;object-fit:cover}
 body main .intent-option{padding:16px;min-height:0}
 body main .intent-option .mobile-solution-photo{margin:0 0 12px}
 body main .intent-offers .intent-section-head{margin-bottom:19px}
 body main .brand-hero-photo{min-height:240px;aspect-ratio:16/10}
 body main .brand-product-media{min-height:190px}
 body main .brand-product-photo{object-fit:cover}
 body main .brand-jamison .brand-product-card:nth-child(2) .brand-product-photo{object-fit:contain}
}