/* ============================================================ ARG · mejoras-servicios.css · ronda de septiembre de 2026 Encuentros (#pg-encuentros), ARG Intelligence (#pg-argintelligence), Nosotros (#pg-nosotros) y la sección Método compartida (.metodo-casa, template-parts/metodo.php, que también imprime la página ATLAS). Se encola después de main.css y pisa por orden. main.css no se toca. Sin movimiento propio: solo .rv y .draw del motor, y el desplazamiento de 4 px de la flecha en hover (160 ms), apagado bajo reduced-motion. ============================================================ */ /* ============================================================ 1 · MÉTODO DE LA CASA (.metodo-casa) · compartido Composición 5/7: cabecera (kicker, h2 y rosa de 160 px) a la izquierda; lectura a 68ch a la derecha. Ninguna caja: la jerarquía la dan el serif del primer párrafo, los rótulos en peso 600 y el sello final en itálica con filete dorado. La rosa dibuja con currentColor: el color se define en .metodo-cabecera. ============================================================ */ .metodo-casa{position:relative} .metodo-grid{gap:clamp(32px,5vw,80px);align-items:start} /* cabecera */ .metodo-cabecera{color:var(--navy)} .metodo-cabecera h2{max-width:16ch} .metodo-rosa{display:block;width:160px;height:160px;margin-top:36px} /* lectura */ .metodo-texto{max-width:68ch} .metodo-texto p{margin:0 0 22px;max-width:68ch;line-height:1.7} .metodo-texto p:last-child{margin-bottom:0} .metodo-texto .metodo-lead{font-family:var(--serif);font-size:clamp(19px,2vw,22px); line-height:1.55;color:var(--tinta);margin-bottom:30px} .metodo-rotulo{font-weight:600;color:var(--navy)} .metodo-texto .metodo-sello{font-family:var(--serif);font-style:italic;font-weight:500; font-size:clamp(17.5px,1.8vw,19.5px);line-height:1.5;color:var(--navy); border-left:2px solid var(--gold-deep);padding-left:clamp(16px,2vw,24px); margin-top:36px;max-width:56ch} /* variante oscura (band dark): kicker y rótulos en dorado (es el método del ATLAS: el dorado señaliza lo ATLAS), rosa en steel, lectura en txt-d-sec */ .metodo-casa-oscuro .klabel{color:var(--gold)} .metodo-casa-oscuro .metodo-cabecera{color:var(--steel)} .metodo-casa-oscuro .metodo-texto p{color:var(--txt-d-sec)} .metodo-casa-oscuro .metodo-texto .metodo-lead{color:var(--txt-d)} .metodo-casa-oscuro .metodo-rotulo{color:var(--gold)} .metodo-casa-oscuro .metodo-texto .metodo-sello{color:var(--txt-d);border-left-color:var(--gold)} @media (max-width:900px){ .metodo-rosa{width:120px;height:120px;margin-top:24px} .metodo-texto{max-width:none} } @media (max-width:600px){ .metodo-texto .metodo-sello{padding-left:16px;margin-top:28px} } /* ============================================================ 2 · ENCUENTROS (#pg-encuentros) ============================================================ */ /* portada: contacto y modalidad debajo de la bajada */ #pg-encuentros .enc-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px; margin-top:34px} #pg-encuentros .enc-modo{font:500 12px/1.5 var(--mono);letter-spacing:.14em; text-transform:uppercase;color:var(--txt-d-sec);margin:0;max-width:none} /* formatos: cinco columnas en fila con hairline de cabecera; no ocupa una pantalla */ #pg-encuentros .enc-formatos{padding:clamp(56px,7vw,96px) 0} #pg-encuentros .enc-fmt-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:16px clamp(32px,5vw,72px);align-items:end} #pg-encuentros .enc-fmt-head h2{max-width:14ch} #pg-encuentros .enc-fmt-lede{margin:0 0 6px;max-width:54ch;color:var(--sec); font-size:16.5px;line-height:1.6} #pg-encuentros .enc-fmt{list-style:none;margin:40px 0 0;padding:0;display:grid; grid-template-columns:repeat(5,minmax(0,1fr));gap:28px 24px} #pg-encuentros .enc-fmt li{border-top:1px solid var(--tinta);padding-top:22px} #pg-encuentros .enc-fmt .fic{display:block;width:44px;height:44px;margin:0 0 18px} #pg-encuentros .enc-fmt h3{font-size:18px;line-height:1.3;margin:0 0 6px} #pg-encuentros .enc-fmt p{margin:0;font-size:14.5px;line-height:1.55;color:var(--sec);max-width:none} #pg-encuentros .enc-fmt-link{margin:36px 0 0;font-size:15px;max-width:none} #pg-encuentros .enc-fmt-link .linkline{color:var(--navy)} #pg-encuentros .enc-fmt-link .arr{transition:transform var(--t-fast)} #pg-encuentros .enc-fmt-link .linkline:hover .arr, #pg-encuentros .enc-fmt-link .linkline:focus-visible .arr{transform:translateX(4px)} /* cierre breve */ #pg-encuentros .cierre-e .klabel{justify-content:center} #pg-encuentros .cierre-e-l{max-width:50ch;margin:16px auto 0;color:var(--txt-d-sec)} #pg-encuentros .cierre-e-cta{margin:28px auto 0;max-width:none} @media (max-width:960px){ #pg-encuentros .enc-fmt{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:900px){ #pg-encuentros .enc-fmt-head{grid-template-columns:1fr;gap:12px} } @media (max-width:640px){ #pg-encuentros .hero-e .baj{font-size:17.5px;margin-top:18px} #pg-encuentros .enc-cta{margin-top:28px;gap:14px} } @media (max-width:600px){ /* lista compacta: ícono a la izquierda, dos líneas por formato */ #pg-encuentros .enc-fmt{grid-template-columns:1fr;gap:0;margin-top:28px} #pg-encuentros .enc-fmt li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:16px; align-items:start;padding:16px 0;border-top-color:var(--hair)} #pg-encuentros .enc-fmt li:first-child{border-top-color:var(--tinta)} #pg-encuentros .enc-fmt .fic{width:36px;height:36px;margin:2px 0 0} #pg-encuentros .enc-fmt h3{font-size:16.5px;margin-bottom:3px} #pg-encuentros .enc-fmt p{font-size:14px} #pg-encuentros .enc-fmt-link{margin-top:26px} } /* ============================================================ 3 · ARG INTELLIGENCE (#pg-argintelligence) ============================================================ */ /* portada breve: el h1 abre sin kicker; lema y bajada, nada más */ #pg-argintelligence .hero-ai .intro p.lead{max-width:52ch;margin-bottom:0} /* qué es + contacto: la contratación antes del detalle (7/5) */ #pg-argintelligence .ai-que-grid{gap:clamp(32px,5vw,80px);align-items:start} #pg-argintelligence .ai-que-p{font-family:var(--serif);font-size:clamp(18px,1.9vw,20.5px); line-height:1.6;color:var(--tinta);max-width:62ch;margin:0} #pg-argintelligence .ai-contacto{border-top:1px solid var(--gold-deep);padding-top:24px} #pg-argintelligence .ai-contacto-l{font-family:var(--serif);font-weight:500; font-size:clamp(20px,2.2vw,24px);line-height:1.35;color:var(--navy);max-width:22ch; margin:0 0 24px;text-wrap:balance} #pg-argintelligence .ai-contacto-cta{margin:0;max-width:none} /* pilares: numerales tipográficos en mono */ #pg-argintelligence .pilares .num{letter-spacing:.12em} /* cierre */ #pg-argintelligence .cierre-ai-cta{margin:30px 0 0;max-width:none} @media (max-width:900px){ #pg-argintelligence .ai-contacto{margin-top:8px} } /* ============================================================ 4 · NOSOTROS (#pg-nosotros) ============================================================ */ /* apertura: sin coordenadas; el standfirst cierra la portada */ #pg-nosotros .nos-hero .standfirst{margin-bottom:0} /* diferenciales: numerales tipográficos en lugar de códigos */ #pg-nosotros .nos-dif .num{letter-spacing:.12em} /* método en tono oscuro entre la banda papel y Destinatarios (base-1): un paso más profundo y un hairline para que las dos oscuras no se fundan */ #pg-nosotros .metodo-casa-oscuro{background:var(--base-0);border-bottom:1px solid var(--hair-d)} /* ============================================================ 5 · MOVIMIENTO REDUCIDO ============================================================ */ @media (prefers-reduced-motion:reduce){ #pg-encuentros .enc-fmt-link .arr{transition:none} }