/* ============================================================ AGENCIA LATINA — Sistema de diseño "MERIDIANO" Fingerprint: espectro multicolor de la marca como hilo conductor + margen contable + arco del logo como marcador. ============================================================ */ /* ---------- Tokens ---------- */ :root{ /* Espectro de marca (sistema de color codificado) */ --celeste:#00AEEF; --azul:#0072CE; --azul-med:#1E3A8A; --marino:#14213D; --amarillo:#FFD400; --naranja:#F7941D; --rojo:#ED1C24; --verde:#4CAF50; --magenta:#EC008C; --teal:#00B3B8; /* Neutros */ --tinta:#14213D; --tinta-2:#3A4763; --gris:#6D6E71; --linea:#E4E7F0; --papel:#FFFFFF; --papel-2:#F3F6FC; /* frío, no crema — decisión deliberada */ --noche:#0C1730; /* medianoche para bandas oscuras */ /* El espectro completo (arco del logo) */ --espectro:linear-gradient(90deg,#00AEEF,#00B3B8 14%,#4CAF50 28%,#FFD400 46%,#F7941D 64%,#ED1C24 80%,#EC008C 100%); /* Acento por página (lo define ) */ --acento:#00AEEF; --acento-suave:rgba(0,174,239,.12); --ancho:1220px; --gutter:200px; /* columna-margen contable */ --radio:16px; --f-display:'Sora',system-ui,sans-serif; --f-texto:'Plus Jakarta Sans',system-ui,sans-serif; --f-mono:'Space Mono',ui-monospace,monospace; } .a-celeste{--acento:#00AEEF;--acento-suave:rgba(0,174,239,.12)} .a-naranja{--acento:#F7941D;--acento-suave:rgba(247,148,29,.13)} .a-magenta{--acento:#EC008C;--acento-suave:rgba(236,0,140,.11)} .a-azul {--acento:#0072CE;--acento-suave:rgba(0,114,206,.12)} .a-verde {--acento:#4CAF50;--acento-suave:rgba(76,175,80,.14)} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ font-family:var(--f-texto); color:var(--tinta); background:var(--papel); line-height:1.65; font-size:16px; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} .wrap{max-width:var(--ancho);margin:0 auto;padding:0 28px} /* ---------- Tipografía ---------- */ h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1.04;letter-spacing:-.02em;color:var(--tinta)} .xxl{font-size:clamp(2.6rem,6.4vw,5.2rem);font-weight:800;letter-spacing:-.035em} .xl{font-size:clamp(2rem,4vw,3.1rem)} .lg{font-size:clamp(1.5rem,2.6vw,2.1rem)} .lead{font-size:clamp(1.05rem,1.5vw,1.22rem);color:var(--tinta-2)} .mono{font-family:var(--f-mono);font-weight:500;letter-spacing:.02em} /* Eyebrow con marcador de arco (firma estructural) */ .eyebrow{ font-family:var(--f-mono); font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--acento); display:inline-flex;align-items:center;gap:10px; } .eyebrow .arco{width:18px;height:18px;flex-shrink:0} .eyebrow .arco circle{fill:none;stroke:var(--acento);stroke-width:2.4;stroke-linecap:round} /* ---------- Riel de espectro (firma constante) ---------- */ .riel{height:5px;background:var(--espectro);background-size:200% 100%} .riel.anim{animation:corrimiento 9s linear infinite} @keyframes corrimiento{to{background-position:200% 0}} /* ---------- Header ---------- */ .top{background:var(--marino);color:#C6D2E8;font-size:.82rem} .top .wrap{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px} .top a:hover{color:#fff} .top .d{display:flex;align-items:center;gap:8px} .top svg{width:14px;height:14px;fill:var(--amarillo)} header.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--linea)} .nav .bar{display:flex;align-items:center;justify-content:space-between;height:78px} .logo{height:50px;width:auto;transition:transform .3s} .logo:hover{transform:scale(1.04)} .menu{display:flex;align-items:center;gap:30px} .menu a{font-weight:600;font-size:.95rem;color:var(--tinta);position:relative;padding:8px 0} .menu a::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;border-radius:2px;background:var(--acento);transition:width .25s} .menu a:hover::after,.menu a[aria-current="page"]::after{width:100%} .menu a[aria-current="page"]{color:var(--acento)} .btn{ display:inline-flex;align-items:center;gap:9px; font-family:var(--f-texto);font-weight:700;font-size:.94rem; padding:13px 24px;border-radius:999px;border:none;cursor:pointer; background:var(--tinta);color:#fff; transition:transform .2s,box-shadow .2s,background .2s,color .2s; } .btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(20,33,61,.22)} .btn.acento{background:var(--acento);color:#fff} .btn.wa{background:#25D366;color:#fff} .btn.wa:hover{background:#1fb457;box-shadow:0 10px 26px rgba(37,211,102,.4)} .btn.ghost{background:transparent;border:1.6px solid var(--linea);color:var(--tinta)} .btn.ghost:hover{border-color:var(--acento);color:var(--acento);box-shadow:none} .btn.ghost.claro{border-color:rgba(255,255,255,.4);color:#fff} .btn.ghost.claro:hover{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.7)} .btn.grande{padding:16px 30px;font-size:1rem} .btn svg{width:18px;height:18px} .hamb{display:none;background:none;border:none;cursor:pointer;padding:6px} .hamb span{display:block;width:26px;height:3px;background:var(--tinta);margin:5px 0;border-radius:2px} /* ---------- Estructura con margen contable ---------- */ /* Cada bloque: [ margen mono + arco ] [ contenido ] */ .bloque{padding:88px 0} .bloque .wrap{display:grid;grid-template-columns:var(--gutter) 1fr;gap:40px;align-items:start} .margen{position:sticky;top:110px} .margen .num{font-family:var(--f-mono);font-size:.8rem;font-weight:600;color:var(--gris);letter-spacing:.08em} .margen .et{font-family:var(--f-mono);font-size:.76rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--acento);margin-top:6px} .margen .arco-g{margin-top:14px;width:52px;height:52px} .margen .arco-g circle{fill:none;stroke:var(--acento);stroke-width:3;stroke-linecap:round} .contenido{min-width:0} .contenido>.titulo{margin-bottom:18px} .contenido>.intro{max-width:52ch;margin-bottom:36px} /* ---------- Hero ---------- */ .hero{position:relative;overflow:hidden;background:var(--papel-2);border-bottom:1px solid var(--linea)} .hero .wrap{padding-top:76px;padding-bottom:86px} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center} .hero h1{margin:20px 0 0} .hero .lead{margin-top:22px;max-width:34rem} .hero .acciones{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap} .hero-marcas{margin-top:40px;display:flex;gap:34px;flex-wrap:wrap} .hero-marcas .m{font-family:var(--f-mono)} .hero-marcas .m b{display:block;font-family:var(--f-display);font-size:1.4rem;color:var(--tinta);font-weight:800} .hero-marcas .m span{font-size:.76rem;color:var(--gris);letter-spacing:.04em} /* Firma: arco meridiano */ .meridiano{position:relative;aspect-ratio:1/.92;width:100%} .meridiano svg{width:100%;height:100%;overflow:visible} .meridiano .traza{fill:none;stroke:url(#gradMerid);stroke-width:3.2;stroke-linecap:round} .punto{filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))} .etq{font-family:var(--f-mono);font-size:12px;font-weight:600;fill:var(--tinta)} .etq.sub{fill:var(--gris);font-size:10px} /* Hero compacto para páginas internas */ .hero-mini{background:var(--noche);color:#fff;position:relative;overflow:hidden} .hero-mini::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--espectro)} .hero-mini .wrap{padding-top:70px;padding-bottom:70px;position:relative;z-index:2} .hero-mini h1{color:#fff;margin-top:16px} .hero-mini .lead{color:#B7C4E0;margin-top:16px;max-width:46rem} .hero-mini .orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;pointer-events:none;animation:deriva 17s ease-in-out infinite} .hero-mini .orb.o1{width:340px;height:340px;background:var(--acento);top:-90px;right:6%} .hero-mini .orb.o2{width:220px;height:220px;background:var(--magenta);bottom:-80px;left:10%;opacity:.32;animation-delay:-7s} /* Fondo en movimiento del hero de inicio */ .hero .wrap{position:relative;z-index:2} .hero .blob{position:absolute;border-radius:50%;filter:blur(72px);pointer-events:none;z-index:0} .hero .blob.b1{width:440px;height:440px;background:var(--celeste);opacity:.38;top:-140px;left:-90px;animation:deriva 19s ease-in-out infinite} .hero .blob.b2{width:380px;height:380px;background:var(--magenta);opacity:.26;bottom:-160px;right:4%;animation:deriva 24s ease-in-out infinite reverse;animation-delay:-6s} .hero .blob.b3{width:300px;height:300px;background:var(--naranja);opacity:.22;top:32%;right:32%;animation:deriva2 21s ease-in-out infinite;animation-delay:-3s} @keyframes deriva{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(38px,30px) scale(1.06)}} @keyframes deriva2{0%,100%{transform:translate(0,0)}33%{transform:translate(26px,-22px)}66%{transform:translate(-22px,20px)}} /* ---------- Chips de servicio (home) ---------- */ .chips{display:flex;flex-wrap:wrap;gap:12px} .chip{ display:inline-flex;align-items:center;gap:10px; padding:11px 18px;border-radius:999px;border:1.6px solid var(--linea); font-weight:600;font-size:.95rem;background:#fff;transition:.25s; } .chip .pt{width:10px;height:10px;border-radius:50%;background:var(--cc,var(--celeste))} .chip:hover{border-color:var(--cc,var(--celeste));transform:translateY(-2px);box-shadow:0 8px 20px rgba(20,33,61,.08)} /* ---------- Puntos "por qué" ---------- */ .porque{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px} .porque .p{border-top:3px solid var(--cc,var(--acento));padding-top:18px} .porque .p .n{font-family:var(--f-mono);font-size:.8rem;color:var(--gris);font-weight:600} .porque .p h3{font-size:1.2rem;margin:8px 0 6px} .porque .p p{color:var(--gris);font-size:.95rem} /* ---------- Servicios (página) ---------- */ .serv{ border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden; display:grid;grid-template-columns:8px 1fr;margin-bottom:22px;background:#fff; transition:box-shadow .3s,transform .3s; } .serv:hover{box-shadow:0 22px 50px rgba(20,33,61,.12);transform:translateY(-3px)} .serv .franja{background:var(--cc,var(--celeste))} .serv .cuerpo{padding:32px 34px;display:grid;grid-template-columns:1fr .9fr;gap:30px} .serv .cuerpo .txt h3{font-size:1.6rem;display:flex;align-items:center;gap:12px} .serv .cuerpo .txt h3 .cod{font-family:var(--f-mono);font-size:.8rem;font-weight:600;color:#fff;background:var(--cc,var(--celeste));padding:4px 9px;border-radius:6px;letter-spacing:.06em} .serv .cuerpo .txt p{color:var(--gris);margin-top:12px} .serv .cuerpo .txt .quien{margin-top:16px;font-size:.9rem;color:var(--tinta-2)} .serv .cuerpo .txt .quien b{color:var(--cc,var(--celeste))} .serv .cuerpo ul{list-style:none;align-self:center} .serv .cuerpo ul li{display:flex;gap:11px;padding:7px 0;font-weight:500;font-size:.95rem} .serv .cuerpo ul li svg{width:20px;height:20px;flex-shrink:0;stroke:var(--cc,var(--celeste));fill:none;stroke-width:2.4} /* ---------- Stats ---------- */ .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .stat{background:var(--noche);color:#fff;border-radius:var(--radio);padding:34px 24px;position:relative;overflow:hidden} .stat::after{content:"";position:absolute;left:0;bottom:0;right:0;height:5px;background:var(--espectro)} .stat b{font-family:var(--f-display);font-size:2.6rem;font-weight:800;display:block;color:var(--amarillo)} .stat span{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:#B7C4E0} /* ---------- Blog ---------- */ .filtros{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px} .filtro{font-family:var(--f-mono);font-size:.8rem;font-weight:600;padding:8px 15px;border-radius:999px;border:1.5px solid var(--linea);cursor:pointer;background:#fff;transition:.2s;letter-spacing:.03em} .filtro .pt{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cc,var(--gris));margin-right:7px;vertical-align:middle} .filtro:hover,.filtro.on{border-color:var(--cc,var(--tinta));color:var(--cc,var(--tinta))} .filtro[data-cat="todos"].on{border-color:var(--tinta);color:var(--tinta)} .destacado{display:grid;grid-template-columns:1.1fr 1fr;gap:0;border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;margin-bottom:34px;background:#fff} .destacado .foto{background:var(--cc,var(--magenta));position:relative;min-height:280px;display:grid;place-items:center;overflow:hidden} .destacado .foto .glifo{font-family:var(--f-display);font-weight:800;font-size:9rem;color:rgba(255,255,255,.22);line-height:1} .destacado .foto .cat{position:absolute;top:18px;left:18px;font-family:var(--f-mono);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.25);padding:6px 12px;border-radius:999px} .destacado .txt{padding:38px} .destacado .txt .meta{font-family:var(--f-mono);font-size:.78rem;color:var(--gris)} .destacado .txt h3{font-size:1.9rem;margin:12px 0} .destacado .txt p{color:var(--gris)} .destacado .txt .mas{margin-top:20px;display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--cc,var(--magenta))} .posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px} .post{border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:box-shadow .3s,transform .3s} .post:hover{box-shadow:0 18px 42px rgba(20,33,61,.12);transform:translateY(-4px)} .post .cab{height:120px;background:var(--cc,var(--celeste));position:relative;display:grid;place-items:center} .post .cab .glifo{font-family:var(--f-display);font-weight:800;font-size:3.4rem;color:rgba(255,255,255,.28)} .post .cab .cat{position:absolute;top:12px;left:12px;font-family:var(--f-mono);font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.22);padding:5px 10px;border-radius:999px} .post .cu{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1} .post .cu .meta{font-family:var(--f-mono);font-size:.74rem;color:var(--gris)} .post .cu h3{font-size:1.16rem;line-height:1.2} .post .cu p{font-size:.9rem;color:var(--gris);flex:1} .post .cu .mas{font-weight:700;font-size:.88rem;color:var(--cc,var(--celeste));margin-top:4px} /* ---------- Artículo ---------- */ .articulo{max-width:720px;margin:0 auto} .articulo .meta-top{font-family:var(--f-mono);font-size:.8rem;color:var(--gris);display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px} .articulo .cat-tag{color:#fff;background:var(--acento);padding:3px 10px;border-radius:6px;font-weight:600} .articulo h1{font-size:clamp(2rem,4vw,3rem);margin-bottom:20px} .articulo .cuerpo{font-size:1.08rem;color:#26324c} .articulo .cuerpo h2{font-size:1.5rem;margin:38px 0 12px} .articulo .cuerpo h3{font-size:1.2rem;margin:26px 0 8px} .articulo .cuerpo p{margin-bottom:18px} .articulo .cuerpo ul,.articulo .cuerpo ol{margin:0 0 18px 22px} .articulo .cuerpo li{margin-bottom:8px} .articulo .cuerpo strong{color:var(--tinta)} .callout{border-left:4px solid var(--acento);background:var(--acento-suave);padding:18px 22px;border-radius:0 12px 12px 0;margin:26px 0;font-size:1rem} .callout .et{font-family:var(--f-mono);font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--acento);display:block;margin-bottom:6px} /* ---------- Contacto ---------- */ .cont-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:44px;align-items:start} .datos{display:grid;gap:18px} .dato-card{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--linea);border-radius:var(--radio);padding:20px 22px;background:#fff} .dato-card .ic{width:44px;height:44px;border-radius:11px;background:var(--acento-suave);display:grid;place-items:center;flex-shrink:0} .dato-card .ic svg{width:22px;height:22px;stroke:var(--acento);fill:none;stroke-width:1.9} .dato-card h4{font-family:var(--f-display);font-size:1.05rem} .dato-card p,.dato-card a{color:var(--gris);font-size:.95rem} .dato-card a:hover{color:var(--acento)} .mapa{border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;margin-top:8px} .mapa iframe{width:100%;height:230px;border:0;display:block} .form{background:#fff;border:1px solid var(--linea);border-radius:20px;padding:34px;box-shadow:0 24px 60px rgba(20,33,61,.09);position:relative;overflow:hidden} .form::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:var(--espectro)} .form h3{font-size:1.4rem;margin-bottom:6px} .form .sub{color:var(--gris);font-size:.92rem;margin-bottom:22px} .campo{margin-bottom:18px} .campo label{display:block;font-family:var(--f-mono);font-size:.76rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--tinta);margin-bottom:7px} .campo label .req{color:var(--rojo)} .campo input,.campo select,.campo textarea{width:100%;padding:13px 15px;border:1.5px solid var(--linea);border-radius:11px;font-family:var(--f-texto);font-size:.95rem;color:var(--tinta);background:var(--papel-2);transition:border-color .2s,box-shadow .2s} .campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--acento);box-shadow:0 0 0 4px var(--acento-suave);background:#fff} .campo textarea{resize:vertical;min-height:104px} .fila{display:grid;grid-template-columns:1fr 1fr;gap:14px} .form .btn{width:100%;justify-content:center} #btnEnviar{margin-top:4px} .o-sep{display:flex;align-items:center;gap:12px;margin:14px 0;color:var(--gris);font-family:var(--f-mono);font-size:.76rem} .o-sep::before,.o-sep::after{content:"";flex:1;height:1px;background:var(--linea)} .spinner{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;display:none;animation:girar .7s linear infinite} @keyframes girar{to{transform:rotate(360deg)}} #btnEnviar.cargando .spinner{display:inline-block} #btnEnviar[disabled]{opacity:.75;cursor:not-allowed} .nota{font-family:var(--f-mono);font-size:.74rem;color:var(--gris);text-align:center;margin-top:12px} .aviso{display:none;margin-top:16px;padding:14px 16px;border-radius:11px;font-weight:600;font-size:.9rem} .aviso.show{display:block;background:rgba(76,175,80,.12);border:1px solid var(--verde);color:#1f7a33;animation:sube .4s both} .aviso.error{display:block;background:rgba(237,28,36,.1);border:1px solid var(--rojo);color:#b3131a} @keyframes sube{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* ---------- Banda CTA ---------- */ .cta{background:var(--noche);color:#fff;text-align:center;position:relative} .cta::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--espectro)} .cta .wrap{padding:80px 28px} .cta h2{color:#fff;font-size:clamp(1.8rem,3.6vw,2.7rem);max-width:740px;margin:0 auto} .cta p{color:#B7C4E0;margin:16px auto 30px;max-width:540px} .cta .acciones{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} /* ---------- Footer ---------- */ footer.pie{background:var(--marino);color:#9FB0CE;padding-top:0} footer.pie .riel{} footer.pie .wrap{padding-top:64px} .pie-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:40px;padding-bottom:46px} .pie-grid h4{font-family:var(--f-mono);color:#fff;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;margin-bottom:16px} .pie-grid ul{list-style:none} .pie-grid li{margin-bottom:9px;font-size:.92rem} .pie-grid a:hover{color:var(--amarillo)} .pie-logo{height:60px;margin-bottom:16px} .pie-marca p{font-size:.92rem;max-width:30rem} .pie-legal{border-top:1px solid rgba(255,255,255,.12);padding:18px 0;font-family:var(--f-mono);font-size:.76rem;color:#6E7FA0;text-align:center} .pie-legal a{color:#9FB0CE} .pie-legal a:hover{color:var(--amarillo)} /* ---------- WhatsApp flotante ---------- */ .wa-flot{position:fixed;right:22px;bottom:22px;z-index:80;width:60px;height:60px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 10px 30px rgba(37,211,102,.5);transition:transform .25s} .wa-flot:hover{transform:scale(1.08)} .wa-flot svg{width:32px;height:32px;fill:#fff} .wa-flot::before{content:"";position:absolute;inset:0;border-radius:50%;background:#25D366;animation:pulso 2.4s ease-out infinite;z-index:-1} @keyframes pulso{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.9);opacity:0}} /* ---------- Reveal ---------- */ .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)} .reveal.vis{opacity:1;transform:none} .d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s} /* ---------- Responsive ---------- */ @media (max-width:1000px){ :root{--gutter:150px} .hero-grid{grid-template-columns:1fr} .meridiano{max-width:460px;margin-top:20px} .serv .cuerpo{grid-template-columns:1fr} .destacado{grid-template-columns:1fr} .cont-grid{grid-template-columns:1fr} .pie-grid{grid-template-columns:1fr 1fr} } @media (max-width:720px){ .menu{display:none;position:absolute;top:78px;left:0;right:0;background:#fff;flex-direction:column;gap:0;padding:10px 28px 18px;border-bottom:1px solid var(--linea);box-shadow:0 14px 24px rgba(20,33,61,.12)} .menu.abierto{display:flex} .menu a{padding:13px 0;border-bottom:1px solid var(--linea);width:100%} .nav .btn{display:none} .hamb{display:block} .bloque .wrap{grid-template-columns:1fr;gap:22px} .margen{position:static;display:flex;align-items:center;gap:14px} .margen .arco-g{margin-top:0} .stats{grid-template-columns:1fr} .fila{grid-template-columns:1fr} .pie-grid{grid-template-columns:1fr} .bloque{padding:60px 0} } @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto} .reveal{opacity:1;transform:none} } :focus-visible{outline:3px solid var(--acento);outline-offset:3px}