/* Hispanaweb — estilos de secciones de páginas de servicio */
.hw-acc-ia { --acc: #7C5CFC; --acc-soft: rgba(124,92,252,.14); }
.hw-acc-marketing { --acc: #FF6B4A; --acc-soft: rgba(255,107,74,.14); }
.hw-acc-desarrollo { --acc: #38B3E7; --acc-soft: rgba(56,179,231,.14); }
.hw-acc-automatizacion { --acc: #38B3E7; --acc-soft: rgba(56,179,231,.14); }
.hw-acc-growth { --acc: #38B3E7; --acc-soft: rgba(56,179,231,.14); }

.hw-wrap { max-width: 1220px; margin: 0 auto; padding: 0 24px; }

/* ===== Hero ===== */
.hw-hero {
  position: relative; background: radial-gradient(1100px 640px at 78% 18%, var(--acc-soft), transparent 60%),
    radial-gradient(800px 500px at 12% 85%, rgba(56,179,231,.10), transparent 55%), #0B2450;
  color: #fff; overflow: hidden; padding: 96px 0 72px;
}
.hw-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><circle cx="1" cy="1" r="1" fill="rgba(255,255,255,0.05)"/></svg>');
}
.hw-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hw-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 12px/1 Sora, sans-serif; letter-spacing: .16em; text-transform: uppercase;
  color: #fff; background: var(--acc-soft); border: 1px solid color-mix(in srgb, var(--acc) 50%, transparent);
  padding: 9px 16px; border-radius: 999px; margin-bottom: 22px;
}
.hw-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 12px var(--acc); }
.hw-h1 { font: 800 clamp(34px, 4.6vw, 58px)/1.08 Sora, sans-serif; margin: 0 0 20px; letter-spacing: -.02em; }
.hw-h1 em { font-style: normal; color: var(--acc); }
.hw-sub { font: 500 clamp(16px, 1.6vw, 19px)/1.6 Manrope, sans-serif; color: #B9C6E0; margin: 0 0 32px; max-width: 560px; }
.hw-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 42px; }
.hw-btn {
  font: 700 16px/1 Manrope, sans-serif; color: #fff; text-decoration: none;
  background: linear-gradient(135deg, var(--acc), color-mix(in srgb, var(--acc) 55%, #38B3E7));
  padding: 16px 30px; border-radius: 999px; box-shadow: 0 10px 30px color-mix(in srgb, var(--acc) 40%, transparent);
  transition: transform .2s, box-shadow .2s; display: inline-block;
}
.hw-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 40px color-mix(in srgb, var(--acc) 55%, transparent); color: #fff; }
.hw-btn-ghost {
  font: 700 16px/1 Manrope, sans-serif; color: #fff; text-decoration: none;
  border: 1.5px solid rgba(255,255,255,.35); padding: 15px 28px; border-radius: 999px;
  transition: background .2s, border-color .2s; display: inline-block;
}
.hw-btn-ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }
.hw-hero-stats { display: flex; gap: 40px; flex-wrap: wrap; }
.hw-hero-stat .hw-count, .hw-hero-stat .hw-stat-num { font: 800 34px/1.1 Sora, sans-serif; color: #fff; display: block; }
.hw-hero-stat span.hw-stat-label { font: 600 13px/1.4 Manrope, sans-serif; color: #8FA2C7; display: block; margin-top: 4px; max-width: 150px; }
.hw-hero-media { position: relative; }
.hw-hero-media img {
  width: 100%; height: auto; border-radius: 24px; display: block;
  box-shadow: 0 40px 90px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
}
.hw-hero-media::before {
  content: ""; position: absolute; inset: -30px; z-index: -1; border-radius: 40px;
  background: radial-gradient(closest-side, var(--acc-soft), transparent);
  filter: blur(30px);
}

/* ===== Secciones ===== */
.hw-section { padding: 96px 0; }
.hw-section-alt { background: #F8FAFC; }
.hw-section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.hw-eyebrow {
  font: 700 12px/1 Sora, sans-serif; letter-spacing: .16em; text-transform: uppercase;
  color: var(--acc); display: block; margin-bottom: 14px;
}
.hw-h2 { font: 800 clamp(28px, 3.4vw, 42px)/1.15 Sora, sans-serif; color: #0B2450; margin: 0 0 16px; letter-spacing: -.015em; }
.hw-lead { font: 500 17px/1.65 Manrope, sans-serif; color: #5A6478; margin: 0; }

/* Features */
.hw-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hw-card {
  background: #fff; border: 1px solid #E7EBF2; border-radius: 22px; padding: 34px 30px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
}
.hw-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(11,36,80,.10); border-color: color-mix(in srgb, var(--acc) 35%, #E7EBF2); }
.hw-card-icon {
  width: 58px; height: 58px; border-radius: 16px; background: var(--acc-soft);
  display: flex; align-items: center; justify-content: center; font-size: 27px; margin-bottom: 20px;
}
.hw-card h3 { font: 700 19px/1.3 Sora, sans-serif; color: #0B2450; margin: 0 0 10px; }
.hw-card p { font: 500 15px/1.6 Manrope, sans-serif; color: #5A6478; margin: 0; }

/* Proceso */
.hw-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
.hw-step { position: relative; padding: 30px 26px; background: #fff; border: 1px solid #E7EBF2; border-radius: 22px; }
.hw-step-num {
  font: 800 15px/1 Sora, sans-serif; color: #fff; background: linear-gradient(135deg, var(--acc), color-mix(in srgb, var(--acc) 55%, #38B3E7));
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px; box-shadow: 0 8px 20px color-mix(in srgb, var(--acc) 40%, transparent);
}
.hw-step h3 { font: 700 17px/1.3 Sora, sans-serif; color: #0B2450; margin: 0 0 8px; }
.hw-step p { font: 500 14px/1.55 Manrope, sans-serif; color: #5A6478; margin: 0; }

/* Banda stats */
.hw-band { background: #0B2450; padding: 72px 0; }
.hw-band-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; text-align: center; }
.hw-band .hw-count, .hw-band .hw-stat-num { font: 800 clamp(38px, 4.5vw, 56px)/1.05 Sora, sans-serif; color: #fff; display: block; }
.hw-band .hw-stat-label { font: 600 15px/1.45 Manrope, sans-serif; color: #8FA2C7; display: block; margin-top: 10px; }

/* FAQ */
.hw-faq { max-width: 780px; margin: 0 auto; }
.hw-faq details {
  background: #fff; border: 1px solid #E7EBF2; border-radius: 18px;
  padding: 0; margin-bottom: 14px; overflow: hidden; transition: border-color .2s;
}
.hw-faq details[open] { border-color: color-mix(in srgb, var(--acc) 45%, #E7EBF2); box-shadow: 0 14px 34px rgba(11,36,80,.07); }
.hw-faq summary {
  font: 700 16.5px/1.4 Sora, sans-serif; color: #0B2450; cursor: pointer;
  padding: 22px 56px 22px 26px; list-style: none; position: relative;
}
.hw-faq summary::-webkit-details-marker { display: none; }
.hw-faq summary::after {
  content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  font: 400 26px/1 Sora, sans-serif; color: var(--acc); transition: transform .25s;
}
.hw-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.hw-faq details p { font: 500 15.5px/1.65 Manrope, sans-serif; color: #5A6478; margin: 0; padding: 0 26px 24px; }

/* CTA final */
.hw-cta-final {
  position: relative; overflow: hidden; text-align: center; color: #fff;
  background: linear-gradient(135deg, #0B2450 0%, color-mix(in srgb, var(--acc) 45%, #0B2450) 100%);
  padding: 110px 0;
}
.hw-cta-final::before {
  content: ""; position: absolute; width: 720px; height: 720px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--acc-soft), transparent);
  top: -320px; right: -180px; filter: blur(20px);
}
.hw-cta-final h2 { font: 800 clamp(30px, 4vw, 50px)/1.12 Sora, sans-serif; margin: 0 0 18px; position: relative; }
.hw-cta-final p { font: 500 18px/1.6 Manrope, sans-serif; color: #C3CFE6; margin: 0 auto 36px; max-width: 620px; position: relative; }

/* Related strip */
.hw-related { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.hw-related a {
  font: 700 14px/1 Manrope, sans-serif; color: #0B2450; text-decoration: none;
  background: #fff; border: 1px solid #E7EBF2; padding: 12px 20px; border-radius: 999px;
  transition: all .2s;
}
.hw-related a:hover { border-color: var(--acc); color: var(--acc); transform: translateY(-2px); }

@media (max-width: 980px) {
  .hw-hero { padding: 64px 0 52px; }
  .hw-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hw-grid-3 { grid-template-columns: 1fr 1fr; }
  .hw-steps { grid-template-columns: 1fr 1fr; }
  .hw-section { padding: 68px 0; }
}
@media (max-width: 640px) {
  .hw-grid-3, .hw-steps, .hw-band-grid { grid-template-columns: 1fr; }
  .hw-hero-stats { gap: 24px; }
}