/* ==========================================================================
   Landing AMP2008 — estilos del diseño aprobado.
   Movidos tal cual desde el <style> del HTML original. NO rediseñar.
   ========================================================================== */
:root{
  --bg:#070611; --bg-deep:#050409;
  --blue:#3aacff; --blue-soft:#6cc4ff;
  --violet:#c15be0; --violet-soft:#d9a8ec;
  --grid:rgba(124,138,255,0.05);
  --border:rgba(124,138,255,0.18);
  --text-soft:#a9a4d0; --text-dim:#6f6a95; --text-dimmer:#55507a;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--bg-deep); color:#fff;
  display:flex; justify-content:center; padding:0;
  -webkit-font-smoothing:antialiased;
}
.device{
  width:100%; max-width:480px; min-height:100vh; background:var(--bg);
  position:relative; overflow:hidden;
}
.grid-bg{
  position:absolute; inset:0;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:34px 34px; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 60%);
  mask-image:linear-gradient(180deg,#000 0%,transparent 60%);
}
.wrap{position:relative; z-index:1;}

/* HEADER */
.header{padding:16px 18px; border-bottom:0.5px solid rgba(124,138,255,0.1); display:flex; align-items:flex-start; justify-content:space-between;}

/* Botón hamburguesa + menú desplegable */
.menu-btn{background:none; border:none; color:#8b86b8; font-size:22px; line-height:1; cursor:pointer; padding:2px; margin-top:2px;}
.menu-btn:hover{color:#d9a8ec;}
.menu-landing{position:absolute; top:58px; right:14px; width:248px; z-index:50;
  display:none; flex-direction:column; gap:4px; padding:8px;
  background:rgba(15,13,29,0.96); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:0.5px solid rgba(124,138,255,0.3); border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,0.55), 0 0 24px rgba(142,77,210,0.25);}
.menu-landing.abierto{display:flex;}
.menu-item{display:flex; align-items:center; gap:9px; text-decoration:none; color:#d7d2f0; font-size:14px; padding:11px 13px; border-radius:10px;}
.menu-item i{color:#8b86b8; font-size:17px;}
.menu-item:hover{background:rgba(124,138,255,0.1); color:#fff;}
.menu-item-acc{margin-top:4px; color:#fff; font-weight:600;
  background:linear-gradient(120deg,rgba(58,172,255,0.18),rgba(193,91,224,0.18));
  border:0.5px solid rgba(124,138,255,0.3);}
.menu-item-acc i{color:var(--violet-soft);}
.logo-amp{display:flex; align-items:center; gap:9px; margin-bottom:8px;}
.dots{display:flex; align-items:center;}
.dot{width:14px;height:14px;border-radius:50%;}
.dot.b{background:var(--blue); box-shadow:0 0 12px var(--blue);}
.dot.v{background:var(--violet); margin-left:-5px; box-shadow:0 0 12px var(--violet);}
.amp-text{font-size:17px;font-weight:600;letter-spacing:.5px;}
.amp-text .a{color:var(--violet-soft);} .amp-text .b{color:var(--blue-soft);}
/* Sub-logo ICA+Q  (reemplazar por <img> del logo real) */
.ica-row{display:flex; align-items:center; gap:6px; padding-left:2px;}
.ica-pill{background:#1a6a8a;color:#fff;font-size:10px;font-weight:600;padding:2px 7px;border-radius:8px;}
.ica-24{background:#d4283a;color:#fff;font-size:9px;font-weight:600;padding:2px 6px;border-radius:8px;}
.ica-plus{color:#7a7595;font-size:11px;}
.ica-q{color:#d4283a;font-size:13px;font-weight:700;}
.ica-sg{color:var(--text-dim);font-size:9px;letter-spacing:1px;}

/* HERO */
.hero{padding:46px 22px 42px; text-align:center; position:relative;}
.hero-glow{position:absolute; top:-20px; left:50%; transform:translateX(-50%); width:320px; height:280px;
  background:radial-gradient(ellipse, rgba(142,77,210,0.45) 0%, rgba(54,120,232,0.22) 40%, transparent 72%);
  pointer-events:none; filter:blur(8px);}
.hero-inner{position:relative;}
.badge{display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:600; color:#c9b6ec;
  background:rgba(124,138,255,0.08); border:0.5px solid rgba(124,138,255,0.35);
  padding:6px 15px; border-radius:30px; margin-bottom:22px; box-shadow:0 0 20px rgba(124,138,255,0.2);}
.badge .live{width:6px;height:6px;border-radius:50%;background:#2ee6a0;box-shadow:0 0 8px #2ee6a0;}
.hero h1{font-size:33px; font-weight:600; line-height:1.15; margin-bottom:16px; letter-spacing:-0.5px;
  background:linear-gradient(115deg,#fff 10%,var(--violet-soft) 45%,var(--blue-soft) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.slogan{display:inline-block; font-size:13px; font-weight:500; color:var(--text-soft);
  background:rgba(255,255,255,0.04); border:0.5px solid rgba(124,138,255,0.18);
  border-radius:30px; padding:8px 18px; margin-bottom:24px;}
.btns{display:flex; flex-direction:column; gap:11px;}
.btn-primary{background:linear-gradient(120deg,var(--blue),#8e4dd0,var(--violet)); color:#fff;
  font-size:15px; font-weight:600; padding:16px; border-radius:15px; border:none; cursor:pointer;
  box-shadow:0 0 30px rgba(142,77,210,0.55);}
.btn-ghost{background:rgba(255,255,255,0.03); color:#d7d2f0; font-size:15px; font-weight:600;
  padding:16px; border-radius:15px; border:0.5px solid rgba(124,138,255,0.3); cursor:pointer;}

/* STATS */
.stats{display:flex; justify-content:space-around; padding:20px 14px;
  border-top:0.5px solid rgba(124,138,255,0.1); border-bottom:0.5px solid rgba(124,138,255,0.1);
  background:rgba(124,138,255,0.02);}
.stat{text-align:center;}
.stat .n{font-size:20px;font-weight:600;background:linear-gradient(120deg,var(--blue-soft),var(--violet-soft));-webkit-background-clip:text;background-clip:text;color:transparent;}
.stat .l{font-size:10px;color:var(--text-dim);letter-spacing:.5px;}
.stat-div{width:0.5px;background:rgba(124,138,255,0.12);}

/* SERVICIOS */
.section{padding:34px 22px 8px;}
.section h2{font-size:20px; font-weight:600; color:#f3f0ff; text-align:center; margin-bottom:5px;}
.section .sub{font-size:13px; color:var(--text-dim); text-align:center; margin-bottom:24px;}
.grid-serv{display:grid; grid-template-columns:1fr 1fr; gap:11px;}
.serv{border-radius:17px; padding:18px 12px; text-align:center;
  background:linear-gradient(160deg,rgba(124,138,255,0.07),rgba(193,91,224,0.04));
  border:0.5px solid rgba(124,138,255,0.14);}
.serv .ic{width:46px;height:46px;border-radius:14px;margin:0 auto 10px;
  background:linear-gradient(135deg,var(--blue),var(--violet));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:23px;
  box-shadow:0 0 22px rgba(142,77,210,0.55);}
.serv .nm{font-size:13px;font-weight:500;color:#d7d2f0;}
.subsidios{border-radius:17px; padding:16px; margin-top:11px; text-align:center;
  background:linear-gradient(135deg,rgba(54,120,232,0.22),rgba(193,91,224,0.22));
  border:0.5px solid rgba(124,138,255,0.3); box-shadow:0 0 24px rgba(142,77,210,0.2);}
.subsidios .t{font-size:12px;color:var(--text-soft);margin-bottom:4px;}
.subsidios .v{font-size:13px;font-weight:600;color:#f0e9fa;}

/* CONFIAN */
.trust{padding:34px 22px 18px; margin-top:18px;}
.trust .ttl{font-size:12px; font-weight:600; color:var(--text-dim); text-align:center; letter-spacing:1.5px; margin-bottom:8px;}
.trust .cap{font-size:11px; color:var(--text-dimmer); text-align:center; margin-bottom:18px;}
.partners{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:24px;}
.partner{background:rgba(124,138,255,0.05); border:0.5px solid rgba(124,138,255,0.18);
  border-radius:14px; height:56px; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:600;}
.insurers{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;}
/* Cada aseguradora va en tarjetita BLANCA: los logos vienen con fondos
   distintos, así quedan parejos y legibles sobre el fondo oscuro. */
.insurer{background:#fff; border:0.5px solid rgba(124,138,255,0.12);
  border-radius:12px; height:48px; display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:500; color:#555; text-align:center; padding:6px 8px;}
.insurer-logo{max-height:34px; max-width:100%; object-fit:contain;}

/* FOOTER */
.footer{padding:26px 22px 14px; text-align:center; position:relative;}
.footer-glow{position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:260px; height:160px;
  background:radial-gradient(ellipse, rgba(142,77,210,0.28), transparent 70%); pointer-events:none;}
.footer-inner{position:relative;}
.footer .brand{font-size:16px;font-weight:600;margin-bottom:4px;background:linear-gradient(120deg,var(--blue-soft),var(--violet-soft));-webkit-background-clip:text;background-clip:text;color:transparent;}
.footer .tag{font-size:11px;color:var(--text-dimmer);}
/* BAGTECH credit (reemplazar el chip por <img src="bagtech.jpeg">) */
.credit{padding:18px 22px 28px; border-top:0.5px solid rgba(124,138,255,0.1); text-align:center;}
.credit .by{font-size:10px; color:var(--text-dimmer); letter-spacing:1px; margin-bottom:10px;}
.credit .chip{display:inline-flex; align-items:center; gap:10px; background:rgba(124,138,255,0.05);
  border:0.5px solid rgba(124,138,255,0.2); border-radius:14px; padding:10px 18px;}
.credit .badge-ic{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle,#0a1a2a,#000);
  border:1px solid rgba(110,220,230,0.5);display:flex;align-items:center;justify-content:center;
  color:#6eded6;font-size:16px;box-shadow:0 0 12px rgba(110,220,230,0.4);}
.credit .name{font-size:15px;font-weight:700;letter-spacing:1px;background:linear-gradient(120deg,#6eded6,#7c8aff);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* ==========================================================================
   Etapa 1: los botones "Ingresar/Registrarme" se dejan como ENLACES (<a>) a
   las futuras páginas de login/registro. Esto los hace lucir igual que los
   botones de la maqueta (sin subrayado, texto centrado, ancho completo).
   ========================================================================== */
.btn-primary, .btn-ghost{text-decoration:none; text-align:center; display:block;}

/* ==========================================================================
   Logos reales (enchufados sobre los placeholders). Todos object-fit:contain
   para no deformarlos. Tamaños pensados para no romper el layout en celular.
   ========================================================================== */
.logo-amp-img{height:38px; width:auto; max-width:170px; object-fit:contain; display:block; margin-bottom:8px;}
.ica-q-img{height:26px; width:auto; max-width:180px; object-fit:contain; display:block;}
.partner-logo{max-height:36px; max-width:88%; object-fit:contain;}
/* Partner sobre tarjetita blanca (ICA 24hs e Inspia: logos con fondo de color).
   Logo un poco más grande y con padding para que respire. */
.partner-white{background:#fff; padding:6px;}
.partner-white .partner-logo{max-height:42px; max-width:92%;}
.credit-logo{height:42px; width:auto; object-fit:contain; border-radius:8px;}

/* ==========================================================================
   RESPONSIVE — mejoras SOLO para pantallas grandes (mobile-first).
   Todo lo de ARRIBA es la versión CELULAR y NO se toca. Estas media queries
   solo aplican de 601px para arriba, así el celular queda idéntico.
   ========================================================================== */

/* TABLET: 601px – 1024px */
@media (min-width: 601px){
  .device{max-width:720px;}
  .grid-serv{grid-template-columns:repeat(3, 1fr);}
  .grid-ramos{grid-template-columns:repeat(3, 1fr);}
  .grid-benef{grid-template-columns:repeat(2, 1fr);}
}

/* ==========================================================================
   NUEVO — RAMOS QUE CUBRIMOS (mismas variables/estética; mobile-first)
   ========================================================================== */
.ramo-cat{margin-bottom:20px;}
.ramo-cat-ttl{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600;
  letter-spacing:1px; text-transform:uppercase; color:var(--violet-soft); margin-bottom:11px;}
.ramo-cat-ttl i{font-size:16px; color:var(--blue-soft);}
.grid-ramos{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.ramo{display:flex; align-items:center; gap:10px; border-radius:14px; padding:12px;
  background:linear-gradient(160deg,rgba(124,138,255,0.07),rgba(193,91,224,0.04));
  border:0.5px solid rgba(124,138,255,0.14);}
.ramo .ic{flex:0 0 auto; width:36px; height:36px; border-radius:11px;
  background:linear-gradient(135deg,var(--blue),var(--violet));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px;
  box-shadow:0 0 16px rgba(142,77,210,0.45);}
.ramo .nm{font-size:12.5px; font-weight:500; color:#d7d2f0; line-height:1.25;}

/* ==========================================================================
   NUEVO — TRABAJÁ CON NOSOTROS
   ========================================================================== */
.trabaja-box{border-radius:17px; padding:24px 18px; text-align:center;
  background:linear-gradient(135deg,rgba(54,120,232,0.16),rgba(193,91,224,0.16));
  border:0.5px solid rgba(124,138,255,0.3); box-shadow:0 0 24px rgba(142,77,210,0.18);}
.trabaja-ic{width:52px; height:52px; border-radius:15px; margin:0 auto 14px;
  background:linear-gradient(135deg,var(--blue),var(--violet));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:26px;
  box-shadow:0 0 22px rgba(142,77,210,0.5);}
.trabaja-txt{font-size:13.5px; color:var(--text-soft); line-height:1.5; max-width:440px;
  margin:0 auto 18px;}
.trabaja-btn{display:inline-flex !important; align-items:center; gap:8px; width:auto !important;
  padding:14px 26px !important;}
.trabaja-mail{font-size:12px; color:var(--text-dim); margin-top:12px;}

/* ==========================================================================
   BENEFICIOS PARA SOCIOS (sección informativa de la landing)
   ========================================================================== */
/* Banner novedad Marketplace (el gancho) — "amarillo marketplace" pero fino:
   fondo cálido sutil + el dorado fuerte SOLO como acento (barra izquierda + borde
   y glow tenues). Texto claro, legible. */
.mkt-banner{position:relative; border-radius:18px; padding:22px 18px 22px 22px; margin-bottom:22px;
  background:linear-gradient(120deg, rgba(255,201,61,0.14), rgba(255,176,46,0.07));
  border:0.5px solid rgba(255,201,61,0.35);
  border-left:4px solid #ffc83d;
  box-shadow:0 0 22px rgba(255,201,61,0.15);}
.mkt-badge{display:inline-block; font-size:11px; font-weight:800; letter-spacing:1px;
  padding:5px 12px; border-radius:30px; margin-bottom:10px;}
.mkt-badge.soon{background:#ffc83d; color:#3a2e00;}
.mkt-badge.on{background:#1aa873; color:#fff;}
.mkt-title{font-size:18px; font-weight:700; color:#f6efda; margin-bottom:8px; display:flex; align-items:center; gap:8px;}
.mkt-title i{color:#ffc83d;}
.mkt-text{font-size:13.5px; color:var(--text-soft); line-height:1.5;}
.mkt-cierre{font-size:13px; color:#f0e9d6; font-weight:600; margin-top:10px;}

/* Grilla de beneficios */
.grid-benef{display:grid; grid-template-columns:1fr; gap:11px;}
.benef{border-radius:16px; padding:16px; text-align:center;
  background:linear-gradient(160deg,rgba(124,138,255,0.07),rgba(193,91,224,0.04));
  border:0.5px solid rgba(124,138,255,0.14);}
.benef .ic{width:46px; height:46px; border-radius:14px; margin:0 auto 10px;
  background:linear-gradient(135deg,var(--blue),var(--violet));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:23px;
  box-shadow:0 0 22px rgba(142,77,210,0.5);}
.benef .bt{font-size:14px; font-weight:600; color:#e9e3fb; margin-bottom:5px;}
.benef .bx{font-size:12.5px; color:var(--text-soft); line-height:1.45;}

/* Cierre / CTA */
.benef-cta{border-radius:17px; padding:22px 18px; margin-top:18px; text-align:center;
  background:linear-gradient(135deg,rgba(54,120,232,0.18),rgba(193,91,224,0.18));
  border:0.5px solid rgba(124,138,255,0.3);}
.benef-cta .t{font-size:18px; font-weight:600; color:#f3f0ff; margin-bottom:6px;}
.benef-cta p{font-size:13px; color:var(--text-soft); margin-bottom:16px;}
.benef-cta .btns{display:flex; flex-direction:column; gap:10px; max-width:360px; margin:0 auto;}

/* ==========================================================================
   MARKETPLACE — preview en el banner de la landing
   ========================================================================== */
.mkt-preview{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:14px;}
@media (min-width:601px){ .mkt-preview{grid-template-columns:repeat(4,1fr);} }
.mkt-prev-card{display:block; text-decoration:none; border-radius:12px; overflow:hidden;
  background:rgba(0,0,0,0.25); border:0.5px solid rgba(124,138,255,0.25);}
.mkt-prev-card:hover{border-color:rgba(124,138,255,0.6);}
.mkt-prev-foto{aspect-ratio:1/1; background:#05040b; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.mkt-prev-foto img{width:100%; height:100%; object-fit:cover;}
.mkt-prev-sinfoto{color:var(--text-dim); font-size:26px;}
.mkt-prev-tit{font-size:12.5px; font-weight:600; color:#f0e9fa; padding:8px 8px 0; line-height:1.25;}
.mkt-prev-precio{font-size:13px; font-weight:700; color:var(--blue-soft); padding:2px 8px 8px;}
.mkt-vertodas{display:inline-block !important; width:auto !important; margin-top:14px; padding:12px 24px !important;}

/* ==========================================================================
   MARKETPLACE — páginas públicas (vidriera, sin login). Usan landing.css.
   ========================================================================== */
.vid-wrap{padding:30px 18px 60px; max-width:1000px; margin:0 auto;}
.vid-head{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.vid-h1{font-size:24px; font-weight:600;
  background:linear-gradient(115deg,#fff 10%,var(--violet-soft) 55%,var(--blue-soft) 95%);
  -webkit-background-clip:text; background-clip:text; color:transparent;}
.vid-sub{font-size:13px; color:var(--text-soft); margin:6px 0 16px;}
.vid-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.vid-tab{font-size:13px; color:var(--text-soft); text-decoration:none; padding:8px 16px; border-radius:30px;
  border:0.5px solid rgba(124,138,255,0.25); background:rgba(255,255,255,0.03);}
.vid-tab.on{color:#fff; background:linear-gradient(120deg,rgba(58,172,255,0.25),rgba(193,91,224,0.25)); border-color:rgba(124,138,255,0.6);}
.vid-buscar{display:flex; gap:8px; margin-bottom:16px;}
.vid-buscar .lform-input{flex:1;}
.vid-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
@media (min-width:601px){ .vid-grid{grid-template-columns:repeat(4,1fr);} }
.vid-card{display:block; text-decoration:none; border-radius:14px; overflow:hidden;
  background:rgba(255,255,255,0.03); border:0.5px solid rgba(124,138,255,0.18);}
.vid-card:hover{border-color:rgba(124,138,255,0.55);}
.vid-foto{aspect-ratio:1/1; background:#05040b; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.vid-foto img{width:100%; height:100%; object-fit:cover;}
.vid-sinfoto{color:var(--text-dim); font-size:30px;}
.vid-body{padding:10px 12px;}
.vid-titulo{font-size:14px; font-weight:600; color:#f0e9fa; line-height:1.3;}
.vid-precio{font-size:15px; font-weight:700; color:var(--blue-soft); margin-top:3px;}
.vid-rubro{font-size:12px; color:var(--text-dim);}
.vid-vacio{color:var(--text-soft); padding:24px 0;}
.vid-pag{display:flex; gap:10px; align-items:center; justify-content:center; margin-top:16px; color:var(--text-dim); font-size:13px;}
.vid-cta{margin-top:22px; text-align:center;}
.vid-cta .btn-primary{display:inline-block; width:auto; padding:14px 28px;}
.vid-fotos-det{display:flex; gap:10px; overflow-x:auto; margin:12px 0; padding-bottom:6px;}
.vid-fotos-det img{height:240px; border-radius:12px; object-fit:cover;}
.vid-desc{font-size:14px; color:var(--text-soft); line-height:1.55; white-space:pre-line; margin:8px 0;}
.vid-campos{font-size:13px; color:var(--text-dim); margin:6px 0;}
.vid-contacto{margin-top:18px; border-radius:16px; padding:20px; text-align:center;
  background:linear-gradient(135deg,rgba(54,120,232,0.18),rgba(193,91,224,0.18));
  border:0.5px solid rgba(124,138,255,0.3);}
.vid-contacto-t{font-size:15px; font-weight:600; color:#f3f0ff;}

/* ==========================================================================
   SUMATE — dos cards (trabajá / promotor)
   ========================================================================== */
.sumate-cards{display:grid; grid-template-columns:1fr; gap:12px;}
@media (min-width:601px){ .sumate-cards{grid-template-columns:repeat(3,1fr);} }

/* ==========================================================================
   FORMULARIOS PÚBLICOS (Trabajá / Promotor) — estética landing
   ========================================================================== */
.lform-wrap{padding:40px 22px 60px; max-width:560px; margin:0 auto;}
.lform-titulo{font-size:26px; font-weight:600; margin-bottom:6px;
  background:linear-gradient(115deg,#fff 10%,var(--violet-soft) 55%,var(--blue-soft) 95%);
  -webkit-background-clip:text; background-clip:text; color:transparent;}
.lform-sub{font-size:13px; color:var(--text-soft); margin-bottom:20px;}
.lform-field{margin-bottom:14px; display:flex; flex-direction:column; gap:6px;}
.lform-field label{font-size:13px; color:var(--text-soft);}
.lform-input{width:100%; background:rgba(255,255,255,0.04); color:#fff;
  border:0.5px solid rgba(124,138,255,0.3); border-radius:12px; padding:12px 13px; font-size:14px;
  font-family:inherit;}
.lform-input:focus{outline:none; border-color:var(--violet);}
.lform-hint{font-size:11px; color:var(--text-dim);}
.lform-check{flex-direction:row; align-items:center; gap:8px;}
.lform-check input{width:18px; height:18px;}
.lform-actions{display:flex; gap:10px; margin-top:18px;}
.lform-ok{background:rgba(46,230,160,0.12); border:0.5px solid rgba(46,230,160,0.4);
  color:#aef0d4; border-radius:12px; padding:14px; font-size:14px; margin-bottom:16px;}
.lform-err{background:rgba(255,90,120,0.1); border:0.5px solid rgba(255,90,120,0.4);
  color:#ffb3c0; border-radius:12px; padding:12px; font-size:13px; margin-bottom:14px;}
/* Honeypot: invisible para humanos, los bots lo completan. */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* ==========================================================================
   MUNDIAL — cinta temporal celeste/blanca (sutil). Para sacarla: borrar el
   bloque .mundial del Index.cshtml y este bloque CSS.
   ========================================================================== */
.mundial{overflow:hidden; white-space:nowrap;
  border-bottom:1px solid rgba(255,255,255,0.3);
  background:linear-gradient(180deg, #74acdb 0%, #9ecbed 30%, #ffffff 50%, #9ecbed 70%, #74acdb 100%);
  box-shadow:inset 0 -2px 8px rgba(117,170,219,0.4);}
.mundial-track{display:inline-flex; align-items:center; will-change:transform; animation:mundial-scroll 26s linear infinite;}
.mundial-track span{display:inline-block; padding:12px 0; font-size:13px; font-weight:800;
  letter-spacing:2.5px; color:#0a3d72; text-shadow:0 1px 0 rgba(255,255,255,0.6);}
@keyframes mundial-scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){
  .mundial-track{animation:none;}
}

/* ESCRITORIO (PC): 1025px en adelante */
@media (min-width: 1025px){
  /* El contenedor usa el ancho de la pantalla (centrado) en vez de 480px fijos */
  .device{max-width:1140px;}

  /* HERO más grande y con más aire (mismo degradado/glow) */
  .hero{padding:74px 22px 60px;}
  .hero h1{font-size:52px;}
  .slogan{font-size:15px;}
  .hero-glow{width:560px; height:380px;}

  /* Botones uno al lado del otro, centrados y con ancho automático */
  .btns{flex-direction:row; justify-content:center; gap:16px;}
  .btn-primary, .btn-ghost{display:inline-block; width:auto; padding:16px 34px;}

  /* STATS más grandes */
  .stats{padding:28px 14px;}
  .stat .n{font-size:30px;}
  .stat .l{font-size:12px;}

  /* SERVICIOS: 3 columnas, grilla centrada con ancho cómodo */
  .section{padding:48px 22px 8px;}
  .section h2{font-size:26px;}
  .section .sub{font-size:15px;}
  .grid-serv{grid-template-columns:repeat(3, 1fr); gap:16px; max-width:900px; margin-left:auto; margin-right:auto;}
  .subsidios{max-width:900px; margin-left:auto; margin-right:auto; margin-top:16px;}

  /* CONFÍAN: partners 4 en una fila, aseguradoras 5 columnas (centradas) */
  .trust{padding:48px 22px 24px;}
  .partners{grid-template-columns:repeat(4, 1fr); max-width:900px; margin-left:auto; margin-right:auto;}
  .insurers{grid-template-columns:repeat(5, 1fr); max-width:900px; margin-left:auto; margin-right:auto;}

  /* BENEFICIOS: grilla 3 columnas centrada; CTA con botones en fila */
  .beneficios{max-width:980px; margin-left:auto; margin-right:auto;}
  .grid-benef{grid-template-columns:repeat(3, 1fr); gap:16px;}
  .benef-cta .btns{flex-direction:row; justify-content:center; max-width:none;}
  .benef-cta .btn-primary, .benef-cta .btn-ghost{display:inline-block; width:auto; padding:14px 30px;}

  /* RAMOS: grilla cómoda y centrada; categorías a 4 columnas */
  .ramos{max-width:980px; margin-left:auto; margin-right:auto;}
  .grid-ramos{grid-template-columns:repeat(4, 1fr); gap:14px;}
  .ramo-cat-ttl{font-size:13px;}

  /* TRABAJÁ: caja centrada con ancho cómodo */
  .trabaja{max-width:760px; margin-left:auto; margin-right:auto;}
}

/* ==========================================================================
   MUNDIAL — la cinta es relative para apilar el texto por encima de su fondo.
   ========================================================================== */
.mundial{position:relative;}
.mundial-track{position:relative; z-index:2;}

/* ==========================================================================
   RETOQUE v2 — GLOBOS DE FONDO (toda la página). Capa decorativa DETRÁS del
   contenido (.wrap está en z-index:1; esta capa en z-index:0). pointer-events
   none => no molesta clics ni scroll. Para sacarla: borrar el bloque
   ".globos-fondo" del Index.cshtml y este bloque CSS.
   ========================================================================== */
.globos-fondo{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
.globos-fondo .globo{position:absolute; border-radius:50%; opacity:0; will-change:transform,opacity;
  /* celeste vivo + blanco brillante en el centro */
  background:radial-gradient(circle at 35% 30%, #ffffff 0%, #bfe6ff 38%, #5cc4ff 100%);
  /* glow celeste para que resalte sobre el fondo oscuro */
  box-shadow:0 0 16px rgba(90,196,255,0.75), 0 0 6px rgba(255,255,255,0.55);
  animation:globo-sube linear infinite;}
/* cuerdita sutil colgando del globo */
.globos-fondo .globo::after{content:""; position:absolute; left:50%; top:100%;
  width:1px; height:14px; background:linear-gradient(rgba(160,215,255,0.6), transparent);}
/* globos pares: más blancos (variante bandera), también vivos y con glow blanco */
.globos-fondo .globo:nth-child(2n){
  background:radial-gradient(circle at 35% 30%, #ffffff 0%, #f2faff 50%, #aaddff 100%);
  box-shadow:0 0 16px rgba(170,221,255,0.8), 0 0 6px rgba(255,255,255,0.7);}

/* Reparto a lo ancho/alto, tamaños, velocidades y delays distintos (18 globos) */
.globos-fondo .globo:nth-child(1) {left:5%;  top:88%; width:18px; height:18px; animation-duration:13s; animation-delay:0s;}
.globos-fondo .globo:nth-child(2) {left:14%; top:70%; width:26px; height:26px; animation-duration:16s; animation-delay:1.5s;}
.globos-fondo .globo:nth-child(3) {left:23%; top:40%; width:14px; height:14px; animation-duration:11s; animation-delay:3s;}
.globos-fondo .globo:nth-child(4) {left:31%; top:92%; width:30px; height:30px; animation-duration:18s; animation-delay:0.8s;}
.globos-fondo .globo:nth-child(5) {left:40%; top:55%; width:20px; height:20px; animation-duration:14s; animation-delay:2.2s;}
.globos-fondo .globo:nth-child(6) {left:48%; top:25%; width:16px; height:16px; animation-duration:12s; animation-delay:4s;}
.globos-fondo .globo:nth-child(7) {left:56%; top:80%; width:34px; height:34px; animation-duration:19s; animation-delay:1s;}
.globos-fondo .globo:nth-child(8) {left:64%; top:48%; width:22px; height:22px; animation-duration:15s; animation-delay:3.4s;}
.globos-fondo .globo:nth-child(9) {left:72%; top:15%; width:14px; height:14px; animation-duration:11s; animation-delay:5s;}
.globos-fondo .globo:nth-child(10){left:80%; top:85%; width:28px; height:28px; animation-duration:17s; animation-delay:0.4s;}
.globos-fondo .globo:nth-child(11){left:88%; top:60%; width:18px; height:18px; animation-duration:13s; animation-delay:2.8s;}
.globos-fondo .globo:nth-child(12){left:95%; top:35%; width:24px; height:24px; animation-duration:16s; animation-delay:4.5s;}
.globos-fondo .globo:nth-child(13){left:9%;  top:30%; width:22px; height:22px; animation-duration:15s; animation-delay:1.9s;}
.globos-fondo .globo:nth-child(14){left:35%; top:18%; width:16px; height:16px; animation-duration:12s; animation-delay:3.7s;}
.globos-fondo .globo:nth-child(15){left:52%; top:95%; width:26px; height:26px; animation-duration:18s; animation-delay:0.2s;}
.globos-fondo .globo:nth-child(16){left:68%; top:68%; width:20px; height:20px; animation-duration:14s; animation-delay:2.5s;}
.globos-fondo .globo:nth-child(17){left:84%; top:22%; width:30px; height:30px; animation-duration:19s; animation-delay:4.2s;}
.globos-fondo .globo:nth-child(18){left:18%; top:52%; width:24px; height:24px; animation-duration:16s; animation-delay:5.5s;}

/* Suben y se desvanecen (solo transform/opacity: barato para el scroll). */
@keyframes globo-sube{
  0%  {transform:translateY(40px)  scale(0.9); opacity:0;}
  15% {opacity:0.85;}
  70% {opacity:0.8;}
  100%{transform:translateY(-200px) scale(1);  opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .globos-fondo .globo{animation:none; opacity:0.45; transform:none;}
}

/* ==========================================================================
   RETOQUE 2 — RAMOS: tarjetas parejas (mismo alto, íconos alineados)
   ========================================================================== */
.grid-ramos{align-items:stretch;}            /* todas las de una fila, mismo alto */
.ramo{height:100%; min-height:66px; align-items:center;}
.ramo .nm{align-self:center;}

/* ==========================================================================
   RETOQUE 3 — CONFÍAN: todos los logos al MISMO peso visual. La imagen llena
   un box de tamaño fijo (object-fit:contain) -> los chicos se agrandan y los
   grandes se achican hasta el mismo límite, centrados y sin deformarse.
   ========================================================================== */
/* Menos padding + más alto de tarjeta => los logos llenan más y se ven grandes. */
.partner{height:64px; padding:6px 10px;}
.insurer{height:60px; padding:5px 8px;}
.partner-logo, .partner-white .partner-logo, .insurer-logo{
  max-height:none; max-width:none; width:100%; height:100%; object-fit:contain; display:block;}

/* ==========================================================================
   Sección "Instalá la app" (PWA) — detección de dispositivo vía pwa-install.js
   ========================================================================== */
.instalar-app{padding:48px 16px;display:flex;justify-content:center;}
.instalar-card{max-width:640px;width:100%;text-align:center;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
  border-radius:20px;padding:32px 24px;}
.instalar-logo{border-radius:14px;margin-bottom:12px;background:#fff;padding:6px;}
.instalar-titulo{color:#fff;font-size:1.5rem;margin:0 0 8px;}
.instalar-bajada{color:#aab2c0;font-size:1rem;line-height:1.6;margin:0 0 20px;}
.btn-instalar{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:none;border-radius:12px;padding:14px 28px;font-size:1.05rem;font-weight:600;
  color:#fff;background:linear-gradient(135deg,#7b3fe4,#3a8df0);}
.btn-instalar:hover{filter:brightness(1.08);}
.instalar-nota{color:#8a93a3;font-size:.85rem;margin:8px 0 0;}
.instalar-fallback{color:#8a93a3;font-size:.85rem;margin:12px 0 0;}
/* pasos iPhone con imagenes */
.ios-pasos{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin:16px 0;}
.ios-paso{margin:0;max-width:180px;flex:1 1 140px;}
.ios-paso img{width:100%;height:auto;border-radius:14px;
  border:1px solid rgba(255,255,255,.1);background:#1a1f2e;}
.ios-paso figcaption{color:#cbd2dc;font-size:.85rem;line-height:1.5;margin-top:8px;text-align:center;}
.ios-paso figcaption strong{color:#fff;}