:root { --blue: #0a7fe8; --blue-dark: #07519a; --ink: #102540; --paper: #f7f3ed; --white: #fff; --muted: #6b635b; --warm: #a85f3d; --line: rgba(16,37,64,.14); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: "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: 11px; 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: 19px; 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: 27px; line-height: 1; }
.hero-proof span { margin-top: 8px; color: rgba(255,255,255,.56); font-size: 11px; 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: 18px; 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: 11px; 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: 16px; 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: 28px; background: rgba(255,255,255,.76); box-shadow: 0 28px 80px rgba(67,40,20,.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: 22px; background: rgba(255,255,255,.9); box-shadow: 0 15px 38px rgba(70,45,25,.06); transition: background .25s, transform .25s, box-shadow .25s; overflow: hidden; }
.service-card:last-child { grid-column: 2 / 3; }
.service-card:hover { background: white; transform: translateY(-7px); box-shadow: 0 26px 58px rgba(70,45,25,.13); }
.service-image { height: 220px; margin: 0 0 22px; overflow: hidden; border-radius: 14px; 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: 11px; }
.service-top i { font-style: normal; font-size: 20px; }
.service-card h3 { margin: 23px 0 14px; font-size: 24px; 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 34px 34px 34px; 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 34px 34px 34px; 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: 35px; 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: 16px; 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: 11px; font-weight: 800; }
.process-list h3 { margin: 0 0 10px; font-size: 25px; text-transform: none; letter-spacing: -.03em; }
.process-list p { margin: 0; color: var(--muted); font-size: 14px; 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 22px 54px rgba(72,45,25,.09); 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 30px 70px 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: 30px 0 30px 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: 24px; 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: 14px; 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: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.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; }
.field label { 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); }
.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; }

.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); }
.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: 22px; background: rgba(255,255,255,.9); box-shadow: 0 15px 38px rgba(70,45,25,.06); }
.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: 16px; 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: 18px; 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); }
/* 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 26px 26px 26px; 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: 27px; line-height: 1; }
.bridge-badge span { display: block; margin-top: 6px; font-size: 9px; text-transform: uppercase; letter-spacing: .13em; }
.bridge-copy h2 { margin: 0; font-size: clamp(34px, 3.8vw, 52px); 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: 16px; 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(25px, 2.5vw, 36px); 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; }
.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: 22px; 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: 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: 20px; background: rgba(255,255,255,.9); box-shadow: 0 15px 38px rgba(70,45,25,.06); }
.faq-item h3 { margin: 0 0 12px; font-size: 19px; 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 26px 64px rgba(72,45,25,.16); }
.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: 11px; 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: 22px; 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: 14px; 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: 22px; 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: 14px; 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 20px 20px 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: 14px; 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: 14px; 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; }
.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; }

@media (max-width: 980px) {
  .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 { 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) { 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: 22px 0 22px 0; clip-path: polygon(0 0, 78% 0, 100% 20%, 100% 100%, 22% 100%, 0 80%); }
  .bridge-layout { grid-template-columns: 1fr; }
  .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) {
  .container { width: min(100% - 32px, 1180px); }
  .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: 16px; 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: 21px; }
  .hero-proof span { font-size: 9px; }
  .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: 27px; }
  .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: 20px; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .gallery-grid.portrait-pair { grid-template-columns: 1fr; max-width: 420px; }
  .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; }
  .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, 5vw, 48px); 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; } }