/* LIGHT TRONIC — secciones: hero, pilares, catálogo, segmentos, empresa,
   confianza, novedades, recursos, distribuidores */

/* ---------- Ambiente lumínico global ----------
   Capa fija que tiñe el sitio según --kelvin (JS la interpola por sección).
   Solo opacity/background en composited layer: sin repaints costosos. */
.ambient-light {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 45% at 50% 0%, var(--ambient), transparent 70%),
    radial-gradient(45% 40% at 85% 90%, rgba(0, 168, 224, 0.05), transparent 70%);
}

/* ---------- HERO ---------- */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: calc(var(--space-7) + 3rem) var(--space-6);
  position: relative;
  overflow: clip;
}

/* Intensidad de la escena: la controla el dimmer (JS setea --dim en el section) */
.hero-scene {
  --dim: 0.85;
}

/* Haz volumétrico: cono de luz que cae sobre el titular */
.hero-beam {
  position: absolute;
  top: -12%;
  left: 50%;
  width: min(120vw, 1600px);
  height: 120%;
  transform: translateX(-50%);
  pointer-events: none;
  background: conic-gradient(
    from 180deg at 50% 0%,
    transparent 41%,
    color-mix(in oklab, var(--ambient) 80%, var(--glow-brand)) 48%,
    rgba(207, 233, 255, 0.1) 50%,
    color-mix(in oklab, var(--ambient) 80%, var(--glow-brand)) 52%,
    transparent 59%
  );
  opacity: calc(var(--dim, 0.85) * 1);
  filter: blur(6px);
}

.hero-inner {
  position: relative;
  z-index: 1;
}

.hero h1 {
  max-width: 13ch;
  text-shadow:
    0 0 30px color-mix(in oklab, var(--ambient) 60%, transparent),
    0 0 90px var(--glow-brand);
  opacity: calc(0.35 + var(--dim, 0.85) * 0.65);
}

.hero h1 em {
  font-style: normal;
  color: var(--brand-bright);
  text-shadow: 0 0 22px var(--glow-brand), 0 0 60px var(--glow-brand);
}

.hero-sub {
  font-size: var(--text-lg);
  color: var(--text-dim);
  max-width: 46ch;
  opacity: calc(0.3 + var(--dim, 0.85) * 0.7);
}

.hero-b2b {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--warm);
  border: 1px solid rgba(255, 178, 102, 0.25);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  margin-bottom: var(--space-4);
  box-shadow: inset 0 0 18px -10px var(--glow-warm);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* Tira de datos bajo el hero */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  max-width: 46rem;
}

@media (max-width: 640px) {
  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.hero-stats .lumen-display {
  font-size: var(--text-xl);
}

/* ---------- PILARES (Por qué Light Tronic) ---------- */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: var(--space-3);
}

.pillar {
  padding: var(--space-4);
  transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur);
}

.pillar:hover {
  border-color: rgba(0, 168, 224, 0.4);
  box-shadow: var(--glow-soft), var(--shadow-lift);
  transform: translateY(-3px);
}

.pillar-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-faint);
  letter-spacing: 0.15em;
}

.pillar svg {
  width: 34px;
  height: 34px;
  color: var(--brand-bright);
  margin-block: var(--space-3);
  filter: drop-shadow(0 0 10px var(--glow-brand));
}

.pillar h3 {
  font-size: var(--text-lg);
}

.pillar p {
  color: var(--text-dim);
  font-size: var(--text-sm);
  margin: 0;
}

/* ---------- CATÁLOGO (spotlight de cursor) ---------- */
.catalog {
  position: relative;
}

/* La linterna: overlay oscuro con agujero radial que sigue al cursor.
   Solo en dispositivos con puntero fino; en touch, reveal por scroll. */
@media (pointer: fine) {
  .catalog.has-torch .catalog-grid::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: var(--radius-lg);
    background: radial-gradient(
      circle 340px at var(--torch-x, 50%) var(--torch-y, 40%),
      transparent 0%,
      rgba(5, 8, 13, 0.38) 65%,
      rgba(5, 8, 13, 0.58) 100%
    );
    transition: opacity var(--dur-slow);
  }
}

.catalog-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  gap: var(--space-3);
}

.cat-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 11rem;
  padding: var(--space-4);
  color: var(--text);
  /* estado "apagado": el hover/in-view lo enciende */
  filter: saturate(0.35) brightness(0.92);
  transition: filter var(--dur-slow) var(--ease-out), border-color var(--dur), box-shadow var(--dur);
}

.cat-card:hover,
.cat-card.is-lit {
  filter: none;
  border-color: rgba(0, 168, 224, 0.45);
  box-shadow: var(--glow-soft);
  color: var(--text);
}

.cat-card svg {
  width: 40px;
  height: 40px;
  color: var(--brand-bright);
  filter: drop-shadow(0 0 12px var(--glow-brand));
}

.cat-card h3 {
  font-size: var(--text-base);
  margin: 0;
}

.cat-card p {
  font-size: var(--text-xs);
  color: var(--text-dim);
  margin: 0;
}

.cat-card .cat-link {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  color: var(--brand-bright);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur), transform var(--dur);
}

.cat-card:hover .cat-link,
.cat-card:focus-visible .cat-link {
  opacity: 1;
  transform: none;
}

/* ---------- SEGMENTOS (temperatura de color) ---------- */
.segments-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

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

.segment {
  padding: var(--space-5) var(--space-4);
  min-height: 17rem;
  display: flex;
  flex-direction: column;
  justify-content: end;
  background:
    radial-gradient(80% 60% at 50% 0%, var(--seg-glow, var(--glow-brand)), transparent 75%),
    linear-gradient(160deg, var(--surface-2), var(--surface));
}

.segment[data-temp="3000"] {
  --seg-glow: var(--glow-warm);
}

.segment[data-temp="4500"] {
  --seg-glow: var(--glow-brand);
}

.segment[data-temp="6500"] {
  --seg-glow: var(--glow-cool);
}

.segment .temp-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  color: var(--text-dim);
  margin-bottom: var(--space-2);
}

.segment[data-temp="3000"] .temp-tag {
  color: var(--warm);
}

.segment[data-temp="6500"] .temp-tag {
  color: var(--cool);
}

.segment p {
  color: var(--text-dim);
  font-size: var(--text-sm);
  margin: 0;
}

/* ---------- EMPRESA / I+D ---------- */
.company-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}

@media (max-width: 940px) {
  .company-grid {
    grid-template-columns: 1fr;
  }
}

.company-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* Laboratorio I+D: panel técnico con líneas de cota */
.lab-panel {
  margin-top: var(--space-6);
  padding: var(--space-5);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 44px 44px;
}

.lab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.lab-spec {
  border-left: 1px solid var(--line-strong);
  padding-left: var(--space-3);
}

.lab-spec .lumen-display {
  font-size: var(--text-2xl);
}

/* líneas de cota SVG que se dibujan al entrar */
.lab-dim-line path,
.lab-dim-line line {
  stroke: var(--brand);
  stroke-width: 1;
  fill: none;
  opacity: 0.7;
}

/* ---------- CONFIANZA ---------- */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-3);
}

.trust-card blockquote {
  margin: 0 0 var(--space-3);
  font-size: var(--text-base);
  color: var(--text);
  line-height: 1.55;
}

.trust-card cite {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-faint);
  letter-spacing: 0.08em;
}

.trust-stars {
  color: var(--warm);
  letter-spacing: 0.2em;
  margin-bottom: var(--space-2);
  text-shadow: 0 0 12px var(--glow-warm);
}

.trust-note {
  font-size: var(--text-sm);
  color: var(--text-faint);
  margin-top: var(--space-4);
}

/* ---------- NOVEDADES / BLOG ---------- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-3);
}

.news-card {
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur);
}

.news-card:hover {
  border-color: rgba(0, 168, 224, 0.4);
  box-shadow: var(--glow-soft), var(--shadow-lift);
  transform: translateY(-3px);
}

.news-card img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
  background: #fff;
}

.news-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.news-date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-faint);
  letter-spacing: 0.1em;
}

.news-body h3 {
  font-size: var(--text-lg);
  margin: 0;
}

.news-body p {
  font-size: var(--text-sm);
  color: var(--text-dim);
  margin: 0;
  flex: 1;
}

.news-link {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
}

/* ---------- RECURSOS TÉCNICOS ---------- */
.resources-list {
  display: grid;
  gap: var(--space-2);
  max-width: 46rem;
}

.resource {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--dur), box-shadow var(--dur);
  color: var(--text);
}

.resource:hover {
  border-color: rgba(0, 168, 224, 0.45);
  box-shadow: var(--glow-soft);
  color: var(--text);
}

.resource svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--brand-bright);
}

.resource-meta {
  flex: 1;
}

.resource-meta strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
}

.resource-meta span {
  font-size: var(--text-xs);
  color: var(--text-faint);
  font-family: var(--font-mono);
}

/* ---------- DISTRIBUIDORES (conversión) ---------- */
.dist {
  background:
    radial-gradient(70% 55% at 50% 100%, rgba(0, 168, 224, 0.09), transparent 75%);
}

.dist-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-6);
  align-items: start;
}

@media (max-width: 940px) {
  .dist-grid {
    grid-template-columns: 1fr;
  }
}

.dist-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  padding: var(--space-5);
}

@media (max-width: 640px) {
  .dist-form {
    grid-template-columns: 1fr;
  }
}

.dist-form .field-full {
  grid-column: 1 / -1;
}

.dist-aside li {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  margin-bottom: var(--space-3);
  color: var(--text-dim);
}

.dist-aside li::before {
  content: "◆";
  color: var(--brand);
  font-size: 0.6em;
  text-shadow: 0 0 8px var(--glow-brand);
}

.dist-contact {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-dim);
}

.dist-contact a {
  font-family: var(--font-mono);
}

.microcopy {
  grid-column: 1 / -1;
  font-size: var(--text-xs);
  color: var(--text-faint);
  margin: 0;
}