*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; }
svg { display: block; }
body { line-height: 1.6; }
html { scroll-behavior: smooth; }

:root {
  --blue: #1D4ED8; --blue-light: #EFF6FF; --blue-mid: #DBEAFE;
  --blue-text: #1e3a6e; --blue-muted: #3b5a8f;
  --text: #111; --text-muted: #555; --text-light: #999;
  --border: rgba(0,0,0,0.1); --bg: #fff; --bg-secondary: #F8F8F7;
  --radius: 12px; --radius-sm: 8px;
}

/* ---- NAV ---- */
.nav {
  position: sticky; top: 0; z-index: 100;
  padding: 16px 40px; border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.96); backdrop-filter: blur(10px); gap: 20px;
}
.logo { font-size: 20px; font-weight: 500; letter-spacing: -0.03em; color: var(--text); white-space: nowrap; }
.logo span { color: var(--blue); }
.nav-links { flex-grow: 1; }
.nav-links .wp-block-navigation__container { gap: 28px; flex-wrap: wrap; }
.nav-links a,
.nav-links .wp-block-navigation-item__content { font-size: 13px; color: var(--text-muted) !important; transition: color .15s; padding: 0; }
.nav-links a:hover { color: var(--text) !important; }
.nav-right { gap: 14px; flex-wrap: nowrap; }
.nav-social { display: flex; gap: 12px; align-items: center; }
.nav-social a { color: var(--text-light); transition: color .15s; display: flex; align-items: center; }
.nav-social a:hover { color: var(--blue); }
.nav-cta {
  font-size: 12px; font-weight: 500; padding: 8px 18px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: transparent; cursor: pointer; color: var(--text); transition: background .15s; white-space: nowrap;
  font-family: 'DM Sans', sans-serif;
}
.nav-cta:hover { background: var(--bg-secondary); }

/* ---- HERO ---- */
.hero {
  display: grid !important; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
  padding: 80px 40px 72px; background: var(--blue-light); border-bottom: 1px solid var(--blue-mid);
}
.hero-eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); margin-bottom: 18px; }
.hero-title { font-family: 'DM Serif Display', serif; font-size: 44px; font-weight: 400; line-height: 1.12; color: var(--blue-text); margin-bottom: 20px; }
.hero-body { font-size: 15px; line-height: 1.75; color: var(--blue-muted); margin-bottom: 36px; max-width: 400px; }
.hero-actions { display: flex; gap: 14px; align-items: center; }
.btn-primary {
  font-size: 13px; font-weight: 500; padding: 12px 26px;
  background: var(--blue); color: #fff; border: none;
  border-radius: var(--radius-sm); cursor: pointer; transition: opacity .15s;
  display: inline-flex; align-items: center; gap: 8px; font-family: 'DM Sans', sans-serif;
}
.btn-primary:hover { opacity: .88; }
.btn-ghost {
  font-size: 13px; color: var(--blue-muted); cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; transition: color .15s;
}
.btn-ghost:hover { color: var(--blue); }
.banner-dots { display: flex; gap: 7px; margin-top: 32px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); opacity: .25; cursor: pointer; transition: opacity .15s; }
.dot.active { opacity: 1; }
.hero-visual {
  aspect-ratio: 4/3; background: var(--blue-mid); border-radius: var(--radius);
  border: 1px solid #BFDBFE; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 12px;
}
.hero-visual-label { font-size: 13px; color: #60A5FA; }

/* ---- MINI BANNERS ---- */
.mini-banners { display: grid !important; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid var(--border); }
.mini-card {
  padding: 28px 24px; border-right: 1px solid var(--border);
  cursor: pointer; transition: background .15s; position: relative;
}
.mini-card:last-child { border-right: none; }
.mini-card:hover { background: var(--bg-secondary); }
.mini-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; transform:scaleX(0); transition:transform .2s; }
.mini-card:hover::after { transform:scaleX(1); }
.c1::after { background:#2563EB; } .c2::after { background:#0891B2; } .c3::after { background:#16A34A; } .c4::after { background:#9333EA; }
.icon-wrap { width:44px; height:44px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.c1 .icon-wrap { background:#DBEAFE; } .c2 .icon-wrap { background:#CFFAFE; } .c3 .icon-wrap { background:#DCFCE7; } .c4 .icon-wrap { background:#F3E8FF; }
.mini-card h3 { font-size:14px; font-weight:500; color:var(--text); margin:0 0 6px; font-family: 'DM Sans', sans-serif; }
.mini-card p { font-size:12px; color:var(--text-muted); line-height:1.55; margin:0 0 14px; }
.mini-cta { font-size:12px; font-weight:500; display:flex; align-items:center; gap:5px; }
.c1 .mini-cta { color:#2563EB; } .c2 .mini-cta { color:#0891B2; } .c3 .mini-cta { color:#16A34A; } .c4 .mini-cta { color:#9333EA; }

/* ---- CLIENTES ---- */
.clientes { padding:48px 40px; border-bottom:1px solid var(--border); text-align:center; }
.section-label { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-light); margin-bottom:28px; }
.logos-row { display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap; }
.logo-pill { background:var(--bg-secondary); border:1px solid var(--border); border-radius:var(--radius-sm); padding:9px 22px; font-size:13px; font-weight:500; color:var(--text-light); }

/* ---- PRODUCTOS ---- */
.productos { padding:64px 40px; border-bottom:1px solid var(--border); }
.section-header { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:36px; flex-wrap: wrap; gap: 12px; }
.section-title { font-family:'DM Serif Display',serif; font-size:28px; font-weight:400; color:var(--text); margin: 0; }
.see-all { font-size:13px; color:var(--text-muted); cursor:pointer; display:flex; align-items:center; gap:5px; transition:color .15s; }
.see-all:hover { color:var(--blue); }
.prod-grid { display:grid !important; grid-template-columns:repeat(3,1fr); gap:18px; }
.prod-card { border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; cursor:pointer; transition:border-color .15s,transform .15s; background:var(--bg); }
.prod-card:hover { border-color:rgba(0,0,0,.2); transform:translateY(-2px); }
.prod-img { aspect-ratio:4/3; background:var(--bg-secondary); display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--border); }
.prod-body { padding:16px 18px; }
.prod-rubro { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-light); margin:0 0 6px; }
.prod-name { font-size:14px; font-weight:500; color:var(--text); margin:0 0 8px; line-height:1.35; }
.prod-desc { font-size:12px; color:var(--text-muted); line-height:1.6; margin:0 0 14px; }
.prod-foot { display:flex; align-items:center; justify-content:space-between; }
.prod-tag { font-size:11px; padding:4px 10px; border-radius:100px; background:var(--bg-secondary); border:1px solid var(--border); color:var(--text-muted); margin: 0; }
.prod-tag.disponible { background:#DCFCE7; border-color:#BBF7D0; color:#166534; }
.ai-cta { font-size:12px; color:var(--blue); cursor:pointer; display:flex; align-items:center; gap:5px; font-weight:500; transition:opacity .15s; }
.ai-cta:hover { opacity:.7; }

/* ---- TESTIMONIOS ---- */
.testimonios { padding:64px 40px; border-bottom:1px solid var(--border); background:var(--bg-secondary); }
.test-grid { display:grid !important; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:36px; }
.test-card { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:22px; }
.test-stars { color:#F59E0B; font-size:14px; margin-bottom:12px; letter-spacing:3px; }
.test-text { font-size:13px; color:var(--text-muted); line-height:1.7; margin:0 0 18px; font-style:italic; }
.test-author { display:flex; align-items:center; gap:12px; }
.test-avatar { width:36px; height:36px; border-radius:50%; background:var(--blue-mid); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:500; color:var(--blue); flex-shrink:0; }
.test-name { font-size:13px; font-weight:500; color:var(--text); margin: 0; }
.test-role { font-size:11px; color:var(--text-light); margin: 2px 0 0; }

/* ---- FOOTER ---- */
.footer { padding:56px 40px 32px; display:grid !important; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; background:#0c1a33; }
.footer-brand .logo { font-size:18px; display:block; margin-bottom:14px; color:#fff; }
.footer-brand .logo span { color:#60A5FA; }
.footer-brand p { font-size:13px; color:rgba(255,255,255,.65); line-height:1.7; max-width:220px; margin:0 0 18px; }
.footer-social { display:flex; gap:12px; }
.footer-social a { color:rgba(255,255,255,.55); transition:color .15s; display:flex; align-items:center; }
.footer-social a:hover { color:#fff; }
.footer-col h4 { font-size:12px; font-weight:500; color:#fff; margin:0 0 16px; font-family: 'DM Sans', sans-serif; }
.footer-col p { margin: 0 0 10px; }
.footer-col a { display:block; font-size:13px; color:rgba(255,255,255,.65); transition:color .15s; }
.footer-col a:hover { color:#fff; }
.footer-bottom { padding:20px 40px; border-top:1px solid rgba(255,255,255,.12); display:flex !important; justify-content:space-between; background:#0c1a33; flex-wrap: wrap; gap: 8px; }
.footer-bottom p, .footer-bottom span { font-size:12px; color:rgba(255,255,255,.5); margin: 0; }

/* ---- WHATSAPP ---- */
.wa-wrap { position:fixed; bottom:28px; right:28px; z-index:999; }
.wa-tooltip {
  position:absolute; bottom:62px; right:0; background:var(--bg);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:10px 14px; font-size:12px; color:var(--text-muted); white-space:nowrap;
  box-shadow:0 4px 16px rgba(0,0,0,.08);
  opacity:0; transform:translateY(4px); transition:opacity .2s,transform .2s; pointer-events:none;
}
.wa-wrap:hover .wa-tooltip { opacity:1; transform:translateY(0); }
.wa-btn {
  width:52px; height:52px; background:#25D366; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 4px 16px rgba(37,211,102,.35); transition:transform .15s;
}
.wa-btn:hover { transform:scale(1.08); }

@media(max-width:900px){
  .nav { padding:14px 20px; }
  .nav-links { display:none; }
  .hero { grid-template-columns:1fr !important; padding:48px 20px; }
  .hero-visual { display:none; }
  .mini-banners { grid-template-columns:repeat(2,1fr) !important; }
  .mini-card { border-bottom:1px solid var(--border); }
  .prod-grid { grid-template-columns:repeat(2,1fr) !important; }
  .test-grid { grid-template-columns:1fr !important; }
  .footer { grid-template-columns:1fr 1fr !important; padding:40px 20px 24px; }
  .footer-bottom { padding:16px 20px; }
  .clientes,.productos,.testimonios { padding:40px 20px; }
}

/* ---- PAGE HERO (inner pages) ---- */
.page-hero {
  padding: 56px 40px 64px; background: var(--blue-light); border-bottom: 1px solid var(--blue-mid);
  text-align: center;
}
.breadcrumb { font-size: 12px; color: var(--blue-muted); margin: 0 0 14px; }
.breadcrumb a { color: var(--blue-muted); }
.breadcrumb a:hover { color: var(--blue); }
.page-hero .hero-title { max-width: 720px; margin-left: auto; margin-right: auto; }
.page-hero .hero-body { max-width: 560px; margin: 0 auto 32px; }
.page-hero .hero-actions { justify-content: center; }

/* ---- BENEFITS ---- */
.benefits { padding: 64px 40px; border-bottom: 1px solid var(--border); }
.benefit-grid { display: grid !important; grid-template-columns: repeat(4,1fr); gap: 18px; margin-top: 32px; }
.benefit-card { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.benefit-card h3 { font-size: 14px; font-weight: 500; color: var(--text); margin: 0 0 8px; font-family: 'DM Sans', sans-serif; }
.benefit-card p { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; margin: 0; }

/* ---- CTA BAND ---- */
.cta-band { padding: 56px 40px; background: var(--blue); text-align: center; }
.cta-band h2 { font-family: 'DM Serif Display', serif; font-size: 26px; font-weight: 400; color: #fff; margin: 0 0 12px; }
.cta-band p { font-size: 14px; color: rgba(255,255,255,.85); margin: 0 0 26px; max-width: 480px; margin-left:auto; margin-right:auto; }
.cta-band .btn-primary { background: #fff; color: var(--blue); }
.cta-band .btn-ghost { color: #fff; }

/* ---- TEAM ---- */
.team { padding: 64px 40px; border-bottom: 1px solid var(--border); }
.team-grid { display: grid !important; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 32px; }
.team-card { padding: 26px 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); text-align: center; }
.team-avatar {
  width: 56px; height: 56px; border-radius: 50%; background: var(--blue-mid); color: var(--blue);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 15px; font-weight: 500;
}
.team-card h3 { font-size: 14px; font-weight: 500; color: var(--text); margin: 0 0 4px; font-family: 'DM Sans', sans-serif; }
.team-role { font-size: 12px; color: var(--blue); margin: 0 0 10px; }
.team-card p.team-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; margin: 0; }

/* ---- CONTACT ---- */
.contact-info { padding: 64px 40px; border-bottom: 1px solid var(--border); }
.contact-grid { display: grid !important; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 32px; }
.contact-card { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.contact-card h3 { font-size: 15px; font-weight: 500; color: var(--text); margin: 0 0 4px; font-family: 'DM Sans', sans-serif; }
.contact-tag { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); margin: 0 0 14px; }
.contact-line { display: flex; gap: 8px; font-size: 13px; color: var(--text-muted); margin: 0 0 8px; line-height: 1.5; }
.contact-line strong { color: var(--text); font-weight: 500; min-width: 62px; }
.contact-cta-row { display: flex; gap: 12px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }

@media(max-width:900px){
  .benefit-grid, .team-grid, .contact-grid { grid-template-columns: 1fr !important; }
  .page-hero { padding: 40px 20px 48px; }
  .benefits, .team, .contact-info, .cta-band { padding: 40px 20px; }
}