/* ════════════════════════════════════════════════════════════════ PROMOTORA AJ — Estilos Principales Theme: Glassmorphism + fondos sólidos de marca Fuentes: Ubuntu (títulos/hero) · Montserrat (cuerpo) Accent dinámico por audiencia via --page-accent ════════════════════════════════════════════════════════════════ */ /* ── Fuentes locales ─────────────────────────────────────────── */ @font-face { font-family:'Ubuntu'; src:url('/fonts/ubuntu/Ubuntu-Light.woff2') format('woff2'); font-weight:300; font-display:swap; } @font-face { font-family:'Ubuntu'; src:url('/fonts/ubuntu/Ubuntu-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; } @font-face { font-family:'Ubuntu'; src:url('/fonts/ubuntu/Ubuntu-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; } @font-face { font-family:'Ubuntu'; src:url('/fonts/ubuntu/Ubuntu-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; } @font-face { font-family:'Montserrat'; src:url('/fonts/montserrat/Montserrat-Light.woff2') format('woff2'); font-weight:300; font-display:swap; } @font-face { font-family:'Montserrat'; src:url('/fonts/montserrat/Montserrat-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; } @font-face { font-family:'Montserrat'; src:url('/fonts/montserrat/Montserrat-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; } @font-face { font-family:'Montserrat'; src:url('/fonts/montserrat/Montserrat-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; } @font-face { font-family:'Montserrat'; src:url('/fonts/montserrat/Montserrat-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; } /* ── Animated custom property (permite transición suave) ────── */ @property --page-accent { syntax: ''; inherits: true; initial-value: #00ABC7; } /* ── Variables ──────────────────────────────────────────────── */ :root { --bg-primary: #ffffff; --bg-secondary: #F8FAFC; --bg-card: #ffffff; --bg-card-hover: #F0FCFE; --border-light: #E2E8F0; --text-primary: #0F172A; --text-secondary:#475569; --text-muted: #94A3B8; /* Accent dinámico — se sobreescribe por página en el */ --page-accent: #00ABC7; --page-accent-rgb: 0, 171, 199; --page-accent-dark:#0090AA; --page-btn-text: #ffffff; /* Colores fijos de marca */ --cyan: #00ABC7; --cyan-dark: #0090AA; --cyan-light: #E6F9FC; --yellow: #F5C500; --yellow-dark: #D4AA00; --yellow-light: #FFFAEB; --dark: #0F172A; --dark-2: #1E293B; --gradient-cyan: linear-gradient(135deg, #00ABC7, #0090AA); --gradient-yellow: linear-gradient(135deg, #F5C500, #D4AA00); --gradient-hero: linear-gradient(135deg, #ffffff 0%, #F0FCFE 60%, #E6F9FC 100%); --gradient-text: linear-gradient(135deg, var(--page-accent), var(--page-accent-dark)); --navbar-h: 72px; --radius-sm: 10px; --radius: 16px; --radius-lg: 24px; --radius-xl: 32px; --shadow-sm: 0 2px 8px rgba(0,0,0,.06); --shadow: 0 4px 24px rgba(0,0,0,.08); --shadow-lg: 0 16px 48px rgba(0,0,0,.1); --shadow-accent: 0 8px 32px rgba(var(--page-accent-rgb), .22); --shadow-gold: 0 8px 32px rgba(245,197,0,.25); --transition: .25s cubic-bezier(.4,0,.2,1); } /* ── Reset & Base ───────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* Ubuntu en todos los títulos y textos hero */ h1, h2, h3, h4, h5, h6, .hero__title, .hero__badge, .section__title, .stat-number, .gradient-text { font-family: 'Ubuntu', 'Montserrat', sans-serif; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } ul { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } input, select, textarea { font-family: inherit; } /* ── Container ──────────────────────────────────────────────── */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); } /* ── Transición suave al cambiar accent ─────────────────────── */ .accent-transition, .accent-transition * { transition: color .4s ease, background-color .4s ease, border-color .4s ease, box-shadow .4s ease !important; } /* ── Card base ───────────────────────────────────────────────── */ .glass-card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow); transition: var(--transition); } .glass-card:hover { border-color: var(--page-accent); box-shadow: var(--shadow-accent); transform: translateY(-3px); } /* ── Gradient Texts ─────────────────────────────────────────── */ .gradient-text { background: var(--gradient-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .gradient-text--gold { background: var(--gradient-yellow); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Variante oscura: para usar sobre el fondo sólido de .hero, que alterna entre amarillo y cian según la audiencia — un degradado ligado a --page-accent siempre coincidiría con uno de los dos y quedaría ilegible. */ .gradient-text--dark { background: linear-gradient(135deg, var(--dark), var(--dark-2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── Orbs (decoración de fondo) ──────────────────────────────── */ .orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0; } .orb--1 { width: 600px; height: 600px; background: radial-gradient(circle, rgba(0,171,199,.12), transparent 70%); top: -10%; left: -15%; } .orb--2 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(245,197,0,.12), transparent 70%); bottom: 0; right: -10%; } .orb--3 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(0,171,199,.08), transparent 70%); top: 50%; left: 50%; transform: translate(-50%,-50%); } .orb--gold { width: 600px; height: 600px; background: radial-gradient(circle, rgba(245,197,0,.15), transparent 70%); } /* ── Textura de hero plano ─────────────────────────────────── Para los heroes que son solo color (--page-accent, amarillo o cian según la audiencia). Dos capas le dan relieve sin depender del color: un foco de luz y un grano fino. Al ir en blanco/negro y con mezcla, se adaptan solas a los dos acentos. Sustituyen a los orbes, que sobre un fondo del mismo tono eran invisibles. */ .hero--textura::before, .hero--textura::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; } .hero--textura::before { background: radial-gradient(110% 80% at 82% 4%, rgba(255,255,255,.38), rgba(255,255,255,0) 55%), radial-gradient(80% 70% at 8% 105%, rgba(0,0,0,.14), rgba(0,0,0,0) 60%); } .hero--textura::after { opacity: .5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); } /* ── Buttons ─────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.5rem; border-radius: var(--radius-sm); font-weight: 600; font-size: .9rem; transition: var(--transition); white-space: nowrap; text-decoration: none; cursor: pointer; border: none; letter-spacing: -.01em; } .btn svg { width: 16px; height: 16px; flex-shrink: 0; } .btn--primary { background: linear-gradient(135deg, var(--page-accent), var(--page-accent-dark)); color: var(--page-btn-text, #fff); box-shadow: 0 4px 16px rgba(var(--page-accent-rgb), .35); transition: transform var(--transition), box-shadow var(--transition), background .4s ease, color .4s ease; } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(var(--page-accent-rgb), .45); } .btn--gold { background: var(--gradient-yellow); color: #0F172A; box-shadow: 0 4px 16px rgba(245,197,0,.35); font-weight: 700; } .btn--gold:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(245,197,0,.45); } .btn--outline { background: transparent; color: var(--page-accent); border: 2px solid var(--page-accent); transition: background .3s, color .3s, border-color .4s; } .btn--outline:hover { background: var(--page-accent); color: var(--page-btn-text, #fff); } .btn--ghost { background: rgba(var(--page-accent-rgb), .08); color: var(--page-accent); border: 1px solid rgba(var(--page-accent-rgb), .2); transition: background .3s, color .4s; } .btn--ghost:hover { background: rgba(var(--page-accent-rgb), .14); } .btn--dark { background: var(--dark); color: #fff; } .btn--dark:hover { background: var(--dark-2); transform: translateY(-2px); } .btn--sm { padding: .5rem 1rem; font-size: .825rem; } .btn--lg { padding: 1rem 2rem; font-size: 1rem; border-radius: var(--radius); } .btn:disabled { opacity: .6; cursor: not-allowed; transform: none !important; } /* ── Navbar ─────────────────────────────────────────────────── */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--navbar-h); transition: var(--transition); } .navbar.scrolled { background: rgba(255,255,255,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border-light); box-shadow: var(--shadow-sm); } .navbar__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 2rem; } .navbar__logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; } .navbar__logo-img { /* Los PNG vienen recortados al arte (sin aire transparente en el lienzo), así que la altura es la del logo real, no la del lienzo. */ height: 39px; width: auto; display: block; object-fit: contain; } /* Variantes del logo según el fondo del navbar: --scrolled: logo completo a color (fondos claros: page-hero y navbar con scroll) --flat: texto negro sin rayos (hero amarillo sólido, donde los rayos no contrastan) --dark: texto blanco (hero oscuro en modo empresas) Solo inicio y oportunidades tienen hero de color (.hero); el resto usa page-hero claro, donde el logo a color es el correcto. Descendiente (main .hero), no hijo directo (main > .hero): en Inicio .hero vive dentro de .hero-group, así que el combinador > dejaría de matchear. */ .navbar__logo-img--flat, .navbar__logo-img--dark { display: none; } body:has(main .hero) .navbar:not(.scrolled) .navbar__logo-img--scrolled { display: none; } body:has(main .hero) .navbar:not(.scrolled) .navbar__logo-img--flat { display: block; } body.aud-empresas:has(main .hero) .navbar:not(.scrolled) .navbar__logo-img--flat { display: none; } body.aud-empresas:has(main .hero) .navbar:not(.scrolled) .navbar__logo-img--dark { display: block; } /* .hero--sura siempre es oscuro y no participa del cross-fade de audiencia: sin esto, en modo Personas se mostraba el logo --flat (texto negro), que se pierde por completo contra el fondo azul marino del hero. */ body:has(main > .hero--sura) .navbar:not(.scrolled) .navbar__logo-img--flat { display: none; } body:has(main > .hero--sura) .navbar:not(.scrolled) .navbar__logo-img--dark { display: block; } /* El toggle Personas/Empresas usa var(--page-accent) como color de texto/borde, que es el MISMO color que el fondo sólido del hero (.hero) cuando el navbar flota transparente sobre él (sin scroll) — sin este override el texto queda invisible sobre su propio fondo, en ambos modos. El toggle además recibe su propio fondo translúcido (no solo el borde): en Inicio queda sobre el hero__bg 3D, cuyo color va de claro a muy oscuro según el punto — un texto oscuro fijo se pierde contra esas zonas oscuras. El fondo esmerilado le da al texto una superficie propia y predecible en vez de depender de lo que haya detrás. */ body:has(main .hero) .navbar:not(.scrolled) .aud-toggle { border-color: rgba(15,23,42,.35); background: rgba(255,255,255,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } body:has(main .hero) .navbar:not(.scrolled) .aud-opt { color: var(--dark); } body:has(main .hero) .navbar:not(.scrolled) .aud-opt + .aud-opt { border-left-color: rgba(15,23,42,.25); } body:has(main .hero) .navbar:not(.scrolled) .aud-opt.active { background: rgba(255,255,255,.92); color: var(--dark); } /* Mismo caso para los enlaces de navegación: --text-secondary (#475569) es un gris pensado para el navbar blanco y sobre el hero de color no contrasta (2.7:1 sobre el cian de Empresas). El enlace activo no se ve afectado: main.js le pone color y fondo en línea. */ body:has(main .hero) .navbar:not(.scrolled) .nav-link { color: var(--dark); } body:has(main .hero) .navbar:not(.scrolled) .nav-link:hover { color: var(--dark); background: rgba(255,255,255,.35); } /* .hero--sura también es .hero, pero su fondo es un degradado oscuro: ahí el texto oscuro se pierde (1.2:1). Los controles del navbar van en claro. */ body:has(main > .hero--sura) .navbar:not(.scrolled) .nav-link, body:has(main > .hero--sura) .navbar:not(.scrolled) .aud-opt { color: rgba(255,255,255,.88); } body:has(main > .hero--sura) .navbar:not(.scrolled) .nav-link:hover { color: #fff; background: rgba(255,255,255,.14); } body:has(main > .hero--sura) .navbar:not(.scrolled) .aud-toggle { border-color: rgba(255,255,255,.35); } body:has(main > .hero--sura) .navbar:not(.scrolled) .aud-opt + .aud-opt { border-left-color: rgba(255,255,255,.25); } body:has(main > .hero--sura) .navbar:not(.scrolled) .aud-opt.active { background: rgba(255,255,255,.92); color: var(--dark); } /* Legacy — ya no se usa pero evita errores en CSS */ .logo-mark { flex-shrink: 0; } .logo-text { font-size: 1.1rem; font-weight: 700; color: var(--dark); letter-spacing: -.02em; } .logo-text strong { color: var(--page-accent); transition: color .4s; } .navbar__nav { display: flex; align-items: center; gap: .25rem; flex: 1; justify-content: center; } .nav-link { padding: .5rem .875rem; border-radius: var(--radius-sm); font-size: .875rem; font-weight: 500; color: var(--text-secondary); transition: var(--transition); } .nav-link:hover { color: var(--page-accent); background: rgba(var(--page-accent-rgb), .08); transition: color .3s, background .3s; } .nav-link--active { color: var(--page-accent) !important; } .navbar__actions { display: flex; align-items: center; gap: 1rem; } /* Hamburger */ .hamburger { display: none; flex-direction: column; gap: 5px; padding: .5rem; } .hamburger span { display: block; width: 22px; height: 2px; background: var(--dark); border-radius: 2px; transition: var(--transition); } .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile nav */ .mobile-nav { display: none; flex-direction: column; padding: 1rem 1.5rem 1.5rem; background: rgba(255,255,255,.97); backdrop-filter: blur(16px); border-top: 1px solid var(--border-light); box-shadow: var(--shadow-lg); gap: .25rem; } .mobile-nav.open { display: flex; } .mobile-nav__link { padding: .75rem 1rem; border-radius: var(--radius-sm); color: var(--text-secondary); font-weight: 500; transition: var(--transition); } .mobile-nav__link:hover { color: var(--page-accent); background: rgba(var(--page-accent-rgb), .08); } /* ── Hero ───────────────────────────────────────────────────── */ .hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; /* Fondo sólido que cambia con la audiencia */ background: var(--page-accent); overflow: hidden; padding: var(--navbar-h) 0 0; transition: background .45s ease; } /* Textos del hero siempre sobre el fondo sólido de color */ .hero .hero__title { color: var(--dark); } .hero .hero__subtitle { color: rgba(15,23,42,.88); font-weight: 500; } .hero .hero__badge { background: rgba(255,255,255,.4); border-color: rgba(255,255,255,.6); color: var(--dark); } .hero .stat-card { background: rgba(255,255,255,.92); border-color: rgba(255,255,255,.9); box-shadow: 0 12px 32px rgba(15,23,42,.1); } .hero .stat-number { color: var(--dark); } .hero .stat-label { color: rgba(15,23,42,.78); } .hero .btn--ghost { color: var(--dark); border-color: rgba(15,23,42,.3); } .hero .btn--ghost:hover { background: rgba(15,23,42,.1); } .hero .scroll-indicator { color: rgba(15,23,42,.55); } .hero__content { position: relative; z-index: 1; text-align: center; padding: 6rem 1rem 4rem; } .hero__badge { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem 1rem; background: rgba(var(--page-accent-rgb), .1); border: 1px solid rgba(var(--page-accent-rgb), .3); border-radius: 100px; font-size: .8rem; font-weight: 600; color: var(--page-accent-dark); margin-bottom: 1.75rem; letter-spacing: .04em; text-transform: uppercase; transition: background .4s, border-color .4s, color .4s; } .hero__badge svg { width: 14px; height: 14px; } .hero__title { font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 900; letter-spacing: -.04em; line-height: 1.05; margin-bottom: 1.5rem; color: var(--dark); } .hero__subtitle { font-size: clamp(1rem, 2vw, 1.2rem); color: var(--text-secondary); max-width: 640px; margin: 0 auto 2.5rem; line-height: 1.7; } .hero__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 4rem; } .hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 660px; margin: 0 auto; } .stat-card { display: flex; flex-direction: column; align-items: center; padding: 1.5rem 1rem; text-align: center; border-radius: var(--radius); background: var(--bg-card); border: 1px solid var(--border-light); box-shadow: var(--shadow); } .stat-number { font-size: 2rem; font-weight: 900; color: var(--page-accent); letter-spacing: -.03em; transition: color .4s; } .stat-label { font-size: .78rem; color: var(--text-muted); margin-top: .3rem; font-weight: 500; } .scroll-indicator { position: absolute; bottom: .5rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .5rem; color: var(--text-muted); font-size: .75rem; animation: bounce 2s infinite; z-index: 1; } .scroll-indicator svg { width: 20px; height: 20px; } @keyframes bounce { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } } /* ── Audience filtering ──────────────────────────────────────── */ /* Oculta contenido de la audiencia que NO está activa. :not(.aud-opt) excluye los botones del toggle, que también llevan data-aud pero deben permanecer siempre visibles para poder cambiar. */ body.aud-personas [data-aud="empresas"]:not(.aud-opt) { display: none !important; } body.aud-empresas [data-aud="personas"]:not(.aud-opt) { display: none !important; } /* ── Audience Toggle — rectángulo con borde ──────────────────── */ .aud-toggle { display: flex; align-items: center; border: 2px solid var(--page-accent); border-radius: 4px; overflow: hidden; flex-shrink: 0; } .aud-toggle--full { width: 100%; } .aud-opt { display: flex; align-items: center; justify-content: center; padding: .38rem 1rem; font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--page-accent); cursor: pointer; transition: background .25s, color .25s; border: none; background: transparent; white-space: nowrap; font-family: 'Montserrat', sans-serif; } .aud-opt + .aud-opt { border-left: 1.5px solid var(--page-accent); } .aud-opt.active { background: var(--page-accent); color: var(--page-btn-text, #fff); } .aud-toggle--full .aud-opt { flex: 1; } /* ── Stripe accent ─────────────────────────────────────────── */ .stripe { height: 5px; background: linear-gradient(90deg, var(--cyan) 0%, var(--yellow) 100%); } /* ── Page Hero ───────────────────────────────────────────────── */ .page-hero { position: relative; min-height: 44vh; display: flex; align-items: center; background: var(--gradient-hero); overflow: hidden; padding: var(--navbar-h) 0 0; border-bottom: 1px solid var(--border-light); } .page-hero__content { position: relative; z-index: 1; text-align: center; padding: 5rem 1rem 4rem; } .page-hero__title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 900; letter-spacing: -.04em; line-height: 1.1; color: var(--dark); margin: 1rem 0; } .page-hero__subtitle { color: var(--text-secondary); font-size: 1.0625rem; max-width: 600px; margin: 0 auto; line-height: 1.7; } /* ═══════════════════════════════════════════════════════════════ PREVIEW — CARRUSEL EN LOOP COMO TEXTURA DE FONDO (page-hero) Franja de fotos reales (las que se quitaron de las tarjetas de seguros) desplazándose en loop continuo, atenuada bajo un velo claro para que el título y subtítulo del hero sigan siendo perfectamente legibles encima. ═══════════════════════════════════════════════════════════════ */ .hero-marquee { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .hero-marquee::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.92) 55%, rgba(255,255,255,.97) 100%); } .hero-marquee__track { display: flex; align-items: stretch; height: 100%; width: max-content; animation: heroMarquee 95s linear infinite; will-change: transform; } .hero-marquee__track img { height: 100%; width: auto; object-fit: cover; opacity: .5; filter: saturate(.7); flex-shrink: 0; } @keyframes heroMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .hero-marquee__track { animation: none; } } /* ── Sections ────────────────────────────────────────────────── */ .section { padding: 6rem 0; position: relative; } .section--alt { background: var(--bg-secondary); } .section--trust { padding: 2.5rem 0; background: var(--dark); border: none; } .section--dark { background: var(--dark); color: #fff; } .section__header { text-align: center; margin-bottom: 3.5rem; } .section__tag { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .9rem; background: rgba(var(--page-accent-rgb), .08); border: 1px solid rgba(var(--page-accent-rgb), .2); border-radius: 100px; font-size: .78rem; font-weight: 700; color: var(--page-accent); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 1.25rem; transition: background .4s, border-color .4s, color .4s; } .section__tag svg { width: 12px; height: 12px; } .section__title { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; margin-bottom: 1rem; color: var(--dark); } .section__subtitle { color: var(--text-secondary); font-size: 1.0625rem; max-width: 560px; margin: 0 auto; line-height: 1.7; } /* ── Cards Grid ─────────────────────────────────────────────── */ .cards-grid { display: grid; gap: 1.25rem; } .cards-grid--2 { grid-template-columns: repeat(2, 1fr); } .cards-grid--3 { grid-template-columns: repeat(3, 1fr); } .cards-grid--4 { grid-template-columns: repeat(4, 1fr); } /* ── Ramo Cards ─────────────────────────────────────────────── */ .ramo-card { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 2rem; text-decoration: none; color: var(--text-primary); cursor: pointer; } .ramo-card__photo { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .35; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 78%); mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 78%); z-index: 0; transition: opacity .4s; } .ramo-card:hover .ramo-card__photo { opacity: .48; } .ramo-card > *:not(.ramo-card__photo) { position: relative; z-index: 1; } .ramo-card__icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; } .ramo-card__icon svg { width: 24px; height: 24px; } .ramo-card__icon-img { width: 24px; height: 24px; object-fit: contain; } .ramo-card__icon--lg { width: 64px; height: 64px; border-radius: 16px; } .ramo-card__icon--lg svg { width: 28px; height: 28px; } .ramo-card__icon--lg .ramo-card__icon-img { width: 28px; height: 28px; } /* Enlace a la página oficial del producto en SURA (solo algunos ramos lo tienen) */ .ramo-card__enlace { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; margin-top: .6rem; font-size: .8rem; font-weight: 600; color: var(--page-accent); text-decoration: none; transition: color var(--transition); } .ramo-card__enlace:hover { text-decoration: underline; } .ramo-card__enlace svg { width: 14px; height: 14px; } .ramo-card__title { font-size: 1.0625rem; font-weight: 700; margin-bottom: .5rem; color: var(--dark); } .ramo-card__desc { color: var(--text-secondary); font-size: .875rem; line-height: 1.6; flex: 1; } .ramo-card__cta { display: flex; align-items: center; gap: .4rem; color: var(--page-accent); font-size: .825rem; font-weight: 600; margin-top: 1.25rem; transition: color .4s; } .ramo-card__cta svg { width: 14px; height: 14px; transition: transform var(--transition); } .ramo-card:hover .ramo-card__cta svg { transform: translateX(4px); } .ramo-card--full .ramo-card__features { list-style: none; margin: 1rem 0 1.5rem; display: flex; flex-direction: column; gap: .5rem; } .ramo-card--full .ramo-card__features li { display: flex; align-items: center; gap: .5rem; font-size: .825rem; color: var(--text-secondary); } .ramo-card--full .ramo-card__features li svg { width: 14px; height: 14px; color: var(--page-accent); flex-shrink: 0; transition: color .4s; } /* ── Why Us ─────────────────────────────────────────────────── */ .why__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } .why__features { display: flex; flex-direction: column; gap: 1rem; } .why__feature { display: flex; gap: 1.25rem; align-items: flex-start; padding: 1.5rem; } .why__icon { width: 48px; height: 48px; background: rgba(var(--page-accent-rgb), .1); color: var(--page-accent); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .4s, color .4s; } .why__icon svg { width: 22px; height: 22px; } .why__feature h4 { font-size: .9375rem; font-weight: 700; margin-bottom: .3rem; color: var(--dark); } .why__feature p { color: var(--text-secondary); font-size: .8375rem; line-height: 1.6; } /* ── Trust Strip ─────────────────────────────────────────────── */ .trust__label { text-align: center; font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 1.5rem; } .trust__logos { display: flex; align-items: center; justify-content: center; gap: 2.5rem; flex-wrap: wrap; } .trust__logo-item svg rect { fill: rgba(255,255,255,.1); } .trust__logo-item svg text { fill: rgba(255,255,255,.7); } .trust__logo-item { opacity: .8; transition: opacity var(--transition); } .trust__logo-item:hover { opacity: 1; } /* ── CTA SURA ────────────────────────────────────────────────── */ .cta-sura { overflow: hidden; } .cta-sura__inner { display: grid; grid-template-columns: 1.4fr .6fr; gap: 3rem; padding: 3.5rem; align-items: center; position: relative; overflow: hidden; background: linear-gradient(135deg, var(--dark) 0%, #132040 100%); color: #fff; } .cta-sura__inner .section__tag { color: var(--yellow); border-color: rgba(245,197,0,.3); background: rgba(245,197,0,.08); } .cta-sura__content h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -.03em; margin-bottom: 1rem; color: #fff; } .cta-sura__content p { color: rgba(255,255,255,.7); line-height: 1.7; margin-bottom: 1.5rem; } .feature-list { list-style: none; display: flex; flex-direction: column; gap: .6rem; margin-bottom: 2rem; } .feature-list li, .feature-item { display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: rgba(255,255,255,.75); } .cta-sura__inner .feature-list li { color: rgba(255,255,255,.75); } .feature-list li svg, .feature-item svg { width: 16px; height: 16px; color: var(--page-accent); flex-shrink: 0; transition: color .4s; } .feature-item { color: var(--text-secondary); } .feature-item svg { color: var(--cyan); } .cta-sura__visual { display: flex; align-items: center; justify-content: center; position: relative; } .cta-sura__badge { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 2.5rem; background: rgba(245,197,0,.1); border: 1px solid rgba(245,197,0,.25); border-radius: var(--radius-lg); text-align: center; position: relative; z-index: 1; } .cta-sura__badge svg { width: 48px; height: 48px; color: var(--yellow); } .cta-sura__badge span { font-size: 1.75rem; font-weight: 900; color: var(--yellow); } .cta-sura__badge small { color: rgba(255,255,255,.5); font-size: .8rem; } .cta-sura__orb { position: absolute; width: 250px; height: 250px; background: radial-gradient(circle, rgba(245,197,0,.2), transparent 70%); border-radius: 50%; } /* ── Testimonials ────────────────────────────────────────────── */ .testimonial-card { padding: 2rem; display: flex; flex-direction: column; gap: 1.25rem; } .testimonial__stars { color: var(--yellow); font-size: 1.25rem; letter-spacing: 2px; } .testimonial-card p { color: var(--text-secondary); font-size: .9rem; line-height: 1.7; flex: 1; font-style: italic; } .testimonial__author { display: flex; align-items: center; gap: .875rem; } .testimonial__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--gradient-cyan); display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; color: #fff; flex-shrink: 0; } .testimonial__author strong { display: block; font-size: .875rem; color: var(--dark); } .testimonial__author span { font-size: .775rem; color: var(--text-muted); } /* ── Mini Contact ─────────────────────────────────────────────── */ .contact-mini { padding: 3rem; } .contact-mini h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; margin-bottom: .75rem; color: var(--dark); } .contact-mini p { color: var(--text-secondary); margin-bottom: 2rem; } .contact-mini__options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .contact-option { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: var(--radius); transition: var(--transition); } .contact-option:hover { background: rgba(var(--page-accent-rgb), .07); border-color: var(--page-accent); } .contact-option svg { width: 24px; height: 24px; color: var(--page-accent); flex-shrink: 0; transition: color .4s; } .contact-option strong { display: block; font-size: .875rem; color: var(--dark); } .contact-option span { font-size: .8rem; color: var(--text-secondary); } /* ── Badges ──────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; padding: .2rem .65rem; border-radius: 100px; font-size: .7rem; font-weight: 600; letter-spacing: .02em; } .badge--blue { background: rgba(var(--page-accent-rgb), .1); color: var(--page-accent-dark); border: 1px solid rgba(var(--page-accent-rgb), .2); transition: background .4s, color .4s, border-color .4s; } .badge--gold { background: var(--yellow-light); color: #8B6E00; border: 1px solid rgba(245,197,0,.3); } .badge--gray { background: var(--bg-secondary); color: var(--text-muted); border: 1px solid var(--border-light); } /* ── Tabs ────────────────────────────────────────────────────── */ .tabs { display: flex; gap: .5rem; background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: var(--radius); padding: .4rem; margin-bottom: 2rem; width: fit-content; } .tab-btn { display: flex; align-items: center; gap: .5rem; padding: .6rem 1.25rem; border-radius: calc(var(--radius) - 4px); font-size: .875rem; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: var(--transition); border: none; background: transparent; } .tab-btn svg { width: 16px; height: 16px; } .tab-btn.active { background: var(--bg-card); color: var(--page-accent); box-shadow: var(--shadow-sm); transition: color .4s; } .tab-btn:hover:not(.active) { color: var(--dark); background: rgba(0,0,0,.04); } .tab-panel { display: none; } .tab-panel.active { display: block; } /* ── Advisor Cards ───────────────────────────────────────────── */ .asesor-card { padding: 1.75rem; display: flex; flex-direction: column; gap: 1.25rem; } .asesor-card__header { display: flex; align-items: flex-start; gap: 1rem; } .asesor-card__avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--page-accent), var(--page-accent-dark)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; color: var(--page-btn-text, #fff); flex-shrink: 0; letter-spacing: -.01em; transition: background .4s, color .4s; } .asesor-card__info h3 { font-size: .9375rem; font-weight: 700; line-height: 1.3; margin-bottom: .35rem; color: var(--dark); } .asesor-card__meta { display: flex; flex-direction: column; gap: .4rem; } .asesor-card__meta span { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--text-muted); } .asesor-card__meta svg { width: 13px; height: 13px; color: var(--page-accent); transition: color .4s; } .asesor-card__certs { display: flex; flex-wrap: wrap; gap: .4rem; } .asesor-card__actions { display: flex; gap: .75rem; margin-top: auto; } .asesor-card__actions .btn { flex: 1; justify-content: center; } /* ── Agency Cards ────────────────────────────────────────────── */ .agencia-card { padding: 1.75rem; display: flex; flex-direction: column; gap: 1.25rem; } .agencia-card__header { display: flex; align-items: flex-start; gap: 1rem; } .agencia-card__icon { width: 48px; height: 48px; background: rgba(var(--page-accent-rgb), .1); color: var(--page-accent); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .4s, color .4s; } .agencia-card__icon svg { width: 22px; height: 22px; } .agencia-card__header h3 { font-size: .9375rem; font-weight: 700; line-height: 1.3; margin-bottom: .35rem; color: var(--dark); } .agencia-card__meta p { display: flex; align-items: flex-start; gap: .5rem; font-size: .825rem; color: var(--text-muted); margin-bottom: .4rem; line-height: 1.5; } .agencia-card__meta svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 2px; color: var(--page-accent); transition: color .4s; } .agencia-card__meta a { color: var(--text-secondary); transition: color var(--transition); } .agencia-card__meta a:hover { color: var(--cyan); } .agencia-card__actions { display: flex; gap: .75rem; margin-top: auto; } .agencia-card__actions .btn { flex: 1; justify-content: center; } /* ── Filters ─────────────────────────────────────────────────── */ .filters { padding: 1.5rem; display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-end; } .filters__group { display: flex; flex-direction: column; gap: .4rem; flex: 1; min-width: 180px; } .filters__group label { display: flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; } .filters__group label svg { width: 12px; height: 12px; } /* ── Forms ───────────────────────────────────────────────────── */ .form { display: flex; flex-direction: column; gap: 1.25rem; } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .form__group { display: flex; flex-direction: column; gap: .5rem; } .form__label { font-size: .825rem; font-weight: 600; color: var(--dark); } .form-input, .form-select { width: 100%; padding: .75rem 1rem; background: var(--bg-secondary); border: 1.5px solid var(--border-light); border-radius: var(--radius-sm); color: var(--dark); font-size: .9rem; transition: var(--transition); appearance: none; -webkit-appearance: none; outline: none; } .form-input::placeholder { color: var(--text-muted); } .form-input:focus, .form-select:focus { border-color: var(--page-accent); background: rgba(var(--page-accent-rgb), .04); box-shadow: 0 0 0 3px rgba(var(--page-accent-rgb), .1); } .form-textarea { resize: vertical; min-height: 110px; } .form__error { font-size: .78rem; color: #ef4444; display: none; } .form__error:not(:empty) { display: block; } .form-select option { background: #fff; color: var(--dark); } .form-card { padding: 2.5rem; } .form-card__header { margin-bottom: 2rem; } .form-card__header h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: .5rem; color: var(--dark); } .form-card__header p { color: var(--text-secondary); font-size: .9rem; } /* Radio group */ .radio-group { display: flex; gap: 1.5rem; } .radio-option { display: flex; align-items: center; gap: .5rem; font-size: .9rem; cursor: pointer; color: var(--text-secondary); } .radio-option input { accent-color: var(--cyan); width: 16px; height: 16px; } /* ── SURA Products selector ──────────────────────────────────── */ .sura-products { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 2rem; } .sura-product { display: flex; align-items: center; gap: .875rem; padding: .875rem 1rem; background: var(--bg-secondary); border: 1.5px solid var(--border-light); border-radius: var(--radius); cursor: pointer; transition: var(--transition); } .sura-product svg { width: 20px; height: 20px; color: var(--text-muted); transition: color var(--transition); flex-shrink: 0; } .sura-product strong { display: block; font-size: .85rem; font-weight: 600; color: var(--dark); } .sura-product small { color: var(--text-muted); font-size: .75rem; } .sura-product.active, .sura-product:hover { border-color: var(--yellow); background: var(--yellow-light); } .sura-product.active svg, .sura-product:hover svg { color: var(--yellow-dark); } /* ── Hero SURA landing ──────────────────────────────────────── */ .hero--sura { background: linear-gradient(135deg, var(--dark) 0%, #0c1a3d 100%); } .hero--sura .hero__title { color: #fff; } .hero--sura .hero__subtitle { color: rgba(255,255,255,.7); } .hero--sura .section__tag { color: var(--yellow); border-color: rgba(245,197,0,.35); background: rgba(245,197,0,.1); } .hero--sura .form-card { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.04); backdrop-filter: blur(12px); } .hero--sura .form-card__header h2 { color: #fff; } .hero--sura .form-card__header p { color: rgba(255,255,255,.6); } .hero--sura .form__label { color: rgba(255,255,255,.85); } .hero--sura .form-input, .hero--sura .form-select { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); color: #fff; } .hero--sura .form-input::placeholder { color: rgba(255,255,255,.35); } .hero--sura .form-input:focus, .hero--sura .form-select:focus { border-color: var(--yellow); background: rgba(245,197,0,.06); } .hero--sura .form-select option { background: #0c1a3d; color: #fff; } .hero--sura .radio-option { color: rgba(255,255,255,.7); } .hero--sura .sura-product { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); } .hero--sura .sura-product strong { color: #fff; } /* ── Vida SURA: pilares del Plan Vive ───────────────────────────── */ .plan-pillar { padding: 1.75rem; text-align: center; } .plan-pillar__icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; background: rgba(var(--page-accent-rgb), .12); color: var(--page-accent-dark); } .plan-pillar__icon svg { width: 24px; height: 24px; } .plan-pillar h4 { font-size: 1rem; margin-bottom: .5rem; color: var(--dark); } .plan-pillar p { color: var(--text-secondary); font-size: .875rem; line-height: 1.6; } /* Datos rápidos (edad, suma, prima) en las tarjetas de plan */ .plan-facts { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0; } /* ── FAQ (details/summary, sin JS) ───────────────────────────────── */ .faq-item { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: .75rem; } .faq-item summary { cursor: pointer; font-weight: 600; color: var(--dark); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary svg { width: 18px; height: 18px; color: var(--page-accent); flex-shrink: 0; transition: transform .3s; } .faq-item[open] summary svg { transform: rotate(180deg); } .faq-item p { color: var(--text-secondary); font-size: .9rem; line-height: 1.6; margin-top: .75rem; } /* ── Alerts ──────────────────────────────────────────────────── */ .alert { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.25rem; border-radius: var(--radius-sm); margin-bottom: 1.5rem; } .alert svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; } .alert strong { display: block; font-size: .9rem; margin-bottom: .2rem; } .alert p { font-size: .825rem; } .alert--success { background: rgba(var(--page-accent-rgb), .08); border: 1px solid rgba(var(--page-accent-rgb), .25); color: var(--page-accent-dark); } .alert--success svg { color: var(--page-accent); } /* ── Modal genérico ──────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.6); display: flex; align-items: center; justify-content: center; padding: 1.5rem; z-index: 1000; } .modal-box { background: var(--bg-card); border-radius: var(--radius-lg); padding: 2rem; max-width: 440px; width: 100%; text-align: center; box-shadow: var(--shadow-accent); } .modal-box__icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(245,158,11,.12); color: #f59e0b; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; } .modal-box__icon svg { width: 28px; height: 28px; } .modal-box h3 { font-size: 1.15rem; margin-bottom: .75rem; color: var(--dark); } .modal-box p { color: var(--text-secondary); font-size: .9rem; line-height: 1.7; margin-bottom: 1.5rem; } .modal-box__actions { display: flex; flex-direction: column; gap: .75rem; } /* ── Success state ───────────────────────────────────────────── */ .success-state { text-align: center; padding: 3rem 1rem; } .success-icon { width: 80px; height: 80px; background: rgba(var(--page-accent-rgb), .1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; transition: background .4s; } .success-icon svg { width: 40px; height: 40px; color: var(--page-accent); transition: color .4s; } .success-state h2 { font-size: 1.5rem; font-weight: 800; margin-bottom: .75rem; color: var(--dark); } .success-state p { color: var(--text-secondary); line-height: 1.7; } /* ── Contact Page ────────────────────────────────────────────── */ .contact-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; align-items: start; } .contact-channels { display: flex; flex-direction: column; gap: 1rem; } .contact-channel { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem; text-decoration: none; color: var(--text-primary); transition: var(--transition); background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .contact-channel:hover { border-color: var(--page-accent); box-shadow: var(--shadow-accent); transform: translateY(-2px); } .contact-channel__icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-channel__icon svg { width: 20px; height: 20px; } .contact-channel strong { display: block; font-size: .875rem; font-weight: 700; margin-bottom: .2rem; color: var(--dark); } .contact-channel span { display: block; color: var(--text-secondary); font-size: .85rem; } .contact-channel small { display: block; color: var(--text-muted); font-size: .775rem; margin-top: .15rem; } /* ── Yellow accent bar ───────────────────────────────────────── */ .accent-bar { width: 48px; height: 4px; background: var(--page-accent); border-radius: 2px; margin: 1rem 0 1.5rem; transition: background .4s; } /* ── Footer ──────────────────────────────────────────────────── */ .footer { border-top: 1px solid var(--border-light); padding: 4rem 0 2rem; background: var(--dark); color: rgba(255,255,255,.85); } .footer__logo-img { height: 67px; width: auto; display: block; object-fit: contain; } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 3rem; margin-bottom: 3rem; } .footer__brand .navbar__logo { display: inline-flex; margin-bottom: 1rem; } .footer__brand .logo-text { color: #fff; } .footer__brand .logo-text strong { color: var(--cyan); } .footer__desc { color: rgba(255,255,255,.5); font-size: .875rem; line-height: 1.7; max-width: 280px; margin-bottom: 1.5rem; } .footer__social { display: flex; gap: .75rem; } .social-link { width: 36px; height: 36px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.5); transition: var(--transition); } .social-link:hover { color: #fff; border-color: var(--cyan); background: rgba(0,171,199,.2); } /* Footer siempre en cyan de marca, independiente del accent de página */ .social-link svg { width: 16px; height: 16px; } .footer__links h4, .footer__contact h4 { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 1.25rem; } .footer__links ul li, .footer__contact ul li { margin-bottom: .65rem; } .footer__links a { font-size: .875rem; color: rgba(255,255,255,.55); transition: color var(--transition); } .footer__links a:hover { color: var(--cyan); } .footer__contact ul li { display: flex; align-items: flex-start; gap: .6rem; font-size: .875rem; color: rgba(255,255,255,.5); } .footer__contact svg { width: 14px; height: 14px; color: var(--cyan); flex-shrink: 0; margin-top: 3px; } .footer__contact a { color: rgba(255,255,255,.55); transition: color var(--transition); } .footer__contact a:hover { color: var(--cyan); } .footer__bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: .8rem; color: rgba(255,255,255,.3); } /* ── Animations ──────────────────────────────────────────────── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-up { animation: fadeUp .65s ease forwards; opacity: 0; } .spin { animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ── No results ──────────────────────────────────────────────── */ #noResults, #noResultsAg { text-align: center; padding: 4rem 0; color: var(--text-muted); } #noResults svg, #noResultsAg svg { margin: 0 auto 1rem; display: block; } /* ── Responsive ──────────────────────────────────────────────── */ @media (max-width: 1024px) { .cards-grid--4 { grid-template-columns: repeat(2, 1fr); } .hero__stats { grid-template-columns: repeat(3, 1fr); } .footer__grid { grid-template-columns: 1fr 1fr; } .why__layout { grid-template-columns: 1fr; gap: 3rem; } .cta-sura__inner { grid-template-columns: 1fr; } .cta-sura__visual { display: none; } .contact-layout { grid-template-columns: 1fr; } .contact-mini__options { grid-template-columns: 1fr; } } @media (max-width: 768px) { :root { --navbar-h: 64px; } .navbar__nav { display: none; } .hamburger { display: flex; } /* El toggle y el botón de contacto ya están dentro del menú móvil. Si se quedan aquí, empujan el hamburger fuera del viewport y el menú queda inalcanzable: en móvil no había forma de navegar. */ .navbar__actions .aud-toggle, .navbar__actions #navContactBtn { display: none; } .cards-grid--3, .cards-grid--2, .cards-grid--4 { grid-template-columns: 1fr; } .hero__stats { grid-template-columns: repeat(2, 1fr); } .form__row { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr; gap: 2rem; } .footer__bottom { flex-direction: column; text-align: center; } .sura-products { grid-template-columns: 1fr; } .section { padding: 4rem 0; } .page-hero__content, .hero__content { padding: 4rem 1rem 3rem; } .form-card { padding: 1.5rem; } /* Safari en iOS hace zoom automático al enfocar un campo con font-size < 16px, y deja la página desencuadrada al salir. 16px lo evita. */ .form-input, .form-select, .form-textarea { font-size: 16px; } .cta-sura__inner { padding: 2rem; } .hero__actions { flex-direction: column; align-items: center; } .hero--sura .container { grid-template-columns: 1fr !important; gap: 2rem !important; padding-top: 80px !important; } .tabs { width: 100%; } } @media (max-width: 480px) { .hero__stats { grid-template-columns: 1fr 1fr; } .radio-group { flex-direction: column; } .asesor-card__actions, .agencia-card__actions { flex-direction: column; } } @media print { .navbar, .footer, .btn, .orb { display: none !important; } body { background: white; color: black; } } /* ═══════════════════════════════════════════════════════════════ BOTÓN HERO (sobre fondo sólido de color) ═══════════════════════════════════════════════════════════════ */ .btn--hero-solid { display: inline-flex; align-items: center; gap: .6rem; padding: .85rem 2rem; background: var(--dark); color: #fff; font-weight: 700; font-size: 1rem; border-radius: 4px; border: 2px solid var(--dark); transition: background .25s, color .25s; font-family: 'Montserrat', sans-serif; } .btn--hero-solid:hover { background: transparent; color: var(--dark); } /* ═══════════════════════════════════════════════════════════════ A4: BARRA DE PRODUCTOS ═══════════════════════════════════════════════════════════════ */ .products-bar { background: var(--page-accent); border-top: 3px solid rgba(0,0,0,.1); border-bottom: 3px solid rgba(0,0,0,.1); transition: background .45s ease; } .products-bar__grid { display: flex; justify-content: center; flex-wrap: wrap; } .product-item { display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: 1.1rem 1.5rem; border-right: 1px solid rgba(0,0,0,.1); cursor: pointer; transition: background .2s; text-decoration: none; color: var(--dark); } .product-item:last-child { border-right: none; } .product-item:hover { background: rgba(0,0,0,.08); } .product-item__icon { width: 42px; height: 42px; border: 2px solid rgba(0,0,0,.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .product-item__icon svg { width: 20px; height: 20px; } .product-item__icon img { width: 20px; height: 20px; object-fit: contain; } .product-item span { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-family: 'Montserrat', sans-serif; } /* ═══════════════════════════════════════════════════════════════ A1: ¿QUÉ NOS HACE CONFIABLES? ═══════════════════════════════════════════════════════════════ */ .confiables-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; margin-top: 3rem; max-width: 900px; margin-left: auto; margin-right: auto; } .confiable-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; } .confiable-icon { width: 140px; height: 140px; border: 2.5px solid var(--page-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--page-accent); transition: border-color .4s, color .4s; } .confiable-icon svg { width: 72px; height: 72px; } .confiable-stat { font-family: 'Ubuntu', sans-serif; font-size: 2.4rem; font-weight: 700; color: var(--page-accent); line-height: 1; transition: color .4s; } .confiable-desc { font-size: .9rem; color: var(--text-secondary); line-height: 1.6; } .accent-bar { width: 56px; height: 5px; background: var(--page-accent); border-radius: 3px; margin: 1rem auto 2rem; transition: background .4s; } /* ═══════════════════════════════════════════════════════════════ A2: PRESENTAMOS AJ / FUNDADORA ═══════════════════════════════════════════════════════════════ */ .section--dark-teal { background: #1A3A4A; padding: 6rem 0; } .presentamos__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } .presentamos__tagline { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--yellow); margin-bottom: .75rem; } .presentamos__body { font-size: .9rem; line-height: 1.85; color: rgba(255,255,255,.82); margin-bottom: 1rem; } .presentamos__sura { display: inline-flex; align-items: center; gap: 1rem; margin-top: 1.5rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); padding: .9rem 1.5rem; border-radius: 6px; } .presentamos__sura span { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.55); font-weight: 600; } .fundadora__card { background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.12) !important; padding: 2rem; display: flex; flex-direction: column; gap: 1.25rem; } .fundadora__photo-wrap { width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; } .fundadora__photo { width: 100%; height: 100%; object-fit: cover; object-position: center 64%; display: block; } /* ═══════════════════════════════════════════════════════════════ A3: HABLEMOS / CONTACTO HOME ═══════════════════════════════════════════════════════════════ */ .hablemos__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; } .hablemos__form { padding: 2.25rem; display: flex; flex-direction: column; gap: 1.1rem; } .btn--whatsapp { display: inline-flex; align-items: center; gap: .75rem; background: #25D366; color: #fff; padding: .85rem 1.75rem; border-radius: 4px; font-weight: 700; font-size: .95rem; border: 2px solid #25D366; transition: background .2s, color .2s; font-family: 'Montserrat', sans-serif; } .btn--whatsapp:hover { background: transparent; color: #25D366; } .btn--whatsapp svg { flex-shrink: 0; } /* SURA respaldo */ .sura-respaldo { display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: center; padding: 3rem 3.5rem; border-radius: var(--radius-xl); } .sura-respaldo__logo { display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: var(--bg-secondary); border-radius: var(--radius-lg); } /* ── Responsive ──────────────────────────────────────────────── */ @media (max-width: 768px) { .confiables-grid { grid-template-columns: 1fr; gap: 2.5rem; } .presentamos__inner { grid-template-columns: 1fr; gap: 2.5rem; } .hablemos__inner { grid-template-columns: 1fr; } .sura-respaldo { grid-template-columns: 1fr; padding: 2rem; } .sura-respaldo__logo { justify-content: flex-start; } .products-bar__grid { overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; } .product-item { padding: .9rem 1.1rem; flex-shrink: 0; } } @media (max-width: 480px) { .confiable-icon { width: 110px; height: 110px; } .confiable-stat { font-size: 2rem; } } /* ═══════════════════════════════════════════════════════════════ OPORTUNIDADES ═══════════════════════════════════════════════════════════════ */ .oport-paths { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 3rem; } .oport-path { padding: 2.5rem; display: flex; flex-direction: column; } .oport-path__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; } .oport-path__icon { width: 52px; height: 52px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; } .oport-path__icon svg { width: 24px; height: 24px; } .oport-path__icon--yellow { background: rgba(245,197,0,.15); color: #D4AA00; } .oport-path__icon--cyan { background: rgba(0,171,199,.15); color: #00ABC7; } .oport-path__badge { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .3rem .8rem; border-radius: 100px; } .oport-path__badge--yellow { background: rgba(245,197,0,.15); color: #b8920a; } .oport-path__badge--cyan { background: rgba(0,171,199,.15); color: #007a90; } .oport-path h3 { font-size: 1.35rem; font-weight: 700; color: var(--text-primary); margin-bottom: .6rem; } .oport-path__desc { color: var(--text-secondary); line-height: 1.7; margin-bottom: 1.5rem; } .oport-checklist { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: .6rem; flex: 1; } .oport-checklist li { display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: var(--text-secondary); } .oport-checklist li svg { width: 16px; height: 16px; color: var(--page-accent); flex-shrink: 0; } .oport-path__income { background: rgba(var(--page-accent-rgb), .06); border: 1px solid rgba(var(--page-accent-rgb), .2); border-radius: var(--radius-md); padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: .2rem; } .income-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); } .income-value { font-size: 1.5rem; font-weight: 800; color: var(--page-accent); line-height: 1.2; } .income-value small { font-size: .85rem; font-weight: 600; opacity: .75; } .income-note { font-size: .78rem; color: var(--text-muted); } .feature-card { padding: 2rem; display: flex; flex-direction: column; gap: .75rem; } .feature-card__icon { width: 44px; height: 44px; background: rgba(var(--page-accent-rgb), .12); color: var(--page-accent); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; } .feature-card__icon svg { width: 20px; height: 20px; } .feature-card h4 { font-size: 1rem; font-weight: 700; color: var(--text-primary); } .feature-card p { font-size: .88rem; color: var(--text-secondary); line-height: 1.65; } .steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 3rem; position: relative; } .steps-grid::before { content: ''; position: absolute; top: 2rem; left: 12.5%; right: 12.5%; height: 2px; background: linear-gradient(90deg, var(--page-accent), rgba(var(--page-accent-rgb),.15)); pointer-events: none; } .step-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; padding: 1.5rem 1rem; } .step-card__num { width: 56px; height: 56px; background: var(--page-accent); color: var(--page-btn-text); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 800; flex-shrink: 0; box-shadow: 0 4px 16px rgba(var(--page-accent-rgb), .35); position: relative; z-index: 1; } .step-card__body h4 { font-size: .95rem; font-weight: 700; color: var(--text-primary); margin-bottom: .4rem; } .step-card__body p { font-size: .85rem; color: var(--text-secondary); line-height: 1.6; } .cta-oport { padding: 3.5rem; display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: center; border-radius: var(--radius-xl); } .cta-oport__content { display: flex; flex-direction: column; gap: 1rem; } .cta-oport__content h2 { font-size: 2rem; font-weight: 800; line-height: 1.2; } .cta-oport__content p { color: var(--text-secondary); line-height: 1.7; max-width: 520px; } .cta-oport__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .5rem; } .oport-badge-stack { display: flex; flex-direction: column; gap: 1rem; } .oport-badge { display: flex; align-items: center; gap: .8rem; background: white; border: 1.5px solid rgba(var(--page-accent-rgb), .25); border-radius: var(--radius-lg); padding: 1rem 1.5rem; box-shadow: 0 4px 20px rgba(0,0,0,.08); white-space: nowrap; } .oport-badge svg { width: 24px; height: 24px; color: var(--page-accent); flex-shrink: 0; } .oport-badge span { font-size: .85rem; font-weight: 700; color: var(--text-primary); line-height: 1.3; } .oport-badge--offset { margin-left: 2rem; } @media (max-width: 768px) { .oport-paths { grid-template-columns: 1fr; } .steps-grid { grid-template-columns: 1fr 1fr; } .steps-grid::before { display: none; } .cta-oport { grid-template-columns: 1fr; } .oport-badge-stack { flex-direction: row; flex-wrap: wrap; } .oport-badge--offset { margin-left: 0; } } @media (max-width: 480px) { .steps-grid { grid-template-columns: 1fr; } .cta-oport { padding: 2rem; } } /* ═══════════════════════════════════════════════════════════════ P1: HERO 3D — FONDOS CON CROSS-FADE ═══════════════════════════════════════════════════════════════ */ /* Capas de fondo para el hero — se superponen al color sólido */ .hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center right; transition: opacity .7s cubic-bezier(.4,0,.2,1); z-index: 0; } .hero__bg--personas { background-image: url('/images/3d/hero-personas.webp'); opacity: 1; } .hero__bg--empresas { background-image: url('/images/3d/hero-empresas.webp'); opacity: 0; } /* Cross-fade controlado por la clase de audiencia en body */ body.aud-personas .hero__bg--personas { opacity: 1; } body.aud-personas .hero__bg--empresas { opacity: 0; } body.aud-empresas .hero__bg--personas { opacity: 0; } body.aud-empresas .hero__bg--empresas { opacity: 1; } /* El grid bg queda sobre las imágenes */ /* Colores de texto del hero en modo empresas (fondo oscuro). :not(.hero--sura) porque ese hero es siempre oscuro con texto blanco fijo (ver reglas .hero--sura más arriba) y no participa del cross-fade de audiencia — sin la exclusión, estas reglas (más específicas) le ganaban a las de .hero--sura y rompían el contraste en modo Personas. */ body.aud-empresas .hero:not(.hero--sura) .hero__title { color: #fff; transition: color .5s; } body.aud-empresas .hero:not(.hero--sura) .hero__subtitle { color: rgba(255,255,255,.85); transition: color .5s; } body.aud-empresas .hero:not(.hero--sura) .hero__badge { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: #fff; transition: background .5s, border-color .5s, color .5s; } /* Oportunidades queda fuera: su fondo en modo Empresas es un cian tenue (foto + tinte de acento), no la foto oscura del inicio — con tarjeta translúcida y texto claro casi no se distinguían. Mantiene la tarjeta sólida blanca de siempre. */ body.aud-empresas .hero:not(.hero--sura):not(.hero--oport) .stat-card { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); } body.aud-empresas .hero:not(.hero--sura):not(.hero--oport) .stat-number { color: var(--yellow); } body.aud-empresas .hero:not(.hero--sura):not(.hero--oport) .stat-label { color: rgba(255,255,255,.75); } body.aud-empresas .hero:not(.hero--sura) .btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); } body.aud-empresas .hero:not(.hero--sura) .btn--ghost:hover { background: rgba(255,255,255,.15); } body.aud-empresas .hero:not(.hero--sura) .scroll-indicator { color: rgba(255,255,255,.5); } /* Colores de texto del hero en modo personas (fondo claro/dorado) */ body.aud-personas .hero:not(.hero--sura) .hero__title { color: var(--dark); transition: color .5s; } body.aud-personas .hero:not(.hero--sura) .hero__subtitle { color: rgba(15,23,42,.88); transition: color .5s; } /* ═══════════════════════════════════════════════════════════════ HERO ALINEADO A LA IZQUIERDA — el contenido queda a la izquierda y el fondo amanecer 3D respira a la derecha (ej. Oportunidades) ═══════════════════════════════════════════════════════════════ */ .hero--left .hero__content { text-align: left; width: 100%; } .hero--left .hero__title { max-width: 820px; font-size: clamp(2.5rem, 5vw, 4.2rem); } .hero--left .hero__subtitle { max-width: 600px; margin-left: 0; margin-right: 0; } .hero--left .hero__actions { justify-content: flex-start; } .hero--left .hero__stats { margin-left: 0; margin-right: 0; } /* El fondo 3D se corre a la derecha y su borde izquierdo se funde con el color sólido del hero, dejando la zona del texto limpia y legible. Vive en .hero-group--left (no en .hero--left) porque hero__bg es hermano de .hero, no hijo: ver bloque PREVIEW más abajo. */ .hero-group--left .hero__bg { left: 22%; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%); mask-image: linear-gradient(to right, transparent 0%, #000 45%); } @media (max-width: 768px) { .hero-group--left .hero__bg { left: 0; } /* En escritorio la máscara horizontal deja limpia la columna izquierda, que es donde va el texto. En móvil el texto pasa a ocupar todo el ancho, así que esa protección deja de servir y el titular cae sobre la parte más clara de la imagen. Un velo del propio color del hero la apaga lo justo para que el texto se lea sin perder la imagen. Solo cubre el área de .hero (no la barra de productos): ahí los íconos ya tienen su propio círculo de fondo y no lo necesitan. Se limita a .hero-group .hero--left porque Oportunidades también usa .hero--left (con .hero--textura, sin hero__bg) y este velo no debe pisar su textura de ruido. */ .hero-group .hero--left::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient( to bottom, rgba(var(--page-accent-rgb), .55) 0%, rgba(var(--page-accent-rgb), .82) 38%, rgba(var(--page-accent-rgb), .82) 62%, rgba(var(--page-accent-rgb), .5) 100% ); } } /* ═══════════════════════════════════════════════════════════════ PREVIEW — FONDO DEL HERO EXTENDIDO HASTA LA BARRA DE PRODUCTOS hero-group envuelve .hero + .products-bar y les da un lienzo de fondo compartido: los mismos hero__bg (imagen 3D + degradado + sombra) ahora cubren ambas secciones en vez de cortar en seco donde empezaba la barra. .hero y .products-bar quedan transparentes para dejar ver ese fondo común. ═══════════════════════════════════════════════════════════════ */ .hero-group { position: relative; background: var(--page-accent); overflow: hidden; transition: background .45s ease; } .hero-group .hero { background: transparent; } .hero-group .products-bar { /* position+z-index: sin esto, hero__bg (hermano absoluto) pintaría encima de los íconos de la barra en vez de detrás — mismo motivo por el que .hero__content ya usa position:relative;z-index:1 sobre su hero__bg. */ position: relative; z-index: 1; background: transparent; border-top: none; } /* ═══════════════════════════════════════════════════════════════ P2: COFFEE MUGS EN SECCIÓN HABLEMOS ═══════════════════════════════════════════════════════════════ */ .hablemos__mugs { width: 100%; max-width: 340px; margin-top: 2.5rem; display: block; filter: drop-shadow(0 24px 48px rgba(0,0,0,.18)); animation: floatMugs 5s ease-in-out infinite; } @keyframes floatMugs { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* ═══════════════════════════════════════════════════════════════ P3: ARCOS NEUTROS EN HERO DE CONÓCENOS ═══════════════════════════════════════════════════════════════ */ .page-hero--conocenos { position: relative; overflow: hidden; } .page-hero--conocenos::before { content: ''; position: absolute; inset: 0; background-image: url('/images/3d/arcos-neutros.webp'); background-size: cover; background-position: center right; opacity: .18; z-index: 0; } .page-hero--conocenos .container { position: relative; z-index: 1; } /* ═══════════════════════════════════════════════════════════════ P4: SEGUROS — TOGGLE INLINE PROMINENTE ═══════════════════════════════════════════════════════════════ */ .seguros-toggle-bar { background: var(--bg-secondary); border-bottom: 1px solid var(--border-light); padding: 1.5rem 0; position: sticky; top: var(--navbar-h); z-index: 100; } .seguros-toggle-inner { display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; } .seguros-toggle-label { font-size: .875rem; font-weight: 600; color: var(--text-secondary); } .aud-toggle--lg { border-width: 2px; border-radius: 6px; } .aud-toggle--lg .aud-opt { padding: .65rem 2rem; font-size: .82rem; gap: .4rem; } .aud-toggle--lg .aud-opt svg { width: 15px; height: 15px; } @media (max-width: 768px) { /* Las dos opciones son nowrap y sumaban 488px dentro de un contenedor de 460: desbordaban y hacían que toda la página tuviera scroll horizontal. Ocupando el ancho completo y repartiéndose a partes iguales, caben. */ .seguros-toggle-inner { flex-direction: column; gap: .75rem; align-items: stretch; } .seguros-toggle-label { font-size: .8rem; text-align: center; } .aud-toggle--lg { width: 100%; } .aud-toggle--lg .aud-opt { flex: 1 1 0; min-width: 0; justify-content: center; padding: .6rem .5rem; } .hablemos__mugs { max-width: 240px; } } /* ═══════════════════════════════════════════════════════════════ P5: FONDO 3D EN HERO DE OPORTUNIDADES La foto va a opacidad completa; lo que lleva transparencia es la capa de color por encima (.oport-tint), que tiñe con el acento del toggle (amarillo/cian) sin apagar la foto. ═══════════════════════════════════════════════════════════════ */ .oport-bg { position: absolute; inset: 0; z-index: 0; background-image: url('/images/3d/cubos-abstractos.jpg'); background-size: cover; background-position: center; } .oport-tint { position: absolute; inset: 0; z-index: 0; background: rgba(var(--page-accent-rgb), .6); } @media (max-width: 900px) { /* Debajo de este ancho el titular pasa a ocupar todo el hero: el fondo quedaría detrás del texto sin aportar nada. */ .oport-bg { display: none; } }