/* Nicaroads — Contact us y Services. Complementa home-ux.css (nr-*). Paleta: naranja #fc6b1d/#FBB03B, azul #2b3477/#1c3664/#2850E0. */

/* Hero de pagina */
.pg-hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 340px; padding: 64px 0; background-size: cover; background-position: center; background-color: #1c3664; color: #fff; }
@media (min-width: 768px) { .pg-hero { min-height: 440px; padding: 96px 0; } }
.pg-hero, .pg-hero *, .ns-svc, .ns-svc *, .pg-contact, .pg-contact *, .pg-map, .pg-map * { box-sizing: border-box; }
.pg-hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,20,45,.6), rgba(10,20,45,.78)); }
.pg-hero__inner { text-align: center; }
.pg-hero__title { margin: 0; font-size: clamp(34px, 6vw, 68px); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.pg-hero__title span { color: #fc6b1d; }
.pg-hero__title::after { content: ""; display: block; width: 64px; height: 4px; margin: 18px auto 0; border-radius: 4px; background-image: linear-gradient(160deg, #FBB03B, #fc6b1d); }
.pg-hero__lead { max-width: 680px; margin: 20px auto 0; font-size: clamp(16px, 2vw, 21px); line-height: 1.6; color: #fff; opacity: .95; }
.ns-crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 20px; font-size: 14px; color: #e5e7eb; }
.ns-crumbs a { color: #fff; text-decoration: none; opacity: .85; }
.ns-crumbs a:hover { opacity: 1; text-decoration: underline; }
.ns-crumbs [aria-current] { color: #FBB03B; font-weight: 600; }

/* ───────── Contact ───────── */
.pg-contact { padding: 56px 0 !important; }
@media (min-width: 768px) { .pg-contact { padding: 88px 0 !important; } }
.pg-contact__grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: stretch; }
@media (min-width: 1024px) { .pg-contact__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 36px; } }
.pg-contact__info { display: flex; flex-direction: column; gap: 20px; }
.pg-contact__img { margin: 0; overflow: hidden; border-radius: 24px; background: rgba(255,255,255,.2); box-shadow: 0 24px 48px -28px rgba(10,20,45,.6); }
.pg-contact__img img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; }
.pg-channels { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pg-channels a { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 16px; background: #fff; color: #2b3477; text-decoration: none; box-shadow: 0 16px 32px -22px rgba(10,20,45,.6); transition: transform .25s ease, box-shadow .25s ease; }
.pg-channels a:hover { transform: translateY(-3px); box-shadow: 0 22px 38px -20px rgba(10,20,45,.7); }
.pg-channels__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background-image: linear-gradient(160deg, #FBB03B, #fc6b1d); color: #1c3664; font-size: 20px; }
.pg-channels b { display: block; font-size: 16px; font-weight: 700; color: #2b3477; }
.pg-channels small { display: block; margin-top: 2px; font-size: 15px; color: #4b5563; overflow-wrap: anywhere; }
.pg-contact__form { min-height: 100%; }
.pg-contact__form .nr-contact__form { width: 100%; }
.pg-contact .nr-contact { min-height: 100%; }

/* Mapa */
.pg-map__frame { overflow: hidden; border-radius: 24px; box-shadow: 0 24px 48px -28px rgba(10,20,45,.55); aspect-ratio: 16 / 9; min-height: 320px; background: #e5e7eb; }
.pg-map__frame iframe { display: block; width: 100%; height: 100%; min-height: 320px; border: 0; }
.pg-map .nr-title { font-size: clamp(26px, 4vw, 44px); }

/* ───────── Services ───────── */
.ns-svc { padding: 56px 0; background: #fff; }
@media (min-width: 768px) { .ns-svc { padding: 88px 0; } }
.ns-svc__grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
@media (min-width: 1024px) { .ns-svc__grid { grid-template-columns: 320px minmax(0, 1fr); gap: 48px; } }
.ns-svc__side { display: grid; gap: 20px; }
@media (min-width: 1024px) { .ns-svc__side { position: sticky; top: 24px; } }

.ns-svc__nav { display: grid; gap: 10px; }
@media (max-width: 1023px) { .ns-svc__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ns-svc__nav { grid-template-columns: 1fr; } }
.ns-svc__link { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; border-radius: 14px; background: #f3f4f6; color: #2b3477; font-size: 16px; font-weight: 600; text-decoration: none; transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.ns-svc__link > i:first-child { flex: none; width: 22px; text-align: center; color: #fc6b1d; }
.ns-svc__link span { flex: 1; }
.ns-svc__chev { color: #9ca3af; transition: transform .2s ease; }
.ns-svc__link:hover { background: #e8eeff; transform: translateX(3px); }
.ns-svc__link:hover .ns-svc__chev { transform: translateX(3px); color: #2850E0; }
.ns-svc__link.is-active { background-image: linear-gradient(160deg, #FBB03B, #fc6b1d); color: #1c3664; }
.ns-svc__link.is-active > i:first-child, .ns-svc__link.is-active .ns-svc__chev { color: #1c3664; }
.ns-svc__link:focus-visible { outline: 3px solid #2850E0; outline-offset: 2px; }

.ns-touch { position: relative; overflow: hidden; padding: 28px 22px; border-radius: 22px; background: #2b3477; color: #fff; text-align: center; box-shadow: 0 24px 48px -28px rgba(10,20,45,.7); }
.ns-touch::before, .ns-touch::after { content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.06); }
.ns-touch::before { top: -50px; left: -40px; }
.ns-touch::after { bottom: -50px; right: -40px; }
.ns-touch > * { position: relative; z-index: 1; }
.ns-touch h2 { margin: 0; font-size: 24px; font-weight: 700; color: #fff; }
.ns-touch__wa { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 20px auto; border-radius: 50%; background: #fff; color: #16a34a; transition: transform .25s ease; }
.ns-touch__wa:hover { transform: scale(1.08); }
.ns-touch p { margin: 0; font-size: 16px; line-height: 1.55; color: #d1d5db; }
.ns-touch__mail { display: block; margin-top: 8px; color: #FBB03B !important; font-size: 18px; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.ns-touch__mail:hover { text-decoration: underline; }
.ns-touch a:focus-visible { outline: 3px solid #FBB03B; outline-offset: 3px; }

.ns-svc__cover { display: block; width: 100%; height: auto; max-height: 380px; object-fit: cover; margin-bottom: 36px; border-radius: 22px; box-shadow: 0 24px 48px -28px rgba(10,20,45,.5); }
.ns-svc__block { scroll-margin-top: 96px; margin-bottom: 28px; padding: 28px 22px; border: 1px solid #e5e7eb; border-radius: 22px; background: #fff; box-shadow: 0 16px 32px -26px rgba(10,20,45,.45); }
@media (min-width: 768px) { .ns-svc__block { padding: 40px 44px; } }
.ns-svc__block:last-child { margin-bottom: 0; }

/* Texto largo (misma tipografia que las paginas de lugar) */
.ns-prose { font-size: 17px; line-height: 1.8; color: #374151; }
.ns-prose h2 { margin: 0 0 .7em; font-size: clamp(24px, 3vw, 34px); line-height: 1.2; font-weight: 700; color: #2b3477; }
.ns-prose h3 { margin: 1.6em 0 .6em; font-size: clamp(20px, 2.4vw, 25px); line-height: 1.25; font-weight: 700; color: #2b3477; }
.ns-prose p { margin: 0 0 1.1em; }
.ns-prose a { color: #2850E0; text-decoration: underline; text-underline-offset: 3px; }
.ns-prose a:hover { color: #fc6b1d; }
.ns-prose ul, .ns-prose ol { margin: 0 0 1.3em; padding-left: 1.4em; }
.ns-prose ul { list-style: disc; }
.ns-prose li { margin-bottom: .6em; }
.ns-prose li::marker { color: #fc6b1d; }
.ns-prose strong { color: #2b3477; }