/* ══════════════════════════════════════════════════════════════ PRODUCCIONES HANGAR MEDIOS — Sistema visual v3 Monocromo premium + acento por producto · line-art glass Titulares Inter minúsculas (tipo Apple) · mono JetBrains Optimizado Safari M1: animaciones solo transform/opacity ══════════════════════════════════════════════════════════════ */ /* ── Reset ───────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} ul{list-style:none} /* ── Tokens globales ─────────────────────────────────── */ :root{ --bg:#05070b; --bg-soft:#0a0d13; --fg:#f4f5f7; --fg-dim:#8b96a6; --fg-faint:#5a6473; --hair:rgba(255,255,255,0.10); --hair-strong:rgba(255,255,255,0.18); --glass:rgba(255,255,255,0.05); --glass-border:rgba(255,255,255,0.14); --accent:#6db3ff; /* default = conectividad */ --accent-soft:rgba(109,179,255,0.10); --accent-line:rgba(109,179,255,0.40); --radius:14px; --radius-lg:22px; --maxw:1180px; --pad:clamp(22px,5vw,64px); --font:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; } /* Acento por página (clase en ) */ .acc-net {--accent:#6db3ff;--accent-soft:rgba(109,179,255,.10);--accent-line:rgba(109,179,255,.40);--bg:#04060a} .acc-pf {--accent:#d4c47a;--accent-soft:rgba(212,196,122,.10);--accent-line:rgba(212,196,122,.40);--bg:#070509} .acc-video {--accent:#ff7a66;--accent-soft:rgba(255,122,102,.10);--accent-line:rgba(255,122,102,.40);--bg:#070605} .acc-dron {--accent:#7fb8cc;--accent-soft:rgba(127,184,204,.10);--accent-line:rgba(127,184,204,.40);--bg:#050709} /* ── Base ────────────────────────────────────────────── */ body{ font-family:var(--font); background:var(--bg); color:var(--fg); font-weight:300; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; } .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)} /* ── Tipografía ──────────────────────────────────────── */ h1,h2,h3{font-weight:300;letter-spacing:-.035em;line-height:1.0;text-transform:lowercase} .display{font-size:clamp(2.6rem,8vw,5.6rem);font-weight:200;letter-spacing:-.045em;line-height:.98} .display b,.h-lead b{font-weight:400} .h-lead{font-size:clamp(2.2rem,6vw,4.2rem);font-weight:200;letter-spacing:-.045em;line-height:1.0} .h-sec{font-size:clamp(1.6rem,3.6vw,2.6rem);font-weight:300} .lead-p{font-size:clamp(1rem,1.4vw,1.18rem);color:var(--fg-dim);font-weight:300;max-width:42ch} .eyebrow{ display:inline-flex;align-items:center;gap:14px; font-family:var(--mono);font-size:.72rem;letter-spacing:.28em; text-transform:uppercase;color:var(--accent);font-weight:400; } .eyebrow::before{content:"";width:38px;height:1px;background:var(--accent-line)} .eyebrow--center{justify-content:center} .ghost{ position:absolute;font-weight:500;line-height:1; letter-spacing:-.04em;color:var(--accent-soft); z-index:0;pointer-events:none;user-select:none; font-size:clamp(7rem,20vw,16rem); } /* ── Componentes glass ───────────────────────────────── */ .glass{ background:var(--glass); border:.5px solid var(--glass-border); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4); } .btn{ display:inline-flex;align-items:center;gap:10px; padding:14px 26px;border-radius:999px;font-size:.95rem; font-weight:400;color:var(--fg); background:var(--glass);border:.5px solid var(--glass-border); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .4s,background .4s; will-change:transform; } .btn:hover{transform:translateY(-3px);border-color:var(--accent-line);background:rgba(255,255,255,.08)} .btn svg{width:20px;height:20px} .btn--accent{background:var(--accent);color:#06080c;border-color:transparent;font-weight:500} .btn--accent:hover{background:var(--accent);filter:brightness(1.08)} .btn--ghost{background:transparent} .chip{ display:inline-flex;align-items:center;gap:9px; padding:9px 18px;border-radius:999px;font-size:.82rem;color:var(--fg); background:var(--accent-soft);border:.5px solid var(--accent-line); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); } .chip .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 9px var(--accent)} /* ── Navegación ──────────────────────────────────────── */ .nav{ position:fixed;top:18px;left:0;right:0;z-index:60; display:flex;justify-content:center;padding-inline:16px; opacity:0;transform:translateY(-12px);transition:opacity .8s,transform .8s; } .nav.is-visible{opacity:1;transform:none} .nav__pill{ display:flex;align-items:center;gap:clamp(14px,2.4vw,34px); width:100%;max-width:1080px; padding:9px 9px 9px 22px;border-radius:999px; background:rgba(12,15,20,.55);border:.5px solid var(--glass-border); -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5); } .nav__logo img{height:30px;width:auto} .nav__links{display:flex;gap:clamp(12px,2vw,26px);margin-left:auto;font-size:.9rem} .nav__links a{color:var(--fg-dim);transition:color .3s;position:relative;padding:4px 0} .nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--fg)} .nav__links a[aria-current="page"]::after{ content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--accent) } .nav__cta{ padding:10px 20px;border-radius:999px;font-size:.88rem;font-weight:400; background:var(--glass);border:.5px solid var(--glass-border);transition:background .3s,transform .3s; } .nav__cta:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)} .nav__burger{display:none;width:42px;height:42px;border-radius:50%;border:.5px solid var(--glass-border); background:var(--glass);position:relative;margin-left:auto} .nav__burger span{position:absolute;left:12px;right:12px;height:1.4px;background:var(--fg);transition:.35s} .nav__burger span:nth-child(1){top:17px}.nav__burger span:nth-child(2){bottom:17px} .nav__burger.is-open span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)} .nav__burger.is-open span:nth-child(2){bottom:auto;top:50%;transform:translateY(-50%) rotate(-45deg)} .mobile-menu{ position:fixed;inset:0;z-index:55;background:rgba(5,7,11,.92); -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px); display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px; opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s; } .mobile-menu.is-open{opacity:1;visibility:visible} .mobile-menu a{font-size:2rem;font-weight:200;letter-spacing:-.03em;text-transform:lowercase;padding:10px} .mobile-menu .mobile-cta{margin-top:20px;font-size:1rem;padding:14px 30px;border-radius:999px; border:.5px solid var(--glass-border);background:var(--glass)} /* ── HERO CINEMATOGRÁFICO (video-first) ──────────────── */ .cine-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden; background:#000 center/cover no-repeat;background-image:url('../assets/img/hero.jpg')} .cine-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0; animation:heroKen 22s ease-in-out infinite alternate;transform-origin:60% 45%} @keyframes heroKen{from{transform:scale(1.02)}to{transform:scale(1.11)}} .cine-hero__scrim{position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(5,5,7,.55) 0%,rgba(5,5,7,.08) 32%,rgba(5,5,7,.9) 100%), radial-gradient(85% 65% at 72% 38%,transparent 40%,rgba(5,5,7,.55) 100%)} .cine-hero__inner{position:relative;z-index:2;width:100%;padding-bottom:clamp(64px,13vh,130px)} .cine-hero__eyebrow{display:inline-flex;align-items:center;gap:14px;font-family:var(--mono); font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--fg-dim);margin-bottom:24px} .cine-hero__eyebrow::before{content:"";width:34px;height:1px;background:rgba(255,255,255,.4)} .cine-hero__title{font-size:clamp(3rem,10vw,8rem);font-weight:200;letter-spacing:-.05em; line-height:.9;color:#fff;text-transform:lowercase} .cine-hero__sub{margin-top:28px;max-width:34ch;font-size:clamp(1.05rem,1.6vw,1.35rem); font-weight:300;color:var(--fg-dim)} .cine-hero__cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2; font-family:var(--mono);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--fg-faint)} .js .cine-hero__cue{animation:cueFade 2.4s ease-in-out infinite} @media(prefers-reduced-motion:reduce){.cine-hero__video{display:none}} /* ── HERO (home) ─────────────────────────────────────── */ .hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden} .hero__bg{position:absolute;inset:0;z-index:0} .hero__bg img{width:100%;height:120%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.55)} .hero__bg::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(5,7,11,.4) 0%,rgba(5,7,11,.2) 40%,rgba(5,7,11,.95) 100%)} .hero__inner{position:relative;z-index:2;width:100%} .hero__logo{height:clamp(60px,11vw,120px);width:auto;opacity:0;transform:translateY(20px)} .hero__tag{margin-top:26px;font-size:clamp(1rem,2vw,1.4rem);color:var(--fg-dim);font-weight:300;max-width:30ch} .hero__scroll{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:3; width:24px;height:40px;border:1px solid var(--hair-strong);border-radius:14px} .hero__scroll span{position:absolute;top:8px;left:50%;width:3px;height:7px;border-radius:2px; background:var(--fg-dim);transform:translateX(-50%);animation:scrolly 1.8s ease-in-out infinite} @keyframes scrolly{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}80%{opacity:0;transform:translate(-50%,12px)}} /* ── Statement ───────────────────────────────────────── */ .statement{padding:clamp(90px,16vh,180px) 0} .statement__text{font-size:clamp(1.6rem,4.2vw,3rem);font-weight:200;letter-spacing:-.03em; line-height:1.18;max-width:20ch;text-transform:lowercase} /* ── ESCENAS CINEMATOGRÁFICAS (home) ─────────────────── */ .scene{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:#05070b} .scene__bg{position:absolute;inset:0;width:100%;height:108%;object-fit:cover;z-index:0;will-change:transform} .scene__scrim{position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(5,7,11,.5) 0%,rgba(5,7,11,.12) 30%,rgba(5,7,11,.55) 68%,rgba(5,7,11,.95) 100%)} .scene__inner{position:relative;z-index:2;width:100%;padding-bottom:clamp(60px,12vh,120px);max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)} .scene__num{font-family:var(--mono);font-size:.8rem;letter-spacing:.2em;color:var(--accent);margin-bottom:18px} .scene__title{font-size:clamp(2.6rem,7.5vw,6rem);font-weight:200;letter-spacing:-.045em;line-height:.95; color:#fff;text-transform:lowercase;margin:14px 0 20px;max-width:16ch} .scene__hook{color:var(--fg-dim);max-width:40ch;font-size:clamp(1rem,1.4vw,1.2rem);font-weight:300} .scene__cta{margin-top:30px} /* escenas con scroll-scrub (canvas de frames, pineado) */ .scene.scrub{min-height:0;height:180vh;display:block;align-items:initial} .scrub__sticky{position:relative;height:100svh;width:100%;overflow:hidden;background:#04060a; display:flex;align-items:flex-end} .scrub__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block} .scene.scrub .scene__scrim{z-index:1} .scene.scrub .scene__inner{position:relative;z-index:2} .scene--net {--accent:#6db3ff;--accent-soft:rgba(109,179,255,.13);--accent-line:rgba(109,179,255,.4)} .scene--pf {--accent:#d4c47a;--accent-soft:rgba(212,196,122,.13);--accent-line:rgba(212,196,122,.4)} .scene--video{--accent:#ff7a66;--accent-soft:rgba(255,122,102,.13);--accent-line:rgba(255,122,102,.4)} .scene--dron {--accent:#7fb8cc;--accent-soft:rgba(127,184,204,.13);--accent-line:rgba(127,184,204,.4)} /* ── TEASERS (home) ──────────────────────────────────── */ .teaser{position:relative;min-height:96svh;display:flex;align-items:center;overflow:hidden; border-top:.5px solid var(--hair)} .teaser__inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr; align-items:center;gap:40px;width:100%} .teaser__txt{position:relative} .teaser__title{margin:18px 0 18px} .teaser__hook{color:var(--fg-dim);max-width:36ch;font-size:clamp(1rem,1.4vw,1.15rem)} .teaser__cta{margin-top:32px} .teaser__art{position:relative;display:flex;align-items:center;justify-content:center;min-height:340px} .teaser__glow{position:absolute;width:min(120%,520px);aspect-ratio:1;border-radius:50%;z-index:0; background:radial-gradient(circle,var(--accent-soft),transparent 66%);opacity:.85} .teaser .stage{position:relative;z-index:1;width:100%;max-width:420px} /* acentos por teaser */ .teaser--net {--accent:#6db3ff;--accent-soft:rgba(109,179,255,.13);--accent-line:rgba(109,179,255,.40)} .teaser--pf {--accent:#d4c47a;--accent-soft:rgba(212,196,122,.13);--accent-line:rgba(212,196,122,.40)} .teaser--video{--accent:#ff7a66;--accent-soft:rgba(255,122,102,.13);--accent-line:rgba(255,122,102,.40)} .teaser--dron {--accent:#7fb8cc;--accent-soft:rgba(127,184,204,.13);--accent-line:rgba(127,184,204,.40)} /* ── PÁGINA DE DETALLE ───────────────────────────────── */ .lead{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding-top:90px} .lead__inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:40px;width:100%} .lead__txt{position:relative} .lead__title{margin:22px 0 22px} .lead__art{position:relative;display:flex;align-items:center;justify-content:center;min-height:420px} .lead__glow{position:absolute;width:min(130%,560px);aspect-ratio:1;border-radius:50%;z-index:0; background:radial-gradient(circle,var(--accent-soft),transparent 64%)} .lead .stage{position:relative;z-index:1;width:100%;max-width:460px} /* ── HERO CINEMATOGRÁFICO (scroll-scrub de fotogramas) ─ */ .film{position:relative;height:300vh;background:#000} .film__sticky{position:relative;height:100svh;width:100%;overflow:hidden;background:#000} .film__canvas{position:absolute;inset:0;width:100%;height:100%;display:block} .film__overlay{position:absolute;inset:0;z-index:2} .cap{position:absolute;opacity:0;will-change:opacity,transform;max-width:min(640px,86vw)} .cap--a{left:var(--pad);bottom:13vh} .cap--b{right:var(--pad);top:20vh;text-align:right;max-width:min(440px,80vw)} .cap--c{left:0;right:0;margin-inline:auto;bottom:13vh;text-align:center;max-width:780px;padding-inline:var(--pad)} .cap__big{font-size:clamp(2.4rem,6vw,4.4rem);font-weight:200;letter-spacing:-.04em;line-height:1} .cap__sub{margin-top:18px;color:var(--fg-dim);font-size:clamp(1rem,1.5vw,1.2rem);font-weight:300} .cap .display{margin:.18em 0} .film__cue{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:3; font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-faint)} .js .film__cue{animation:cueFade 2.4s ease-in-out infinite} @keyframes cueFade{0%,100%{opacity:.35}50%{opacity:.9}} .stats{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,48px);margin:34px 0} .stat .n{font-size:clamp(2rem,4vw,2.8rem);font-weight:200;letter-spacing:-.03em;line-height:1} .stat .n small{font-size:.45em;font-weight:300} .stat .l{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase; color:var(--fg-faint);margin-top:9px} /* secciones de contenido */ .section{padding:clamp(70px,12vh,130px) 0;border-top:.5px solid var(--hair);position:relative} .section__head{max-width:60ch;margin-bottom:clamp(40px,7vh,72px)} .section__head .h-sec{margin:16px 0 14px} .grid{display:grid;gap:clamp(18px,2.5vw,28px)} .grid--2{grid-template-columns:repeat(2,1fr)} .grid--3{grid-template-columns:repeat(3,1fr)} .grid--4{grid-template-columns:repeat(4,1fr)} .card{padding:clamp(24px,3vw,36px);border-radius:var(--radius-lg); background:rgba(255,255,255,.025);border:.5px solid var(--hair);position:relative;overflow:hidden; transition:border-color .4s,transform .4s,background .4s} .card:hover{border-color:var(--accent-line);transform:translateY(-4px);background:rgba(255,255,255,.04)} .card__k{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)} .card h3{font-size:1.35rem;font-weight:400;margin:14px 0 12px;text-transform:none;letter-spacing:-.02em} .card p{color:var(--fg-dim);font-size:.96rem} .card__price{margin-top:22px;font-size:.95rem;color:var(--fg)} .card__price strong{font-weight:500} /* listas de condiciones / features */ .feat{display:flex;gap:18px;padding:24px 0;border-top:.5px solid var(--hair)} .feat__i{font-family:var(--mono);color:var(--accent);font-size:.8rem;letter-spacing:.1em;flex:0 0 42px;padding-top:3px} .feat h3{font-size:1.15rem;font-weight:400;text-transform:none;letter-spacing:-.01em;margin-bottom:6px} .feat p{color:var(--fg-dim);font-size:.95rem} /* clientes */ .clients{display:flex;flex-wrap:wrap;gap:12px} .clients span{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;color:var(--fg-dim); padding:10px 18px;border-radius:999px;border:.5px solid var(--hair)} /* galería */ .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .gallery img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius); filter:grayscale(1) contrast(1.04) brightness(.92);transition:filter .5s,transform .5s} .gallery img:hover{filter:grayscale(0) contrast(1.04) brightness(1);transform:scale(1.01)} .gallery--wide img{aspect-ratio:16/10} /* fila alterna texto+imagen (video) */ .row{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(28px,5vw,64px); padding:clamp(40px,7vh,80px) 0;border-top:.5px solid var(--hair)} .row--rev .row__media{order:-1} .row__media img{width:100%;aspect-ratio:16/11;object-fit:cover;border-radius:var(--radius-lg); filter:grayscale(1) contrast(1.05) brightness(.9)} .row h3{font-size:clamp(1.4rem,2.6vw,2rem);font-weight:300;text-transform:none;letter-spacing:-.02em;margin-bottom:14px} .row p{color:var(--fg-dim)} /* bloque precio destacado */ .pricing{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:24px; padding:clamp(34px,5vw,56px);border-radius:var(--radius-lg);background:rgba(255,255,255,.03); border:.5px solid var(--hair)} .pricing__val{font-size:clamp(2rem,5vw,3.4rem);font-weight:200;letter-spacing:-.03em} .pricing__val small{display:block;font-size:.85rem;font-family:var(--mono);letter-spacing:.14em; text-transform:uppercase;color:var(--fg-faint);margin-bottom:8px} /* ── CONTACTO / FORM ─────────────────────────────────── */ .contact{padding:clamp(80px,14vh,160px) 0;border-top:.5px solid var(--hair);position:relative;text-align:center} .contact__title{margin:18px auto 18px;max-width:16ch} .contact__sub{color:var(--fg-dim);max-width:46ch;margin:0 auto 44px} .form{max-width:620px;margin-inline:auto;text-align:left;display:grid;gap:18px} .form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px} .field{display:flex;flex-direction:column;gap:8px} .field label{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint)} .field input,.field select,.field textarea{ width:100%;padding:14px 16px;border-radius:var(--radius); background:rgba(255,255,255,.03);border:.5px solid var(--hair);color:var(--fg); font:inherit;font-size:.95rem;transition:border-color .3s,background .3s; } .field textarea{resize:vertical;min-height:110px} .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--accent-line);background:rgba(255,255,255,.05)} .field select{appearance:none;cursor:pointer} .field select option{background:#0a0d13;color:var(--fg)} .form__submit{margin-top:8px;width:100%;justify-content:center;font-size:1rem} .form__note{font-size:.78rem;color:var(--fg-faint);text-align:center;font-family:var(--mono);letter-spacing:.04em} /* ── FOOTER ──────────────────────────────────────────── */ .footer{padding:clamp(50px,8vh,90px) 0 50px;border-top:.5px solid var(--hair)} .footer__inner{display:flex;flex-wrap:wrap;gap:30px;align-items:center;justify-content:space-between} .footer__logo{height:40px;width:auto;opacity:.85} .footer__links{display:flex;flex-wrap:wrap;gap:22px;font-size:.9rem} .footer__links a{color:var(--fg-dim);transition:color .3s} .footer__links a:hover{color:var(--fg)} .footer__copy{width:100%;margin-top:30px;font-size:.78rem;color:var(--fg-faint);font-family:var(--mono);letter-spacing:.04em} /* ── Animaciones: estados iniciales (solo con JS) ────── */ .js .reveal{opacity:0;transform:translateY(26px)} .js .lead__art,.js .teaser__art{opacity:0} .line-wrap{display:block;overflow:hidden} .line-inner{display:block;will-change:transform} /* piezas de ensamblaje SVG: el JS las anima */ .js .asm{opacity:0} /* texto de apoyo del lead: entra en la intro */ .js .lead__txt .eyebrow, .js .lead__txt .lead-p, .js .lead__txt .stats, .js .lead__txt .chip{opacity:0;transform:translateY(18px)} /* ── Responsive ──────────────────────────────────────── */ @media(max-width:920px){ .teaser__inner,.lead__inner{grid-template-columns:1fr;gap:30px} .teaser__art,.lead__art{min-height:300px;order:-1} .grid--3,.grid--4{grid-template-columns:repeat(2,1fr)} .row{grid-template-columns:1fr;gap:24px} .row--rev .row__media{order:0} .gallery{grid-template-columns:repeat(2,1fr)} } @media(max-width:760px){ .nav__links,.nav__cta{display:none} .nav__burger{display:block} .form__row{grid-template-columns:1fr} .grid--2,.grid--3,.grid--4{grid-template-columns:1fr} .gallery{grid-template-columns:1fr 1fr} .pricing{flex-direction:column;align-items:flex-start} } /* ── Accesibilidad: sin movimiento ───────────────────── */ @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .js .reveal,.js .lead__art,.js .teaser__art,.js .asm, .js .lead__txt .eyebrow,.js .lead__txt .lead-p,.js .lead__txt .stats,.js .lead__txt .chip{opacity:1!important;transform:none!important} .nav{opacity:1;transform:none} .hero__logo{opacity:1;transform:none} html{scroll-behavior:auto} } .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}