/* ============================================================
   ads.css — estilos exclusivos del funnel Google Ads
   Cargado solo en index_ads_general.php, después de common.css.
   Usar selectores bajo #hero.hero-ads, .page-ads, etc.
   ============================================================ */

/* ── Hero ─────────────────────────────────────────────────── */

/*
 * Imagen hero: una sola <img> vía <picture>.
 * Variante móvil alta solo entre 1024px y 1170px (como google_ads.html / React).
 */
#hero.hero-ads .hero-image-desktop {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* Botones como Button size="xl" (HeroSection): altura fija, sin encoger ni partir texto */
#hero.hero-ads .hero-cta-row a {
  flex-shrink: 0;
  white-space: nowrap;
  min-height: 3.5rem;
  padding: 1rem 2.5rem;
  font-size: 1.125rem;
  line-height: 1.25rem;
  box-sizing: border-box;
}

@media (min-width: 1024px) and (max-width: 1170px) {
  #hero.hero-ads .hero-image-desktop {
    margin-bottom: 0 !important;
    object-position: center !important;
    max-height: 700px !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
  }
}

/*
 * Dos columnas (lg) y ancho ≤1350px: mismo aire lateral que antes en 1024–1280px,
 * menos separación central y mockup pegado al lado del texto para equilibrar.
 */
@media (min-width: 1024px) and (max-width: 1350px) {
  #hero.hero-ads > div:first-of-type {
    padding-left: clamp(1.75rem, 5vw, 3rem);
    padding-right: clamp(1rem, 3vw, 2rem);
  }
  #hero.hero-ads .grid > div:first-child {
    padding-left: clamp(0.75rem, 2.5vw, 1.5rem);
  }
  #hero.hero-ads .grid {
    gap: 1.75rem;
  }
  #hero.hero-ads .hero-image-container {
    align-items: center !important;
    justify-content: flex-start !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #hero.hero-ads .hero-cta-row a {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    font-size: 1rem;
  }
}

/*
 * Tablet solo (768px–1023px, debajo de lg): misma imagen desktop (hero-google-ads.webp)
 * a escala reducida y centrada; no se usa la variante móvil alta.
 */
@media (min-width: 768px) and (max-width: 1023px) {
  #hero.hero-ads .hero-image-container {
    justify-content: center !important;
    align-items: center !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  #hero.hero-ads .hero-image-desktop {
    margin: 0 auto !important;
    margin-bottom: 0 !important;
    width: min(96vw, 680px) !important;
    max-width: none !important;
    height: auto !important;
    max-height: min(78vh, 720px) !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: scale(1.05) !important;
    transform-origin: center center !important;
  }
}

/* ── Comparativa marketing ─────────────────────────────────── */

#comparativa-marketing .cmp-card-recommended {
  background: rgba(var(--primary-rgb), 0.05);
  border-color: var(--primary);
  box-shadow: 0 8px 40px -4px rgba(var(--primary-rgb), 0.15);
}

/* ── Comparación agencias (#comparacion) ───────────────────── */

#comparacion .comparison-card {
  box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.08);
}

/* ── Precios: overlay móvil al añadir extra ────────────────── */

#precios .plan-addon-btn {
  border: none;
  cursor: pointer;
  line-height: 1;
  font-family: inherit;
}

#precios .plan-price-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

#precios .plan-price-overlay.hidden {
  display: none;
}

#precios .plan-price-overlay-bubble {
  width: 8rem;
  height: 8rem;
  border-radius: 9999px;
  border: 4px solid var(--primary);
  background: rgba(var(--primary-rgb), 0.1);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
}

#precios .plan-price-overlay-amount {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--primary);
}

/* ── Testimonios (#testimonios) ────────────────────────────── */

#testimonios .testimonios-featured-card {
  box-shadow: 0 8px 40px -4px rgba(var(--primary-rgb), 0.15);
}

#testimonios .testimonios-featured-card blockquote span {
  color: #344256;
}