/* Lepilum — estilos de componentes · VARIANTE CLARA
   Sin build step: CSS plano + variables de tokens.css */
@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--fs-body);
  color: var(--color-ink-900);
  background: var(--color-surface);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

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

:focus-visible {
  outline: 3px solid var(--color-primary-600);
  outline-offset: 3px;
  border-radius: 4px;
}
.section-anthracite :focus-visible { outline-color: var(--color-primary); }
.section-violet :focus-visible { outline-color: var(--color-ink-900); }

.container { max-width: var(--container-width); margin: 0 auto; padding: 0 var(--space-6); }
/* Columna estrecha para texto largo, formularios y preguntas frecuentes:
   una línea de 1440 px no se lee bien. */
.container-narrow { max-width: 880px; margin: 0 auto; padding: 0 var(--space-6); }

h1, h2, h3, h4 { font-weight: 700; line-height: var(--lh-heading); margin: 0 0 var(--space-4); letter-spacing: -0.015em; color: var(--color-ink-900); }
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); font-weight: 600; }
h3 { font-size: var(--fs-h3); font-weight: 600; }
p { margin: 0 0 var(--space-4); color: var(--color-ink-600); }
.lead { font-size: var(--fs-body-lg); }

/* Palabra clave del titular en violeta, para dar acento sin recargar */
.accent { color: var(--color-primary-700); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-primary-700);
  margin-bottom: var(--space-4);
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  opacity: 0.75;
}

/* ------------------------------------------------------------------
   BOTONES — tres niveles únicos
   1. .btn-primary    CTA principal, violeta corporativo
   2. .btn-secondary  CTA secundario, con borde
   3. .link-arrow     enlace textual con flecha
   ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.95rem 1.75rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-family);
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* CTA principal: violeta corporativo con texto oscuro (8.4:1) */
.btn-primary {
  background: var(--color-primary);
  color: var(--color-ink-900);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-violet);
}
.btn-primary:hover {
  background: var(--color-primary-500);
  border-color: var(--color-primary-500);
}

/* CTA secundario: solo borde */
.btn-secondary {
  background: transparent;
  color: var(--color-ink-900);
  border-color: var(--color-border-strong);
}
.btn-secondary:hover { background: var(--color-lavender-50); border-color: var(--color-primary-600); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: var(--fs-body);
  text-decoration: none;
  color: var(--color-primary-700);
  padding: var(--space-2) 0;
}
.link-arrow::after { content: "→"; transition: transform var(--duration-fast) var(--ease-standard); }
.link-arrow:hover::after { transform: translateX(5px); }

/* Sobre antracita */
.section-anthracite .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.42); }
.section-anthracite .btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
.section-anthracite .link-arrow { color: var(--color-primary); }

/* Sobre el violeta corporativo el CTA principal se invierte a antracita */
.section-violet .btn-primary {
  background: var(--color-ink-900); color: #fff; border-color: var(--color-ink-900);
  box-shadow: var(--shadow-md);
}
.section-violet .btn-primary:hover { background: var(--color-anthracite-soft); border-color: var(--color-anthracite-soft); }
.section-violet .btn-secondary { color: var(--on-violet); border-color: rgba(23,19,28,0.35); }
.section-violet .btn-secondary:hover { background: rgba(255,255,255,0.4); border-color: var(--color-ink-900); }
.section-violet .link-arrow { color: var(--on-violet); }

.btn-row { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------------
   HILO GRÁFICO — energía, datos y conectividad
   Líneas violetas finas, puntos de conexión, trazados de circuito.
   Ligero: nunca debe competir con el producto.
   ------------------------------------------------------------------ */
.traces { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: hidden; }
.traces svg { width: 100%; height: 100%; }
.traces .trace-path { fill: none; stroke: var(--color-primary-600); stroke-width: 1.15; opacity: 0.15; }
.traces .trace-pad { fill: var(--color-primary-600); opacity: 0.2; }
.traces .trace-flow {
  fill: none; stroke: var(--color-primary-600); stroke-width: 1.8; stroke-linecap: round;
  opacity: 0.45; stroke-dasharray: 26 460;
  animation: trace-flow var(--duration-flow) linear infinite;
}
.traces .trace-flow.delay-1 { animation-delay: -3s; }
.traces .trace-flow.delay-2 { animation-delay: -6s; }
@keyframes trace-flow { to { stroke-dashoffset: -486; } }

/* Sobre antracita el hilo se vuelve violeta claro */
.section-anthracite .traces .trace-path { stroke: var(--color-primary); opacity: 0.2; }
.section-anthracite .traces .trace-pad { fill: var(--color-primary); opacity: 0.28; }
.section-anthracite .traces .trace-flow { stroke: var(--color-primary); opacity: 0.75; }
/* Sobre el violeta corporativo, en antracita translúcido */
.section-violet .traces .trace-path { stroke: var(--color-ink-900); opacity: 0.12; }
.section-violet .traces .trace-pad { fill: var(--color-ink-900); opacity: 0.16; }
.section-violet .traces .trace-flow { stroke: #fff; opacity: 0.55; }

@media (prefers-reduced-motion: reduce) {
  .traces .trace-flow { animation: none; stroke-dasharray: none; opacity: 0.22; }
}

/* ------------------------------------------------------------------
   HEADER — blanco translúcido, nunca negro
   ------------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-height);
  display: flex; align-items: center;
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.site-header.is-scrolled {
  background: rgba(255,255,255,0.96);
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--space-5); }
.logo img { height: 42px; width: auto; }
.main-nav { display: none; }
.main-nav ul { list-style: none; display: flex; gap: var(--space-6); margin: 0; padding: 0; align-items: center; }
.main-nav a.nav-link { text-decoration: none; font-weight: 600; font-size: var(--fs-nav); color: var(--color-ink-900); position: relative; padding: var(--space-2) 0; white-space: nowrap; }
.main-nav a.nav-link::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background: var(--color-primary-600); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-fast) var(--ease-standard); }
.main-nav a.nav-link:hover::after, .main-nav a.nav-link:focus-visible::after { transform: scaleX(1); }
.has-sub { position: relative; }
.sub-menu { list-style: none; margin: 0; padding: var(--space-2); position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); min-width: 210px; opacity: 0; pointer-events: none; transform: translateY(6px); transition: all var(--duration-fast) var(--ease-standard); }
.has-sub:hover .sub-menu, .has-sub:focus-within .sub-menu { opacity: 1; pointer-events: auto; transform: translateY(0); }
.sub-menu a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); text-decoration: none; font-size: var(--fs-small); font-weight: 600; }
.sub-menu a:hover { background: var(--color-lavender-50); color: var(--color-primary-700); }
.header-actions { display: flex; align-items: center; gap: var(--space-4); }
.lang-switch { display: flex; gap: var(--space-1); font-size: var(--fs-nav); font-weight: 700; }
.lang-switch a { padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); text-decoration: none; color: var(--color-ink-600); }
.lang-switch a[aria-current="true"] { background: var(--color-lavender-100); color: var(--color-primary-700); }
.header-actions .btn { padding: 0.78rem 1.5rem; font-size: var(--fs-small); white-space: nowrap; }
.menu-toggle { display: inline-flex; flex-direction: column; justify-content: center; background: none; border: none; cursor: pointer; padding: var(--space-2); }
.menu-toggle span { display: block; width: 24px; height: 2px; background: var(--color-ink-900); margin: 3.5px 0; border-radius: 2px; }

@media (min-width: 1080px) {
  .main-nav { display: block; }
  .menu-toggle { display: none; }
}

.mobile-menu { position: fixed; inset: 0; background: var(--color-surface); z-index: 60; transform: translateX(100%); transition: transform var(--duration-base) var(--ease-standard); overflow-y: auto; visibility: hidden; }
.mobile-menu.is-open { transform: translateX(0); visibility: visible; }
.mobile-menu .container { padding-top: var(--space-8); padding-bottom: var(--space-12); }
.mobile-menu-close { position: absolute; top: var(--space-5); right: var(--space-5); background: none; border: none; font-size: 2rem; line-height: 1; cursor: pointer; color: var(--color-ink-900); }
.mobile-nav { list-style: none; margin: var(--space-16) 0 0; padding: 0; display: flex; flex-direction: column; }
.mobile-nav > li > a, .mobile-accordion-trigger { display: block; padding: var(--space-4) 0; font-family: var(--font-family); font-size: 1.5rem; font-weight: 700; text-decoration: none; color: var(--color-ink-900); border: none; border-bottom: 1px solid var(--color-border); background: none; width: 100%; text-align: left; cursor: pointer; }
.mobile-accordion-trigger::after { content: "+"; float: right; font-weight: 500; color: var(--color-primary-700); }
.mobile-accordion-trigger[aria-expanded="true"]::after { content: "−"; }
.mobile-submenu { list-style: none; padding-left: var(--space-4); margin: 0; max-height: 0; overflow: hidden; transition: max-height var(--duration-base) var(--ease-standard); }
.mobile-submenu.is-open { max-height: 320px; }
.mobile-submenu a { display: block; padding: var(--space-3) 0; text-decoration: none; font-weight: 600; font-size: var(--fs-body); color: var(--color-ink-600); }
.mobile-menu-footer { margin-top: var(--space-10); display: flex; flex-direction: column; gap: var(--space-5); }

/* ------------------------------------------------------------------
   SECCIONES — la web vive en blanco; el antracita es la excepción
   ------------------------------------------------------------------ */
.section { padding: var(--space-20) 0; position: relative; overflow: hidden; background: var(--color-surface); }
.section > .container { position: relative; z-index: 1; }
.section-alt { background: var(--color-surface-alt); }
.section-lavender { background: var(--gradient-light); }

/* Única sección oscura: App & Cloud. Cambio de ritmo intencionado. */
.section-anthracite { background: var(--gradient-anthracite); color: #fff; }
.section-anthracite p { color: var(--on-dark-dim); }
.section-anthracite h2, .section-anthracite h3, .section-anthracite h4 { color: #fff; }
.section-anthracite .eyebrow { color: var(--color-primary); }

/* Bloque de identidad: violeta corporativo con texto oscuro */
.section-violet { background: var(--gradient-violet); color: var(--on-violet); }
.section-violet p { color: var(--on-violet-dim); }
.section-violet h2, .section-violet h3, .section-violet h4 { color: var(--on-violet); }
.section-violet .eyebrow { color: var(--on-violet); }

/* Paso suave de claro a antracita y vuelta a claro */
.section-transition { height: 90px; position: relative; z-index: 1; margin: 0; }
/* entra desde el lavanda con el que termina Ecosistema y sale hacia el
   violeta con el que empieza OEM: el paso por antracita queda encadenado */
.section-transition.to-dark { background: linear-gradient(180deg, var(--color-lavender-100) 0%, var(--color-anthracite-soft) 100%); }
.section-transition.from-dark { background: linear-gradient(180deg, var(--color-anthracite) 0%, #e2c2fc 100%); }

.section-head { max-width: 780px; margin: 0 auto var(--space-12); text-align: center; }
.section-head p { font-size: var(--fs-body-lg); }
.section-head.align-left { margin-left: 0; text-align: left; }

/* La aparición al hacer scroll es una mejora, no un requisito: sin JavaScript
   el contenido se ve igual. La clase .js la pone un script en el <head>. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--duration-slow) var(--ease-out-soft), transform var(--duration-slow) var(--ease-out-soft); }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: 90ms; }
.reveal.d2 { transition-delay: 180ms; }
.reveal.d3 { transition-delay: 270ms; }

/* ------------------------------------------------------------------
   HERO — el producto manda: sale del contenedor hasta el borde
   ------------------------------------------------------------------ */
.hero {
  position: relative;
  background: var(--gradient-hero);
  color: var(--color-ink-900);
  padding: var(--space-12) 0 var(--space-16);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -18%; right: -4%;
  width: 74vw; height: 74vw;
  max-width: 1150px; max-height: 1150px;
  background: radial-gradient(circle, rgba(207,154,249,0.50) 0%, rgba(238,221,251,0.34) 42%, rgba(255,255,255,0) 70%);
  z-index: 0;
}
.hero::after {
  content: "";
  position: absolute;
  bottom: -34%; left: -16%;
  width: 54vw; height: 54vw;
  max-width: 720px; max-height: 720px;
  background: radial-gradient(circle, rgba(246,240,251,0.9) 0%, rgba(255,255,255,0) 68%);
  z-index: 0;
}
.hero .container { position: relative; z-index: 2; }
.hero-grid { display: grid; gap: var(--space-10); align-items: center; }
.hero h1 { font-size: var(--fs-hero); margin-bottom: var(--space-6); }
.hero p { color: var(--color-ink-600); font-size: var(--fs-body-lg); max-width: 44ch; }
.hero-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-6); }
.hero-media { position: relative; }
.hero-media .media-frame { border-radius: var(--radius-lg); overflow: hidden; }
.hero-media img { width: 100%; height: auto; object-fit: cover; display: block; }
@media (min-width: 960px) {
  .hero-media .media-frame { max-height: 64vh; }
  .hero-media img { max-height: 64vh; object-fit: cover; }
}
.hero-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-8); }
.hero-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.55rem 1.05rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  background: rgba(255,255,255,0.78);
  font-size: var(--fs-small); font-weight: 600;
  color: var(--color-ink-600);
}
.hero-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary-600); }

@media (min-width: 960px) {
  .hero { padding: var(--space-16) 0 var(--space-20); }
  .hero-grid { grid-template-columns: 1.05fr 1fr; gap: var(--space-12); }
  /* el producto se sale del contenedor por la derecha: gana escala sin caja */
  .hero-media {
    margin-right: calc((100vw - min(100vw, var(--container-width))) / -2 - var(--space-6));
  }
  .hero-media .media-frame { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
}

/* ------------------------------------------------------------------
   INTRO — fila de iconos de confianza
   ------------------------------------------------------------------ */
.trust-icons {
  display: grid; gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-top: var(--space-10); text-align: center;
}
.trust-icons > div { position: relative; padding: 0 var(--space-5); }
@media (min-width: 900px) {
  .trust-icons > div + div::before {
    content: ""; position: absolute; left: 0; top: 6%; bottom: 6%;
    width: 1px; background: var(--color-border);
  }
}
.trust-icon {
  width: 46px; height: 46px; margin: 0 auto var(--space-4);
  color: var(--color-primary-600);
}
.trust-icon svg { width: 100%; height: 100%; }
.trust-icons h3 { font-size: var(--fs-body-lg); margin-bottom: var(--space-2); }
.trust-icons p { font-size: var(--fs-small); margin: 0; }

/* ------------------------------------------------------------------
   PRODUCTOS — composición editorial: cada uno con su propio tratamiento,
   sin bordes ni cajas de tarjeta
   ------------------------------------------------------------------ */
.product-rows { display: flex; flex-direction: column; gap: var(--space-20); }
.product-row { display: grid; gap: var(--space-10); align-items: center; }
@media (min-width: 900px) {
  .product-row { gap: var(--space-16); }
  /* One: imagen a la izquierda, algo mas contenida — vivienda, ligereza */
  .product-row--one { grid-template-columns: 0.92fr 1fr; }
  /* Plus: se invierte el lado y la imagen pesa mas — potencia, entorno tecnico */
  .product-row--plus { grid-template-columns: 1fr 1.12fr; }
}
.product-shot { position: relative; }
.product-shot .media-frame { border-radius: var(--radius-lg); overflow: hidden; }
.product-shot img { width: 100%; height: auto; display: block; }

/* One: aire, ligereza, sin fondo */
.product-row--one .product-shot::after { display: none; }
/* Plus: base lavanda tras la imagen, para leerlo como más técnico */
.product-row--plus .product-shot::before {
  content: ""; position: absolute; inset: auto -3% -4% -3%; height: 62%;
  background: var(--color-lavender-50); border-radius: var(--radius-lg); z-index: 0;
}
.product-row--plus .product-shot .media-frame { position: relative; z-index: 1; }

.product-copy h3 { font-size: clamp(1.9rem, 2.4vw + 1rem, 2.75rem); margin-bottom: var(--space-2); }
.product-context {
  display: inline-block;
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--color-primary-700); margin-bottom: var(--space-3);
}
.product-power {
  display: block; font-size: clamp(2rem, 2.6vw + 1rem, 3rem); font-weight: 700;
  color: var(--color-ink-900); line-height: 1; margin-bottom: var(--space-4);
}
.product-claim { font-weight: 700; color: var(--color-ink-900); font-size: var(--fs-body-lg); }
.spec-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-6) 0; }
.spec-tag {
  font-size: var(--fs-small); font-weight: 600;
  padding: 0.34rem 0.9rem; border-radius: var(--radius-pill);
  background: var(--color-surface); border: 1px solid var(--color-border);
  color: var(--color-ink-600);
}

/* Urban: banda propia a lo ancho, en violeta, para separarlo de los otros dos */
.product-band {
  margin-top: var(--space-20);
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--gradient-violet);
  display: grid; grid-template-columns: 1fr;
}
@media (min-width: 900px) { .product-band { grid-template-columns: 1.15fr 1fr; align-items: center; } }
.product-band-media .media-frame { overflow: hidden; height: 100%; }
.product-band-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-band-copy { padding: var(--space-12); }
.product-band-copy .product-context,
.product-band-copy .product-power,
.product-band-copy .product-claim,
.product-band-copy h3 { color: var(--on-violet); }
.product-band-copy p { color: var(--on-violet-dim); }
.product-band-copy .spec-tag { background: rgba(255,255,255,0.62); border-color: rgba(255,255,255,0.8); color: var(--on-violet); }
.product-band-copy .link-arrow { color: var(--on-violet); }

/* ------------------------------------------------------------------
   ECOSISTEMA — tira horizontal con la línea de energía
   ------------------------------------------------------------------ */
.eco-flow {
  position: relative;
  display: grid; gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  margin-top: var(--space-10); text-align: center;
}
.eco-flow::before {
  content: ""; position: absolute; left: 9%; right: 9%; top: 34px; height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--color-primary) 10%, var(--color-primary) 90%, transparent 100%);
  opacity: 0.6; z-index: 0;
}
@media (max-width: 760px) { .eco-flow::before { display: none; } }
.eco-node { position: relative; z-index: 1; }
.eco-node-icon {
  width: 70px; height: 70px; margin: 0 auto var(--space-4);
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary-600);
  box-shadow: var(--shadow-sm);
}
.eco-node-icon svg { width: 32px; height: 32px; }
.eco-node h4 { font-size: var(--fs-body); margin-bottom: var(--space-1); }
.eco-node p { font-size: var(--fs-small); margin: 0; }

.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-12); justify-content: center; }
.chip {
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-ink-600);
  padding: 0.45rem 1rem; border-radius: var(--radius-pill);
  font-size: var(--fs-small); font-weight: 600;
}
.section-anthracite .chip { border-color: rgba(255,255,255,0.26); background: rgba(255,255,255,0.06); color: #fff; }

.split { display: grid; gap: var(--space-12); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split.reverse > *:first-child { order: 2; } }
.split .media-frame { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--color-border); }

/* ------------------------------------------------------------------
   APP Y CLOUD — se entiende en pocos segundos: cargador → App → Cloud
   ------------------------------------------------------------------ */
.platform-flow { position: relative; display: grid; gap: var(--space-8); margin-top: var(--space-12); }
@media (min-width: 780px) { .platform-flow { grid-template-columns: repeat(3, 1fr); gap: var(--space-10); } }
.platform-flow::before {
  content: ""; position: absolute; left: 14%; right: 14%; top: 32px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-primary) 12%, var(--color-primary) 88%, transparent);
  opacity: 0.5; z-index: 0;
}
@media (max-width: 779px) { .platform-flow::before { display: none; } }
.flow-step { position: relative; z-index: 1; text-align: center; }
.flow-step-icon {
  width: 66px; height: 66px; margin: 0 auto var(--space-4);
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.22);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary);
}
.flow-step-icon svg { width: 30px; height: 30px; }
.flow-step h4 { font-size: var(--fs-body-lg); margin-bottom: var(--space-2); }
.flow-step p { font-size: var(--fs-small); margin: 0; color: var(--on-dark-dim); }

.platform-visuals { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: center; margin-top: var(--space-12); }
@media (min-width: 720px) { .platform-visuals { grid-template-columns: 0.72fr 1.28fr; } }
.platform-visuals .media-frame { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(255,255,255,0.14); }
.platform-visuals img { width: 100%; height: auto; display: block; }

/* Planes: una línea, no dos tarjetas */
.plans-row { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-12); }
.plan {
  display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.18);
  flex: 1 1 320px;
}
.plan--premium { border-color: rgba(207,154,249,0.55); background: rgba(207,154,249,0.08); }
.plan-label {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-primary); white-space: nowrap;
}
.plan-text { color: var(--on-dark); font-weight: 600; font-size: var(--fs-small); }
.tier-note { font-size: var(--fs-small); margin-top: var(--space-5); margin-bottom: 0; font-style: italic; color: var(--on-dark-dim); }

/* ------------------------------------------------------------------
   OEM — gran bloque de identidad, violeta corporativo
   ------------------------------------------------------------------ */
.oem-flow { display: grid; gap: var(--space-6); margin-top: var(--space-12); grid-template-columns: 1fr; }
@media (min-width: 720px) { .oem-flow { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } }
.oem-step { position: relative; }
.oem-step .media-frame {
  border-radius: var(--radius-md);
  overflow: hidden;
}
.oem-step img { display: block; }
.oem-step img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.oem-step-index {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--color-ink-900); color: #fff;
  font-weight: 700; font-size: var(--fs-small);
  margin-bottom: var(--space-3);
}
.oem-step h4 { font-size: var(--fs-body-lg); margin: var(--space-4) 0 var(--space-1); }
.oem-step p { font-size: var(--fs-small); margin: 0; color: var(--on-violet-dim); }
@media (min-width: 720px) {
  .oem-step:not(:last-child)::after {
    content: "→";
    position: absolute;
    top: 2px; right: calc(var(--space-4) * -0.72);
    color: rgba(23,19,28,0.55);
    font-size: 1.3rem; line-height: 1;
  }
}
.oem-capabilities { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: var(--space-10); }
.oem-capabilities div {
  padding: var(--space-3) var(--space-4);
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--on-violet);
}
.oem-footnote {
  display: inline-flex; align-items: center; gap: var(--space-3);
  margin-top: var(--space-8);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  border: 1px solid rgba(23,19,28,0.28);
  font-size: var(--fs-small); font-weight: 600;
  color: var(--on-violet);
}
.oem-footnote b { font-size: var(--fs-body-lg); font-weight: 700; }

/* ------------------------------------------------------------------
   URBAN — dos instalaciones, la misma unidad
   ------------------------------------------------------------------ */
.urban-duo { position: relative; display: grid; gap: var(--space-5); grid-template-columns: 1fr; margin-top: var(--space-12); }
@media (min-width: 820px) { .urban-duo { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }
.urban-shot { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface); box-shadow: var(--shadow-xs); }
.urban-shot .media-frame { overflow: hidden; }
.urban-shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.urban-shot-label { padding: var(--space-5) var(--space-6); }
.urban-shot-label h4 { margin: 0 0 var(--space-1); font-size: var(--fs-body-lg); }
.urban-shot-label p { margin: 0; font-size: var(--fs-small); }
.urban-equals {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 72px; height: 72px; margin: 0 auto;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--color-primary);
  box-shadow: var(--shadow-violet);
  font-size: 1.75rem; font-weight: 700; color: var(--color-primary-700);
  line-height: 1;
}
@media (min-width: 820px) {
  .urban-equals { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); z-index: 2; }
}
.urban-equals-note { text-align: center; margin-top: var(--space-6); }
.urban-equals-note strong { display: block; font-size: var(--fs-body-lg); color: var(--color-ink-900); }
.urban-equals-note span { font-size: var(--fs-small); color: var(--color-ink-600); }

/* ------------------------------------------------------------------
   FABRICACIÓN — rejilla de fotos, números grandes oscuros
   ------------------------------------------------------------------ */
.factory-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .factory-grid { grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr; }
  .factory-grid > *:first-child { grid-row: span 2; }
}
.factory-grid .media-frame { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); height: 100%; }
.factory-grid img { width: 100%; height: 100%; object-fit: cover; min-height: 190px; }

.stats-row { display: grid; gap: var(--space-8); margin-top: var(--space-10); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.stat .stat-value {
  font-size: clamp(2.5rem, 4.5vw, 4rem); font-weight: 700;
  color: var(--color-ink-900); line-height: 1; margin-bottom: var(--space-3);
  position: relative; display: inline-block;
}
.stat .stat-value::after {
  content: ""; position: absolute; left: 0; bottom: -8px;
  width: 44px; height: 3px; border-radius: 2px; background: var(--color-primary);
}
.stat .stat-label { font-size: var(--fs-small); color: var(--color-ink-600); font-weight: 600; margin-top: var(--space-4); }
.manufacturing-list { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.manufacturing-list li { position: relative; padding-left: var(--space-8); color: var(--color-ink-900); font-weight: 600; font-size: var(--fs-body); }
.manufacturing-list li::before {
  content: ""; position: absolute; left: 2px; top: 0.42em;
  width: 11px; height: 6px; border-left: 2px solid var(--color-primary-600); border-bottom: 2px solid var(--color-primary-600);
  transform: rotate(-45deg);
}

/* ------------------------------------------------------------------
   PROFESIONALES — imagen y texto, sin caja
   ------------------------------------------------------------------ */
.pro-grid { display: grid; gap: var(--space-12); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.pro-card { display: flex; flex-direction: column; }
.pro-card .media-frame { border-radius: var(--radius-lg); overflow: hidden; }
.pro-card img { width: 100%; height: auto; display: block; transition: transform var(--duration-slow) var(--ease-out-soft); }
.pro-card:hover img { transform: scale(1.02); }
.pro-card-body { padding: var(--space-6) 0 0; border-top: 2px solid var(--color-primary); margin-top: var(--space-6); }
.pro-card-body h3 { margin-bottom: var(--space-2); }
.pro-card-body p { font-size: var(--fs-body); }

/* ------------------------------------------------------------------
   CIERRE — claro, con el CTA en violeta corporativo
   ------------------------------------------------------------------ */
.final-cta { text-align: center; }
.final-cta h2 { max-width: 20ch; margin-left: auto; margin-right: auto; font-size: clamp(2rem, 3.2vw + 1rem, 3.4rem); }
.final-cta .eyebrow { justify-content: center; }
.final-cta .btn-row { justify-content: center; margin-top: var(--space-8); }
.final-email {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: 700; color: var(--color-primary-700); text-decoration: none;
  border-bottom: 2px solid var(--color-primary); padding-bottom: 2px;
}
.final-email:hover { border-color: var(--color-primary-700); }

/* ------------------------------------------------------------------
   FOOTER — antracita, compacto
   ------------------------------------------------------------------ */
.site-footer { background: var(--color-anthracite); color: var(--on-dark-dim); padding: var(--space-12) 0 var(--space-6); }
.footer-top { display: grid; gap: var(--space-8); margin-bottom: var(--space-10); }
@media (min-width: 900px) { .footer-top { grid-template-columns: 1fr 2.4fr; gap: var(--space-12); } }
.footer-brand img { height: 30px; margin-bottom: var(--space-3); filter: brightness(0) invert(1); }
.footer-brand p { color: var(--on-dark-dim); font-size: var(--fs-small); max-width: 34ch; margin: 0; }
.footer-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.footer-grid h4 { color: #fff; font-size: var(--fs-small); margin-bottom: var(--space-3); letter-spacing: 0.04em; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.footer-grid a { text-decoration: none; color: var(--on-dark-dim); font-size: var(--fs-small); }
.footer-grid a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.14); padding-top: var(--space-5); font-size: var(--fs-small); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); }
.footer-bottom a { color: var(--color-primary); font-weight: 600; }

/* ------------------------------------------------------------------
   IMÁGENES PROVISIONALES
   ------------------------------------------------------------------ */
.media-frame { position: relative; }
.placeholder-badge {
  position: absolute; top: var(--space-3); left: var(--space-3);
  background: rgba(255,255,255,0.92); color: var(--color-ink-900);
  border: 1px solid var(--color-border-strong);
  font-size: 0.6875rem; font-weight: 700;
  padding: 0.26rem 0.6rem; border-radius: var(--radius-pill);
  z-index: 3; letter-spacing: 0.05em; text-transform: uppercase;
}
.section-anthracite .placeholder-badge { background: rgba(23,19,28,0.82); color: #fff; border-color: rgba(255,255,255,0.2); }
body.hide-placeholder-badges .placeholder-badge { display: none; }

.skip-link {
  position: absolute; left: -9999px; top: var(--space-2);
  background: var(--color-ink-900); color: #fff;
  padding: 0.75rem 1.25rem; border-radius: var(--radius-sm);
  z-index: 100; font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: var(--space-4); }

/* ==================================================================
   PÁGINAS INTERIORES
   Mismos tokens, misma paleta y mismos componentes que la home.
   ================================================================== */

/* Hero de página: misma familia que el de la home, algo más contenido */
.page-hero {
  position: relative;
  background: var(--gradient-hero);
  padding: var(--space-12) 0 var(--space-12);
  overflow: hidden;
}
.page-hero::before {
  content: ""; position: absolute; top: -22%; right: -6%;
  width: 62vw; height: 62vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(circle, rgba(207,154,249,0.42) 0%, rgba(238,221,251,0.28) 42%, rgba(255,255,255,0) 70%);
  z-index: 0;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero-grid { display: grid; gap: var(--space-10); align-items: center; }
@media (min-width: 960px) {
  .page-hero { padding: var(--space-16) 0 var(--space-16); }
  .page-hero-grid { grid-template-columns: 1fr 1.05fr; gap: var(--space-12); }
  .page-hero-media { margin-right: calc((100vw - min(100vw, var(--container-width))) / -2 - var(--space-6)); }
  .page-hero-media .media-frame { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
}
.page-hero h1 { font-size: clamp(2.35rem, 3.2vw + 1rem, 3.75rem); margin-bottom: var(--space-5); }
.page-hero .lead { color: var(--color-ink-600); font-size: var(--fs-body-lg); max-width: 46ch; }
.page-hero .btn-row { margin-top: var(--space-8); }
.page-hero-media .media-frame { border-radius: var(--radius-lg); overflow: hidden; }
.page-hero-media img { width: 100%; height: auto; display: block; }
.page-hero--simple .page-hero-grid { grid-template-columns: 1fr; max-width: 820px; }

/* Prosa */
.prose-block h2 { margin-top: var(--space-10); }
.prose-block h2:first-child { margin-top: 0; }
.prose-block p { font-size: var(--fs-body); }
.legal-prose h2 { font-size: var(--fs-h3); }
.legal-prose { max-width: 760px; }

/* Rejilla de características */
.feature-grid { display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.feature { padding-top: var(--space-5); border-top: 2px solid var(--color-lavender-100); position: relative; }
.feature::before { content: ""; position: absolute; top: -2px; left: 0; width: 40px; height: 2px; background: var(--color-primary-600); }
.feature-icon { width: 40px; height: 40px; color: var(--color-primary-600); margin-bottom: var(--space-4); }
.feature-icon svg { width: 100%; height: 100%; }
.feature h3 { font-size: var(--fs-body-lg); margin-bottom: var(--space-2); }
.feature p { font-size: var(--fs-small); margin: 0; }
.section-anthracite .feature { border-top-color: rgba(255,255,255,0.2); }
.section-anthracite .feature-icon { color: var(--color-primary); }
.section-anthracite .feature p { color: var(--on-dark-dim); }

/* Lista con marca de verificación */
.check-list { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.check-list li { position: relative; padding-left: var(--space-8); color: var(--color-ink-900); font-weight: 600; font-size: var(--fs-body); }
.check-list li::before {
  content: ""; position: absolute; left: 2px; top: 0.42em;
  width: 11px; height: 6px; border-left: 2px solid var(--color-primary-600); border-bottom: 2px solid var(--color-primary-600);
  transform: rotate(-45deg);
}
.section-anthracite .check-list li { color: var(--on-dark); }
.section-anthracite .check-list li::before { border-color: var(--color-primary); }
.section-violet .check-list li { color: var(--on-violet); }

/* Tabla de especificaciones */
.spec-table { border-top: 1px solid var(--color-border); }
.spec-row {
  display: grid; gap: var(--space-4); padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .spec-row { grid-template-columns: 1fr 1.2fr; align-items: baseline; } }
.spec-key { font-weight: 700; color: var(--color-ink-900); font-size: var(--fs-body); }
.spec-value { color: var(--color-ink-600); font-size: var(--fs-body); }
.spec-row--pendiente .spec-value {
  color: var(--color-primary-700); font-weight: 600; font-style: italic;
}
.spec-footnote { font-size: var(--fs-small); font-style: italic; margin-top: var(--space-6); }

/* Galería */
.gallery-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.gallery-grid .media-frame { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); }
.gallery-grid img { width: 100%; height: auto; display: block; }

/* Preguntas frecuentes */
.faq { border-top: 1px solid var(--color-border); }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item summary {
  cursor: pointer; padding: var(--space-5) var(--space-8) var(--space-5) 0;
  font-weight: 700; font-size: var(--fs-body-lg); color: var(--color-ink-900);
  list-style: none; position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  color: var(--color-primary-700); font-weight: 500; font-size: 1.5rem;
}
.faq-item[open] summary::after { content: "−"; }
.faq-answer { padding-bottom: var(--space-5); }
.faq-answer p { margin-bottom: var(--space-3); }
.faq-answer p:last-child { margin-bottom: 0; }

/* Documentos pendientes */
.doc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.doc-item {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border);
}
.doc-icon { width: 24px; height: 24px; color: var(--color-primary-600); flex-shrink: 0; }
.doc-icon svg { width: 100%; height: 100%; }
.doc-name { font-weight: 700; color: var(--color-ink-900); flex: 1 1 auto; }
.doc-state {
  font-size: var(--fs-small); font-weight: 600; color: var(--color-primary-700);
  border: 1px dashed var(--color-border-strong); border-radius: var(--radius-pill);
  padding: 0.2rem 0.75rem;
}

/* Tarjetas de navegación a páginas hijas */
.link-cards { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.link-card {
  text-decoration: none; color: inherit;
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--color-border); background: var(--color-surface);
  display: flex; flex-direction: column;
  transition: transform var(--duration-base) var(--ease-out-soft),
              box-shadow var(--duration-base) var(--ease-out-soft),
              border-color var(--duration-base) var(--ease-out-soft);
}
.link-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.link-card img { width: 100%; height: auto; display: block; }
.link-card-body { padding: var(--space-7, var(--space-6)); display: flex; flex-direction: column; flex: 1; }
.link-card-body h3 { margin-bottom: var(--space-2); }
.link-card-body p { font-size: var(--fs-small); }
.link-card-body .link-arrow { margin-top: auto; }

/* Maqueta de formulario (sin envío) */
.form-layout { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-layout { grid-template-columns: 1fr 1fr; } }
.form-field { display: flex; flex-direction: column; gap: var(--space-2); }
.form-field--wide, .form-notice, .form-layout > .btn, .form-layout > button { grid-column: 1 / -1; }
/* el botón no debe estirarse; los campos anchos sí */
.form-layout > .btn, .form-layout > button { justify-self: start; }
.form-field label { font-weight: 700; font-size: var(--fs-small); color: var(--color-ink-900); }
.form-field input, .form-field select, .form-field textarea {
  font-family: var(--font-family); font-size: var(--fs-body);
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-ink-900);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--color-primary-600); outline: none;
  box-shadow: 0 0 0 3px rgba(164, 95, 224, 0.18);
}
.form-field .req { color: var(--color-primary-700); }
.form-field .opt { font-weight: 500; color: var(--color-ink-600); }
/* campo con error, marcado por el propio navegador tras intentar enviar */
.form-layout[data-state="error"] :is(input, select, textarea):invalid {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(204, 43, 49, 0.14);
}

.form-consent { grid-column: 1 / -1; display: flex; gap: var(--space-3); align-items: flex-start; }
.form-consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--color-primary-600); flex-shrink: 0; }
.form-consent label { font-size: var(--fs-small); color: var(--color-ink-600); font-weight: 600; }

/* Región de estado: vacía hasta que el formulario cambia de estado */
.form-status { grid-column: 1 / -1; }
.form-message {
  margin: 0; padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm); font-size: var(--fs-small); font-weight: 600;
  display: none;
}
.form-message--error { background: #fdecec; color: #8f1216; border-left: 3px solid var(--color-error); }
.form-message--success { background: #e9f7ef; color: #1c6b40; border-left: 3px solid var(--color-success); }
.form-layout[data-state="error"] .form-message--error { display: block; }
.form-layout[data-state="success"] .form-message--success { display: block; }

.form-submit { position: relative; }
.form-submit .btn-loading { display: none; }
.form-layout[data-state="loading"] .form-submit .btn-label { display: none; }
.form-layout[data-state="loading"] .form-submit .btn-loading { display: inline; }
.form-layout[data-state="loading"] .form-submit { pointer-events: none; opacity: 0.7; }
.form-layout[data-state="success"] .form-submit { display: none; }
.form-notice {
  font-size: var(--fs-small); margin: 0;
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--color-primary); background: var(--color-lavender-50);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.form-notice strong { color: var(--color-ink-900); }
.btn.is-disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; justify-self: start; }

/* Banda de cierre reutilizable */
.final-cta-section .final-cta { text-align: center; }