/* shared.css — Sistema de diseño unificado Realtec Resortes Se carga al final de cada para normalizar variables e inconsistencias entre páginas. */ /* ── VARIABLES GLOBALES ESTANDARIZADAS ─────────────────────────────── */ :root { /* Colores principales */ --navy: #2B5BAD; --navy-dark: #1e3f8a; --navy-deep: #0f1e36; --gold: #F5C200; --gold-dark: #D4A800; --white: #ffffff; --light: #f5f6fa; --text: #1f2937; --gray: #6b7280; --border: #e5e7eb; /* Sistema de sombras consistente */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.07); --shadow: 0 4px 20px rgba(0,0,0,0.10); --shadow-md: 0 8px 32px rgba(0,0,0,0.13); --shadow-lg: 0 16px 56px rgba(0,0,0,0.16); /* Sistema de border-radius consistente */ --radius-sm: 6px; --radius: 12px; --radius-lg: 20px; --radius-xl: 30px; /* Espaciado de secciones */ --section-pad: 50px; /* Tipografía */ --h1-size: clamp(2.2rem, 5vw, 3.6rem); --h2-size: clamp(1.6rem, 3vw, 2.4rem); --h3-size: clamp(1.1rem, 2vw, 1.4rem); /* Transición */ --transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* ── TIPOGRAFÍA BASE ────────────────────────────────────────────────── */ body { font-family: 'Open Sans', sans-serif; color: var(--text); line-height: 1.7; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', sans-serif; line-height: 1.15; } /* Títulos de sección uniformes en todas las páginas */ .section-title { font-size: var(--h2-size); font-weight: 700; color: var(--navy); margin-bottom: 16px; line-height: 1.2; } .section-sub, .section-desc { font-size: 1rem; color: var(--gray); line-height: 1.75; margin-bottom: 48px; } /* Hero h1 de páginas internas (no index) */ .page-hero h1 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 800; line-height: 1.1; margin-bottom: 14px; } /* ── SECCIONES — PADDING UNIFORME ──────────────────────────────────── */ section { padding: var(--section-pad) 0; } /* Evitar doble padding en secciones con clase propia */ .page-hero, .stats, .cta-section, .filters, .catalog, .specs-section, .materiales, .about { padding: revert; } /* ── CONTAINER ──────────────────────────────────────────────────────── */ .container { max-width: 1180px; margin: 0 auto; padding: 0 28px; } /* ── PAGE HERO PREMIUM ──────────────────────────────────────────────── */ .page-hero { position: relative !important; background: linear-gradient(135deg, #1e3f8a 0%, #0d1b36 55%, #162d54 100%) !important; min-height: 200px; display: flex; align-items: center; overflow: hidden; padding: 64px 0 !important; border-bottom: none; } .page-hero .container { position: relative; z-index: 2; text-align: center; } .page-hero h1 { color: #fff !important; font-size: clamp(2.2rem, 5vw, 3.6rem) !important; font-weight: 900 !important; margin: 0 !important; line-height: 1.1 !important; letter-spacing: -0.5px; text-shadow: 0 4px 32px rgba(0,0,0,0.4); } .page-hero h1 span { color: var(--gold); } /* Línea dorada inferior animada */ .page-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%); animation: hero-shimmer 3s ease-in-out infinite; } @keyframes hero-shimmer { 0%, 100% { opacity: 0.35; transform: scaleX(0.7); } 50% { opacity: 1; transform: scaleX(1); } } /* Malla sutil de fondo */ .page-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; } /* Coils (resortes) animados */ .hero-coils { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; } .coil { position: absolute; border-radius: 50%; border: 2.5px solid rgba(245,194,0,0.22); animation: coil-rise linear infinite; bottom: -40%; } .coil:nth-child(even) { border-color: rgba(255,255,255,0.1); } @keyframes coil-rise { 0% { transform: translateY(0) rotate(0deg) scaleX(0.55); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 0.5; } 100% { transform: translateY(-160%) rotate(180deg) scaleX(0.55); opacity: 0; } } /* Destello lateral */ .hero-glow { position: absolute; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(245,194,0,0.07) 0%, transparent 70%); pointer-events: none; z-index: 1; animation: glow-pulse 6s ease-in-out infinite; } @keyframes glow-pulse { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.2); opacity: 1; } } /* ── SISTEMA DE BOTONES UNIFICADO ───────────────────────────────────── */ .btn, .btn-gold, .btn-navy, .btn-primary, .btn-outline, .card-cta, .submit-btn { font-family: 'Poppins', sans-serif; font-weight: 600; cursor: pointer; transition: var(--transition); border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; } .btn-gold:hover, .btn-primary:hover { background: var(--gold-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(245,194,0,0.35); } .btn-navy:hover { background: var(--navy-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); } /* ── CARDS — SOMBRAS Y RADIOS UNIFORMES ────────────────────────────── */ .catalog-card, .mat-card, .t-card, .team-card, .info-card, .value-card, .faq-item, .timeline-content, .mv-card, .industry-card, .material-card, .product-card-list, .pv-card { border-radius: var(--radius); } /* Hover de cards consistente */ .catalog-card:hover, .t-card:hover, .industry-card:hover, .material-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } /* ── TIPOGRAFÍA PEQUEÑA — MÍNIMOS LEGIBLES ──────────────────────────── */ .card-badge { font-size: 0.78rem; padding: 4px 12px; } .spec-tag { font-size: 0.8rem; padding: 4px 10px; } .breadcrumb { font-size: 0.88rem; } /* ── CATÁLOGO — GRID MEJORADO PARA PANTALLAS GRANDES ───────────────── */ .catalog-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; } /* Limitar a 3 columnas en pantallas muy anchas */ @media (min-width: 1200px) { .catalog-grid { grid-template-columns: repeat(3, 1fr); } } /* ── FORMULARIOS — ESPACIADO MEJORADO ───────────────────────────────── */ .form-group { margin-bottom: 24px; } label { font-size: 0.88rem; font-weight: 600; margin-bottom: 8px; display: block; color: var(--navy); } input, select, textarea { border-radius: var(--radius-sm); border: 1.5px solid var(--border); padding: 13px 16px; font-size: 1rem; font-family: 'Open Sans', sans-serif; width: 100%; transition: border-color 0.2s, box-shadow 0.2s; outline: none; } input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245,194,0,0.15); } /* ── NAVEGACIÓN — TOPBAR Y HEADER ───────────────────────────────────── */ .topbar { font-size: 0.85rem; } .nav-menu a, .nav-menu li a { font-size: 0.9rem; font-weight: 600; border-radius: var(--radius-sm); transition: var(--transition); } /* ── SECTION LABEL — UNIFORME ───────────────────────────────────────── */ .section-label, .intro-accent-text, .page-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); display: inline-block; margin-bottom: 12px; } /* ── FOOTER ─────────────────────────────────────────────────────────── */ .footer-heading { font-size: 0.95rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } .footer-links a, .footer-links li a { font-size: 0.88rem; } /* ── QUOTE MARKS DE TESTIMONIOS — TAMAÑO UNIFORME ───────────────────── */ .quote-mark, .t-card::before { font-size: 5rem; line-height: 1; } /* ── REVEAL ANIMATION GLOBAL ────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.65s ease, transform 0.65s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } /* ── MOBILE GLOBAL FIXES ────────────────────────────────────────────── */ @media (max-width: 640px) { .container { padding: 0 16px; } :root { --section-pad: 32px; } } /* ── PREFERS REDUCED MOTION GLOBAL ─────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }