/* ============================================================
   PLASMART · LANDINGS SEGMENTADAS (Arquitectura · Industria)
   Estilos específicos de las secciones de cada landing.
   Hereda el sistema visual compartido de v3.css (colores, tipografía,
   nav/header, footer, hero, .sec/.sec-top, .cap-list, .contact, botones).
   ============================================================ */

/* ---------- Hero: subtítulo de landing ---------- */
.hero-sub {
  margin-top: clamp(20px, 2.6vw, 30px);
  max-width: 54ch;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.5; font-weight: 300; color: #c9ced8; letter-spacing: -.01em;
}

/* ---------- Hero menos sombreado (landings) ----------
   El video se ve más (opacidad vía data-hero-opacity en v3.js) y el overlay aclara
   las zonas alta/media, manteniendo el fondo inferior firme para que el texto se lea. */
.hero-soft .hero-bg .hbv { filter: grayscale(.1); }
.hero-soft .hero-bg::after {
  background: linear-gradient(180deg, rgba(8,9,11,.30) 0%, rgba(8,9,11,.04) 34%, rgba(8,9,11,.22) 62%, rgba(8,9,11,.86) 90%, var(--bg) 100%);
}

/* ---------- Cards de aplicaciones (grid 3 col · stack mobile) ----------
   Mismo lenguaje visual que el acordeón "Aplicaciones" del home:
   imagen oscurecida, tinte inferior, código "A · 01", título fino y arrow-link. */
.appcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(28px, 4vw, 48px); }
.appcard { position: relative; overflow: hidden; border-radius: 4px; background: var(--panel); min-height: clamp(380px, 42vw, 520px); display: flex; }
.appcard img, .appcard .ph-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); filter: grayscale(.18) brightness(.88); transition: transform 1.1s var(--ease), filter .7s var(--ease); }
.appcard:hover img { transform: scale(1); filter: grayscale(0) brightness(1.02); }
/* placeholder visual (sin foto aún) — patrón de chapa perforada en clave de marca */
.appcard .ph-art { background: radial-gradient(130% 120% at 72% 0%, #1a1f29 0%, #0c0e12 68%); }
.appcard .ph-art::after { content: ""; position: absolute; inset: 0; opacity: .55; background-image: radial-gradient(rgba(110,123,255,.18) 1px, transparent 1.5px); background-size: 17px 17px; }
.appcard .tint { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,9,11,.94) 2%, rgba(8,9,11,.55) 30%, rgba(8,9,11,.12) 60%, transparent 82%); }
.appcard .body { position: relative; z-index: 2; align-self: flex-end; width: 100%; padding: clamp(24px, 2.6vw, 40px); }
.appcard .ai { font-family: var(--mono); font-size: 12px; color: var(--accent); letter-spacing: .12em; }
.appcard h3 { font-size: clamp(24px, 2.4vw, 36px); font-weight: 200; letter-spacing: -.03em; margin: 12px 0 12px; }
.appcard p { color: #c9ced8; font-size: 15px; line-height: 1.5; max-width: 38ch; }
.appcard .arrow-link { margin-top: 22px; color: #fff; }
.appcard .arrow-link:hover { color: var(--accent); }
.appcard .ph-tag { position: absolute; top: 18px; left: 18px; z-index: 2; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-2); border-radius: 100px; padding: 5px 10px; }
@media (max-width: 860px) { .appcards { grid-template-columns: 1fr; } .appcard { min-height: 360px; } }

/* ---------- Proceso de trabajo / timeline numerado (01–04) ---------- */
.proc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.4vw, 44px); margin-top: clamp(36px, 5vw, 64px); }
.proc-step { position: relative; padding-top: 28px; border-top: 1px solid var(--line); }
.proc-step::before { content: ""; position: absolute; top: -1px; left: 0; width: 42px; height: 1px; background: var(--accent); }
.proc-step .pn { font-family: var(--display); font-weight: 200; font-size: clamp(40px, 4vw, 66px); letter-spacing: -.05em; line-height: 1; color: var(--faint); }
.proc-step h3 { font-size: clamp(20px, 1.7vw, 27px); font-weight: 300; letter-spacing: -.02em; margin: 16px 0 12px; color: var(--text); }
.proc-step p { color: var(--muted); font-size: 14px; line-height: 1.55; }
@media (max-width: 860px) { .proc-grid { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 520px) { .proc-grid { grid-template-columns: 1fr; gap: 26px; } }

/* banda visual del proceso (foto de planta/máquinas láser) */
.proc-media { position: relative; margin-top: clamp(28px, 4vw, 48px); border-radius: 4px; overflow: hidden; background: var(--panel); aspect-ratio: 21 / 9; }
.proc-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.25); transform: scale(1.02); transition: filter .6s var(--ease), transform 1.2s var(--ease); }
.proc-media:hover img { filter: grayscale(0); transform: scale(1); }
.proc-media .tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,9,11,.15) 0%, transparent 34%, rgba(8,9,11,.68) 100%); }
.proc-media .cap { position: absolute; left: clamp(18px, 2.4vw, 34px); bottom: clamp(16px, 2vw, 26px); z-index: 2; color: var(--text); letter-spacing: .12em; }
@media (max-width: 760px) { .proc-media { aspect-ratio: 16 / 10; } }

/* ---------- Bloque diferencial (2 columnas · texto + media) ---------- */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(30px, 5vw, 84px); align-items: center; }
.split .kicker { margin-bottom: 22px; }
.split h2 { font-size: clamp(38px, 5.5vw, 84px); font-weight: 200; letter-spacing: -.045em; line-height: .98; }
.split h2 .accent { color: var(--accent); }
.split .lead { margin-top: 22px; }
.split .feat { list-style: none; margin-top: 30px; border-top: 1px solid var(--line); }
.split .feat li { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--text); }
.split .feat li::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent-soft); }
.split-media { position: relative; aspect-ratio: 4/5; border-radius: 4px; overflow: hidden; background: var(--panel); }
.split-media video, .split-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.22); }
.split-media .tint { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(8,9,11,.5) 100%); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split-media { order: -1; aspect-ratio: 4/5; } }

/* ---------- Proyectos: carrusel horizontal con auto-scroll (reusa .wcard de v3.css) ----------
   El movimiento (auto + wrap sin corte) lo maneja v3.js. Acá sólo el layout horizontal.
   Sigue siendo deslizable a mano y pausa al pasar el mouse. */
.proj-marquee { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-inline: calc(var(--pad) * -1); padding: 10px var(--pad) 16px; }
.proj-marquee::-webkit-scrollbar { display: none; }
.pm-track { display: flex; gap: clamp(16px, 2vw, 28px); width: max-content; }
.pm-track .wcard { flex: 0 0 clamp(250px, 31vw, 380px); }

/* ---------- Testimoniales (layout listo; hoy oculto hasta tener contenido) ---------- */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 40px); margin-top: clamp(34px, 4vw, 56px); }
.testi-card { border: 1px solid var(--line); border-radius: 4px; padding: clamp(24px, 2.4vw, 36px); background: var(--bg-2); }
.testi-card .quote { font-size: clamp(17px, 1.4vw, 20px); font-weight: 300; line-height: 1.5; color: var(--text); letter-spacing: -.01em; }
.testi-card .who { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.testi-card .ava { width: 46px; height: 46px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line-2); flex: 0 0 auto; }
.testi-card .nm { font-size: 15px; color: var(--text); }
.testi-card .st { font-family: var(--mono); font-size: 12px; color: var(--muted); }
@media (max-width: 860px) { .testi-grid { grid-template-columns: 1fr; } }

/* ---------- Dato extra en bloque de contacto (cotizaciones industriales) ---------- */
.c-meta .c-note { color: var(--accent); }
.c-meta .c-note b { color: var(--accent); }

/* ---------- CTA final: titular más contenido que el del home (copy más largo) ---------- */
.contact h2 { font-size: clamp(38px, 7vw, 104px); }
.contact .c-cta .btn { margin: 0; }