@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;650;700;800;850&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');

/* Refinamiento: espaciado, escala, color, estilos de FAQ y tipografia. */
:root{ --jsb-accent:#1f6fe5; --jsb-accent-soft:#eef5ff; }

/* 1. Menos aire entre secciones */
.jsb-home{ padding-block: clamp(36px, 4vw, 58px); }
.jsb-section-head{ margin-bottom: 24px; }

/* 2. Escala tipografica mas contenida */
.jsb-home h1{ font-size: clamp(28px, 2.6vw, 44px); }
.jsb-hero h1{ font-size: clamp(29px, 2.4vw, 41px); line-height: 1.08; }
.jsb-home h2{ font-size: clamp(23px, 2.3vw, 35px); }
.jsb-lead{ font-size: clamp(16px, 1.4vw, 18px); }

/* 3. Color moderno, minimalista */
.jsb-button--orange{ background: linear-gradient(135deg,#ff6b1f 0%, #e35600 100%); }
.jsb-button--orange:hover,.jsb-button--orange:focus-visible{ background: linear-gradient(135deg,#ff7a33 0%, #cf5000 100%); }
.jsb-link{ color: var(--jsb-accent); }
.jsb-nav__cta{ background: linear-gradient(135deg,#ff6b1f 0%, #e35600 100%); }

/* 4. Ritmo de fondos sutiles (separa sin tanto espacio) */
.jsb-hero{ background: radial-gradient(120% 130% at 86% 0%, #e9f2ff 0%, transparent 44%), linear-gradient(180deg,#fbfdff,#ffffff); }
.jsb-problem{ background: linear-gradient(180deg,#f6f9fd,#eef4fb); }
.jsb-approach{ background: var(--jsb-mist); }
.jsb-presence{ background: #ffffff; }
.jsb-maintenance{ background: linear-gradient(180deg,#f5f9fd,#eef4fb); }

/* 5. Tarjetas: sombra mas suave y moderna, menos alto muerto */
.jsb-service-card{ min-height: 340px; border-radius: 16px; box-shadow: 0 6px 20px rgba(17,40,70,.05); }
.jsb-info-grid article{ border-radius: 15px; box-shadow: 0 5px 18px rgba(17,40,70,.045); }
.jsb-problem__list{ border-radius: 16px; }

/* 6. Linea-respuesta del hero (what / how, para humanos e IA) */
.jsb-answer{ max-width:620px; margin:14px 0 0; padding-left:14px; border-left:3px solid var(--jsb-accent); color:var(--jsb-ink); font-size:clamp(15px,1.3vw,17px); font-weight:500; line-height:1.55; }

/* 7. Etiquetas de tarjeta con acento */
.jsb-card-top span{ color:var(--jsb-accent); }

/* 8. FAQ en la Home */
.jsb-home-faq{ background:var(--jsb-white); }
.jsb-faq{ max-width:980px; }
.jsb-faq h2{ margin-bottom:18px; }
.jsb-faq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; }
@media(max-width:700px){ .jsb-faq-grid{ grid-template-columns:1fr; } }
.jsb-faq details{ border:1px solid var(--jsb-line); border-radius:12px; background:#fff; padding:0 18px; margin-bottom:10px; }
.jsb-faq summary{ cursor:pointer; list-style:none; padding:15px 0; font-weight:700; color:var(--jsb-ink); font-size:16px; display:flex; justify-content:space-between; align-items:center; gap:14px; }
.jsb-faq summary::-webkit-details-marker{ display:none; }
.jsb-faq summary::after{ content:"+"; color:var(--jsb-accent); font-size:22px; font-weight:400; line-height:1; }
.jsb-faq details[open] summary::after{ content:"\2013"; }
.jsb-faq details p{ margin:0 0 16px; color:var(--jsb-muted); font-size:15px; max-width:70ch; }

/* 9. Tipografia premium: titulares en serif display (h3/UI quedan en sans) */
.jsb-home h1, .jsb-home h2, .jsb-hero h1{
  font-family:"Fraunces", Georgia, "Times New Roman", serif;
  font-weight:600;
  letter-spacing:-0.01em;
  line-height:1.16;
  font-optical-sizing:auto;
}

/* 10. Hero: mas interlineado para que Fraunces no encime a tamano grande (44px) */
.jsb-hero h1, .jsb-seo-hero h1{ line-height:1.28; }