/* ================================================================
   MC Asesores de Seguros — mcasesores.com.ar
   Sistema de diseño familia MC Broker: navy #252B40 + magenta #BC3F80,
   azul de confianza #2E528F para lo interactivo, tipografía Nunito.
   ================================================================ */

:root{
  --navy:#252B40; --navy-deep:#161A27;
  --magenta:#BC3F80; --rosa:#EE7CB2;
  --accent:#2E528F; --accent-d:#213E70; --accent-tint:rgba(46,82,143,.12);
  --spark:#BC3F80; --spark-tint:rgba(188,63,128,.12);
  --lav:#8f8bff;
  --texto:#2a2733; --gris:#6b6a78; --gris-claro:#f7f6fb; --linea:#eeebf3;
  --radio:20px;
  --sombra:0 20px 50px rgba(37,43,64,.13);
  --sombra-sm:0 10px 26px rgba(37,43,64,.09);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Nunito',system-ui,-apple-system,sans-serif;color:var(--texto);background:#fff;line-height:1.6;font-weight:500;overflow-x:hidden}
h1,h2,h3,h4{font-family:inherit;line-height:1.14;color:var(--navy);font-weight:800;letter-spacing:-.5px}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto}
svg{display:block}
ul,ol{list-style:none}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:820px}
.center{text-align:center}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;z-index:0;pointer-events:none}

.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 20px;z-index:200;border-radius:0 0 10px 0;font-weight:700}
.skip:focus{left:0}

:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:inherit;font-weight:800;font-size:15.5px;padding:14px 26px;border-radius:999px;cursor:pointer;transition:.25s;border:2px solid transparent}
.btn.lg{padding:16px 32px;font-size:16.5px}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 12px 26px rgba(46,82,143,.3)}
.btn-primary:hover{background:var(--accent-d);transform:translateY(-2px)}
/* Verde WhatsApp oficial con texto navy en vez de blanco: blanco sobre este
   verde da 1.98:1 (ilegible, falla WCAG AA). Navy da 7.07:1 y conserva el
   color reconocible de la marca. */
.btn-wa{background:#25D366;color:var(--navy)}
.btn-wa:hover{background:#3ddb7d;transform:translateY(-2px)}
.btn-wa svg{width:19px;height:19px;fill:var(--navy)}
.btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
.btn-ghost:hover{background:#fff;color:var(--navy);border-color:#fff}

/* ---------- Nav ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--linea)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px}
.brand{display:flex;align-items:center;gap:11px;font-weight:900;color:var(--navy);font-size:19px;letter-spacing:-.4px}
.brand .logo-mark{flex:none}
.brand small{display:block;font-weight:600;font-size:11px;color:var(--gris);letter-spacing:.3px;margin-top:-3px}
.nav-links{display:flex;gap:24px;font-weight:700;font-size:14.5px;margin-left:auto;margin-right:8px}
.nav-links a{color:var(--gris);transition:.2s;white-space:nowrap}
.nav-links a:hover{color:var(--accent)}
.nav-cta .btn{padding:10px 20px;font-size:14.5px}
@media(max-width:1080px){.nav-links{gap:18px;font-size:14px}}
@media(max-width:900px){.nav-links{display:none}}
@media(max-width:420px){.brand small{display:none}.brand{font-size:17px}}

/* ---------- Hero ---------- */
.hero{position:relative;background:linear-gradient(160deg,#fbfaff,#f4f1fa 55%,#fdf4f8);padding:72px 0 78px;overflow:hidden;text-align:center}
.hero .b1{width:520px;height:520px;background:var(--accent);top:-190px;left:-120px;opacity:.14}
.hero .b2{width:420px;height:420px;background:var(--spark);bottom:-180px;right:-100px;opacity:.13}
.hero .b3{width:340px;height:340px;background:var(--lav);top:40%;right:22%;opacity:.10}
.hero .wrap{position:relative;z-index:2}
.hero .kick{display:inline-flex;align-items:center;gap:9px;color:var(--accent);font-weight:800;font-size:12.5px;letter-spacing:1.3px;text-transform:uppercase;margin-bottom:18px;background:var(--accent-tint);padding:8px 16px;border-radius:999px}
.hero .kick i{width:7px;height:7px;border-radius:50%;background:var(--spark);display:inline-block;flex:none}
.hero h1{font-size:clamp(32px,5.2vw,56px);font-weight:900;letter-spacing:-1.4px}
.hero h1 span{background:linear-gradient(90deg,var(--magenta),#e0609f);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.sub{font-size:clamp(16px,1.9vw,19px);color:var(--gris);margin:18px auto 30px;max-width:660px;font-weight:600}
.hero p.sub b{color:var(--navy);font-weight:800}

.cotizador{background:#fff;border-radius:22px;padding:22px;box-shadow:var(--sombra);max-width:560px;margin:0 auto;border:1px solid var(--linea)}
.cz-title{font-weight:800;color:var(--navy);font-size:16px;margin-bottom:14px;display:flex;align-items:center;justify-content:center;gap:9px}
.cz-title .z{width:25px;height:25px;border-radius:8px;background:var(--accent-tint);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:13px;flex:none}
.cz-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:18px}
.cz-pills button{font-family:inherit;font-weight:700;font-size:13.5px;color:var(--gris);background:var(--gris-claro);border:2px solid transparent;padding:9px 17px;border-radius:999px;cursor:pointer;transition:.18s}
.cz-pills button:hover{color:var(--accent);background:var(--accent-tint)}
.cz-pills button.on{background:var(--accent);color:#fff}
.cz-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;font-weight:800;font-size:16.5px;color:#fff;background:var(--accent);padding:15px;border-radius:14px;transition:.2s}
.cz-btn:hover{background:var(--accent-d)}
.cz-btn svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cz-alt{margin-top:13px;font-size:13px;color:var(--gris);text-align:center;font-weight:600}

.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px;margin-top:32px;font-size:14.5px;color:var(--gris);font-weight:600}
.trust b{color:var(--navy);font-weight:900;font-size:17px}
.trust a{transition:.2s}
.trust a:hover{color:var(--accent)}
.trust a:hover b{color:var(--accent)}

/* En pantallas chicas el badge de matrícula se parte en dos líneas y el punto
   queda flotando al costado: lo sacamos y centramos el texto. El <br> del
   titular también sobra cuando ya hay poco ancho. */
@media(max-width:620px){
  .hero{padding:54px 0 62px}
  .hero .kick{font-size:11.5px;letter-spacing:.9px;padding:8px 15px;text-align:center;justify-content:center}
  .hero .kick i{display:none}
  .hero .nb{display:none}
}

/* ---------- Logos ---------- */
.logos{padding:44px 0 40px;border-bottom:1px solid var(--linea);background:#fff}
.logos-title{text-align:center;font-size:12.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--gris);margin-bottom:26px}
.logos-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:26px 42px}
.logos-row img{height:38px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.5;transition:.25s}
.logos-row img:hover{filter:grayscale(0);opacity:1}
@media(max-width:640px){.logos-row{gap:20px 28px}.logos-row img{height:29px}}

/* ---------- Encabezados de sección ---------- */
section{padding:78px 0;position:relative}
.sec-head{margin-bottom:44px;position:relative;z-index:2}
.sec-head.center{text-align:center;max-width:680px;margin-left:auto;margin-right:auto}
.eyebrow{display:inline-block;font-weight:800;font-size:12.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--spark);margin-bottom:12px}
.sec-head h2{font-size:clamp(27px,3.6vw,40px);font-weight:900;letter-spacing:-1px}
.sec-head p{color:var(--gris);font-size:16.5px;margin-top:14px;font-weight:600}

/* ---------- Productos ---------- */
.prod{background:var(--gris-claro)}
.prod .b1{width:420px;height:420px;background:var(--accent);top:-130px;left:-110px;opacity:.10}
.prod .b2{width:380px;height:380px;background:var(--lav);bottom:-150px;right:-110px;opacity:.13}
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative;z-index:2}
@media(max-width:900px){.prod-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.prod-grid{grid-template-columns:1fr}}
.pcard{background:#fff;border:1px solid var(--linea);border-radius:20px;padding:26px 24px;transition:.25s;display:flex;flex-direction:column;position:relative}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--sombra);border-color:transparent}
.pcard.hot{border-color:var(--accent);box-shadow:0 12px 32px rgba(46,82,143,.14)}
.pcard .tag{position:absolute;top:16px;right:16px;font-weight:800;font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--spark);background:var(--spark-tint);padding:5px 10px;border-radius:999px}
.pcard .ico{width:56px;height:56px;border-radius:15px;background:linear-gradient(140deg,#eef2fa,#fbeef5);display:flex;align-items:center;justify-content:center;margin-bottom:15px;flex:none}
.pcard .ico svg{width:28px;height:28px;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pcard h3{font-size:20px;margin-bottom:7px}
.pcard p{color:var(--gris);font-size:14.5px;margin-bottom:18px;flex:1;font-weight:600}
.pcard .cotizar{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:800;font-size:14.5px;color:#fff;background:var(--accent);padding:11px 18px;border-radius:999px;transition:.2s;border:2px solid var(--accent);align-self:flex-start}
.pcard .cotizar:hover{background:var(--accent-d)}
.pcard .cotizar.outline{background:transparent;color:var(--accent)}
.pcard .cotizar.outline:hover{background:var(--accent-tint)}
.pcard .cotizar.outline svg{stroke:var(--accent)}
.pcard .cotizar svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.prod-note{margin-top:30px;text-align:center;font-size:14.5px;color:var(--gris);position:relative;z-index:2;font-weight:600}
.prod-note b{color:var(--navy)}

/* ---------- Por qué ---------- */
.porque{background:linear-gradient(180deg,#fff,#faf6fb)}
.porque .b1{width:420px;height:420px;background:var(--lav);top:-130px;right:-130px;opacity:.12}
.pq-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative;z-index:2}
@media(max-width:900px){.pq-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pq-grid{grid-template-columns:1fr}}
.pq-ico{width:50px;height:50px;border-radius:14px;background:var(--accent-tint);display:flex;align-items:center;justify-content:center;margin-bottom:15px}
.pq-ico svg{width:25px;height:25px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pq h3{font-size:18px;margin-bottom:8px}
.pq p{color:var(--gris);font-size:14.5px;font-weight:600}

/* ---------- Cómo funciona ---------- */
.como{background:#fff}
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:paso}
@media(max-width:820px){.pasos{grid-template-columns:1fr}}
.pasos li{background:var(--gris-claro);border-radius:20px;padding:30px 26px;position:relative;border:1px solid var(--linea)}
.pasos .n{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--navy);color:#fff;font-weight:900;font-size:18px;margin-bottom:16px}
.pasos h3{font-size:18.5px;margin-bottom:8px}
.pasos p{color:var(--gris);font-size:14.5px;font-weight:600}

/* ---------- FAQ ---------- */
.faq{background:var(--gris-claro)}
.acc details{background:#fff;border:1px solid var(--linea);border-radius:16px;margin-bottom:12px;overflow:hidden;transition:.2s}
.acc details[open]{border-color:var(--accent);box-shadow:var(--sombra-sm)}
.acc summary{cursor:pointer;padding:19px 54px 19px 22px;font-weight:800;font-size:16px;color:var(--navy);position:relative;list-style:none}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";position:absolute;right:22px;top:50%;width:10px;height:10px;border-right:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);transform:translateY(-70%) rotate(45deg);transition:.25s}
.acc details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.acc summary:hover{color:var(--accent)}
.acc details p{padding:0 22px 20px;color:var(--gris);font-size:15px;font-weight:600}

/* ---------- CTA final ---------- */
.cta{background:linear-gradient(150deg,var(--navy-deep),var(--navy) 58%,#3a2848);color:#fff;overflow:hidden}
.cta .b1{width:520px;height:520px;background:var(--magenta);top:-200px;right:-140px;opacity:.28}
.cta .wrap{position:relative;z-index:2}
.cta h2{color:#fff;font-size:clamp(27px,3.6vw,40px);font-weight:900;letter-spacing:-1px}
.cta p{color:#ddd6ee;font-size:17px;margin-top:14px;font-weight:600}
.cta-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:30px}
.cta-meta{font-size:14px;color:#b9b2ce;margin-top:26px;font-weight:600}

/* ---------- Footer ---------- */
footer{background:var(--navy-deep);color:#c9c4d6;padding:56px 0 26px;font-size:14.5px}
.foot{display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:40px;padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.1)}
@media(max-width:820px){.foot{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media(max-width:520px){.foot{grid-template-columns:1fr}}
.foot-brand .brand{color:#fff;font-size:18px;margin-bottom:14px}
.foot-brand p{color:#9a94ab;font-weight:600;max-width:340px}
.foot-col h4{color:#fff;font-size:14px;margin-bottom:14px;letter-spacing:.3px}
.foot-col a,.foot-col span{display:block;margin-bottom:9px;color:#9a94ab;font-weight:600;transition:.2s}
.foot-col a:hover{color:var(--rosa)}
.foot-legal{padding-top:22px;font-size:12.5px;color:#8b85a0;font-weight:600}
.foot-legal a{color:#9a94ab;text-decoration:underline}
.foot-legal a:hover{color:var(--rosa)}
.foot-legal .copy{margin-top:8px}

/* ---------- WhatsApp flotante ---------- */
.wa-float{position:fixed;right:20px;bottom:20px;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px rgba(37,211,102,.42);z-index:60;transition:.22s}
.wa-float:hover{transform:scale(1.07)}
.wa-float svg{width:29px;height:29px;fill:var(--navy)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}