/* Tipografia propia, servida desde assets/ (64 KB en total). Antes el sitio
   pedia "Avenir Next", que SOLO existe en Mac y iPhone: en Windows y Android
   caia en Segoe UI o Helvetica, con otro ancho y otro peso, asi que el
   visitante veia una pagina distinta de la disenada. Manrope es variable
   (400-800 en un archivo), asi que los pesos intermedios del CSS son
   legitimos. Instrument Serif sustituye a Georgia en las cursivas de acento,
   que tambien era fuente de sistema. Ambas son OFL, se pueden alojar. */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(assets/manrope-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(assets/manrope-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url(assets/instrumentserif-italic-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url(assets/instrumentserif-italic-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }


:root { --blue: #0a7fe8; --blue-dark: #07519a; --ink: #102540; --paper: #f7f3ed; --white: #fff; --muted: #6b635b; --warm: #a85f3d; --line: rgba(16,37,64,.14); --warm-deep: #8d4e32; }
* { box-sizing: border-box; }
/* El encabezado es fijo (82 px, 72 en móvil): sin esto, al saltar a un
   #ancla el título de la sección queda escondido detrás de él. Aplica a
   cualquier destino con id, no solo a los del índice de página. */
html { scroll-behavior: smooth; overflow-x: hidden; scroll-padding-top: 104px; }
body { margin: 0; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: "Manrope", "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; }
.container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.site-header { position: fixed; z-index: 50; inset: 0 0 auto; height: 82px; padding: 0 4vw; display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.96); border-bottom: 1px solid rgba(0,0,0,.09); backdrop-filter: blur(18px); }
.brand img { width: 162px; height: auto; }
.nav { display: flex; align-items: center; gap: 30px; font-size: 13px; font-weight: 700; letter-spacing: .03em; }
.nav > a:not(.nav-cta) { position: relative; padding-block: 28px; }
.nav > a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 23px; height: 2px; background: var(--blue); transition: right .25s ease; }
.nav > a:hover::after { right: 0; }
.nav-cta { color: white; background: var(--blue); padding: 14px 22px; transition: background .2s, transform .2s; }
.nav-cta:hover { background: var(--blue-dark); transform: translateY(-2px); }
.menu-toggle { display: none; border: 0; background: transparent; padding: 10px; }
.menu-toggle span { display: block; width: 25px; height: 2px; margin: 5px 0; background: var(--ink); }

.hero { min-height: 790px; height: 100svh; position: relative; display: flex; align-items: center; overflow: hidden; color: white; padding-top: 82px; }
.hero-media, .hero-shade, .hero-grid { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media { object-fit: cover; object-position: center 48%; filter: saturate(.92) contrast(1.05); }
.hero-shade { background: linear-gradient(90deg, rgba(7,7,9,.93) 0%, rgba(7,7,9,.70) 46%, rgba(7,7,9,.18) 77%), linear-gradient(0deg, rgba(0,0,0,.48), transparent 55%); }
.hero-grid { opacity: .18; background-image: linear-gradient(rgba(32,145,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(32,145,255,.18) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(90deg, #000, transparent 75%); }
.hero-content { position: relative; z-index: 2; padding-top: 35px; }
.eyebrow { margin: 0 0 28px; display: flex; align-items: center; gap: 12px; text-transform: uppercase; font-size: 12px; line-height: 1; letter-spacing: .2em; font-weight: 800; color: var(--blue); }
.eyebrow span { width: 34px; height: 2px; background: currentColor; }
.eyebrow.light { color: white; opacity: .86; }
.eyebrow.light span { background: var(--blue); }
.hero h1 { max-width: 1100px; margin: 0; font-size: clamp(52px, 6.4vw, 96px); line-height: .92; letter-spacing: -.06em; font-weight: 800; text-transform: uppercase; }
h1 em, h2 em { font-family: inherit; font-style: normal; font-weight: 500; text-transform: none; letter-spacing: -.045em; color: var(--warm); }
.hero h1 em { color: #58b7ff; text-shadow: 0 0 32px rgba(10,127,232,.18); }
.hero-copy { max-width: 620px; margin: 30px 0 34px; color: rgba(255,255,255,.78); font-size: 20px; line-height: 1.55; }
.hero-actions { display: flex; gap: 12px; }
.button { min-width: 210px; padding: 18px 22px; display: inline-flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 800; letter-spacing: .03em; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-3px); }
.button.primary { background: var(--blue); color: white; }
.button.primary:hover { background: var(--blue-dark); }
.button.ghost { border: 1px solid rgba(255,255,255,.4); color: white; }
.button.ghost:hover { background: rgba(255,255,255,.1); }
.hero-proof { display: flex; gap: 0; margin-top: 65px; width: max-content; border-top: 1px solid rgba(255,255,255,.25); }
.hero-proof div { padding: 20px 54px 0 0; margin-right: 54px; display: grid; border-right: 1px solid rgba(255,255,255,.22); }
.hero-proof div:last-child { border: 0; }
.hero-proof strong { font-size: 26px; line-height: 1; }
.hero-proof span { margin-top: 8px; color: rgba(255,255,255,.56); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.scroll-cue { position: absolute; z-index: 3; right: 4vw; bottom: 40px; display: flex; align-items: center; gap: 18px; font-size: 10px; text-transform: uppercase; letter-spacing: .2em; writing-mode: vertical-rl; }
.scroll-cue i { font-size: 17px; font-style: normal; color: var(--blue); }

.trust-strip { background: white; border-bottom: 1px solid var(--line); }
.trust-content { min-height: 108px; display: flex; align-items: center; justify-content: space-between; gap: 35px; }
.trust-content p { margin: 0; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .15em; }
.client-list { flex: 1; display: flex; justify-content: flex-end; gap: clamp(28px, 4.5vw, 72px); align-items: center; }
.client-list img { height: clamp(20px, 2.6vw, 30px); width: auto; object-fit: contain; opacity: .82; filter: grayscale(1); transition: opacity .2s, filter .2s; }
.client-list img:hover { opacity: 1; filter: grayscale(0); }

.section { padding: 130px 0; }
.section-heading h2, .process-intro h2, .led-copy h2, .dark-layout h2, .quote-intro h2 { margin: 0; font-size: clamp(43px, 5.2vw, 72px); line-height: 1.01; letter-spacing: -.048em; font-weight: 700; text-transform: none; }
.split-heading { display: grid; grid-template-columns: 1.65fr .65fr; gap: 80px; align-items: end; }
.split-heading > p { color: var(--muted); font-size: 15px; line-height: 1.7; margin: 0 0 6px; }
.services { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff 0%, #fbf5ec 52%, #f4ede4 100%); }
.services::before { content: ""; position: absolute; width: 620px; height: 620px; right: -260px; top: 35px; border-radius: 50%; background: radial-gradient(circle, rgba(222,137,78,.14), transparent 68%); pointer-events: none; }
.services .container { position: relative; z-index: 1; }
.services .section-heading { padding: clamp(34px, 5vw, 62px); border: 1px solid rgba(152,94,52,.15); border-radius: 32px; background: rgba(255,255,255,.76); box-shadow: 0 18px 44px rgba(70,45,25,.07); backdrop-filter: blur(8px); }
.services .section-heading h2 em, .projects .section-heading h2 em { color: var(--warm); }
.service-list { margin-top: 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; background: transparent; border: 0; }
.service-card { display: block; min-height: 438px; padding: 14px 22px 28px; border: 1px solid rgba(79,57,39,.11); border-radius: 24px; background: rgba(255,255,255,.9); box-shadow: 0 18px 44px rgba(70,45,25,.07); transition: background .25s, transform .25s, box-shadow .25s; overflow: hidden; }
/* Centra la última tarjeta SOLO cuando queda sola en su fila (3n+1). Sin el
   nth-child, con un número de servicios múltiplo de 3 la empujaba a una fila
   extra ella sola. */
.service-card:last-child:nth-child(3n+1) { grid-column: 2 / 3; }
.service-card:hover { background: white; transform: translateY(-7px); box-shadow: 0 28px 64px rgba(72,45,25,.15); }
.service-image { height: 220px; margin: 0 0 22px; overflow: hidden; border-radius: 16px; background: #e8ded2; }
.service-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.02); transition: transform .6s, filter .35s; }
.service-card:hover .service-image img { transform: scale(1.045); filter: saturate(1.08); }
.service-top { display: flex; justify-content: space-between; color: var(--warm); font-size: 12px; }
.service-top i { font-style: normal; font-size: 20px; }
.service-card h3 { margin: 23px 0 14px; font-size: 22px; line-height: 1.05; letter-spacing: -.03em; text-transform: none; }
.service-card > p { color: var(--muted); font-size: 13px; line-height: 1.65; }
.center-cta { margin-top: 42px; display: flex; justify-content: center; }

.led-feature { min-height: 760px; display: grid; grid-template-columns: 1.05fr .95fr; background: var(--ink); color: white; }
.led-visual { position: relative; overflow: hidden; min-height: 650px; }
.led-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 70%, rgba(17,17,19,.4)); border-radius: 0 32px 32px 32px; clip-path: polygon(36% 0, 100% 0, 100% 100%, 0 100%, 0 36%); }
.led-visual img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.08); border-radius: 0 32px 32px 32px; clip-path: polygon(36% 0, 100% 0, 100% 100%, 0 100%, 0 36%); }
.led-badge { position: absolute; z-index: 2; right: 0; bottom: 55px; width: 150px; aspect-ratio: 1; background: var(--blue); display: grid; place-content: center; text-align: center; }
.led-badge strong { font-size: 34px; line-height: 1; }
.led-badge span { font-size: 10px; margin-top: 8px; text-transform: uppercase; letter-spacing: .13em; }
.led-copy { padding: 95px clamp(45px, 6vw, 105px); align-self: center; }
.led-copy h2 { color: #f7fbff; font-weight: 650; }
.led-copy h2 em { color: #58b7ff; font-weight: 550; text-shadow: 0 0 30px rgba(10,127,232,.16); }
.led-copy > p:not(.eyebrow) { max-width: 600px; color: rgba(255,255,255,.62); font-size: 15px; line-height: 1.7; margin: 30px 0 40px; }
.led-copy p strong { color: #fff; font-weight: 800; }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px 36px; margin-bottom: 40px; }
.feature-grid div { display: grid; grid-template-columns: 28px 1fr; gap: 4px 10px; }
.feature-grid b { grid-row: 1 / 3; color: var(--blue); font-size: 10px; }
.feature-grid strong { font-size: 13px; text-transform: uppercase; letter-spacing: .03em; }
.feature-grid span { color: rgba(255,255,255,.5); font-size: 12px; line-height: 1.55; }
.text-link { display: inline-flex; gap: 45px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--ink); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.text-link span { color: var(--blue); font-size: 17px; }
.light-link { color: white; border-color: rgba(255,255,255,.45); }

.process-section { background: white; }
.process-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 120px; }
.process-intro { position: sticky; top: 130px; align-self: start; }
.process-intro > p:not(.eyebrow) { margin: 28px 0 35px; max-width: 400px; color: var(--muted); line-height: 1.7; }
.process-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.process-list li { display: grid; grid-template-columns: 70px 1fr; padding: 34px 0; border-bottom: 1px solid var(--line); }
.process-list > li > span { color: var(--blue); font-size: 12px; font-weight: 800; }
.process-list h3 { margin: 0 0 10px; font-size: 26px; text-transform: none; letter-spacing: -.03em; }
.process-list p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }

.sectors { background: #eef3f8; }
.sectors-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; align-items: start; }
.sectors h2 { margin: 0; font-size: clamp(43px, 5.2vw, 72px); line-height: 1.01; letter-spacing: -.048em; font-weight: 700; text-transform: none; }
.sector-list { display: flex; flex-wrap: wrap; gap: 10px; }
.sector-list span { padding: 15px 18px; border: 1px solid rgba(6,21,47,.14); background: rgba(255,255,255,.62); color: var(--ink); font-size: 12px; font-weight: 750; letter-spacing: .025em; transition: background .2s, color .2s, border-color .2s; }
.sector-list span:hover { background: var(--ink); color: white; border-color: var(--ink); }

.projects { position: relative; overflow: hidden; background: linear-gradient(145deg, #f6eee4 0%, #fffaf4 48%, #eef5fa 100%); }
.projects::before, .projects::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; filter: blur(1px); }
.projects::before { width: 480px; height: 480px; left: -210px; top: 180px; background: radial-gradient(circle, rgba(214,124,68,.16), transparent 69%); }
.projects::after { width: 560px; height: 560px; right: -260px; bottom: -180px; background: radial-gradient(circle, rgba(10,127,232,.12), transparent 69%); }
.projects .container { position: relative; z-index: 1; }
.projects-heading { align-items: end; }
.project-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; margin-top: 64px; }
.project-card { grid-column: span 6; padding: 16px 16px 27px; overflow: hidden; border: 1px solid rgba(92,61,38,.12); border-radius: 24px; background: rgba(255,255,255,.92); box-shadow: 0 18px 44px rgba(70,45,25,.07); transition: transform .3s, box-shadow .3s; }
.project-card:nth-child(1), .project-card:nth-child(4) { grid-column: span 7; }
.project-card:nth-child(2), .project-card:nth-child(3) { grid-column: span 5; }
.project-card:hover { transform: translateY(-7px); box-shadow: 0 28px 64px rgba(72,45,25,.15); }
.project-image { position: relative; overflow: hidden; aspect-ratio: 1.5; border-radius: 16px; background: #e8ded2; }
.project-card.project-1 .project-image { border-radius: 32px 0 32px 0; clip-path: polygon(0 0, 70% 0, 100% 26%, 100% 100%, 30% 100%, 0 74%); background: var(--warm); }
.project-card:nth-child(2) .project-image, .project-card:nth-child(3) .project-image { aspect-ratio: 1.18; }
.project-image img, .project-image video { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.02); transition: transform .6s, filter .4s; }
.project-card.project-video .project-image { background: var(--ink); }
.project-card:hover img { transform: scale(1.035); filter: saturate(1); }
.project-image span { position: absolute; top: 16px; left: 16px; padding: 8px 11px; border-radius: 999px; background: var(--warm); color: white; font-size: 10px; font-weight: 800; box-shadow: 0 8px 20px rgba(79,36,17,.22); }
.projects-subhead { margin: 56px 0 -32px; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.projects-subhead:first-of-type { margin-top: 0; }
.projects-subhead h3 { margin: 0; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.05; letter-spacing: -.035em; text-transform: none; }
.projects-subhead p { margin: 0; max-width: 420px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.project-card > p { margin: 22px 0 8px; color: var(--warm); font-size: 10px; text-transform: uppercase; font-weight: 800; letter-spacing: .15em; }
.project-card h3 { margin: 0; font-size: 22px; text-transform: none; letter-spacing: -.03em; }
.project-detail { color: var(--muted); font-size: 13px; margin-top: 10px; max-width: 540px; }

.dark-section { background: #06152f; color: white; padding: 120px 0; }
.dark-layout { display: grid; grid-template-columns: 1fr 1.05fr; gap: 110px; }
.dark-layout h2 { max-width: 570px; }
.reasons { border-top: 1px solid rgba(255,255,255,.18); }
.reasons div { padding: 25px 0; display: grid; grid-template-columns: .8fr 1.2fr; gap: 28px; border-bottom: 1px solid rgba(255,255,255,.18); }
.reasons span { font-size: 13px; font-weight: 800; text-transform: uppercase; }
.reasons p { margin: 0; color: rgba(255,255,255,.52); font-size: 13px; line-height: 1.6; }

.quote-section { position: relative; overflow: hidden; padding: 125px 0; background: radial-gradient(circle at 78% 18%, rgba(10,127,232,.18), transparent 34%), linear-gradient(135deg, #020712 0%, #06152f 58%, #0a2645 100%); color: white; border-top: 1px solid rgba(255,255,255,.08); }
.quote-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .2; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(90deg, transparent, #000 72%); }
.quote-layout { display: grid; grid-template-columns: 1fr .9fr; gap: 110px; align-items: start; }
.quote-layout { position: relative; z-index: 1; }
.quote-intro .eyebrow.light span { background: white; }
.quote-intro h2 em { color: #73bfff; opacity: 1; }
.quote-intro > p:not(.eyebrow) { max-width: 560px; margin: 28px 0; color: rgba(255,255,255,.72); line-height: 1.7; }
.quote-intro .response-promise { width: max-content; margin-top: -12px; padding: 9px 13px; border: 1px solid rgba(255,255,255,.28); color: white; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.quote-intro .scope-note { margin-top: 14px; max-width: 42ch; color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.6; }
.direct-contact { margin-top: 55px; display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 13px; }
.direct-contact span { width: 100%; color: rgba(255,255,255,.6); font-size: 10px; text-transform: uppercase; letter-spacing: .15em; }
.direct-contact a { border-bottom: 1px solid rgba(255,255,255,.5); }
.quote-form { padding: 42px; background: rgba(255,255,255,.98); color: var(--ink); display: grid; grid-template-columns: 1fr 1fr; gap: 25px 18px; box-shadow: 0 34px 90px rgba(0,0,0,.38); }
.field { display: grid; gap: 8px; }
.field.full { grid-column: 1 / -1; }

/* Formulario por pasos (venta-pantallas-led.html, 2026-09-09). El .quote-form
   es un grid de dos columnas y los .field son sus hijos directos: envolver
   unos cuantos en un contenedor los sacaria de esa reticula y se verian de
   otro ancho que los de afuera. Por eso el paso es a la vez celda de ancho
   completo y grid propio con la MISMA reticula y el mismo gap — asi los
   campos de adentro caen donde caian antes.
   Se declara con `hidden` desde el HTML y no con una clase para que el paso 2
   este oculto tambien si el JS no carga: en ese caso el visitante ve el paso 1
   y el envio normal del formulario sigue funcionando. */
.form-step { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 25px 18px; }
/* IMPRESCINDIBLE, y no es redundante: `display: grid` de la regla de arriba es
   una declaracion del autor y le gana al `[hidden] { display: none }` de la
   hoja del navegador, asi que sin esto el paso 2 se ve SIEMPRE y el visitante
   recibe los 13 campos de golpe — que es justo lo que el cambio evita.
   Al medir si un paso esta oculto, mirar `getComputedStyle(paso).display`, NO
   la propiedad `.hidden`: esa da true aunque el paso se siga viendo. */
.form-step[hidden] { display: none; }
.form-progress { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.form-progress.is-done { color: var(--blue); }
.field label, .captcha-field > span { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.field input, .field select, .field textarea { min-width: 0; width: 100%; padding: 13px 0; border: 0; border-bottom: 1px solid #c9c8c5; background: transparent; border-radius: 0; outline: none; color: var(--ink); font: inherit; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); }

/* Foco visible de verdad. La regla base de arriba pone outline:none, asi
   que hasta el 2026-09-08 el unico indicador al tabular era el borde
   inferior pasando de gris a azul: 1px de color y nada mas, invisible
   para quien no distingue ese matiz. El box-shadow engrosa la linea a 3px
   sin reflujar (subir el border-bottom a 3px moveria el contenido 2px) y
   el fondo tenue marca la zona activa sin depender solo del color.
   El azul sobre el blanco del formulario da 4.03:1, por encima del 3:1
   que pide WCAG 1.4.11 para un indicador no textual. */
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { box-shadow: 0 2px 0 0 var(--blue); background: rgba(10,127,232,.05); }
.form-submit:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* Campo con error, marcado por quote-form.js. El aviso va DENTRO del .field
   (que es un grid con gap, asi que se acomoda solo) y no solo al pie del
   formulario: la nota del pie queda debajo del boton y quien esta a media
   pagina no la ve. El rojo es el mismo de .form-note.is-error, 5.44:1 sobre
   blanco. El color no va solo: el campo tambien recibe texto que nombra el
   problema, para no depender de distinguir rojo de gris. */
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #c0392b; box-shadow: 0 2px 0 0 #c0392b; }
.field-error { margin: 0; color: #c0392b; font-size: 12px; font-weight: 700; }
.field-optional { margin-left: 6px; color: var(--muted); font-weight: 600; text-transform: none; letter-spacing: 0; }
.field textarea { resize: vertical; min-height: 84px; line-height: 1.55; }
.field textarea::placeholder { color: #a9a7a3; }
.form-submit { grid-column: 1 / -1; margin-top: 10px; border: 0; background: var(--ink); color: white; padding: 18px 20px; display: flex; justify-content: space-between; font-weight: 800; cursor: pointer; transition: background .2s; }
.form-submit:hover { background: var(--blue-dark); }
.form-note { grid-column: 1 / -1; margin: -12px 0 0; color: var(--muted); font-size: 10px; }
.form-note.is-error { color: #c0392b; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-submit[disabled] { opacity: .6; cursor: not-allowed; }
/* Widget de Cloudflare Turnstile (captcha del formulario de cotización).
   Va dentro de un .field.full, que ya le da el ancho completo y la
   separación con su etiqueta; min-height reserva su altura para que el
   botón de enviar no brinque cuando el widget termina de cargar. */
.captcha-field .cf-turnstile { min-height: 65px; }

.imx-hero { padding: 165px 0 70px; }
.imx-hero h1 { margin: 0; max-width: 820px; font-size: clamp(43px, 5.6vw, 78px); line-height: .98; letter-spacing: -.05em; font-weight: 800; text-transform: uppercase; }
.imx-hero h1 em { color: var(--blue); font-style: normal; }
.imx-hero-copy { max-width: 640px; margin: 28px 0 38px; color: var(--muted); font-size: 17px; line-height: 1.65; }

/* Hero con imagen a sangre para las páginas de servicio. Son las que
   reciben el tráfico de búsqueda y de anuncios, y hasta el 2026-08-16
   abrían con texto sobre crema mientras la home abría con video — el
   visitante que llega de Google veía la pantalla menos impresionante del
   sitio. Mismo tratamiento que .hero, con su propio degradado. */
.imx-hero.has-media { position: relative; overflow: hidden; padding: 225px 0 105px; background: var(--ink); color: white; }
.imx-hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.06); }
.imx-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,12,22,.95) 0%, rgba(6,12,22,.76) 46%, rgba(6,12,22,.28) 84%), linear-gradient(0deg, rgba(0,0,0,.55), transparent 60%); }
.imx-hero.has-media > .container { position: relative; z-index: 2; }
.imx-hero.has-media .eyebrow { color: #58b7ff; }
.imx-hero.has-media h1 { color: white; }
.imx-hero.has-media h1 em { color: #58b7ff; text-shadow: 0 0 32px rgba(10,127,232,.2); }
.imx-hero.has-media .imx-hero-copy { color: rgba(255,255,255,.78); }

/* Índice de la página. La de LED tiene diez secciones y quien llega de
   Google casi siempre viene por una sola cosa (el precio, si sirve en
   exterior, un caso parecido al suyo). Sin esto tiene que recorrerla
   entera para encontrarla: mucha información deja de ser un problema si
   se puede saltar directo. */
.page-index { margin-top: 38px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.page-index span { margin-right: 4px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,.5); }
.page-index a { padding: 9px 16px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; color: white; font-size: 12px; font-weight: 700; transition: background .2s, border-color .2s; }
.page-index a:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.5); }
.imx-hero:not(.has-media) .page-index span { color: var(--muted); }
.imx-hero:not(.has-media) .page-index a { border-color: var(--line); color: var(--ink); }
.imx-hero:not(.has-media) .page-index a:hover { background: rgba(16,37,64,.05); }
.button.ghost-dark { border: 1px solid var(--line); color: var(--ink); }
.button.ghost-dark:hover { background: rgba(16,37,64,.05); }

.imx-grid { margin-top: 32px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.imx-card { grid-column: span 2; padding: 30px 26px; border: 1px solid rgba(79,57,39,.11); border-radius: 24px; background: rgba(255,255,255,.9); box-shadow: 0 18px 44px rgba(70,45,25,.07); }
.imx-card:nth-child(4) { grid-column: 2 / 4; }
.imx-card:nth-child(5) { grid-column: 4 / 6; }
/* Chip azul suave en vez de píldora café sólida: se lee más limpio sobre
   la tarjeta blanca y deja el azul sólido libre para lo que sí destaca
   (tarjeta de precio recomendada, badges de cifra). */
.imx-card > span { display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(10,127,232,.09); color: var(--blue-dark); border: 1px solid rgba(10,127,232,.16); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.imx-card h3 { margin: 20px 0 12px; font-size: 22px; line-height: 1.1; letter-spacing: -.03em; }
.imx-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }

.dark-cta { text-align: center; max-width: 720px; margin-inline: auto; }
.dark-cta h2 { margin: 18px 0 22px; }
.dark-cta > p:not(.eyebrow) { max-width: 560px; margin: 0 auto 40px; color: rgba(255,255,255,.62); font-size: 15px; line-height: 1.7; }
.dark-cta p strong { color: #fff; font-weight: 800; }
.dark-cta .hero-actions { justify-content: center; }

.gallery-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.gallery-item { position: relative; overflow: hidden; border-radius: 16px; aspect-ratio: 4 / 3; background: #e8ded2; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.02); transition: transform .5s; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-caption { position: absolute; inset: auto 0 0 0; padding: 16px 16px 14px; background: linear-gradient(0deg, rgba(6,21,47,.85), transparent); color: white; font-size: 12px; font-weight: 700; line-height: 1.35; }
.gallery-item video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--ink); }
.gallery-item.is-video { background: var(--ink); }
.gallery-item.is-video .gallery-caption { inset: 0 0 auto 0; padding: 14px 16px 24px; background: linear-gradient(180deg, rgba(6,21,47,.88), transparent); }
/* Capacidades de la plataforma propia de transmisión. Deliberadamente NO
   son tarjetas: la página ya tiene una rejilla de tarjetas para las
   plataformas de terceros, y esto es un producto propio — separarlo por
   reglas en vez de encajonarlo lo distingue de la lista de opciones. */
.platform { background: linear-gradient(180deg, #fff 0%, #fbf5ec 55%, #f4ede4 100%); }
.platform-list { margin: 54px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.platform-list > div { padding: 32px 30px 30px 0; border-right: 1px solid var(--line); }
.platform-list > div:nth-child(3n) { border-right: 0; padding-right: 0; }
.platform-list > div:nth-child(n+4) { border-top: 1px solid var(--line); }
.platform-list dt { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--blue); }
.platform-list dd { margin: 14px 0 0; }
.platform-list dd strong { display: block; margin-bottom: 9px; font-size: 20px; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); }
.platform-list dd span { display: block; color: var(--muted); font-size: 13px; line-height: 1.65; }
/* La capacidad va en fila completa: con 7 bloques en 3 columnas el último
   quedaría huérfano, y una cifra así merece peso propio, no ser el
   séptimo punto de una lista. */
.platform-list > div.is-wide { grid-column: 1 / -1; border-right: 0; padding-right: 0; border-top: 1px solid var(--line); }
.platform-list > div.is-wide dd { display: grid; grid-template-columns: auto 1fr; gap: 4px 34px; align-items: baseline; }
.platform-list > div.is-wide dd strong { margin: 0; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.03em; }
.platform-list > div.is-wide dd span { max-width: 640px; }

/* Puente de una página de servicio hacia producción integral. Existe
   porque la página de LED es la que recibe el tráfico de búsqueda, pero
   el negocio que VideoDesign quiere crecer no es la renta de equipo: sin
   este bloque, quien llega buscando "renta pantalla led" se va sin
   enterarse de que se hace el evento completo (antes el único enlace
   estaba en el footer). */
.bridge { background: linear-gradient(150deg, #f4ede4 0%, #fffaf4 55%, #eef5fa 100%); }
.bridge-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(36px, 5vw, 70px); align-items: center; }
.bridge-visual { position: relative; overflow: hidden; border-radius: 0 24px 24px 24px; aspect-ratio: 4 / 3; background: var(--ink); }
.bridge-visual img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.94); }
.bridge-badge { position: absolute; right: 0; bottom: 26px; padding: 16px 20px; background: var(--blue); color: white; text-align: center; }
.bridge-badge strong { display: block; font-size: 26px; line-height: 1; }
.bridge-badge span { display: block; margin-top: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: .13em; }
.bridge-copy h2 { margin: 0; font-size: clamp(34px, 4.4vw, 50px); line-height: 1.03; letter-spacing: -.04em; font-weight: 700; text-transform: none; }
.bridge-copy h2 em { color: var(--warm); }
.bridge-copy > p { margin: 24px 0 0; color: var(--muted); font-size: 15px; line-height: 1.7; max-width: 560px; }
.bridge-list { margin: 26px 0 32px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.bridge-list li { padding: 8px 14px; border: 1px solid rgba(10,127,232,.2); border-radius: 999px; background: rgba(255,255,255,.7); font-size: 12px; font-weight: 700; }

/* Banda de especificaciones: cifras grandes separadas por reglas, sobre
   fondo oscuro. Existe para romper la repetición de rejillas de tarjetas
   blancas — un dato técnico duro no debería vivir en el mismo envase que
   un argumento de venta. */
.spec-band { background: var(--ink); color: white; }
.spec-band .section-heading h2 { color: #f7fbff; }
.spec-band .section-heading h2 em { color: #58b7ff; }
.spec-band .split-heading > p { color: rgba(255,255,255,.6); }
.spec-list { margin: 60px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid rgba(255,255,255,.18); }
.spec-list > div { padding: 36px 30px 6px 0; border-right: 1px solid rgba(255,255,255,.13); }
.spec-list > div:last-child { border-right: 0; padding-right: 0; }
.spec-list dt { font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; line-height: 1; letter-spacing: -.045em; color: white; }
.spec-list dd { margin: 0; }
.spec-list dd strong { display: block; margin: 16px 0 10px; font-size: 10px; text-transform: uppercase; letter-spacing: .13em; color: #58b7ff; }
.spec-list dd span { display: block; color: rgba(255,255,255,.56); font-size: 13px; line-height: 1.6; }

/* Par de fotos verticales (retrato). El .gallery-grid normal es 4:3 y
   recorta una foto vertical hasta dejar solo una rebanada. */
.gallery-grid.portrait-pair { grid-template-columns: repeat(2, 1fr); max-width: 720px; gap: 22px; }
.gallery-grid.portrait-pair .gallery-item { aspect-ratio: 3 / 4; }
/* Ejemplos de aplicación de soluciones-espacios-comerciales.html (2026-09-13).
   Siete imágenes 16:9 en retícula de 12 columnas: 3 grandes arriba y 4 abajo,
   para no dejar una huérfana como haría auto-fill con 3 columnas. */
.gallery-grid.retail-examples { grid-template-columns: repeat(12, 1fr); }
.gallery-grid.retail-examples .gallery-item { grid-column: span 4; aspect-ratio: 16 / 9; }
.gallery-grid.retail-examples .gallery-item:nth-child(n+4) { grid-column: span 3; }
.testimonials { background: linear-gradient(180deg, #fff 0%, #fbf5ec 60%, #f4ede4 100%); }
.testimonial-grid { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.testimonial-card { margin: 0; padding: 34px 30px 30px; border: 1px solid rgba(79,57,39,.11); border-radius: 24px; background: rgba(255,255,255,.94); box-shadow: 0 18px 44px rgba(70,45,25,.07); position: relative; }
.testimonial-card::before { content: "“"; position: absolute; top: 6px; left: 24px; font-size: 76px; line-height: 1; color: var(--warm); opacity: .28; font-family: "Instrument Serif", Georgia, "Times New Roman", serif; }
.testimonial-card blockquote { position: relative; margin: 0 0 22px; color: var(--ink); font-size: 15px; line-height: 1.68; }
.testimonial-card figcaption { display: grid; gap: 3px; padding-top: 18px; border-top: 1px solid rgba(79,57,39,.13); }
.testimonial-card figcaption strong { font-size: 15px; letter-spacing: -.01em; }
.testimonial-card figcaption span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.testimonial-card .testimonial-company { color: var(--warm); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: 10px; margin-top: 4px; }
.testimonial-solo { max-width: 780px; margin: 44px auto 0; }
.testimonial-solo blockquote { font-size: 17px; line-height: 1.72; }
.testimonial-solo::before { font-size: 88px; }
.faq-grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.faq-item { padding: 28px 26px; border: 1px solid rgba(79,57,39,.11); border-radius: 24px; background: rgba(255,255,255,.9); box-shadow: 0 18px 44px rgba(70,45,25,.07); }
.faq-item h3 { margin: 0 0 12px; font-size: 20px; line-height: 1.15; letter-spacing: -.02em; text-transform: none; }
.faq-item p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.accion-reel { margin-top: 40px; overflow: hidden; border-radius: 24px; background: var(--ink); aspect-ratio: 16 / 9; box-shadow: 0 28px 64px rgba(72,45,25,.15); }
.accion-reel video { display: block; width: 100%; height: 100%; object-fit: cover; }

footer { background: white; padding: 75px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.8fr .7fr .9fr .6fr; gap: 60px; }
.footer-brand img { width: 175px; }
.footer-brand p { max-width: 300px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.footer-grid > div:not(.footer-brand) { display: flex; flex-direction: column; gap: 10px; font-size: 12px; }
.footer-grid strong { margin-bottom: 9px; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.footer-grid a:hover { color: var(--blue); }
.footer-wa { color: var(--blue); font-weight: 800; }
.footer-bottom { margin-top: 65px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }
.floating-wa { position: fixed; z-index: 70; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 12px; color: white; font-size: 12px; font-weight: 800; }
.wa-label { padding: 11px 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(3,12,24,.94); box-shadow: 0 12px 34px rgba(0,0,0,.24); opacity: 0; transform: translateX(8px); transition: opacity .2s, transform .2s; pointer-events: none; }
.wa-icon { width: 58px; height: 58px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #25d366; box-shadow: 0 14px 36px rgba(0,0,0,.28), 0 0 0 6px rgba(37,211,102,.12); transition: transform .2s, box-shadow .2s; }
.wa-icon img { width: 27px; height: 27px; }
.floating-wa:hover .wa-label, .floating-wa:focus-visible .wa-label { opacity: 1; transform: translateX(0); }
.floating-wa:hover .wa-icon { transform: translateY(-3px); box-shadow: 0 18px 42px rgba(0,0,0,.32), 0 0 0 8px rgba(37,211,102,.14); }
.floating-wa:focus-visible { outline: none; }
.floating-wa:focus-visible .wa-icon { outline: 3px solid white; outline-offset: 3px; }

.pricing { background: linear-gradient(180deg, #fff 0%, #fbf5ec 60%, #f4ede4 100%); }
.pricing-grid { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.price-card { padding: 32px 28px; border: 1px solid rgba(79,57,39,.11); border-radius: 24px; background: rgba(255,255,255,.94); box-shadow: 0 18px 44px rgba(70,45,25,.07); }
.price-card.is-featured { border-color: rgba(10,127,232,.4); box-shadow: 0 22px 52px rgba(10,127,232,.14); }
.price-card > span { display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(10,127,232,.09); color: var(--blue-dark); border: 1px solid rgba(10,127,232,.16); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.price-card.is-featured > span { background: var(--blue); color: white; border-color: var(--blue); }
.price-amount { margin: 18px 0 0; color: var(--ink); font-size: 42px; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.price-amount b { margin-left: 6px; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: 0; }
.price-card h3 { margin: 14px 0 10px; font-size: 20px; line-height: 1.1; letter-spacing: -.03em; text-transform: none; }
.price-card p:not(.price-amount) { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.pricing-extra { margin-top: 22px; padding: 26px 28px; border: 1px solid rgba(79,57,39,.11); border-radius: 24px; background: rgba(255,255,255,.7); }
.pricing-extra h3 { margin: 0 0 16px; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.pricing-extra ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 34px; }
.pricing-extra li { display: grid; gap: 4px; align-content: start; }
.pricing-extra b { color: var(--ink); font-size: 13px; letter-spacing: -.01em; }
.pricing-extra li > span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.pricing-extra em { margin-top: 4px; color: var(--ink); font-style: normal; font-weight: 800; font-size: 15px; letter-spacing: -.02em; }
.pricing-terms { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.pricing-terms strong { display: block; margin-bottom: 10px; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--blue); }
.pricing-terms p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
/* Manejo de la objeción de precio. El mercado anuncia por metro cuadrado
   el equipo solo; aquí el precio trae montaje, operación y desmontaje
   dentro. Sin esta comparación explícita, quien mira solo el titular cree
   que somos más caros. */
.pricing-compare { margin-top: 40px; padding: 32px 34px; border: 1px solid rgba(10,127,232,.22); border-left: 4px solid var(--blue); border-radius: 0 24px 24px 0; background: rgba(10,127,232,.045); }
.pricing-compare h3 { margin: 0 0 12px; font-size: 20px; line-height: 1.2; letter-spacing: -.02em; text-transform: none; }
.pricing-compare p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.pricing-compare ul { margin: 16px 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 26px; }
.pricing-compare li { position: relative; padding-left: 24px; color: var(--ink); font-size: 13px; font-weight: 700; }
.pricing-compare li::before { content: "✓"; position: absolute; left: 0; top: -1px; color: var(--blue); font-weight: 800; }
.pricing-compare-note { font-weight: 700; color: var(--ink) !important; }
/* El argumento de los 33 años va aquí y no en la lista: en una lista de
   puntos verificables, un "años de experiencia" —que dice todo
   competidor— le resta credibilidad a los que sí se pueden comprobar. */
.pricing-compare-exp { margin-top: 20px !important; padding-top: 18px; border-top: 1px solid rgba(10,127,232,.18); }
.pricing-compare-exp strong { color: var(--ink); }
.pricing-cta { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; }
.faq-item a { color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* Tarjeta de tipo de pantalla con foto (sección #tipos de la página de
   venta). La imagen va a sangre en la parte superior: se compensa el padding
   lateral de .imx-card con margen negativo y se anula el de arriba. Va ANTES
   de los 
/* Calculadora de proyecto (venta-pantallas-led.html). Reglas base ANTES de
   los 
/* Simulador de pitch (misma sección que la calculadora). */
.sim-block { margin-top: clamp(40px, 5vw, 64px); }
.sim-head { max-width: 720px; margin-bottom: 26px; }
.sim-head h3 { margin: 0 0 8px; font-size: clamp(20px, 2.4vw, 26px); font-weight: 600; }
.sim-head p { margin: 0; color: var(--muted); line-height: 1.6; }
.sim-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sim-card { background: var(--ink); border-radius: 0 16px 16px 16px; overflow: hidden; }
.sim-card canvas { display: block; width: 100%; height: auto; background: #000; }
.sim-card figcaption { padding: 12px 14px 14px; color: #fff; }
.sim-card b { display: block; font-size: 15px; font-weight: 600; }
.sim-card small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.45; color: rgba(255,255,255,.62); }
.sim-card.is-pick { outline: 2px solid var(--blue); outline-offset: 2px; }
.sim-card.is-pick b::after { content: " · recomendado"; color: var(--blue); font-weight: 500; }

@media: si se colocan después, los breakpoints pierden por cascada. */
.calc-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
.calc-form { display: grid; gap: 18px; }
.calc-nota { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.calc-result { position: sticky; top: 104px; padding: clamp(22px, 3vw, 32px); background: var(--ink); color: #fff; border-radius: 0 24px 24px 24px; }
.calc-out { display: grid; gap: 2px; }
.calc-hint { margin: 0; color: rgba(255,255,255,.62); font-size: 13px; line-height: 1.6; }
.calc-item { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.calc-item:last-child { border-bottom: 0; }
.calc-item span { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.calc-item strong { font-size: clamp(20px, 2.4vw, 26px); font-weight: 600; line-height: 1.15; }
.calc-item em { font-style: normal; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.66); }
.calc-send { margin-top: 22px; width: 100%; justify-content: center; opacity: .45; pointer-events: none; transition: opacity .2s ease; }
.calc-out.is-ready + .calc-send { opacity: 1; pointer-events: auto; }

@media a propósito, como el resto de las reglas base. */
.imx-card.has-photo { padding-top: 0; overflow: hidden; }
.imx-card .card-photo { margin: 0 -26px 22px; aspect-ratio: 16 / 10; overflow: hidden; background: #e8ded2; }
.imx-card .card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.imx-card.has-photo h3 { margin-top: 22px; }
/* Caso destacado: la misma tarjeta con foto, a todo el ancho y con la imagen
   más panorámica que en la rejilla. */
.case-lead { margin-top: 32px; }
.case-lead .card-photo { aspect-ratio: 21 / 9; }
/* Rejilla pareja de 3 por fila: .imx-grid centra las tarjetas 4 y 5, lo que
   funciona con 5 tarjetas pero deja la 6a sola en su fila. */
.imx-grid.grid-3 .imx-card:nth-child(4), .imx-grid.grid-3 .imx-card:nth-child(5) { grid-column: span 2; }
/* Con 7 tarjetas la última queda sola a la izquierda de su fila; se centra.
   Acotado a :last-child para no tocar rejillas más largas. */
.imx-grid.grid-3 .imx-card:nth-child(7):last-child { grid-column: 3 / 5; }
/* Con 8 tarjetas la 7a y la 8a comparten la ultima fila, centradas. Se agrego
   la 8a (soluciones para retail, 2026-09-13) justo en ese hueco para que
   #tipos no creciera ni una fila en escritorio; en movil es carrusel. */
.imx-grid.grid-3 .imx-card:nth-child(7):nth-last-child(2) { grid-column: 2 / 4; }
.imx-grid.grid-3 .imx-card:nth-child(8):last-child { grid-column: 4 / 6; }

/* Tabla de funciones con IA (soluciones-espacios-comerciales.html). En movil
   cada fila se vuelve una tarjeta con las etiquetas de columna encima: una
   tabla de tres columnas en 375 px obliga a desplazar de lado. */
.ai-table { width: 100%; margin-top: 32px; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: rgba(255,255,255,.9); box-shadow: 0 18px 44px rgba(70,45,25,.07); font-size: 15px; }
.ai-table th, .ai-table td { padding: 18px 22px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); line-height: 1.55; }
.ai-table thead th { background: #efe7dc; color: var(--ink); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ai-table tbody th { width: 24%; color: var(--ink); font-weight: 800; }
.ai-table td { color: var(--muted); }
.ai-table td:last-child { color: var(--ink); }
.ai-table tbody tr:last-child > * { border-bottom: 0; }
.ai-note { margin: 16px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.retail-cta { max-width: 760px; }

/* Catálogo de series (venta-pantallas-led.html, 2026-09-06). Rejilla propia y
   no .imx-grid porque esa tiene reglas nth-child(4)/(5) pensadas para bloques
   de 5-6 tarjetas: con 2, 3 o 4 series por grupo descolgaría las últimas.
   Va antes de los @media a propósito, como el resto de las reglas base. */
/* Hero de la página de venta (2026-09-06): la segunda línea pasa a serif
   itálica para separarla de la primera en versalitas. Va con clase propia
   .sale-hero y no en .imx-hero h1 em, que comparten otras cinco páginas
   (pantallas-led, streaming, produccion-integral, experiencias-inmersivas,
   en-accion) y no deben cambiar. */
.imx-hero.sale-hero h1 em { font-family: "Instrument Serif", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -.02em; }
.imx-hero.sale-hero h1 { letter-spacing: -.055em; }

/* Inicio con obra REAL (2026-09-13, pedido de Abel). La imagen de fondo era
   generada y lo primero que ve el visitante tiene que ser algo entregado. La
   única foto real de alto impacto (Centro de Convenciones) mide 722 px: a
   sangre completa se vería borrosa, por eso va como figura a la derecha, cerca
   de su tamaño nativo, y no de fondo. */
.imx-hero.sale-hero.has-proof { padding: 170px 0 90px; }
.sale-hero.has-proof > .container { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 56px; align-items: center; }
.sale-hero.has-proof > .container > * { min-width: 0; }
.sale-proof { position: relative; width: 100%; margin: 0; overflow: hidden; border-radius: 0 32px 32px 32px; background: #0b1628; box-shadow: 0 28px 64px rgba(0,0,0,.45); }
.sale-proof img { display: block; width: 100%; height: auto; aspect-ratio: 722 / 391; object-fit: cover; }
.sale-proof-tag { position: absolute; top: 16px; left: 16px; z-index: 1; padding: 6px 12px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sale-proof figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 16px; background: linear-gradient(0deg, rgba(6,12,22,.9), transparent); color: rgba(255,255,255,.82); font-size: 13px; line-height: 1.5; }
.sale-proof figcaption strong { display: block; color: #fff; font-size: 15px; }
.sale-proof figcaption a { color: #58b7ff; font-weight: 800; }

/* Pase tipográfico y de aire de la página de venta (2026-09-06). Todo va con
   el scope .sale-page / .sale-hero: el recurso serif itálica es de esta página,
   y .projects-subhead lo comparte experiencias-inmersivas.html, que no cambia. */
.sale-page h2 em { font-family: "Instrument Serif", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; letter-spacing: -.025em; }
.sale-page .section-heading > p { max-width: 560px; }
.sale-page #lineas .projects-subhead { margin: 76px 0 -24px; }
.sale-page #lineas .projects-subhead:first-of-type { margin-top: 8px; }
.sale-page #lineas .projects-subhead h3 { font-family: "Instrument Serif", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; letter-spacing: -.02em; }

.catalog-grid { margin-top: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; }
.catalog-card { display: flex; flex-direction: column; padding: 28px 26px; border: 1px solid rgba(79,57,39,.11); border-radius: 24px; background: rgba(255,255,255,.9); box-shadow: 0 18px 44px rgba(70,45,25,.07); }
.catalog-card h4 { margin: 0 0 12px; font-size: 20px; line-height: 1.15; letter-spacing: -.03em; }
.catalog-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.catalog-specs { margin: 16px 0 0; padding: 14px 16px; list-style: none; border-radius: 16px; background: rgba(10,127,232,.05); border: 1px solid rgba(10,127,232,.12); }
.catalog-specs li { font-size: 12.5px; line-height: 1.7; color: var(--ink); }
.catalog-specs li + li { border-top: 1px solid rgba(10,127,232,.10); padding-top: 5px; margin-top: 5px; }
.catalog-apps { margin-top: 14px !important; font-size: 12.5px !important; }
.catalog-links { margin-top: auto !important; padding-top: 16px; }

/* Simulador de render con IA (venta-pantallas-led.html). Va antes de los
   @media a propósito, como el resto de las reglas base. */
/* Sin esta regla, el atributo hidden no apaga nada dentro del simulador: una
   clase del autor con display:grid le gana a la regla [hidden] del navegador,
   y el recuadro de "elige la foto" y los botones del resultado se quedarían
   siempre visibles. */
.sim-ia [hidden] { display: none !important; }
.sim-ia-stage-wrap { position: relative; }
.sim-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sim-ia { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 4vw, 44px); align-items: start; }
.sim-drop { display: grid; gap: 8px; place-content: center; justify-items: center; text-align: center; min-height: 320px; padding: 32px; border: 2px dashed #c9c8c5; border-radius: 0 24px 24px 24px; background: rgba(10,127,232,.03); cursor: pointer; transition: border-color .2s, background .2s; }
.sim-drop:hover, .sim-drop.is-over { border-color: var(--blue); background: rgba(10,127,232,.07); }
.sim-drop b { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.sim-drop small { max-width: 320px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.sim-ia-stage { position: relative; border-radius: 0 24px 24px 24px; overflow: hidden; background: var(--ink); }
.sim-ia-stage canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }
.sim-ia-out { position: absolute; inset: 0; margin: 0; transition: opacity .25s ease; }
.sim-ia-out img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Comparar antes/después: el render se desvanece y deja ver el canvas con la
   foto original que sigue debajo. Por eso el canvas nunca se oculta. */
.sim-ia.is-comparando .sim-ia-out { opacity: 0; pointer-events: none; }
.sim-ia-spin { position: absolute; inset: 0; display: none; place-items: center; background: rgba(16,37,64,.72); }
.sim-ia.is-loading .sim-ia-spin { display: grid; }
.sim-ia-spin span { width: 46px; height: 46px; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; animation: sim-gira 1s linear infinite; }
@keyframes sim-gira { to { transform: rotate(360deg); } }
.sim-cambiar { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--blue); border-bottom: 1px solid currentColor; cursor: pointer; }
.sim-ia-controls { display: grid; gap: 20px; }
.sim-ia-pasos { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.sim-ia-go { width: 100%; justify-content: center; transition: opacity .2s ease; }
.sim-ia-go[disabled] { opacity: .45; pointer-events: none; }
.sim-ia-actions { display: grid; gap: 10px; }
.sim-ia-actions .button { width: 100%; justify-content: center; min-width: 0; }
.sim-ia-legal { padding-top: 4px; border-top: 1px solid var(--line); }
.sim-ia-legal .text-link { display: inline; gap: 0; padding: 0; border-bottom-width: 1px; font-size: inherit; font-weight: 600; text-transform: none; letter-spacing: 0; }

/* Catálogo plegable (#lineas de venta-pantallas-led.html). Las 16 series medían
   8,122 px en móvil: el 23 % de toda la página, diez pantallas de celular. No se
   quitó ni una serie; se agruparon en cinco <details>. El primero nace abierto a
   propósito — deja contenido a la vista para quien llega y para Google, que da
   menos peso a lo que nace plegado. Se usa <details> nativo y no JavaScript para
   que funcione aunque el JS falle, y porque el buscador del navegador (cmd+F)
   sabe abrirlos. Va antes de los @media, como el resto de las reglas base. */
.catalog-group { border-top: 1px solid var(--line); }
.catalog-group:first-of-type { border-top: 0; }
.catalog-group > summary { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; padding: 26px 0 22px; cursor: pointer; list-style: none; }
.catalog-group > summary::-webkit-details-marker { display: none; }
.catalog-group > summary:hover h3 { color: var(--blue); }
.catalog-group > summary h3 { margin: 0; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.05; letter-spacing: -.02em; text-transform: none; font-family: "Instrument Serif", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; transition: color .2s; }
.catalog-count { margin-left: auto; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.catalog-group > summary::after { content: "+"; width: 1ch; font-size: 26px; line-height: .8; color: var(--blue); }
.catalog-group[open] > summary::after { content: "\2212"; }
.catalog-group .catalog-grid { margin-top: 4px; margin-bottom: 34px; }
.swipe-hint { display: none; margin: 14px 0 0; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }

/* Indice de secciones como barra pegajosa (solo venta-pantallas-led.html).
   Antes vivia dentro del hero: en cuanto el visitante bajaba, desaparecia, y
   con 33 pantallas de pagina eso deja sin salida a quien busca una seccion.
   Ahora acompaña el scroll bajo el encabezado fijo de 82 px. Los enlaces son
   los mismos trece: no se duplico ninguno, se movio el nav completo. Los
   colores se rehacen porque en el hero iban en blanco sobre la foto y aqui van
   sobre fondo claro. */
/* body lleva overflow-x:hidden desde siempre, y eso convierte al body en el
   contenedor de scroll: con el, position:sticky no se pega y la barra se va con
   el contenido (medido). Se devuelve a visible SOLO en esta pagina; html
   conserva su overflow-x:hidden, asi que la proteccion contra desbordamiento
   horizontal sigue puesta para las diez. Verificado que esta pagina no desborda
   a 375, 1024, 1100 ni 1440 px. */
body.sale-page { overflow-x: visible; }
.page-index-bar { position: sticky; top: 82px; z-index: 30; background: rgba(255,255,255,.97); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
/* Los 13 chips miden ~1,560 px y el .container tope 1,180: la barra NUNCA
   cupo, en ninguna pantalla, y se veia cortada a media palabra. Aqui el
   carril usa el ancho completo de la ventana (con la sangria del container,
   para que el primer chip siga alineado con el texto de la pagina) y el
   degradado de la derecha avisa que se desplaza. Sin ese aviso, un chip
   partido no se lee como "hay mas", se lee como error. */
.page-index-bar .container { width: 100%; }
/* Ojo: NO reponer aqui `position: relative`. Estuvo del 2026-09-07 al 09-09 y
   anulaba el `position: sticky` de la regla de arriba, asi que la barra dejo de
   pegarse y los chips del indice desaparecian al bajar — justo los de
   Calculadora y Simulador, que son el atajo a las dos herramientas. Se habia
   puesto para que el ::after del degradado tuviera contenedor posicionado, pero
   `sticky` YA lo es: no hacia falta. */
.page-index-bar::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 64px; pointer-events: none; background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.97) 70%); transition: opacity .2s; }
.page-index-bar[data-end]::after { opacity: 0; }
.page-index-bar .page-index { margin: 0; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; padding: 11px 24px; scrollbar-width: none; }
.page-index-bar .page-index::-webkit-scrollbar { display: none; }
.page-index-bar .page-index span, .page-index-bar .page-index a { flex: none; }
.page-index-bar .page-index span { color: var(--muted); }
.page-index-bar .page-index a { border-color: var(--line); color: var(--ink); }
.page-index-bar .page-index a:hover { background: rgba(16,37,64,.05); border-color: var(--ink); }
/* La barra tapa el destino de un salto a #ancla: se compensa sumando su alto
   al scroll-padding-top global (104 px en escritorio, 90 en movil), sin tocar
   ese valor, que lo comparten las otras nueve paginas. */
.sale-page section[id] { scroll-margin-top: 60px; }

/* Prueba social temprana (venta-pantallas-led.html). Los casos viven a media
   pagina: quien aterriza del anuncio no sabia en diez segundos que ya se
   instalo en nueve estados. Las dos cifras y las nueve plazas NO son un claim
   de marketing: salen de contar los casos publicados mas abajo en esta misma
   pagina, asi que el visitante puede verificarlas bajando. La cuenta de
   instalaciones se quito el 2026-09-07 a peticion de Abel; el 9 de estados
   sigue, y hay que actualizarlo si se agrega o quita un caso. */
/* Acceso a las dos herramientas, alto en la pagina (2026-09-09). Medido en
   movil: la calculadora cae en la pantalla 12 de 29 y el simulador en la 13.7
   —ambas a media pagina— y en 28 dias las usaron 2 personas. El hero ya
   enlazaba al simulador, pero decia "Ver como se veria", que se lee como una
   galeria de ejemplos y no como "sube la foto de tu espacio".
   Las secciones NO se movieron: siguen en su lugar, con sus anclas y sus chips
   del indice intactos, asi que esto es un atajo, no una reorganizacion.
   Los valores son los de .imx-card (radio 24, sombra nivel 1, pildora azul):
   al agregar una tarjeta nueva, reusarlos en vez de inventar un intermedio. */
/* Bloque de la pantalla transparente flexible (2026-09-09). Va DENTRO de
   #tipos y no como seccion propia, para no sumar un chip mas al indice: su
   carril ya mide 1,708 px y Abel reporto que se cortaba.
   La tabla de especificaciones va en un <details> plegado en los dos anchos:
   son 20 filas que casi nadie necesita, y desplegada dominaria la seccion.
   Reusa radios y sombras de la escala del sitio (16/24, sombra nivel 1). */
.film-block { margin-top: 40px; padding-top: 38px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 30px 34px; align-items: start; }
.film-media { display: grid; gap: 16px; }
.film-media figure { margin: 0; }
.film-media img { display: block; width: 100%; border-radius: 24px; box-shadow: 0 18px 44px rgba(70,45,25,.07); }
.film-media figcaption { margin-top: 9px; color: var(--muted); font-size: 12px; line-height: 1.5; }
/* min-width:0 es imprescindible en los dos: por omision un item de grid vale
   `min-width:auto`, asi que se estira hasta el contenido mas ancho — la tabla
   con `white-space:nowrap` — y crece por encima de la pantalla en vez de dejar
   que .spec-scroll haga scroll. Medido en 375 px: el contenedor se iba a 703.
   Y no se veia como desborde de pagina porque `html` lleva overflow-x:hidden,
   que lo recorta en silencio. */
.film-block > * { min-width: 0; }
.spec-scroll { max-width: 100%; }
.film-copy h3 { margin: 0 0 12px; font-size: 26px; line-height: 1.08; letter-spacing: -.03em; }
.film-copy > p { margin: 0 0 22px; color: var(--muted); font-size: 15px; line-height: 1.65; }
.film-uses { display: grid; gap: 12px; margin-bottom: 22px; }
.film-use { padding: 18px 20px; border: 1px solid rgba(79,57,39,.11); border-radius: 16px; background: rgba(255,255,255,.9); }
.film-use span { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(10,127,232,.09); border: 1px solid rgba(10,127,232,.16); color: var(--blue-dark); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.film-use h4 { margin: 10px 0 6px; font-size: 15px; letter-spacing: -.01em; }
.film-use p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
/* El aviso de que es producto de interior no va solo en la tabla: quien no la
   abra tiene que enterarse igual, porque decide si el panel sirve o no. */
.film-warn { margin: 0 0 20px; padding: 15px 18px; border-left: 3px solid var(--warm-deep); border-radius: 0 16px 16px 0; background: rgba(141,78,50,.07); color: var(--ink); font-size: 13px; line-height: 1.6; }
.spec-table { border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.9); }
.spec-table > summary { padding: 14px 18px; color: var(--ink); font-size: 13px; font-weight: 800; cursor: pointer; list-style: none; }
.spec-table > summary::-webkit-details-marker { display: none; }
.spec-table > summary::after { content: " ↓"; color: var(--blue); }
.spec-table[open] > summary::after { content: " ↑"; }
.spec-scroll { overflow-x: auto; padding: 0 18px; }
.spec-scroll table { width: 100%; border-collapse: collapse; font-size: 13px; }
.spec-scroll th, .spec-scroll td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.spec-scroll thead th { color: var(--blue-dark); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.spec-scroll tbody th { color: var(--muted); font-weight: 600; }
.spec-note { margin: 0; padding: 14px 18px; color: var(--muted); font-size: 12px; line-height: 1.6; }

/* Secciones que se pliegan SOLO en movil (2026-09-09). En celular la pagina
   media 31.3 pantallas; llave, por-que y monitoreo suman 5,827 px de eso y son
   secciones de apoyo, no el argumento central. Su encabezado (titulo y
   entradilla) se queda SIEMPRE visible: lo que se pliega es la rejilla de
   tarjetas de abajo.

   Los dos estados se declaran a mano en vez de confiar en el comportamiento
   nativo de <details>, porque hacen falta los dos: en escritorio el contenido
   tiene que verse aunque el elemento no tenga `open` (`display: block` de autor
   le gana al ocultamiento del navegador), y en movil tiene que esconderse
   mientras no lo tenga. Ojo con esto ultimo: es el mismo choque de
   especificidad que dejo el paso 2 del formulario visible unas horas hoy.

   Sin JavaScript funciona igual: el <details> es nativo, asi que tocar el
   summary lo abre. En escritorio el summary ni se muestra. */
.fold-m > summary { display: none; }
.fold-m > .fold-body { display: block; }

.tools-teaser { padding: 44px 0 4px; }
.tools-teaser-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tool-card { display: block; padding: 30px 26px; border: 1px solid rgba(79,57,39,.11); border-radius: 24px; background: rgba(255,255,255,.9); box-shadow: 0 18px 44px rgba(70,45,25,.07); color: inherit; transition: box-shadow .2s, transform .2s; }
.tool-card:hover { box-shadow: 0 28px 64px rgba(72,45,25,.15); transform: translateY(-2px); }
.tool-card-tag { display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(10,127,232,.09); color: var(--blue-dark); border: 1px solid rgba(10,127,232,.16); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.tool-card h3 { margin: 20px 0 12px; font-size: 22px; line-height: 1.1; letter-spacing: -.03em; }
.tool-card p { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.tool-card-go { color: var(--blue); font-size: 13px; font-weight: 800; }

.proof-strip { border-bottom: 1px solid var(--line); background: var(--warm-deep); }
.proof-strip .container { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; padding-top: 18px; padding-bottom: 18px; }
.proof-count { margin: 0; font-size: 13px; color: rgba(255,255,255,.82); }
.proof-count strong { color: #fff; font-weight: 800; }
.proof-places { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
.proof-places li { font-size: 12px; font-weight: 700; letter-spacing: .02em; color: #fff; }
.proof-places li + li::before { content: "·"; margin-right: 14px; color: rgba(255,255,255,.45); }
.proof-link { margin-left: auto; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #fff; border-bottom: 1px solid rgba(255,255,255,.55); }

/* Resumen del catalogo en la pagina de venta. Las 16 series se mudaron a
   catalogo-pantallas-led.html el 2026-09-06: aqui queda el alcance (cinco
   grupos y cuantas series trae cada uno) mas el boton. Asi el visitante sabe
   que hay del otro lado antes de hacer clic, y la seccion pasa de 2,913 px a
   unos 600. */
.catalog-summary { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 0; }
.catalog-summary li { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: 6px 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.catalog-summary li:first-child { border-top: 0; }
.catalog-summary b { font-family: "Instrument Serif", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -.02em; }
.catalog-summary span { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--blue); white-space: nowrap; }
.catalog-summary em { grid-column: 1 / -1; font-style: normal; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.catalog-cta { margin-top: 28px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; }
.catalog-cta .calc-nota { max-width: 380px; }
/* Vuelta a la pagina de venta desde el catalogo: arriba en el hero y otra vez
   al final, para no obligar a subir toda la pagina. */
.back-strip { border-top: 1px solid var(--line); background: var(--warm); }
.back-strip .container { padding-top: 26px; padding-bottom: 26px; }

/* Inspeccion remota (inspeccion-remota.html, 2026-09-15). Prefijo insp- en
   todo lo nuevo: se busco con grep en TODOS los .html y .js de static-package/
   antes de crearlas (la home ya se rompio una vez por reusar .hero-proof).
   Reusa .quote-form, .form-step, .field, .form-submit y .imx-card; aqui solo
   va lo que no existia. Va ANTES de los @media, como el resto de las reglas base.
   Ojo con [hidden]: cada elemento que declara display necesita su propia regla
   [hidden] (misma leccion que .form-step), o se sigue viendo aunque el JS lo oculte. */
.insp-form-col { min-width: 0; }
.quote-form.insp-form[hidden] { display: none; }
.insp-scope { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.insp-scope > div { padding: 30px 26px; border: 1px solid rgba(79,57,39,.11); border-radius: 24px; background: rgba(255,255,255,.9); box-shadow: 0 18px 44px rgba(70,45,25,.07); }
.insp-scope h3 { margin: 0 0 14px; font-size: 22px; line-height: 1.1; letter-spacing: -.03em; }
.insp-scope ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.insp-tips { max-width: 560px; margin: 0 0 28px; padding-left: 18px; display: grid; gap: 4px; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.65; }
.quote-intro .insp-entry { color: #73bfff; font-weight: 700; border-bottom: 1px solid currentColor; }
.insp-hint { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.insp-lead { grid-column: 1 / -1; margin: 0; color: var(--ink); font-size: 13px; line-height: 1.65; }
.insp-legend { grid-column: 1 / -1; margin: 0; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.insp-options { display: flex; flex-wrap: wrap; gap: 10px 18px; padding-top: 4px; }
.field .insp-option { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; cursor: pointer; }
.field .insp-option input, .field.insp-check input { width: 18px; height: 18px; flex: none; margin: 0; padding: 0; border: 0; accent-color: var(--blue); }
.field .insp-option input:focus-visible, .field.insp-check input:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; box-shadow: none; }
.field.insp-check { grid-template-columns: auto 1fr; align-items: start; gap: 12px; }
.field.insp-check input { margin-top: 2px; }
.field.insp-check label { font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; line-height: 1.55; }
.field.insp-check label a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.field.insp-check .field-error { grid-column: 1 / -1; }
.insp-exterior { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 25px 18px; }
.insp-exterior[hidden] { display: none; }
.insp-cat { grid-column: 1 / -1; display: grid; gap: 10px; padding-top: 20px; border-top: 1px solid var(--line); }
.insp-cat-title { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 15px; font-weight: 800; line-height: 1.3; }
.insp-cat-tag { padding: 4px 10px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.insp-cat-tag.is-soft { background: rgba(10,127,232,.09); color: var(--blue-dark); border: 1px solid rgba(10,127,232,.16); }
.insp-pick { position: relative; justify-self: start; display: inline-flex; align-items: center; padding: 12px 18px; border: 2px dashed #c9c8c5; border-radius: 16px; background: rgba(10,127,232,.03); color: var(--blue-dark); font-size: 13px; font-weight: 800; cursor: pointer; transition: border-color .2s, background .2s; }
.insp-pick:hover { border-color: var(--blue); background: rgba(10,127,232,.07); }
.insp-pick:focus-within { outline: 3px solid var(--blue); outline-offset: 3px; }
.insp-pick input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.insp-count { color: var(--muted); font-size: 12px; }
.insp-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.insp-thumbs:empty { display: none; }
.insp-thumb { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 16px; background: #e8ded2; }
.insp-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.insp-thumb button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: rgba(16,37,64,.85); color: #fff; font: inherit; font-size: 15px; line-height: 26px; cursor: pointer; }
.insp-thumb button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.insp-thumb.is-subida::after { content: "\2713"; position: absolute; right: 4px; bottom: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 12px; font-weight: 800; line-height: 22px; text-align: center; }
.insp-cat.has-error .insp-pick { border-color: #c0392b; }
.insp-progress { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 999px; background: var(--line); }
.insp-progress span { display: block; width: 0; height: 100%; background: var(--blue); transition: width .3s; }
.insp-actions { grid-column: 1 / -1; display: flex; gap: 12px; margin-top: 10px; }
.insp-actions .form-submit { flex: 1; margin-top: 0; }
.insp-back { padding: 18px 20px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; }
.insp-back:hover { background: rgba(16,37,64,.05); }
.insp-back:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.insp-done { padding: 42px; background: #fff; color: var(--ink); box-shadow: 0 34px 90px rgba(0,0,0,.38); }
.insp-done h3 { margin: 0 0 14px; font-size: 26px; line-height: 1.08; letter-spacing: -.03em; }
.insp-done > p:not(.eyebrow) { margin: 0 0 26px; color: var(--muted); font-size: 15px; line-height: 1.65; }

@media (max-width: 980px) {
  .sale-hero.has-proof > .container { grid-template-columns: 1fr; gap: 40px; }
  .sale-proof { max-width: 640px; }
  .gallery-grid.retail-examples { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid.retail-examples .gallery-item, .gallery-grid.retail-examples .gallery-item:nth-child(n+4) { grid-column: auto; }
  .gallery-grid.retail-examples .gallery-item:last-child { grid-column: 1 / -1; }
  .sim-grid { grid-template-columns: repeat(2, 1fr); }
  .sim-ia { grid-template-columns: 1fr; }
  .calc-layout { grid-template-columns: 1fr; }
  .calc-result { position: static; }
  .menu-toggle { display: block; }
  .nav { position: absolute; top: 82px; left: 0; right: 0; padding: 26px 24px 34px; display: none; flex-direction: column; align-items: stretch; gap: 0; background: white; border-bottom: 1px solid var(--line); }
  .nav.open { display: flex; }
  .nav > a:not(.nav-cta) { padding: 14px 0; }
  .nav-cta { text-align: center; margin-top: 14px; }
  .nav > a::after { display: none; }
  .hero { height: auto; min-height: 850px; }
  .hero-shade { background: linear-gradient(90deg, rgba(7,7,9,.9), rgba(7,7,9,.4)), linear-gradient(0deg, rgba(0,0,0,.65), transparent 60%); }
  .trust-content, .split-heading { grid-template-columns: 1fr; flex-direction: column; align-items: flex-start; }
  .trust-content { padding: 28px 0; }
  .client-list { width: 100%; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
  .split-heading { display: grid; gap: 28px; }
  .split-heading > p { max-width: 580px; }
  .service-list { grid-template-columns: 1fr; }
  .service-card { min-height: 0; }
  .service-card:last-child, .service-card:last-child:nth-child(3n+1) { grid-column: auto; }
  .testimonial-grid { grid-template-columns: 1fr 1fr; }
  .imx-grid { grid-template-columns: 1fr; }
  .imx-card, .imx-card:nth-child(4), .imx-card:nth-child(5), .imx-grid.grid-3 .imx-card:nth-child(7):last-child, .imx-grid.grid-3 .imx-card:nth-child(7):nth-last-child(2), .imx-grid.grid-3 .imx-card:nth-child(8):last-child { grid-column: auto; }
  .projects-subhead { margin: 44px 0 -28px; }
  .led-feature { grid-template-columns: 1fr; }
  .led-visual { min-height: 520px; }
  .led-visual img, .led-visual::after { border-radius: 0 24px 24px 24px; clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%, 0 20%); }
  .project-card.project-1 .project-image { border-radius: 24px 0 24px 0; clip-path: polygon(0 0, 78% 0, 100% 20%, 100% 100%, 22% 100%, 0 80%); }
  .bridge-layout { grid-template-columns: 1fr; }
  /* La retícula pasa a 2 columnas: hay que recalcular qué celda lleva
     borde derecho y a partir de cuál empieza el borde superior. */
  .platform-list { grid-template-columns: repeat(2, 1fr); }
  .platform-list > div { padding-right: 26px; border-right: 1px solid var(--line); }
  .platform-list > div:nth-child(3n) { border-right: 1px solid var(--line); padding-right: 26px; }
  .platform-list > div:nth-child(2n) { border-right: 0; padding-right: 0; }
  .platform-list > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .platform-list > div.is-wide { grid-column: 1 / -1; border-right: 0; padding-right: 0; }
  .spec-list { grid-template-columns: repeat(2, 1fr); }
  .spec-list > div { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.13); padding: 30px 24px 26px 0; }
  .spec-list > div:last-child { border-bottom: 0; padding-right: 24px; }
  .pricing-grid, .pricing-terms, .pricing-extra ul { grid-template-columns: 1fr 1fr; }
  .process-layout, .sectors-layout, .dark-layout, .quote-layout { grid-template-columns: 1fr; gap: 70px; }
  .process-intro { position: static; }
  .dark-layout, .quote-layout { gap: 60px; }
}

@media (max-width: 680px) {
  /* Los casos medían 4,420 px apilados (12 % de la página). En una tira
     horizontal con scroll-snap ocupan una tarjeta de alto y se recorren con el
     pulgar, que es como se mira este contenido en un celular. Acotado a #casos:
     .imx-grid la comparten otras páginas que no cambian. */
  #casos .imx-grid, #tipos .imx-grid { grid-auto-flow: column; grid-auto-columns: 82%; grid-template-columns: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: 12px; }
  #casos .imx-grid > *, #tipos .imx-grid > * { scroll-snap-align: start; }
  #casos .swipe-hint, #tipos .swipe-hint { display: block; }
  .ai-table thead { display: none; }
  .ai-table, .ai-table tbody, .ai-table tr, .ai-table th, .ai-table td { display: block; width: auto; }
  .ai-table tr { padding: 18px 20px; border-bottom: 1px solid var(--line); }
  .ai-table tbody tr:last-child { border-bottom: 0; }
  .ai-table tbody th, .ai-table td { padding: 0; border: 0; }
  .ai-table td { margin-top: 10px; }
  .ai-table td::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
  .proof-strip .container { gap: 10px; }
  .catalog-summary li { grid-template-columns: 1fr auto; }
  .proof-link { margin-left: 0; }
  .container { width: min(100% - 32px, 1180px); }
  .page-index-bar .page-index { padding-inline: 16px; }
  html { scroll-padding-top: 90px; }
  .site-header { height: 72px; padding: 0 16px; }
  .brand img { width: 145px; }
  .nav { top: 72px; }
  .hero { padding-top: 72px; min-height: 800px; }
  .hero h1 { max-width: calc(100vw - 32px); font-size: clamp(36px, 9.5vw, 44px); line-height: .98; overflow-wrap: anywhere; }
  .hero-copy { font-size: 15px; margin-top: 25px; }
  .hero-actions { flex-direction: column; width: 100%; }
  .button { width: 100%; }
  .hero-proof { width: 100%; display: grid; grid-template-columns: 1fr 1fr; margin-top: 44px; }
  .hero-proof div { padding: 16px 18px 0 0; margin: 0 18px 15px 0; }
  .hero-proof strong { font-size: 20px; }
  .hero-proof span { font-size: 10px; }
  .scroll-cue { display: none; }
  .client-list { display: grid; grid-template-columns: 1fr 1fr; font-size: 12px; }
  .section { padding: 90px 0; }
  .section-heading h2, .process-intro h2, .led-copy h2, .dark-layout h2, .quote-intro h2 { max-width: calc(100vw - 32px); font-size: clamp(32px, 9vw, 40px); overflow-wrap: anywhere; }
  .service-list { margin-top: 48px; }
  .service-card { padding: 28px; }
  .imx-hero { padding: 130px 0 50px; }
  .imx-hero.has-media { padding: 150px 0 70px; }
  .imx-hero-copy { font-size: 15px; }
  .led-visual { min-height: 400px; }
  .led-badge { width: 112px; bottom: 25px; }
  .led-badge strong { font-size: 26px; }
  .led-copy { padding: 75px 24px; }
  .feature-grid { grid-template-columns: 1fr; }
  .process-list li { grid-template-columns: 45px 1fr; }
  .projects .section-heading, .services .section-heading { padding: 28px 22px; border-radius: 24px; }
  .testimonial-grid { grid-template-columns: 1fr; }
  /* Opiniones subió arriba en la página de venta (2026-09-13): apiladas medían
     ~1,950 px en celular; en carrusel ocupan una tarjeta, igual que #casos. */
  .sale-page #testimonios .testimonial-grid { grid-auto-flow: column; grid-auto-columns: 86%; grid-template-columns: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: 12px; align-items: stretch; }
  .sale-page #testimonios .testimonial-grid > * { scroll-snap-align: start; }
  .sale-page #testimonios .swipe-hint { display: block; }
  /* En celular la foto real vuelve a ir de fondo: a 375 px sus 722 px nativos
     sobran, y así la primera pantalla muestra obra entregada y no solo texto. */
  .imx-hero.sale-hero.has-proof { padding: 150px 0 70px; }
  .sale-hero.has-proof > .container { position: static; display: block; }
  .sale-hero.has-proof .hero-main { position: relative; z-index: 2; }
  .sale-proof { position: absolute; inset: 0; max-width: none; border-radius: 0; box-shadow: none; }
  .sale-proof img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  .sale-proof::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,12,22,.5) 0%, rgba(6,12,22,.78) 42%, rgba(6,12,22,.92) 100%); }
  .sale-proof figcaption { display: none; }
  .sale-proof-tag { top: auto; bottom: 20px; z-index: 3; }
  .gallery-grid.portrait-pair { grid-template-columns: 1fr; max-width: 420px; }
  .gallery-grid.retail-examples { grid-template-columns: 1fr; }
  .platform-list { grid-template-columns: 1fr; }
  .platform-list > div,
  .platform-list > div:nth-child(3n),
  .platform-list > div:nth-child(2n) { border-right: 0; padding: 26px 0 24px; }
  .platform-list > div:nth-child(n+2) { border-top: 1px solid var(--line); }
  .platform-list > div.is-wide dd { grid-template-columns: 1fr; gap: 10px; }
  .spec-list { grid-template-columns: 1fr; }
  .spec-list > div:last-child { padding-right: 0; }
  .pricing-grid, .pricing-terms, .pricing-extra ul { grid-template-columns: 1fr; }
  .pricing-compare { padding: 26px 22px; }
  .pricing-compare ul { grid-template-columns: 1fr; }
  .price-card { padding: 28px 24px; }
  .pricing-extra { padding: 24px 22px; }
  .pricing-cta { flex-direction: column; }
  .project-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 42px; }
  .project-card, .project-card:nth-child(1), .project-card:nth-child(2), .project-card:nth-child(3), .project-card:nth-child(4) { grid-column: auto; }
  .project-card:nth-child(2) .project-image, .project-card:nth-child(3) .project-image { aspect-ratio: 1.35; }
  .dark-section, .quote-section { padding: 90px 0; }
  .reasons div { grid-template-columns: 1fr; gap: 8px; }
  .quote-form { padding: 28px 22px; grid-template-columns: 1fr; }
  .field.full, .form-submit, .form-note { grid-column: auto; }
  .form-step { grid-template-columns: 1fr; }
  .tools-teaser-grid { grid-template-columns: 1fr; }
  .insp-scope, .insp-exterior { grid-template-columns: 1fr; }
  .insp-done { padding: 28px 22px; }
  .insp-back { padding: 18px 16px; }
  .fold-m > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; padding: 15px 20px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.9); color: var(--ink); font-size: 13px; font-weight: 800; cursor: pointer; list-style: none; }
  .fold-m > summary::-webkit-details-marker { display: none; }
  .fold-m > summary::after { content: "↓"; color: var(--blue); font-weight: 800; }
  .fold-m[open] > summary { margin-bottom: 4px; }
  .fold-m[open] > summary::after { content: "↑"; }
  .fold-m:not([open]) > .fold-body { display: none; }
  .film-block { grid-template-columns: 1fr; }
  .film-media { grid-template-columns: 1fr 1fr; gap: 12px; }
  .quote-intro .response-promise { width: 100%; margin-top: 0; font-size: 10px; line-height: 1.45; white-space: normal; overflow-wrap: anywhere; }
  .direct-contact { gap: 12px 18px; font-size: 12px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 45px 25px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { align-items: flex-start; gap: 12px; flex-direction: column; }
  .floating-wa { right: 16px; bottom: 16px; }
  .wa-label { display: none; }
  .wa-icon { width: 55px; height: 55px; }
}

.legal-page { padding: 165px 0 120px; }
.legal-content { max-width: 760px; }
.legal-content h1 { margin: 14px 0 6px; font-size: clamp(34px, 4.4vw, 50px); line-height: 1; letter-spacing: -.03em; font-weight: 800; text-transform: uppercase; }
.legal-updated { color: var(--muted); font-size: 13px; margin: 0 0 46px; }
.legal-content h2 { margin: 42px 0 12px; font-size: 20px; letter-spacing: -.01em; }
.legal-content p, .legal-content li { color: var(--muted); font-size: 15px; line-height: 1.75; }
.legal-content ul { margin: 0 0 16px; padding-left: 20px; }
.legal-content li { margin-bottom: 6px; }
.legal-content a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 680px) { .legal-page { padding: 130px 0 80px; } }

/* Estado inicial de los bloques que reveal.js va a mostrar al hacer scroll.
   Solo se aplica si ese script decidió animar: nunca queda contenido
   oculto sin alguien que lo muestre. */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } .reveal { opacity: 1; transform: none; } }