/* ═══════════════════════════════════════════════════════════ BERNA SEGUROS · Sistema de diseño compartido Tokens, tipografía y componentes usados por todas las páginas. Las fuentes se cargan en el de cada página. ═══════════════════════════════════════════════════════════ */ :root{ --blue:#2F8FD9; --blue-soft:#6FB8ED; --blue-deep:#123C64; --blue-ink:#0F2A45; --pale:#EAF3FB; --white:#FFFFFF; --slate:#57657A; --line:rgba(16,37,59,0.10); --teal:#0F8C7A; --amber:#9A6300; --amber-pale:#FFF4DC; --maxw:1180px; --pad:clamp(18px,4vw,28px); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:'Manrope',system-ui,sans-serif; background:var(--white); color:var(--blue-ink); line-height:1.5; overflow-x:hidden; -webkit-font-smoothing:antialiased; } img,svg{max-width:100%} img{display:block;height:auto} a{color:inherit} h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;font-weight:600;line-height:1.08;letter-spacing:-0.02em;color:var(--blue-deep)} em{font-style:normal;color:var(--blue)} strong{color:var(--blue-deep)} ul{list-style:none} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);width:100%} .wrap.narrow{max-width:860px} .eyebrow{ font-family:'Space Mono',monospace;font-size:12px;letter-spacing:0.14em; text-transform:uppercase;color:var(--blue);font-weight:700; } .legal{ margin-top:22px;color:var(--slate);font-size:12.5px;line-height:1.65; max-width:90ch;opacity:.85; } /* ===== BARRA DE CONFIANZA ===== */ .trust{background:var(--blue-deep);padding:14px 0} .trust-inner{ max-width:var(--maxw);margin:0 auto;padding:0 var(--pad); display:flex;gap:clamp(14px,3vw,32px);justify-content:center;flex-wrap:wrap; font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:0.04em; color:rgba(255,255,255,0.62);text-transform:uppercase;text-align:center; } .trust-inner span{white-space:nowrap} .trust-inner b{color:var(--blue-soft)} .trust-inner a{color:#fff;text-decoration:underline;text-underline-offset:3px} /* ===== NAV ===== */ .nav{ position:sticky;top:0;z-index:50; background:rgba(255,255,255,0.96); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); } .nav-inner{ display:flex;align-items:center;gap:16px;justify-content:space-between; padding:14px var(--pad);max-width:var(--maxw);margin:0 auto; } .brand{ color:var(--blue-deep);font-family:'Space Grotesk',sans-serif;font-weight:700; font-size:19px;letter-spacing:-0.01em;text-decoration:none; display:flex;align-items:center;gap:10px;white-space:nowrap; } .brand-logo{height:38px;width:auto;display:block} @media (max-width:640px){.brand-logo{height:32px}} .brand-badge{ width:28px;height:28px;border-radius:50%;flex:none; background:linear-gradient(135deg,var(--blue-soft),var(--blue)); display:flex;align-items:center;justify-content:center; font-family:'Space Mono',monospace;font-size:11px;font-weight:700;color:var(--white); } .nav-links{display:flex;align-items:center;gap:clamp(12px,2vw,24px)} .nav-links a{ color:var(--blue-deep);text-decoration:none;font-size:14.5px;font-weight:600; opacity:.78;white-space:nowrap; } .nav-links a:hover{opacity:1;color:var(--blue)} .nav-links a.on{opacity:1;color:var(--blue);border-bottom:2px solid var(--blue);padding-bottom:2px} .nav-cta{ background:var(--blue);color:var(--white);border:none; padding:10px 20px;border-radius:100px;font-weight:700;font-size:14px; font-family:'Manrope',sans-serif;cursor:pointer;text-decoration:none;white-space:nowrap; } .nav-cta:hover{background:var(--blue-deep)} .nav-toggle{ display:none;background:none;border:1px solid var(--line);border-radius:10px; color:var(--blue-deep);font-size:19px;line-height:1;padding:7px 11px;cursor:pointer; } /* ===== HERO DE PÁGINA INTERNA ===== */ .phero{ background:linear-gradient(180deg,var(--pale) 0%,var(--white) 100%); padding:clamp(38px,6vw,66px) 0 clamp(34px,5vw,54px); } .crumb{font-size:13px;color:var(--slate);margin-bottom:16px} .crumb a{color:var(--blue);text-decoration:none;font-weight:600} .phero h1{font-size:clamp(29px,5.2vw,52px);margin:14px 0 18px;max-width:20ch} .phero .sub{color:var(--slate);font-size:clamp(15.5px,1.6vw,17.5px);max-width:66ch} .phero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px} .phero-in{display:grid;grid-template-columns:1fr;gap:34px;align-items:center} .phero-in.has-img{grid-template-columns:1.15fr .85fr} .phero-in.has-img .phero-copy h1{max-width:none} .phero-visual img{ width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px; box-shadow:0 18px 44px rgba(16,37,59,.14); } .section-visual img{ width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:16px; box-shadow:0 14px 34px rgba(16,37,59,.12); } /* ===== BOTONES ===== */ .btn-primary,.btn-ghost,.btn-light{ border-radius:100px;font-size:15px;cursor:pointer;text-decoration:none; display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:14px 28px;font-family:'Manrope',sans-serif;text-align:center; } .btn-primary{background:var(--blue);color:var(--white);border:1px solid var(--blue);font-weight:800} .btn-primary:hover{background:var(--blue-deep);border-color:var(--blue-deep)} .btn-ghost{background:transparent;color:var(--blue-deep);border:1px solid var(--line);font-weight:700} .btn-ghost:hover{border-color:var(--blue);color:var(--blue)} .btn-light{background:var(--white);color:var(--blue-deep);border:1px solid var(--white);font-weight:800} .btn-light:hover{background:var(--pale)} .tlink{color:var(--blue);font-weight:700;text-decoration:none;font-size:14.5px} .tlink:hover{color:var(--blue-deep)} /* ===== SECCIONES ===== */ .section{padding:clamp(52px,7vw,90px) 0} .section-sm{padding:clamp(38px,5vw,58px) 0} .section-pale{background:var(--pale)} .section-deep{background:var(--blue-deep)} .section-deep h1,.section-deep h2,.section-deep h3{color:#fff} .section-deep p{color:rgba(255,255,255,.75)} .section-deep .eyebrow{color:var(--blue-soft)} .section-head{max-width:660px;margin:0 auto clamp(30px,4vw,50px);text-align:center} .section-head h2{font-size:clamp(25px,3.8vw,40px);margin-top:14px} .section-head p{color:var(--slate);margin-top:14px;font-size:16px} /* ===== GRIDS ===== */ .grid{display:grid;gap:22px} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} /* ===== TARJETAS ===== */ .card{ background:var(--white);border:1px solid var(--line);border-radius:20px; padding:clamp(22px,3vw,30px);display:flex;flex-direction:column; } .card-flat{box-shadow:none} .section-pale .card{background:var(--white)} .card .kicker{ font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:0.12em; text-transform:uppercase;color:var(--blue);font-weight:700;display:block;margin-bottom:12px; } .card h3{font-size:20.5px;margin-bottom:10px} .card p{color:var(--slate);font-size:15.5px} .card ul{margin-top:14px;display:grid;gap:8px} .card li,.callout li,.doc li{color:var(--slate);font-size:15px;padding-left:19px;position:relative} .card li::before,.callout li::before{ content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--blue-soft); } .card .foot{margin-top:auto;padding-top:18px} /* ===== CALLOUT ===== */ .callout{ background:var(--pale);border-left:3px solid var(--blue);border-radius:0 14px 14px 0; padding:18px 20px; } .section-pale .callout{background:var(--white)} .callout .h{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--blue-deep);margin-bottom:7px;font-size:16px} .callout p{color:var(--slate);font-size:15px} .callout-warn{background:var(--amber-pale);border-left-color:var(--amber)} .callout-warn .h{color:var(--amber)} .section-pale .callout-warn{background:var(--amber-pale)} /* ===== BANDA CTA ===== */ .band{ background:linear-gradient(135deg,var(--blue-deep),var(--blue)); border-radius:24px;padding:clamp(30px,5vw,52px);text-align:center;color:#fff; } .band h2{color:#fff;font-size:clamp(24px,3.6vw,36px);margin-bottom:12px} .band p{color:rgba(255,255,255,.82);max-width:62ch;margin:0 auto 24px;font-size:16.5px} /* ===== PASOS ===== */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .steps > div{border-top:2px solid rgba(255,255,255,.22);padding-top:16px} .section-deep .steps .n{color:var(--blue-soft)} .steps .n{font-family:'Space Mono',monospace;font-size:13px;font-weight:700;color:var(--blue);margin-bottom:8px} .steps h3{font-size:17.5px;margin-bottom:8px} .steps p{font-size:14.5px;color:var(--slate)} /* ===== FAQ ===== */ .faq{border-bottom:1px solid var(--line);padding:4px 0} .faq summary{ cursor:pointer;list-style:none;padding:18px 34px 18px 0;position:relative; font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:17px;color:var(--blue-deep); } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%); color:var(--blue);font-size:22px;font-weight:400; } .faq[open] summary::after{content:"–"} .faq .a{padding:0 0 18px} .faq .a p{color:var(--slate);font-size:15.5px;margin-bottom:10px} .faq .a p:last-child{margin-bottom:0} /* ===== CREDENCIALES ===== */ .cred{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:clamp(22px,3vw,32px)} .cred-head{margin-bottom:20px} .cred-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px} .cred-cell{background:var(--pale);border-radius:16px;padding:22px} .cred-label{font-size:13px;color:var(--slate);font-weight:600;margin-bottom:6px} .cred-num{font-family:'Space Mono',monospace;font-size:clamp(24px,4vw,32px);font-weight:700;color:var(--blue-deep);letter-spacing:.02em} .cred-org{color:var(--slate);font-size:14px;margin:10px 0 14px;line-height:1.5} .cred-link{color:var(--blue);font-weight:700;text-decoration:none;font-size:14.5px} .cred-link:hover{color:var(--blue-deep)} .cred-how{color:var(--slate);font-size:13px;margin-top:12px;line-height:1.6} .cred-foot{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);color:var(--slate);font-size:14.5px} /* ===== CARRUSEL ===== */ .slider{position:relative} .slides{position:relative} .slide{display:none} .slide.on{display:block;animation:fade .45s ease} @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .slide-in{ background:var(--white);border:1px solid var(--line);border-radius:24px; padding:clamp(26px,4vw,44px);display:grid;gap:26px;align-items:center; } .slide-in.has-img{grid-template-columns:1.25fr .75fr} .slide-visual{align-self:center} .slide-visual img{border-radius:16px;width:100%;aspect-ratio:4/3;object-fit:cover;box-shadow:0 18px 44px rgba(16,37,59,.13)} .slide-badge{ display:inline-flex;align-items:center;gap:8px;background:var(--pale);color:var(--blue-deep); font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase; font-weight:700;padding:6px 12px;border-radius:100px;margin-bottom:14px; } .slide-badge b{width:7px;height:7px;border-radius:50%;background:var(--teal);display:inline-block} .slide h2{font-size:clamp(25px,4vw,40px);margin-bottom:12px} .slide .txt{color:var(--slate);font-size:16.5px;max-width:62ch} .slide ul{margin-top:16px;display:grid;gap:8px;max-width:62ch} .slide li{color:var(--slate);font-size:15px;padding-left:19px;position:relative} .slide li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--blue-soft)} .slide-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px} .cond-link{color:var(--slate);font-size:13.5px;text-decoration:underline;text-underline-offset:3px} .s-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px} .s-nav.hide{display:none} .dots{display:flex;gap:8px} .dot{width:9px;height:9px;border-radius:50%;border:none;background:var(--line);cursor:pointer;padding:0} .dot[aria-current="true"]{background:var(--blue);width:26px;border-radius:100px} .arrows{display:flex;gap:8px} .arrow{ width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--white); color:var(--blue-deep);cursor:pointer;font-size:15px;line-height:1; } .arrow:hover{border-color:var(--blue);color:var(--blue)} /* ===== CONDICIONES ===== */ .cond-box{display:grid;gap:16px} .cond-item{background:var(--pale);border-radius:14px;padding:18px 20px} .cond-item h3{font-size:16px;margin-bottom:7px} .cond-item p{color:var(--slate);font-size:13.5px;line-height:1.65} /* ===== INSTITUCIONES ===== */ .inst{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .inst > div{border:1px solid var(--line);border-radius:16px;padding:20px} .inst .n{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px;color:var(--blue-deep)} .inst .r{color:var(--slate);font-size:13.5px;margin-top:5px} /* ===== CONTACTO ===== */ .dl{display:grid;gap:16px} .dl dt{font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);font-weight:700;margin-bottom:4px} .dl dd{color:var(--slate);font-size:15.5px} .dl dd a{color:var(--blue-deep);font-weight:600} .ways{display:grid;gap:10px} .way{ display:flex;align-items:center;justify-content:space-between;gap:14px; background:var(--white);border:1px solid var(--line);border-radius:14px; padding:16px 18px;text-decoration:none;cursor:pointer; } .way:hover{border-color:var(--blue)} .way .t{display:block;font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--blue-deep);font-size:16px} .way .d{display:block;color:var(--slate);font-size:13.5px;margin-top:3px} .way .go{color:var(--blue);font-weight:700;font-size:14px;white-space:nowrap} /* ===== FOOTER ===== */ footer.site{background:var(--blue-ink);color:rgba(255,255,255,.72);padding:clamp(44px,6vw,68px) 0 34px;margin-top:0} footer.site .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:32px} footer.site strong{display:block;font-family:'Space Grotesk',sans-serif;font-size:18px;color:#fff;margin-bottom:12px} footer.site h4{font-size:13px;color:#fff;text-transform:uppercase;letter-spacing:.1em;font-family:'Space Mono',monospace;margin-bottom:14px} footer.site p{font-size:14px;line-height:1.65;max-width:52ch} footer.site nav{display:grid;gap:9px} footer.site a{color:var(--blue-soft);text-decoration:none;font-size:14px} footer.site a:hover{color:#fff} footer.site .fbot{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)} footer.site .fbot p{font-size:12px;line-height:1.7;max-width:none;margin-bottom:10px;opacity:.72} /* ===== WHATSAPP FLOTANTE ===== */ .wa-float{ position:fixed;right:18px;bottom:18px;z-index:60; width:56px;height:56px;border-radius:50%;background:#25D366; display:flex;align-items:center;justify-content:center;cursor:pointer; box-shadow:0 8px 22px rgba(16,37,59,.24); } .wa-float:hover{transform:translateY(-2px)} /* ═════════ RESPONSIVE ═════════ */ @media (max-width:1024px){ .g3,.inst,.steps{grid-template-columns:repeat(2,1fr)} .slide-in.has-img{grid-template-columns:1fr} .phero-in.has-img{grid-template-columns:1fr;gap:26px} .phero-visual{order:-1} .slide-in.has-img .slide-visual{order:-1;margin-bottom:6px} .slide-in.has-img{gap:24px} footer.site .fgrid{grid-template-columns:1fr 1fr} } @media (max-width:860px){ .nav-toggle{display:block;order:2} .nav-cta{order:3} .nav-links{ order:4;display:none;width:100%;flex-direction:column;align-items:flex-start; gap:2px;padding-top:12px;border-top:1px solid var(--line);margin-top:12px; } .nav-links.open{display:flex} .nav-links a{padding:10px 0;width:100%;font-size:16px} .nav-links a.on{border-bottom:none} .nav-inner{flex-wrap:wrap;gap:10px} .cred-grid{grid-template-columns:1fr} footer.site .fgrid{grid-template-columns:1fr;gap:26px} footer.site p{max-width:none} } @media (max-width:640px){ .g2,.g3,.inst,.steps{grid-template-columns:1fr} .trust-inner{font-size:10.5px;gap:10px 16px} .trust-inner span{white-space:normal} .phero h1{max-width:none} .phero-ctas{flex-direction:column;align-items:stretch} .phero-ctas a,.band a,.card .foot .btn-primary{width:100%} .btn-primary,.btn-ghost,.btn-light{padding:14px 20px} .section-head{text-align:left} .way{flex-direction:column;align-items:flex-start;gap:8px} .wa-float{width:52px;height:52px;right:14px;bottom:14px} } /* ===== Lockups de marca (Inbursa / Aeroméxico) ===== */ .colock{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .colock img{display:block;width:auto;height:22px;opacity:.94} .colock img.lg-aero{height:17px} .colock img.lg-cnsf{height:40px} .colock img.lg-cnsf.foot{height:34px;opacity:.85} .colock img.lg-mapfre{height:20px} .colock img.lg-inbseg{height:30px} .colock .colock-sep{width:1px;height:20px;background:var(--line);flex:0 0 auto} .inst .colock{margin-bottom:12px;min-height:24px} .card .colock{margin:2px 0 10px} .phero-copy .colock{margin:14px 0 6px} @media (max-width:640px){ .colock img{height:19px} .colock img.lg-aero{height:15px} .colock img.lg-cnsf{height:34px} .colock img.lg-cnsf.foot{height:30px} .colock img.lg-mapfre{height:17px} .colock img.lg-inbseg{height:26px} } /* ===== MURO DE ASEGURADORAS ===== */ .logo-wall{ display:grid;grid-template-columns:repeat(7,1fr);gap:14px;align-items:stretch; } .logo-wall .cell{ background:var(--white);border:1px solid var(--line);border-radius:14px; min-height:78px;display:flex;align-items:center;justify-content:center;padding:14px 16px; } .section-pale .logo-wall .cell{background:var(--white)} .logo-wall .cell img{ display:block;width:auto;max-width:100%; filter:grayscale(1);opacity:.62;transition:filter .2s ease,opacity .2s ease; } .logo-wall .cell:hover img{filter:none;opacity:1} .logo-wall img.lg-inbseg{height:32px} .logo-wall img.lg-qualitas{height:44px} .logo-wall img.lg-hdi{height:26px} .logo-wall img.lg-mapfre{height:20px} .logo-wall img.lg-elaguila{height:40px} .logo-wall img.lg-chubb{height:15px} .logo-wall .more{ border-style:dashed;border-color:var(--blue-soft);background:var(--pale); font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase; font-weight:700;color:var(--blue);text-align:center;line-height:1.5; } .section-pale .logo-wall .more{background:var(--pale)} @media (max-width:1024px){ .logo-wall{grid-template-columns:repeat(4,1fr)} } @media (max-width:640px){ .logo-wall{grid-template-columns:repeat(2,1fr);gap:10px} .logo-wall .cell{min-height:66px;padding:12px} .logo-wall img.lg-qualitas{height:38px} .logo-wall img.lg-elaguila{height:34px} .logo-wall img.lg-inbseg{height:28px} .logo-wall img.lg-hdi{height:22px} .logo-wall img.lg-mapfre{height:17px} .logo-wall img.lg-chubb{height:13px} } /* Lockups dentro del carrusel */ .slide-colock{margin:0 0 14px} .colock img.lg-qualitas-sm{height:34px} .colock img.lg-hdi-sm{height:20px} .colock img.lg-chubb-sm{height:12px} .colock img.lg-elaguila-sm{height:30px} .colock .colock-mas{ font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase; font-weight:700;color:var(--blue); } @media (max-width:640px){ .colock img.lg-qualitas-sm{height:29px} .colock img.lg-hdi-sm{height:17px} .colock img.lg-chubb-sm{height:11px} .colock img.lg-elaguila-sm{height:26px} }