/* ========================================================================== METROL — Componentes: header, footer, WhatsApp flotante, tarjetas, formularios ========================================================================== */ /* ---------- Fallback de navegación sin JavaScript (ver components.js) ---------- Mejora progresiva real: el fallback estático (.no-js-nav) es visible por defecto en #site-header/#site-footer. Cada contenedor lo oculta SOLO cuando ÉL MISMO terminó de construir su navegación dinámica con éxito — es components.js (renderHeader/renderFooter), no un script inline en , quien agrega "js-nav-ready" a header/footer, y solo después de un try/catch exitoso. Si components.js no carga, falla, o un adblocker lo bloquea, esa clase nunca se agrega y el fallback permanece visible: nunca depende de que JS "exista", sino de que la navegación real haya funcionado. */ #site-header .no-js-nav, #site-footer .no-js-nav{ display:block; } #site-header.js-nav-ready .no-js-nav, #site-footer.js-nav-ready .no-js-nav{ display:none; } .no-js-nav a{ color: inherit; text-decoration: underline; margin-right: 14px; } header .no-js-nav{ padding: 14px 20px; } footer .no-js-nav{ padding: 24px 20px; } /* ---------- Header ---------- */ .site-header{ position: fixed; top:0; left:0; right:0; z-index:200; background: rgba(255,255,255,.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow-sm); transition: background var(--transition), box-shadow var(--transition); transform: translateY(-100%); animation: header-drop 640ms var(--ease-out-expo) 80ms forwards; } @keyframes header-drop{ to{ transform: translateY(0); } } @media (prefers-reduced-motion: reduce){ .site-header{ animation:none; transform:none; } } .site-header.scrolled{ box-shadow: var(--shadow-md); } .site-header.scrolled .header-inner{ height: var(--header-h-scrolled); } .site-header.scrolled .brand-logo{ height:52px; } /* Barra de progreso de scroll */ .header-progress{ position:absolute; left:0; bottom:0; height:2px; width:0%; background: linear-gradient(90deg, var(--color-accent), var(--color-primary)); transition: width 100ms linear; pointer-events:none; } .topbar{ background: var(--color-surface); color: var(--color-muted); font-size: 12.5px; border-bottom: 1px solid var(--color-border); overflow: hidden; transition: max-height var(--transition), opacity var(--transition); max-height: 36px; } .site-header.scrolled .topbar{ max-height:0; opacity:0; border-bottom-color: transparent; } .topbar-inner{ display:flex; justify-content:space-between; align-items:center; padding: 7px 24px; } .topbar-info a{ color: var(--color-secondary-dark); margin-right:10px; } .topbar-info a:hover{ color: var(--color-accent); } .topbar-sep{ opacity:.5; margin: 0 6px; } .topbar-social{ display:flex; gap:14px; } .topbar-social a{ display:flex; align-items:center; color: var(--color-secondary-dark); font-size:11px; letter-spacing:.06em; opacity:.85; } .topbar-social a:hover{ opacity:1; color: var(--color-accent); } .header-inner{ display:flex; align-items:center; justify-content:space-between; height: var(--header-h); transition: height var(--transition); max-width: 1600px; margin: 0 auto; padding: 0 24px; } .header-left{ display:flex; align-items:center; gap: 32px; min-width:0; } .brand{ display:flex; align-items:center; flex-shrink:0; } .brand-logo{ height: 70px; width:auto; object-fit:contain; transition: height var(--transition), transform 420ms var(--ease-out-expo); } .brand:hover .brand-logo{ transform: scale(1.045) rotate(-1deg); } @media (max-width: 1440px){ .header-left{ gap:22px; } } .main-nav ul{ display:flex; gap: 0; align-items:center; position:relative; } .main-nav > ul > li{ position:relative; } .nav-highlight{ position:absolute; top:0; left:0; height:100%; width:0; background: rgba(27,59,140,.07); border-radius: var(--radius-sm); transform: translateX(0); opacity:0; pointer-events:none; z-index:0; transition: transform 320ms var(--ease-out-expo), width 320ms var(--ease-out-expo), opacity 180ms; } .main-nav.nav-hovering .nav-highlight{ opacity:1; } .main-nav > ul > li > a{ position:relative; z-index:1; white-space:nowrap; display:flex; align-items:center; gap:6px; padding: 10px 14px; border-radius: var(--radius-sm); font-family: var(--font-display); font-weight:600; font-size:.88rem; color: var(--color-secondary-dark); transition: color var(--transition); } .main-nav > ul > li > a::after{ content:""; position:absolute; left:11px; right:11px; bottom:4px; height:2px; background: var(--color-accent); border-radius:2px; transform: scaleX(0); transform-origin:left; transition: transform var(--transition); } .main-nav > ul > li > a:hover{ color: var(--color-primary); } .main-nav > ul > li > a:hover::after{ transform: scaleX(1); } .main-nav > ul > li.active > a{ color: var(--color-primary); } .main-nav > ul > li.active > a::after{ transform: scaleX(1); } /* ---------- Dropdown de Certificación (desktop) ---------- */ .main-nav > ul > li.has-dropdown > a{ padding-right:10px; } .nav-caret{ transition: transform var(--transition); flex-shrink:0; } .main-nav > ul > li.has-dropdown:hover .nav-caret, .main-nav > ul > li.has-dropdown.dropdown-open .nav-caret{ transform: rotate(180deg); } .nav-dropdown{ position:absolute; top:100%; left:50%; transform: translate(-50%, 6px) scale(.96); min-width: 320px; padding-top:14px; opacity:0; visibility:hidden; pointer-events:none; transition: opacity 260ms cubic-bezier(.2,1,.3,1), transform 320ms cubic-bezier(.2,1,.3,1), visibility 260ms; z-index: 210; } .nav-dropdown::before{ content:""; position:absolute; top:8px; left:50%; transform: translateX(-50%) rotate(45deg); width:12px; height:12px; background:#fff; border-left:1px solid var(--color-border); border-top:1px solid var(--color-border); z-index:1; } .main-nav > ul > li.has-dropdown:hover .nav-dropdown, .main-nav > ul > li.has-dropdown.dropdown-open .nav-dropdown{ opacity:1; visibility:visible; pointer-events:auto; transform: translate(-50%, 0) scale(1); } .nav-dropdown ul{ display:grid; grid-template-columns: 1fr; gap:2px; flex-direction:column; align-items:stretch; background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding:10px; position:relative; } .nav-dropdown-title{ display:block; background:#fff; border:1px solid var(--color-border); border-bottom:none; border-radius: var(--radius-md) var(--radius-md) 0 0; padding:10px 14px 6px; font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: var(--color-muted); position:relative; margin-top:0; } .nav-dropdown-title + ul{ border-radius: 0 0 var(--radius-md) var(--radius-md); margin-top:-1px; } .nav-dropdown li{ position:static; } .nav-dropdown a{ display:flex; align-items:center; gap:10px; padding: 11px 14px; border-radius: var(--radius-sm); font-family: var(--font-body); font-weight:600; font-size:.86rem; color: var(--color-secondary-dark); white-space:nowrap; transition: background var(--transition), color var(--transition), transform var(--transition); } .nav-dropdown a::before{ content:""; width:6px; height:6px; border-radius:50%; background: var(--color-accent); opacity:.4; flex-shrink:0; transition: opacity var(--transition), transform var(--transition); } .nav-dropdown a:hover{ background: rgba(27,59,140,.07); color: var(--color-primary); transform: translateX(3px); } .nav-dropdown a:hover::before{ opacity:1; transform: scale(1.3); } .nav-dropdown a[aria-current="page"]{ color: var(--color-primary); background: rgba(27,59,140,.06); } .nav-dropdown li{ opacity:0; transform: translateY(-6px); transition: opacity 260ms ease, transform 260ms ease; } .main-nav > ul > li.has-dropdown:hover .nav-dropdown li, .main-nav > ul > li.has-dropdown.dropdown-open .nav-dropdown li{ opacity:1; transform:none; } .nav-dropdown li:nth-child(1){ transition-delay:20ms; } .nav-dropdown li:nth-child(2){ transition-delay:40ms; } .nav-dropdown li:nth-child(3){ transition-delay:60ms; } .nav-dropdown li:nth-child(4){ transition-delay:80ms; } .nav-dropdown li:nth-child(5){ transition-delay:100ms; } .nav-dropdown li:nth-child(6){ transition-delay:120ms; } .nav-dropdown li:nth-child(7){ transition-delay:140ms; } .nav-dropdown li:nth-child(8){ transition-delay:160ms; } .nav-dropdown li:nth-child(9){ transition-delay:180ms; } .header-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; } .header-wa{ display:none; } @media (min-width: 1320px){ .header-wa{ display:inline-flex; } } .header-actions .btn-primary{ overflow:hidden; } .header-actions .btn-primary::before{ content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%); transform: translateX(-120%); transition: transform 650ms var(--ease-out-expo); } .header-actions .btn-primary:hover::before{ transform: translateX(120%); } .menu-toggle{ display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:44px; height:44px; background:transparent; border:1px solid var(--color-border); border-radius: var(--radius-sm); transition: border-color var(--transition), background var(--transition); } .menu-toggle:hover{ border-color: var(--color-primary); } .menu-toggle span{ display:block; height:2px; width:20px; background: var(--color-secondary-dark); transition: transform var(--transition), opacity var(--transition); } .menu-toggle.is-active span:nth-child(1){ transform: translateY(7px) rotate(45deg); } .menu-toggle.is-active span:nth-child(2){ opacity:0; } .menu-toggle.is-active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } @media (min-width: 1320px){ .menu-toggle{ display:none; } } @media (max-width: 1319px){ .main-nav{ display:none; } } /* ---------- Menú móvil: panel de pantalla completa premium ---------- */ .mobile-nav{ position: fixed; inset: 0; z-index: 190; background: linear-gradient(160deg, #fff 0%, var(--color-surface) 100%); visibility:hidden; opacity:0; transition: opacity var(--transition-slow), visibility var(--transition-slow); display:flex; flex-direction:column; } .mobile-nav.open{ visibility:visible; opacity:1; } .mobile-nav::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.6; background-image: linear-gradient(rgba(27,59,140,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(27,59,140,.05) 1px, transparent 1px); background-size: 36px 36px; mask-image: radial-gradient(ellipse at 100% 0%, #000 0%, transparent 70%); } .mobile-nav-head{ display:flex; align-items:center; justify-content:space-between; padding: 20px 24px; border-bottom:1px solid var(--color-border); position:relative; z-index:1; } .mobile-nav-head img{ height:40px; } .mobile-nav-close{ width:44px; height:44px; border-radius: var(--radius-sm); border:1px solid var(--color-border); background:#fff; position:relative; } .mobile-nav-close::before, .mobile-nav-close::after{ content:""; position:absolute; top:50%; left:50%; width:18px; height:2px; background: var(--color-secondary-dark); } .mobile-nav-close::before{ transform: translate(-50%,-50%) rotate(45deg); } .mobile-nav-close::after{ transform: translate(-50%,-50%) rotate(-45deg); } .mobile-nav-body{ flex:1; overflow-y:auto; padding: 20px 24px 32px; position:relative; z-index:1; } .mobile-nav-body > ul > li{ border-bottom:1px solid var(--color-border); } .mobile-nav-body a{ font-family: var(--font-display); font-weight:700; font-size:1.3rem; } .mobile-nav-row{ display:flex; justify-content:space-between; align-items:center; padding: 16px 0; } .mobile-nav-row a{ transform: translateX(-14px); opacity:0; transition: transform 500ms var(--ease-out-expo), transform var(--transition), color var(--transition), opacity 500ms var(--ease-out-expo); } .mobile-nav.open .mobile-nav-row a{ transform:none; opacity:1; } .mobile-nav-body > ul > li:nth-child(1) a{ transition-delay: 60ms; } .mobile-nav-body > ul > li:nth-child(2) a{ transition-delay: 100ms; } .mobile-nav-body > ul > li:nth-child(3) a{ transition-delay: 140ms; } .mobile-nav-body > ul > li:nth-child(4) a{ transition-delay: 180ms; } .mobile-nav-body > ul > li:nth-child(5) a{ transition-delay: 220ms; } .mobile-nav-body > ul > li:nth-child(6) a{ transition-delay: 260ms; } .mobile-nav-body > ul > li:nth-child(7) a{ transition-delay: 300ms; } .mobile-nav-body > ul > li:nth-child(8) a{ transition-delay: 340ms; } .mobile-nav-row a:hover{ color: var(--color-primary); } /* ---------- Submenú de Certificación (móvil) ---------- */ .has-mobile-submenu .mobile-nav-row{ padding-right:0; } .mobile-submenu-toggle{ width:38px; height:38px; flex-shrink:0; border-radius:50%; background: var(--color-surface); border:1px solid var(--color-border); color: var(--color-secondary-dark); display:flex; align-items:center; justify-content:center; transition: transform var(--transition), background var(--transition), border-color var(--transition); } .mobile-submenu-toggle svg{ transition: transform var(--transition); } .has-mobile-submenu.open .mobile-submenu-toggle{ background: var(--color-primary); border-color: var(--color-primary); color:#fff; } .has-mobile-submenu.open .mobile-submenu-toggle svg{ transform: rotate(180deg); } .mobile-submenu{ max-height:0; overflow:hidden; opacity:0; transition: max-height 420ms var(--ease-out-expo), opacity 320ms var(--ease-out-expo), padding var(--transition); padding-left:6px; } .has-mobile-submenu.open .mobile-submenu{ max-height:640px; opacity:1; padding-bottom:10px; } .mobile-submenu-title{ font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: var(--color-muted); padding:8px 10px 4px; border-bottom:0 !important; } .mobile-submenu li{ border-bottom:0 !important; } .mobile-submenu a{ font-family: var(--font-body); font-weight:600; font-size:.94rem; color: var(--color-muted); padding:10px 0 10px 18px; display:flex; align-items:center; gap:10px; opacity:1; transform:none; } .mobile-submenu a::before{ content:""; width:5px; height:5px; border-radius:50%; background: var(--color-accent); flex-shrink:0; } .mobile-submenu a:hover{ color: var(--color-primary); } .mobile-nav-foot{ margin-top:28px; display:flex; flex-direction:column; gap:14px; position:relative; z-index:1; } .mobile-nav-social{ display:flex; gap:18px; } .mobile-nav-social a{ display:flex; align-items:center; gap:6px; font-weight:700; font-size:.85rem; color: var(--color-muted); } .mobile-nav-contact{ font-size:.85rem; color: var(--color-muted); line-height:1.7; } body.nav-locked{ overflow:hidden; } /* ---------- Lightbox de imágenes (galería / logos / servicios) ---------- */ [data-lightbox]{ cursor: zoom-in; } .lightbox-overlay{ position: fixed; inset:0; z-index:400; background: radial-gradient(900px 560px at 80% 10%, rgba(47,91,199,.35), transparent 60%), rgba(10,21,48,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; visibility:hidden; pointer-events:none; transition: opacity 320ms var(--ease-out-expo), visibility 320ms; } .lightbox-overlay.open{ opacity:1; visibility:visible; pointer-events:auto; } .lightbox-panel{ background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); max-width: 920px; width:100%; max-height:88vh; overflow:auto; display:grid; grid-template-columns: 1.05fr 1fr; position:relative; transform: scale(.92) translateY(16px); opacity:0; transition: transform 380ms var(--ease-out-expo), opacity 380ms var(--ease-out-expo); } .lightbox-overlay.open .lightbox-panel{ transform:none; opacity:1; } .lightbox-media{ background: var(--color-surface); display:flex; align-items:center; justify-content:center; padding:36px; min-height:280px; } .lightbox-media img{ max-width:100%; max-height:420px; object-fit:contain; } .lightbox-info{ padding:36px 36px 36px 30px; display:flex; flex-direction:column; gap:6px; } .lightbox-info .eyebrow{ margin-bottom:6px; } .lightbox-title{ font-family:var(--font-display); font-weight:700; font-size:1.4rem; color:var(--color-secondary-dark); margin-bottom:10px; line-height:1.25; } .lightbox-link{ align-self:flex-start; margin-top: 22px; } .lightbox-features{ display:flex; flex-direction:column; gap:11px; margin-top:6px; } .lightbox-features li{ display:flex; gap:10px; align-items:flex-start; font-size:.92rem; line-height:1.5; color: var(--color-muted); opacity:0; transform: translateX(-8px); transition: opacity 420ms var(--ease-out-expo), transform 420ms var(--ease-out-expo); } .lightbox-overlay.open .lightbox-features li{ opacity:1; transform:none; } .lightbox-overlay.open .lightbox-features li:nth-child(1){ transition-delay:80ms; } .lightbox-overlay.open .lightbox-features li:nth-child(2){ transition-delay:140ms; } .lightbox-overlay.open .lightbox-features li:nth-child(3){ transition-delay:200ms; } .lightbox-overlay.open .lightbox-features li:nth-child(4){ transition-delay:260ms; } .lightbox-overlay.open .lightbox-features li:nth-child(5){ transition-delay:320ms; } .lightbox-features li::before{ content:"✓"; flex-shrink:0; width:20px; height:20px; border-radius:50%; background: rgba(15,163,74,.12); color:#0FA34A; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; margin-top:1px; } .lightbox-close{ position:absolute; top:14px; right:14px; z-index:2; width:38px; height:38px; border-radius:50%; background:#fff; border:1px solid var(--color-border); font-size:20px; line-height:1; color:var(--color-secondary-dark); display:flex; align-items:center; justify-content:center; transition: background var(--transition), border-color var(--transition), transform var(--transition); } .lightbox-close:hover{ background: var(--color-surface); border-color: var(--color-primary); transform: rotate(90deg); } @media (max-width:720px){ .lightbox-panel{ grid-template-columns:1fr; } .lightbox-media{ min-height:200px; padding:24px; } .lightbox-media img{ max-height:220px; } .lightbox-info{ padding:24px; } } /* ---------- WhatsApp flotante ---------- */ #wa-float{ position: fixed; right: 22px; bottom: 22px; z-index: 150; } .wa-float-btn{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; position:relative; transition: transform 320ms var(--ease-out-expo); } .wa-float-circle{ display:flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%; color:#fff; background: radial-gradient(120% 120% at 30% 20%, #3EE887 0%, #25D366 45%, #1DAF54 100%); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 14px 28px rgba(15,60,32,.38); border: 2px solid rgba(255,255,255,.5); position:relative; overflow:visible; transition: transform 320ms var(--ease-out-expo), box-shadow var(--transition), filter var(--transition); animation: wa-attention 7s ease-in-out 3s infinite; } .wa-float-circle::before{ content:""; position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(37,211,102,.4); animation: wa-ring 2.8s ease-out infinite; } .wa-float-circle::after{ content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none; background: radial-gradient(circle, rgba(255,255,255,.55) 0%, transparent 60%); opacity:0; transform: scale(0); transition: transform 520ms var(--ease-out-expo), opacity 520ms var(--ease-out-expo); } .wa-float-btn:active .wa-float-circle::after{ opacity:.5; transform: scale(1.6); transition: transform 0ms, opacity 0ms; } @keyframes wa-ring{ 0%{ transform:scale(.92); opacity:.9; } 100%{ transform:scale(1.35); opacity:0; } } @keyframes wa-attention{ 0%, 88%, 100%{ transform: scale(1) rotate(0); } 90%{ transform: scale(1.06) rotate(-2deg); } 93%{ transform: scale(1.06) rotate(2deg); } 96%{ transform: scale(1) rotate(0); } } .wa-float-circle svg{ transition: transform 320ms var(--ease-out-expo); } .wa-float-btn:hover .wa-float-circle{ transform: scale(1.08) translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 20px 38px rgba(15,60,32,.44); filter: brightness(1.05); } .wa-float-btn:hover .wa-float-circle svg{ transform: rotate(-8deg) scale(1.08); } .wa-float-label{ font-size:.92rem; font-weight:700; white-space:nowrap; line-height:1; color: var(--color-secondary-dark, #1a2b4c); background:#fff; padding:10px 18px; border-radius:999px; box-shadow: 0 8px 20px rgba(15,30,60,.18), 0 1px 0 rgba(255,255,255,.6) inset; border: 1px solid rgba(15,30,60,.06); transition: transform var(--transition), box-shadow var(--transition); } .wa-float-btn:hover .wa-float-label{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(15,30,60,.22); } .wa-tooltip{ position:absolute; right: calc(100% + 12px); top:32px; transform: translateY(-50%) translateX(6px); background: var(--color-secondary-dark); color:#fff; padding:9px 15px; border-radius:8px; font-size:.82rem; white-space:nowrap; opacity:0; pointer-events:none; transition: opacity var(--transition), transform var(--transition); } .wa-float-btn:hover .wa-tooltip{ opacity:1; transform: translateY(-50%) translateX(0); } @media (prefers-reduced-motion: reduce){ .wa-float-circle{ animation:none; } } @media (max-width: 640px){ #wa-float{ right:16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } .wa-float-circle{ width:56px; height:56px; animation:none; } .wa-float-label{ font-size:.85rem; padding:8px 14px; } } /* ---------- Footer ---------- */ .site-footer{ background: radial-gradient(900px 420px at 12% 0%, rgba(47,91,199,.18), transparent 55%), linear-gradient(175deg, var(--color-ink-2) 0%, var(--color-ink) 100%); color: var(--color-ink-muted); padding: var(--space-5) 0 0; position:relative; overflow:hidden; } .site-footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background: linear-gradient(90deg, var(--color-primary), var(--color-accent), var(--color-primary)); } .site-footer::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.4; z-index:0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(ellipse at 15% 0%, #000 0%, transparent 60%); } .site-footer > *{ position:relative; z-index:1; } .footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 44px; } .footer-logo{ height:48px; margin-bottom:16px; background:#fff; padding:8px 14px; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); } .footer-social{ display:flex; gap:14px; margin-top:14px; } .footer-social a{ display:flex; align-items:center; gap:7px; font-size:.8rem; font-weight:700; color: var(--color-ink-text); border:1px solid var(--color-ink-border); padding:8px 14px; border-radius:999px; transition: border-color var(--transition), color var(--transition), background var(--transition); } .footer-social a:hover{ color:#8FB0FF; border-color:#8FB0FF; background: rgba(255,255,255,.06); } .footer-col h4{ color: var(--color-ink-text); font-size:.95rem; margin-bottom:18px; letter-spacing:.02em; } .footer-col h4::before{ content:""; display:inline-block; width:16px; height:2px; background:var(--color-accent); margin-right:8px; vertical-align:middle; } .footer-col ul li{ margin-bottom:11px; font-size:.9rem; } .footer-col a{ color: var(--color-ink-muted); } .footer-col a:hover{ color:#8FB0FF; } .footer-bottom{ border-top: 1px solid var(--color-ink-border); padding: 22px 24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; font-size:.82rem; } .footer-legal{ display:flex; gap:20px; } .footer-legal a:hover{ color:#8FB0FF; } @media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } } /* ---------- Tarjetas de servicio ---------- */ .card-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } @media (max-width: 980px){ .card-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px){ .card-grid{ grid-template-columns: 1fr; } } .service-card{ background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow:hidden; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); display:flex; flex-direction:column; position:relative; } .service-card::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit; background: radial-gradient(220px circle at var(--mx,50%) var(--my,0%), rgba(var(--color-accent-rgb),.12), transparent 70%); opacity:0; transition: opacity var(--transition); } .service-card:hover::before{ opacity:1; } .service-card::after{ content:""; position:absolute; inset:0; border-radius: inherit; padding:1px; background: linear-gradient(135deg, rgba(var(--color-accent-rgb),.5), transparent 40%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:0; transition: opacity var(--transition); pointer-events:none; } .service-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; } .service-card:hover::after{ opacity:1; } .service-card-media{ aspect-ratio: 4/3; overflow:hidden; position:relative; background: var(--color-secondary); } .service-card-media img{ width:100%; height:100%; object-fit:cover; transition: transform 600ms var(--ease-out-expo); } .service-card:hover .service-card-media img{ transform: scale(1.08); } .service-card-media::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 60%, rgba(15,31,69,.35)); opacity:0; transition: opacity var(--transition); } .service-card:hover .service-card-media::after{ opacity:1; } .service-card-body{ padding: 24px 24px 26px; display:flex; flex-direction:column; gap:10px; flex:1; } .service-card-body h3{ font-size:1.15rem; margin:0; } .service-card-body p{ font-size:.92rem; margin:0; flex:1; } .service-card-link{ font-weight:700; color: var(--color-primary); display:inline-flex; align-items:center; gap:6px; font-size:.88rem; } .service-card:hover .service-card-link{ gap:10px; } /* Variante compacta usada como enlace de "servicios relacionados" */ a.service-card{ padding: 26px 24px; justify-content:space-between; } a.service-card h3{ margin-bottom:6px; } a.service-card p{ margin:0; font-size:.9rem; } a.service-card::before{ content:"→"; position:absolute; top:22px; right:22px; color: var(--color-border-strong); font-family: var(--font-display); font-weight:700; font-size:1.1rem; transition: color var(--transition), transform var(--transition); } a.service-card:hover::before{ color: var(--color-primary); transform: translate(3px,-3px); } /* ---------- Grilla editorial de servicios de metrología y calibración ---------- Reemplaza la cuadrícula uniforme de 4 columnas (Fase 5/6) por una composición tipo "bento" con jerarquía real: un servicio destacado más grande, dos medianos, tres pequeños del mismo tamaño entre sí y un séptimo a todo el ancho con número editorial grande. Los 7 siguen siendo el mismo