/* =========================================================
   CPFarma — Hoja base depurada
   (colores, layout general, navbar, footer, software, contacto)
   ========================================================= */

/* -----------------------------
   Variables
------------------------------*/
:root{
  --brand:#1C6E9D;
  --brand-600:#16597e;
  --accent:#00b4d8;
  --accent-600:#0090ad;
  --text:#222;
  --muted:#6b7280;
  --line:#e5e7eb;
  --bg:#ffffff;
  --bg-alt:#f7fbff;
  --card:#ffffff;
  --radius:16px;
  --tint-1:#f6fbff;
  --tint-2:#f9fdf7;
  --tint-3:#fff9f3;
}

/* -----------------------------
   Reset & base tipográfica
------------------------------*/
*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  font-size:16px;
}
img{ max-width:100%; height:auto; display:block }
a{ color:var(--brand); text-decoration:none }
a:hover{ color:var(--brand-600) }
p,li{ font-size:16px }

/* -----------------------------
   Utilidades de layout
------------------------------*/
.container{ max-width:1100px; margin:0 auto; padding:0 20px }
.section{ padding:56px 0 }
.section-alt{ background:linear-gradient(180deg,#f7fbff 0%,#f3f7fb 100%) }

/* Grid 2 columnas genérica */
.grid-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  align-items:flex-start;
}

/* Títulos de sección */
.section-title{
  font-size:32px; margin:0 0 24px; font-weight:800; color:#0f172a; position:relative;
}
.section-title::after{
  content:""; display:block; width:72px; height:4px; border-radius:4px;
  background:linear-gradient(90deg, var(--brand) 0%, var(--accent) 70%, #7dd3fc 100%);
  margin-top:8px;
}

/* -----------------------------
   Header / Navbar
------------------------------*/
.site-header{
  position:sticky; top:0; background:#fff;
  border-bottom:1px solid var(--line); z-index:50;
}
.header-inner{
  height:96px; display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center }
.brand img{ height:72px; width:auto }

/* Nav principal */
.main-nav{ display:flex; align-items:center; gap:18px }
.main-nav > a{ font-weight:600; color:#334155 }
.main-nav > a.active{ color:var(--brand) }

/* Botón nav (Contacto, etc.) */
.btn-nav{
  padding:10px 14px; border:1px solid var(--brand); border-radius:999px;
}
.btn-nav.active,.btn-nav:hover{ background:var(--brand); color:#fff }
.main-nav a.btn-nav.active{ color:#fff !important }

/* Item con submenú: “Software” */
.nav-item{ position:relative; padding-bottom:14px }
.nav-soft > a{ display:inline-flex; align-items:center; gap:4px }
.nav-soft > a::after{ content:"▾"; font-size:.7em; transform:translateY(1px) }

/* Submenú Software */
.nav-soft-menu{
  position:absolute; top:100%; right:0; margin-top:0;
  background:#fff; border-radius:12px; border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(15,23,42,.15);
  padding:8px 0; min-width:190px; display:none; z-index:70;
}
.nav-soft:hover .nav-soft-menu,.nav-soft.open .nav-soft-menu{ display:block }
.nav-soft-menu a{
  display:block; padding:8px 14px; font-size:14px; color:#0f172a; white-space:nowrap;
}
.nav-soft-menu a:hover{ background:#e5f3ff; color:var(--brand) }
.nav-soft.active > a{ color:var(--brand) }

/* Responsive header */
@media (max-width:700px){
  .header-inner{ height:72px }
  .brand img{ height:48px }
}

/* -----------------------------
   Botones reutilizables
------------------------------*/
.btn-primary{
  background:linear-gradient(180deg,var(--brand) 0%, #114d6d 100%);
  color:#fff; padding:12px 18px; border-radius:10px; font-weight:700; display:inline-block;
  box-shadow:0 4px 14px rgba(28,110,157,.22); transition:transform .15s ease;
}
.btn-primary:hover,.btn-primary:focus{
  background:var(--brand-600); color:#fff !important; transform:translateY(-1px)
}
.btn-ghost{
  border:1px solid var(--brand); color:var(--brand);
  padding:12px 18px; border-radius:10px; font-weight:700;
}
.btn-ghost:hover{ background:#eaf6ff; color:var(--brand) !important }

/* -----------------------------
   Hero genérico (home)
------------------------------*/
.hero{
  padding:88px 0;
  color:#ffffff;
  background-color:#04223e;
  background-image:
    radial-gradient(700px 260px at 0% 0%, rgba(0,180,216,0.22), transparent 60%),
    radial-gradient(700px 260px at 100% 0%, rgba(59,130,246,0.18), transparent 55%),
    linear-gradient(135deg,#062b4f 0%, #0b4580 40%, #0f70b7 75%, #1293d8 100%);
}
.hero-inner{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:36px; align-items:center;
}
.hero-copy h1{
  font-size:38px; line-height:1.15; margin:0 0 12px; color:#fff;
}
.hero-copy p{ color:#e5f3ff; margin:0 0 18px }
.hero-figure{
  border-radius:20px; overflow:hidden; border:1px solid rgba(148,163,184,0.6);
  background:#fff; height:240px;
}
.hero-figure img{ width:100%; height:100%; object-fit:contain }

/* Botones sobre hero oscuro */
.hero .btn-primary{ box-shadow:0 10px 25px rgba(15,118,190,0.55) }
.hero .btn-ghost{ border-color:#fff; color:#fff !important }
.hero .btn-ghost:hover{ background:#fff; color:#0b4580 !important }

@media (max-width:960px){
  .hero-inner{ grid-template-columns:1fr }
  .hero{ padding:64px 0 }
}

/* -----------------------------
   Bloques de programas (home)
------------------------------*/
.program{
  display:grid; grid-template-columns:320px 1fr; gap:20px;
  padding:18px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; margin:0 0 16px;
}
.program-body h3{ margin:0 0 8px; font-size:22px }
.program-body p{ margin:0 0 10px; color:#475569 }
.program-points{ margin:0 0 12px 22px }
.program-thumb{
  height:220px; border-radius:12px; overflow:hidden; background:#fff; display:flex; align-items:center; justify-content:center;
}
.program-thumb img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain }
@media (max-width:900px){
  .program{ grid-template-columns:1fr }
  .program-thumb{ height:220px }
}

/* -----------------------------
   Grilla de imágenes (intro software)
------------------------------*/
.img-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:16px 0;
}
.img-grid figure{
  margin:0; border:none; border-radius:0; overflow:visible; background:transparent;
  height:clamp(180px, 28vw, 260px);
  display:flex; align-items:center; justify-content:center;
}
.img-grid img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; background:transparent }
.img-grid figcaption{ display:none }

/* -----------------------------
   Partners / badges
------------------------------*/
.badges{ display:grid; grid-template-columns:1fr; gap:24px; align-items:center }
.badge{
  border:none; padding:0; background:transparent; box-shadow:none;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.badge p{ margin:0 0 10px; font-weight:700 }
.logo-box{ height:120px; background:transparent; border:0; border-radius:0; display:flex; align-items:center; justify-content:center; padding:0; overflow:visible }
.logo-box img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; background:transparent }
.logo-name{ display:block; text-align:center; font-weight:700; color:#0f172a; font-size:14px }
.partners-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:center; justify-items:center }
.partner{ display:flex; flex-direction:column; gap:8px; align-items:center }
@media (max-width:800px){ .partners-row{ grid-template-columns:1fr 1fr } }
@media (max-width:520px){ .partners-row{ grid-template-columns:1fr } }

/* -----------------------------
   Equipo / asesores
------------------------------*/
.subtitle{ margin:8px 0 12px; font-size:22px; font-weight:800; color:#0f172a }
.team-row,.advisor-row{
  display:grid !important; grid-template-columns:repeat(5,1fr) !important;
  gap:18px !important; align-items:stretch !important;
}
.person,.advisor{
  border:1px solid var(--line); border-radius:16px; padding:18px; background:#fff; text-align:center;
  transition:.15s ease; box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.person:hover,.advisor:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.08) }
.person img,.advisor img{
  width:110px; height:110px; border-radius:50%; object-fit:cover; object-position:center; margin:0 auto 8px;
}
.person .role{ color:var(--brand); font-weight:700 }
.person .small{ color:#556 }
.advisor .role{ color:var(--accent); font-weight:800 }
.advisor .small{ color:#4b5563; font-size:14px }
@media (max-width:1200px){ .team-row,.advisor-row{ grid-template-columns:repeat(3,1fr) !important } }
@media (max-width:700px){ .team-row,.advisor-row{ grid-template-columns:repeat(2,1fr) !important } }
@media (max-width:460px){ .team-row,.advisor-row{ grid-template-columns:1fr !important } }

/* -----------------------------
   eSolidaria: hero imagen + galería
------------------------------*/
.img-hero-esolidaria{
  border:none; border-radius:0; overflow:visible; background:transparent;
  display:flex; align-items:center; justify-content:center; height:200px;
}
.img-hero-esolidaria img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; background:transparent }
.gallery{
  position:relative; overflow:hidden; border:none; border-radius:0; background:transparent;
  margin-top:16px; height:200px;
}
.gallery .gtrack{ display:flex; height:100%; will-change:transform }
.gallery img{ flex:0 0 100%; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; background:transparent }

/* -----------------------------
   Formularios (contacto, etc.)
------------------------------*/
.form{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px;
  max-width:520px;
  width:100%;
}
.form .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
.form .field input,.form .field textarea{ width:100%; max-width:100% }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px }
.field input,.field textarea{ border:1px solid var(--line); border-radius:10px; padding:10px 12px; font:inherit }
.form textarea{ resize:none; min-height:120px; max-height:140px }
.field input:focus,.field textarea:focus{ outline:2px solid #bfe0f3; border-color:#bfe0f3 }
.check{ display:flex; gap:8px; align-items:flex-start; margin:8px 0 12px }
.check a{ text-decoration:underline }
.alert{ padding:10px 12px; border-radius:10px; margin-bottom:14px }
.alert.ok{ background:#e6f9ed; border:1px solid #c7f0d2; color:#105f30 }
.alert.error{ background:#fff3f2; border:1px solid #ffd2ce; color:#7a1f18 }

/* -----------------------------
   CTA a todo ancho
------------------------------*/
.cta-contact--full{
  position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; width:100vw;
  padding:22px 0; color:#fff;
  background:
    radial-gradient(800px 300px at -10% 10%, rgba(0,180,216,.25), transparent 60%),
    radial-gradient(700px 300px at 110% 0%, rgba(28,110,157,.28), transparent 55%),
    linear-gradient(135deg, var(--brand) 0%, var(--accent-600) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}
.cta-wrap{ max-width:1100px; margin:0 auto; padding:0 20px; display:flex; align-items:center; justify-content:space-between; gap:16px }
.cta-copy h3{ margin:0 0 4px; font-size:28px }
.cta-copy p{ margin:0; opacity:.95 }
.btn-cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 26px; border-radius:999px; border:0; background:#fff; color:var(--brand);
  font-weight:700; font-size:16px; text-decoration:none; box-shadow:0 8px 24px rgba(0,0,0,.25); letter-spacing:.3px;
}
.btn-cta--lg{ padding:12px 30px; font-size:17px }
.btn-cta:hover{ background:#0b2033; color:#fff }
@media (max-width:800px){
  .cta-wrap{ flex-direction:column; text-align:center }
  .btn-cta{ width:100% }
}

/* -----------------------------
   Footer
------------------------------*/
.site-footer{ border-top:1px solid var(--line); background:#fff; padding:14px 0 }
.footer-inner{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:24px }
.brandline{ font-weight:800 }
.site-footer--brand{
  background:linear-gradient(135deg,#0b2f45 0%,#0a1f30 100%);
  color:#fff; border-top:none;
}
.site-footer--brand a{ color:#fff; opacity:.95 }
.site-footer--brand a:hover{ opacity:1; text-decoration:underline }
.site-footer--brand .muted{ color:#e9eef5 }

/* -----------------------------
   RESPONSIVO general
------------------------------*/
@media (max-width:960px){
  .badges{ grid-template-columns:1fr }
  .grid-2{ grid-template-columns:1fr; gap:18px }
  .footer-inner{ grid-template-columns:1fr }
  .img-grid{ grid-template-columns:1fr }
}

/* =========================================================
   SOFTWARE (intro, cards, dos columnas, FAQ, secciones)
   ========================================================= */

/* Tabs (si se usan) */
.soft-tabs{
  display:flex; gap:10px; padding:18px 0 6px; justify-content:center;
}
.soft-tabs a{
  border:1px solid var(--line); padding:8px 14px; border-radius:999px;
  font-weight:700; color:#334155; background:#fff;
}
.soft-tabs a.on{ background:var(--brand); border-color:var(--brand); color:#fff }

/* Intro centrada en azul */
.soft-intro{
  padding:72px 0 62px; color:#fff;
  background:
    radial-gradient(900px 380px at 10% 0%, rgba(0,180,216,.35), transparent 60%),
    radial-gradient(900px 420px at 90% -10%, rgba(15,112,183,.45), transparent 55%),
    linear-gradient(180deg,#0b4580 0%,#0f70b7 36%,#1b82cf 54%,#e2f3ff 84%,#f7fbff 100%);
}
.soft-intro__in{ max-width:860px; margin:0 auto; text-align:center; padding:0 20px }
.soft-intro__in h1{ font-size:36px; margin:0 0 8px }
.soft-intro__in p{ max-width:620px; margin:0 auto 18px; font-size:16px }
.soft-intro__media{
  margin:0 auto; max-width:420px; height:190px; border-radius:18px; overflow:hidden; background:#fff;
  box-shadow:0 14px 32px rgba(15,23,42,0.35);
}
.soft-intro__media img{ width:100%; height:100%; object-fit:contain }
@media (max-width:900px){
  .soft-intro{ padding:32px 0 28px }
  .soft-intro__media{ height:170px }
}

/* Cards en 3 columnas */
.soft-grid-3{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px;
}
.soft-card{
  background:#fff; border-radius:16px; padding:18px 16px;
  border:1px solid var(--line); box-shadow:0 12px 30px rgba(15,23,42,0.06);
}
.soft-card h3{ margin:0 0 6px; font-size:18px }
.soft-card p{ margin:0; font-size:14px; color:#475569 }
.soft-card ul{ margin:8px 0 0 18px; padding:0; font-size:14px }

/* Dos columnas texto/imagen */
.soft-two{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);
  gap:22px; align-items:center;
}
.soft-two__copy h2{ margin:0 0 8px; font-size:24px; color:var(--brand) }
.soft-two__copy p{ margin:0 0 8px; color:#475569 }
.soft-two__copy ul,.soft-two__copy ol{ margin:8px 0 0 18px; padding:0; font-size:14px; color:#4b5563 }
.soft-two__media{
  height:190px; max-width:320px; margin-left:auto; border-radius:16px; border:1px solid var(--line);
  background:#fff; overflow:hidden; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(15,23,42,0.08);
}
.soft-two__media img{ width:100%; height:100%; object-fit:contain }

@media (max-width:900px){
  .soft-two{ grid-template-columns:1fr; justify-items:center; text-align:left }
  .soft-two__media{ margin:0; width:100%; max-width:360px }
}

/* Pasos */
.soft-steps ol{ counter-reset:step }
.soft-steps ol li{ margin-bottom:6px }

/* FAQ */
.soft-faq{ padding:52px 0 60px; background:#f8fafc }
.soft-faq h2{ text-align:center; margin:0 0 18px }
.faq-grid{ max-width:900px; margin:0 auto; display:grid; gap:12px }
.faq-item{
  background:#fff; border-radius:14px; border:1px solid var(--line);
  padding:10px 16px; box-shadow:0 6px 18px rgba(15,23,42,0.05);
}
.faq-item summary{
  cursor:pointer; font-weight:600; list-style:none; display:flex; align-items:center; justify-content:space-between;
}
.faq-item summary::-webkit-details-marker{ display:none }
.faq-item summary::before{ content:"❓"; margin-right:8px; font-size:16px }
.faq-item summary::after{ content:"+"; font-weight:700; color:var(--brand) }
.faq-item[open] summary::after{ content:"–" }
.faq-item p{
  margin:8px 0 4px 24px; font-size:14px; color:#4b5563;
  border-left:3px solid rgba(59,130,246,0.35); padding-left:10px;
}

/* Responsive software */
@media (max-width:900px){
  .soft-grid-3{ grid-template-columns:1fr 1fr }
}
@media (max-width:620px){
  .soft-grid-3{ grid-template-columns:1fr }
}

/* Secciones largas + split */
.soft-section{ padding:40px 0; position:relative }
.soft-section:nth-of-type(even){ background:linear-gradient(180deg,#ffffff 0%,#f0f7ff 100%) }
.soft-section.alt{ background:linear-gradient(180deg,#f8fbfe 0%,#ffffff 100%) }

.soft-split{
  display:grid; grid-template-columns:1.05fr .95fr; gap:24px; align-items:center;
}
.soft-copy h2{ margin:0 0 8px; font-size:28px }
.soft-copy p{ margin:0; color:#475569 }
.soft-figure{
  height:240px; background:#fff; border:1px solid var(--line);
  border-radius:14px; overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.soft-figure img{ width:100%; height:100%; object-fit:contain }
@media (max-width:900px){
  .soft-split{ grid-template-columns:1fr }
  .soft-figure{ height:220px }
}

/* Subtabs de módulos */
.soft-subtabs{
  display:flex; gap:8px; margin:18px 0 2px;
}
.soft-subtabs a{
  padding:8px 12px; border-radius:999px; border:1px solid var(--line);
  background:#fff; color:#334155; font-weight:700;
}
.soft-subtabs a.on{ background:var(--brand); border-color:var(--brand); color:#fff }

/* =========================================================
   PÁGINA DE CONTACTO (layout + tarjeta azul)
   ========================================================= */

.page-contacto .section:first-of-type{
  padding:48px 0 40px;
  background:
    radial-gradient(650px 260px at 0% 0%, rgba(0,180,216,0.10), transparent 60%),
    radial-gradient(700px 260px at 100% 0%, rgba(28,110,157,0.08), transparent 55%),
    #ffffff;
}
.page-contacto .section-title{ margin-bottom:20px }

/* Rejilla de contacto (principal) */
.page-contacto .grid-2{
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:32px; align-items:flex-start;
}

/* Dentro del formulario País/Ciudad */
.page-contacto form .grid-2{ grid-template-columns:1fr 1fr }
@media (max-width:600px){
  .page-contacto form .grid-2{ grid-template-columns:1fr }
}

/* Columna derecha azul */
.contact-side{
  display:flex; flex-direction:column; gap:10px;
  background:linear-gradient(135deg,#0b4580 0%,#0f70b7 100%);
  border-radius:20px; padding:18px 20px;
  border:1px solid rgba(148,163,184,0.4);
  box-shadow:0 14px 30px rgba(15,23,42,0.35);
  color:#e5f3ff;
}
.contact-brand{
  display:flex; align-items:center; gap:16px;
  padding:12px 14px; border-radius:16px;
  border:1px solid rgba(148,163,184,0.45);
  background:rgba(15,23,42,0.22);
}
.contact-brand p{ margin:0; font-size:14px; color:#e5f3ff }
.contact-logo{ width:80px; max-width:80px; height:auto; display:block; flex-shrink:0 }
.contact-side h3,.contact-side h4,.contact-side h5{ color:#fff; margin-top:6px }
.contact-side p,.contact-side li,.contact-side .office p{ color:#e5f3ff }
.contact-side a{ color:#fff; text-decoration:underline }
.contact-side a:hover{ color:#c7e9ff }
.offices{ display:flex; flex-direction:column; gap:5px }
.office h5{ margin:0 0 4px }
.office p{ margin:0; font-size:14px }

/* Chips de módulos (home/contacto si aplica) */
.subcards--links{
  display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 4px;
}
.subcards--links a{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 14px; border-radius:999px;
  background:#e0f2ff; border:1px solid #bfdbfe; color:#0b4580;
  font-size:14px; font-weight:600; white-space:nowrap; transition:all .22s ease;
}
.subcards--links a:hover{ background:#0b4580; border-color:#0b4580; color:#fff !important; box-shadow:0 4px 12px rgba(15,118,190,0.35) }

/* =========================================================
   QUIÉNES SOMOS / eSolidaria – Recuadros azules
   ========================================================= */
.grid-3.features{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px; margin-top:24px;
}
.grid-3.features > div{
  background:linear-gradient(135deg,#0b4580 0%,#0f70b7 100%);
  color:#e5f3ff; border-radius:18px; padding:18px 22px;
  box-shadow:0 10px 28px rgba(15,23,42,0.35);
}
.grid-3.features h3{ margin-top:0; margin-bottom:8px; color:#fff }

.soft-block{
  background:linear-gradient(135deg,#0b4580 0%,#0f70b7 100%);
  border-radius:22px; padding:24px 28px; color:#e5f3ff;
  box-shadow:0 14px 32px rgba(15,23,42,0.35); margin-bottom:32px;
}
.soft-block h3{ color:#fff }
.soft-block p{ margin-bottom:10px }
.soft-block .img-hero-esolidaria{ height:240px }

/* =========================================================
   Ajustes finos & pequeños helpers
   ========================================================= */
/* Obligar contain sin recorte */
.fit-contain{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain !important; background:transparent }

/* =========================
   Breakpoints extra
   ========================= */
@media (max-width:900px){
  .feature-row,.feature-row.reverse{ grid-template-columns:1fr }
}

/* =========================================================
   FIXES – PEGAR AL FINAL (anula reglas previas)
   ========================================================= */

/* --- NAVBAR: logo pegado a la izquierda e items a la derecha --- */
.site-header { width:100%; }
.header-inner{
  height:90px;
  padding:0 16px;                 /* menos acolchado lateral */
  display:flex; align-items:center; justify-content:space-between;
}
.brand img{ height:78px; width:auto; display:block }

/* Enlaces del menú, bien a la derecha */
.main-nav{ display:flex; align-items:center; gap:28px; margin-left:auto; }

/* --- DROPDOWN “Software”: que NO desaparezca al bajar el ratón --- */
.nav-item{ padding-bottom:0 }     /* quita el hueco bajo el link que cortaba el hover */
.nav-soft > a{ display:inline-flex; align-items:center; gap:4px }
.nav-soft > a::after{ content:"▾"; font-size:.7em; transform:translateY(1px) }

/* Caja del submenú pegada al enlace, sin separación */
.nav-soft-menu{
  position:absolute; top:100%; right:0; margin-top:0;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 10px 30px rgba(15,23,42,.15);
  padding:8px 0; min-width:200px; display:none; z-index:70;
}
/* Mostrar tanto al pasar por el item como sobre el propio menú */
.nav-soft:hover .nav-soft-menu,
.nav-soft.open .nav-soft-menu,
.nav-soft-menu:hover{ display:block }

/* --- QUIÉNES SOMOS + eSolidaria: recuadros azules forzados --- */
.grid-3.features > div{
  background:linear-gradient(135deg,#0b4580 0%,#0f70b7 100%) !important;
  color:#e5f3ff !important;
  border-radius:18px; padding:18px 22px;
  box-shadow:0 10px 28px rgba(15,23,42,0.35);
}
.grid-3.features h3{ color:#fff !important; margin-top:0; margin-bottom:8px }

.soft-block{
  background:linear-gradient(135deg,#0b4580 0%,#0f70b7 100%) !important;
  color:#e5f3ff !important;
  border-radius:22px; padding:24px 28px;
  box-shadow:0 14px 32px rgba(15,23,42,0.35);
}

/* --- CONTACTO: reducir tamaño (imagen y textos muy grandes) --- */
.page-contacto .grid-2{
  grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);
  gap:28px; align-items:flex-start;
}
.contact-side{ padding:16px 18px; gap:12px }
.contact-brand{ padding:10px 12px }
.contact-logo{ width:70px; max-width:70px }       /* logo más pequeño */
.contact-side p, .contact-side li { font-size:14px }
.contact-side h3, .contact-side h4, .contact-side h5 { margin:6px 0 4px }

/* --- SOFTWARE: compactar, letras un poco mayores y héroe AZUL sólido --- */
/* Hero de software sin degradado, mismo azul que inicio */
.soft-intro{
  background:#0b4580 !important;  /* bloque azul sólido */
  color:#fff;
  padding:48px 0 38px;            /* menos alto */
}
.soft-intro__in h1{ font-size:40px; margin:0 0 8px }
.soft-intro__in p{ font-size:17px; margin:0 auto 14px; max-width:640px }
.soft-intro__media{
  max-width:520px; height:240px; margin:0 auto;
  border-radius:20px; overflow:hidden; background:#fff;
  box-shadow:0 14px 32px rgba(15,23,42,0.35);
}

/* Espaciado general de secciones software más compacto */
.soft-section{ padding:28px 0 }
.soft-grid-3{ gap:14px; margin-top:14px }
.soft-card{ padding:14px 14px }
.soft-card h3{ font-size:20px }
.soft-card p, .soft-card ul{ font-size:15px }

/* Bloques texto/imagen más juntos y con imagen algo mayor */
.soft-two{ gap:20px }
.soft-two__media{ height:220px; max-width:360px }

/* FAQ con menos blanco */
.soft-faq{ padding:32px 0 34px }
.faq-grid{ gap:10px }
.faq-item{ padding:8px 14px }
.faq-item p{ font-size:15px }

/* Secciones alternas suaves, sin “degradado fuerte” */
.soft-section:nth-of-type(even){
  background:linear-gradient(180deg,#ffffff 0%,#f0f7ff 100%) !important;
}

/* =========================================================
   SOFTWARE – compactar, gradientes suaves y ajustes visuales
   (solo afecta a ?p=software)
   ========================================================= */

/* 1) Héroe: imagen principal más grande pero con menos “aire” alrededor */
body.page-software .soft-intro{
  padding: 36px 0 16px !important;   /* menos espacio inferior */
}
body.page-software .soft-intro__media{
  max-width: 600px !important;       /* antes 520px */
  height: 320px !important;          /* antes 240px */
}
@media (max-width: 900px){
  body.page-software .soft-intro__media{
    max-width: 560px !important;
    height: 300px !important;
  }
}

/* 2) Quitar icono 💙 de los títulos de tarjeta */
.soft-card h3::before{ content: none !important; }

/* 3) Menos scroll: reducir padding vertical y huecos internos */
body.page-software .soft-section{ padding: 22px 0 !important; }
body.page-software .soft-grid-3{ gap: 12px !important; margin-top: 10px !important; }
body.page-software .soft-card{ padding: 12px 12px !important; }
body.page-software .soft-card h3{ font-size: 20px !important; }
body.page-software .soft-card p,
body.page-software .soft-card ul{ font-size: 15px !important; }

body.page-software .soft-two{ gap: 16px !important; }
body.page-software .soft-two__media{
  height: 230px !important;
  max-width: 360px !important;
}

/* 4) Alternar fondos con degradados suaves gris/blanco sin “cortes”
      Odd: blanco -> gris claro (descendente)
      Even: gris claro -> blanco (ascendente)
*/
body.page-software .soft-section{
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%) !important;
}
body.page-software .soft-section:nth-of-type(even){
  background: linear-gradient(180deg, #f4f7fb 0%, #ffffff 100%) !important;
}

/* 5) FAQ también más compacto y siguiendo la linea */
body.page-software .soft-faq{
  padding: 26px 0 28px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%) !important;
}
body.page-software .faq-grid{ gap: 8px !important; }
body.page-software .faq-item{ padding: 8px 12px !important; }
body.page-software .faq-item p{ font-size: 15px !important; }

/* ==== FIX 1: quitar corazones en todas las tarjetas ==== */
body.page-software .soft-card h3::before,
.soft-card h3::before{
  content: none !important;
  display: none !important;
}

/* ==== FIX 2: compactar bloques en páginas de software ==== */
body.page-software .soft-intro{
  padding: 30px 0 8px !important;  /* menos espacio bajo el héroe */
}
body.page-software .soft-section{
  padding: 14px 0 !important;      /* menos alto cada sección */
  background: linear-gradient(180deg,#fff 0%,#f4f7fb 100%) !important;
}
body.page-software .soft-section:nth-of-type(even){
  background: linear-gradient(180deg,#f4f7fb 0%,#fff 100%) !important;
}

/* tarjetas y grids más pegados */
body.page-software .soft-grid-3{
  gap: 10px !important;
  margin-top: 6px !important;
}
body.page-software .soft-card{
  padding: 10px 12px !important;
}

/* bloques texto/imagen más compactos */
body.page-software .soft-two{ gap: 14px !important; }
body.page-software .soft-two__media{
  height: 220px !important;
  max-width: 340px !important;
}

/* FAQ más compacto */
body.page-software .soft-faq{ padding: 20px 0 22px !important; }
body.page-software .faq-grid{ gap: 8px !important; }
body.page-software .faq-item{ padding: 8px 10px !important; }

/* ==== NAV: ancho completo + logo izq / items dcha ==== */
.site-header { position: sticky; top: 0; z-index: 100; background: #fff; }
.site-header .container{ max-width: 100% !important; padding: 0 14px !important; } /* sin “márgenes” laterales */
.header-inner{
  height: 82px !important;
  padding: 0 8px !important;
  display: flex; align-items: center; justify-content: space-between;
}
.brand img{ height: 64px !important; width: auto; display:block }

.main-nav{ margin-left: auto !important; display: flex; gap: 28px; align-items: center; }
.main-nav > a{
  display:inline-block; padding: 10px 6px; font-weight: 600; color:#334155;
}
.main-nav > a.active{ color: var(--brand); }

/* Dropdown “Software” pegado al enlace y sin huecos que corten el hover */
.nav-item{ position:relative; padding-bottom: 0 !important; }
.nav-soft > a{ display:inline-flex; align-items:center; gap:4px }
.nav-soft > a::after{ content:"▾"; font-size:.7em; transform:translateY(1px) }
.nav-soft-menu{
  position:absolute; top:100%; right:0; margin-top:0;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 10px 30px rgba(15,23,42,.15);
  padding:8px 0; min-width:200px; display:none; z-index:70;
}
.nav-soft:hover .nav-soft-menu,
.nav-soft.open .nav-soft-menu,
.nav-soft-menu:hover{ display:block }

/* ==== CARRUSEL DE INSTALACIONES – layout fijo horizontal ==== */
.hslider{
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 8px 0;
  background: transparent;
}

#htrack, .htrack{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;          /* ← no permitir salto de línea */
  gap: 14px !important;                   /* debe coincidir con GAP del JS */
  will-change: transform;
}

.hcard{
  flex: 0 0 clamp(220px, 28vw, 320px) !important;  /* ancho consistente */
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(15,23,42,.06);
  overflow: hidden;
}

.hthumb{
  width: 100%;
  aspect-ratio: 4 / 3;                    /* alto consistente de la miniatura */
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.hthumb img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;                       /* o 'contain' si prefieres sin corte */
  display: block;
}

.hcard h4{
  margin: 8px 10px 2px;
  font-size: 14px; line-height: 1.2;
}

.hcard .city{
  margin: 0 10px 10px; color: #64748b; font-size: 13px;
}

/* Responsivo: tarjetas un poco más anchas en móvil para que se vea 1–1.5 */
@media (max-width: 700px){
  .hcard{ flex-basis: 72% !important; }
}

/* ==== Distribuidor oficial / Colaboradores (logos) ==== */

/* contenedor completo más compacto */
.badges{ gap:16px !important; }
.badge{ padding:0 !important; }

/* caja donde va cada logo */
.logo-box{
  height:90px !important;           /* antes 120px */
  padding:0 !important;
}

/* título bajo cada logo */
.logo-name{ font-size:13px !important; }

/* -- RADWAG (logo principal) más pequeño -- */
/* opción 1: por alt del <img> (rápido, sin tocar HTML) */
.logo-box img[alt*="RADWAG" i]{
  max-height:70px !important;       /* ajusta a tu gusto */
  width:auto !important;
}

/* --- Software: más margen bajo la imagen del héroe azul --- */
body.page-software .soft-intro__media{ margin-bottom:16px !important; }

/* si lo quieres aún más suelto, sube el padding inferior del bloque azul */
body.page-software .soft-intro{ padding-bottom:24px !important; }  /* antes 8–16px */

/* --- Módulos: barra de subpestañas con el mismo fondo del bloque siguiente --- */
body.page-software .soft-subtabs{
  background: linear-gradient(180deg,#ffffff 0%,#f4f7fb 100%) !important;
  padding:10px 12px !important;
  border-radius:12px;
  border:1px solid var(--line);
  margin-top:8px;
  margin-bottom:8px; /* que “pegue” visualmente con el siguiente bloque */
}
/* --- Contacto: columnas con la misma altura --- */
.page-contacto .grid-2,
.contact-layout{ align-items:stretch !important; }

.contact-side{ height:100%; display:flex; flex-direction:column; }

/* --- SOFTWARE: héroe azul en 2 columnas (texto izq / imagen dcha) --- */
body.page-software .soft-intro__in{
  max-width:1000px;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:24px;
  align-items:center;
  text-align:left;         /* ya no centrado */
}
body.page-software .soft-intro__media{ margin:0; } /* quita el centrado inferior */

@media (max-width:900px){
  body.page-software .soft-intro__in{ grid-template-columns:1fr; }
  body.page-software .soft-intro__media{ margin-top:8px; }
}

/* --- Subpestañas módulos: estilo “píldoras” sin caja gris --- */
body.page-software .soft-subtabs{
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  justify-content:center;
}
body.page-software .soft-subtabs a{
  border:1px solid var(--brand);
  background:transparent;
  color:var(--brand);
  font-weight:700;
  padding:8px 14px;
  border-radius:999px;
  transition:all .18s ease;
  box-shadow:0 0 0 rgba(0,0,0,0);
}
body.page-software .soft-subtabs a:hover,
body.page-software .soft-subtabs a.on{
  background:linear-gradient(180deg,var(--brand) 0%, #114d6d 100%);
  color:#fff;
  border-color:transparent;
  box-shadow:0 6px 16px rgba(28,110,157,.25);
}

/* ===== SOFTWARE: Hero tipo inicio (texto izq + imagen dcha) ===== */
.soft-hero{
  max-width:1100px; margin:0 auto; padding:0 20px;
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:36px; align-items:center;
}
.soft-hero__copy h1{ margin:0 0 10px; font-size:40px; color:#fff; font-weight:800 }
.soft-hero__copy p{ margin:0; color:#e5f3ff; font-size:17px; line-height:1.6 }
.soft-hero__media{
  border-radius:20px; overflow:hidden; border:1px solid rgba(148,163,184,0.55);
  background:#fff; height:260px; box-shadow:0 14px 32px rgba(15,23,42,0.35);
  display:flex; align-items:center; justify-content:center;
}
.soft-hero__media img{ width:100%; height:100%; object-fit:contain }

/* Responsivo */
@media (max-width:900px){
  .soft-hero{ grid-template-columns:1fr; gap:18px }
  .soft-hero__media{ height:220px }
}