/* J&K: capa responsive + movimiento compartida por todas las páginas.
   Las páginas traen estilos inline; aquí se sobreescriben con html body + !important. */

/* Lenis */
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }
.lenis.lenis-stopped { overflow:hidden; }

/* GSAP toma el control de las entradas: se apagan las transiciones/keyframes CSS que chocarían */
html.jk-motion [data-reveal] { transition:none !important; }
html.jk-motion [data-hero-copy],
html.jk-motion [data-hero-img],
html.jk-motion [data-feat-bar],
html.jk-motion [data-page-hero] > img { animation:none !important; }

/* Escritorio fluido: el lienzo de 1400px ya no obliga a scroll horizontal en laptops */
html body [data-wrap] { width:min(1400px, calc(100% - 48px)) !important; }
html body [data-shell] { overflow-x:hidden !important; }

html body [data-nav-links] a { white-space:nowrap; }
@media (min-width:981px) { html body [data-topbar] [data-nav-links] { margin:0 30px 0 20px; } }
@media (max-width:1400px) and (min-width:981px) {
  html body [data-topbar] [data-logo] > span { display:none !important; }
  html body [data-nav-links] { gap:24px !important; }
}
@media (max-width:1180px) and (min-width:981px) {
  html body [data-topbar] [data-search] { display:none !important; }
  html body [data-nav-links] { gap:20px !important; font-size:13.5px !important; }
}

/* ---------- Tablet y celular ---------- */
@media (max-width:980px) {
  html body { background:#FCFAF6 !important; }
  html body [data-shell] { padding:0 !important; background:#FCFAF6 !important; }
  html body [data-wrap] { width:100% !important; border-radius:0 !important; box-shadow:none !important; }

  /* Secciones: margen lateral cómodo */
  html body [data-wrap] > div:not([data-home-hero]):not([data-page-hero]) { padding-left:20px !important; padding-right:20px !important; }
  html body [data-wrap] > div[style*="padding: 88px"],
  html body [data-wrap] > div[style*="padding: 96px"],
  html body [data-wrap] > div[style*="padding: 80px"] { padding-top:56px !important; padding-bottom:56px !important; }

  /* Campos a 16px: iOS no hace zoom al tocarlos */
  html body [data-wrap] input, html body [data-wrap] select, html body [data-wrap] textarea { font-size:16px !important; }

  html body [data-form-row] { gap:16px !important; }

  /* Tipografía fluida */
  html body [data-wrap] h1 { font-size:clamp(34px, 9.6vw, 50px) !important; line-height:1.12 !important; }
  html body [data-wrap] h2 { font-size:clamp(27px, 7.2vw, 38px) !important; line-height:1.16 !important; }
  html body [data-wrap] h3[data-ttl] { font-size:clamp(19px, 5.4vw, 30px) !important; }

  /* Rejillas: una columna por defecto */
  html body [data-wrap] [style*="grid-template-columns"]:not([data-stats]):not([data-pair]):not([data-foot-grid]):not([data-keep]):not([data-count]):not([data-cards]):not([data-values]):not([data-foot]):not([data-feat-bar]):not([data-table] *) { grid-template-columns:1fr !important; gap:28px !important; }
  html body [data-wrap] [style*="grid-template-columns"] > * { min-width:0; }
  html body [data-wrap] img { max-width:100%; }
  html body [data-wrap] [style*="max-width: 3"], html body [data-wrap] [style*="max-width: 4"], html body [data-wrap] [style*="max-width: 5"] { max-width:100% !important; }

  /* Imágenes con altura fija -> proporción */
  html body [data-wrap] [data-zoom][style*="height: 4"],
  html body [data-wrap] [data-zoom][style*="height: 5"] { height:auto !important; aspect-ratio:4/3; }

  /* ---------- Hero del Home ---------- */
  html body [data-home-hero] { height:auto !important; display:flex; flex-direction:column; padding:0 0 18px; }
  html body [data-hero-media] { height:auto !important; bottom:0 !important; border-radius:0 0 28px 28px !important; }
  html body [data-hero-img] { object-position:60% 40% !important; }
  html body [data-hero-media] > div { background:linear-gradient(180deg, rgba(10,8,6,.82) 0%, rgba(10,8,6,.62) 45%, rgba(10,8,6,.78) 100%) !important; }
  html body [data-topbar] { position:relative !important; z-index:30; padding:16px 20px !important; gap:10px !important; flex-wrap:nowrap !important; }
  html body [data-topbar] img[src*="jk-logo"] { height:44px !important; }
  html body [data-topbar] > div:first-child { min-width:0; }

  /* Hero de páginas internas: a todo el ancho */
  html body [data-page-hero] { padding:0 !important; }
  html body [data-page-hero] > div[style*="inset"]:last-child { padding:0 20px !important; }
  html body [data-page-hero] h1 { font-size:clamp(28px, 8.2vw, 42px) !important; line-height:1.14 !important; }
  html body [data-hero-flow] { height:auto !important; display:flex; flex-direction:column; padding-bottom:52px !important; }
  html body [data-hero-flow] > img { position:absolute; inset:0; }
  html body [data-hero-flow] h1 { font-size:clamp(32px, 9vw, 48px) !important; }

  /* Franja azul de 3 datos (Seguro de vida) */
  html body [data-wrap] > div[style*="repeat(3, 1fr)"][style*="background: rgb(15, 46, 92)"] { gap:0 !important; }
  html body [data-wrap] > div[style*="repeat(3, 1fr)"][style*="background: rgb(15, 46, 92)"] > div { padding:22px 20px !important; border-left:0 !important; border-right:0 !important; border-bottom:1px solid rgba(255,255,255,.12); }
  html body [data-wrap] > div[style*="repeat(3, 1fr)"][style*="background: rgb(15, 46, 92)"] > div > * { border:0 !important; }
  html body [data-row] [data-panel] > div { padding-left:0 !important; }
  html body [data-table] [style*="grid-template-columns"] > * { padding-left:8px !important; padding-right:8px !important; }
  html body [data-hero-copy] { position:relative !important; left:auto !important; top:auto !important; width:auto !important; padding:44px 20px 0; z-index:2; }
  html body [data-hero-copy] p { max-width:none !important; font-size:15.5px !important; }
  html body [data-hero-copy] > div { margin-top:28px !important; }
  html body [data-home-hero] [data-scroll] { display:none !important; }
  html body [data-feat-bar] { position:relative !important; left:auto !important; right:auto !important; bottom:auto !important; margin:40px 16px 0; padding:22px 20px !important; gap:18px !important; border-radius:20px !important; }
  html body [data-feat-bar] [data-ico] span:first-child { width:40px !important; height:40px !important; }

  /* Menú móvil */
  html body [data-burger] { display:flex !important; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); }
  html body [data-topbar] [data-logo] img { height:46px !important; }
  html body [data-actions] { gap:8px !important; }
  html body [data-lang] { display:flex !important; width:40px !important; height:40px !important; }
  html body [data-nav-links] { left:12px !important; right:12px !important; top:calc(100% - 4px) !important; border-radius:18px !important; padding:8px 20px 14px !important; }
  html body [data-nav-links] a { font-size:16px !important; padding:14px 0 !important; border-bottom:1px solid rgba(255,255,255,.1); color:#FFFFFF !important; }
  html body [data-nav-links] > *:last-child, html body [data-nav-links] > *:last-child a { border-bottom:0; }
  html body [data-nav-links] [data-drop] { width:100%; }
  html body [data-nav-links] [data-menu] { display:none !important; }
  html body [data-nav-links] [data-navi] { height:auto !important; overflow:visible !important; }
  html body [data-nav-links] [data-navi] > span + span { display:none !important; }
  html body #navToggle:checked ~ [data-nav-links] { animation:jk-menu .32s cubic-bezier(.22,1,.36,1) both; }
  @keyframes jk-menu { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }

  /* ---------- Bloques del Home ---------- */
  html body [data-about-grid] { gap:36px !important; }
  html body [data-about-grid] [data-zoom] { height:auto !important; aspect-ratio:4/5; }
  html body [data-count="a"] { left:12px !important; right:12px !important; bottom:12px !important; padding:16px 6px !important; border-radius:14px !important; }
  html body [data-count="a"] > div > div:first-child { font-size:22px !important; }
  html body [data-count="a"] > div > div:last-child { font-size:11.5px !important; line-height:1.3; }

  html body [data-row] > div:first-child { gap:14px !important; padding:20px 0 !important; }
  html body [data-row] [data-plus] { width:36px !important; height:36px !important; }
  html body [data-panel][style*="max-height: 340px"] { max-height:640px !important; }
  html body [data-panel-grid] { gap:18px !important; padding:0 0 24px 0 !important; }
  html body [data-panel-grid] [data-zoom] { height:auto !important; aspect-ratio:16/9; }

  html body [data-stats] { gap:8px !important; margin-top:32px !important; }
  html body [data-stats] > div { padding:20px 6px !important; border-radius:14px !important; }
  html body [data-stats] > div > div:first-child { font-size:clamp(19px, 5.6vw, 30px) !important; }
  html body [data-stats] > div > div:last-child { font-size:11.5px !important; line-height:1.35 !important; }

  html body [data-proj-grid] > div:last-child > [data-zoom] { height:auto !important; aspect-ratio:4/3; }
  html body [data-pair] { gap:14px !important; }
  html body [data-pair] [data-zoom] { height:auto !important; aspect-ratio:1/1; }

  html body [data-cta-grid] { margin-top:28px !important; }
  html body [data-cta-grid] > div:first-child > div:first-child { height:auto !important; aspect-ratio:4/3; }
  html body #contact > div { padding:36px 20px !important; border-radius:22px !important; }

  html body [data-why-grid] { gap:36px !important; margin-top:28px !important; }
  html body [data-pill] { height:auto !important; aspect-ratio:1/1; border-radius:999px !important; max-width:420px; width:100%; margin:0 auto; }

  /* Tarjetas en carrusel deslizable */
  html body [data-cards] { display:grid !important; grid-template-columns:none !important; grid-auto-flow:column; grid-auto-columns:80%; gap:14px !important; overflow-x:auto; scroll-snap-type:x mandatory; margin-left:-20px; margin-right:-20px; padding:0 20px 6px; scroll-padding-left:20px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  html body [data-cards]::-webkit-scrollbar { display:none; }
  html body [data-cards] > * { scroll-snap-align:start; }
  html body [data-cards] [data-zoom] { height:auto !important; aspect-ratio:4/3; }

  html body [data-banner] { height:auto !important; min-height:280px; }
  html body [data-banner] > img { position:absolute; inset:0; }
  html body [data-banner] > div:nth-child(2) { background:linear-gradient(180deg, rgba(15,46,92,.9) 0%, rgba(23,23,23,.72) 100%) !important; }
  html body [data-banner-copy] { position:relative !important; left:auto !important; padding:40px 24px; min-height:280px; box-sizing:border-box; }

  html body [data-foot-grid], html body [data-foot] { grid-template-columns:1fr 1fr !important; gap:32px 20px !important; }
  html body [data-foot-grid] > div:first-child, html body [data-foot-grid] > div:last-child,
  html body [data-foot] > div:first-child, html body [data-foot] > div:last-child { grid-column:1 / -1; }
  html body [data-values] { grid-template-columns:1fr 1fr !important; gap:12px !important; }
  html body [data-values] > div { padding:22px 12px !important; }
}

@media (max-width:560px) {
  html body [data-topbar] [data-nav-cta] { display:none !important; }
  html body [data-topbar] > div:first-child > span { display:none !important; }
  html body [data-topbar] a[data-btn]:not([data-nav-cta]) { padding:10px 16px !important; font-size:12.5px !important; }
  html body [data-hero-copy] { padding-top:36px; }
  html body [data-hero-copy] a[data-btn] { width:100%; justify-content:space-between; box-sizing:border-box; }
  html body [data-banner-copy] a[data-btn] { white-space:nowrap; }
}

/* Taps sin hover pegado */
@media (hover:none) {
  html body [data-lift]:hover, html body [data-btn]:hover { transform:none; }
  html body [data-zoom]:hover img { transform:none; }
  html body [data-row]:hover { background:transparent; }
}
html body a, html body [data-row], html body label { -webkit-tap-highlight-color:transparent; }

/* El logo es blanco: en fondos claros va sobre una pastilla azul de la marca */
html body [data-wrap] > div:not([data-topbar]):not([data-home-hero]):not([data-page-hero]) img[src*="jk-logo"] { background:#0F2E5C; padding:6px 9px; border-radius:12px; box-sizing:content-box; }

/* Tablet: mismas reglas del celular pero con fotos menos altas y 2 columnas donde sobra ancho */
@media (min-width:600px) and (max-width:980px) {
  html body [data-wrap] > div:not([data-home-hero]):not([data-page-hero]) { padding-left:40px !important; padding-right:40px !important; }
  html body [data-about-grid] [data-zoom] { aspect-ratio:4/3; }
  html body [data-pair] [data-zoom] { aspect-ratio:4/3; }
  html body [data-wrap] [data-zoom][style*="height: 4"], html body [data-wrap] [data-zoom][style*="height: 5"] { aspect-ratio:16/9; }
  html body [data-cta-grid] > div:first-child > div:first-child { aspect-ratio:16/9; }
  html body [data-cards] { grid-auto-columns:46%; margin-left:-40px; margin-right:-40px; padding:0 40px 6px; scroll-padding-left:40px; }
  html body [data-pill] { max-width:360px; }
  html body [data-feat-bar] { grid-template-columns:repeat(3,1fr) !important; margin:40px 24px 0; }
  html body [data-feat-bar] [data-ico] { flex-direction:column; align-items:flex-start !important; gap:10px !important; }
  html body [data-hero-copy] { padding:72px 40px 0; max-width:620px; }
  html body [data-values] { grid-template-columns:repeat(4,1fr) !important; }
}
@media (max-width:980px) { html body [data-map] { height:300px !important; } }

/* ---------- Formulario v2 (Home + Contacto) ---------- */
html body [data-jk-form] { display:flex; flex-direction:column; gap:18px; position:relative; }
html body [data-flabel] { display:block; margin:0 0 8px; padding:0; font-size:12.5px; font-weight:700; letter-spacing:.01em; color:#0F2E5C; }
html body [data-fwrap] { position:relative; }
html body [data-ficon] { position:absolute; left:15px; top:16px; color:#8C9AB0; display:flex; pointer-events:none; transition:color .2s ease; }
html body [data-fin] { width:100%; box-sizing:border-box; height:54px; padding:0 16px 0 46px; border:1.5px solid #DCE5F1; background:#FBFCFE; border-radius:14px; font:inherit; font-size:15px; color:#181614; outline:none; transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
html body textarea[data-fin] { height:auto; min-height:132px; padding:15px 16px 15px 46px; line-height:1.6; resize:vertical; }
html body [data-fin]::placeholder { color:#A3AEBF; }
html body [data-fin]:hover { border-color:#C2D2E8; }
html body [data-fin]:focus { border-color:#2E7CD6; background:#FFFFFF; box-shadow:0 0 0 4px rgba(46,124,214,.14); }
html body [data-fwrap]:focus-within [data-ficon] { color:#2E7CD6; }
html body [data-form-row] { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
html body [data-chips] { border:0; margin:0; padding:0; min-width:0; }
html body [data-chiprow] { display:flex; flex-wrap:wrap; gap:8px; }
html body [data-chip] { position:relative; cursor:pointer; }
html body [data-chip] input { position:absolute; opacity:0; width:1px; height:1px; }
html body [data-chip] > span { display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border-radius:999px; border:1.5px solid #DCE5F1; background:#FBFCFE; font-size:13.5px; font-weight:600; color:#333B47; transition:background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease; }
html body [data-chip]:hover > span { border-color:#9DBBE3; }
html body [data-chip]:active > span { transform:scale(.97); }
html body [data-chip] > input:checked + span { background:#0F2E5C; border-color:#0F2E5C; color:#FFFFFF; }
html body [data-chip] > input:focus-visible + span { box-shadow:0 0 0 4px rgba(46,124,214,.22); }
html body [data-fsubmit] { position:relative; display:flex; align-items:center; justify-content:center; gap:10px; height:56px; border:0; border-radius:14px; background:#0F2E5C; color:#FFFFFF; font:inherit; font-size:15px; font-weight:700; cursor:pointer; transition:background-color .2s ease, transform .12s ease, box-shadow .2s ease; box-shadow:0 12px 26px rgba(15,46,92,.22); }
html body [data-fsubmit]:hover { background:#1B4D8C; }
html body [data-fsubmit]:active { transform:scale(.985); }
html body [data-fsubmit][disabled] { opacity:.8; cursor:progress; }
html body [data-fspin] { display:none; }
html body [data-fspin] svg { animation:jk-spin .8s linear infinite; }
html body [data-fsubmit][disabled] [data-fspin] { display:flex; }
html body [data-fsubmit][disabled] [data-fsend] { display:none; }
html body [data-fsend], html body [data-fspin] { display:flex; }
html body [data-fsubmit]:not([disabled]) [data-fspin] { display:none; }
@keyframes jk-spin { to { transform:rotate(360deg); } }
html body [data-fstatus] { display:none; align-items:flex-start; gap:10px; padding:14px 16px; border-radius:14px; font-size:14px; line-height:1.55; font-weight:600; }
html body [data-fstatus="sent"] { display:flex; background:#E8F5EE; color:#1F7A4D; }
html body [data-fstatus="error"] { display:flex; background:#FDECEC; color:#B42318; }
html body [data-fstatus="error"] [data-fok] { display:none; }
html body [data-fok] { display:flex; flex:none; margin-top:1px; }
html body [data-fnote] { margin:-4px 0 0; font-size:12px; line-height:1.6; color:#8C93A0; }
html body [data-fnote] a { color:#1B4D8C; text-decoration:underline; text-underline-offset:2px; }

/* ---------- Contacto: panel + formulario ---------- */
html body [data-cgrid] { display:grid; grid-template-columns:400px 1fr; max-width:1150px; margin:0 auto; background:#FFFFFF; border-radius:28px; box-shadow:0 30px 70px rgba(15,46,92,.10); overflow:hidden; }
html body [data-cpanel] { background:#0F2E5C; color:#FFFFFF; padding:30px 30px 34px; display:flex; flex-direction:column; }
html body [data-cphoto] { height:240px; border-radius:18px; overflow:hidden; }
html body [data-ctitle] { margin:24px 0 0; font-size:24px; font-weight:700; letter-spacing:-.02em; color:#FFFFFF; }
html body [data-ctags] { margin-top:14px; display:flex; flex-wrap:wrap; gap:6px; }
html body [data-ctags] > span { padding:6px 11px; border-radius:999px; background:rgba(255,255,255,.1); font-size:12px; font-weight:600; color:#DCE8F7; }
html body [data-crows] { margin-top:26px; display:flex; flex-direction:column; gap:16px; }
html body [data-crow] { display:flex; gap:14px; align-items:flex-start; }
html body [data-cico] { flex:none; width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; color:#8FC0F5; }
html body [data-clabel] { font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#8FA9CC; }
html body [data-cval] { margin-top:3px; font-size:14.5px; line-height:1.5; color:#FFFFFF; }
html body [data-cval] a { color:#FFFFFF; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3); }
html body [data-cval] a:hover { border-color:#FFFFFF; }
html body [data-cbadges] { margin-top:auto; padding-top:26px; display:flex; flex-direction:column; gap:8px; }
html body [data-cbadges] > span { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600; color:#C7DCF3; }
html body [data-cform] { padding:40px 44px 40px; }
html body [data-ftitle] { margin:0; font-size:30px; font-weight:700; letter-spacing:-.03em; color:#0F2E5C; }
html body [data-fsub] { margin:8px 0 26px; font-size:15px; line-height:1.6; color:#6E6A64; }

@media (max-width:980px) {
  html body [data-cgrid] { grid-template-columns:1fr; border-radius:22px; }
  html body [data-cform] { order:-1; padding:28px 20px; }
  html body [data-cpanel] { padding:24px 20px 28px; }
  html body [data-cphoto] { height:auto; aspect-ratio:4/3; }
  html body [data-wrap] [data-ftitle] { font-size:26px !important; }
  html body [data-wrap] [data-ctitle] { font-size:22px !important; }
}
@media (max-width:560px) {
  html body [data-form-row] { grid-template-columns:1fr !important; }
  html body [data-chip] > span { min-height:42px; }
}

/* ---------- Servicios v2 ---------- */
html body [data-svc-hero] { position:relative; overflow:hidden; padding:110px 44px 96px; }
html body [data-svc-heroimg] { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
html body [data-svc-shade] { position:absolute; inset:0; background:linear-gradient(100deg, rgba(10,24,48,.94) 0%, rgba(15,46,92,.82) 45%, rgba(15,46,92,.35) 100%); }
html body [data-svc-herocopy] { position:relative; max-width:640px; }
html body [data-svc-herocopy] h1 { margin:0; font-size:56px; line-height:1.05; font-weight:700; letter-spacing:-.035em; color:#FFFFFF; }
html body [data-svc-herocopy] > p { margin:20px 0 0; font-size:17px; line-height:1.7; color:rgba(255,255,255,.9); }
html body [data-svc-ctas] { margin-top:30px; display:flex; flex-wrap:wrap; gap:12px; }
html body [data-sbtn], html body [data-sbtn2] { display:inline-flex; align-items:center; gap:10px; height:52px; padding:0 24px; border-radius:999px; font-size:14.5px; font-weight:700; transition:background-color .2s ease, color .2s ease, transform .12s ease; }
html body [data-sbtn] { background:#2E7CD6; color:#FFFFFF; }
html body [data-sbtn]:hover { background:#1B6BC4; color:#FFFFFF; }
html body [data-sbtn][data-light] { background:#FFFFFF; color:#0F2E5C; }
html body [data-sbtn][data-light]:hover { background:#EDF3FB; color:#0F2E5C; }
html body [data-sbtn2] { background:rgba(255,255,255,.1); color:#FFFFFF; border:1.5px solid rgba(255,255,255,.35); }
html body [data-sbtn2]:hover { background:rgba(255,255,255,.18); color:#FFFFFF; }
html body [data-sbtn]:active, html body [data-sbtn2]:active { transform:scale(.97); }
html body [data-svc-trust] { margin-top:34px; display:flex; flex-wrap:wrap; gap:10px 22px; }
html body [data-svc-trust] > span { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:#C7DCF3; }
html body [data-svc-trust] svg { color:#8FC0F5; }

html body [data-svc-sec] { padding:96px 44px; }
html body [data-svc-first] { padding-top:88px; }
html body [data-svc-tint] { background:#F3F6FB; }
html body [data-svc-head] { text-align:center; max-width:640px; margin:0 auto; }
html body [data-svc-eyebrow] { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#6E6A64; }
html body [data-svc-head] h2, html body [data-svc-h2l] { margin:16px 0 0; font-size:40px; line-height:1.15; font-weight:700; letter-spacing:-.03em; color:#181614; }
html body [data-svc-h2l] { margin-top:0; font-size:34px; }
html body [data-svc-head] p { margin:16px auto 0; font-size:16px; line-height:1.7; color:#6E6A64; }
html body [data-svc-grid] { margin-top:52px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
html body [data-svc-card] { display:flex; flex-direction:column; background:#FFFFFF; border-radius:22px; overflow:hidden; box-shadow:0 1px 0 rgba(15,46,92,.06), 0 18px 40px rgba(15,46,92,.07); transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease; }
@media (hover:hover) { html body [data-svc-card]:hover { transform:translateY(-6px); box-shadow:0 1px 0 rgba(15,46,92,.06), 0 26px 50px rgba(15,46,92,.12); } }
html body [data-svc-img] { display:block; aspect-ratio:16/10; overflow:hidden; }
html body [data-svc-img] img { width:100%; height:100%; object-fit:cover; display:block; }
html body [data-svc-body] { position:relative; padding:34px 26px 26px; display:flex; flex-direction:column; flex:1; }
html body [data-svc-ico] { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:14px; background:#EDF3FB; color:#1B4D8C; flex:none; }
html body [data-svc-body] > [data-svc-ico] { position:absolute; top:-24px; left:26px; background:#0F2E5C; color:#FFFFFF; box-shadow:0 10px 20px rgba(15,46,92,.25); }
html body [data-svc-body] h3 { margin:0; font-size:20px; line-height:1.25; font-weight:700; letter-spacing:-.02em; }
html body [data-svc-body] h3 a { color:#181614; }
html body [data-svc-body] > p { margin:10px 0 0; font-size:14.5px; line-height:1.7; color:#6E6A64; }
html body [data-svc-body] ul { margin:16px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
html body [data-svc-body] li { display:flex; gap:9px; font-size:14px; line-height:1.5; color:#333B47; }
html body [data-svc-body] li svg { flex:none; margin-top:2px; color:#2E7CD6; }
html body [data-svc-link] { margin-top:auto; padding-top:20px; display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:#1B4D8C; }
html body [data-svc-link] svg { transition:transform .25s cubic-bezier(.22,1,.36,1); }
html body [data-svc-link]:hover svg { transform:translateX(4px); }

html body [data-svc-steps] { margin-top:48px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
html body [data-svc-step] { position:relative; background:#FFFFFF; border-radius:20px; padding:30px 28px; }
html body [data-svc-num] { position:absolute; top:26px; right:28px; font-size:13px; font-weight:700; letter-spacing:.14em; color:#B8C6DA; }
html body [data-svc-step] h3, html body [data-svc-why] h3, html body [data-svc-areabox] h3 { margin:18px 0 0; font-size:18px; font-weight:700; letter-spacing:-.02em; color:#181614; }
html body [data-svc-step] p, html body [data-svc-why] p, html body [data-svc-areabox] p { margin:8px 0 0; font-size:14.5px; line-height:1.7; color:#6E6A64; }

html body [data-svc-split] { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
html body [data-svc-whys] { margin-top:30px; display:grid; grid-template-columns:1fr 1fr; gap:26px 24px; }
html body [data-svc-why] h3 { margin-top:14px; font-size:16.5px; }
html body [data-svc-area] { position:relative; }
html body [data-svc-areaimg] { aspect-ratio:4/3.4; border-radius:24px; overflow:hidden; }
html body [data-svc-areaimg] img { width:100%; height:100%; object-fit:cover; display:block; }
html body [data-svc-areabox] { position:relative; margin:-90px 24px 0; background:#FFFFFF; border-radius:20px; padding:26px 26px 22px; box-shadow:0 22px 50px rgba(15,46,92,.14); }
html body [data-svc-areabox] h3 { margin-top:14px; }

html body [data-svc-faqwrap] { max-width:820px; margin:0 auto; }
html body [data-svc-faqs] { margin-top:36px; display:flex; flex-direction:column; gap:10px; }
html body [data-svc-faq] { background:#FFFFFF; border-radius:16px; padding:0 22px; box-shadow:0 1px 0 rgba(15,46,92,.05); }
html body [data-svc-faq] summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0; font-size:16px; font-weight:700; color:#181614; }
html body [data-svc-faq] summary::-webkit-details-marker { display:none; }
html body [data-svc-plus] { position:relative; flex:none; width:32px; height:32px; border-radius:999px; background:#EDF3FB; transition:background-color .2s ease; }
html body [data-svc-plus]::before, html body [data-svc-plus]::after { content:""; position:absolute; left:50%; top:50%; width:12px; height:2px; margin:-1px 0 0 -6px; border-radius:2px; background:#1B4D8C; }
html body [data-svc-plus]::after { transform:rotate(90deg); transition:transform .3s cubic-bezier(.22,1,.36,1); }
html body [data-svc-faq][open] [data-svc-plus] { background:#0F2E5C; }
html body [data-svc-faq][open] [data-svc-plus]::before, html body [data-svc-faq][open] [data-svc-plus]::after { background:#FFFFFF; }
html body [data-svc-faq][open] [data-svc-plus]::after { transform:rotate(0deg); }
html body [data-svc-faq] > p { margin:0; padding:0 0 20px; font-size:15px; line-height:1.75; color:#6E6A64; }

html body [data-svc-cta] { display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; background:#0F2E5C; border-radius:26px; padding:44px 48px; }
html body [data-svc-cta] h2 { margin:0; font-size:34px; font-weight:700; letter-spacing:-.03em; color:#FFFFFF; }
html body [data-svc-cta] p { margin:10px 0 0; font-size:15.5px; color:#C7DCF3; }
html body [data-svc-cta] [data-svc-ctas] { margin-top:0; }

@media (max-width:1100px) and (min-width:981px) { html body [data-svc-grid] { grid-template-columns:repeat(2,1fr); } }
@media (max-width:980px) {
  html body [data-wrap] > [data-svc-hero] { padding:56px 20px 52px !important; }
  html body [data-wrap] [data-svc-herocopy] h1 { font-size:clamp(38px, 11vw, 52px) !important; }
  html body [data-svc-herocopy] > p { font-size:15.5px; }
  html body [data-svc-shade] { background:linear-gradient(180deg, rgba(10,24,48,.9) 0%, rgba(15,46,92,.86) 100%); }
  html body [data-wrap] > [data-svc-sec] { padding:64px 20px !important; }
  html body [data-wrap] [data-svc-head] h2, html body [data-wrap] [data-svc-h2l] { font-size:clamp(27px, 7.4vw, 36px) !important; }
  html body [data-svc-grid] { grid-template-columns:repeat(2,1fr); gap:16px; margin-top:36px; }
  html body [data-svc-steps] { grid-template-columns:1fr; gap:12px; margin-top:32px; }
  html body [data-svc-split] { grid-template-columns:1fr; gap:44px; }
  html body [data-svc-cta] { padding:32px 24px; border-radius:22px; }
  html body [data-wrap] [data-svc-cta] h2 { font-size:28px !important; }
}
@media (max-width:640px) {
  html body [data-svc-grid] { grid-template-columns:1fr; }
  html body [data-svc-whys] { grid-template-columns:1fr; gap:20px; }
  html body [data-svc-ctas] > a { flex:1 1 100%; justify-content:center; }
  html body [data-svc-areabox] { margin:-60px 12px 0; padding:22px 20px; }
  html body [data-svc-trust] { flex-direction:column; gap:10px; }
  /* Pie: copyright y links legales no se encimen */
  html body [data-wrap] > div:last-child [style*="justify-content: space-between"] { flex-direction:column; align-items:flex-start; gap:10px; }
}