/* ============================================================ GRUPO JGM — CSS de contenido para WordPress (recortado de styles.css) ============================================================ Este archivo es el css/styles.css del sitio estático, recortado para usarse como plugin de WordPress sobre el tema Blocksy: Blocksy genera su propio encabezado, pie de página y botón flotante nativos, así que las reglas que estilizaban esas piezas en el sitio estático se eliminaron por completo aquí (quedarían sin efecto o en conflicto). Todo lo demás —variables, utilidades, cada sección de contenido y el responsive de esas secciones— se mantiene igual que en styles.css. Organizado por bloques (los números siguen la numeración del archivo original; los bloques eliminados se marcan explícitamente): 1. Variables / paleta de color 2. Reset y base 3. Utilidades (contenedor, botones, animaciones, .reveal) 4. [ELIMINADO — encabezado/navegación, ahora lo genera Blocksy] 5. Hero (solo en Inicio, con foto de fondo) 5b. Franja de credibilidad (solo en Inicio) 6. Quiénes Somos 7. Beneficios de un solo interlocutor 8. Por qué Grupo JGM (tarjetas con ícono) 9. Cita / pull-quote (solo en Inicio) 10. Nuestros Servicios 11. Metodología de trabajo 12. Casos de Éxito 13. Cumplimiento y confianza legal 14. Contacto (info + formulario) 15. Pie de página — solo contenido (marca + lista de contacto; el contenedor .site-footer/.footer-inner/.footer-bottom sigue siendo nativo de Blocksy, no está aquí) 16. Botón flotante de WhatsApp — solo contenido (el elemento vive en el plugin de carga del Paso 4, ver docs/MAPA-WORDPRESS.md) 17. Servicio destacado (Dictamen Estructural) 18. [ELIMINADO — modal "Acceso clientes". Se quitó HTML+CSS+JS por completo; es un placeholder de fase 1 que la fase 2 reemplaza por el login real de WP Customer Area. El botón del header enlaza ahora a la página /portal-clientes/.] 19. Casilla de aviso de privacidad 20. Página legal (aviso-privacidad.html) 21. Encabezado de página interna (page-hero) 22. Franja de llamado a la acción (cta-band) 23. Resumen en Inicio (teasers hacia cada página interna) 24. Responsive (mobile-first: base = móvil, luego tablet/desktop; el bloque >=1180px del original era 100% menú de escritorio y se eliminó completo; dentro del bloque >=768px se eliminó solo la regla de grid de .footer-inner, no la alineación de .footer-contact que sí se conserva) Nota sobre --header-height: el encabezado de Blocksy en este sitio usa position:relative (no fixed/overlay, verificado en vivo), así que las 3 compensaciones "padding-top: var(--header-height)" que existían en el original (.hero, .legal-section, .page-hero) se quitaron aquí a propósito — ya no hay nada que compensar. La variable --header-height y su uso en "scroll-margin-top" se dejan igual, son inofensivos y sirven si algún enlace interno hace scroll. ============================================================ */ /* ------------------------------------------------------------ 1. VARIABLES / PALETA DE COLOR ------------------------------------------------------------ CUARTA DIRECCIÓN DE PALETA: se conserva el acento azul acero (no se toca) y cambian los neutros. El oscuro viejo (#1c1b19) y el claro viejo (#efe9df) compartían la misma familia cálida (tono 40° los dos) pero con intensidades opuestas — 6% de saturación el oscuro, 33% el claro — así que el oscuro se leía como un negro sucio junto a la arena en vez de un contraste deliberado. El oscuro pasa a un antracita decididamente frío para que el contraste de temperatura con la arena se lea como una decisión, no como un desajuste. Es un cambio de neutros, no de estructura: el acento, el logo, la tipografía y el layout siguen igual. Ver README.md. Los NOMBRES de las variables (--color-graphite, --color-bone, etc.) se mantienen aunque el tono ya no sea literalmente grafito ni hueso — renombrarlas tocaría más de cien usos en este archivo sin cambiar nada visible. ------------------------------------------------------------ */ :root { /* Colores de marca (propuesta) */ --color-graphite: #202A35; /* antracita azulado frío — base oscura (headers, overlays) */ --color-graphite-dark: #161E26; /* antracita más oscuro (footer) */ --color-graphite-light: #334152; /* antracita secundario (paneles oscuros, cita) */ --color-accent: #1F5C99; /* azul acero — acento principal. OJO: a diferencia del naranja anterior, este tono es oscuro: el texto encima debe ser BLANCO (6.9:1), no grafito. */ --color-accent-dark: #174878; /* azul acero hover/activo */ /* Mismo azul que --color-accent: aquí con nombre propio para TEXTO chico sobre fondos claros (blanco/arena) — contraste 5.7:1, confirmado con el script de luminancia WCAG. Úsala en vez de --color-accent cada vez que sea texto (no ícono, no borde, no botón) sobre un fondo claro. */ --color-accent-text: #1F5C99; /* Variante clara, solo para acentos sobre fondos oscuros (eyebrows, etiquetas) — contraste 8.0:1 sobre el antracita nuevo. Un punto más clara que antes porque el antracita nuevo es más claro que el negro que reemplaza, y había que mantener el contraste de los eyebrows. */ --color-accent-light: #9CC4E8; /* Neutros (antracita azulado + arena cálida, evitando blanco/gris puros) */ --color-white: #FFFCF7; --color-bone: #EFE7D8; /* arena — fondos de sección alternos */ --color-bone-dark: #E2D7C2; /* arena más oscura — bordes/hover sobre arena */ --color-border: #D6CAB3; --color-text: #1D242C; --color-text-muted: #5B6672; /* Tipografía */ --font-heading: 'Oswald', 'Arial Narrow', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* ---------------------------------------------------------- ESCALA DE ESPACIADO — base 8px ---------------------------------------------------------- Un solo lugar para todo el espaciado del sitio (padding, margin, gap). Para WordPress/Elementor: estos valores se mapean directamente a los "Default Spacing" o a variables de tema en Elementor Pro. No uses valores de espaciado sueltos fuera de esta escala salvo casos muy puntuales (ya comentados donde aparecen). */ --space-1: 0.5rem; /* 8px */ --space-2: 1rem; /* 16px */ --space-3: 1.5rem; /* 24px */ --space-4: 2rem; /* 32px */ --space-5: 2.5rem; /* 40px */ --space-6: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-10: 5rem; /* 80px */ --space-12: 6rem; /* 96px */ /* Padding vertical de sección: fluido entre --space-8 (3 veces el radio, en pantallas chicas) y --space-12 (pantallas grandes), sin el salto brusco que había antes en el breakpoint de 1024px. */ --section-padding-y: clamp(var(--space-8), 8vw, var(--space-12)); /* Layout */ --container-width: 1180px; --container-padding-x: clamp(var(--space-3), 4vw, var(--space-5)); --radius: 8px; --shadow-sm: 0 2px 8px rgba(22, 30, 38, 0.1); --shadow-md: 0 8px 24px rgba(22, 30, 38, 0.16); --header-height: 76px; --transition: 0.25s ease; } /* ------------------------------------------------------------ 2. RESET Y BASE ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); color: var(--color-text); background: var(--color-white); line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.2; margin: 0 0 0.5em; color: var(--color-graphite); text-wrap: balance; /* evita saltos de línea feos en títulos; se ignora en navegadores que no lo soportan */ } /* Puente WordPress: el tema Blocksy trae un reset propio "body, p, h1...{margin:0}" con la MISMA especificidad (0,0,1) que esta regla, y gana el empate porque su hoja carga después de la nuestra en el — subimos la especificidad a "body p" (0,0,2) para que esta regla gane siempre, sin depender del orden de carga. */ body p { margin: 0 0 1em; } /* Puente WordPress: el widget "Editor de texto" de Elementor trae su propia regla ".elementor-widget-text-editor p:last-child{margin-bottom:0}" (pensada para evitar doble margen antes del siguiente widget) con especificidad 0,2,1 — más alta que "body p" (0,0,2) — y además su hoja (elementor-frontend.min.css) carga después de la nuestra. En este sitio casi todo párrafo vive solo dentro de su propio widget, así que SIEMPRE es ":last-child" y SIEMPRE perdía su margen inferior sin este puente. */ body .elementor-widget-text-editor p:last-child { margin-bottom: 1em; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } button { font-family: inherit; cursor: pointer; } /* Respeta preferencia de movimiento reducido */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* Accesibilidad: enlace de salto. Texto blanco, no grafito: a diferencia del naranja anterior (claro), el azul acero es oscuro — el blanco es el que pasa contraste AA encima (6.9:1, confirmado con script WCAG). */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--color-accent); color: var(--color-white); padding: 0.75em 1.25em; z-index: 2000; border-radius: 0 0 var(--radius) 0; font-weight: 600; } .skip-link:focus { left: 0; } /* Foco visible consistente para navegación por teclado */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; } /* ------------------------------------------------------------ 3. UTILIDADES ------------------------------------------------------------ */ .container { width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 var(--container-padding-x); } .section { padding: var(--section-padding-y) 0; scroll-margin-top: var(--header-height); } .section-alt { background: var(--color-bone); } .section-eyebrow { font-family: var(--font-heading); color: var(--color-text-muted); /* gris cálido, no naranja: aparece arriba de cada título de sección en las 6 páginas */ text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.85rem; font-weight: 600; margin-bottom: var(--space-1); } .section-title { font-size: clamp(1.6rem, 4vw, 2.4rem); margin-bottom: var(--space-4); max-width: 46ch; } .lead { font-size: 1.15rem; color: var(--color-text-muted); } /* Párrafo introductorio debajo de un .section-title (resúmenes de Inicio y encabezados de listas) + botón centrado de cierre de sección. */ .section-intro { font-size: 1.1rem; color: var(--color-text-muted); max-width: 65ch; margin-bottom: var(--space-4); } .section-cta { text-align: center; margin-top: var(--space-4); } /* Botones */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 44px; /* área táctil mínima, incluye las variantes "small" */ padding: 0.85em 1.75em; border-radius: var(--radius); font-weight: 600; font-size: 0.98rem; border: 2px solid transparent; transition: transform var(--transition), background var(--transition), box-shadow var(--transition); white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn .icon { width: 1.1em; height: 1.1em; fill: currentColor; } /* En pantallas angostas (ej. 360px), un botón largo como "Solicita tu dictamen estructural" con white-space:nowrap se salía del contenedor y causaba scroll horizontal. Se permite salto de línea solo aquí. */ @media (max-width: 479px) { .btn { white-space: normal; text-align: center; } } .btn-primary { /* Texto blanco, no grafito: el azul acero es oscuro (al revés que el naranja anterior), así que el blanco es el que pasa contraste AA encima (6.9:1, confirmado con script WCAG), en normal y en hover. */ background: var(--color-accent); color: var(--color-white); } .btn-primary:hover { background: var(--color-accent-dark); box-shadow: var(--shadow-sm); } .btn-primary:active { background: var(--color-accent-dark); transform: translateY(0); } .btn-outline-light { background: transparent; border-color: rgba(255,255,255,0.5); color: var(--color-white); } .btn-outline-light:hover { border-color: var(--color-white); background: rgba(255,255,255,0.08); } .btn-outline-light:active { background: rgba(255,255,255,0.16); transform: translateY(0); } /* Variante de botón outline para fondos claros (header, página de aviso de privacidad): usada por "Acceso clientes". */ .btn-outline { background: transparent; border-color: var(--color-graphite); color: var(--color-graphite); padding: 0.55em 1.1em; font-size: 0.9rem; } .btn-outline:hover { background: var(--color-graphite); color: var(--color-white); } .btn-outline:active { background: var(--color-graphite-dark); transform: translateY(0); } /* Verde de WhatsApp oscurecido (el #25D366 "oficial" no pasa contraste AA con texto blanco encima — confirmado con Lighthouse). Sigue leyéndose claramente como "WhatsApp" pero es accesible. */ .btn-whatsapp { background: #0c7a3c; color: var(--color-white); } .btn-whatsapp:hover { background: #0a6b34; box-shadow: var(--shadow-sm); } .btn-whatsapp:active { background: #095c2c; transform: translateY(0); } .btn-whatsapp-small { background: #0c7a3c; color: var(--color-white); padding: 0.55em 1.1em; font-size: 0.9rem; } .btn-whatsapp-small:hover { background: #0a6b34; } .btn-whatsapp-small:active { background: #095c2c; } /* Animación de aparición al hacer scroll. Antes ".reveal{opacity:0}" se aplicaba sin condición: si JavaScript fallaba o estaba bloqueado, ese contenido se quedaba invisible para siempre. Ahora solo se oculta cuando la etiqueta trae la clase "js" (agregada por un script mínimo en el , antes de que el CSS se termine de aplicar) — sin esa clase, todo el contenido .reveal se ve normal desde el primer render. */ .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .js .reveal.is-visible { opacity: 1; transform: translateY(0); } /* ------------------------------------------------------------ 5. HERO (INICIO) ------------------------------------------------------------ */ .hero { position: relative; /* 100vh primero como respaldo (Safari/navegadores viejos que no entienden "svh" simplemente ignoran la segunda línea y se quedan con esta); 100svh después para los que sí lo soportan, que ajusta mejor la altura real en iPhone con la barra de Safari visible. */ min-height: 100vh; min-height: 100svh; display: flex; align-items: center; background: var(--color-graphite-dark); /* color de respaldo mientras carga la foto */ overflow: hidden; color: var(--color-white); } /* PUENTE WORDPRESS — FOTO DE FONDO DEL HERO El sitio estático apila dos
absolutos detrás del contenido (.hero-media para la foto, .hero-overlay para el degradado) — ese patrón no existe en el árbol de Elementor (el hero ahí es un solo Container, sin esos dos hijos extra), así que ".hero-media"/ ".hero-overlay" de abajo no matchean nada y la foto nunca se vio: el hero se quedaba solo con el "background" de respaldo (gris sólido). Resuelto sin tocar la estructura de Elementor: el mismo degradado + foto se aplican directo sobre ".hero" como "background-image" compuesto (las dos capas de gradiente encima, la foto debajo), con la URL absoluta de los archivos ya subidos a /wp-content/uploads/. */ .hero { background-image: linear-gradient(100deg, rgba(22,30,38,0.93) 0%, rgba(22,30,38,0.8) 38%, rgba(22,30,38,0.42) 70%, rgba(22,30,38,0.36) 100%), linear-gradient(0deg, rgba(22,30,38,0.58) 0%, rgba(22,30,38,0) 35%), url('https://grupojgm.com/wp-content/uploads/hero-construction-mobile.webp') !important; background-size: cover !important; background-position: center 65% !important; } @media (min-width: 700px) { .hero { background-image: linear-gradient(100deg, rgba(22,30,38,0.93) 0%, rgba(22,30,38,0.8) 38%, rgba(22,30,38,0.42) 70%, rgba(22,30,38,0.36) 100%), linear-gradient(0deg, rgba(22,30,38,0.58) 0%, rgba(22,30,38,0) 35%), url('https://grupojgm.com/wp-content/uploads/hero-construction.webp') !important; } } /* Fondo fotográfico del hero. Imagen ligera para móvil y una más grande para pantallas anchas (ver README para reemplazarla). */ .hero-media { position: absolute; inset: 0; background-image: url('../assets/hero-construction-mobile.webp'); background-size: cover; background-position: center 65%; } @media (min-width: 700px) { .hero-media { background-image: url('../assets/hero-construction.webp'); } } /* Degradado oscuro (grafito, no azul) sobre la foto para mantener el contraste del texto */ .hero-overlay { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(22,30,38,0.93) 0%, rgba(22,30,38,0.8) 38%, rgba(22,30,38,0.42) 70%, rgba(22,30,38,0.36) 100%), linear-gradient(0deg, rgba(22,30,38,0.58) 0%, rgba(22,30,38,0) 35%); } .hero-inner { position: relative; z-index: 1; max-width: 720px; } .eyebrow { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.75); font-size: 0.95rem; margin-bottom: var(--space-2); } .hero-title { /* Antes el H1 era solo "Grupo JGM" (2 palabras, clamp hasta 4.2rem) y una cita aparte explicaba qué hace la empresa. Ahora el H1 absorbe esa frase completa, así que el tamaño baja para que una oración larga no domine la pantalla ni se vea descontrolada. */ color: var(--color-white); font-size: clamp(1.9rem, 4.2vw, 3.1rem); max-width: 14ch; margin-bottom: 0.4em; } .hero-tagline { font-family: var(--font-heading); /* Hueso, no acento: el acento es un detalle, no el protagonista — el momento de marca más grande del sitio (el hero) se queda en neutros. */ color: var(--color-bone); text-transform: uppercase; font-size: clamp(1.1rem, 3vw, 1.5rem); letter-spacing: 0.03em; margin-bottom: 1.75rem; } .hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-2); } /* Entrada suave del texto del hero al cargar la página (no depende de scroll) */ @keyframes hero-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .hero-inner > * { animation: hero-fade-up 0.7s ease both; } /* 4 hijos ahora (eyebrow, h1, texto de apoyo, botones) — antes eran 6: se quitó el logo duplicado del hero y la cita se fundió con el h1. */ .hero-inner > *:nth-child(1) { animation-delay: 0s; } .hero-inner > *:nth-child(2) { animation-delay: 0.08s; } .hero-inner > *:nth-child(3) { animation-delay: 0.16s; } .hero-inner > *:nth-child(4) { animation-delay: 0.24s; } /* ------------------------------------------------------------ 5b. FRANJA DE CREDIBILIDAD (inspirada en nsoke.com) ------------------------------------------------------------ */ .credibility-strip { background: var(--color-white); border-bottom: 1px solid var(--color-border); } .credibility-grid { display: grid; gap: 0; } @media (min-width: 640px) { body .credibility-grid { grid-template-columns: none; } } .credibility-grid > .e-con-inner { display: grid !important; gap: 0; width: 100%; } @media (min-width: 640px) { .credibility-grid > .e-con-inner { grid-template-columns: repeat(3, 1fr); } } .credibility-item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-3); border-bottom: 1px solid var(--color-border); width: 100% !important; } .credibility-item:last-child { border-bottom: none; } .credibility-icon { /* Íconos pequeños: encajan en el presupuesto de "acento como detalle" (junto con los checks de "Quiénes Somos"). */ flex-shrink: 0; width: 2.75rem; height: 2.75rem; color: var(--color-accent); } .credibility-icon svg { width: 100%; height: 100%; } .credibility-title { margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; color: var(--color-graphite); text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.25; } /* ------------------------------------------------------------ 6. QUIÉNES SOMOS ------------------------------------------------------------ */ .quienes-grid { display: grid; gap: var(--space-5); } .quienes-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-md); } .quienes-content { display: flex; flex-direction: column; gap: var(--space-4); } .check-list li { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.6em 0; font-size: 1.05rem; font-weight: 500; border-bottom: 1px solid var(--color-border); } .check-list li:last-child { border-bottom: none; } .check-mark { flex-shrink: 0; width: 22px; height: 22px; margin-top: 0.15em; border-radius: 4px; background: var(--color-accent); position: relative; } .check-mark::after { content: ""; position: absolute; left: 6px; top: 3px; width: 6px; height: 11px; border: solid var(--color-white); border-width: 0 2px 2px 0; transform: rotate(45deg); } .quienes-enfoque { background: var(--color-graphite); color: var(--color-white); border-radius: var(--radius); padding: var(--space-4); align-self: start; } .enfoque-label { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.7); font-size: 0.85rem; margin-bottom: 0.75rem; } .enfoque-text { font-size: 1.1rem; margin: 0; } .enfoque-text strong { color: var(--color-white); } /* ------------------------------------------------------------ 7. BENEFICIOS DE UN SOLO INTERLOCUTOR ------------------------------------------------------------ */ .benefits-grid { display: grid; gap: var(--space-4); } .benefit-list li { position: relative; padding: 0.6em 0 0.6em 1.6em; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); } .benefit-list li:last-child { border-bottom: none; } .benefit-list li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 8px; height: 8px; border-radius: 50%; background: var(--color-graphite); } .benefit-callout { background: var(--color-graphite); color: var(--color-white); border-left: 4px solid rgba(255,255,255,0.3); border-radius: var(--radius); padding: 1.75rem 2rem; align-self: start; font-size: 1.1rem; } .benefit-callout strong { color: var(--color-white); } /* ------------------------------------------------------------ 8. POR QUÉ GRUPO JGM (tarjetas con ícono) ------------------------------------------------------------ Deliberadamente NO es el patrón de bloques numerados 01/02/03 usado en el sitio de otro cliente (NSOKE): en su lugar son tarjetas con ícono ilustrado propio, fondo hueso y micro- interacción al pasar el mouse (levantamiento + borde grafito). */ .why-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; } .why-card { background: var(--color-bone); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-4); border-top: 3px solid transparent; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .why-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-top-color: var(--color-graphite); } .why-icon { width: 3rem; height: 3rem; margin-bottom: 1.25rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-white); color: var(--color-graphite); transition: background var(--transition), color var(--transition); } .why-icon svg { width: 1.5rem; height: 1.5rem; } .why-card:hover .why-icon { background: var(--color-graphite); color: var(--color-white); } /* Puente WordPress: el widget "Icon Box" de Elementor dibuja su propio ícono dentro de ".elementor-icon-box-icon" (markup nativo del widget, no editable con "Clases CSS adicionales"); se igualan tamaño/color aquí en vez de con una clase, mismo patrón que .service-teaser. */ .why-card .elementor-icon-box-icon { width: 3rem; height: 3rem; margin-bottom: 1.25rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-white); color: var(--color-graphite); transition: background var(--transition), color var(--transition); } .why-card .elementor-icon-box-icon svg { width: 1.5rem; height: 1.5rem; } .why-card:hover .elementor-icon-box-icon { background: var(--color-graphite); color: var(--color-white); } .why-card h3 { font-size: 1.1rem; color: var(--color-graphite); margin-bottom: var(--space-1); } .why-card p { color: var(--color-text-muted); font-size: 0.95rem; margin: 0; } /* ------------------------------------------------------------ 9. CITA / PULL-QUOTE ------------------------------------------------------------ */ .quote-banner { background: var(--color-graphite-light); color: var(--color-white); padding: 4rem 0; text-align: center; } .quote-banner blockquote, /* Puente WordPress: el widget "Encabezado" de Elementor no ofrece
como etiqueta HTML (solo h1-h6/div/span/p), así que la cita en Inicio usa la clase ".quote-text" sobre un

en vez de la etiqueta real. Mismo resultado visual, selector adicional. */ .quote-banner .quote-text { margin: 0 auto 1rem; max-width: 60ch; font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.2rem, 3vw, 1.7rem); line-height: 1.4; text-transform: none; letter-spacing: normal; } .quote-attribution { color: var(--color-bone); font-weight: 600; margin: 0; } .quote-banner .quote-text .elementor-heading-title { color: inherit !important; } .quote-attribution p { color: inherit; } /* ------------------------------------------------------------ 10. NUESTROS SERVICIOS ------------------------------------------------------------ */ .services-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; } .service-card { background: var(--color-bone); border-radius: var(--radius); overflow: hidden; transition: transform var(--transition), box-shadow var(--transition); } .service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .service-media { aspect-ratio: 4 / 3; overflow: hidden; } .service-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .service-card:hover .service-media img { transform: scale(1.05); } .service-card-body { padding: 1.75rem 2rem 2rem; border-top: 4px solid var(--color-accent); } .service-card h3 { font-size: 1.15rem; margin-bottom: 0.6rem; } .service-items { color: var(--color-text-muted); font-size: 0.95rem; margin: 0; } /* Tarjeta de servicio "completa" (página Nuestros Servicios): fila horizontal con imagen de un lado y contenido del otro, alternando de lado en cada una. Más espacio que la tarjeta compacta de arriba (que se sigue usando en el resumen de la página de Inicio) porque aquí cada servicio trae una descripción breve + sus sub-servicios con una línea de explicación cada uno. */ .service-detail-list { display: flex; flex-direction: column; gap: var(--space-8); } .service-detail { display: grid; gap: var(--space-4); align-items: center; } .service-detail-media { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); } .service-detail-media img { width: 100%; height: 100%; object-fit: cover; } .service-detail-body h3 { font-size: 1.4rem; margin-bottom: var(--space-1); } .service-detail-desc { color: var(--color-text-muted); font-size: 1.02rem; margin-bottom: 1.25rem; } .service-subitems { display: grid; gap: 0.9rem; } .service-subitems li { padding-left: 1.1rem; border-left: 3px solid var(--color-border); } .service-subitems strong { display: block; font-family: var(--font-heading); font-size: 0.95rem; letter-spacing: 0.02em; color: var(--color-graphite); margin-bottom: 0.15rem; } .service-subitems span { color: var(--color-text-muted); font-size: 0.92rem; } /* ------------------------------------------------------------ 11. METODOLOGÍA DE TRABAJO ------------------------------------------------------------ */ .timeline { display: grid; gap: 1.75rem; grid-template-columns: 1fr; counter-reset: step; } .timeline-step { position: relative; padding-left: 3.25rem; } .timeline-number { position: absolute; left: 0; top: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--color-graphite); color: var(--color-white); font-family: var(--font-heading); font-weight: 700; display: flex; align-items: center; justify-content: center; } .timeline-step h3 { font-size: 1.05rem; margin-bottom: 0.25rem; } .timeline-step p { color: var(--color-text-muted); margin: 0; font-size: 0.95rem; } /* ------------------------------------------------------------ 12. CASOS DE ÉXITO ------------------------------------------------------------ */ .cases-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; } .case-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.75rem; /* Grafito, no verde ni acento: el acento ya se usa en botones/foco/nav y esta es una superficie grande (borde de 3 tarjetas por página) — se evita saturar de color de marca. */ border-bottom: 4px solid var(--color-graphite); transition: transform var(--transition), box-shadow var(--transition); } .case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .case-card h2, .case-card h3 { /* h2 en casos-exito.html (primer nivel bajo el h1 de la página), h3 si en algún momento esta tarjeta se reutiliza dentro de otra sección. */ font-size: 1.05rem; margin-bottom: 0.4rem; } .case-tag { color: var(--color-text-muted); /* mismo tratamiento que .section-eyebrow: etiqueta discreta, no naranja */ font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.6rem; } .case-card p:last-child { color: var(--color-text-muted); font-size: 0.95rem; margin: 0; } /* ------------------------------------------------------------ 13. CUMPLIMIENTO Y CONFIANZA LEGAL ------------------------------------------------------------ */ .compliance-list { display: grid; gap: var(--space-2); grid-template-columns: 1fr; } .compliance-list li, /* Puente WordPress: los ítems de "compliance-list" son contenedores de Elementor (no
  • reales), así que llevan la clase ".compliance-item" además de la lista contenedora ".compliance-list". */ .compliance-list .compliance-item { background: var(--color-white); border: 1px solid var(--color-border); border-left: 4px solid var(--color-graphite); border-radius: var(--radius); padding: 1rem 1.25rem; font-weight: 500; color: var(--color-graphite); } /* ------------------------------------------------------------ 14. CONTACTO ------------------------------------------------------------ */ .contact-section { background: var(--color-bone); } .contact-grid { display: grid; gap: var(--space-5); } .contact-list { margin-bottom: 1.75rem; } .contact-list li, /* Puente WordPress: los ítems de "contact-list" son contenedores de Elementor (no
  • reales), así que llevan la clase ".contact-item" además de la lista contenedora ".contact-list". */ .contact-list .contact-item { padding: 0.75em 0; border-bottom: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 0.2rem; } .contact-list li:last-child, .contact-list .contact-item:last-child { border-bottom: none; } .contact-list a { color: var(--color-graphite); font-weight: 600; } .contact-list a:hover { color: var(--color-accent); } .contact-label { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78rem; color: var(--color-text-muted); } .contact-whatsapp-btn { margin-bottom: 1.75rem; } .social-links { display: flex; flex-direction: column; gap: 0.6rem; } .social-icons { display: flex; gap: 0.75rem; } .social-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--color-graphite); color: var(--color-white); transition: background var(--transition), transform var(--transition); } .social-icon svg { width: 20px; height: 20px; fill: currentColor; } .social-icon:hover { background: var(--color-accent); transform: translateY(-2px); } /* Formulario */ .contact-form { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-4); } .form-field { margin-bottom: 1.25rem; display: flex; flex-direction: column; } .form-field label { font-weight: 600; font-size: 0.92rem; margin-bottom: 0.4rem; color: var(--color-graphite); } .optional-tag { font-weight: 400; color: var(--color-text-muted); } .form-field input, .form-field textarea { font-family: var(--font-body); font-size: 1rem; padding: 0.7em 0.85em; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-white); color: var(--color-text); resize: vertical; } .form-field input:focus, .form-field textarea:focus { border-color: var(--color-accent); } .form-field.has-error input, .form-field.has-error textarea { border-color: #d64545; } .form-error { color: #d64545; font-size: 0.85rem; margin-top: 0.35rem; min-height: 1.1em; } .form-submit { width: 100%; } .form-status { margin-top: var(--space-2); font-weight: 600; text-align: center; min-height: 1.2em; } .form-status.is-success { color: #2f9e44; } .form-status.is-error { color: #d64545; } /* Aviso de que el formulario todavía no envía de verdad — ni éxito (sería engañoso) ni error, así que usa el acento en vez de verde/rojo. */ .form-status.is-demo { color: var(--color-accent-text); font-weight: 500; } /* ------------------------------------------------------------ 15. PIE DE PÁGINA — solo contenido (RESTAURADO) ------------------------------------------------------------ El contenedor del pie (.site-footer/.footer-inner/.footer-bottom) sí lo genera Blocksy de forma nativa (confirmado: su builder ya hace 2 columnas lado a lado sin CSS propio), por eso esas 3 reglas siguen eliminadas. Pero la marca y los datos de contacto ahora son bloques nativos reales (Imagen + Párrafos / Lista) dentro de esas columnas, así que sí necesitan el estilo de contenido de abajo. */ /* Puente WordPress: al quitar ".site-footer" de arriba (porque Blocksy ya pone el fondo oscuro del pie por su cuenta) también se perdió sin querer su "color: rgba(255,255,255,.85)" — esa regla no solo ponía el contenedor, también era la que le daba su color de texto CLARO a todo el pie por herencia. Sin ella, el texto que no tiene su propio color explícito (teléfonos, correo, dirección, aviso de copyright) hereda el color oscuro de — pensado para el fondo claro del resto del sitio — y queda casi invisible sobre el fondo oscuro del pie. El wrapper real en WordPress es el