/* ================================
Global y suavizado de scroll
================================ */
html {
scroll-behavior: smooth;
}
/* =============================================
Norttek Global Theme Variables (2025 refresh)
Adopt palette & components from Internet page
============================================= */
:root {
--nt-bg: #f8fbff;
--nt-surface: #ffffff;
--nt-surface-alt: #f1f5fb;
--nt-text: #0f172a;
--nt-text-muted: #5f6c80;
--nt-primary: #9bc4ff;
--nt-primary-strong: #6fa4ff;
--nt-accent: #ff8a00; /* icon accent (warm) */
--nt-ring: rgba(111,164,255,0.25);
--nt-danger: #ff3b3b;
--nt-danger-strong: #ff1f1f;
--nt-success: #22c55e;
--nt-success-strong: #16a34a;
--nt-warning: #f59e0b;
--nt-warning-strong: #d97706;
--nt-info: #3b82f6;
--nt-info-strong: #2563eb;
--nt-hero-overlay: linear-gradient(rgba(10,31,50,.72),rgba(4,12,20,.85));
--nt-hero-gradient-text: linear-gradient(90deg,#133a5c,#1d4d78 45%,#297098 80%);
--nt-radius-sm: 6px;
--nt-radius: 8px;
--nt-radius-lg: 14px;
--nt-shadow-sm: 0 2px 6px rgba(15,23,42,.05);
--nt-shadow: 0 6px 14px rgba(15,23,42,.08);
--nt-gradient-border: linear-gradient(135deg, var(--nt-primary) 0%, var(--nt-primary-strong) 100%);
/* =============================================
Tokens específicos para Plan Cards (Internet / Telefonía)
Centraliza gradientes para reutilización cruzada
============================================= */
--nt-plan-icon-base: linear-gradient(135deg,#6fa4ff,#4f8cff);
--nt-plan-grad-cool: linear-gradient(135deg,#6fa4ff,#336bff);
--nt-plan-grad-warm: linear-gradient(135deg,#ffb347,#ff8a2b);
--nt-plan-grad-indigo: linear-gradient(135deg,#6366f1,#4338ca);
--nt-plan-icon-sheen: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 42%, rgba(255,255,255,0) 70%);
}
/* =============================================
Modo oscuro (activar añadiendo clase .dark al o )
============================================= */
:root.dark {
--nt-bg: #0b121b;
--nt-surface: #101d2b;
--nt-surface-alt: #132435;
--nt-text: #e6f1fb;
--nt-text-muted: #90a4b8;
--nt-primary: #6fa4ff;
--nt-primary-strong: #9bc4ff;
--nt-accent: #ff9a1f;
--nt-ring: rgba(111,164,255,0.35);
--nt-danger: #ff4d4d;
--nt-danger-strong: #ff2f2f;
--nt-hero-overlay: linear-gradient(rgba(5,14,22,.82),rgba(4,12,20,.92));
--nt-hero-gradient-text: linear-gradient(90deg,#78b9ff,#9bc4ff 50%,#c5ddff 90%);
--nt-gradient-border: linear-gradient(135deg, var(--nt-primary-strong) 0%, var(--nt-primary) 100%);
/* Ajustes opcionales (podrían diferir en dark si se requiere más contraste) */
--nt-plan-icon-base: linear-gradient(135deg,#6fa4ff,#4f8cff);
--nt-plan-grad-cool: linear-gradient(135deg,#78b9ff,#4d7dff);
--nt-plan-grad-warm: linear-gradient(135deg,#ffbe63,#ff983d);
--nt-plan-grad-indigo: linear-gradient(135deg,#7a7efb,#4a46d2);
--nt-plan-icon-sheen: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.65) 42%, rgba(255,255,255,0) 70%);
}
/* =============================================
Hero Wrapper Unificado (nt-hero-wrapper)
Aplica estilos base reutilizables para héroes
============================================= */
.nt-hero-wrapper { position:relative; overflow:hidden; }
.nt-hero-wrapper .nt-hero-bg-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.9) saturate(1.05); }
.nt-hero-wrapper .nt-hero-overlay { position:absolute; inset:0; background:var(--nt-hero-overlay); backdrop-filter:saturate(1.2); }
.nt-hero-wrapper .hero-content { position:relative; z-index:10; }
/* Variante clara degradada (para páginas como Internet) */
.nt-hero-wrapper.is-soft { background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.78) 70%,rgba(255,255,255,.95) 100%); }
/* Subtítulos hero sincronizados con animación global */
.nt-hero-sub { font-size:clamp(1rem,1.2vw,1.15rem); color:var(--nt-text-muted); margin-top:.85rem; }
body.dark { background: var(--nt-bg); color: var(--nt-text); }
/* Ajustes componentes en modo oscuro */
.dark .nt-section { background: var(--nt-surface); border-color:#203349; }
.dark .nt-section.inset { background: var(--nt-surface-alt); }
.dark .nt-btn { background: linear-gradient(var(--nt-surface),var(--nt-surface)) padding-box, var(--nt-gradient-border) border-box; }
.dark .nt-btn[data-variant="subtle"] { background: linear-gradient(var(--nt-surface-alt),var(--nt-surface-alt)) padding-box, var(--nt-gradient-border) border-box; color: var(--nt-text-muted); }
.dark .nt-btn:hover { background: linear-gradient(180deg,#16293a,#142433) padding-box, var(--nt-gradient-border) border-box; }
.dark .nt-heading-xl, .dark .nt-heading-lg, .dark .nt-heading-md, .dark .nt-heading-sm { color: var(--nt-text); }
.dark .nt-heading-emphasis.nt-heading-xl { background: var(--nt-hero-gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.dark .nt-badge { box-shadow:0 4px 10px rgba(111,164,255,.25); }
.dark .nt-table th { background: #183149; }
.dark .nt-table td { border-color:#203349; }
.dark .nt-hero-overlay { background: var(--nt-hero-overlay), repeating-radial-gradient(rgba(255,255,255,.08) 0 1px, transparent 1px 18px); }
body {
background: var(--nt-bg);
color: var(--nt-text);
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
/* =============================================
Unified Heading System (.nt-heading)
Every heading can optionally include an icon
Usage: Título
Or via PHP helper nt_heading()
============================================= */
.nt-heading {
font-weight: 800;
line-height: 1.12;
letter-spacing: .3px;
display: inline-flex;
align-items: flex-start;
gap: 1.05rem; /* mayor respiro entre icono y texto */
color: var(--nt-text);
position: relative;
flex-wrap: wrap;
}
.nt-heading i {
color: var(--nt-accent);
font-size: 1.15em;
line-height: 1;
margin-top: .05em;
filter: drop-shadow(0 2px 4px rgba(0,0,0,.08));
}
.nt-heading span.nt-sub {
flex-basis: 100%;
font-weight: 600;
font-size: .58em;
letter-spacing: .5px;
color: var(--nt-text-muted);
margin-top: .35rem;
}
/* Size variants refinados (menor contraste y más consistencia en ritmo vertical) */
.nt-heading-xl { font-size: clamp(1.95rem, 2.8vw, 2.35rem); font-weight: 820; color: #123652; letter-spacing:.2px; }
.nt-heading-lg { font-size: clamp(1.55rem, 2.15vw, 1.85rem); font-weight: 780; color: #174261; }
.nt-heading-md { font-size: clamp(1.28rem, 1.75vw, 1.45rem); font-weight: 760; color: #1c4d6f; }
.nt-heading-sm { font-size: .98rem; font-weight: 690; color: #225b7d; letter-spacing:.25px; }
.nt-heading-emphasis.nt-heading-xl { font-size: clamp(2.05rem,3vw,2.5rem); background: var(--nt-hero-gradient-text); -webkit-background-clip:text; background-clip:text; color:transparent; filter: drop-shadow(0 2px 10px rgba(0,0,0,.28)); }
.nt-heading-emphasis .nt-sub { color:#d9e6ef; }
/* Modo invertido (para fondos oscuros o hero con overlay) */
.nt-heading-invert { color:#f2f7fa !important; text-shadow:0 2px 6px rgba(0,0,0,.45); }
.nt-heading-invert i { color: var(--nt-primary-strong); filter:drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.nt-heading-invert .nt-sub { color:#c4d6e2 !important; }
.nt-heading-invert.nt-heading-emphasis { background:none; -webkit-background-clip:initial; background-clip:initial; color:#ffffff !important; }
/* Hero utility para centralizar y balancear */
.nt-heading-hero { justify-content:center; text-align:center; line-height:1.08; width:100%; }
.nt-heading-hero i { font-size:1.05em; }
.nt-heading-hero .nt-sub { margin-top:.55rem; }
/* Espaciado vertical global refinado para headings y bloques siguientes */
.nt-stack-tight > * + * { margin-top: .75rem; }
.nt-stack > * + * { margin-top: 1.15rem; }
.nt-stack-loose > * + * { margin-top: 1.75rem; }
/* Headings seguidos de párrafo directo: añadir respiro estándar */
.nt-heading + p,
.nt-heading-hero + p,
.nt-heading-accent-bar + p { margin-top: .9rem; }
/* Ajustar line-height de headings largos para evitar compresión visual */
.nt-heading-xl, .nt-heading-hero { line-height:1.12; }
@media (min-width:900px){
.nt-heading-xl, .nt-heading-hero { line-height:1.15; }
}
/* Hero wrapper espaciado vertical unificado */
.nt-hero-wrapper { padding-top: 150px; padding-bottom: 70px; }
@media (min-width:900px){
.nt-hero-wrapper { padding-top: 170px; padding-bottom: 90px; }
}
/* Variante compacta opcional */
.nt-hero-wrapper.is-compact { padding-top:120px; padding-bottom:60px; }
/* Eliminar inline styles dispersos posteriormente */
/* Hero subtitle base */
.nt-hero-sub { color: var(--nt-text-muted); line-height:1.5; font-weight:500; }
/* Variante invertida para fondos oscuros/mixtos */
.nt-hero-sub-invert { color:#e4eef5; text-shadow:0 2px 6px rgba(0,0,0,.45); }
@media (prefers-color-scheme: dark) {
.nt-hero-sub-invert { color:#d8e7f0; }
}
/* Subtle animation base (opt-in) */
.nt-heading-anim { opacity:0; transform: translateY(34px) scale(.955); transition: opacity 1.35s cubic-bezier(.22,.95,.3,1), transform 1.35s cubic-bezier(.22,.95,.3,1); will-change: opacity, transform; }
.nt-heading-anim.is-visible { opacity:1; transform: translateY(0) scale(1); }
/* Retardos ampliados para percepción más clara (versión extendida) */
.nt-heading-anim.delay-sm { transition-delay:.38s; }
.nt-heading-anim.delay-md { transition-delay:.78s; }
.nt-heading-anim.delay-lg { transition-delay:1.18s; }
/* Secuencias encadenadas (más espaciadas) */
.nt-heading-anim.delay-chain-1 { transition-delay:.25s; }
.nt-heading-anim.delay-chain-2 { transition-delay:.55s; }
.nt-heading-anim.delay-chain-3 { transition-delay:.85s; }
.nt-heading-anim.delay-chain-4 { transition-delay:1.15s; }
/* Decorative underline opt-in */
/* Subrayado decorativo eliminado para un look más limpio (antes: .nt-heading.underline::after) */
/* Variante sutil opcional: barra/acento ligero */
.nt-heading-accent-bar { padding-bottom:.35rem; }
.nt-heading-accent-bar::after {
content:""; position:absolute; left:0; bottom:-2px; height:3px; width:44px; border-radius:2px;
background: linear-gradient(90deg,var(--nt-primary) 0%, var(--nt-primary-strong) 70%);
opacity:.55; pointer-events:none;
}
/* Ajustes por tamaño */
.nt-heading-sm.nt-heading-accent-bar::after { width:34px; height:2px; }
.nt-heading-xl.nt-heading-accent-bar::after { width:54px; }
/* Centrado automático cuando es hero */
.nt-heading-hero.nt-heading-accent-bar::after { left:50%; transform:translateX(-50%); }
/* Invertida sobre fondo oscuro */
.nt-heading-invert.nt-heading-accent-bar::after { background:linear-gradient(90deg,rgba(255,255,255,.9),rgba(255,255,255,.55)); opacity:.9; }
/* Variante ultra sutil (hairline) para headings pequeños o contextos donde se necesita un acento mínimo */
.nt-heading-accent-hairline { padding-bottom:.28rem; }
.nt-heading-accent-hairline::after {
content:""; position:absolute; left:0; bottom:-2px; height:1px; width:42px; border-radius:1px;
background: linear-gradient(90deg, var(--nt-text-muted) 0%, var(--nt-primary) 90%);
opacity:.4; pointer-events:none;
}
.nt-heading-sm.nt-heading-accent-hairline::after { width:36px; }
.nt-heading-xl.nt-heading-accent-hairline::after { width:50px; }
.nt-heading-hero.nt-heading-accent-hairline::after { left:50%; transform:translateX(-50%); }
.nt-heading-invert.nt-heading-accent-hairline::after { background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,.25)); opacity:.7; }
/* =============================================
Unified Button System (.nt-btn)
Usage: Texto
Variants: primary, outline, subtle, danger
============================================= */
.nt-btn {
--_border: var(--nt-gradient-border);
position: relative;
display:inline-flex;
align-items:center;
gap:.55rem;
font-weight:800;
padding:.75rem 1.1rem;
border-radius: var(--nt-radius);
text-decoration:none;
line-height:1.1;
background: linear-gradient(#fff,#fff) padding-box, var(--_border) border-box;
border:1px solid transparent;
color: var(--nt-primary-strong);
box-shadow: var(--nt-shadow-sm);
transition: background .6s ease, transform .18s ease, box-shadow .25s ease, color .2s ease;
font-size:.95rem;
cursor:pointer;
}
.nt-btn i { margin-right:.05rem; }
.nt-btn i { font-size:1.05rem; color: var(--nt-primary-strong); }
.nt-btn:hover {
transform: translateY(-2px);
background: linear-gradient(180deg,#eef5ff,#e5efff) padding-box, var(--_border) border-box;
box-shadow: var(--nt-shadow);
}
.nt-btn:active { transform: translateY(0); }
.nt-btn[data-variant="subtle"] {
--_border: linear-gradient(135deg,#dbe9ff,#cfe2ff);
background: linear-gradient(var(--nt-surface-alt), var(--nt-surface-alt)) padding-box, var(--_border) border-box;
color: var(--nt-text-muted);
}
.nt-btn[data-variant="subtle"] i { color: var(--nt-accent); }
.nt-btn[data-variant="outline"],
.nt-btn.nt-btn-outline {
background: linear-gradient(var(--nt-bg), var(--nt-bg)) padding-box, var(--_border) border-box;
color: var(--nt-primary-strong);
}
.nt-btn[data-variant="danger"],
.nt-btn.nt-btn-danger {
--_border: linear-gradient(135deg,var(--nt-danger) 0%, var(--nt-danger-strong) 100%);
color: var(--nt-danger-strong);
}
.nt-btn[data-variant="danger"] i, .nt-btn.nt-btn-danger i { color: var(--nt-danger-strong); }
/* Primary alias classes for legacy markup */
.nt-btn.nt-btn-primary { /* explicit primary accent */ color: var(--nt-primary-strong); }
.nt-btn.nt-btn-accent { --_border: linear-gradient(135deg,var(--nt-accent) 0%, #ffb347 100%); color: var(--nt-accent); }
.nt-btn.nt-btn-dark { --_border: linear-gradient(135deg,#0f172a,#1e293b); background: linear-gradient(#0f172a,#1e293b) padding-box, var(--_border) border-box; color:#fff; }
.nt-btn.nt-btn-dark i { color:#fff; }
.nt-btn.nt-btn-outline i { color: var(--nt-primary-strong); }
/* Tabs / toggles active state support */
.nt-tab-active { box-shadow: var(--nt-shadow); transform:translateY(-2px); }
.nt-tab-active.nt-btn-outline { background: linear-gradient(#fff,#fff) padding-box,var(--nt-gradient-border) border-box; }
/* Table header utility for unified style */
.nt-table-head { background: linear-gradient(90deg,#1d4b74,#236291); color:#fff; }
/* Hero overlay helper */
.nt-hero-overlay { background: var(--nt-hero-overlay), repeating-radial-gradient(rgba(255,255,255,.12) 0 1px, transparent 1px 16px); }
/* Soporte para estructura de héroe unificada */
.nt-hero-wrapper { position:relative; overflow:hidden; }
.nt-hero-bg-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.nt-hero-overlay { position:absolute; inset:0; z-index:-1; }
/* Altura mínima del hero controlada por padding superior/inferior; se elimina forzado global de 100vh para evitar cortes y solapes */
/* Increase visual strength for primary on hover */
.nt-btn.nt-btn-primary:hover { background: linear-gradient(180deg,#eef5ff,#e0edff) padding-box, var(--_border) border-box; }
.nt-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--nt-ring), var(--nt-shadow); }
/* Icon-only button modifier */
.nt-btn.icon-only { padding:.65rem .7rem; }
.nt-btn.icon-only i { font-size:1.15rem; }
/* Button group */
.nt-btn-group { display:inline-flex; gap:.5rem; flex-wrap:wrap; }
/* =============================================
Section Card Wrapper (.nt-section)
============================================= */
.nt-section {
background: var(--nt-surface);
border:1px solid #e7edf6;
border-radius: var(--nt-radius-lg);
padding:1.6rem 1.6rem 1.4rem;
margin:0 0 2.2rem;
box-shadow: 0 7px 16px rgba(15,23,42,.055);
position:relative;
}
.nt-section.inset { background: var(--nt-surface-alt); }
/* =============================================
Text utilities
============================================= */
.nt-text-muted { color: var(--nt-text-muted) !important; }
.nt-lead { font-size:1.05rem; line-height:1.65; color: var(--nt-text-muted); }
/* Legacy button upgrade helper (apply class nt-btn directly in markup) */
.btn-primary.nt-upgraded, .btn.nt-upgraded {
display:inline-flex; align-items:center; gap:.5rem; font-weight:800; border-radius: var(--nt-radius); background: linear-gradient(#fff,#fff) padding-box, var(--nt-gradient-border) border-box; border:1px solid transparent; color: var(--nt-primary-strong); padding:.7rem 1rem; text-decoration:none; box-shadow: var(--nt-shadow-sm); }
/* =============================================
Heading Auto Icon Utility: add icon via data-icon
============================================= */
[data-nt-icon]:before {
content: attr(data-nt-icon); /* fallback textual icon if using emoji */
display:inline-flex; align-items:center; justify-content:center; margin-right:.55rem; font-weight:700; color: var(--nt-accent);
}
/* =============================================
Smooth fade for any element using .nt-fade-in
============================================= */
.nt-fade-in { opacity:0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.nt-fade-in.visible { opacity:1; transform: translateY(0); }
/* =============================================
Global icon tone override
============================================= */
.nt-icon-accent { color: var(--nt-accent) !important; }
/* =============================================
Table (future standardization placeholder)
============================================= */
.nt-table { width:100%; border-collapse: collapse; font-size:.9rem; }
.nt-table th { text-align:left; font-weight:700; padding:.65rem .75rem; background: var(--nt-surface-alt); }
.nt-table td { padding:.6rem .75rem; border-top:1px solid #e7edf6; }
.nt-table tbody tr:hover { background: #f4f8ff; }
/* =============================================
Badge helper
============================================= */
.nt-badge { display:inline-flex; align-items:center; gap:.35rem; background: linear-gradient(180deg,var(--nt-primary),var(--nt-primary-strong)); color:#fff; font-size:.65rem; text-transform:uppercase; letter-spacing:.7px; padding:.28rem .55rem; border-radius: var(--nt-radius); font-weight:800; box-shadow:0 4px 10px var(--nt-ring); }
.nt-badge-success { background: linear-gradient(180deg,var(--nt-success),var(--nt-success-strong)); }
.nt-badge-warning { background: linear-gradient(180deg,var(--nt-warning),var(--nt-warning-strong)); }
.nt-badge-danger { background: linear-gradient(180deg,var(--nt-danger),var(--nt-danger-strong)); }
.nt-badge-info { background: linear-gradient(180deg,var(--nt-info),var(--nt-info-strong)); }
/* =============================================
Alertas contextuales
============================================= */
.nt-alert { position:relative; display:flex; align-items:flex-start; gap:.75rem; padding:.85rem 1rem; border:1px solid #e0e8f2; border-radius: var(--nt-radius); background: var(--nt-surface-alt); font-size:.9rem; line-height:1.4; box-shadow: var(--nt-shadow-sm); }
.nt-alert.nt-alert-emph { border:1px solid transparent; background:linear-gradient(var(--nt-surface),var(--nt-surface)) padding-box, var(--nt-gradient-border) border-box; box-shadow:0 8px 22px -6px rgba(15,23,42,.25),0 2px 6px rgba(15,23,42,.08); }
.nt-alert i { font-size:1.1rem; margin-top:.15rem; }
.nt-alert strong { font-weight:700; }
.nt-alert-info { border-color: rgba(59,130,246,.35); background: rgba(59,130,246,.08); color:#0f3f76; }
.nt-alert-success { border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.10); color:#0f5229; }
.nt-alert-warning { border-color: rgba(245,158,11,.45); background: rgba(245,158,11,.15); color:#7a4603; }
.nt-alert-danger { border-color: rgba(255,75,75,.45); background: rgba(255,67,67,.12); color:#6e1212; }
.dark .nt-alert { border-color:#203349; background:#16293a; }
.dark .nt-alert-info { background: rgba(59,130,246,.18); color:#bcd8ff; }
.dark .nt-alert-success { background: rgba(34,197,94,.2); color:#b5f5cd; }
.dark .nt-alert-warning { background: rgba(245,158,11,.25); color:#ffdca7; }
.dark .nt-alert-danger { background: rgba(255,82,82,.22); color:#ffb9b9; }
/* =============================================
Timeline reutilizable (.nt-timeline)
============================================= */
.nt-timeline { position:relative; }
.nt-timeline-track { position:relative; margin:2rem 0 0; padding-left:1.75rem; border-left:4px solid #e0e8f2; }
.nt-timeline-item { position:relative; margin:0 0 2.2rem; display:flex; gap:1.2rem; }
.nt-timeline-badge { position:absolute; left:-2.25rem; top:.15rem; width:2.6rem; height:2.6rem; background: linear-gradient(180deg,var(--nt-primary),var(--nt-primary-strong)); color:#fff; font-weight:800; font-size:.78rem; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 14px rgba(15,23,42,.15); }
.nt-timeline-content { background: var(--nt-surface); border:1px solid #e7edf6; border-radius: var(--nt-radius-lg); padding:1rem 1.15rem 1rem; box-shadow: var(--nt-shadow-sm); flex:1; }
.nt-timeline-title { font-size:1rem; font-weight:700; margin:0 0 .35rem; letter-spacing:.3px; color: var(--nt-text); }
.nt-timeline-text { font-size:.85rem; line-height:1.5; color: var(--nt-text-muted); margin:0; }
.dark .nt-timeline-track { border-color:#203349; }
.dark .nt-timeline-content { background: var(--nt-surface-alt); border-color:#203349; }
.dark .nt-timeline-badge { box-shadow:0 6px 16px rgba(0,0,0,.4); }
/* =============================================
CTA highlight pulse reused globally
============================================= */
@keyframes ntPulse { 0% { box-shadow:0 0 0 0 rgba(111,164,255,.6);} 70% { box-shadow:0 0 0 16px rgba(111,164,255,0);} 100% { box-shadow:0 0 0 0 rgba(111,164,255,0);} }
.nt-pulse { animation: ntPulse 1s ease 2; }
/* =============================================
Animación global para sheen de íconos de planes
(aplicada en archivos específicos usando ntIconSheen)
============================================= */
@keyframes ntIconSheen { 0%{ transform:translateX(-65%);} 55%{ transform:translateX(65%);} 100%{ transform:translateX(65%);} }
/* =============================================
Form elements (inputs, textareas, groups)
============================================= */
.nt-form { display:grid; gap:1.1rem; }
.nt-form-row { display:flex; flex-wrap:wrap; gap:1rem; }
.nt-field { width:100%; display:flex; flex-direction:column; gap:.4rem; }
.nt-field label { font-weight:700; font-size:.85rem; letter-spacing:.4px; color: var(--nt-text); }
.nt-input, .nt-textarea, .nt-select {
width:100%; border:1px solid #e0e8f2; border-radius:10px; padding:.7rem .85rem; background:#fff; font:inherit; color: var(--nt-text);
box-shadow: 0 1px 2px rgba(15,23,42,.04);
transition: border-color .18s ease, box-shadow .18s ease, background .3s ease;
}
.nt-input:focus, .nt-textarea:focus, .nt-select:focus { outline:none; border-color: var(--nt-primary-strong); box-shadow: 0 0 0 4px var(--nt-ring); }
.nt-input.error { border-color: var(--nt-danger-strong); box-shadow: 0 0 0 4px rgba(255,61,61,.25); }
.nt-input[disabled] { background:#f2f5f9; color:#94a3b8; cursor:not-allowed; }
.nt-help { font-size:.7rem; color: var(--nt-text-muted); letter-spacing:.4px; }
.nt-inline { display:flex; align-items:center; gap:.55rem; }
/* Input with leading icon wrapper */
.nt-input-icon { position:relative; }
.nt-input-icon i { position:absolute; left:.9rem; top:50%; transform:translateY(-50%); color: var(--nt-text-muted); font-size:.95rem; }
.nt-input-icon .nt-input { padding-left:2.4rem; }
/* ================================
Menú principal (links y hover)
================================ */
.menu-link {
position: relative;
transition: color 0.3s;
color: #1E3A8A; /* Azul oscuro */
text-transform: capitalize; /* Capitaliza primera letra de cada palabra */
}
.menu-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -2px;
left: 0;
background-color: #2563EB;
transition: width 0.3s;
}
.menu-link:hover {
color: #2563EB;
}
.menu-link:hover::after {
width: 100%;
}
.menu-link.active {
color: #1D4ED8;
}
.menu-link.active::after {
width: 100%;
background-color: #1D4ED8;
}
/* ================================
Submenús y multinivel (desktop)
================================ */
nav .group {
position: relative;
}
nav .group > ul {
position: absolute;
top: 100%;
left: 0;
display: block;
opacity: 0;
transform: translateY(10px);
transition: all 0.3s ease;
pointer-events: none;
min-width: 220px;
z-index: 50;
background-color: white;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
padding: 0.5rem 0;
}
nav .group:hover > ul,
nav .group ul:hover {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
nav .group ul ul {
top: 0;
left: 100%;
transform: translateX(10px);
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
min-width: 200px;
background-color: white;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
padding: 0.5rem 0;
z-index: 60;
}
nav .group ul li:hover > ul {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}
nav .group ul li a {
display: flex;
gap: 0.5rem;
padding: 0.5rem 1rem;
color: #1E3A8A;
white-space: nowrap;
transition: background-color 0.3s, color 0.3s;
text-transform: capitalize;
}
nav .group ul li a:hover {
color: #2563EB;
background-color: rgba(37, 99, 235, 0.05);
}
/* ================================
Sub-menú toggle (móvil)
================================ */
.sub-menu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.sub-menu.open {
max-height: 500px; /* suficiente para contenido */
}
/* ================================
Hero padding según header
================================ */
#hero {
padding-top: 120px;
}
@media (max-width: 1024px) {
#hero {
padding-top: 160px;
}
}
/* ================================
Botones generales
================================ */
button, .btn {
font-family: 'Inter', 'Roboto', sans-serif;
font-weight: 600;
background-color: #2563EB;
color: white;
transition: background-color 0.3s, transform 0.3s;
}
button:hover, .btn:hover {
background-color: #1D4ED8;
transform: translateY(-2px);
}
/* ================================
Iconos sociales (footer)
================================ */
.social-icon {
transition: transform 0.3s, color 0.3s;
}
.social-icon:hover {
transform: translateY(-5px) scale(1.2);
color: #2563EB;
}
/* ================================
Sobrescribir colores Tailwind usados
================================ */
.bg-blue-600 {
background-color: #1677a6 !important;
}
.bg-blue-700 {
background-color: #145e85 !important;
}
.text-blue-500 {
color: #1677a6;
}
.text-blue-600 {
color: #1677a6;
}
.text-blue-700 {
color: #1677a6;
}
/* =============================================
Gestor Global de Animaciones (NTAnim)
- Modos: full | performance | off
- Clases utilitarias para revelar y blur inicial
============================================= */
body.nt-anim-prep * { transition:none !important; }
body.nt-anim-prep { filter:blur(3px); opacity:.85; }
@media (prefers-reduced-motion: reduce){ body.nt-anim-prep { filter:none; opacity:1; } }
/* Cuando un modal está abierto, no aplicar blur global al body */
body.nt-modal-open { filter: none !important; opacity: 1 !important; }
/* Asegurar nitidez del contenido del modal ante filtros heredados del body */
body.nt-modal-open .nt-modal,
body.nt-modal-open .internet-modal,
body.nt-modal-open .internet-modal-dialog { filter: none !important; }
/* Estado inicial para elementos animables (se aplicará vía data-nt-anim o clases existentes) */
[data-nt-anim], .nt-soft-seq { opacity:0; transform: translateY(26px) scale(.985); }
body[data-anim-mode="off"] [data-nt-anim], body[data-anim-mode="off"] .nt-soft-seq { opacity:1 !important; transform:none !important; animation:none !important; transition:none !important; }
/* Reveals suaves reutilizables */
@keyframes ntSoftRevealGlobal { 0% { opacity:0; transform: translateY(26px) scale(.985); filter:blur(4px); } 65% { filter:blur(0); } 100% { opacity:1; transform: translateY(0) scale(1); } }
.nt-anim-soft-in { animation: ntSoftRevealGlobal .95s cubic-bezier(.22,.95,.31,1) forwards; }
/* Micro loop opcional para íconos (aplicado sólo en modo full) */
@keyframes ntIconDrift { 0% { transform: translate3d(0,0,0) rotate(0deg); } 40% { transform: translate3d(2px,-3px,0) rotate(-2.5deg); } 70% { transform: translate3d(-2px,2px,0) rotate(1.8deg); } 100% { transform: translate3d(0,0,0) rotate(0deg); } }
[data-nt-icon-drift] { will-change: transform; }
body[data-anim-mode="full"] [data-nt-icon-drift] { animation: ntIconDrift 12.5s ease-in-out infinite; animation-delay: var(--nt-icon-drift-delay,0s); }
body[data-anim-mode="performance"] [data-nt-icon-drift] { animation: ntIconDrift 18s ease-in-out infinite; animation-delay: var(--nt-icon-drift-delay,0s); }
body[data-anim-mode="off"] [data-nt-icon-drift] { animation:none !important; }
/* Reduce motion respect */
@media (prefers-reduced-motion: reduce){ body[data-anim-mode] [data-nt-icon-drift]{ animation:none !important; } }
/* =============================================
Modal UI (internet modal + nombre modal)
Estilos unificados para backdrops y cajas de diálogo
============================================= */
.internet-modal-backdrop,
#nombre-modal-backdrop.internet-modal {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(15,23,42,.55);
/* Fondo plano, sin blur */
backdrop-filter: none;
z-index: 9999;
}
.nt-modal-backdrop {
position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
background: rgba(15,23,42,.55); /* Fondo plano, sin blur */ backdrop-filter: none; z-index: 9999;
}
.nt-modal-backdrop.is-open { display: flex; }
.nt-modal {
background: #fff; border: 1px solid #e2edf9; border-radius: 14px;
width: min(92vw, 560px); max-width: 560px; padding: 1rem 1rem 1.1rem; position: relative;
box-shadow: 0 18px 40px -10px rgba(15,23,42,.28), 0 4px 12px rgba(15,23,42,.12);
}
.nt-modal-title { margin: 0; font-weight: 800; color: var(--nt-text); letter-spacing: .2px; }
.nt-modal-sub { margin: .35rem 0 0; color: var(--nt-text-muted); font-size: .9rem; line-height: 1.45; }
.nt-modal-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .25rem; }
.nt-modal-close { position: absolute; top: .6rem; right: .6rem; width: 2rem; height: 2rem; border-radius: 999px; border: 1px solid #e2edf9; background: #fff; color: #0f172a; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(15,23,42,.05); cursor: pointer; transition: transform .15s ease, background .2s ease; }
.nt-modal-close:hover { transform: translateY(-2px); background: #f8fafc; }
.nt-modal-close:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--nt-ring); }
/* Caja de diálogo (dos variantes en el DOM) */
.internet-modal,
.internet-modal-dialog {
background: var(--nt-surface);
border: 1px solid #e2edf9;
border-radius: 14px;
box-shadow: 0 18px 40px -10px rgba(15,23,42,.28), 0 4px 12px rgba(15,23,42,.12);
width: min(92vw, 520px);
max-width: 520px;
padding: 1rem 1rem 1.1rem;
position: relative;
}
/* Encabezado y textos del modal */
.modal-header { margin-bottom: .65rem; }
.modal-header h3, .modal-title { margin: 0; font-weight: 800; color: var(--nt-text); letter-spacing: .2px; }
.modal-subtitle, .modal-desc { margin: .35rem 0 0; color: var(--nt-text-muted); font-size: .9rem; line-height: 1.45; }
/* Cuerpo y campos */
.modal-body { display: grid; gap: .8rem; }
.form-field { display: grid; gap: .35rem; }
.form-field label, .modal-label { font-weight: 700; color: var(--nt-text); font-size: .85rem; letter-spacing: .3px; }
.form-field input[type="text"],
.form-field input[type="tel"],
.modal-input {
width: 100%;
border: 1px solid #e0e8f2;
border-radius: 10px;
padding: .7rem .85rem;
background: #fff;
color: var(--nt-text);
box-shadow: 0 1px 2px rgba(15,23,42,.04);
transition: border-color .18s ease, box-shadow .18s ease, background .3s ease;
font: inherit;
}
.form-field input:focus,
.modal-input:focus { outline: none; border-color: var(--nt-primary-strong); box-shadow: 0 0 0 4px var(--nt-ring); }
/* Mensaje de error del modal */
#cliente-login-error { border-radius: 10px; }
/* Acciones */
.modal-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .25rem; }
/* Botón de cierre (esquina) */
.modal-close {
position: absolute; top: .6rem; right: .6rem;
width: 2rem; height: 2rem; border-radius: 999px;
border: 1px solid #e2edf9; background: #fff; color: #0f172a;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 1px 2px rgba(15,23,42,.05);
cursor: pointer;
transition: transform .15s ease, background .2s ease;
}
.modal-close:hover { transform: translateY(-2px); background: #f8fafc; }
.modal-close:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--nt-ring); }
/* Botones primario/secundario del modal (marcado existente) */
.btn-primario, .btn.btn-primary {
background: linear-gradient(#fff,#fff) padding-box, var(--nt-gradient-border) border-box;
color: var(--nt-primary-strong);
border: 1px solid transparent;
font-weight: 800; letter-spacing: .4px;
padding: .6rem .9rem; border-radius: 10px; cursor: pointer;
box-shadow: var(--nt-shadow-sm);
}
.btn-primario:hover, .btn.btn-primary:hover { background: linear-gradient(180deg,#eef5ff,#e5efff) padding-box, var(--nt-gradient-border) border-box; }
.btn-secundario, .btn.btn-secondary {
background: linear-gradient(#f8fbff,#f8fbff) padding-box, linear-gradient(135deg,#dbe9ff,#cfe2ff) border-box;
color: #0f172a; border: 1px solid transparent;
font-weight: 700; letter-spacing: .3px;
padding: .6rem .9rem; border-radius: 10px; cursor: pointer;
}
.btn-secundario:hover, .btn.btn-secondary:hover { background: linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg,#dbe9ff,#cfe2ff) border-box; }
/* Estado de carga en submit */
.is-loading { opacity: .75; pointer-events: none; }
/* Modal abierto: sin blur en el sitio para evitar que el contenido del modal (si está dentro de main) se vea afectado */
body.nt-modal-open main, body.nt-modal-open header, body.nt-modal-open footer { filter: none !important; }