/* ===================================================================
   LIGNA MILANO — Shell común de páginas internas (renovación 2026)
   Se carga DESPUÉS de styles.css para armonizar cabecera, pie,
   botones y ritmo con la nueva landing. Comparte los tokens de marca.
   =================================================================== */

:root {
  --copper-lit: #d69653;
  --carbon-2:   #1c1815;
  --ink-2:      #0d0b09;
  --glass-2:    rgba(20, 17, 14, .78);
  --ease-sh:    cubic-bezier(.22, .61, .36, 1);
  --serif-sh:   "Cormorant Garamond", Georgia, serif;
  --sans-sh:    "Montserrat", system-ui, -apple-system, Arial, sans-serif;

  /* Escala tipográfica por roles (DESIGN.md › Typography); mismos valores que site.css, que las legales no cargan. Todo font-size del
     sitio usa uno de estos tokens; no se añaden tamaños sueltos. */
  --fs-micro:    .625rem;   /* 10 px · etiquetas mínimas: cinta, anillo macro, tagline, badge */
  --fs-label:    .72rem;    /* etiquetas en mayúsculas, tags, kickers, selector de idioma */
  --fs-note:     .8rem;     /* notas, labels de formulario, píldoras, botón pequeño */
  --fs-ui:       .875rem;   /* navegación, listas, botones, texto de apoyo */
  --fs-body-sm:  .95rem;    /* cuerpo de tarjetas, respuestas de la FAQ */
  --fs-body:     1rem;      /* texto corrido y campos (16 px: iOS no hace zoom al enfocar) */
  --fs-lead:     1.1rem;    /* entradillas, numerales pequeños */
  --fs-title-sm: 1.3rem;    /* marca, nombres de pieza, preguntas de la FAQ */
  --fs-title-md: 1.5rem;    /* numerales grandes, títulos de la franja intro, cierres */
  --fs-title:    clamp(1.4rem, 2.4vw, 1.9rem);
  --fs-title-lg: clamp(1.9rem, 3vw, 2.5rem);   /* pieza destacada de la galería */
  --fs-headline: clamp(2rem, 4.4vw, 3.4rem);
  --fs-display:  clamp(2.4rem, 4.3vw, 3.9rem);
}

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: 76px; display: flex; align-items: center;
  background: transparent; border-bottom: 1px solid transparent;
  /* styles.css le da un backdrop-filter permanente. Un backdrop-filter en la cabecera la
     convierte en bloque contenedor del cajón (position:fixed) y lo encerraba en sus 76 px:
     los enlaces del menú quedaban aplastados a 8 px. Se anula y el vidrio pasa a ::before. */
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: border-color .5s var(--ease-sh);
}
.site-header.is-compact { position: fixed; }
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--glass-2);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  opacity: 0; transition: opacity .5s var(--ease-sh);
}
.site-header.is-scrolled { background: transparent; border-bottom-color: var(--line-soft); }
.site-header.is-scrolled::before { opacity: 1; }
.site-header .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: min(100% - 44px, var(--container)); margin-inline: auto; }

.site-header .brand { display: flex; align-items: center; gap: 13px; min-width: 0; }   /* styles.css le da 220 px y en móvil empujaba el menú fuera de la pantalla */
.site-header .brand img, .site-header .brand-logo { height: 40px; width: auto; }
.site-header .brand-copy { display: flex; flex-direction: column; line-height: 1; }
.site-header .brand-copy strong { font-family: var(--serif-sh); font-size: var(--fs-title-sm); letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--cream); }
.site-header .brand-copy small, .site-header .brand-copy span { font-size: var(--fs-micro); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin-top: 5px; }

.site-header .site-nav { display: flex; align-items: center; gap: 28px; }
.site-header .site-nav a {
  font-family: var(--sans-sh); font-size: var(--fs-ui); font-weight: 500; letter-spacing: .02em;
  color: var(--cream); position: relative; padding: 4px 0; text-transform: none; min-height: 0; border: 0; background: none;
  transition: color .5s var(--ease-sh);
}
.site-header .site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--copper); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-sh); }
.site-header .site-nav a:hover, .site-header .site-nav a.is-active { color: var(--copper-lit); }
.site-header .site-nav a:hover::after, .site-header .site-nav a.is-active::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 16px; }
.lang-switch { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line-soft); border-radius: 999px; background: rgba(0,0,0,.2); }
.lang-switch a {
  font-family: var(--sans-sh); font-size: var(--fs-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); padding: 6px 11px; border-radius: 999px; min-height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .4s, background .4s;
}
.lang-switch a:hover { color: var(--cream); }
.lang-switch a.is-active { color: #180d05; background: var(--copper); }

/* ---------- Aviso suave de idioma (lo crea i18n.js; mismo diseño que en la home) ---------- */
.lang-suggest {
  position: fixed; inset: 0 0 auto 0; z-index: 105;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px 12px;
  padding: 9px 58px 9px 20px;
  background: var(--carbon-2); border-bottom: 1px solid var(--line);
  font-family: var(--sans-sh); font-size: var(--fs-note); line-height: 1.4; color: var(--cream-soft); text-align: center;
}
.lang-suggest p { color: inherit; margin: 0; }
.lang-suggest a { color: var(--copper-lit); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.lang-suggest a:hover { color: var(--cream); }
.lang-suggest-close {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font-size: var(--fs-title-sm); line-height: 1; color: var(--muted);
}
.lang-suggest-close:hover { color: var(--cream); }
.site-header { top: var(--suggest-h, 0px); }
.has-lang-suggest .legal-main { padding-top: var(--suggest-h, 0px); }

.nav-toggle { display: none; width: 44px; height: 44px; padding: 0; flex-direction: column; justify-content: center; align-items: center; gap: 5px; z-index: 120; border: 0; background: none; cursor: pointer; }
/* styles.css da padding al botón y margin a las barras: sin anularlos, las barras se encogían a 0 px y el menú no se veía. */
.nav-toggle span { display: block; flex-shrink: 0; margin: 0; width: 24px; height: 2px; background: var(--cream); border-radius: 2px; transition: transform .4s var(--ease-sh), opacity .3s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Buttons (harmonise with landing) ---------- */
.btn-primary {
  background: linear-gradient(135deg, var(--copper-lit), var(--copper));
  color: #180d05; border: 0; box-shadow: 0 18px 48px rgba(184,115,51,.22);
  text-transform: none; letter-spacing: .02em; font-weight: 600;
}
.btn-primary:hover { transform: translateY(-3px); background: linear-gradient(135deg, var(--copper-lit), var(--copper)); box-shadow: 0 26px 70px rgba(184,115,51,.34); }
.btn-ghost { border: 1px solid var(--line); color: var(--cream); background: rgba(247,240,230,.02); text-transform: none; letter-spacing: .02em; font-weight: 600; }
.btn-ghost:hover { border-color: var(--copper); color: var(--copper-lit); transform: translateY(-3px); }

/* ---------- Footer ---------- */
.site-footer { padding: 56px 0 40px; border-top: 1px solid var(--line-soft); background: #030302; }
.site-footer .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 40px; }
.site-footer .footer-logo { height: 48px; width: auto; margin-bottom: 16px; }   /* styles.css le fija width:120px y lo deformaba */
.site-footer .footer-grid p { color: var(--muted); font-size: var(--fs-ui); margin-top: 6px; }
.site-footer .footer-grid strong { display: block; font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; color: var(--copper); margin-bottom: 14px; }
.site-footer .footer-grid a { display: block; color: var(--cream-soft); font-size: var(--fs-ui); padding: 5px 0; transition: color .4s; }
.site-footer .footer-grid a:hover { color: var(--copper-lit); }

/* ---------- Inner page hero + back link ---------- */
.page-hero { padding: 150px 0 40px; background: radial-gradient(120% 90% at 15% 0%, rgba(184,115,51,.16), transparent 55%), linear-gradient(140deg, var(--black), #160b06); }
.back-home { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-note); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; transition: color .4s, transform .4s; }
.back-home:hover { color: var(--copper-lit); transform: translateX(-3px); }

/* ---------- Legales traducidas: cláusula de prevalencia del español ---------- */
.legal-content .legal-clause { margin-top: 42px; padding-top: 18px; border-top: 1px solid rgba(138, 90, 46, .2); font-size: var(--fs-ui); }

/* ---------- Cajón de navegación ----------
   Marca + 7 enlaces + selector de idioma miden ~1070 px (catalán, el más largo, con los
   enlaces a --fs-ui) y el contenedor de las legales es de 1180 px: por debajo de 1140 px
   de ventana (con barra de scroll) ya no caben. Con el corte antiguo (860 px) la marca
   se partía en tres líneas y pisaba "Inicio" entre 861 y ~1100 px. */
@media (max-width: 1140px) {
  .site-header .site-nav {
    position: fixed; inset: 0 0 0 auto; width: min(84vw, 340px);
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 24px;
    padding: 40px; background: var(--glass-2); backdrop-filter: blur(20px);
    border-left: 1px solid var(--line-soft);
    transform: translateX(100%); transition: transform .45s var(--ease-sh); z-index: 110;
  }
  .site-header .site-nav.is-open { transform: none; }
  .site-header .site-nav a { font-size: var(--fs-lead); }
  .nav-toggle { display: flex; }
}

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  .site-footer .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  /* Marca + selector de idioma + menú tienen que caber en una fila (375 px). */
  .site-header .header-inner { gap: 10px; }
  .header-actions { gap: 6px; }
  .site-header .brand { gap: 9px; }
  .site-header .brand img, .site-header .brand-logo { height: 34px; }
  .site-header .brand-copy strong { font-size: var(--fs-body); letter-spacing: .1em; white-space: nowrap; }
  .lang-switch a { padding: 5px 6px; font-size: var(--fs-micro); }
  .site-header .brand-copy small, .site-header .brand-copy span { display: none; }
}
@media (max-width: 340px) {
  .site-header .brand-copy { display: none; }
}