/* ==========================================================================
   global.css — Variables, reset, tipografía base y utilidades compartidas
   ========================================================================== */

:root {
  --bg: #FFFFFF;
  --surface: #F6F6F4;
  --surface2: #FAFAF9;
  --ink: #171717;
  --ink-mid: #3A3A3A;
  --ink-soft: #737373;
  --line: rgba(0, 0, 0, .10);
  --line-soft: rgba(0, 0, 0, .07);
  --accent: #606646;
  --brand: #606646;
  --brand-dark: #2f3322;
  --sage: #aaaa96;
  --err: #B3261E;
  --shadow: 0 16px 40px -28px rgba(0, 0, 0, .30);
  --shadow-sm: 0 6px 20px -14px rgba(0, 0, 0, .25);
  --maxw: 1060px;
  /* Marco visual compartido (heroes / paneles full-bleed) */
  --frame-max: 1320px;
  --frame-gutter: clamp(12px, 1.6vw, 28px);
  --frame-radius: clamp(14px, 1.2vw, 22px);
  --sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* Escala tipográfica global (Hanken) */
  --fw-display: 400;
  --fw-section: 500;
  --fw-emphasis: 600;
  --fw-body: 400;
  --fs-eyebrow: .72rem;
  --fs-h1: clamp(2.3rem, 2.8vw + 1rem, 3.9rem);
  --fs-h2: clamp(1.9rem, 3.4vw, 2.8rem);
  --fs-h2-immersive: clamp(2rem, 4.4vw, 3.4rem);
  --fs-h3: clamp(1.15rem, 1vw + 1rem, 1.5rem);
  --fs-h4: 1.2rem;
  --fs-h5: 1.12rem;
  --fs-h6: 1.08rem;
  --fs-body: 1rem;
  --fs-lead: clamp(1rem, 0.35vw + 0.95rem, 1.15rem);
  --fs-btn: .97rem;
  --lh-display: 1.04;
  --lh-section: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.65;
  --track-display: -.035em;
  --track-section: -.03em;
  --track-heading: -.01em;
  --space-heading-y: .35em;
  --space-p: 1em;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  background: var(--bg);
  color: var(--ink);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sans);
  color: var(--ink);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  margin: 0 0 var(--space-heading-y);
}

h1 b,
h1 strong {
  font-weight: var(--fw-emphasis);
}

h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-section);
  line-height: var(--lh-section);
  letter-spacing: var(--track-section);
  margin: 0 0 var(--space-heading-y);
}

h2 b,
h2 strong {
  font-weight: var(--fw-emphasis);
}

h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-emphasis);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-heading);
  margin: 0 0 .4em;
}

h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-emphasis);
  line-height: 1.28;
  letter-spacing: -.02em;
  margin: 0 0 .4em;
}

h5 {
  font-size: var(--fs-h5);
  font-weight: var(--fw-emphasis);
  line-height: 1.28;
  letter-spacing: -.02em;
  margin: 0 0 .35em;
}

h6 {
  font-size: var(--fs-h6);
  font-weight: var(--fw-emphasis);
  line-height: 1.28;
  letter-spacing: -.02em;
  margin: 0 0 .35em;
}

p {
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  margin: 0 0 var(--space-p);
}

p:last-child {
  margin-bottom: 0;
}

.lead,
.lede {
  font-size: var(--fs-lead);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}

ul, ol {
  padding-left: 1.25em;
  margin: 0 0 var(--space-p);
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0 0 .35em;
}

li:last-child {
  margin-bottom: 0;
}

/* Navegación / componentes: sin bullets ni sangría de prosa */
nav ul,
nav ol,
footer ul,
.navlinks,
.submenu,
.blist,
.sr-list,
.chip-list,
.cal-grid,
.slots,
.phone-cc-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

nav li,
.navlinks > li,
.submenu > li,
.blist > li {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

body.page-catalogo {
  overflow-x: visible;
}

/* Escalado en pantallas grandes: laptops (1440px+), monitores (1920px+) y ultrawide (2560px+).
   Los contenedores crecen para aprovechar el espacio sin perder la contención — el texto sigue
   acotado por sus propios max-width/ch, así que solo se benefician grids, tarjetas y paneles full-bleed. */
@media (min-width: 1440px) {
  :root {
    --maxw: 1180px;
    --frame-max: 1630px;
  }
}

@media (min-width: 1920px) {
  :root {
    --maxw: 1300px;
    --frame-max: 1930px;
    --frame-gutter: clamp(20px, 1.8vw, 36px);
  }
}

@media (min-width: 2560px) {
  :root {
    --maxw: 1420px;
    --frame-max: 2240px;
    --frame-gutter: clamp(28px, 1.8vw, 48px);
  }
}

@media (max-width: 900px) {
  :root {
    --frame-gutter: 16px;
    --frame-radius: 16px;
  }

  html {
    overflow-x: clip;
  }

  body {
    overflow-x: clip;
    max-width: 100%;
  }

  body.page-anzio,
  body.page-livello,
  body.page-filio,
  body.page-diseno,
  body.page-showrooms,
  body.page-home,
  body.page-category,
  body.page-proyectos,
  body.page-proyecto-detalle,
  body.page-nosotros,
  body.page-blog,
  body.page-legal,
  body.page-catalogo,
  body.page-acusto,
  body.page-aura {
    overflow-x: clip;
  }

  header.site-header,
  footer {
    max-width: 100%;
  }

  header.site-header {
    overflow: visible;
  }

  .wrap {
    padding: 0 8%;
  }

  section.block {
    padding: 80px 0;
  }

  .sec-head {
    margin-bottom: 40px;
  }

  .sec-head p {
    max-width: none;
  }
}

@media (max-width: 560px) {
  :root {
    --frame-gutter: 12px;
    --frame-radius: 14px;
    --fs-eyebrow: .68rem;
    --fs-h1: clamp(2rem, 7vw, 2.65rem);
    --fs-h2: clamp(1.45rem, 5.5vw, 1.85rem);
    --fs-h2-immersive: clamp(1.55rem, 5.8vw, 2.1rem);
    --fs-btn: .92rem;
  }

  .wrap {
    padding: 0 8%;
  }

  section.block {
    padding: 64px 0;
  }

  .sec-head {
    margin-bottom: 28px;
  }

  .eyebrow {
    letter-spacing: .18em;
  }
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 36px;
}

/* Shell visual: mismo tope en todas las páginas al alejar */
.frame-shell {
  width: min(var(--frame-max), calc(100% - (var(--frame-gutter) * 2)));
  margin-inline: auto;
  border-radius: var(--frame-radius);
  overflow: hidden;
  isolation: isolate;
}

.wrap.wrap--frame {
  width: min(var(--frame-max), calc(100% - (var(--frame-gutter) * 2)));
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: var(--fw-emphasis);
  line-height: 1;
  color: var(--ink-soft);
}

/* Salto de línea que solo aplica en móvil (activado puntualmente por
   media query donde se use, p. ej. home.css) */
br.solo-movil {
  display: none;
}

/* Section shell (home) */
section.block {
  padding: 108px 0;
}

.sec-head {
  max-width: 660px;
  margin-bottom: 56px;
}

.sec-head h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-section);
  line-height: var(--lh-section);
  letter-spacing: var(--track-section);
  margin: 14px 0 14px;
}

.sec-head p:not(.eyebrow) {
  color: var(--ink-soft);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  max-width: 54ch;
  margin-bottom: 0;
}

.sec-head .eyebrow,
.faq .head .eyebrow,
.contact .eyebrow {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  letter-spacing: .22em;
  max-width: none;
}

/* Scroll reveal — visible por defecto; animación solo si global.js activa .js-reveal */
.reveal {
  opacity: 1;
  transform: none;
}

.js-reveal .reveal:not(.in) {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
}

.js-reveal .reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
}

.d1 { transition-delay: .07s; }
.d2 { transition-delay: .14s; }
.d3 { transition-delay: .21s; }

/* respeta a quien tiene el movimiento reducido activado en el sistema */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}