/* =====================================================================
   AQUÍ SUENA PERÚ — Capa de marca 2026 (según Brandbook + Design System)
   Se carga DESPUÉS de styles.css. Solo estilos: no cambia ningún texto.
   Servido como tema del sitio (css/site-overrides.css) vía el conector ASP Web.
   ===================================================================== */

/* ---------- Fuentes de marca (pesos que faltaban) ----------
   Inter y Syne ya están en el sitio como fuentes variables (Inter 100–900, Syne 400–800):
   aquí solo se amplía el rango de pesos declarado. Roboto Mono (700, la usa .addon-price)
   se sirve desde /assets/brand/. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Syne'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/syne-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Syne'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/syne-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/brand/RobotoMono-Bold.woff2') format('woff2'); }

/* ---------- Logo de marca 2026 (navbar y footer) ---------- */
.logo-img { content: url('/assets/brand/logo-asp-horizontal-blanco.svg'); height: 32px; width: auto; }

/* ---------- Tokens del Design System (valores del brandbook) ---------- */
:root {
  --navy: #030027;
  --navy-mid: #030027;          /* el brandbook no tiene un segundo navy */
  --purple: #6320EE;
  --red: #FF092F;
  --blue: #152AF7;
  --lime: #C4FB15;
  --magenta: #FF0974;
  --off-white: #F7F7F9;
  --navy-75: #68667D;
  --navy-25: #CDCCD4;
  --lime-25: #F3FED0;
  --violet-25: #E0D2FC;
  --muted: rgba(247, 247, 249, 0.72);
  --muted-dark: #68667D;

  --font-heading: 'Archivo Black', 'Arial Black', sans-serif;  /* titulares */
  --font-display: 'Archivo Black', 'Arial Black', sans-serif;  /* cifras y títulos grandes */
  --font-special: 'Syne', 'Archivo Black', sans-serif;         /* antetítulos y piezas especiales */
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, monospace;

  --radius: 16px;
  --radius-s: 8px;
  --radius-xl: 24px;
  --ease: 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- Tipografía ---------- */
h2, h3, .hero-title, .contact-inner h2, .pilot h2, .pricing h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: -0.02em;
}
.hero-title { font-size: clamp(3rem, 7.4vw, 6.2rem); line-height: 0.95; }
.section-eyebrow, .hero-eyebrow, .stats-title, .req-banner-eyebrow, .mobile-section-label {
  font-family: var(--font-special);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
}
.stats-title { color: var(--lime); }
.stat-number, .stat-unit, .step-number, .price-amount { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; }
.stats-source { font-family: var(--font-body); }
.section-subtitle { color: var(--muted); }
.accent-dark { color: var(--purple); }

/* ---------- Botones: píldora ---------- */
.btn { border-radius: 999px; font-weight: 700; letter-spacing: 0.01em; }
.btn:hover { transform: scale(1.03); box-shadow: none; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--lime); border-color: var(--lime); color: var(--navy); }
.btn-primary:hover { background: #D0FC44; border-color: #D0FC44; color: var(--navy); box-shadow: none; }
.btn-outline { border-color: rgba(247, 247, 249, 0.45); }
.btn-outline:hover { background: var(--off-white); border-color: var(--off-white); color: var(--navy); }
.btn-outline-dark { border-color: var(--navy); color: var(--navy); }
.btn-outline-dark:hover { background: var(--navy); color: var(--lime); }
.btn-white { background: var(--navy); border-color: var(--navy); color: var(--lime); }
.btn-white:hover { background: var(--navy); color: var(--lime); }
/* Sobre fondos claros el botón principal es violeta */
.pricing .btn-primary, .clients-section .btn-primary,
.page-section:not([style*="--navy"]):not([style*="--purple"]):not(.soundtrack-partner-section) .btn-primary {
  background: var(--purple); border-color: var(--purple); color: #fff;
}
.pricing .btn-primary:hover,
.page-section:not([style*="--navy"]):not([style*="--purple"]):not(.soundtrack-partner-section) .btn-primary:hover { background: #824DF1; border-color: #824DF1; }

/* ---------- Navegación: sólida, sin desenfoque ---------- */
.navbar.scrolled { background: var(--navy); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08); }
.dropdown-menu { background: var(--navy); border-radius: var(--radius); }

/* ---------- Hero: foto con trama en color corporativo, sin degradados ---------- */
.hero-orbs, .orb { display: none !important; }
.hero {
  background:
    linear-gradient(rgba(3, 0, 39, 0.55), rgba(3, 0, 39, 0.55)),
    image-set(url('/images/restaurant1.webp') type('image/webp'), url('/images/restaurant1.png') type('image/png')) center/cover no-repeat,
    var(--purple);
  background-blend-mode: normal, luminosity, normal;
}
.hero .accent { color: var(--lime); }

/* ---------- Cifras ---------- */
.stats-bar { background: var(--navy); border-color: rgba(255, 255, 255, 0.08); }
.stat-number, .stat-unit { color: var(--lime); }
.stat-divider { background: rgba(255, 255, 255, 0.12); }

/* ---------- Clientes (neutro claro) ---------- */
.clients-section { background: var(--off-white); color: var(--navy); }
.clients-section .section-eyebrow, .pricing .section-eyebrow,
.page-section:not([style*="--navy"]):not([style*="--purple"]):not(.soundtrack-partner-section) .section-eyebrow { color: var(--purple); }

/* ---------- Productos: fotos con trama navy, texto legible ---------- */
.products .section-subtitle { color: var(--muted); }
.product-card { border-radius: var(--radius); border-color: rgba(255, 255, 255, 0.08); }
.product-card:hover { border-color: var(--lime); box-shadow: none; transform: translateY(-3px); }
/* La foto de cada tarjeta viene de --card-img con ruta relativa ('images/...'), que desde
   /css/ se resolvería como /css/images/...; por eso aquí se fija con ruta absoluta.
   Una tarjeta nueva que no esté en esta lista conserva el estilo de styles.css. */
.product-card.img-card[style*="moodcreator_oficinaasp"] { --asp-card-img: image-set(url('/images/moodcreator_oficinaasp.webp') type('image/webp'), url('/images/moodcreator_oficinaasp.png') type('image/png')); }
.product-card.img-card[style*="moodcontrol_in_bar"] { --asp-card-img: image-set(url('/images/moodcontrol_in_bar.webp') type('image/webp'), url('/images/moodcontrol_in_bar.png') type('image/png')); }
.product-card.img-card[style*="moodradios"] { --asp-card-img: image-set(url('/images/moodradios.webp') type('image/webp'), url('/images/moodradios.png') type('image/png')); }
.product-card.img-card[style*="moodcreator_oficinaasp"],
.product-card.img-card[style*="moodcontrol_in_bar"],
.product-card.img-card[style*="moodradios"] {
  background:
    linear-gradient(rgba(3, 0, 39, 0.35), rgba(3, 0, 39, 0.35)),
    var(--asp-card-img) center/cover,
    var(--purple);
  background-blend-mode: normal, luminosity, normal;
}
.product-card.img-card h3, .product-card h3 { color: var(--lime); }
.product-card.img-card p { color: #fff; }
.product-icon { color: var(--lime); }

/* ---------- Cómo funciona ---------- */
.how-it-works { background: var(--navy); }
.step { border-color: rgba(255, 255, 255, 0.1); border-radius: var(--radius); }
.step:hover { border-color: var(--lime); }
.step-number { color: var(--lime); }
.req-banner { border-radius: var(--radius); border-color: rgba(255, 255, 255, 0.12); }

/* ---------- Identidad peruana: trama violeta ---------- */
.sonamos-peru {
  background:
    image-set(url('/images/radioenbar-asp.webp') type('image/webp'), url('/images/radioenbar-asp.png') type('image/png')) center/cover no-repeat,
    var(--purple);
  background-blend-mode: luminosity, normal;
}
.sonamos-overlay { background: rgba(99, 32, 238, 0.35); }
.sonamos-highlight { color: var(--lime) !important; }
.aqpe-banner { border-radius: var(--radius); border-color: rgba(255, 255, 255, 0.2); }
.aqpe-banner-bg {
  background:
    linear-gradient(rgba(3, 0, 39, 0.55), rgba(3, 0, 39, 0.55)),
    image-set(url('/images/aquisuenape1.webp') type('image/webp'), url('/images/aquisuenape1.png') type('image/png')) center/cover,
    var(--navy);
  background-blend-mode: normal, luminosity, normal;
}

/* ---------- Planes (neutro claro + violeta; el destacado en navy + verde) ---------- */
.pricing { background: var(--off-white); }
.pricing h2 { color: var(--navy); }
.pricing .section-subtitle { color: var(--navy-75); }
.pricing-card { border-radius: var(--radius-xl); box-shadow: none; border: 1px solid rgba(3, 0, 39, 0.10); }
.pricing-card:hover { box-shadow: none; transform: translateY(-3px); }
.pricing-card.popular { background: var(--navy); border-color: var(--navy); box-shadow: 0 24px 60px rgba(3, 0, 39, 0.14); }
.pricing-card.popular h3, .pricing-card.popular .price-amount, .pricing-card.popular .price-currency { color: var(--lime); }
.pricing-card.popular .price-tax, .pricing-card.popular .price-desc, .pricing-card.popular .pricing-features li { color: rgba(247, 247, 249, 0.82); }
.pricing-card.popular .btn-primary { background: var(--lime); border-color: var(--lime); color: var(--navy); }
.pricing-card.popular .btn-outline-dark { border-color: var(--lime); color: var(--lime); }
.popular-badge { background: var(--lime); color: var(--navy); font-family: var(--font-heading); font-weight: 400; letter-spacing: 0.1em; border-radius: 999px; }
.pricing-card h3 { color: var(--navy); }
.price-amount { color: var(--navy); }
.pricing-features li.included::before { color: var(--purple); }
.pricing-card.popular .pricing-features li.included::before { color: var(--lime); }
.addons { background: #fff; border-color: rgba(3, 0, 39, 0.10); border-radius: var(--radius-xl); }
.addon-price { color: var(--purple); font-family: var(--font-mono); }
.local-billing-badge { background: var(--lime-25); border-color: var(--lime); color: var(--navy); }

/* ---------- Piloto: magenta + navy (contraste legible) ---------- */
.pilot { background: var(--magenta); }
.pilot h2 { color: #fff; }
.pilot .section-eyebrow { color: var(--navy); }
.pilot .section-subtitle { color: var(--navy); }
.pilot-card { background: var(--navy); border-color: var(--navy); border-radius: var(--radius); }
.pilot-card:hover { background: var(--navy); transform: translateY(-3px); }
.pilot-card.featured { background: var(--navy); border: 2px solid var(--lime); }
.pilot-card h4 { color: #fff; }
.pilot-plan { color: var(--lime) !important; }
.pilot-card > p:not(.pilot-plan) { color: rgba(247, 247, 249, 0.82); }
.pilot-card .btn { background: var(--lime); border-color: var(--lime); color: var(--navy); }
.pilot-tag { background: var(--lime); color: var(--navy); border-radius: 999px; }

/* ---------- Contacto: navy con la banda zigzag del brandbook ---------- */
.contact { position: relative; overflow: hidden; background: var(--navy); }
.contact::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 540' preserveAspectRatio='none'%3E%3Cpath fill='%236320EE' d='M219.8 0L230.4 120.9L809.5 207.9L0 207.9L0 355.3L622.3 421.1L101.3 421.1L101.3 540L846.8 540L846.8 421.1L204.1 353.2L960 353.2L960 206.8L330.3 112.1L730.4 77.1L723.7 0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  opacity: 1;
}
.contact-inner { position: relative; z-index: 1; }
.contact-inner h2 { color: #fff; }
.contact-inner p { color: rgba(247, 247, 249, 0.9); }

/* ---------- Pie ---------- */
.footer { background: var(--navy); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.footer-brand p { color: rgba(247, 247, 249, 0.62); }
.footer-links a { color: rgba(247, 247, 249, 0.72); }
.footer-links a:hover { color: var(--lime); }
/* Sin el enlace a "Requisitos técnicos" en el pie (todas las páginas).
   La página /requisitos-tecnicos sigue publicada; solo se comparte a quien la necesita. */
.footer a[href*="requisitos-tecnicos"], .footer-links a[href*="requisitos-tecnicos"] { display: none !important; }

/* ---------- Páginas interiores ---------- */
.inner-hero-overlay { background: rgba(3, 0, 39, 0.78); }
.inner-hero-bg { filter: grayscale(1); }
.case-result-num, .insight-number { font-family: var(--font-display); }

/* ---------- Sin cursivas: el brandbook no usa itálicas ---------- */
.sonamos-content h2, .article-body blockquote p, .nosotros-team-title { font-style: normal; }
.article-body blockquote p { font-weight: 500; }

/* ---------- Tablas y enlaces en páginas de contenido ---------- */
.compare-options-table .ok { color: var(--purple); }
.compare-options-table .no { color: var(--red); }
.compare-options-table .row-asp td { background: var(--lime-25); }
.legal-article a:not(.btn), .glossary-term p a:not(.btn), .article-body a:not(.btn), .page-body-text a:not(.btn) { color: var(--purple); }

/* ---------- Home: sin el banner de "Requisitos técnicos" ----------
   La página /requisitos-tecnicos sigue publicada; solo se comparte a quien la necesita. */
.req-banner { display: none; }

/* ---------- Clientes: logos más grandes, en duotono navy de marca ----------
   Lo oscuro de cada logo pasa a navy y lo claro a blanco (capa navy en modo "screen");
   al pasar el cursor recupera sus colores. La franja lleva fondo propio para que la capa
   no tiña los huecos, y mientras un logo carga se ve una ficha blanca en su lugar. */
.clients-track { align-items: flex-start; background: var(--off-white); }
.client-item { position: relative; opacity: 1; }
.client-item:hover { transform: none; }
.client-item img { height: 72px; min-width: 72px; max-width: 180px; border-radius: 12px; background: #fff; filter: grayscale(1) contrast(1.6); }
.client-item::after { content: ''; position: absolute; inset: 0; background: var(--navy); mix-blend-mode: screen; pointer-events: none; transition: opacity var(--ease); }
.client-item span { color: var(--navy-75); max-width: 9rem; text-align: center; line-height: 1.3; }
.client-item:hover::after { opacity: 0; }
.client-item:hover img { filter: none; }
@media (max-width: 768px) {
  .client-item img { height: 56px; min-width: 56px; max-width: 140px; }
  .client-item span { max-width: 7rem; }
}

/* ---------- Planes: la etiqueta "FACTURACIÓN LOCAL…" no cabía en una línea en móvil ----------
   (styles.css la fuerza a una sola línea de ~1000px y eso ensanchaba toda la página). */
.local-billing-badge { max-width: 100%; }
@media (max-width: 1100px) {
  .local-billing-badge { white-space: normal; height: auto; padding: 0.7rem 1.1rem; border-radius: var(--radius); line-height: 1.4; }
}

/* ---------- Nosotros: las tarjetas de MOODCREATOR traen 2 columnas en línea (style) ----------
   y eso anulaba la versión de una columna en móvil; aquí se fuerza una columna. */
@media (max-width: 768px) {
  .nosotros-diff-grid[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

/* ---------- Clientes con "Reducir movimiento" activado en el dispositivo ----------
   styles.css detiene el carrusel y reparte los 152 logos en una cuadrícula enorme;
   aquí se mantiene una sola fila que se desliza con el dedo, sin animación automática. */
@media (prefers-reduced-motion: reduce) {
  .clients-marquee-wrap {
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  }
  .clients-marquee-wrap::-webkit-scrollbar { display: none; }
  .clients-track { flex-wrap: nowrap; width: max-content; justify-content: flex-start; gap: 2.5rem; padding: 0 1.5rem; }
  .client-item { scroll-snap-align: start; }
}

/* ---------- Blog (índice): foto de cabecera ----------
   La plantilla usa /images/branding.png (portada del artículo "5 razones", con texto incrustado);
   aquí se cambia solo en la cabecera que va justo antes del listado del blog. */
.inner-hero:has(+ .blog-listing) .inner-hero-bg {
  background-image: url('/images/cafe2.png') !important;
  background-image: image-set(url('/images/cafe2.webp') type('image/webp'), url('/images/cafe2.png') type('image/png')) !important;
}