/* ============================================================
   ALUMFER — Sistema visual del sitio (2026)
   Hoja autónoma. La usan todas las páginas; pages.css agrega lo propio de las páginas internas.
   Idea: hoja técnica de taller. Papel claro, azul marino y azul de marca,
   cotas de plano como motivo, fotos de obra como archivo.
   ============================================================ */

/* ─── Fuentes alojadas en el sitio (OFL) ─────────────────── */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('fonts/archivo-latin-var.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
}

:root {
  /* Tema base: azul pizarra oscuro (punto medio entre el carbón original
     y el papel claro). Las tarjetas y algunas secciones usan el tema claro
     (ver "Alcance claro" más abajo). */
  --paper:      #1E2935;
  --paper-2:    #243242;
  --sheet:      #FBFAF7;
  --ink:        #EDF1F5;
  --ink-2:      rgba(237, 241, 245, 0.78);
  --muted:      rgba(237, 241, 245, 0.56);
  --rule:       rgba(237, 241, 245, 0.15);
  --rule-soft:  rgba(237, 241, 245, 0.08);
  --accent:     #4A9DE8;
  --black:      #0D141C;
  --grid-line:  rgba(74, 157, 232, 0.09);
  /* Azul marino (secciones oscuras) */
  --steel:      #0F2847;
  --steel-2:    #183A63;
  --navy-deep:  #0A1C33;
  --on-steel:   #EEF1F4;
  --on-steel-2: rgba(238, 241, 244, 0.68);
  --on-steel-3: rgba(238, 241, 244, 0.42);
  --rule-steel: rgba(238, 241, 244, 0.14);
  /* Marca */
  --blue:       #1B6CC8;
  --blue-deep:  #12509A;
  --blue-soft:  #DCE8F6;
  --blue-tint:  #E6EDF6;
  --blue-light: #4A9DE8;
  --wa:         #1FAF5A;
  --wa-hover:   #17994E;

  --font:  'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --max:    1280px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --r:      3px;
  --ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h:  68px;
}

/* ─── Alcance claro ──────────────────────────────────────── */
/* Todo lo que es "papel" (fotos impresas, fichas, formulario, panel de
   líneas) y las secciones claras redefinen los tokens a tinta oscura. */
.light, #trabajos, #faq, .obras-strip, .nearby-section,
.print, .stage, .lines, .extra, .textures, .form, .contact-form,
.product-row, .obras-strip__item, .thanks__steps li, .section--mid .feature {
  --paper:     #F2EFEA;
  --paper-2:   #E8E3DA;
  --ink:       #15171A;
  --ink-2:     #3F444B;
  --muted:     #6F6D67;
  --rule:      rgba(21, 23, 26, 0.14);
  --rule-soft: rgba(21, 23, 26, 0.08);
  --accent:    #1B6CC8;
  --grid-line: rgba(27, 108, 200, 0.07);
  color: var(--ink);
}
#trabajos, #faq, .obras-strip { background: var(--paper-2); }

/* ─── Reset mínimo ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; background: none; border: 0; }
button { cursor: pointer; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ─── Tipografía ─────────────────────────────────────────── */
.display {
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: -0.035em;
  line-height: 0.95;
}
.h2 {
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  font-weight: 700;
  font-stretch: 108%;
  letter-spacing: -0.03em;
  line-height: 1;
}
.h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--ink-2); max-width: 46ch; line-height: 1.55; }
.mono {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.muted { color: var(--muted); }

/* Encabezado de sección: número + rótulo en mono, con filete */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem 3rem;
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.sec-tag {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
}
.sec-tag b { color: var(--accent); font-weight: 500; }
.sec-tag::after { content: ''; flex: 1; }
.sec-head .lead { justify-self: end; }
.on-steel .sec-tag { border-color: var(--rule-steel); color: var(--on-steel-3); }
.on-steel .sec-tag b { color: var(--blue-light); }
.on-steel .lead { color: var(--on-steel-2); }

/* ─── Botones ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.35rem;
  border-radius: var(--r);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.005em;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-deep); }
.btn--white { background: #fff; color: var(--blue-deep); }
.btn--white:hover { background: var(--blue-tint); }
.btn--wa { background: var(--wa); color: #fff; }
.btn--wa:hover { background: var(--wa-hover); }
.btn--line { border: 1px solid var(--ink); color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--paper); }
.btn--line-light { border: 1px solid var(--rule-steel); color: var(--on-steel); }
.btn--line-light:hover { border-color: var(--on-steel); }
.btn .arrow { transition: transform 200ms var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ─── Barra superior + navegación ────────────────────────── */
.topbar {
  background: var(--black);
  color: rgba(255,255,255,0.7);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.topbar .wrap {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.5rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.topbar a:hover { color: #fff; }
.topbar__group { display: flex; gap: 1.5rem; }

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(13, 20, 28, 0.9);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--rule); }
.nav .wrap { display: flex; align-items: center; gap: 2rem; height: var(--nav-h); }
.brand { display: flex; align-items: center; gap: 0.7rem; }
.brand img { width: 44px; height: auto; }
.brand__name { font-weight: 800; font-stretch: 118%; letter-spacing: 0.08em; font-size: 1.05rem; line-height: 1; }
.brand__sub { display: block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.nav__links { display: flex; gap: 1.75rem; margin-left: auto; font-size: 0.92rem; font-weight: 500; }
.nav__links a { position: relative; padding-block: 0.4rem; color: var(--ink-2); }
.nav__links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px; background: var(--blue);
  transition: right 220ms var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { right: 0; }
.nav__cta { padding: 0.7rem 1rem; font-size: 0.88rem; }
.nav__burger { display: none; margin-left: auto; width: 44px; height: 44px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.nav__burger span { width: 22px; height: 1.5px; background: var(--ink); transition: transform 200ms var(--ease), opacity 200ms; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.drawer {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: 49;
  background: var(--steel); color: #fff;
  overflow-y: auto;
  padding: 1.5rem var(--gutter) 2rem;
  display: flex; flex-direction: column; gap: 0.25rem;
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 0s 220ms;
}
.drawer.is-open { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.drawer a:not(.btn) {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-block: 1rem; border-bottom: 1px solid var(--rule-steel);
  font-size: 1.75rem; font-weight: 700; font-stretch: 112%; letter-spacing: -0.03em;
}
.drawer a:not(.btn) span { font-family: var(--mono); font-size: 0.75rem; color: var(--blue-light); font-weight: 500; }
.drawer__info { margin-top: auto; padding-top: 1.5rem; display: grid; gap: 0.35rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--on-steel-2); }
.drawer__info a { color: #fff; }
.drawer .btn { margin-top: 1.5rem; justify-content: center; }

/* ─── Hero ───────────────────────────────────────────────── */
.hero {
  padding-top: clamp(2.5rem, 6vw, 5rem);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
}
.hero__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.hero__kicker { display: flex; align-items: center; gap: 0.6rem; color: var(--ink-2); margin-bottom: 1.5rem; }
.hero__kicker::before { content: ''; width: 8px; height: 8px; background: var(--blue); }
.hero__title { font-size: clamp(2.9rem, 7vw, 6.6rem); max-width: 13ch; }
.hero__title .accent { color: var(--accent); }

/* Cota (línea de medida) bajo "a medida" */
.cota { display: block; margin-top: 1.1rem; width: 100%; color: var(--accent); }
.cota svg { width: 100%; height: 26px; overflow: visible; }
.cota line, .cota path { stroke: currentColor; stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.cota text { font-family: var(--mono); font-size: 11px; fill: currentColor; letter-spacing: 0.06em; }
.cota .cota__run { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.4s var(--ease) 0.3s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.hero__side { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem 5rem; align-items: end; }
.hero__copy { display: grid; gap: 1.5rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero__stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule);
}
.stat { padding: 1rem 1rem 0 0; }
.stat + .stat { padding-left: 1rem; border-left: 1px solid var(--rule); }
.stat__n { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 700; font-stretch: 110%; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat__n { color: #fff; }
.stat__n small { font-size: 0.55em; color: var(--accent); margin-left: 2px; }
.stat__l { margin-top: 0.45rem; color: var(--muted); font-size: 0.68rem; }

/* Tira de obras: archivo que se desplaza */
.reel {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-block: 1.25rem 0;
  border-top: 1px solid var(--rule);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.reel__track { display: flex; gap: 14px; width: max-content; animation: reel 70s linear infinite; }
.reel:hover .reel__track { animation-play-state: paused; }
@keyframes reel { to { transform: translateX(-50%); } }
.print {
  flex: 0 0 auto;
  background: var(--sheet);
  padding: 8px 8px 0;
  border: 1px solid var(--rule-soft);
  box-shadow: 0 1px 0 rgba(21,23,26,0.04), 0 10px 24px -18px rgba(21,23,26,0.35);
}
.print img { height: clamp(220px, 26vw, 330px); width: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.print figcaption { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.15rem 0.6rem; color: var(--muted); font-size: 0.66rem; }
.print figcaption b { color: var(--ink); font-weight: 500; }

/* ─── Bloque oscuro: empresa ─────────────────────────────── */
.steel { background: var(--steel); color: var(--on-steel); }
.section { padding-block: clamp(4.5rem, 9vw, 8rem); }

.about__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem 5rem; align-items: start; }
.about__title { font-size: clamp(2.4rem, 5.4vw, 4.6rem); }
.about__title span { color: var(--on-steel-3); }
.about__text { margin-top: 1.75rem; color: var(--on-steel-2); font-size: 1.08rem; max-width: 48ch; }
/* Animación: un día en una casa (24 s, en loop). Mañana: Módena corrediza
   con mosquitero; mediodía: Herrero batiente; tarde: A30 New puerta
   ventana; noche con lluvia: DVH. */
.about__anim { position: relative; margin: 0; width: 100%; max-width: 560px; justify-self: end; }
.casa { display: block; width: 100%; height: auto; overflow: hidden; border-radius: 6px; font-family: var(--mono); }
.casa * { animation-duration: 24s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); animation-fill-mode: both; }
.casa.is-pausado * { animation-play-state: paused; }

.casa-estrellas circle { fill: #fff; }
.casa-sol-h { fill: rgba(255,226,150,0.35); }
.casa-sol-c { fill: #FFE08A; }
.casa-luna-c { fill: #EEF1F4; }
.casa-luna-s { fill: #0E2140; }
.casa-nube { fill: rgba(255,255,255,0.85); }
.casa-tormenta path { fill: #3B4A5E; }
.casa-arbol { fill: #3E7A55; stroke: #4A3A2C; stroke-width: 4; stroke-linecap: round; }
.casa-pared { fill: #DCE2E8; }
.casa-sombra { fill: rgba(10,28,51,0.12); }
.casa-techo { fill: #2A3644; }
.casa-suelo { fill: #4B7D5A; }
.casa-int { fill: #33414F; }
.casa-tela { fill: #E9DCC6; transform-box: fill-box; transform-origin: 50% 0; }
.casa-mueble { fill: #4A5968; stroke: #4A5968; stroke-width: 2; }
.casa-planta { fill: #5E9C6E; }
.casa-luzpiso { fill: rgba(255,230,170,0.5); opacity: 0; }
.casa-calida { fill: #F5C46E; }
.casa-oscuro { fill: #0A1C33; opacity: 0; }
.casa-alu { fill: #F4F6F8; stroke: #9AA6B2; stroke-width: 0.6; }
.casa-marco { fill: #E6EAEE; }
.casa-alfeizar { fill: #B9C2CC; }
.casa-vid { fill: rgba(150,196,236,0.42); }
.casa-brillo { fill: rgba(255,255,255,0.28); }
.casa-malla { opacity: 0.9; }
.casa-mosca-c { fill: #1E2328; }
.casa-mosca-a { stroke: #1E2328; stroke-width: 0.7; fill: none; }
.casa-vapor path { fill: none; stroke: rgba(255,255,255,0.8); stroke-width: 1.6; stroke-linecap: round; }
.casa-gotas path { stroke: rgba(200,225,250,0.85); stroke-width: 1.2; stroke-linecap: round; }
.casa-onda { fill: none; stroke: #F7C978; stroke-width: 2.5; stroke-linecap: round; transform-box: view-box; }
.casa-guia { stroke: #4A9DE8; stroke-width: 1; stroke-dasharray: 3 3; fill: none; }
.casa-lupa-f { fill: #0F2847; }
.casa-lupa-afuera { fill: #1D3557; }
.casa-lupa-adentro { fill: #5A4A36; }
.casa-lupa-vid { fill: #9CCBF0; }
.casa-lupa-camara { fill: rgba(156,203,240,0.18); }
.casa-lupa-gotas path { stroke: #C8E1FA; stroke-width: 1.4; stroke-linecap: round; }
.casa-lupa-frio { stroke: #9CCBF0; stroke-width: 1.6; fill: none; stroke-linecap: round; }
.casa-lupa-calor { stroke: #F7C978; stroke-width: 1.6; fill: none; stroke-linecap: round; }
.casa-lupa-borde { fill: none; stroke: #4A9DE8; stroke-width: 2; }
.casa-lupa-t { fill: #EEF1F4; font-size: 10px; text-anchor: middle; letter-spacing: 0.04em; paint-order: stroke; stroke: rgba(10,28,51,0.85); stroke-width: 3px; }
.casa-cap-t { fill: #4A9DE8; font-size: 11px; letter-spacing: 0.14em; }
.casa-cap-d { fill: #EEF1F4; font-family: var(--font); font-size: 15.5px; }
.casa-pt { fill: rgba(238,241,244,0.22); }
.casa-estatico { display: none; }

/* cielo */
.casa-tarde { animation-name: casa-tarde; }
.casa-noche, .casa-estrellas, .casa-luna { animation-name: casa-noche; }
.casa-sol { animation-name: casa-sol; }
.casa-nubes { animation-name: casa-nubes; }
.casa-tormenta { animation-name: casa-tormenta; }
.casa-luz { animation-name: casa-luz; }
.casa-oscuro { animation-name: casa-oscuro; }
.casa-arbol--a { animation-name: casa-arbol; }
@keyframes casa-tarde { 0%, 52% { opacity: 0; } 60%, 66% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes casa-noche { 0%, 64% { opacity: 0; } 72%, 92% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes casa-sol { 0% { transform: translate(-30px, 300px); } 6% { transform: translate(40px, 150px); } 32% { transform: translate(260px, 46px); } 58% { transform: translate(470px, 140px); } 66%, 100% { transform: translate(540px, 300px); } }
@keyframes casa-nubes { 0% { transform: translateX(-20px); opacity: 1; } 60% { transform: translateX(40px); opacity: 1; } 68%, 100% { transform: translateX(50px); opacity: 0; } }
@keyframes casa-tormenta { 0%, 62% { opacity: 0; transform: translateY(-30px); } 70%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(-30px); } }
@keyframes casa-luz { 0%, 64% { opacity: 0; } 72%, 92% { opacity: 0.68; } 98%, 100% { opacity: 0; } }
@keyframes casa-arbol { 0%, 56% { opacity: 1; } 72%, 92% { opacity: 0.45; } 99%, 100% { opacity: 1; } }
@keyframes casa-oscuro { 0%, 56% { opacity: 0; } 64% { opacity: 0.25; } 72%, 92% { opacity: 0.62; } 99%, 100% { opacity: 0; } }

/* mañana: Módena + mosquitero */
.casa-mod-hoja { animation-name: casa-mod; }
.casa-mosq { animation-name: casa-mosq; }
.casa-cortina .casa-tela { animation-name: casa-cortina; }
.casa-mosca { animation-name: casa-mosca; }
@keyframes casa-mod { 0%, 6% { transform: none; } 11%, 27% { transform: translateX(-74px); } 32%, 100% { transform: none; } }
@keyframes casa-mosq { 0%, 12% { transform: none; } 16%, 23% { transform: translateX(72px); } 27%, 100% { transform: none; } }
@keyframes casa-cortina { 0%, 11% { transform: none; } 14% { transform: skewX(7deg); } 17% { transform: skewX(-2deg); } 20% { transform: skewX(6deg); } 23% { transform: skewX(-1deg); } 27%, 100% { transform: none; } }
@keyframes casa-mosca {
  0%, 15% { opacity: 0; transform: translate(250px, 222px); }
  16% { opacity: 1; transform: translate(240px, 228px); }
  17.5% { transform: translate(196px, 252px); }
  18.5% { transform: translate(226px, 236px); }
  19.5% { transform: translate(184px, 268px); }
  20.5% { transform: translate(230px, 252px); }
  22% { opacity: 1; transform: translate(262px, 210px); }
  23%, 100% { opacity: 0; transform: translate(280px, 196px); }
}

/* mediodía: Herrero batiente */
.casa-bat { animation-name: casa-bat; transform-box: fill-box; transform-origin: 0 50%; }
.casa-vapor { animation-name: casa-vapor; }
.casa-vapor path { animation: casa-sube 3s linear infinite; }
.casa-vapor path:nth-child(2) { animation-delay: -1s; }
.casa-vapor path:nth-child(3) { animation-delay: -2s; }
@keyframes casa-bat { 0%, 29% { transform: none; } 34%, 44% { transform: scaleX(0.32) skewY(-14deg); } 49%, 100% { transform: none; } }
@keyframes casa-vapor { 0%, 33% { opacity: 0; } 36%, 44% { opacity: 1; } 47%, 100% { opacity: 0; } }
@keyframes casa-sube { 0% { transform: translateY(6px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-34px); opacity: 0; } }

/* tarde: A30 New */
.casa-puerta { animation-name: casa-puerta; }
.casa-luzpiso { animation-name: casa-luzpiso; }
@keyframes casa-puerta { 0%, 50% { transform: none; } 55%, 63% { transform: translateX(54px); } 68%, 100% { transform: none; } }
@keyframes casa-luzpiso { 0%, 53% { opacity: 0; } 57%, 62% { opacity: 1; } 66%, 100% { opacity: 0; } }

/* noche: lluvia, ruido y DVH */
.casa-lluvia { animation-name: casa-lluvia; }
.casa-gotas { animation: casa-cae 0.7s linear infinite; }
.casa-gotas--2 { animation-delay: -0.35s; }
.casa-ondas { animation-name: casa-ondas; }
.casa-onda { animation: casa-onda 2.4s ease-out infinite; }
.casa-onda--2 { animation-delay: -0.8s; }
.casa-onda--3 { animation-delay: -1.6s; }
.casa-lupa { animation-name: casa-lupa; transform-box: view-box; transform-origin: 300px 330px; }
@keyframes casa-lluvia { 0%, 68% { opacity: 0; } 72%, 88% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes casa-cae { from { transform: translateY(-120px); } to { transform: translateY(260px); } }
@keyframes casa-ondas { 0%, 72% { opacity: 0; } 75%, 88% { opacity: 1; } 91%, 100% { opacity: 0; } }
@keyframes casa-onda { 0% { transform: translateX(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateX(46px); opacity: 0; } }
@keyframes casa-lupa { 0%, 73% { opacity: 0; transform: scale(0.6); } 77%, 89% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: scale(0.6); } }

/* textos y progreso */
.casa-cap--1 { animation-name: casa-c1; }
.casa-cap--2 { animation-name: casa-c2; }
.casa-cap--3 { animation-name: casa-c3; }
.casa-cap--4 { animation-name: casa-c4; }
.casa-cap { opacity: 0; }
@keyframes casa-c1 { 0%, 3% { opacity: 0; } 5%, 24% { opacity: 1; } 26%, 100% { opacity: 0; } }
@keyframes casa-c2 { 0%, 27% { opacity: 0; } 29%, 46% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes casa-c3 { 0%, 49% { opacity: 0; } 51%, 66% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes casa-c4 { 0%, 70% { opacity: 0; } 72%, 91% { opacity: 1; } 93%, 100% { opacity: 0; } }
.casa-pt--1 { animation-name: casa-p1; } .casa-pt--2 { animation-name: casa-p2; } .casa-pt--3 { animation-name: casa-p3; } .casa-pt--4 { animation-name: casa-p4; }
@keyframes casa-p1 { 0%, 3% { fill: rgba(238,241,244,0.22); } 5%, 24% { fill: #4A9DE8; } 26%, 100% { fill: rgba(238,241,244,0.22); } }
@keyframes casa-p2 { 0%, 27% { fill: rgba(238,241,244,0.22); } 29%, 46% { fill: #4A9DE8; } 48%, 100% { fill: rgba(238,241,244,0.22); } }
@keyframes casa-p3 { 0%, 49% { fill: rgba(238,241,244,0.22); } 51%, 66% { fill: #4A9DE8; } 68%, 100% { fill: rgba(238,241,244,0.22); } }
@keyframes casa-p4 { 0%, 70% { fill: rgba(238,241,244,0.22); } 72%, 91% { fill: #4A9DE8; } 93%, 100% { fill: rgba(238,241,244,0.22); } }

@media (prefers-reduced-motion: reduce) {
  .casa * { animation: none !important; }
  .casa-tarde, .casa-noche, .casa-estrellas, .casa-luna, .casa-tormenta, .casa-luz, .casa-oscuro, .casa-lluvia, .casa-ondas, .casa-lupa, .casa-vapor, .casa-mosca, .casa-cap, .casa-pt { display: none; }
  .casa-sol { transform: translate(260px, 46px); }
  .casa-estatico { display: inline; }
}
.features {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--rule-steel);
}
.features .feature { padding: 1.5rem 1.5rem 0 0; }
.features .feature + .feature { padding-left: 1.5rem; border-left: 1px solid var(--rule-steel); }
.features .feature__n { color: var(--blue-light); }
.features .feature h3 { margin-top: 1.4rem; font-size: 1.15rem; font-weight: 600; }
.features .feature p { margin-top: 0.6rem; color: var(--on-steel-2); font-size: 0.93rem; line-height: 1.55; }

/* ─── Banda azul de marca ────────────────────────────────── */
.band-blue { background: var(--blue); color: #fff; }
.band-blue .sec-tag { border-color: rgba(255,255,255,0.28); color: rgba(255,255,255,0.75); }
.band-blue .sec-tag b { color: #fff; }
.band-blue .lead { color: rgba(255,255,255,0.85); }
.band-blue .steps, .band-blue .step { border-color: rgba(255,255,255,0.25); }
.band-blue .step { color: rgba(255,255,255,0.6); }
.band-blue .step:hover { color: rgba(255,255,255,0.85); }
.band-blue .step.is-active { color: #fff; }
.band-blue .step.is-active .step__n { color: #fff; }
.band-blue .step__d { color: rgba(255,255,255,0.88); }
.band-blue .step__bar { background: rgba(255,255,255,0.22); }
.band-blue .step__bar i { background: #fff; }
.band-blue .stage { color: var(--ink); border-color: transparent; box-shadow: 0 30px 60px -40px rgba(5,20,45,0.8); }

/* ─── Proceso (interactivo) ──────────────────────────────── */
.process__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2.5rem 4rem; align-items: stretch; }
.steps { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.step {
  display: grid; grid-template-columns: 3.2rem 1fr; gap: 0 1rem;
  text-align: left; padding: 1.35rem 0; border-bottom: 1px solid var(--rule);
  color: var(--muted);
  transition: color 200ms var(--ease);
}
.step__n { font-family: var(--mono); font-size: 0.8rem; padding-top: 0.35rem; }
.step__t { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 600; font-stretch: 106%; letter-spacing: -0.02em; line-height: 1.2; }
.step__d { grid-column: 2; max-height: 0; overflow: hidden; opacity: 0; color: var(--ink-2); font-size: 0.97rem; transition: max-height 320ms var(--ease), opacity 220ms var(--ease), margin 320ms var(--ease); }
.step__bar { grid-column: 2; height: 2px; background: var(--rule-soft); margin-top: 0; overflow: hidden; opacity: 0; transition: opacity 200ms; }
.step__bar i { display: block; height: 100%; width: 0; background: var(--blue); }
.step:hover { color: var(--ink-2); }
.step.is-active { color: var(--ink); }
.step.is-active .step__n { color: var(--accent); }
.step.is-active .step__d { max-height: 8rem; opacity: 1; margin-top: 0.6rem; }
.step.is-active .step__bar { opacity: 1; margin-top: 1rem; }
.step.is-active .step__bar i { animation: stepbar var(--step-ms, 6000ms) linear forwards; }
.process.is-paused .step.is-active .step__bar i { animation-play-state: paused; }
@keyframes stepbar { to { width: 100%; } }

.stage {
  position: relative; min-height: 440px;
  background: var(--sheet); border: 1px solid var(--rule-soft);
  overflow: hidden;
}
.stage__panel {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 360ms var(--ease), transform 360ms var(--ease), visibility 0s 360ms;
}
.stage__panel.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.stage__panel > img { width: 100%; height: 100%; object-fit: cover; }
.stage__label {
  position: absolute; left: 14px; bottom: 14px;
  background: var(--sheet); color: var(--ink); padding: 0.4rem 0.6rem; font-size: 0.66rem;
}
.grid-paper {
  background-color: var(--sheet);
  background-image:
    linear-gradient(var(--rule-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Chat de ejemplo (paso 1) */
.chat { width: min(360px, 86%); display: flex; flex-direction: column; gap: 10px; font-size: 0.92rem; }
.chat__head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); margin-bottom: 6px; }
.chat__avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; }
.chat__avatar img { width: 20px; }
.chat__head b { display: block; font-size: 0.92rem; }
.chat__head span { font-size: 0.7rem; color: var(--wa); }
.bubble { padding: 0.65rem 0.85rem; border-radius: 10px; max-width: 86%; line-height: 1.45; box-shadow: 0 1px 0 rgba(0,0,0,0.05); }
.bubble--out { align-self: flex-end; background: #D9F5DF; border-bottom-right-radius: 2px; }
.bubble--in { align-self: flex-start; background: #fff; border: 1px solid var(--rule-soft); border-bottom-left-radius: 2px; }
.bubble small { display: block; margin-top: 3px; text-align: right; font-size: 0.66rem; color: var(--muted); }
.stage__panel.is-active .bubble { animation: pop 420ms var(--ease) both; }
.stage__panel.is-active .bubble:nth-of-type(2) { animation-delay: 500ms; }
.stage__panel.is-active .bubble:nth-of-type(3) { animation-delay: 1100ms; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
.chat__note { margin-top: 6px; font-size: 0.66rem; color: var(--muted); text-align: center; }

/* Plano con cotas (paso 2) */
.plan { width: min(440px, 86%); color: var(--ink); }
.plan svg { width: 100%; height: auto; overflow: visible; }
.plan .frame { fill: none; stroke: var(--ink); stroke-width: 2; }
.plan .sash { fill: rgba(27,108,200,0.06); stroke: var(--ink); stroke-width: 1.2; }
.plan .dim { stroke: var(--blue); stroke-width: 1; fill: none; }
.plan .dim-t { font-family: var(--mono); font-size: 12px; fill: var(--blue); letter-spacing: 0.04em; }
.plan .ext { stroke: var(--blue); stroke-width: 0.8; stroke-dasharray: 3 3; }
.plan .anim { stroke-dasharray: 400; stroke-dashoffset: 400; }
.stage__panel.is-active .plan .anim { animation: draw 1.1s var(--ease) 0.15s forwards; }
.stage__panel.is-active .plan .anim--2 { animation-delay: 0.6s; }
.plan .dim-t { opacity: 0; }
.stage__panel.is-active .plan .dim-t { animation: fade 400ms ease 1.1s forwards; }
@keyframes fade { to { opacity: 1; } }

/* ─── Galería: archivo de obra ───────────────────────────── */
.works { background: var(--paper-2); }
.filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 2rem; }
.filter {
  display: inline-flex; align-items: baseline; gap: 0.45rem;
  padding: 0.55rem 0.85rem; border: 1px solid var(--rule); border-radius: var(--r);
  font-size: 0.92rem; font-weight: 500; color: var(--ink-2);
  transition: background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}
.filter sup { font-family: var(--mono); font-size: 0.66rem; color: var(--muted); }
.filter:hover { border-color: var(--ink); color: var(--ink); }
.filter[aria-selected="true"] { background: var(--blue); border-color: var(--accent); color: #fff; }
.filter[aria-selected="true"] sup { color: rgba(255,255,255,0.6); }

/* Grilla editorial: misma proporción, sin marcos; una obra destacada
   grande y las fotos apaisadas a doble ancho */
.archive { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 12px; }
.archive__item { position: relative; display: block; width: 100%; padding: 0; text-align: left; border-radius: 6px; overflow: hidden; background: #1B2633; }
.archive__item[hidden] { display: none; }
.archive__frame { position: relative; display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5; overflow: hidden; }
.archive__item.is-ancho { grid-column: span 2; }
.archive__item.is-ancho .archive__frame { aspect-ratio: 8 / 5; }
.archive__item.is-grande { grid-column: span 2; grid-row: span 2; }
.archive__item.is-grande .archive__frame { aspect-ratio: auto; }
.archive__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease), filter 400ms var(--ease); }
.archive__item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,18,28,0) 55%, rgba(10,18,28,0.72) 100%); pointer-events: none; transition: opacity 300ms var(--ease); }
.archive__item .figcap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.9rem 1rem; color: rgba(255,255,255,0.6); font-size: 0.66rem; letter-spacing: 0.08em; }
.archive__item .figcap > span { display: none; }
.archive__item .figcap b { color: #fff; font-family: var(--font); font-size: 0.95rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.archive__item.is-grande .figcap b { font-size: 1.2rem; }
.archive__item:hover img, .archive__item:focus-visible img { transform: scale(1.045); }
.zoom { position: absolute; right: 10px; top: 10px; z-index: 1; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,0.92); color: var(--black); opacity: 0; transform: scale(0.9); transition: opacity 200ms var(--ease), transform 200ms var(--ease); }
.archive__item:hover .zoom, .archive__item:focus-visible .zoom { opacity: 1; transform: scale(1); }
.zoom svg { width: 16px; height: 16px; }
.works__foot { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; align-items: center; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.works__foot .btns { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ─── Líneas (selector) ──────────────────────────────────── */
.lines { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); border: 1px solid var(--rule); background: var(--sheet); }
.lines__list { border-right: 1px solid var(--rule); display: flex; flex-direction: column; }
.line-tab {
  display: grid; grid-template-columns: 2.4rem 1fr auto; align-items: baseline; gap: 0.5rem;
  padding: 1.25rem 1.5rem; text-align: left; border-bottom: 1px solid var(--rule-soft);
  color: var(--muted); position: relative;
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}
.line-tab:last-child { border-bottom: 0; }
.line-tab .mono { font-size: 0.7rem; }
.line-tab__name { font-size: 1.3rem; font-weight: 600; font-stretch: 106%; letter-spacing: -0.02em; }
.line-tab__tag { font-size: 0.62rem; color: var(--accent); }
.line-tab::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--blue); transform: scaleY(0); transition: transform 220ms var(--ease); }
.line-tab:hover { color: var(--ink-2); background: var(--paper); }
.line-tab[aria-selected="true"] { color: var(--blue-deep); background: var(--blue-tint); }
.line-tab[aria-selected="true"]::before { transform: scaleY(1); }
.lines__more { margin-top: auto; padding: 1.25rem 1.5rem; border-top: 1px solid var(--rule); font-size: 0.92rem; color: var(--ink-2); }
.lines__more a { color: var(--accent); font-weight: 600; }

.line-panel { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0; }
.line-panel[hidden] { display: none; }
.line-panel__img { position: relative; display: grid; place-items: center; padding: 2rem; border-right: 1px solid var(--rule-soft); }
.line-panel__img img { max-height: 340px; width: auto; mix-blend-mode: multiply; }
.line-panel__img .mono { position: absolute; left: 1rem; top: 1rem; color: var(--muted); font-size: 0.64rem; }
.line-panel__body { padding: 2rem; display: flex; flex-direction: column; gap: 1.25rem; animation: fade-up 380ms var(--ease) both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } }
.line-panel__body h3 { font-size: 2rem; font-weight: 700; font-stretch: 110%; letter-spacing: -0.03em; line-height: 1; }
.line-panel__body p { color: var(--ink-2); font-size: 0.97rem; }
.spec { border-top: 1px solid var(--rule); padding-top: 0.75rem; }
.spec dt { color: var(--muted); font-size: 0.64rem; margin-bottom: 0.45rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.chip { padding: 0.3rem 0.55rem; border: 1px solid rgba(27,108,200,0.22); border-radius: var(--r); font-size: 0.82rem; background: var(--blue-tint); color: var(--blue-deep); }

/* ─── Adelanto del diseñador (home) ──────────────────────── */
.disena-cta { background: var(--steel); }
.disena-cta__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 2.5rem 4rem; align-items: center; margin-top: 2.5rem; }
.disena-cta__text { display: grid; gap: 1.4rem; justify-items: start; }
.disena-cta__plano { font-size: 0.92rem; color: var(--on-steel-2, var(--ink-2)); }
.disena-cta__plano a { color: var(--blue-light); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.checks { display: grid; gap: 0.6rem; }
.checks li { position: relative; padding-left: 1.8rem; color: var(--ink-2); }
.checks li::before { content: ''; position: absolute; left: 0; top: 0.3em; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8.5 2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; }
.disena-cta__demo { position: relative; display: block; border-radius: var(--r); padding: 1.25rem; color: #15171A; box-shadow: 0 30px 60px -35px rgba(0,0,0,0.7); transition: transform 300ms var(--ease); }
.disena-cta__demo:hover { transform: translateY(-4px) rotate(-0.4deg); }
.disena-cta__demo svg { width: 100%; height: auto; overflow: visible; }
.disena-cta__badge { position: absolute; right: 1rem; bottom: 1rem; background: var(--blue); color: #fff; padding: 0.45rem 0.7rem; font-size: 0.66rem; }
.demo-t { font-family: var(--mono); font-size: 12px; fill: #1B6CC8; text-anchor: middle; }
.demo-cotas .d1, .demo-cotas .d2 { stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-in .demo-cotas .d1 { animation: draw 1s var(--ease) 0.2s forwards; }
.is-in .demo-cotas .d2 { animation: draw 1s var(--ease) 0.5s forwards; }
.demo-hoja { animation: demo-slide 5s ease-in-out 1.2s infinite; }
@keyframes demo-slide { 0%, 20% { transform: none; } 45%, 70% { transform: translateX(-120px); } 95%, 100% { transform: none; } }
.demo-cursor { fill: #1B6CC8; fill-opacity: 0.25; stroke: #1B6CC8; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: demo-pulse 1.8s ease-out infinite; }
@keyframes demo-pulse { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
.nav__links .nav__new { color: var(--ink); }
.nav__links .nav__new::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 0.45rem; vertical-align: middle; box-shadow: 0 0 0 0 rgba(74, 157, 232,0.6); animation: nav-ping 2.4s ease-out infinite; }
@keyframes nav-ping { 0% { box-shadow: 0 0 0 0 rgba(74, 157, 232,0.6); } 70%, 100% { box-shadow: 0 0 0 7px rgba(74, 157, 232,0); } }

/* ─── También hacemos ────────────────────────────────────── */
.extras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.extra { background: var(--sheet); border: 1px solid var(--rule-soft); display: flex; flex-direction: column; }
.extra__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.extra__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.extra:hover .extra__img img { transform: scale(1.04); }
.extra__body { padding: 1.1rem 1.1rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.extra__body .mono { color: var(--muted); font-size: 0.62rem; }
.extra__body p { color: var(--ink-2); font-size: 0.9rem; line-height: 1.5; }

.textures { margin-top: 16px; background: var(--sheet); border: 1px solid var(--rule-soft); padding: 1.5rem; display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 1.5rem 2.5rem; align-items: center; }
.textures p { color: var(--ink-2); font-size: 0.93rem; margin-top: 0.5rem; }
.textures__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.texture { position: relative; }
.texture img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; transition: transform 220ms var(--ease); }
.texture span { display: block; margin-top: 4px; font-size: 0.6rem; color: var(--muted); text-align: center; }
.texture:hover img { transform: scale(1.08); }

/* ─── Reseñas ────────────────────────────────────────────── */
.reviews__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem; margin-bottom: 2.5rem; }
.rating { display: flex; align-items: center; gap: 1.1rem; }
.rating__n { font-size: clamp(3.5rem, 7vw, 5.5rem); font-weight: 700; font-stretch: 112%; letter-spacing: -0.04em; line-height: 0.9; }
.rating__stars { color: #E9A23B; letter-spacing: 2px; font-size: 1.1rem; }
.rating__meta { color: var(--on-steel-2); font-size: 0.9rem; }
.quotes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.quote { background: var(--steel-2); padding: 1.75rem; display: flex; flex-direction: column; gap: 1.25rem; border-top: 2px solid var(--blue-light); }
.quote blockquote { font-size: 1.12rem; line-height: 1.5; letter-spacing: -0.005em; }
.quote footer { margin-top: auto; display: flex; justify-content: space-between; gap: 1rem; color: var(--on-steel-3); font-size: 0.66rem; }
.quote footer b { color: var(--on-steel); font-weight: 500; }

.guarantee { margin-top: clamp(3rem, 6vw, 5rem); display: grid; grid-template-columns: minmax(0, 0.8fr) repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule-steel); }
.guarantee > div { padding: 1.5rem 1.5rem 0 0; }
.guarantee > div + div { padding-left: 1.5rem; border-left: 1px solid var(--rule-steel); }
.guarantee h3 { font-size: 1.05rem; font-weight: 600; margin-top: 0.75rem; }
.guarantee p { margin-top: 0.4rem; color: var(--on-steel-2); font-size: 0.92rem; }
.guarantee .mono { color: var(--blue-light); }

/* ─── FAQ ────────────────────────────────────────────────── */
.faq__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2rem 5rem; align-items: start; }
.faq__aside { position: sticky; top: calc(var(--nav-h) + 2rem); }
.faq__aside p { margin-top: 1.25rem; color: var(--ink-2); max-width: 34ch; }
.faq__aside .btn { margin-top: 1.5rem; }
.qa { border-top: 1px solid var(--rule); }
.qa:last-child { border-bottom: 1px solid var(--rule); }
.qa summary { list-style: none; display: grid; grid-template-columns: 2.4rem 1fr 1.5rem; gap: 0.5rem; align-items: baseline; padding: 1.3rem 0; cursor: pointer; font-size: 1.12rem; font-weight: 600; letter-spacing: -0.01em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .mono { color: var(--muted); font-size: 0.7rem; }
.qa summary::after { content: '+'; font-family: var(--mono); font-size: 1.3rem; font-weight: 400; color: var(--accent); justify-self: end; transition: transform 220ms var(--ease); }
.qa[open] summary::after { transform: rotate(45deg); }
.qa p { padding: 0 1.5rem 1.4rem 2.9rem; color: var(--ink-2); max-width: 62ch; }

/* ─── Contacto ───────────────────────────────────────────── */
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem 5rem; }
.contact__title { font-size: clamp(2.6rem, 6vw, 5rem); }
.contact__list { margin-top: 2.5rem; border-top: 1px solid var(--rule-steel); }
.contact__list li { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: 0.95rem 0; border-bottom: 1px solid var(--rule-steel); align-items: baseline; }
.contact__list .mono { color: var(--on-steel-3); font-size: 0.66rem; }
.contact__list a:hover { color: var(--blue-light); }
.map { margin-top: 1.5rem; aspect-ratio: 16 / 9; background: var(--steel-2); overflow: hidden; border-radius: var(--r); }
.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.6) contrast(1.05); }

.form { background: var(--paper); color: var(--ink); padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--r); display: flex; flex-direction: column; gap: 1.1rem; align-self: start; }
.form__title { font-size: 1.5rem; font-weight: 700; font-stretch: 108%; letter-spacing: -0.02em; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field label { display: block; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; }
.field input, .field textarea, .field select {
  width: 100%; padding: 0.8rem 0.9rem; border: 1px solid var(--rule); border-radius: var(--r); background: var(--sheet);
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.field textarea { resize: vertical; min-height: 7.5rem; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--blue-soft); }
.form__note { font-size: 0.82rem; color: var(--muted); }
.form__note a { color: var(--accent); font-weight: 600; }
.form .btn { justify-content: center; }
.btn.is-loading { opacity: 0.7; pointer-events: none; }

/* ─── Footer ─────────────────────────────────────────────── */
.footer { background: var(--black); color: rgba(255,255,255,0.62); padding-block: 4rem 2rem; font-size: 0.92rem; }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2.5rem; }

.footer .brand__name { color: #fff; }
.footer .brand__sub { color: rgba(255,255,255,0.45); }
.footer__tag { margin-top: 1.25rem; max-width: 30ch; }
.footer h4 { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.4); font-weight: 500; margin-bottom: 1rem; }
.footer li + li { margin-top: 0.45rem; }
.footer a:hover { color: #fff; }
.footer details summary { cursor: pointer; list-style: none; }
.footer details summary::-webkit-details-marker { display: none; }
.footer details summary h4::after { content: ' +'; }
.footer details[open] summary h4::after { content: ' −'; }
.footer__zones { columns: 2; column-gap: 1rem; font-size: 0.85rem; }
.social { display: flex; gap: 0.5rem; margin-top: 1.25rem; }
.social a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,0.16); border-radius: var(--r); }
.social a:hover { border-color: #fff; }
.social svg { width: 17px; height: 17px; fill: currentColor; }
.footer__bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.1); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.4); }

/* ─── WhatsApp flotante + barra mobile ───────────────────── */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--wa); color: #fff; box-shadow: 0 10px 24px -10px rgba(0,0,0,0.45);
  transition: transform 200ms var(--ease), background-color 200ms;
}
.wa-float:hover { transform: translateY(-2px); background: var(--wa-hover); }
.wa-float svg { width: 28px; height: 28px; fill: currentColor; }
.mbar { display: none; }

/* ─── Lightbox ───────────────────────────────────────────── */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(12, 14, 17, 0.94); display: grid; grid-template-rows: 1fr auto; opacity: 0; transition: opacity 220ms var(--ease); }
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox__stage { display: grid; place-items: center; padding: 4rem 5rem 1rem; min-height: 0; }
.lightbox__img { max-width: 100%; max-height: calc(100svh - 9rem); width: auto; height: auto; object-fit: contain; transition: opacity 200ms; }
.lightbox__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem var(--gutter) 1.5rem; color: rgba(255,255,255,0.75); }
.lightbox__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,0.2); border-radius: var(--r); }
.lightbox__btn:hover { border-color: #fff; }
.lightbox__btn--prev { left: 1rem; }
.lightbox__btn--next { right: 1rem; }
.lightbox__close { position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; display: grid; place-items: center; color: #fff; }
.lightbox svg { width: 22px; height: 22px; }

/* ─── Dibujos animados de aberturas (fichas) ─────────────── */
.fx-ico { width: 72px; height: 54px; color: var(--accent); overflow: visible; margin-bottom: 0.4rem; flex-shrink: 0; }
.fx-ico * { transform-box: fill-box; }
.fx-ico .glass { fill: color-mix(in srgb, var(--accent) 14%, transparent); }
.fx-ico .wall { fill: color-mix(in srgb, currentColor 12%, transparent); }
.fx-ico .mesh { stroke-width: 0.6; }
.fx-ico .air { stroke-dasharray: 1.5 2; }
.fx-ico .d { stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-in .fx-ico .d { animation: draw 900ms var(--ease) calc(var(--i, 0) * 160ms + 150ms) forwards; }
.is-in .fx-ico .mv-slide  { animation: fx-slide 4.2s ease-in-out 1.3s infinite; }
.is-in .fx-ico .mv-swing  { transform-origin: left center; animation: fx-swing 4.6s ease-in-out 1.3s infinite; }
.is-in .fx-ico .mv-tilt   { transform-origin: center bottom; animation: fx-tilt 4.2s ease-in-out 1.3s infinite; }
.is-in .fx-ico .mv-cold   { animation: fx-cold 2.6s ease-in 1.3s infinite; }
.is-in .fx-ico .mv-warm   { animation: fx-warm 2.6s ease-in-out 1.3s infinite; }
.is-in .fx-ico .mv-rain   { animation: fx-rain 1.4s linear 1.3s infinite; }
.is-in .fx-ico .mv-insert { animation: fx-insert 4.2s var(--ease) 1.1s infinite; }
.is-in .fx-ico .mv-dot    { animation: fx-dot 3s ease-in-out 1.3s infinite; }
.is-in .fx-ico .mv-join-l { animation: fx-join-l 3.6s var(--ease) 1.2s infinite; }
.is-in .fx-ico .mv-join-r { animation: fx-join-r 3.6s var(--ease) 1.2s infinite; }
.is-in .fx-ico .mv-drive  { animation: fx-drive 4s ease-in-out 1.3s infinite; }
@keyframes fx-slide  { 0%, 18% { transform: none; } 45%, 70% { transform: translateX(-21px); } 95%, 100% { transform: none; } }
@keyframes fx-swing  { 0%, 18% { transform: none; } 45%, 70% { transform: perspective(60px) rotateY(-48deg); } 95%, 100% { transform: none; } }
@keyframes fx-tilt   { 0%, 18% { transform: none; } 45%, 70% { transform: perspective(50px) rotateX(38deg); } 95%, 100% { transform: none; } }
@keyframes fx-cold   { 0% { transform: translateX(-6px); opacity: 0; } 25% { opacity: 1; } 70% { transform: translateX(6px); opacity: 1; } 100% { transform: translateX(6px); opacity: 0; } }
@keyframes fx-warm   { 0%, 100% { transform: translateX(0); opacity: 0.55; } 50% { transform: translateX(-3px); opacity: 1; } }
@keyframes fx-rain   { from { transform: translateY(0); opacity: 1; } 80% { opacity: 1; } to { transform: translateY(12px); opacity: 0; } }
@keyframes fx-insert { 0%, 10% { transform: translateY(-14px); opacity: 0.2; } 40%, 85% { transform: none; opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes fx-dot    { 0%, 10% { transform: translateX(0); } 50%, 60% { transform: translateX(40px); } 100% { transform: translateX(0); } }
@keyframes fx-join-l { 0%, 10% { transform: translateX(-6px); } 40%, 85% { transform: translateX(6px); } 100% { transform: translateX(-6px); } }
@keyframes fx-join-r { 0%, 10% { transform: translateX(6px); } 40%, 85% { transform: translateX(-6px); } 100% { transform: translateX(6px); } }
@keyframes fx-drive  { 0% { transform: translateX(-8px); } 50% { transform: translateX(8px); } 100% { transform: translateX(-8px); } }
.features .fx-ico { color: var(--blue-light); margin-top: 1rem; }
.no-js .fx-ico .d { stroke-dashoffset: 0; }

/* ─── Revelado al scrollear ──────────────────────────────── */
.rv { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.rv.is-in { opacity: 1; transform: none; }
.rv-img { clip-path: inset(0 0 100% 0); transition: clip-path 900ms var(--ease); }
.rv-img.is-in { clip-path: inset(0 0 0 0); }
.no-js .rv, .no-js .rv-img { opacity: 1; transform: none; clip-path: none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
  .nav__links { gap: 1.25rem; }
  .features, .guarantee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features .feature:nth-child(3), .guarantee > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .features .feature:nth-child(n+3), .guarantee > div:nth-child(n+3) { margin-top: 1.5rem; }
  .extras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lines { grid-template-columns: 1fr; }
  .lines__list { border-right: 0; border-bottom: 1px solid var(--rule); flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .lines__list::-webkit-scrollbar { display: none; }
  .line-tab { grid-template-columns: auto; flex: 0 0 auto; border-bottom: 0; border-right: 1px solid var(--rule-soft); padding: 1rem 1.25rem; }
  .line-tab .mono, .line-tab__tag { display: none; }
  .line-tab__name { font-size: 1.05rem; }
  .line-tab::before { top: auto; left: 0; right: 0; width: auto; height: 3px; transform: scaleX(0); }
  .line-tab[aria-selected="true"]::before { transform: scaleX(1); }
  .lines__more { display: none; }
}

@media (max-width: 960px) {
  .topbar__group--hours { display: none; }
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .hero__side { grid-template-columns: 1fr; gap: 2rem; }
  .disena-cta__grid { grid-template-columns: 1fr; }
  .hero__grid, .about__grid, .process__grid, .faq__grid, .contact__grid, .textures { grid-template-columns: 1fr; }
  .sec-head { grid-template-columns: 1fr; }
  .sec-head .lead { justify-self: start; }
  .preview, .faq__aside { position: static; }
  .stage { min-height: 380px; }
  .quotes { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ─── Mobile: la mayoría de las visitas. Diseño propio, tipo app ── */
@media (max-width: 640px) {
  :root { --nav-h: 60px; --gutter: 1.1rem; }
  .topbar { display: none; }
  .section { padding-block: 3.75rem; }
  .sec-head { margin-bottom: 1.75rem; gap: 1rem; }
  .sec-tag { padding-bottom: 0.7rem; }
  .h2 { font-size: clamp(2rem, 9.5vw, 2.6rem); }
  .lead { font-size: 1rem; }

  /* Navegación compacta; el CTA vive en el dock inferior */
  .brand img { width: 38px; }
  .brand__name { font-size: 0.98rem; }

  /* Hero: título enorme, CTA a todo el ancho, cifras en fichas */
  .hero { padding-top: 1.75rem; background-size: 32px 32px; }
  .hero__kicker { margin-bottom: 1rem; font-size: 0.66rem; }
  .hero__title { font-size: clamp(2.8rem, 14.5vw, 4.2rem); max-width: none; line-height: 0.92; }
  .cota { margin-top: 0.75rem; }
  .hero__side { gap: 1.5rem; }
  .hero__copy { gap: 1.25rem; }
  .hero__actions { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
  .hero__actions .btn { justify-content: center; padding-block: 1.05rem; font-size: 1rem; }
  .hero__stats { grid-template-columns: repeat(3, 1fr); gap: 6px; border-top: 0; }
  .stat, .stat + .stat { padding: 0.8rem 0.7rem; border: 0; background: var(--paper-2); border-left: 3px solid var(--blue); }
  .stat__n { font-size: 1.65rem; }
  .stat__l { font-size: 0.58rem; margin-top: 0.35rem; }

  /* Tira de obras: se desliza con el dedo, con imán */
  .reel { margin-top: 2rem; padding-top: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .reel::-webkit-scrollbar { display: none; }
  .reel__track { animation: none; gap: 10px; }
  .reel__track [aria-hidden="true"] { display: none; }
  .print { scroll-snap-align: start; padding: 6px 6px 0; }
  .print img { height: 300px; }

  /* Empresa */
  .about__grid { margin-top: 2rem !important; gap: 2rem; }
  .about__title { font-size: clamp(2.3rem, 11vw, 3rem); }
  .about__text { font-size: 1rem; margin-top: 1.25rem; }
  .about__anim { justify-self: center; }
  .features { grid-template-columns: 1fr; margin-top: 2.5rem; }
  .features .feature, .guarantee > div { padding: 1.1rem 0 1.1rem 3rem !important; border-left: 0 !important; margin-top: 0 !important; border-top: 1px solid var(--rule-steel); position: relative; }
  .features .feature:first-child, .guarantee > div:first-child { border-top: 0; }
  .features .feature__n, .guarantee .mono { position: absolute; left: 0; top: 1.2rem; width: 2rem; height: 2rem; display: grid; place-items: center; border: 1px solid var(--rule-steel); border-radius: 50%; font-size: 0.66rem; }
  .features .feature h3, .guarantee h3 { margin-top: 0; }
  .guarantee { grid-template-columns: 1fr; }

  /* Galería: filtros en una sola fila deslizable */
  .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .filters::-webkit-scrollbar { display: none; }
  .filter { flex: 0 0 auto; padding: 0.6rem 0.85rem; }
  .archive { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .archive__item.is-grande { grid-row: span 1; }
  .archive__item.is-grande .archive__frame, .archive__item.is-ancho .archive__frame { aspect-ratio: 8 / 5; }
  .archive__item .figcap { padding: 0.6rem 0.7rem; font-size: 0.56rem; }
  .archive__item .figcap b { font-size: 0.82rem; }
  .archive__item.is-grande .figcap b { font-size: 1rem; }
  .zoom { display: none; }
  .works__foot { flex-direction: column; align-items: stretch; }
  .works__foot .btns { display: grid; grid-template-columns: 1fr; }
  .works__foot .btn { justify-content: center; }

  /* Proceso: primero la imagen, después los pasos */
  .process__grid { gap: 1.25rem; }
  .stage { order: -1; min-height: 300px; }
  .step { padding: 1rem 0; grid-template-columns: 2.4rem 1fr; }
  .step__t { font-size: 1.2rem; }

  /* Líneas */
  .line-panel { grid-template-columns: 1fr; }
  .line-panel__img { border-right: 0; border-bottom: 1px solid var(--rule-soft); padding: 1.5rem; }
  .line-panel__img img { max-height: 200px; }
  .line-panel__body { padding: 1.25rem; }
  .line-panel__body h3 { font-size: 1.6rem; }


  /* Carruseles deslizables: complementos y reseñas */
  .extras, .quotes {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 10px;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); padding-bottom: 4px;
  }
  .extras::-webkit-scrollbar, .quotes::-webkit-scrollbar { display: none; }
  .extra, .quote { flex: 0 0 82%; scroll-snap-align: start; }
  .extra__body p { display: block; }
  .quote { padding: 1.4rem; }
  .quote blockquote { font-size: 1.02rem; }
  .textures { padding: 1.1rem; }
  .textures__grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }

  .rating__n { font-size: 3.6rem; }
  .faq__aside .h2 { margin-top: 1.25rem !important; }
  .qa summary { font-size: 1rem; grid-template-columns: 2rem 1fr 1.2rem; padding: 1.1rem 0; }
  .qa p { padding: 0 0 1.2rem 2.5rem; font-size: 0.95rem; }

  .contact__title { font-size: clamp(2.4rem, 12vw, 3.2rem); }
  .form__row { grid-template-columns: 1fr; }
  .contact__list li { grid-template-columns: 1fr; gap: 0.15rem; }
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer { padding-bottom: 7rem; }
  .lightbox__stage { padding: 3.5rem 0.5rem 0.5rem; }
  .lightbox__btn { display: none; }
  .lightbox__bar .btn { width: 100%; justify-content: center; }

  /* Dock inferior flotante: llamar + WhatsApp */
  .wa-float { display: none; }
  .mbar {
    display: grid; grid-template-columns: auto 1fr; gap: 8px;
    position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 40;
    padding: 7px; border-radius: 14px;
    background: rgba(13, 20, 28, 0.92); border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 16px 34px -14px rgba(5, 20, 45, 0.7);
    backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3);
    transform: translateY(0); transition: transform 280ms var(--ease);
  }
  .mbar.is-hidden { transform: translateY(140%); }
  .mbar .btn { justify-content: center; padding: 0.85rem 1rem; border-radius: 10px; font-size: 0.95rem; }
  .mbar .btn--call { color: #fff; border: 1px solid rgba(255,255,255,0.22); padding-inline: 1.1rem; }
  .mbar .btn--call svg { width: 18px; height: 18px; }
  body { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reel { overflow-x: auto; }
  .reel__track { animation: none; }
  .cota .cota__run, .plan .anim, .fx-ico .d { stroke-dashoffset: 0; }
  .fx-ico [class*="mv-"], .demo-hoja, .demo-cursor, .nav__new::before { animation: none !important; }
  .demo-cotas .d1, .demo-cotas .d2 { stroke-dashoffset: 0; }
  .plan .dim-t { opacity: 1; }
  .rv, .rv-img { opacity: 1; transform: none; clip-path: none; }
}

/* Formulario: enviar por WhatsApp o por email */
.form__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form__acts .btn { justify-content: center; }
@media (max-width: 560px) { .form__acts { grid-template-columns: 1fr; } }