/* ➜ INICIO: VARIABLES */
:root{
--bg:#f6fbff;
--card:#ffffff;
--text:#0b1220;
--muted:#4b5563;
--night:#0e3f73;
--turq:#2596be;
--turq-2:#1f7fa1;
--link:#165fa8;
--link-hover:#0e3f73;
--topbar-1:#0e3f73;
--topbar-2:#165fa8;
--line:rgba(14,63,115,.14);
--shadow:0 10px 22px rgba(14,63,115,.10);
--radius:18px;
--radius2:26px;
--max:1260px;
--float-safe-top:86px;
--to-top-gap:88px
}
/* ➜ FIN: VARIABLES */

/* ➜ INICIO: BASE */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
margin:0;
font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
background:var(--bg);
color:var(--text);
line-height:1.55;
text-rendering:optimizeLegibility;
padding-top:70px
}
img{
max-width:100%;
width:100%;
height:auto;
display:block
}
a{
color:inherit;
text-decoration:none
}
a:focus{
outline:rgba(37,150,190,.55) solid 2px;
outline-offset:3px
}
main a{
color:var(--link);
text-decoration:underline;
text-decoration-thickness:2px;
text-underline-offset:2px;
font-weight:700
}
main a:hover{color:var(--link-hover)}
main a:focus-visible{
outline:rgba(22,95,168,.35) solid 3px;
outline-offset:3px
}
.container{
width:min(100% - 32px,var(--max));
margin:0 auto
}
/* ➜ FIN: BASE */

/* ➜ INICIO: MENÚ FIJO */
#menu-slot{
position:fixed;
top:0;
left:0;
right:0;
z-index:1500;
min-height:70px;
display:block;
width:100%;
background:linear-gradient(90deg,var(--topbar-1),var(--topbar-2))
}
.topbar{
position:relative;
backdrop-filter:blur(10px);
background:linear-gradient(90deg,var(--topbar-1),var(--topbar-2));
border-bottom:1px solid rgba(255,255,255,.1)
}
.nav{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:14px 0
}
.brand{
display:flex;
align-items:center;
gap:10px;
min-width:210px
}
.brand-mark{
width:50px;
height:50px;
border-radius:12px;
background-color:rgba(255,255,255,.1);
background-image:url("../image/logo.png");
background-repeat:no-repeat;
background-position:center;
background-size:contain;
box-shadow:0 10px 22px rgba(37,150,190,.16);
flex:0 0 auto
}
.brand-text{
display:flex;
flex-direction:column;
gap:2px;
min-width:0
}
.brand-title{
font-weight:850;
letter-spacing:.06em;
text-transform:uppercase;
font-size:13px;
color:#fff;
line-height:1.1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}
.brand-sub{
font-size:12px;
color:rgba(255,255,255,.78);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}
.nav-links{
display:flex;
align-items:center;
gap:10px
}
.nav-links ul{
list-style:none;
display:flex;
align-items:center;
gap:10px;
margin:0;
padding:0
}
.nav-links a,
.nav-links button{
border:0;
background:transparent;
color:rgba(255,255,255,.9);
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
font-size:12px;
padding:10px;
border-radius:12px;
cursor:pointer;
white-space:nowrap
}
.nav-links a:hover,
.nav-links button:hover{
background:rgba(255,255,255,.08);
color:#fff
}
/* ➜ FIN: MENÚ FIJO */

/* ➜ INICIO: DESPLEGABLE MÁS */
.more{position:relative}
.more-panel{
position:absolute;
right:0;
top:calc(100% + 10px);
width:min(320px,90vw);
background:#fff;
color:var(--text);
border-radius:16px;
border:1px solid var(--line);
box-shadow:var(--shadow);
padding:8px;
display:none;
max-height:70vh;
overflow-y:auto;
-webkit-overflow-scrolling:touch
}
.more.open .more-panel{display:block}
.more-panel a{
display:block;
padding:10px 12px;
border-radius:12px;
font-weight:750;
color:var(--night)
}
.more-panel a:hover{background:rgba(37,150,190,.12)}
.more-panel .sep{
height:1px;
background:var(--line);
margin:8px 6px
}
/* ➜ FIN: DESPLEGABLE MÁS */

/* ➜ INICIO: DESPLEGABLE MÁS PC */
@media (min-width:981px){
.more-panel{
width:min(920px,calc(100vw - 40px));
padding:14px;
max-height:78vh;
overflow:auto;
display:none;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px 16px
}
.more.open .more-panel{display:grid}
.more-panel a{
white-space:normal;
line-height:1.35;
word-break:break-word
}
.more-panel .sep{
grid-column:1 / -1;
height:1px;
background:var(--line);
margin:4px 2px
}
.grid12 .grid-break p,
.hero p,
.section p{max-width:none}
}
/* ➜ FIN: DESPLEGABLE MÁS PC */

/* ➜ INICIO: MENÚ MÓVIL */
.hamb{
display:none;
border:1px solid rgba(255,255,255,.18);
background:rgba(255,255,255,.06);
color:#fff;
padding:10px 12px;
border-radius:12px;
font-weight:900;
cursor:pointer;
letter-spacing:.1em;
text-transform:uppercase;
font-size:12px
}
.mobile-drawer{
position:fixed;
inset:0;
background:rgba(2,6,23,.55);
display:none;
z-index:2000
}
.mobile-drawer.open{display:block}
.mobile-panel{
position:absolute;
right:12px;
top:12px;
width:min(420px,calc(100% - 24px));
background:#fff;
border-radius:18px;
border:1px solid var(--line);
box-shadow:var(--shadow);
max-height:calc(100vh - 24px);
overflow:hidden
}
.mobile-head{
display:flex;
align-items:center;
justify-content:space-between;
padding:14px;
border-bottom:1px solid var(--line)
}
.mobile-head strong{
color:var(--night);
letter-spacing:.1em;
text-transform:uppercase;
font-size:12px
}
.mobile-close{
border:0;
background:rgba(14,63,115,.06);
color:var(--night);
padding:10px 12px;
border-radius:12px;
font-weight:900;
cursor:pointer
}
.mobile-links{
padding:10px;
max-height:calc(100vh - 110px);
overflow:auto;
-webkit-overflow-scrolling:touch
}
.mobile-links ul{
list-style:none;
margin:0;
padding:0;
display:grid;
gap:6px
}
.mobile-links a{
display:block;
padding:12px;
border-radius:14px;
border:1px solid var(--line);
color:var(--night);
font-weight:850;
letter-spacing:.08em;
text-transform:uppercase;
font-size:12px
}
.mobile-links a:hover{
background:rgba(37,150,190,.12);
border-color:rgba(37,150,190,.35)
}
@media (max-width:980px){
.nav-links{display:none}
.hamb{
display:inline-flex;
align-items:center;
gap:10px
}
.brand{min-width:unset}
}
/* ➜ FIN: MENÚ MÓVIL */

/* ➜ INICIO: HERO */
header{
position:relative;
overflow:hidden;
background:var(--night);
color:#fff
}
.hero{
position:relative;
min-height:56vh;
display:grid;
align-items:end;
padding:84px 0 44px;
isolation:isolate
}
.hero::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(120deg,#0e3f73,#165fa8);
z-index:-1
}
.hero::after{
content:"";
position:absolute;
inset:-40% -10%;
background:radial-gradient(circle at 20% 20%,rgba(37,150,190,.24),transparent 55%);
z-index:-1;
pointer-events:none
}
.hero-inner{padding-top:26px}
.hero h1{
margin:0 0 12px;
font-size:clamp(30px,3.4vw,52px);
line-height:1.05;
letter-spacing:-.02em
}
.hero p{
margin:0;
color:rgba(255,255,255,.88);
font-size:clamp(15px,1.2vw,18px);
max-width:66ch
}
.pill{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:rgba(37,150,190,.14);
color:#fff;
border:1px solid rgba(37,150,190,.25);
font-weight:850;
letter-spacing:.1em;
text-transform:uppercase;
font-size:11px;
margin-top:14px
}
.hero h1,
.hero p{
overflow-wrap:break-word;
word-wrap:break-word;
word-break:break-word
}
/* ➜ FIN: HERO */

/* ➜ INICIO: MAIN */
main{padding:44px 0 10px}
.section{
background:var(--card);
border:1px solid var(--line);
border-radius:var(--radius2);
box-shadow:var(--shadow);
padding:26px;
margin-bottom:18px
}
.section h2{
margin:0 0 10px;
font-size:clamp(20px,2.1vw,28px);
letter-spacing:-.01em;
color:var(--night)
}
.section p{
margin:0 0 12px;
color:var(--muted);
max-width:80ch
}
/* ➜ FIN: MAIN */

/* ➜ INICIO: GRID */
.grid12{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
margin-top:16px
}
.media{margin:0}
.media .frame{
border-radius:var(--radius);
overflow:hidden;
border:1px solid var(--line);
background:linear-gradient(135deg,rgba(14,63,115,.06),rgba(37,150,190,.07));
box-shadow:0 10px 22px rgba(14,63,115,.06);
transition:transform .18s,box-shadow .18s,border-color .18s;
will-change:transform
}
.media .frame img{
width:100%;
height:auto;
display:block;
transition:transform .18s,filter .18s;
will-change:transform
}
.media:hover .frame{
transform:translateY(-2px);
box-shadow:0 16px 32px rgba(14,63,115,.14);
border-color:rgba(37,150,190,.55)
}
.media:hover .frame img{
transform:scale(1.03);
filter:saturate(1.05)
}
.media .caption{
margin:10px 2px 0;
color:var(--muted);
font-size:13px;
line-height:1.35
}
.media .caption .cap-text{display:block}
.media .caption .cap-btn{
display:inline-flex;
align-items:center;
justify-content:center;
margin-top:10px;
padding:10px 14px;
border-radius:12px;
border:1px solid rgba(37,150,190,.45);
background:rgba(37,150,190,.12);
color:var(--night);
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
font-size:11px;
transition:transform .15s,background .15s,border-color .15s
}
.media .caption .cap-btn:hover{
transform:translateY(-1px);
background:rgba(37,150,190,.18);
border-color:rgba(37,150,190,.7)
}
@media (max-width:980px){
.grid12{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
.grid12{grid-template-columns:1fr}
.section{padding:18px}
}
/* ➜ FIN: GRID */

/* ➜ INICIO: GRID VERTICAL */
.grid3-vertical{
display:grid;
grid-template-columns:1fr;
gap:18px;
margin-top:16px;
justify-items:center
}
.grid3-vertical .media{
width:min(600px,100%);
margin:0
}
/* ➜ FIN: GRID VERTICAL */

/* ➜ INICIO: FOOTER */
footer{
margin-top:22px;
background:var(--night);
color:rgba(255,255,255,.82);
padding:26px 0 110px;
border-top:1px solid rgba(255,255,255,.1)
}
.footer-box{
display:grid;
grid-template-columns:1.2fr 1fr;
gap:16px;
align-items:start
}
.footer-box strong{
color:#fff;
letter-spacing:.08em;
text-transform:uppercase;
font-size:12px
}
.footer-muted{
margin-top:8px;
color:rgba(255,255,255,.75);
max-width:75ch
}
.footer-links ul{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-wrap:wrap;
gap:10px 12px;
justify-content:flex-end;
align-items:center
}
.footer-links a{
display:inline-block;
color:#fff;
text-decoration:underline;
font-weight:850;
letter-spacing:.1em;
text-transform:uppercase;
font-size:11px;
padding:9px 12px;
border-radius:999px;
border:1px solid rgba(37,150,190,.35);
background:rgba(37,150,190,.1)
}
.footer-links a:hover{
background:rgba(37,150,190,.18);
border-color:rgba(37,150,190,.6)
}
.footer-social{
margin-top:12px;
display:grid;
gap:12px;
justify-content:end
}
.footer-social ul{
list-style:none;
margin:0;
padding:0;
display:grid;
grid-template-columns:repeat(5,44px);
gap:12px;
justify-content:end;
align-items:center
}
.social-btn{
width:44px;
height:44px;
display:grid;
place-items:center;
border-radius:999px;
color:#fff;
border:1px solid rgba(37,150,190,.35);
background:rgba(255,255,255,.06);
transition:transform .12s,background .12s,border-color .12s
}
.social-btn:hover{
transform:translateY(-1px);
background:rgba(37,150,190,.18);
border-color:rgba(37,150,190,.65)
}
.social-btn svg{
width:20px;
height:20px;
display:block;
fill:currentColor
}
.footer-bottom{
margin-top:16px;
padding-top:14px;
border-top:1px solid rgba(255,255,255,.1);
color:rgba(255,255,255,.78);
font-size:13px;
line-height:1.45;
text-align:right
}
.footer-bottom a{
color:#fff;
text-decoration:underline
}
@media (max-width:820px){
.footer-box{grid-template-columns:1fr}
.footer-links ul{justify-content:flex-start}
.footer-social,
.footer-social ul{justify-content:start}
.footer-bottom{text-align:left}
}
/* ➜ FIN: FOOTER */

/* ➜ INICIO: FLOTANTES */
.float-actions{
position:fixed;
right:14px;
top:var(--float-safe-top);
z-index:3000;
display:grid;
gap:10px
}
.fab{
display:flex;
align-items:center;
gap:10px;
padding:12px 14px;
border-radius:999px;
border:0;
color:#fff;
text-decoration:none;
text-shadow:0 1px 2px rgba(0,0,0,.35);
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
font-size:11px;
white-space:nowrap;
box-shadow:0 12px 26px rgba(14,63,115,.14);
transition:transform .2s,box-shadow .2s,background .2s,opacity .25s
}
.fab:hover{
transform:translateY(-2px);
box-shadow:0 16px 32px rgba(14,63,115,.22)
}
.fab.whatsapp{background:#1ebe5d}
.fab.whatsapp:hover{background:#1ebe5d}
.fab.call{background:#1f86e8}
.fab.call:hover{background:#1f86e8}
.fab.contact{background:#d70000}
.fab.contact:hover{background:#ff1a1a}
.ico{
width:18px;
height:18px;
display:inline-flex
}
.ico svg{
width:18px;
height:18px;
display:block;
stroke:#fff
}
@media (max-width:520px){
.fab{padding:11px 12px}
.fab .label{display:none}
.fab.to-top .label{display:inline}
}
.fab.to-top{
position:fixed;
right:14px;
bottom:14px;
background:#111;
opacity:0;
pointer-events:none;
transform:translateY(10px);
z-index:99999
}
.fab.to-top:hover{background:#000}
.fab.to-top.show{
opacity:1;
pointer-events:auto;
transform:translateY(0)
}
@media (max-width:980px){
.float-actions{
top:auto;
bottom:calc(14px + var(--to-top-gap));
right:14px
}
}
/* ➜ FIN: FLOTANTES */

/* ➜ INICIO: FAQ */
.faq{
max-width:1100px;
margin:0 auto;
padding:36px 16px
}
.faq .faq-title{
margin:0 0 10px;
font-weight:800;
font-size:1.25em
}
.faq .faq-lead,
.faq .faq-note{
margin:0 0 16px;
font-size:1em;
line-height:1.7
}
.faq details{
border:1px solid rgba(0,0,0,.15);
border-radius:14px;
background:#fff;
margin:0 0 12px;
overflow:hidden
}
.faq summary{
padding:16px;
cursor:pointer;
font-weight:700;
list-style:none;
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
font-size:1em
}
.faq summary::-webkit-details-marker{display:none}
.faq .faq-icon{
border:1px solid #ccc;
border-radius:50%;
width:22px;
height:22px;
display:flex;
align-items:center;
justify-content:center;
flex:0 0 22px
}
.faq details .faq-icon:before{content:"+"}
.faq details[open] .faq-icon:before{content:"−"}
.faq .faq-content{
padding:0 16px 16px;
line-height:1.7;
font-size:1em
}
.faq .faq-content p{margin:0 0 10px}
.faq .faq-content p:last-child{margin-bottom:0}
@media (min-width:768px){
.faq{padding:40px 16px}
.faq .faq-title{font-size:1.35em}
}
/* ➜ FIN: FAQ */

/* ➜ INICIO: BLOQUE ANCHO */
.grid12 .grid-break{
grid-column:1/-1;
background:var(--card);
border:1px solid var(--line);
border-radius:var(--radius2);
box-shadow:var(--shadow);
padding:18px
}
.grid12 .grid-break h2{
margin:0 0 8px;
font-size:clamp(18px,1.6vw,24px);
letter-spacing:-.01em;
color:var(--night)
}
.grid12 .grid-break p{
margin:0 0 10px;
color:var(--muted);
max-width:80ch
}
.grid12 .grid-break p:last-child{margin-bottom:0}
/* ➜ FIN: BLOQUE ANCHO */