/* ─────────────────────────────────────────────────────────────
   LASER CUT MALLORCA — hoja base

   La identidad viene de la web actual (Betheme), reconstruida a mano:
   fondo oscuro industrial, naranja #D56820 como color de marca, Big
   Shoulders condensada en mayúsculas para los titulares e Inter para el
   texto. Los valores no son inventados — salen del CSS de la landing en
   vivo (ver ADR-013).

   Lo propio de UNA página no va aquí: va en assets/css/page-<clave>.css,
   declarado en build/pages.php → 'styles', que se carga DESPUÉS.
   ───────────────────────────────────────────────────────────── */

/* ── Tipografías (antes fonts.css) ─────────────────────────────
   Unidas aquí para ahorrar una petición bloqueante en cada página
   (ADR-023). Van primero, como cuando se enlazaban aparte.
   ───────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────
   Tipografías del sitio, servidas desde el propio dominio.

   Inter para el texto, Big Shoulders para los titulares: son las
   dos de la web actual. Guardadas en assets/fonts/ porque aquí no
   se enlaza un CDN de terceros (regla 11 / ADR-007) — ni por
   dependencia ni por privacidad: pedirlas a Google le revelaría la
   IP de cada visitante.

   Son fuentes VARIABLES: un fichero por familia y subconjunto
   cubre todo el rango de pesos. Declararlas peso a peso bajaría
   cuatro copias del mismo .woff2.

   Sólo latin y latin-ext; el cirílico, el griego y el vietnamita
   que sirve Google no los necesita un sitio ES/EN.

   display:swap — antes un titular en la fuente del sistema que un
   hueco en blanco mientras baja la tipografía.
   ───────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Big Shoulders';
  font-style: normal;
  font-weight: 800 900;
  font-display: swap;
  src: url('../fonts/big-shoulders-latin-ext.woff2') format('woff2-variations'),
       url('../fonts/big-shoulders-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Big Shoulders';
  font-style: normal;
  font-weight: 800 900;
  font-display: swap;
  src: url('../fonts/big-shoulders-latin.woff2') format('woff2-variations'),
       url('../fonts/big-shoulders-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2-variations'),
       url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2-variations'),
       url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  /* Marca */
  --brand:        #D56820;
  --brand-soft:   #E07C3A;
  --accent:       #FBB91F;

  /* Fondos, de más oscuro a más claro */
  --ground-deep:  #06080C;
  --ground:       #0D1018;
  --surface:      #141924;
  --surface-2:    #161922;

  /* Texto */
  --text:         #F4F6FA;
  --muted:        #7A8699;
  --muted-2:      #A8B2C4;

  /* Líneas y tintes: siempre naranja a muy baja opacidad, que es lo que
     da la sensación de que todo el sitio es del mismo material. */
  --line:         rgba(213, 104, 32, .14);
  --line-strong:  rgba(213, 104, 32, .52);   /* bordes que deben verse */
  --line-soft:    rgba(213, 104, 32, .08);
  --tint:         rgba(213, 104, 32, .04);

  --radius:       6px;
  --shell:        1200px;
  --gap:          clamp(48px, 7vw, 96px);   /* aire vertical entre secciones */
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted-2);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }

/* ── Titulares ──────────────────────────────────────────────── */
/* Big Shoulders es condensada: aguanta titulares largos en mayúsculas
   sin partirse, que es justo lo que pide "CORTE LÁSER INDUSTRIAL EN
   MALLORCA". Interlineado 1 porque a 900 el condensado lo pide. */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Big Shoulders', 'Inter', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
  line-height: 1;
  color: var(--text);
  margin: 0 0 .4em;
}

.sec-title  { font-size: clamp(30px, 4.6vw, 54px); }
.sec-sub    { max-width: 62ch; color: var(--muted); }
.sec-body   { max-width: 68ch; }
.sec-body p:last-child { margin-bottom: 0; }

/* Antetítulo con su raya: es el detalle que más se repite en la web
   actual y lo que hace que una sección se reconozca como suya. */
.sec-kicker, .hero-kicker {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: 3px;
  text-transform: uppercase; color: var(--brand);
  margin: 0 0 14px;
}
.sec-kicker::before, .hero-kicker::before {
  content: ''; width: 24px; height: 1px; background: var(--brand); flex-shrink: 0;
}

/* Énfasis de rich(): *texto* en content/ → <em class="em"> */
.em { font-style: normal; color: var(--brand); }

/* ── Estructura ─────────────────────────────────────────────── */
.shell { max-width: var(--shell); margin: 0 auto; padding: 0 24px; }

main > section { padding: var(--gap) 0; }
main > section + section { border-top: 1px solid var(--line-soft); }

/* ── Utilidades ─────────────────────────────────────────────── */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--brand); color: #fff; padding: 10px 16px; text-decoration: none; font-weight: 600; }
.skip-link:focus { left: 8px; top: 8px; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand); outline-offset: 3px;
}

/* ── Botones ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Big Shoulders', sans-serif;
  font-size: 16px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  padding: 14px 30px; border-radius: var(--radius); border: 1px solid transparent;
  text-decoration: none; cursor: pointer; background: none;
  transition: background-color .2s, border-color .2s, color .2s, transform .12s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: var(--ground-deep); border-color: var(--brand); }
.btn-primary:hover { background: var(--brand-soft); border-color: var(--brand-soft); }
.btn-ghost { color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }

/* ── Cabecera ───────────────────────────────────────────────── */
/* El fondo translúcido va en un pseudoelemento y no en la cabecera:
   backdrop-filter convierte al elemento en bloque contenedor de sus
   descendientes con position: fixed, y el cajón del menú móvil (.nav-main)
   está dentro de la cabecera. Con el filtro en la propia cabecera, el cajón
   quedaba encajado en sus ~70px de alto y, con 88px de relleno superior,
   no se veía nada al abrirlo. */
.site-header {
  position: sticky; top: 0; z-index: 30;
  border-bottom: 1px solid var(--line-soft);
}
.site-header::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(6, 8, 12, .88);
  backdrop-filter: saturate(140%) blur(10px);
}
.header-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(12px, 2vw, 24px);
  max-width: var(--shell); margin: 0 auto; padding: 14px 24px;
}
/* El logo no parte en dos líneas, pero SÍ encoge: a 22px fijos y sin
   partir, en un móvil de 390px empuja el botón del menú fuera de la
   pantalla y con él se desborda la página entera. */
.logo-wrap { min-width: 0; display: flex; align-items: center; }
.logo-wrap a { display: flex; align-items: center; }
/* El logo (símbolo + «LASER CUT / MALLORCA» en dos líneas) va sobre
   transparente: se escala por alto y encoge en pantallas pequeñas para
   no empujar al botón de menú. Al ser de dos líneas necesita más alto
   que un logotipo de una sola para que el texto se lea. */
.logo-img { width: auto; height: clamp(36px, 4.4vw, 50px); }
.mfoot-logo img { width: auto; height: 64px; }
.logo-wrap a {
  font-family: 'Big Shoulders', sans-serif; font-weight: 900;
  font-size: clamp(15px, 4.2vw, 22px);
  letter-spacing: 1px; text-transform: uppercase; color: var(--text); text-decoration: none;
  white-space: nowrap; line-height: 1;
}
.nav-main { display: flex; align-items: center; gap: 22px; }
.nav-main a {
  font-family: 'Big Shoulders', sans-serif; font-weight: 800; font-size: 16px;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted);
  text-decoration: none; transition: color .18s;
  white-space: nowrap; line-height: 1;
}
.nav-main a:hover { color: var(--text); }
.nav-main a[aria-current="page"] { color: var(--brand); }
.header-right { display: flex; align-items: center; gap: 12px; }
.btn-header-cta {
  font-family: 'Big Shoulders', sans-serif; font-weight: 800; font-size: 14px;
  letter-spacing: 1.6px; text-transform: uppercase;
  text-decoration: none; color: var(--brand);
  border: 1px solid var(--brand); border-radius: var(--radius); padding: 10px 16px;
  white-space: nowrap; line-height: 1;
  transition: background-color .2s, color .2s;
}
.btn-header-cta:hover { background: var(--brand); color: var(--ground-deep); }

/* ── Selector de idioma ─────────────────────────────────────── */
.lang-dd { position: relative; }
.lang-dd-btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px;
  background: none; border: 0; cursor: pointer; color: var(--muted);
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 1px;
}
.lang-dd-btn:hover { color: var(--text); }
.lang-dd-chev { transition: transform .15s; }
.lang-dd.open .lang-dd-chev { transform: rotate(180deg); }
.lang-dd-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); min-width: 64px; overflow: hidden; z-index: 40;
}
.lang-dd.open .lang-dd-menu { display: block; }
.lang-dd-menu a {
  display: block; padding: 9px 14px; text-decoration: none;
  font-size: 12px; font-weight: 600; color: var(--muted-2);
}
.lang-dd-menu a:hover { background: var(--tint); color: var(--brand); }
.lang-dd--mobile { display: none; }

/* ── Menú móvil ─────────────────────────────────────────────── */
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 36px; height: 36px; background: none; border: 0; cursor: pointer; padding: 0;
}
.nav-toggle span { display: block; height: 2px; background: var(--text); transition: transform .2s, opacity .2s; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 20; }
body.nav-open .nav-overlay { display: block; }

@media (max-width: 980px) {
  /* Por encima del cajón abierto (z-index 25): la X tiene que seguir
     pudiéndose pulsar cuando el cajón cubre la cabecera. */
  .nav-toggle { display: flex; position: relative; z-index: 26; }
  .lang-dd--header, .btn-header-cta { display: none; }
  .lang-dd--mobile { display: block; margin-top: 12px; }
  .nav-main {
    display: none; position: fixed; inset: 0 0 0 auto; width: min(320px, 84vw);
    flex-direction: column; align-items: flex-start; gap: 20px;
    background: var(--ground-deep); border-left: 1px solid var(--line);
    padding: 88px 28px 28px; z-index: 25; overflow-y: auto;
  }
  .nav-main.is-open { display: flex; }
  .nav-main a { font-size: 20px; }
  body.nav-open { overflow: hidden; }
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero { padding: clamp(56px, 8vw, 104px) 0 0; }
.hero-title { font-size: clamp(40px, 8.5vw, 104px); letter-spacing: 0; }
.hero-sub { font-size: clamp(16px, 1.5vw, 19px); max-width: 56ch; color: var(--muted-2); }
.hero-note { font-size: 13px; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* En una página interior la imagen ACOMPAÑA al titular: no va a sangre
   ni se come la pantalla. Se alinea con la retícula y se limita en
   alto. La portada es otra cosa y tiene su propio hero. */
.hero-media {
  max-width: var(--shell); margin: clamp(28px, 3.5vw, 44px) auto 0;
  padding: 0 24px;
}
.hero-media img {
  width: 100%; aspect-ratio: 16 / 6; max-height: 360px; object-fit: cover;
  border: 1px solid var(--line); border-radius: var(--radius);
}

/* ── Cifras ─────────────────────────────────────────────────── */
.stats { background: var(--ground-deep); }
.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 32px; margin: 0;
}
.stat-value {
  font-family: 'Big Shoulders', sans-serif; font-weight: 900;
  font-size: clamp(34px, 4.5vw, 54px); color: var(--brand);
  /* 1 a secas recorta por abajo, y valores como N₂/O₂ llevan
     subíndices que se montan encima de su propia etiqueta. */
  line-height: 1.12;
}
.stat-label {
  /* Hueco generoso: los subíndices de N₂/O₂ bajan mucho y con poco
     margen la etiqueta se les monta encima. */
  margin: 12px 0 0; font-size: 11px; font-weight: 600; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--muted);
}

/* ── Tarjeta genérica ───────────────────────────────────────── */
.card, .svc, .det, .mat, .step, .tst figure, .teaser {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 28px;
  transition: border-color .2s, transform .2s;
}
.card:hover, .svc:hover, .det:hover, .mat:hover, .step:hover, .teaser:hover { border-color: var(--line); transform: translateY(-2px); }

/* Rejilla de tarjetas de título y texto (partials/cards.php y los
   perfiles de cliente de Servicios). */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; margin-top: 40px; }
.card-title { font-size: 22px; }
.card-body { color: var(--muted); font-size: 15px; margin: 0; }

/* ── Banda de cierre ────────────────────────────────────────── */
.cta-band { background: var(--ground-deep); text-align: center; }
.cta-title { font-size: clamp(26px, 4vw, 44px); }
.cta-body { max-width: 54ch; margin-inline: auto; color: var(--muted); }
.cta-shell .btn { margin-top: 12px; }

/* ── Pie ────────────────────────────────────────────────────── */
.mfoot {
  background: var(--ground-deep); border-top: 1px solid var(--line);
  padding: var(--gap) 0 28px; font-size: 14px;
}
.mfoot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; gap: 40px; }
.mfoot-logo {
  font-family: 'Big Shoulders', sans-serif; font-weight: 900; font-size: 22px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--text);
  text-decoration: none; display: inline-block; margin-bottom: 10px;
}
.mfoot-brand p { color: var(--muted); max-width: 34ch; }
.mfoot-h {
  font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: 2.4px; text-transform: uppercase; color: var(--brand);
  margin: 0 0 14px;
}
.mfoot li { margin-bottom: 8px; }
.mfoot a { text-decoration: none; color: var(--muted-2); transition: color .18s; }
.mfoot a:hover { color: var(--brand); }
.mfoot address { font-style: normal; color: var(--muted); }
.foot-hours { color: var(--muted); }
.mfoot-bot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px;
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line-soft);
  font-size: 12px; color: var(--muted);
}
.mfoot-legal a + a { margin-left: 6px; }

@media (max-width: 860px) {
  .mfoot-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ── Formularios ────────────────────────────────────────────── */
.form-shell { max-width: 760px; }
.cform-row { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
.cform-row label {
  font-size: 10px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: var(--muted);
}
.cform-row input, .cform-row textarea, .cform-row select {
  font: inherit; font-size: 14px; padding: 13px 15px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .2s;
}
.cform-row input:focus, .cform-row textarea:focus, .cform-row select:focus { border-color: var(--brand); outline: none; }
.cform-row input::placeholder, .cform-row textarea::placeholder { color: #2E3748; }
.cform-row input[type="file"] { padding: 10px; color: var(--muted); }
.cform-consent { flex-direction: row; align-items: flex-start; gap: 10px; }
.cform-consent label { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted-2); }
.cform-consent a { color: var(--brand); }
.cform-consent input { accent-color: var(--brand); margin-top: 3px; }
.req { color: var(--brand); }
/* Cebo antispam: fuera de pantalla, nunca visible ni enfocable. */
.cform-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { padding: 14px 16px; border-radius: var(--radius); margin-bottom: 22px; font-size: 14px; }
.form-note-ok  { background: rgba(70, 180, 110, .08); border-left: 2px solid #46B46E; color: var(--text); }
.form-note-err { background: rgba(213, 104, 32, .08); border-left: 2px solid var(--brand); color: var(--text); }