/* ============================================================ ESTILOS COMPARTIDOS - Defiéndeme Tú Este archivo lo usan TODAS las páginas del sitio (index.html, servicios.html, cae.html, despidos-sector-publico.html, pension-seguridad-social.html). Si cambias un color o estilo aquí, se actualiza en todas partes. SISTEMA DE DISEÑO (versión "azul y oro") - Azul oscuro: color dominante del sitio (nav, pie de página, títulos, nombre "Defiéndeme Tú"). Transmite seriedad jurídica y confianza. - Oro: color de acento, para botones de conversión, enlaces destacados y detalles puntuales (úsalo con moderación, como el filo dorado de un sello). - Blanco invierno: fondo general del sitio (frío, limpio, hace que las tarjetas blancas resalten con nitidez). - Naranja: segundo acento, para insignias, "próximamente" y detalles puntuales que necesiten distinguirse del oro (por ejemplo, la tira de cápsulas en video de la portada). - Paleta extendida: 5 tonos apagados que combinan con el azul y el oro. Se usan como "color de identidad" de cada página (ver sección IDENTIDAD DE COLOR POR PÁGINA más abajo). - Firma visual: en vez de un borde grueso de color en cada tarjeta, hay un filete fino de 4px arriba (como la cinta de un membrete) y un borde general muy sutil. - Tipografía de títulos: Playfair Display (elegante, jurídica). - Tipografía de texto: Inter (legible, moderna). ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap'); :root { /* Paleta principal: azul oscuro y oro */ --color-principal: #0E2340; /* Azul oscuro dominante */ --color-principal-suave: #1B3B63; /* Variante más clara (gradientes, hover) */ --color-acento: #C9A227; /* Oro de conversión */ --color-acento-oscuro: #A6841C; /* Oro hover */ /* Segundo acento: naranja, para insignias y detalles puntuales (por ejemplo la tira de cápsulas en video). */ --color-naranja: #E07A2C; --color-naranja-oscuro: #C2621C; /* Paleta extendida (5 tonos apagados que combinan con el azul y el oro). Cada uno está pensado como filete superior de las tarjetas de una página, pero puedes usarlos en cualquier parte donde quieras una nota de color adicional. */ --color-arena: #C3A97E; /* Arena dorado suave - identidad de Inicio */ --color-salvia: #6C8A78; /* Verde salvia apagado - identidad de Servicios */ --color-dorado: #C9A227; /* Oro - identidad de CAE */ --color-vino: #7A4A45; /* Vino apagado - identidad de Despidos Sector Público */ --color-piedra: #7C8A99; /* Gris piedra apagado - identidad de Pensiones y Seguridad Social */ /* Texto y fondos */ --color-texto: #2B2B2B; --color-texto-suave: #63666A; --color-fondo-marfil: #F5F7FA; /* Blanco invierno: fondo general del sitio */ --color-borde-suave: #E2E6EC; /* Color de identidad "por defecto": lo usan las tarjetas cuando el body no tiene ninguna clase pagina-* (ver más abajo). */ --color-identidad-pagina: var(--color-acento); /* Radio de borde compartido: antes 20px (muy redondeado / "burbuja"), ahora 14px para un aire más sobrio. Un solo lugar para ajustarlo en todo el sitio. */ --radio-tarjeta: 14px; /* Tipografía */ --fuente-titulos: 'Playfair Display', serif; --fuente-texto: 'Inter', sans-serif; } /* ========== IDENTIDAD DE COLOR POR PÁGINA ========== Cada página agrega una clase a su (pagina-inicio, pagina-servicios, etc.). Esa clase redefine la variable --color-identidad-pagina, y las tarjetas del sitio (más abajo) usan esa variable como color del filete superior. Para cambiar el color de las tarjetas de una página, solo tienes que cambiar qué tono apunta --color-identidad-pagina aquí abajo — no hace falta tocar el CSS de las tarjetas. */ body.pagina-inicio { --color-identidad-pagina: var(--color-arena); } body.pagina-servicios { --color-identidad-pagina: var(--color-salvia); } body.pagina-cae { --color-identidad-pagina: var(--color-dorado); } body.pagina-despidos { --color-identidad-pagina: var(--color-vino); } body.pagina-pension { --color-identidad-pagina: var(--color-piedra); } * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: var(--color-fondo-marfil); font-family: var(--fuente-texto); color: var(--color-texto); /* Evita la barra de scroll horizontal que puede aparecer por el truco de "ancho completo de viewport" de .tira-videos-ventana. */ overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: var(--fuente-titulos); } /* Los campos de formulario y botones no heredan la fuente por defecto en los navegadores, así que se la asignamos explícitamente. */ input, textarea, select, button { font-family: inherit; } /* Corrige que el menú sticky tape los títulos al hacer clic en el menú */ h2[id], section[id] { scroll-margin-top: 90px; } /* ========== NAVEGACIÓN ========== */ .navegacion { background-color: var(--color-principal); position: sticky; top: 0; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 20px rgba(0, 0, 0, 0.18); z-index: 1000; } .contenedor-nav { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; height: 72px; } .logo { color: white; font-family: var(--fuente-titulos); font-size: 21px; font-weight: 700; text-decoration: none; letter-spacing: 0.3px; white-space: nowrap; } .menu { display: flex; list-style: none; gap: 16px; align-items: center; } .menu a { color: rgba(255, 255, 255, 0.88); text-decoration: none; font-size: 12px; font-weight: 500; letter-spacing: 0.3px; text-transform: uppercase; transition: 0.3s; white-space: nowrap; } .menu a:hover { color: var(--color-acento); } /* Separador sutil que distingue visualmente la navegación general (Inicio, Sobre Nosotros, etc.) del grupo de áreas especializadas. */ .separador-menu { width: 1px; height: 20px; background-color: rgba(255, 255, 255, 0.18); flex-shrink: 0; } /* Agrupa las 3 áreas especializadas (CAE, Despidos, Pensiones) como un solo bloque orgánico dentro del menú, con menos espacio entre ellas que el resto de los enlaces, reforzando que van juntas. */ .grupo-especiales { display: flex; align-items: center; gap: 8px; } /* Botones del menú que llevan a páginas dedicadas (CAE, Despidos, Pensiones) */ .menu a.enlace-destacado { color: var(--color-acento); border: 1px solid var(--color-acento); padding: 6px 12px; border-radius: 30px; font-size: 11.5px; } .menu a.enlace-destacado:hover { background-color: var(--color-acento); color: var(--color-principal); } .boton-hamburguesa { display: none; background: none; border: none; color: white; font-size: 28px; cursor: pointer; } /* ========== PORTADA (HERO) ========== */ .portada { /* Imagen de fondo corporativa con velo semitransparente en tinta, para que el texto blanco resalte con buena lectura. Puedes reemplazar la URL por tu propia foto cuando la tengas. */ background-image: linear-gradient(rgba(10, 22, 26, 0.88), rgba(18, 38, 43, 0.82)), url('https://images.unsplash.com/photo-1589829545856-d10d557cf95f?auto=format&fit=crop&w=1920&q=80'); background-size: cover; background-position: center; background-color: var(--color-principal); /* color de respaldo mientras carga la imagen */ color: white; padding: 130px 20px 110px; text-align: center; min-height: 420px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .portada h1 { font-size: 52px; font-weight: 700; margin-bottom: 18px; letter-spacing: 0.3px; } .portada h1::after { /* Filete dorado bajo el titular: firma visual del sitio, como el trazo de un sello notarial. Se repite en .titulo-seccion y .sobre-nosotros h2 más abajo, para dar coherencia a todas las páginas. */ content: ''; display: block; width: 64px; height: 3px; background-color: var(--color-acento); margin: 22px auto 0; } .portada p { font-family: var(--fuente-texto); font-size: 18px; font-weight: 300; max-width: 600px; color: rgba(255, 255, 255, 0.85); } .portada-imagen { width: 180px; height: 180px; object-fit: cover; border-radius: 50%; border: 3px solid var(--color-acento); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); margin-bottom: 24px; } @media (max-width: 480px) { .portada-imagen { width: 130px; height: 130px; } } /* ========== SOBRE NOSOTROS ========== */ .sobre-nosotros { background-color: white; padding: 64px 48px; border-radius: var(--radio-tarjeta); margin: 50px 0; box-shadow: 0 18px 40px rgba(18, 38, 43, 0.07); border: 1px solid var(--color-borde-suave); } .sobre-nosotros h2 { color: var(--color-principal); font-size: 34px; margin-bottom: 22px; } .sobre-nosotros p { color: var(--color-texto-suave); font-size: 16px; line-height: 1.85; margin-bottom: 15px; max-width: 760px; } .lista-ventajas { list-style: none; margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px 32px; } .lista-ventajas li { color: var(--color-principal); font-size: 15px; padding: 6px 0; font-weight: 600; } .lista-ventajas li::marker { color: var(--color-acento); } /* ========== CONTENEDOR PRINCIPAL ========== */ .contenedor { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .titulo-seccion { text-align: center; color: var(--color-principal); font-size: 34px; margin: 50px 0 0; } /* ========== TARJETAS DE SERVICIOS ========== */ .contenedor-tarjetas { display: flex; gap: 24px; padding: 44px 0 24px; justify-content: center; flex-wrap: wrap; } .tarjeta { background-color: white; width: 280px; padding: 34px 26px 28px; border-radius: var(--radio-tarjeta); border: 1px solid var(--color-borde-suave); border-top: 4px solid var(--color-identidad-pagina); box-shadow: 0 14px 30px rgba(18, 38, 43, 0.06); text-align: center; transition: transform 0.35s ease, box-shadow 0.35s ease; display: flex; flex-direction: column; } .tarjeta:hover { transform: translateY(-6px); box-shadow: 0 22px 40px rgba(18, 38, 43, 0.12); } .tarjeta h3 { color: var(--color-principal); font-size: 21px; margin-bottom: 14px; } .tarjeta p { color: var(--color-texto-suave); font-size: 14px; line-height: 1.7; flex-grow: 1; } .tarjeta .boton { margin-top: 22px; align-self: center; } .contenedor-boton-servicios { text-align: center; padding: 10px 0 44px; } /* ========== ÁREAS ESPECIALIZADAS (destacadas en el inicio) ========== Estas 3 tarjetas (CAE, Despidos Sector Público, Pensiones y Seguridad Social) son las áreas núcleo del estudio, así que en el inicio tienen un trato más protagónico que una tarjeta genérica: son más grandes, completamente clickeables (llevan directo a su página) y cada una usa el color de identidad de su página respectiva como filete superior. */ .subtitulo-servicios { text-align: center; color: var(--color-texto-suave); font-size: 15px; line-height: 1.7; max-width: 640px; margin: 14px auto 0; } .tarjetas-especiales { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 44px 0 20px; } @media (max-width: 980px) { .tarjetas-especiales { grid-template-columns: repeat(2, 1fr); } } .tarjeta-especial { background-color: white; padding: 34px 26px 28px; border-radius: var(--radio-tarjeta); border: 1px solid var(--color-borde-suave); border-top: 5px solid var(--color-identidad-tarjeta, var(--color-acento)); box-shadow: 0 16px 34px rgba(18, 38, 43, 0.08); text-decoration: none; display: flex; flex-direction: column; transition: transform 0.35s ease, box-shadow 0.35s ease; } /* Cuarta tarjeta ("Ver todos los servicios"): mismo formato que las demás pero con acento naranja para distinguirla como el catálogo completo, no un área específica. */ .tarjeta-especial--catalogo { background-color: var(--color-principal); border-top: 5px solid var(--color-naranja); } .tarjeta-especial--catalogo h3, .tarjeta-especial--catalogo p { color: white; } .tarjeta-especial--catalogo p { opacity: 0.8; } .tarjeta-especial--catalogo .ver-mas { color: var(--color-naranja); } .tarjeta-especial:hover { transform: translateY(-8px); box-shadow: 0 26px 46px rgba(18, 38, 43, 0.16); } .tarjeta-especial .icono-especial { font-size: 34px; margin-bottom: 16px; } .tarjeta-especial h3 { color: var(--color-principal); font-size: 21px; margin-bottom: 12px; } .tarjeta-especial p { color: var(--color-texto-suave); font-size: 14.5px; line-height: 1.7; flex-grow: 1; } .tarjeta-especial .ver-mas { margin-top: 20px; color: var(--color-identidad-tarjeta, var(--color-acento)); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } /* ========== TIRA DE CÁPSULAS EN VIDEO (portada) ========== Franja horizontal que avanza sola, pensada para alojar más adelante cápsulas informativas en video. Por ahora muestra tarjetas de marcador de posición ("Próximamente"); cuando tengas los videos, reemplaza el contenido de cada .tira-video-placeholder por un