/*
 * AS Valuation - UI Polish
 * Focus: spacing, whitespace, and typographic rhythm.
 *
 * Important: keep changes additive and scoped (Elementor is sensitive to broad/global resets).
 */

:root {
  /* Lightweight spacing scale (8px grid). */
  --asv-space-2: 8px;
  --asv-space-3: 12px;
  --asv-space-4: 16px;
  --asv-space-5: 24px;
  --asv-space-6: 32px;
  --asv-space-7: 48px;
  --asv-space-8: 72px;
}

/* Home (page-id 22): keep the long intro paragraph readable (avoid 1280px measure). */
.elementor-page-22 .elementor-element-f161277 .elementor-heading-title {
  max-width: 75ch;
}

/* Global: Sticky header — WHY: Elementor header template (187) has no native sticky toggle accessible via PHP.
   Transparent at top, white on scroll. JS adds .asv-header-scrolled class. */
.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  width: 100%;
  background: transparent;
  box-shadow: none;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
/* WHY: When sticky activates, the main header container (974eddf) loses vertical centering.
   Force align-items: center on the direct flex children. */
.elementor-location-header .elementor-element-974eddf {
  align-items: center !important;
}
.elementor-location-header.asv-header-scrolled {
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
/* WHY: Header logo is white (negative variant) designed for dark/transparent overlay.
   At top: keep original white logo. On scroll: filter converts white→dark. */
.elementor-location-header .elementor-element-bff2283 img {
  filter: brightness(1);
  transition: filter 0.25s ease;
}
.elementor-location-header.asv-header-scrolled .elementor-element-bff2283 img {
  filter: brightness(0);
}
/* Nav links + language switcher: white at top, dark on scroll */
.elementor-location-header .elementor-nav-menu a,
.elementor-location-header .wpml-ls-item a {
  color: #FFFFFF !important; /* WHY: override theme default to be visible on transparent bg */
  transition: color 0.25s ease;
}
.elementor-location-header.asv-header-scrolled .elementor-nav-menu a,
.elementor-location-header.asv-header-scrolled .wpml-ls-item a {
  color: #2D2420 !important;
}
/* Hamburger / menu icon: white at top */
.elementor-location-header .elementor-icon {
  color: #FFFFFF;
  transition: color 0.25s ease;
}
.elementor-location-header.asv-header-scrolled .elementor-icon {
  color: #2D2420;
}

/* Header nav: prevent wrapping at medium-desktop widths (1025–1280px).
   WHY: 7 nav items overflow at ~1100px. Reduce font-size, padding & gap so they fit one line. */
@media (min-width: 1025px) and (max-width: 1280px) {
  /* Push nav away from logo — the nav container (flex:1) abuts the logo with 0 padding */
  .elementor-location-header .elementor-element-2f3439c {
    padding-left: 40px !important;
  }
  .elementor-location-header .e-n-menu-heading {
    flex-wrap: nowrap !important;
    gap: 4px !important;
    justify-content: center !important;
  }
  .elementor-location-header .e-n-menu-title {
    padding: 10px 8px !important;
  }
  .elementor-location-header .e-n-menu-title-text {
    font-size: 13px !important;
  }
  /* Slide heading: reduce so first slide fits one line at ~1100px */
  .elementor-page-22 .elementor-slide-heading {
    font-size: 38px !important;
    line-height: 1.15 !important;
  }
}
/* WHY: Default 50px wraps "Especialistas en valoración" on viewports 1281–1600px.
   Cap at 42px above 1280px to keep one line. */
@media (min-width: 1281px) and (max-width: 1600px) {
  .elementor-page-22 .elementor-slide-heading {
    font-size: 42px !important;
    line-height: 1.15 !important;
  }
}

/* Sectores (page-id 27): the widget lacks a control for inter-item spacing. */
.elementor-page-27 details.e-n-accordion-item {
  margin-bottom: var(--asv-space-2);
}

/* ===================================================================
   Homepage (page-id 22): Redesigned middle sections
   WHY: Elementor widget settings alone can't express these layouts
   =================================================================== */

/* Intro: image column must stretch to match text column height */
.elementor-page-22 .asv-intro-section { align-items: stretch; }
.elementor-page-22 .asv-intro-image { align-self: stretch; min-height: 400px; }

/* Feature cards: burgundy top border on content area */
.elementor-page-22 .asv-feature-card {
  overflow: hidden;
  border-radius: 4px;
}
/* Force image to fill 160px height uniformly */
.elementor-page-22 .asv-feature-card > .elementor-widget-image img {
  height: 160px;
  width: 100%;
  object-fit: cover;
  display: block;
}

/* Service items: side-by-side image + content */
.elementor-page-22 .asv-service-item {
  border-radius: 4px;
  overflow: hidden;
  flex-wrap: nowrap !important; /* WHY: Elementor defaults to wrap; we need side-by-side */
}
/* Image column fixed at 280px, content fills rest */
.elementor-page-22 .asv-service-image {
  flex: 0 0 280px;
  min-height: 280px;
}
.elementor-page-22 .asv-service-content {
  flex: 1 1 0%;
  min-width: 0;
}
/* Every even service item reverses to image-right */
.elementor-page-22 .asv-service-item:nth-child(even) {
  flex-direction: row-reverse;
}

/* Service code badge: bordered pill */
.elementor-page-22 .asv-service-code .elementor-heading-title {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: #BC3227;
  border: 1.5px solid #BC3227;
  padding: 4px 12px;
  border-radius: 2px;
  line-height: 1.4;
}

/* Service list: 2-column grid with pink dots */
.elementor-page-22 .asv-service-list-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 32px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.elementor-page-22 .asv-service-list-items li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  color: #6B5E58;
}
.elementor-page-22 .asv-service-list-items li::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #E67272;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Intro divider: WHY — Elementor divider widget weight setting doesn't always render correctly */
.elementor-page-22 .asv-intro-divider .elementor-divider-separator {
  border-color: #BC3227;
  border-width: 3px;
}

/* Statement block: company description with red left border + image */
.elementor-page-22 .asv-statement-section {
  flex-wrap: nowrap !important; /* WHY: keep text + image side by side */
}
/* Info cards: subtle hover lift */
.elementor-page-22 .asv-info-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.elementor-page-22 .asv-info-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(45,36,32,0.12);
}
/* Responsive: tablet */
@media (max-width: 1024px) {
  /* Statement: stack text above image */
  .elementor-page-22 .asv-statement-section {
    flex-direction: column !important;
  }
  .elementor-page-22 .asv-statement-section > .e-con {
    width: 100% !important;
  }
  .elementor-page-22 .asv-statement-image {
    min-height: 280px;
  }
  .elementor-page-22 .asv-statement-text {
    padding-right: 24px !important;
  }
  /* Info cards: stack vertically */
  .elementor-page-22 .asv-info-cards-section .asv-info-card {
    width: 100% !important;
  }
  /* Intro: stack image above text */
  .elementor-page-22 .asv-intro-section {
    flex-direction: column;
  }
  .elementor-page-22 .asv-intro-section > .e-con {
    width: 100% !important;
  }
  .elementor-page-22 .asv-intro-image {
    min-height: 260px;
  }
  /* Feature cards: 2-column on tablet */
  .elementor-page-22 .asv-features-section .asv-feature-card {
    width: 48% !important;
  }
  /* Service items: stack */
  .elementor-page-22 .asv-service-item,
  .elementor-page-22 .asv-service-item:nth-child(even) {
    flex-direction: column;
  }
  .elementor-page-22 .asv-service-image {
    width: 100% !important;
    flex: none;
    min-height: 200px;
  }
  .elementor-page-22 .asv-service-list-items {
    grid-template-columns: 1fr;
  }
}

/* Responsive: mobile */
@media (max-width: 767px) {
  /* Statement: tighter padding, smaller text */
  .elementor-page-22 .asv-statement-section {
    padding: 40px 20px !important;
  }
  .elementor-page-22 .asv-statement-text {
    padding: 0 0 0 20px !important;
  }
  .elementor-page-22 .asv-statement-image {
    min-height: 220px;
  }
  /* Info cards: reduce padding */
  .elementor-page-22 .asv-info-cards-section {
    padding: 40px 20px !important;
  }
  /* Intro: smaller heading, tighter padding */
  .elementor-page-22 .asv-intro-section > .e-con:last-child {
    padding: 32px 24px !important;
  }
  .elementor-page-22 .asv-intro-image {
    min-height: 220px;
  }
  /* Features: reduce padding, stack cards vertically */
  .elementor-page-22 .asv-features-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .elementor-page-22 .asv-features-section .asv-feature-card {
    width: 100% !important;
  }
  /* Services: reduce padding */
  .elementor-page-22 .asv-services-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .elementor-page-22 .asv-service-content {
    padding: 24px 20px !important;
  }
  .elementor-page-22 .asv-service-image {
    min-height: 180px;
  }
}

/* ===================================================================
   Servicios (page-id 25): Redesigned to match homepage design system
   WHY: Full-page rebuild with hero, nav bar, and alternating category cards
   =================================================================== */

/* Hero: dark overlay on factory image */
.elementor-page-25 .asv-servicios-hero {
  position: relative;
}

/* Nav bar: sticky below header
   WHY: header min-height is 80px + 1px border. A ::before pseudo-element
   extends the white background 4px upward to cover any sub-pixel gap
   that becomes visible when scrolling over images. */
.elementor-page-25 .asv-servicios-nav {
  position: sticky;
  top: 81px;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.elementor-page-25 .asv-servicios-nav::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  height: 4px;
  background: #FFFFFF;
  z-index: 1;
}

/* Service cards: side-by-side image + content */
.elementor-page-25 .asv-service-item {
  border-radius: 4px;
  overflow: hidden;
  flex-wrap: nowrap !important; /* WHY: Elementor defaults to wrap; we need side-by-side */
}

/* Image column fixed at 280px */
.elementor-page-25 .asv-service-image {
  flex: 0 0 280px;
  min-height: 280px;
}

/* Content column fills remaining width */
.elementor-page-25 .asv-service-content {
  flex: 1 1 0%;
  min-width: 0;
}

/* Service list: 2-column grid with pink dots (top-level only) */
.elementor-page-25 .asv-service-list-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 24px;
  list-style: none;
  padding: 0;
  margin: 8px 0 0 0;
}
.elementor-page-25 .asv-service-list-items > li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.875rem;
  color: #6B5E58;
  line-height: 1.5;
}
.elementor-page-25 .asv-service-list-items > li::before {
  content: '';
  width: 5px;
  height: 5px;
  background: #E67272;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0.45em;
}
/* Nested lists inside service items (e.g. "Cotizadas / No cotizadas") */
.elementor-page-25 .asv-service-list-items ul {
  list-style: disc;
  padding-left: 20px;
  margin: 2px 0 0 0;
}
.elementor-page-25 .asv-service-list-items ul li {
  font-size: 0.8125rem;
  color: #8A7D78;
}
.elementor-page-25 .asv-service-list-items ul li::before {
  display: none; /* WHY: use native disc marker for nested lists */
}

/* Sub-group headings (bold <p><strong>) as visual separators */
.elementor-page-25 .asv-service-content p strong {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: #6A2C3E;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 14px;
  margin-bottom: 2px;
}
/* First sub-heading needs no top margin */
.elementor-page-25 .asv-service-content > .elementor-widget-container > p:first-child strong {
  margin-top: 0;
}
/* Tighter paragraph spacing inside service content */
.elementor-page-25 .asv-service-content p {
  margin-bottom: 2px;
}

/* Responsive: tablet */
@media (max-width: 1024px) {
  .elementor-page-25 .asv-servicios-nav {
    position: static;
    flex-wrap: wrap;
  }
  .elementor-page-25 .asv-servicios-nav::before {
    display: none;
  }
  .elementor-page-25 .asv-service-item {
    flex-direction: column !important;
  }
  .elementor-page-25 .asv-service-image {
    width: 100% !important;
    flex: none;
    min-height: 200px;
  }
  .elementor-page-25 .asv-service-list-items {
    grid-template-columns: 1fr;
  }
}

/* Responsive: mobile */
@media (max-width: 767px) {
  /* Nav pills: compact, 2x2 grid */
  .elementor-page-25 .asv-servicios-nav {
    display: flex;
    justify-content: center;
    gap: 8px !important;
    padding: 12px 16px !important;
  }
  .elementor-page-25 .asv-servicios-nav .elementor-widget-button {
    flex: 0 1 auto;
  }
  .elementor-page-25 .asv-servicios-nav .elementor-button {
    font-size: 12px !important;
    padding: 6px 14px !important;
  }
  /* Intro: tighter padding, smaller heading */
  .elementor-page-25 .asv-servicios-intro {
    padding: 32px 20px !important;
  }
  .elementor-page-25 .asv-servicios-intro .elementor-heading-title {
    font-size: 24px !important;
  }
  /* Category sections: reduce padding */
  .elementor-page-25 .asv-servicios-category {
    padding: 32px 16px !important;
  }
  /* Service content: tighter padding */
  .elementor-page-25 .asv-service-content {
    padding: 24px 16px !important;
  }
  /* Headings smaller on mobile */
  .elementor-page-25 .asv-service-content .elementor-widget-heading h2 {
    font-size: 24px !important;
  }
  .elementor-page-25 .asv-service-image {
    min-height: 180px;
  }
  /* Sub-headings: smaller margin */
  .elementor-page-25 .asv-service-content p strong {
    margin-top: 12px;
    font-size: 0.6875rem;
  }
}

/* ─────────────────────────────────────────────────────────────
   Clientes (page-id 856): Sector logo grid
   ───────────────────────────────────────────────────────────── */

/* Sector sections: alternating backgrounds */
.elementor-page-856 .asv-clientes-sector {
  padding: 48px 0;
}
.elementor-page-856 .asv-bg-cream {
  background: #FAF8F5;
}

/* Logo grid: each image widget gets a fixed-width cell */
.elementor-page-856 .asv-logos-grid > .elementor-widget-image {
  width: calc((100% - 24px * 4) / 5);  /* 5 columns with 24px gap */
  flex-shrink: 0;
}
/* Logo images: contain (no crop), original colors */
.elementor-page-856 .asv-logos-grid img {
  max-height: 60px;
  width: auto;
  object-fit: contain;
}

/* Responsive: 3 columns tablet, 2 columns mobile */
@media (max-width: 1024px) {
  .elementor-page-856 .asv-logos-grid > .elementor-widget-image {
    width: calc((100% - 16px * 2) / 3);
  }
}
@media (max-width: 767px) {
  .elementor-page-856 .asv-clientes-sector {
    padding: 32px 16px;
  }
  .elementor-page-856 .asv-logos-grid > .elementor-widget-image {
    width: calc((100% - 12px) / 2);
  }
}