/* ============================================================================= styleweb.css — Personalizaciones front-end Proyecto : Ingenieros Arquitectos 3.1416 (migración WordPress → Laravel) Prefijo : .iaw- (Ingenieros Arquitectos Web) — aísla del tema heredado Carga : ÚLTIMO del en resources/views/layouts/app.blade.php (después de web.css) para que gane en cascada. Paleta : tomada del tema Blocksy del sitio actual (--theme-palette-color-*) 1/2 #18394d · 3 #3A4F66 · 4 #192a3d · 5 #e1e8ed · 6 #f2f5f7 · 7 #FAFBFC Fuentes : Abel (display) + Roboto (texto) — Google Fonts ----------------------------------------------------------------------------- TABLA DE CONTENIDO 01. Tokens (:root) 02. Fuentes 03. Base / normalización (scoped .iaw) 04. Layout .......... contenedor, sección, grid 05. Tipografía ...... kicker, título, lead, prosa 06. Botones ......... primary / outline / accent / whatsapp 07. Header + Nav .... topbar, barra, dropdown, móvil, sticky 08. Hero ............ slider de portada 09. Servicios ...... tarjeta de servicio + iconos 10. Contadores ..... "Siempre trabajando para ti" (10 / 200 / 100) 11. Proyectos ...... grid + filtros por servicio 12. Casos de éxito . tarjeta + detalle (reto / solución / resultados) 13. Clientes ....... marquee de logos "Confían en nosotros" 14. Testimonios 15. Video 16. Breadcrumb 17. Contacto ....... formulario + datos + mapa 18. Footer 19. Flotantes ...... WhatsApp, volver-arriba, cookies 20. Utilidades 21. Responsive 22. Accesibilidad / print ========================================================================== */ /* == 01. TOKENS ============================================================ */ :root { /* --- Marca / azules (Blocksy) --- */ --iaw-navy-900: #101f2b; /* overlays, footer profundo */ --iaw-navy-800: #17303f; --iaw-navy-700: #18394d; /* ★ COLOR PRIMARIO de marca */ --iaw-navy-600: #24506b; /* hover sobre primario */ --iaw-navy-500: #2f6180; /* --- Neutros gris-azulados --- */ --iaw-slate-600: #3A4F66; /* títulos */ --iaw-slate-500: #5c7186; --iaw-slate-400: #90a2b3; --iaw-line: #e1e8ed; /* bordes / divisores */ --iaw-bg-alt: #f2f5f7; /* fondo de sección alterna */ --iaw-bg-soft: #fafbfc; --iaw-white: #ffffff; /* --- Texto --- */ --iaw-ink: #1f2d3a; --iaw-muted: #6b7c8c; --iaw-on-dark: #dfe7ee; /* --- Acento para CTA (PROPUESTA — confirmar) --- */ --iaw-accent: #c8862f; /* ocre/dorado, contrasta con el azul */ --iaw-accent-600: #a96e22; --iaw-wa: #25d366; /* verde WhatsApp */ --iaw-wa-600: #1da851; /* --- Estados --- */ --iaw-focus: #24506b; --iaw-error: #c0392b; --iaw-ok: #2e7d32; /* --- Tipografía --- */ --iaw-font-display: "Abel", "Oswald", "Segoe UI", sans-serif; --iaw-font-body: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --iaw-fs-100: .75rem; --iaw-fs-200: .8125rem; --iaw-fs-300: .875rem; --iaw-fs-400: 1rem; --iaw-fs-500: 1.125rem; --iaw-fs-600: 1.375rem; --iaw-fs-700: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); --iaw-fs-800: clamp(2rem, 1.4rem + 2.6vw, 3rem); --iaw-fs-900: clamp(2.5rem, 1.6rem + 3.8vw, 4rem); --iaw-lh-tight: 1.15; --iaw-lh-snug: 1.35; --iaw-lh-base: 1.65; --iaw-fw-normal: 400; --iaw-fw-medium: 500; --iaw-fw-bold: 700; --iaw-tracking: .04em; /* para kickers en mayúsculas */ /* --- Espaciado (escala 4px) --- */ --iaw-space-1: .25rem; --iaw-space-2: .5rem; --iaw-space-3: .75rem; --iaw-space-4: 1rem; --iaw-space-5: 1.5rem; --iaw-space-6: 2rem; --iaw-space-7: 2.5rem; --iaw-space-8: 3rem; --iaw-space-10: 4rem; --iaw-space-12: 6rem; --iaw-section-y: clamp(3.5rem, 2rem + 6vw, 7rem); /* --- Contenedor / grid --- */ --iaw-container: 1200px; --iaw-container-narrow: 880px; --iaw-gutter: 1.5rem; /* --- Logo (logo_web.png ≈ 1:1, lockup vertical, arte oscuro sobre transparente) --- */ --iaw-logo-h: 120px; /* cabecera (lockup denso → necesita altura para ser legible) */ --iaw-logo-h-footer: 88px; /* pie (se invierte a blanco vía filter) */ /* --- Bordes / sombras / motion --- */ --iaw-radius-sm: 4px; --iaw-radius: 10px; --iaw-radius-lg: 18px; --iaw-shadow-sm: 0 1px 3px rgba(24, 57, 77, .08); --iaw-shadow: 0 10px 30px rgba(24, 57, 77, .12); --iaw-shadow-lg: 0 24px 60px rgba(16, 31, 43, .22); --iaw-ring: 0 0 0 3px rgba(36, 80, 107, .35); --iaw-ease: cubic-bezier(.22, .61, .36, 1); --iaw-dur: .28s; /* --- Capas --- */ --iaw-z-header: 1000; --iaw-z-dropdown: 1010; --iaw-z-float: 1040; --iaw-z-overlay: 1050; } /* == 02. FUENTES ========================================================== */ /* Se declaran vía de Google Fonts en app.blade.php: Abel:400 | Roboto:300,400,500,700 Fallback local si no cargan: pila definida en los tokens. */ /* == 03. BASE (scoped a .iaw-scope en del front-end) =============== */ .iaw-scope { font-family: var(--iaw-font-body); font-size: var(--iaw-fs-400); line-height: var(--iaw-lh-base); color: var(--iaw-ink); background: var(--iaw-white); -webkit-font-smoothing: antialiased; } .iaw-scope h1, .iaw-scope h2, .iaw-scope h3, .iaw-scope h4 { font-family: var(--iaw-font-display); font-weight: var(--iaw-fw-normal); line-height: var(--iaw-lh-tight); color: var(--iaw-slate-600); margin: 0 0 var(--iaw-space-4); } .iaw-scope a { color: var(--iaw-navy-700); text-decoration: none; transition: color var(--iaw-dur) var(--iaw-ease); } .iaw-scope a:hover { color: var(--iaw-navy-600); } .iaw-scope :focus-visible { outline: none; box-shadow: var(--iaw-ring); border-radius: var(--iaw-radius-sm); } .iaw-scope img { max-width: 100%; height: auto; display: block; } /* == 04. LAYOUT ========================================================== */ .iaw-container { width: 100%; max-width: var(--iaw-container); margin-inline: auto; padding-inline: var(--iaw-gutter); } .iaw-container--narrow { max-width: var(--iaw-container-narrow); } .iaw-section { padding-block: var(--iaw-section-y); } .iaw-section--alt { background: var(--iaw-bg-alt); } .iaw-section--dark { background: var(--iaw-navy-700); color: var(--iaw-on-dark); } .iaw-section--dark h2, .iaw-section--dark h3 { color: var(--iaw-white); } .iaw-grid { display: grid; gap: var(--iaw-space-6); } .iaw-grid--2 { grid-template-columns: repeat(2, 1fr); } .iaw-grid--3 { grid-template-columns: repeat(3, 1fr); } .iaw-grid--4 { grid-template-columns: repeat(4, 1fr); } .iaw-grid--auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } /* == 05. TIPOGRAFÍA ===================================================== */ .iaw-kicker { display: inline-block; font-family: var(--iaw-font-body); font-size: var(--iaw-fs-200); font-weight: var(--iaw-fw-bold); letter-spacing: var(--iaw-tracking); text-transform: uppercase; color: var(--iaw-navy-500); margin-bottom: var(--iaw-space-3); } .iaw-title { font-size: var(--iaw-fs-800); } .iaw-title--lg { font-size: var(--iaw-fs-900); } .iaw-section-head { max-width: 46rem; margin-bottom: var(--iaw-space-8); } .iaw-section-head--center { margin-inline: auto; text-align: center; } .iaw-lead { font-size: var(--iaw-fs-500); color: var(--iaw-muted); line-height: var(--iaw-lh-snug); } /* Prosa para páginas de contenido (Páginas, detalle de servicio/caso/post) */ .iaw-prose { max-width: var(--iaw-container-narrow); } .iaw-prose > * + * { margin-top: var(--iaw-space-4); } .iaw-prose h2 { font-size: var(--iaw-fs-700); margin-top: var(--iaw-space-8); } .iaw-prose h3 { font-size: var(--iaw-fs-600); margin-top: var(--iaw-space-6); } .iaw-prose ul, .iaw-prose ol { padding-left: 1.4rem; } .iaw-prose li + li { margin-top: var(--iaw-space-2); } .iaw-prose img { border-radius: var(--iaw-radius); margin-block: var(--iaw-space-5); } .iaw-prose blockquote { border-left: 3px solid var(--iaw-accent); padding-left: var(--iaw-space-4); color: var(--iaw-slate-500); font-style: italic; } /* == 06. BOTONES ======================================================= */ .iaw-btn { --_bg: var(--iaw-navy-700); --_fg: var(--iaw-white); --_bd: var(--_bg); display: inline-flex; align-items: center; gap: var(--iaw-space-2); padding: .8em 1.6em; font-family: var(--iaw-font-body); font-size: var(--iaw-fs-300); font-weight: var(--iaw-fw-medium); letter-spacing: .02em; color: var(--_fg); background: var(--_bg); border: 1px solid var(--_bd); border-radius: var(--iaw-radius-sm); cursor: pointer; transition: transform var(--iaw-dur) var(--iaw-ease), background var(--iaw-dur) var(--iaw-ease), box-shadow var(--iaw-dur) var(--iaw-ease); } .iaw-btn:hover { transform: translateY(-2px); box-shadow: var(--iaw-shadow); background: var(--iaw-navy-600); color: var(--iaw-white); } .iaw-btn--outline { --_bg: transparent; --_fg: var(--iaw-navy-700); --_bd: var(--iaw-navy-700); } .iaw-btn--outline:hover { --_bg: var(--iaw-navy-700); --_fg: var(--iaw-white); } .iaw-btn--accent { --_bg: var(--iaw-accent); --_bd: var(--iaw-accent); } .iaw-btn--accent:hover { background: var(--iaw-accent-600); } .iaw-btn--wa { --_bg: var(--iaw-wa); --_bd: var(--iaw-wa); } .iaw-btn--wa:hover { background: var(--iaw-wa-600); } .iaw-btn--ghost-light { --_bg: transparent; --_fg: var(--iaw-white); --_bd: rgba(255,255,255,.6); } .iaw-btn--lg { padding: 1em 2em; font-size: var(--iaw-fs-400); } /* == 07. HEADER + NAV ================================================== */ .iaw-header { position: sticky; top: 0; z-index: var(--iaw-z-header); background: var(--iaw-white); border-bottom: 1px solid var(--iaw-line); } .iaw-header.is-stuck { box-shadow: var(--iaw-shadow-sm); } /* Configuración → Appearance → "Header fijo": desactivado deja la cabecera estática */ .iaw-header--static { position: static; } /* Al hacer scroll, la cabecera se "condensa": oculta la barra superior y reduce el logo, para que el logo pueda ser grande en reposo sin que la barra fija ocupe demasiado alto de pantalla al navegar. */ .iaw-header.is-stuck .iaw-topbar { display: none; } .iaw-header.is-stuck .iaw-nav { padding-block: var(--iaw-space-1); } .iaw-header.is-stuck .iaw-nav__brand img { height: 56px; } .iaw-topbar { background: var(--iaw-navy-700); color: var(--iaw-on-dark); font-size: var(--iaw-fs-200); } .iaw-topbar__inner { display: flex; justify-content: space-between; gap: var(--iaw-space-4); padding-block: var(--iaw-space-2); } .iaw-topbar a { color: var(--iaw-on-dark); } .iaw-topbar a:hover { color: var(--iaw-white); } .iaw-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--iaw-space-6); padding-block: var(--iaw-space-1); transition: padding-block var(--iaw-dur) var(--iaw-ease); } .iaw-nav__brand { flex: 0 0 auto; line-height: 0; display: block; } .iaw-nav__brand img { height: var(--iaw-logo-h, 56px); width: auto; display: block; margin: 0; transition: height var(--iaw-dur) var(--iaw-ease); } .iaw-nav__list { display: flex; align-items: center; gap: var(--iaw-space-5); list-style: none; margin: 0; padding: 0; } .iaw-nav__link { font-family: var(--iaw-font-body); font-size: var(--iaw-fs-300); font-weight: var(--iaw-fw-medium); text-transform: uppercase; letter-spacing: .03em; color: var(--iaw-slate-600); padding-block: var(--iaw-space-2); position: relative; } .iaw-nav__link::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--iaw-accent); transition: width var(--iaw-dur) var(--iaw-ease); } .iaw-nav__link:hover::after, .iaw-nav__link.is-active::after { width: 100%; } .iaw-nav__link.is-active { color: var(--iaw-navy-700); } /* Dropdown (Servicios ▾) */ .iaw-nav__item--has-children { position: relative; } .iaw-nav__submenu { position: absolute; top: 100%; left: 0; min-width: 240px; background: var(--iaw-white); border: 1px solid var(--iaw-line); border-radius: var(--iaw-radius-sm); box-shadow: var(--iaw-shadow); padding: var(--iaw-space-2); display: none; z-index: var(--iaw-z-dropdown); } .iaw-nav__item--has-children:hover .iaw-nav__submenu { display: block; } .iaw-nav__submenu a { display: block; padding: var(--iaw-space-2) var(--iaw-space-3); border-radius: var(--iaw-radius-sm); font-size: var(--iaw-fs-300); } .iaw-nav__submenu a:hover { background: var(--iaw-bg-alt); } /* Toggler móvil */ .iaw-nav__toggle { display: none; background: none; border: 0; font-size: 1.5rem; color: var(--iaw-navy-700); } /* == 08. HERO ========================================================= */ .iaw-hero { position: relative; min-height: clamp(460px, 72vh, 700px); display: grid; align-items: center; color: var(--iaw-white); overflow: hidden; padding-block: var(--iaw-space-10); } .iaw-hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .iaw-hero__media img, .iaw-hero__media video, .iaw-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border: 0; background: var(--iaw-navy-900); } /* Variante compacta: encabezado de página interior (ej. detalle de servicio) con video de fondo en bucle, en vez del hero completo del home. */ .iaw-hero--compact { min-height: clamp(320px, 48vh, 460px); padding-block: var(--iaw-space-8); } .iaw-hero--compact .iaw-hero__title { font-size: var(--iaw-fs-800); } .iaw-hero--compact .iaw-breadcrumb__trail { color: var(--iaw-on-dark); margin-bottom: var(--iaw-space-3); } .iaw-hero--compact .iaw-breadcrumb__trail a { color: var(--iaw-accent); } .iaw-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(95deg, rgba(11,22,31,.94) 0%, rgba(11,22,31,.80) 42%, rgba(11,22,31,.55) 100%), linear-gradient(0deg, rgba(11,22,31,.55) 0%, rgba(11,22,31,0) 45%); } .iaw-hero__inner { position: relative; z-index: 1; max-width: 680px; } .iaw-hero__inner .iaw-kicker { margin-bottom: var(--iaw-space-4); } .iaw-hero .iaw-hero__title { color: #fff; font-size: var(--iaw-fs-900); text-shadow: 0 2px 18px rgba(0,0,0,.4); } .iaw-hero .iaw-hero__sub { color: #fff; opacity: .92; font-size: var(--iaw-fs-500); margin-top: var(--iaw-space-3); margin-bottom: var(--iaw-space-6); } .iaw-hero__actions { display: flex; flex-wrap: wrap; gap: var(--iaw-space-3); } .iaw-hero__dots { position: absolute; bottom: var(--iaw-space-5); left: 50%; transform: translateX(-50%); display: flex; gap: var(--iaw-space-2); z-index: 2; } .iaw-hero__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.4); border: 0; cursor: pointer; } .iaw-hero__dot.is-active { background: var(--iaw-accent); } /* == 09. SERVICIOS =================================================== */ .iaw-service-card { display: flex; flex-direction: column; gap: var(--iaw-space-3); padding: var(--iaw-space-6); background: var(--iaw-white); border: 1px solid var(--iaw-line); border-radius: var(--iaw-radius); box-shadow: var(--iaw-shadow-sm); transition: transform var(--iaw-dur) var(--iaw-ease), box-shadow var(--iaw-dur) var(--iaw-ease), border-color var(--iaw-dur) var(--iaw-ease); } .iaw-service-card:hover { transform: translateY(-6px); box-shadow: var(--iaw-shadow); border-color: var(--iaw-navy-500); } .iaw-service-card__icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--iaw-bg-alt); color: var(--iaw-navy-700); font-size: 1.75rem; } .iaw-service-card:hover .iaw-service-card__icon { background: var(--iaw-navy-700); color: var(--iaw-white); } .iaw-service-card__title { font-size: var(--iaw-fs-600); margin: 0; } .iaw-service-card__more { margin-top: auto; font-weight: var(--iaw-fw-medium); color: var(--iaw-navy-700); } /* == 10. CONTADORES (10 / 200 / 100) ================================ */ .iaw-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--iaw-space-6); text-align: center; } .iaw-stat__num { font-family: var(--iaw-font-display); font-size: var(--iaw-fs-900); line-height: 1; color: var(--iaw-white); } .iaw-stat__label { text-transform: uppercase; letter-spacing: var(--iaw-tracking); font-size: var(--iaw-fs-200); color: var(--iaw-on-dark); } .iaw-stat__num::after { content: attr(data-suffix); } /* == 11. PROYECTOS (tabs + grid) ================================== */ .iaw-filter { display: flex; flex-wrap: wrap; gap: var(--iaw-space-2); margin-bottom: var(--iaw-space-6); } .iaw-filter__btn { padding: .5em 1.1em; font-size: var(--iaw-fs-300); border: 1px solid var(--iaw-line); border-radius: 999px; background: var(--iaw-white); color: var(--iaw-slate-600); cursor: pointer; } .iaw-filter__btn.is-active { background: var(--iaw-navy-700); color: var(--iaw-white); border-color: var(--iaw-navy-700); } /* Tabs de categorías de proyecto */ .iaw-tabs { display: flex; gap: var(--iaw-space-1); border-bottom: 2px solid var(--iaw-line); margin-bottom: var(--iaw-space-8); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .iaw-tabs::-webkit-scrollbar { display: none; } .iaw-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--iaw-space-2); padding: var(--iaw-space-4) var(--iaw-space-5); font-family: var(--iaw-font-body); font-size: var(--iaw-fs-300); font-weight: var(--iaw-fw-medium); letter-spacing: .02em; color: var(--iaw-slate-500); background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; white-space: nowrap; transition: color var(--iaw-dur) var(--iaw-ease), border-color var(--iaw-dur) var(--iaw-ease); } .iaw-tab:hover { color: var(--iaw-navy-700); } .iaw-tab.is-active { color: var(--iaw-navy-700); border-bottom-color: var(--iaw-accent); } .iaw-tab__count { font-size: var(--iaw-fs-100); font-weight: var(--iaw-fw-bold); line-height: 1; padding: .2em .5em; border-radius: 999px; background: var(--iaw-bg-alt); color: var(--iaw-slate-500); } .iaw-tab.is-active .iaw-tab__count { background: var(--iaw-navy-700); color: var(--iaw-white); } .iaw-tabpane { display: none; } .iaw-tabpane.is-active { display: block; animation: iaw-fade var(--iaw-dur) var(--iaw-ease); } @keyframes iaw-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .iaw-project-card { position: relative; border-radius: var(--iaw-radius); overflow: hidden; box-shadow: var(--iaw-shadow-sm); } .iaw-project-card__img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; transition: transform .5s var(--iaw-ease); } .iaw-project-card:hover .iaw-project-card__img { transform: scale(1.05); } .iaw-project-card__body { position: absolute; inset-inline: 0; bottom: 0; padding: var(--iaw-space-6) var(--iaw-space-5) var(--iaw-space-4); background: linear-gradient(180deg, transparent 0%, rgba(11,22,31,.55) 35%, rgba(11,22,31,.95) 100%); color: var(--iaw-white); } .iaw-project-card__tag { display: block; font-size: var(--iaw-fs-100); font-weight: var(--iaw-fw-bold); text-transform: uppercase; letter-spacing: var(--iaw-tracking); color: var(--iaw-accent); margin-bottom: var(--iaw-space-2); } .iaw-project-card__title { font-family: var(--iaw-font-display); font-size: var(--iaw-fs-500); line-height: 1.2; color: var(--iaw-white); margin: 0 0 var(--iaw-space-1); } .iaw-project-card__meta { display: block; font-size: var(--iaw-fs-200); color: var(--iaw-on-dark); } /* == 12. CASOS DE ÉXITO ============================================ */ .iaw-case-card { display: grid; grid-template-columns: 260px 1fr; gap: var(--iaw-space-6); padding: var(--iaw-space-6); background: var(--iaw-white); border: 1px solid var(--iaw-line); border-radius: var(--iaw-radius); } .iaw-case-card__media img { border-radius: var(--iaw-radius-sm); aspect-ratio: 1; object-fit: cover; } .iaw-case-card__client { font-size: var(--iaw-fs-200); text-transform: uppercase; letter-spacing: var(--iaw-tracking); color: var(--iaw-navy-500); } .iaw-case-card__title { font-size: var(--iaw-fs-600); margin: var(--iaw-space-1) 0 var(--iaw-space-2); } /* Detalle: bloques Reto / Solución / Resultados */ .iaw-case-blocks { display: grid; gap: var(--iaw-space-5); grid-template-columns: repeat(3, 1fr); } .iaw-case-block { padding: var(--iaw-space-5); background: var(--iaw-bg-alt); border-radius: var(--iaw-radius); border-top: 3px solid var(--iaw-navy-700); } .iaw-case-block--result { border-top-color: var(--iaw-accent); } .iaw-case-block__label { font-family: var(--iaw-font-display); font-size: var(--iaw-fs-600); color: var(--iaw-slate-600); } /* == 13. CLIENTES (carrusel de logos: auto-scroll + arrastrable) ==== */ .iaw-clients { overflow: hidden; } .iaw-marquee-viewport { overflow: hidden; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .iaw-marquee-viewport.is-dragging { cursor: grabbing; } .iaw-marquee { display: flex; gap: var(--iaw-space-8); width: max-content; will-change: transform; } .iaw-marquee__item { flex: 0 0 auto; display: flex; align-items: center; height: 70px; } .iaw-marquee__item img { max-height: 56px; max-width: 160px; width: auto; -webkit-user-drag: none; user-select: none; pointer-events: none; filter: grayscale(1); opacity: .6; transition: filter var(--iaw-dur), opacity var(--iaw-dur); } .iaw-marquee-viewport:hover .iaw-marquee__item img { opacity: .8; } /* Cobertura (mapa de estados atendidos) */ .iaw-coverage__map { width: 100%; max-width: 920px; margin: 0 auto; display: block; } .iaw-coverage__states { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--iaw-space-2); margin-top: var(--iaw-space-6); } .iaw-coverage__state { display: inline-flex; align-items: center; gap: .45em; font-size: var(--iaw-fs-200); font-weight: var(--iaw-fw-medium); letter-spacing: .02em; padding: .5em 1.1em; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); color: var(--iaw-white); } .iaw-coverage__state i { color: var(--iaw-accent); font-size: .85em; } /* == 14. TESTIMONIOS ============================================= */ .iaw-quote { padding: var(--iaw-space-6); background: var(--iaw-white); border: 1px solid var(--iaw-line); border-radius: var(--iaw-radius); } .iaw-quote__text { font-size: var(--iaw-fs-500); color: var(--iaw-slate-600); } .iaw-quote__author { display: flex; align-items: center; gap: var(--iaw-space-3); margin-top: var(--iaw-space-4); } .iaw-quote__author img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; } /* == 15. VIDEO ================================================== */ .iaw-video { position: relative; border-radius: var(--iaw-radius-lg); overflow: hidden; box-shadow: var(--iaw-shadow-lg); } .iaw-video__frame { aspect-ratio: 16 / 9; width: 100%; border: 0; display: block; } .iaw-video__frame[poster] { object-fit: cover; background: #000; } /* Galería de servicio (lightGallery) */ .iaw-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--iaw-space-3); } .iaw-gallery__item { display: block; overflow: hidden; border-radius: var(--iaw-radius-sm); cursor: zoom-in; background: var(--iaw-bg-alt); aspect-ratio: 4 / 3; } .iaw-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--iaw-ease); } .iaw-gallery__item:hover img { transform: scale(1.06); } /* Cuerpo de la página de servicio: listas reales de trámites, etc. */ .iaw-service-body ul { list-style: none; padding: 0; display: grid; gap: var(--iaw-space-2); grid-template-columns: repeat(2, 1fr); } .iaw-service-body ul li { position: relative; padding-left: 1.6rem; } .iaw-service-body ul li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: .15em; color: var(--iaw-accent); font-size: .8em; } .iaw-service-body h2, .iaw-service-body h3 { font-family: var(--iaw-font-display); color: var(--iaw-slate-600); } .iaw-service-body .iaw-service-body__closing { margin-top: var(--iaw-space-6); padding: var(--iaw-space-5); border-left: 3px solid var(--iaw-accent); background: var(--iaw-bg-alt); font-family: var(--iaw-font-display); font-size: var(--iaw-fs-500); color: var(--iaw-slate-600); border-radius: 0 var(--iaw-radius-sm) var(--iaw-radius-sm) 0; } /* == 16. BREADCRUMB ============================================ */ .iaw-breadcrumb { background: var(--iaw-navy-700); color: var(--iaw-on-dark); padding-block: var(--iaw-space-6); } .iaw-breadcrumb h1 { color: var(--iaw-white); margin: 0 0 var(--iaw-space-2); } .iaw-breadcrumb__trail { font-size: var(--iaw-fs-200); display: flex; gap: var(--iaw-space-2); } .iaw-breadcrumb__trail a { color: var(--iaw-accent); } /* == 17. CONTACTO ============================================= */ .iaw-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--iaw-space-8); } .iaw-field { display: flex; flex-direction: column; gap: var(--iaw-space-2); margin-bottom: var(--iaw-space-4); } .iaw-field label { font-size: var(--iaw-fs-200); font-weight: var(--iaw-fw-medium); text-transform: uppercase; letter-spacing: .03em; color: var(--iaw-slate-500); } .iaw-field input, .iaw-field textarea, .iaw-field select { font: inherit; padding: .75em 1em; color: var(--iaw-ink); background: var(--iaw-white); border: 1px solid var(--iaw-line); border-radius: var(--iaw-radius-sm); } .iaw-field input:focus, .iaw-field textarea:focus { border-color: var(--iaw-navy-500); box-shadow: var(--iaw-ring); outline: 0; } .iaw-field--error input, .iaw-field--error textarea { border-color: var(--iaw-error); } .iaw-field__msg { font-size: var(--iaw-fs-200); color: var(--iaw-error); } .iaw-contact-info li { display: flex; gap: var(--iaw-space-3); padding-block: var(--iaw-space-3); border-bottom: 1px solid var(--iaw-line); } .iaw-map iframe { width: 100%; min-height: 320px; border: 0; border-radius: var(--iaw-radius); } /* == 18. FOOTER ============================================== */ .iaw-footer { background: var(--iaw-navy-900); color: var(--iaw-on-dark); border-top: 3px solid var(--iaw-accent); padding-block: var(--iaw-space-10) var(--iaw-space-5); } .iaw-footer a { color: var(--iaw-on-dark); transition: color var(--iaw-dur) var(--iaw-ease); } .iaw-footer a:hover { color: var(--iaw-white); } .iaw-footer__cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: var(--iaw-space-8); align-items: start; } .iaw-footer__brand p { max-width: 34ch; font-size: var(--iaw-fs-300); line-height: var(--iaw-lh-base); opacity: .85; margin: var(--iaw-space-4) 0; } .iaw-footer__title { font-family: var(--iaw-font-body); font-size: var(--iaw-fs-100); font-weight: var(--iaw-fw-bold); text-transform: uppercase; letter-spacing: var(--iaw-tracking); color: var(--iaw-white); margin-bottom: var(--iaw-space-4); } .iaw-footer__logo { height: var(--iaw-logo-h-footer); width: auto; filter: brightness(0) invert(1); } .iaw-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--iaw-space-3); font-size: var(--iaw-fs-300); } .iaw-footer__list a { position: relative; } .iaw-footer__list a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: var(--iaw-accent); transition: width var(--iaw-dur) var(--iaw-ease); } .iaw-footer__list a:hover::after { width: 100%; } .iaw-footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--iaw-space-3); font-size: var(--iaw-fs-300); } .iaw-footer__contact li { display: grid; grid-template-columns: 20px 1fr; gap: var(--iaw-space-2); align-items: start; } .iaw-footer__contact i { color: var(--iaw-accent); margin-top: .2em; } .iaw-footer__bottom { margin-top: var(--iaw-space-8); padding-top: var(--iaw-space-5); border-top: 1px solid rgba(255,255,255,.12); font-size: var(--iaw-fs-200); opacity: .8; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--iaw-space-3); } .iaw-social { display: flex; gap: var(--iaw-space-2); margin-top: var(--iaw-space-5); } .iaw-social a { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.08); font-size: .9rem; } .iaw-social a:hover { background: var(--iaw-accent); color: var(--iaw-white); transform: translateY(-2px); } /* == 19. FLOTANTES ========================================= */ .iaw-wa-float { position: fixed; right: 20px; bottom: 20px; z-index: var(--iaw-z-float); width: 56px; height: 56px; border-radius: 50%; background: var(--iaw-wa); color: #fff; display: grid; place-items: center; font-size: 1.6rem; box-shadow: var(--iaw-shadow); } .iaw-wa-float:hover { background: var(--iaw-wa-600); color: #fff; } .iaw-totop { position: fixed; right: 20px; bottom: 88px; z-index: var(--iaw-z-float); width: 42px; height: 42px; border-radius: var(--iaw-radius-sm); background: var(--iaw-navy-700); color: #fff; border: 0; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity var(--iaw-dur); } .iaw-totop.is-visible { opacity: 1; pointer-events: auto; } /* == 20. UTILIDADES ======================================= */ /* Shims de espaciado estilo Bootstrap 4 (mr-/ml-) y 5 (me-/ms-) usados en las plantillas */ .mr-1,.me-1{margin-right:.25rem}.mr-2,.me-2{margin-right:.5rem}.mr-3,.me-3{margin-right:1rem} .ml-1,.ms-1{margin-left:.25rem}.ml-2,.ms-2{margin-left:.5rem}.ml-3,.ms-3{margin-left:1rem} .mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}.mt-4{margin-top:1.5rem}.mb-0{margin-bottom:0} .iaw-mt-0 { margin-top: 0 !important; } .iaw-text-center { text-align: center; } .iaw-text-muted { color: var(--iaw-muted); } .iaw-bg-alt { background: var(--iaw-bg-alt); } .iaw-stack > * + * { margin-top: var(--iaw-space-4); } .iaw-hide { display: none !important; } .iaw-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* == 21. RESPONSIVE ====================================== */ @media (max-width: 1024px) { .iaw-grid--4 { grid-template-columns: repeat(2, 1fr); } .iaw-footer__cols { grid-template-columns: repeat(2, 1fr); } .iaw-case-card { grid-template-columns: 1fr; } .iaw-case-blocks { grid-template-columns: 1fr; } .iaw-gallery { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 860px) { .iaw-nav__list { display: none; position: absolute; inset-inline: 0; top: 100%; flex-direction: column; align-items: stretch; background: var(--iaw-white); border-top: 1px solid var(--iaw-line); padding: var(--iaw-space-3); box-shadow: var(--iaw-shadow); } .iaw-nav__list.is-open { display: flex; } .iaw-nav__toggle { display: block; } .iaw-nav__submenu { position: static; display: block; box-shadow: none; border: 0; padding-left: var(--iaw-space-4); } .iaw-nav__brand img { height: 76px; } .iaw-header.is-stuck .iaw-nav__brand img { height: 48px; } .iaw-footer__logo { height: 66px; } .iaw-footer__cols { grid-template-columns: 1fr; gap: var(--iaw-space-6); text-align: center; } .iaw-footer__brand p { max-width: none; margin-inline: auto; } .iaw-social { justify-content: center; } .iaw-footer__list a::after { display: none; } .iaw-footer__contact li { grid-template-columns: 1fr; justify-items: center; } .iaw-footer__bottom { justify-content: center; text-align: center; } .iaw-grid--2, .iaw-grid--3, .iaw-grid--4 { grid-template-columns: 1fr; } .iaw-stats { grid-template-columns: 1fr; gap: var(--iaw-space-4); } .iaw-contact-grid { grid-template-columns: 1fr; } .iaw-topbar__inner { justify-content: center; } .iaw-gallery { grid-template-columns: repeat(2, 1fr); } .iaw-service-body ul { grid-template-columns: 1fr; } } /* == 22. ACCESIBILIDAD / PRINT ========================== */ @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .iaw-marquee { animation: none; } } @media print { .iaw-header, .iaw-footer, .iaw-wa-float, .iaw-totop, #gdpr-cookie-message { display: none !important; } .iaw-scope { color: #000; background: #fff; } }