/* ============================================================
   MÄGDEKO · Sistema de diseño
   CSS propio, sin framework, sin build. Cascade layers.
   Concepto: "plano de montaje" — el verde de marca es la capa
   de anotación técnica (cotas, ticks, estados activos).
   Tema claro fijo, según brief.
   ============================================================ */

@layer reset, tokens, base, layout, components, utilities;

/* ─── TOKENS ────────────────────────────────────────────── */
@layer tokens {
  :root {
    /* Marca */
    --ink:        #07073D;  /* azul noche corporativo */
    --ink-2:      #0E0E52;  /* azul elevado (capas sobre ink) */
    --ink-3:      #16165F;
    --green:      #00FF00;  /* VERDE DE MARCA. Gráfica, fondos, estados */
    --green-text: #00893F;  /* mismo hue, para texto sobre blanco (4,6:1) */
    --green-deep: #00C24A;  /* intermedio, para hover sobre ink */

    /* Superficies — neutros sesgados al azul de marca, no grises puros */
    --paper:      #EFF1F6;
    --paper-hi:   #FFFFFF;
    --muted:      #565A7C;
    --faint:      #8B90AC;
    --line:       #D3D7E4;
    --line-dark:  rgba(255, 255, 255, .13);

    /* Tipografía */
    --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --body:    'Inter', 'Segoe UI', system-ui, sans-serif;
    --mono:    'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

    --fs-hero:  clamp(2.9rem, 8vw, 6.6rem);
    --fs-h1:    clamp(2.4rem, 6vw, 4.8rem);
    --fs-h2:    clamp(2rem, 4.6vw, 3.7rem);
    --fs-h3:    clamp(1.35rem, 2.3vw, 2rem);
    --fs-lead:  clamp(1.05rem, 1.55vw, 1.35rem);
    --fs-body:  clamp(0.98rem, 1.05vw, 1.075rem);
    --fs-mono:  0.715rem;

    /* Ritmo */
    --gutter: clamp(20px, 4.2vw, 64px);
    --band:   clamp(76px, 11vh, 156px);
    --maxw:   1400px;
    --nav-h:  76px;

    /* Movimiento */
    --ease:  cubic-bezier(.4, 0, .2, 1);
    --dur:   .32s;
  }
}

/* ─── RESET ─────────────────────────────────────────────── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
  ul[class], ol[class] { list-style: none; padding: 0; }
  img, video, svg { display: block; max-width: 100%; }
  button, input, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: none; padding: 0; }
}

/* ─── BASE ──────────────────────────────────────────────── */
@layer base {
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: var(--fs-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
  }

  h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: .95;
    text-wrap: balance;
  }
  h1 { font-size: var(--fs-h1); }
  h2 { font-size: var(--fs-h2); }
  h3 { font-size: var(--fs-h3); }
  h4 { font-size: 1.1rem; letter-spacing: -.02em; }

  /* Palabra destacada en titulares: verde de marca, nunca cursiva */
  h1 em, h2 em { font-style: normal; color: var(--green-text); }
  .on-ink h1 em, .on-ink h2 em { color: var(--green); }

  p { max-width: 64ch; }
  a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }

  :focus-visible { outline: 2px solid var(--green-text); outline-offset: 3px; border-radius: 2px; }
  .on-ink :focus-visible { outline-color: var(--green); }
  ::selection { background: var(--green); color: var(--ink); }

  /* Etiqueta técnica — la voz mono sostiene el concepto */
  .mono {
    font-family: var(--mono);
    font-size: var(--fs-mono);
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
  }

  /* Anotación de plano: hairline + texto mono */
  .anno {
    font-family: var(--mono);
    font-size: var(--fs-mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--green-text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .anno::before { content: ""; width: 26px; height: 1px; background: currentColor; flex: none; }
  .on-ink .anno { color: var(--green); }

  .skip {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    background: var(--green); color: var(--ink); padding: 10px 18px;
    font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .12em; text-transform: uppercase;
  }
  .skip:focus { left: 8px; top: 8px; }
}

/* ─── LAYOUT ────────────────────────────────────────────── */
@layer layout {
  .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
  .band { padding-block: var(--band); }
  .band-sm { padding-block: clamp(48px, 7vh, 96px); }

  .on-ink { background: var(--ink); color: var(--paper-hi); }
  .on-ink h1, .on-ink h2, .on-ink h3, .on-ink h4 { color: var(--paper-hi); }
  .on-ink p { color: #C6C9DE; }
  .on-paper-hi { background: var(--paper-hi); }

  .grid12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(16px, 2.2vw, 32px); }
  .cols { display: grid; gap: clamp(20px, 2.6vw, 40px); }
  .cols-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .cols-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
  .cols-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

  .stack { display: flex; flex-direction: column; gap: var(--gap, 18px); align-items: start; }
  .row   { display: flex; flex-wrap: wrap; gap: var(--gap, 18px); align-items: center; }
  .between { justify-content: space-between; }
}

/* ─── COMPONENTES ───────────────────────────────────────── */
@layer components {

  /* ── Navegación (compartida en todas las páginas) ─────── */
  .nav {
    position: fixed; inset: 0 0 auto 0; z-index: 90;
    background: rgba(7, 7, 61, .9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line-dark);
  }
  .nav__in {
    max-width: var(--maxw); margin-inline: auto;
    padding: 11px var(--gutter);
    display: flex; align-items: center; justify-content: space-between; gap: 22px;
  }
  .nav__logo { display: flex; align-items: center; text-decoration: none; }
  /* El logotipo ya lleva el nombre: no hace falta repetirlo al lado. */
  .nav__logo img { height: 52px; width: auto; }
  @media (max-width: 600px) { .nav__logo img { height: 42px; } }
  .wordmark {
    font-family: var(--display); font-weight: 800; font-size: 1rem;
    letter-spacing: .17em; color: #fff;
  }
  .wordmark i { color: var(--green); font-style: normal; }

  .nav__links { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 26px); }
  .nav__links a, .nav__drop > button {
    color: #B9BDD6; text-decoration: none;
    font-family: var(--mono); font-size: var(--fs-mono);
    letter-spacing: .12em; text-transform: uppercase;
    padding-block: 5px; border-bottom: 1px solid transparent;
    transition: color var(--dur), border-color var(--dur);
    white-space: nowrap;
  }
  .nav__links a:hover, .nav__links a[aria-current="page"], .nav__drop > button:hover {
    color: #fff; border-bottom-color: var(--green);
  }
  .nav__links a[aria-current="page"] { color: var(--green); }

  /* Submenú */
  .nav__drop { position: relative; }
  .nav__drop > button { display: inline-flex; align-items: center; gap: 6px; }
  .nav__drop > button::after {
    content: ""; width: 5px; height: 5px; flex: none;
    border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
  }
  .nav__menu {
    position: absolute; top: calc(100% + 12px); left: -14px; min-width: 250px;
    background: var(--ink-2); border: 1px solid var(--line-dark);
    padding: 8px; display: grid; gap: 2px;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity var(--dur), transform var(--dur), visibility var(--dur);
  }
  .nav__drop:hover .nav__menu, .nav__drop:focus-within .nav__menu,
  .nav__menu.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__menu a {
    display: block; padding: 9px 12px; border: none;
    letter-spacing: .06em; text-transform: none;
    font-family: var(--body); font-size: .9rem; color: #C6C9DE;
  }
  .nav__menu a:hover { background: var(--ink-3); color: #fff; border: none; }

  .nav__lang { display: flex; gap: 2px; margin-left: 6px; }
  .nav__lang button {
    font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .1em;
    padding: 4px 9px; color: #8288AA; border: 1px solid transparent;
    transition: color var(--dur), border-color var(--dur);
  }
  .nav__lang button:hover { color: #fff; }
  .nav__lang button[aria-pressed="true"] { color: var(--ink); background: var(--green); }

  .nav__burger {
    display: none; width: 42px; height: 42px;
    border: 1px solid var(--line-dark); color: #fff;
    align-items: center; justify-content: center;
  }
  .nav__burger span, .nav__burger span::before, .nav__burger span::after {
    content: ""; display: block; width: 18px; height: 1.5px; background: currentColor;
    transition: transform var(--dur), opacity var(--dur);
  }
  .nav__burger span::before { transform: translateY(-6px); }
  .nav__burger span::after  { transform: translateY(4.5px); }
  .nav__burger[aria-expanded="true"] span { background: transparent; }
  .nav__burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
  .nav__burger[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(-1.5px); }

  @media (max-width: 900px) {
    .nav__burger { display: inline-flex; }
    .nav__links {
      position: fixed; inset: var(--nav-h) 0 auto 0;
      flex-direction: column; align-items: stretch; gap: 0;
      background: var(--ink); border-bottom: 1px solid var(--line-dark);
      padding: 10px var(--gutter) 26px;
      max-height: 0; overflow: hidden; visibility: hidden;
      transition: max-height .38s var(--ease), visibility .38s;
    }
    .nav__links.is-open { max-height: 78vh; overflow-y: auto; visibility: visible; }
    .nav__links > a, .nav__drop > button { padding: 14px 0; border-bottom: 1px solid var(--line-dark); width: 100%; }
    .nav__drop { width: 100%; }
    .nav__menu {
      position: static; opacity: 1; visibility: visible; transform: none;
      background: none; border: none; padding: 0 0 8px 14px;
      max-height: 0; overflow: hidden; transition: max-height .3s var(--ease);
    }
    .nav__menu.is-open { max-height: 320px; }
    .nav__lang { margin: 16px 0 0; }
  }

  .progress { height: 2px; background: var(--green); transform: scaleX(0); transform-origin: 0 50%; }

  /* ── Botones ──────────────────────────────────────────── */
  .btn {
    display: inline-flex; align-items: center; gap: 11px;
    padding: 14px 28px; text-decoration: none;
    font-family: var(--display); font-weight: 700; letter-spacing: -.01em;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur), background var(--dur);
  }
  .btn--green { background: var(--green); color: var(--ink); }
  .btn--green:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 255, 0, .26); }
  .btn--ink { background: var(--ink); color: #fff; }
  .btn--ink:hover { transform: translateY(-2px); background: var(--ink-3); }
  .btn--ghost { border: 1px solid currentColor; }
  .btn--ghost:hover { background: var(--green); color: var(--ink); border-color: var(--green); }

  /* ── Hero ─────────────────────────────────────────────── */
  .hero { position: relative; overflow: hidden; padding-top: clamp(104px, 14vh, 160px); padding-bottom: clamp(52px, 8vh, 100px); }
  .hero__bg { position: absolute; inset: 0; overflow: hidden; }
  /* El vídeo se ve más que antes (.26 → .52). El degradado sigue
     protegiendo la columna izquierda, que es donde va el texto:
     si se sube más, el titular pierde contraste. */
  .hero__bg video, .hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .52; }
  .hero__bg::after {
    content: ""; position: absolute; inset: 0;
    /* Cierra más oscuro por la derecha: es donde va la escena 3D,
       y así el wireframe tiene contraste sin necesidad de una caja
       de fondo que se vería como un parche. */
    background: linear-gradient(100deg, rgba(7, 7, 61, .94) 4%, rgba(7, 7, 61, .56) 40%, rgba(7, 7, 61, .88));
  }
  .hero__rule {
    position: absolute; inset: 0; pointer-events: none;
    background-image:
      linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 100%);
    mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 100%);
  }
  .hero__in { position: relative; align-items: end; }
  .hero__copy { grid-column: 1 / span 6; }
  /* El plano sube: se alinea con el borde superior de la columna de
     texto y se levanta un poco más, para que respire por arriba. */
  .hero__art  { grid-column: 7 / span 6; align-self: start; margin-top: clamp(-72px, -4vw, -16px); }
  .hero h1 { font-size: var(--fs-hero); margin: 18px 0 22px; }
  .hero h1 em { font-style: normal; color: var(--green); }
  .hero__lead { font-size: var(--fs-lead); max-width: 46ch; }
  @media (max-width: 980px) {
    .hero__copy, .hero__art { grid-column: 1 / -1; }
    .hero__art { margin-top: 38px; }
  }

  /* Cabecera de página interior */
  .phead { position: relative; padding-top: clamp(104px, 13vh, 150px); padding-bottom: clamp(40px, 6vh, 76px); overflow: hidden; }
  .phead h1 { margin: 16px 0 20px; }
  .phead h1 em { font-style: normal; color: var(--green); }
  .crumb { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
  .crumb a { color: #B9BDD6; text-decoration: none; }
  .crumb a:hover { color: var(--green); }

  /* ── Escena 3D wireframe ──────────────────────────────── */
  .escena3d {
    position: relative;
    margin: 0;
    width: 100%;
    aspect-ratio: 4 / 3.15;
    /* Sin fondo propio: la escena vive directamente sobre el
       hero. Cualquier caja aquí se ve como un parche pegado.
       El contraste que necesita el wireframe se lo da el propio
       degradado del hero, que cierra más oscuro por la derecha. */
  }
  .escena3d canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }
  .escena3d__respaldo {
    position: absolute;
    inset: 12% 10%;
    width: 80%;
    height: 76%;
  }
  @media (max-width: 980px) { .escena3d { aspect-ratio: 4 / 3; } }

  /* ── Datos / cifras ───────────────────────────────────── */
  .speclist { display: flex; flex-direction: column; gap: 18px; }
  .speclist > div { border-top: 1px solid var(--line); padding-top: 10px; }
  .on-ink .speclist > div { border-top-color: var(--line-dark); }
  .speclist dt { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .on-ink .speclist dt { color: var(--faint); }
  .speclist dd { margin: 4px 0 0; font-family: var(--display); font-weight: 600; font-size: 1.45rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .speclist dd small { display: block; font-family: var(--mono); font-size: .68rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }

  /* ── Sección horizontal con parallax 3D ───────────────── */
  .stage-viewport { position: relative; }
  .track { display: flex; width: max-content; padding-bottom: clamp(48px, 7vh, 92px); }
  .panel {
    width: min(84vw, 980px); min-height: min(70vh, 600px); flex: none;
    padding-inline: clamp(16px, 3vw, 46px);
    display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(20px, 3vw, 46px);
    align-items: center;
  }
  .panel__stage {
    position: relative; aspect-ratio: 4 / 3.2;
    border: 1px solid var(--line-dark); background: var(--ink-2);
    overflow: hidden; perspective: 1100px;
  }
  .panel__stage video, .panel__stage img { width: 100%; height: 100%; object-fit: cover; }
  .panel__num {
    position: absolute; right: 14px; bottom: -18px; pointer-events: none;
    font-family: var(--display); font-weight: 800; line-height: 1;
    font-size: clamp(5rem, 13vw, 11rem); letter-spacing: -.06em;
    color: rgba(255,255,255,.05);
  }
  .panel p { font-size: .98rem; max-width: 40ch; }
  .panel__specs { display: flex; flex-direction: column; gap: 9px; margin-top: 22px; }
  .panel__specs li {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .07em;
    text-transform: uppercase; color: #A7ABC8;
  }
  .panel__specs li::before { content: ""; width: 5px; height: 5px; background: var(--green); flex: none; }
  @media (max-width: 860px) {
    .panel { grid-template-columns: 1fr; width: min(88vw, 560px); min-height: 0; }
  }
  .track.is-snap {
    width: 100%; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .track.is-snap::-webkit-scrollbar { display: none; }
  .track.is-snap .panel { scroll-snap-align: center; }

  /* Capas de profundidad */
  .layer { position: absolute; inset: 0; will-change: transform; }
  .layer > svg { width: 100%; height: 100%; }
  .scene-grid {
    background-image:
      linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 46px 46px;
  }
  .scene-glow { background: radial-gradient(ellipse 60% 55% at 50% 55%, rgba(0,255,0,.14), transparent 70%); }
  .scene-alu {
    background:
      repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 2px, transparent 2px 74px),
      repeating-linear-gradient(0deg,  rgba(255,255,255,.16) 0 2px, transparent 2px 74px);
    -webkit-mask-image: linear-gradient(160deg, #000 20%, rgba(0,0,0,.25) 90%);
    mask-image: linear-gradient(160deg, #000 20%, rgba(0,0,0,.25) 90%);
  }
  .scene-fabric {
    inset: 18% 16%;
    background: linear-gradient(150deg, rgba(255,255,255,.92), rgba(198,255,205,.55) 55%, rgba(0,255,0,.22));
    box-shadow: 0 0 60px rgba(160,255,170,.35);
  }
  .scene-wood {
    inset: 12%;
    background:
      repeating-linear-gradient(96deg, rgba(0,0,0,.16) 0 1px, transparent 1px 9px),
      repeating-linear-gradient(93deg, rgba(255,255,255,.05) 0 1px, transparent 1px 23px),
      linear-gradient(150deg, #B98450, #9A6B3F 60%, #6E4A28);
  }
  .scene-dim { color: var(--green); }

  /* ── Servicios: índice + visor sincronizado ───────────── */
  .svcs { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(26px, 4vw, 76px); align-items: start; }
  @media (max-width: 900px) { .svcs { grid-template-columns: 1fr; } .viewer { display: none; } }

  .family { margin-bottom: 26px; }
  .family__label { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--green-text); padding-bottom: 8px; }

  .svc {
    display: grid; grid-template-columns: 44px 1fr; gap: 4px 14px; align-items: baseline;
    padding: 15px 0 15px 12px; text-decoration: none;
    border-top: 1px solid var(--line); border-left: 2px solid transparent;
    transition: border-color var(--dur), background var(--dur), padding-left var(--dur);
  }
  .family .svc:last-child { border-bottom: 1px solid var(--line); }
  .svc__n { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .1em; color: var(--faint); font-variant-numeric: tabular-nums; }
  .svc__t { font-family: var(--display); font-weight: 600; font-size: clamp(1.1rem, 1.9vw, 1.55rem); letter-spacing: -.025em; line-height: 1.1; }
  .svc__d { grid-column: 2; color: var(--muted); font-size: .93rem; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s var(--ease), opacity .3s, margin-top .4s; }
  .svc:hover,
  .svc.is-active { border-left-color: var(--green); background: var(--paper-hi); padding-left: 18px; }
  .svc.is-active .svc__n { color: var(--green-text); }
  .svc.is-active .svc__d { max-height: 9em; opacity: 1; margin-top: 6px; }

  .viewer { position: sticky; top: calc(var(--nav-h) + 26px); }
  .viewer__frame { position: relative; aspect-ratio: 1 / 1; background: var(--ink); overflow: hidden; }
  .vslide {
    position: absolute; inset: 0; padding: clamp(20px, 2.4vw, 34px);
    display: flex; flex-direction: column; justify-content: space-between;
    opacity: 0; transition: opacity .5s var(--ease); pointer-events: none;
  }
  .vslide.is-active { opacity: 1; }
  .vslide__top { display: flex; justify-content: space-between; gap: 16px; }
  .vslide__n { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .16em; color: var(--green); text-transform: uppercase; }
  .vslide__art { flex: 1; display: grid; place-items: center; padding: 12px 0; }
  .vslide__art svg { width: min(74%, 250px); height: auto; }
  .vslide__spec { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .07em; text-transform: uppercase; color: #A7ABC8; margin-top: 8px; line-height: 1.7; }
  .dg   { stroke: rgba(255,255,255,.62); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
  .dg-a { stroke: var(--green); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
  .dg-f { fill: var(--green); }

  /* ── Tarjetas de índice (hubs) ────────────────────────── */
  .tile {
    display: block; text-decoration: none; background: var(--paper-hi);
    border: 1px solid var(--line); overflow: hidden;
    transition: border-color var(--dur), transform var(--dur) var(--ease);
  }
  .tile:hover { border-color: var(--green); transform: translateY(-3px); }
  .tile__media { position: relative; aspect-ratio: 16 / 10; background: var(--ink-2); overflow: hidden; }
  .tile__media video, .tile__media img { width: 100%; height: 100%; object-fit: cover; }

  /* ── Animaciones en perspectiva (escenas.js) ──────────── */
  .tile__media canvas,
  .escena-marco canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .escena-marco {
    position: relative; margin: 0; overflow: hidden;
    aspect-ratio: 16 / 8; background: var(--ink);
    border: 1px solid var(--line);
  }
  @media (max-width: 700px) { .escena-marco { aspect-ratio: 4 / 3.4; } }
  .tile__body { padding: 20px 22px 24px; }
  .tile__n { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .14em; color: var(--green-text); }
  .tile h3 { font-size: 1.3rem; margin: 6px 0 8px; }
  .tile p { font-size: .93rem; color: var(--muted); }

  /* ── Galería de proyectos con parallax ────────────────── */
  .shot { position: relative; overflow: hidden; background: var(--ink-2); aspect-ratio: 3 / 4; }
  .shot video, .shot img { width: 100%; height: 116%; object-fit: cover; will-change: transform; }
  .shot figcaption {
    position: absolute; inset: auto 0 0 0; padding: 16px 18px; z-index: 2;
    background: linear-gradient(to top, rgba(7,7,61,.92), transparent);
    font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .1em;
    text-transform: uppercase; color: #fff;
  }
  .shot--wide { aspect-ratio: 16 / 10; }

  /* ── Formulario ───────────────────────────────────────── */
  .form { display: grid; gap: 18px; max-width: 640px; }
  .field { display: grid; gap: 6px; }
  .field label { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
  .field input, .field textarea {
    background: transparent; color: #fff;
    border: 1px solid var(--line-dark); border-radius: 0;
    padding: 13px 15px; font-size: 1rem;
    transition: border-color var(--dur);
  }
  .field input:focus, .field textarea:focus { border-color: var(--green); outline: none; }
  .field textarea { resize: vertical; min-height: 130px; }
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .form__status { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .1em; text-transform: uppercase; }
  .form__status[data-state="ok"]    { color: var(--green); }
  .form__status[data-state="error"] { color: #FF7A7A; }

  /* Consentimiento y primera capa de información (RGPD) */
  .consent { display: flex; gap: 11px; align-items: flex-start; font-size: .92rem; color: #C6C9DE; cursor: pointer; }
  .consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--green); flex: none; }
  .consent a { color: var(--green); }
  .form__info {
    font-size: .78rem; line-height: 1.6; color: #8B90AC; max-width: 62ch;
    border-top: 1px solid var(--line-dark); padding-top: 12px;
  }
  .form__info a { color: #B9BDD6; }

  /* ── Contacto y pie ───────────────────────────────────── */
  .cgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 28px; }
  .cgrid > div { border-top: 1px solid var(--line-dark); padding-top: 14px; }
  .cgrid b { display: block; font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--green); margin-bottom: 7px; }
  .cgrid a, .cgrid span { display: block; color: #fff; text-decoration: none; font-size: 1.02rem; }
  .cgrid a:hover { color: var(--green); }

  .foot { background: var(--ink); color: #7C81A2; border-top: 1px solid var(--line-dark); }
  .foot__in { padding-block: 44px 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 30px; }
  .foot h4 { font-family: var(--mono); font-size: var(--fs-mono); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--green); margin-bottom: 12px; }
  .foot a { display: block; color: #B9BDD6; text-decoration: none; padding-block: 4px; font-size: .93rem; }
  .foot a:hover { color: #fff; }
  .foot__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
  .foot__legal a { display: inline; padding: 0; font-size: inherit; color: #9BA0BE; text-decoration: none; }
  .foot__legal a:hover { color: #fff; }
  .foot__bar {
    border-top: 1px solid var(--line-dark); padding-block: 18px;
    display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
    font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .11em; text-transform: uppercase;
  }

  /* ── Maquinaria propia ────────────────────────────────── */
  /* Es el argumento central de la marca, así que se trata como
     una ficha técnica: nombre en mono, descripción al lado. */
  .maqs { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 clamp(24px, 3vw, 56px); }
  .maq {
    display: grid; grid-template-columns: 1fr; gap: 6px;
    padding: 20px 0; border-top: 1px solid var(--line-dark);
  }
  .maq__n {
    font-family: var(--display); font-weight: 600;
    font-size: 1.12rem; letter-spacing: -.02em; color: #fff;
    display: flex; align-items: center; gap: 10px;
  }
  .maq__n::before { content: ""; width: 7px; height: 7px; background: var(--green); flex: none; }
  .maq p { font-size: .93rem; color: #B9BDD6; max-width: 58ch; }

  /* Maquinaria en la portada: el dato técnico manda, grande y
     en verde, porque es lo que ninguna competencia puede copiar. */
  .taller {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0 clamp(24px, 3vw, 48px);
  }
  .taller__item {
    display: flex; flex-direction: column; gap: 8px;
    padding: 26px 0 30px; border-top: 1px solid var(--line);
  }
  .taller__dato {
    font-family: var(--display); font-weight: 800;
    font-size: clamp(1.9rem, 3.2vw, 2.6rem); letter-spacing: -.045em; line-height: 1;
    color: var(--green-text); font-variant-numeric: tabular-nums;
  }
  .taller__item h3 { font-size: 1.15rem; letter-spacing: -.02em; line-height: 1.2; margin-top: 6px; }
  .taller__item p { font-size: .93rem; color: var(--muted); max-width: 40ch; }

  /* ── Sostenibilidad: hechos concretos, con raya verde ───── */
  .sosten { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 clamp(20px, 3vw, 44px); }
  .sosten__item { padding: 20px 0 6px; border-top: 2px solid var(--green); }
  .sosten__item h3 { font-size: 1.08rem; letter-spacing: -.02em; line-height: 1.2; }
  .sosten__item p { font-size: .92rem; color: var(--muted); margin-top: 8px; max-width: 38ch; }
  .on-ink .sosten__item p { color: #B9BDD6; }

  /* ── Calendario de ferias ─────────────────────────────── */
  .calendario { display: flex; flex-direction: column; gap: clamp(40px, 6vh, 72px); }
  .calendario__titulo {
    font-family: var(--display); font-weight: 800;
    font-size: clamp(2.4rem, 5vw, 3.8rem); letter-spacing: -.05em; line-height: 1;
    color: var(--green-text); margin-bottom: 18px;
    font-variant-numeric: tabular-nums;
  }
  .calendario__lista { display: flex; flex-direction: column; }
  .feria {
    display: grid;
    grid-template-columns: minmax(150px, 190px) 1fr minmax(0, 260px) 24px;
    gap: 8px 24px; align-items: baseline;
    padding: 18px 12px; text-decoration: none;
    border-top: 1px solid var(--line);
    border-left: 2px solid transparent;
    transition: background var(--dur), border-color var(--dur), padding-left var(--dur);
  }
  .calendario__lista .feria:last-child { border-bottom: 1px solid var(--line); }
  .feria:hover { background: var(--paper-hi); border-left-color: var(--green); padding-left: 18px; }
  .feria__fecha {
    font-family: var(--mono); font-size: .8rem; letter-spacing: .06em;
    color: var(--muted); font-variant-numeric: tabular-nums; text-transform: uppercase;
  }
  .feria__nombre {
    font-family: var(--display); font-weight: 600;
    font-size: clamp(1.1rem, 1.9vw, 1.45rem); letter-spacing: -.025em; line-height: 1.15;
  }
  .feria__sector { font-size: .88rem; color: var(--muted); }
  .feria__ir { color: var(--green-text); font-size: 1.1rem; transition: transform var(--dur) var(--ease); }
  .feria:hover .feria__ir { transform: translateX(4px); }
  @media (max-width: 760px) {
    .feria { grid-template-columns: 1fr 24px; }
    .feria__fecha, .feria__sector { grid-column: 1; }
    .feria__ir { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  }

  /* ── Preguntas frecuentes ─────────────────────────────── */
  .faqs { display: flex; flex-direction: column; max-width: 76ch; }
  .faq { border-top: 1px solid var(--line); }
  .faqs .faq:last-child { border-bottom: 1px solid var(--line); }
  .faq summary {
    cursor: pointer; list-style: none;
    padding: 18px 40px 18px 0; position: relative;
    font-family: var(--display); font-weight: 600;
    font-size: clamp(1rem, 1.5vw, 1.18rem); letter-spacing: -.02em;
    transition: color var(--dur);
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary:hover { color: var(--green-text); }
  .faq summary::after {
    content: ""; position: absolute; right: 8px; top: 50%;
    width: 11px; height: 11px; margin-top: -7px;
    border-right: 1.5px solid var(--green-text);
    border-bottom: 1.5px solid var(--green-text);
    transform: rotate(45deg);
    transition: transform var(--dur) var(--ease);
  }
  .faq[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
  .faq p { color: var(--muted); padding: 0 40px 22px 0; max-width: 70ch; }

  /* Aviso interno de contenido pendiente (visible solo en desarrollo) */
  /* ── Páginas legales ──────────────────────────────────── */
  .legal { max-width: 78ch; }
  .legal__sec { padding: 26px 0; border-top: 1px solid var(--line); }
  .legal__sec h2 { font-size: 1.35rem; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 12px; }
  .legal__sec p { color: var(--muted); margin-top: 8px; }
  mark.pendiente {
    background: rgba(0, 255, 0, .16); color: var(--ink); padding: 1px 6px;
    font-family: var(--mono); font-size: .82em; letter-spacing: .02em;
  }

  /* ── Aviso de cookies ─────────────────────────────────── */
  .aviso {
    position: fixed; z-index: 120; left: 16px; right: 16px; bottom: 16px;
    max-width: 560px; margin-inline: auto;
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
    padding: 16px 18px; background: var(--ink-2); color: #C6C9DE;
    border: 1px solid var(--line-dark); box-shadow: 0 12px 40px rgba(0,0,0,.35);
    font-size: .88rem; line-height: 1.55;
  }
  .aviso p { flex: 1 1 280px; max-width: none; }
  .aviso a { color: var(--green); }
  .aviso button {
    padding: 9px 18px; background: var(--green); color: var(--ink);
    font-family: var(--display); font-weight: 700;
  }

  .todo {
    border: 1px dashed rgba(0,255,0,.42); padding: 14px 16px;
    font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .06em;
    line-height: 1.9; color: #A7ABC8; max-width: 70ch;
  }
  .todo b { color: var(--green); font-weight: 500; }
}

/* ─── UTILIDADES ────────────────────────────────────────── */
@layer utilities {
  .lead { font-size: var(--fs-lead); }
  .muted { color: var(--muted); }
  .faint { color: var(--faint); }
  .center { text-align: center; }
  .mt-0 { margin-top: 0; }
  .mt-1 { margin-top: 10px; }
  .mt-2 { margin-top: 22px; }
  .mt-3 { margin-top: 38px; }
  .mt-4 { margin-top: 60px; }
  .narrow { max-width: 52ch; }
  .scroll-x { overflow-x: auto; }
  .visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
    }
  }
}