.btn,.card--service a,.crumbs a,.site-footer a{text-decoration:none}.hero h1,h1{letter-spacing:.2px}:root{--brand:#003366;--brand-2:#004B87;--accent:#FF7F00;--paper:#FFFFFF;--bg:#F5F7FB;--ink:#0B1F33;--muted:#6B7B8C;--shadow:0 8px 24px rgba(0,16,40,.10),0 2px 8px rgba(0,16,40,.06);--radius:18px;--radius-sm:12px;--max:1120px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.5}.container{width:min(100%,var(--max));margin-inline:auto;padding-inline:clamp(16px,3vw,24px)}.topbar{background:#eef3fa;border-bottom:1px solid rgba(0,0,0,.06);font-size:.9rem}.crumbs{padding:8px 0;color:var(--muted)}.crumbs a{color:var(--brand)}.crumbs a:hover,.site-footer a:hover{text-decoration:underline}.hero{position:relative;padding:clamp(40px,8vw,80px) 0;overflow:hidden;background:linear-gradient(180deg,rgba(0,51,102,.92) 0,rgba(0,51,102,.85) 60%,rgba(0,51,102,.8) 100%),var(--hero,none) center/cover no-repeat;color:var(--paper)}.card--service a,.card--service h3,.section-title,a{color:var(--brand)}.hero .container{position:relative;z-index:1}.hero h1{margin:0 0 8px;font-size:clamp(28px, 4.2vw, 46px);line-height:1.15}.hero .lead{margin:0 0 18px;color:#e8f0fa;font-size:clamp(15px, 2.2vw, 18px)}.hero .cta-group{display:flex;gap:12px;flex-wrap:wrap}.section{padding:clamp(28px,6vw,56px) 0}.section-title{font-size:clamp(22px, 3.2vw, 32px);margin:0 0 4px}.section-sub{margin:0 0 22px;color:var(--muted);font-size:1rem}.section-title,h2.section-title{position:relative;display:inline-block;padding-bottom:6px}.section-title::after{content:"";position:absolute;left:0;bottom:0;width:48px;height:4px;border-radius:4px;background:var(--accent)}.services-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2.5vw,22px)}.card--service{grid-column:span 12;background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(16px,2.2vw,20px);border:1px solid rgba(0,0,0,.06);position:relative;transition:transform .18s,box-shadow .18s,border-color .18s}@media (min-width:720px){.card--service{grid-column:span 6}}@media (min-width:1024px){.card--service{grid-column:span 4}}.card--service::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;border-radius:var(--radius) 0 0 var(--radius);background:linear-gradient(180deg,var(--accent) 0,#ff9a33 100%);opacity:.9}.card--service:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,16,40,.12),0 4px 10px rgba(0,16,40,.08);border-color:rgba(0,51,102,.18)}.card--service h3{margin:0 0 6px;font-size:clamp(18px, 2.5vw, 20px)}.card--service a{border-bottom:2px solid transparent;transition:border-color .2s,color .2s}.card--service a:hover{color:var(--brand-2);border-bottom-color:var(--accent)}.card--service p{margin:0;color:#2a3e57}.cta-panel{margin:clamp(18px,4vw,36px) 0 0;padding:clamp(14px,3vw,18px);background:linear-gradient(90deg,var(--brand) 0,var(--brand-2) 100%);color:var(--paper);border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;box-shadow:var(--shadow)}.cta-panel p{margin:0;color:#e9f2fa}.cta-group{display:flex;gap:10px;flex-wrap:wrap}.btn{--btn-bg:#e9eef6;--btn-ink:var(--brand);display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 16px;border-radius:12px;font-weight:600;color:var(--btn-ink);background:var(--btn-bg);border:1px solid rgba(0,0,0,.08);transition:transform .06s,filter .12s,background .12s,border-color .12s}.btn:hover{filter:brightness(.98)}.btn:active{transform:translateY(1px)}.btn:focus-visible{outline:#99C2FF solid 3px;outline-offset:2px}.btn-accent{--btn-bg:var(--accent);--btn-ink:#0d1a26;color:#0d1a26;border-color:rgba(0,0,0,.06)}.btn-accent:hover{filter:brightness(.97)}.btn-outline{--btn-bg:transparent;--btn-ink:var(--paper);color:var(--paper);border:1.5px solid rgba(255,255,255,.65)}.btn-outline:hover{background:rgba(255,255,255,.08)}.site-footer{margin-top:clamp(24px,6vw,48px);background:var(--brand);color:#bfd3ea}.site-footer .container{padding-block:18px}.site-footer a{color:#d5e6f7}h1,h2,h3{font-weight:800}a:hover{color:var(--brand-2)}
/* ======================================================
MODERNIZACIÓN 2026 — alineación tipográfica y refuerzo visual
(mismos colores de marca; añadido al final, ver nota en style.css)
====================================================== */
body {
font-family:
Poppins,
system-ui,
-apple-system,
"Segoe UI",
Roboto,
Arial,
sans-serif;
}
.btn {
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
filter 0.2s ease;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 16, 40, 0.15);
}
.card--service {
transition:
transform 0.22s ease,
box-shadow 0.22s ease,
border-color 0.22s ease;
}
/* ======================================================
MODERNIZACIÓN 2026 (v2) — ritmo visual entre secciones
(mismos colores; ver nota en style.css sobre por qué se
añade al final en vez de tocar las reglas ya existentes)
====================================================== */
.section:nth-of-type(even) {
background: var(--paper);
}
.hero {
background:
linear-gradient(180deg, rgba(0, 51, 102, 0.94) 0%, rgba(0, 51, 102, 0.88) 60%, rgba(0, 51, 102, 0.82) 100%),
var(--hero, none) center/cover no-repeat;
}
/* ======================================================
FRESCURA CON TONOS DE MARCA (Bloque 19) — mismo criterio que
style.css (ver comentario detallado ahí). Las secciones "pares"
ya alternaban con blanco desde una modernización anterior; aquí
se cambia ese blanco por un tono cálido derivado del naranja de
acento, para que combine con el tono azulado ya existente del
fondo general de página (--bg) y dé la misma sensación de
variedad de tonos de marca que en home/contacto.
====================================================== */
.section:nth-of-type(even) {
background: #fff9f2;
}
/* ======================================================
CHATBOT — el CSS del widget flotante se movió a chat-widget.css
en el Bloque 24 (el chat ahora aparece en TODAS las páginas del
sitio, no solo en las de servicios, así que su CSS ya no vive
solo aquí). Esta página sigue cargando ese archivo mediante un
propio en el HTML.
====================================================== */
/* ======================================================
TARJETAS DE SERVICIO COMPLETAMENTE CLICABLES (Bloque 21)
Mismo criterio que en style.css (home): antes solo el título
dentro de