/* ================================================================
   style.css - estilos principales de Indusquim
   Mobile-first, variables CSS, BEM ligero
================================================================ */


/* ----------------------------------------------------------------
   1. VARIABLES GLOBALES
---------------------------------------------------------------- */
:root {
  /* Paleta de color (marca Indusquim) */
  --color-primary:      #108643;   /* Verde oscuro principal */
  --color-primary-light:#5db446;   /* Verde claro secundario */
  --color-primary-dark: #0a6334;   /* verde oscuro, hover/active */
  --color-accent:       #5db446;   /* Verde claro como acento interactivo */
  --color-bg:           #f4f7f4;   /* Fondo suave */
  --color-surface:      #ffffff;
  --color-text:         #343838;   /* Gris oscuro marca */
  --color-text-muted:   #555555;   /* Gris medio */

  /* Tipografía */
  /* Poppins como alternativa libre a ITC Avant Garde (esa es de pago) */
  --font-base: 'Poppins', sans-serif;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;

  /* Espaciado */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;

  /* Navbar */
  --navbar-height:     58px;
  --navbar-pill-bg:    rgba(255, 255, 255, 0.85);
  --navbar-pill-blur:  blur(14px);
  --navbar-shadow:     0 4px 24px rgba(30, 122, 30, 0.12);
  --navbar-radius:     9999px;   /* Forma píldora */

  /* Transiciones */
  --transition-fast: 0.18s ease;
  --transition-base: 0.28s ease;
}


/* ----------------------------------------------------------------
   2. RESET MÍNIMO
---------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  overflow-x: hidden;
}

body {
  font-family: var(--font-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}


/* ----------------------------------------------------------------
   3. HEADER - contenedor sticky
---------------------------------------------------------------- */
.site-header {
  position: fixed;           /* Flota sobre el contenido */
  top: var(--space-sm);   /* Posición en reposo */
  transition: top 0.35s ease;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: calc(100% - 2 * var(--space-lg));  /* Margen lateral */
  max-width: 1200px;

  /* Píldora y botón Portal van en la misma fila flex para que no se monten.
     .navbar-pill se puede encoger (min-width:0) y le deja espacio al botón. */
  display: flex;
  align-items: center;
  gap: 0.6rem;
}


/* Navbar al hacer scroll: sube y se comprime */
.site-header.is-scrolled {
  top: 0.5rem;
}

.site-header.is-scrolled .navbar-pill {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13);
  /* min-height y no height: en móvil la píldora usa 2 filas y un height fijo la aplasta */
  min-height: calc(var(--navbar-height) - 8px);
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  transition: background 0.3s ease, box-shadow 0.3s ease,
              min-height 0.3s ease, padding 0.3s ease;
}

/* En escritorio la píldora no envuelve, acá sí se puede usar height
   para que adelgace al hacer scroll */
@media (min-width: 1281px) {
  .site-header.is-scrolled .navbar-pill {
    height: calc(var(--navbar-height) - 8px);
  }
}

/* ----------------------------------------------------------------
   4. NAVBAR - forma píldora
---------------------------------------------------------------- */
.navbar-pill {
  display: flex;
  align-items: center;
  flex: 1 1 auto;   /* Hermano flex de .portal-fab dentro de .site-header */
  min-width: 0;
  flex-wrap: nowrap;
  gap: var(--space-md);
  padding: 0.5rem 1.25rem;
  background: var(--navbar-pill-bg);
  backdrop-filter: var(--navbar-pill-blur);
  -webkit-backdrop-filter: var(--navbar-pill-blur);
  border-radius: var(--navbar-radius);
  box-shadow: var(--navbar-shadow);
  border: 1px solid rgba(255, 255, 255, 0.6);
  height: var(--navbar-height);
  transition: background 0.3s ease, box-shadow 0.3s ease,
              height 0.3s ease, padding 0.3s ease;
}


/* ---- 4a. Logo ------------------------------------------------ */
.navbar-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.navbar-logo img {
  height: 42px;         /* Alto fijo; el ancho es automático */
  width: auto;
  object-fit: contain;
}


/* ---- 4b. Menú de enlaces ------------------------------------- */
.navbar-menu {
  display: flex;
  align-items: center;
  flex-shrink: 0;   /* No dejar que el menú se comprima y envuelva texto */
  gap: var(--space-xs);
  margin-left: auto;   /* Empuja el menú hacia el centro/derecha */
}

.nav-link {
  position: relative;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  padding: 0.4rem 0.75rem;
  border-radius: var(--navbar-radius);
  white-space: nowrap;   /* Evita que "Sectores atendidos" se parta en 2 líneas */
  transition: color var(--transition-fast), background var(--transition-fast);
}

/* Estado hover */
.nav-link:hover {
  color: var(--color-primary);
  background: rgba(46, 158, 46, 0.08);
}

/* Estado activo: sección visible */
.nav-link.active {
  color: var(--color-primary);
  font-weight: 600;
}

/* Subrayado animado bajo el enlace activo */
.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  border-radius: 2px;
  background: var(--color-primary);
}


/* ---- 4c. Dropdown Sectores ---------------------------------- */

/* Contenedor relativo para posicionar el menú */
.nav-item--dropdown {
  position: relative;
}

/* Chevron junto al texto */
.nav-link--dropdown {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.dropdown-chevron {
  width: 13px;
  height: 13px;
  transition: transform var(--transition-fast);
}

/* Chevron girado cuando está abierto */
.nav-item--dropdown.is-open .dropdown-chevron {
  transform: rotate(180deg);
}

/* Triángulo indicador */
.dropdown-menu::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 6px;
  background: rgba(255, 255, 255, 0.95);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* Menú desplegable */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 1rem);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 220px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 1rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  padding: 0.4rem;
  list-style: none;

  /* Oculto por defecto */
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

/* Visible cuando está abierto */
.nav-item--dropdown.is-open .dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Ítem del dropdown */
.dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  border-radius: 0.65rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.dropdown-menu a:hover {
  background: rgba(46, 158, 46, 0.08);
  color: var(--color-primary);
}


/* ---- 4d. Barra de búsqueda ---------------------------------- */

/* Contenedor relativo para el ícono */
.navbar-search {
  display: flex;
  align-items: center;
  position: relative;
  flex-shrink: 0;
}

/* Lupa encima del input */
.search-icon {
  position: absolute;
  left: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  pointer-events: none;   /* Los clics pasan al input */
  transition: color var(--transition-fast);
  z-index: 1;
}

/* Input compacto, se expande con el foco */
.search-input {
  width: 150px;                        /* Ancho colapsado */
  padding: 0.42rem 0.75rem 0.42rem 2.1rem;  /* Espacio para la lupa */
  font-family: var(--font-base);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: rgba(46, 158, 46, 0.07);
  border: 1.5px solid transparent;
  border-radius: var(--navbar-radius);
  outline: none;
  transition: width var(--transition-base), border-color var(--transition-fast), background var(--transition-fast);

  /* Ocultar el botón nativo "×" de Safari/Chrome */
  -webkit-appearance: none;
  appearance: none;
}

.search-input::-webkit-search-cancel-button { display: none; }

/* Expandido con foco. 180px, más ancho no cabe en algunos portátiles */
.search-input:focus {
  width: 180px;
  background: var(--color-surface);
  border-color: var(--color-primary);
}

/* La lupa toma el color primario cuando el input tiene foco */
.navbar-search:focus-within .search-icon {
  color: var(--color-primary);
}

/* Placeholder */
.search-input::placeholder {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}


/* ---- 4d. Botón CTA ------------------------------------------ */
.navbar-cta {
  flex-shrink: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: #fff;
  background: #108643;
  padding: 0.5rem 1.25rem;
  border-radius: var(--navbar-radius);
  transition: background var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
}

.navbar-cta:hover {
  background: #0a6334;
  transform: scale(1.03);
}


/* ---- 4c'. Botón "Portal Clientes" ----
   Va en la misma fila flex que .navbar-pill (no con position fixed). */
.portal-fab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  background: rgba(16, 134, 67, 0.55);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(16, 134, 67, 0.65);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.portal-fab svg { flex-shrink: 0; }
.portal-fab:hover {
  background: rgba(16, 134, 67, 0.72);
  transform: translateY(-1px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
@media (max-width: 1280px) { .portal-fab { display: none; } }

/* ---- 4d. Botón hamburguesa (oculto en escritorio) ----------- */
.navbar-toggle {
  display: none;             /* Se muestra sólo en móvil */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  margin-left: auto;
}

/* Tres líneas del ícono hamburguesa */
.navbar-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

/* Animación a "X" cuando el menú está abierto */
.navbar-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.navbar-toggle.is-open span:nth-child(2) {
  opacity: 0;
}
.navbar-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ----------------------------------------------------------------
   5. RESPONSIVE - menú móvil (<= 1280px)
   El corte es 1280 y no 768 porque logo + menú + buscador + botón
   Portal no caben en una fila por debajo de ese ancho.
---------------------------------------------------------------- */
@media (max-width: 1280px) {

  /* El header ocupa todo el ancho con margen menor */
  .site-header {
    top: var(--space-sm);
    width: calc(100% - 2 * var(--space-sm));
    transition: top 0.35s ease;
  }

  /* En móvil el fondo translúcido no se lee bien sobre la foto, subimos opacidad */
  .navbar-pill {
    border-radius: 1.25rem;
    flex-wrap: wrap;
    height: auto;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  /* Mostrar botón hamburguesa */
  .navbar-toggle {
    display: flex;
  }

  /* Ocultar CTA en móvil (se mueve dentro del menú desplegable) */
  .navbar-cta {
    display: none;
  }

  /* Menú colapsado por defecto */
  .navbar-menu {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    margin-left: 0;
    padding: var(--space-xs) 0;
    border-top: 1px solid rgba(46, 158, 46, 0.1);
    margin-top: 0.5rem;
  }

  /* Menú expandido cuando JS añade la clase .is-open */
  .navbar-menu.is-open {
    display: flex;
  }

  /* Enlace a ancho completo en móvil */
  .nav-link {
    width: 100%;
    padding: 0.65rem 0.5rem;
    border-radius: 0.5rem;
  }

  /* Submenú de sectores en móvil: acordeón dentro del flujo, no flotante */
  .dropdown-menu {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    min-width: 0;
    width: 100%;
    margin-top: 0;
    padding: 0 0 0 0.75rem;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    border-radius: 0;

    /* display en vez de opacity, así cerrado no ocupa espacio ni recibe clics */
    display: none;
  }
  /* Mismo selector que la regla base para poder pisar su transform
     (si no el submenú queda corrido a la izquierda) */
  .nav-item--dropdown.is-open .dropdown-menu {
    display: block;
    transform: none;
  }
  .dropdown-menu::before { display: none; }
  .dropdown-menu a {
    padding: 0.55rem 0.5rem;
    font-size: var(--text-sm);
  }
}


/* ----------------------------------------------------------------
   6. HERO - carrusel de fondo a pantalla completa
---------------------------------------------------------------- */

/* Contenedor principal, ocupa toda la pantalla */
.hero {
  position: relative;
  z-index: 1;
  width: 100%;
  height: calc(100vh - 5rem);
  min-height: 600px;
  overflow: visible;
  display: flex;

  /* Texto centrado. El padding-top es para que en pantallas bajitas
     no quede detrás del header fijo. */
  align-items: center;
  justify-content: center;
  padding-top: calc(var(--navbar-height) + 1rem);
  /* Sube el texto respecto al centro: más padding-bottom = más arriba
     (cada 1rem lo mueve unos 8px) */
  padding-bottom: 5rem;
  box-sizing: border-box;
}

/* ---- 6a. Diapositivas de fondo ------------------------------ */
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Estado inicial: invisible */
  opacity: 0;
  transform: scale(1.04);   /* Ligero zoom de entrada */
  transition:
    opacity 1.2s ease,
    transform 6s ease;       /* Ken Burns suave durante la pausa */
}

/* Diapositiva activa */
.hero-slide.active {
  opacity: 1;
  transform: scale(1);
}

/* Degradado blanco abajo para empalmar con la sección siguiente */
.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, rgba(244, 247, 244, 0.9));
  z-index: 2;
  pointer-events: none;
}

/* ---- 6b. Capa de oscurecimiento ----------------------------- */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Degradado: más oscuro abajo para dar legibilidad al texto */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0.55) 100%
  );
}

/* ---- 6c. Contenido central ---------------------------------- */
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #ffffff;
  max-width: 860px;
  padding: 0 var(--space-lg);

  /* Animación de entrada del texto */
  animation: heroFadeUp 0.9s ease both;
}

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Etiqueta pequeña sobre el título */
.hero-eyebrow {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary-light);
  margin-bottom: var(--space-sm);
}

/* Título principal */
.hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);  /* Fluido entre móvil y escritorio */
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: var(--space-sm);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* Descripción */
.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 400;
  opacity: 0.9;
  max-width: 660px;
  margin: 0 auto var(--space-lg);
  line-height: 1.65;
}

/* ---- 6d. Botones CTA ---------------------------------------- */
.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* Base compartida */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-base);
  font-size: var(--text-base);
  font-weight: 600;
  padding: 0.75rem 2rem;
  border-radius: var(--navbar-radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
  white-space: nowrap;
}

.btn:hover { transform: translateY(-2px); }

/* Botón sólido verde */
.btn-primary {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
}
.btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* Botón contorno blanco */
.btn-outline {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.75);
}
.btn-outline:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #ffffff;
}

/* ---- 6e. Indicadores (dots) --------------------------------- */
.hero-dots {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 0.5rem;
}

.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  padding: 0;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.hero-dot.active {
  background: var(--color-primary-light);
  transform: scale(1.35);
}

/* ---- 6f. Responsive ----------------------------------------- */

/* Pantallas con poca altura (portátiles): menos espacio vertical */
@media (max-height: 800px) and (min-width: 769px) {
  .hero { padding-top: calc(var(--navbar-height) + 2.5rem); }
  .hero-eyebrow  { margin-bottom: 0.5rem; }
  .hero-title    { margin-bottom: 0.5rem; font-size: clamp(1.8rem, 4vw, 2.75rem); }
  .hero-subtitle { margin-bottom: 1rem; font-size: 0.95rem; }
}

/* El texto escala con el ancho, así que limitamos también el alto del
   hero por ancho. Si no, en ventanas angostas queda mucho hueco antes
   de las tarjetas. En móvil no aplica. */
@media (min-width: 769px) {
  .hero {
    min-height: 480px;
    max-height: 51vw;
  }
}

@media (max-width: 768px) {
.hero-title { line-height: 1.2; }

  .hero-subtitle { font-size: 1rem; }

  .btn {
    padding: 0.65rem 1.5rem;
    font-size: var(--text-sm);
  }
}


/* ----------------------------------------------------------------
   8. ESTILOS COMPARTIDOS DE SECCIÓN
---------------------------------------------------------------- */

.section-eyebrow {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

.section-subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 640px;
  line-height: 1.7;
}


/* ----------------------------------------------------------------
   9. SECTORES: grid de tarjetas
---------------------------------------------------------------- */

.sectores {
  position: relative;
  z-index: 2;
  /* Tarjetas montadas sobre el borde inferior del hero.
     En vw para que el solapamiento baje en pantallas chicas. */
  margin-top: -5vw;
  padding: 0 var(--space-sm) var(--space-lg);
  display: flex;
  justify-content: center;
}

/* Encabezado lateral oculto */
.sectores-header {
  display: none;
}

/* Columnas fijas por breakpoint (4 / 2 / 1). Con auto-fit saltaba
   de 3 a 4 columnas en anchos de portátil. */
.sectores-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 1.5vw, 2rem);
  /* En % y sin max-width: misma proporción en cualquier pantalla */
  width: 82%;
  margin: 0 auto;
}

/* ---- 9a. Tarjeta: imagen arriba, contenido abajo --------------
   Sin alto fijo. La imagen va con aspect-ratio y el texto con vw,
   así mantiene la proporción en cualquier ancho. */
.sector-card {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  cursor: pointer;
  width: 100%;
  outline: none;
  background: #ffffff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.sector-card:hover,
.sector-card:focus-visible {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22);
}

/* Imagen 3:2 respecto al ancho de la columna */
.sector-card__img {
  position: relative;
  aspect-ratio: 3 / 2;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
}

.sector-card:hover .sector-card__img {
  transform: scale(1.04);
}

/* Sin overlay */
.sector-card__overlay { display: none; }

/* Contenido de texto */
.sector-card__body {
  flex: 1;
  /* max() y no clamp(): piso para móvil pero sin techo */
  padding: max(0.9rem, 0.95vw) max(0.9rem, 0.95vw) max(0.7rem, 0.75vw);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0.4rem;
  background: #ffffff;
}

/* Ícono oculto */
.sector-card__icon { display: none; }

/* Título */
.sector-card__title {
  font-size: max(0.9rem, 1vw);
  font-weight: 800;
  line-height: 1.2;
  color: #1a1a1a;
}

/* Separador */
.sector-card__body::after { display: none; }

/* Descripción. Sin max-height: con tope fijo se cortaba el texto
   en tarjetas angostas */
.sector-card__desc {
  font-size: max(0.72rem, 0.72vw);
  line-height: 1.6;
  color: #666;
  opacity: 1;
  order: 2;
  transition: none;
}

/* Enlace */
.sector-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: max(0.72rem, 0.72vw);
  font-weight: 700;
  color: var(--color-primary);
  margin-top: auto;
  transition: gap var(--transition-fast);
}

.sector-card:hover .sector-card__link {
  gap: 0.5rem;
}


/* ---- 9b. Responsive ----------------------------------------- */

@media (max-width: 1024px) {
  .sectores-header {
    text-align: left;
  }
}

/* Menos de 900px: 2 columnas, con 4 el texto queda muy apretado */
@media (max-width: 900px) {
  .sectores-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 1 columna en móvil */
@media (max-width: 600px) {
  .sectores {
    padding: var(--space-lg) var(--space-sm);
  }
  .sectores-grid {
    grid-template-columns: 1fr;
  }

}


/* ----------------------------------------------------------------
   10. QUIÉNES SOMOS
---------------------------------------------------------------- */

#nosotros {
  background: var(--color-bg);
  width: 100%;
  position: relative;
  z-index: 2;
  min-height: unset;
  margin-top: -2px;   /* Elimina cualquier gap entre secciones */
}

.quienes-somos {
  display: grid;
  grid-template-columns: 0.6fr 1fr;   /* Imagen | Texto */
  gap: var(--space-xl);
  align-items: center;
  padding: calc(var(--space-xl) + 3rem) var(--space-xl) var(--space-xl);
  background: linear-gradient(135deg, #eef5ee 0%, #f4f7f4 60%);
  border-radius: 2rem;
  margin: 0 var(--space-sm);
  position: relative;
  overflow: hidden;
}

/* Círculo decorativo verde en esquina superior izquierda */
.quienes-somos::before {
  content: '';
  position: absolute;
  top: -80px;
  left: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(92,189,42,0.12) 0%, transparent 70%);
  pointer-events: none;
}

/* Línea verde decorativa izquierda del texto */
.quienes-somos .qs-contenido {
  border-left: 4px solid var(--color-primary-light);
  padding-left: var(--space-md);
}

/* ---- 10a. Imagen -------------------------------------------- */
.qs-imagen {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

/* Borde decorativo verde desplazado */
.qs-imagen::before {
  content: '';
  position: absolute;
  inset: -8px -8px 8px 8px;
  border-radius: 1.5rem;
  border: 3px solid var(--color-primary-light);
  z-index: -1;
  opacity: 0.5;
}

.qs-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.qs-imagen:hover img {
  transform: scale(1.03);
}

/* ---- 10b. Contenido ----------------------------------------- */
.qs-contenido {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.qs-texto {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.75;
}

/* ---- 10c. Stats --------------------------------------------- */
.qs-stats {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  padding: var(--space-md) 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  margin: var(--space-xs) 0;
  flex-wrap: wrap;
}

.qs-cert-logos {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding-left: 1.5rem;
  border-left: 1px solid rgba(0,0,0,0.08);
}

.qs-cert-logos img {
  height: 52px;
  width: auto;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.2s;
}

.qs-cert-logos img:hover { opacity: 1; }

.qs-stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.stat-numero {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}

.stat-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Botón a ancho automático */
.qs-contenido .btn {
  align-self: flex-start;
}

/* ---- 10d. Visión: misma estructura invertida (texto | imagen) */
.vision {
  display: grid;
  grid-template-columns: 1fr 0.7fr;
  gap: var(--space-xl);
  align-items: center;
  padding: var(--space-xl) var(--space-xl);
  background: linear-gradient(135deg, #eef5ee 0%, #f4f7f4 60%);
  border-radius: 2rem;
  margin: 0 var(--space-sm) var(--space-xl);
  position: relative;
  overflow: hidden;
}

/* Círculo decorativo verde en esquina superior derecha */
.vision::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(92,189,42,0.12) 0%, transparent 70%);
  pointer-events: none;
}

/* Línea verde decorativa izquierda del texto */
.vision .qs-contenido {
  border-left: 4px solid var(--color-primary-light);
  padding-left: var(--space-md);
}


/* ---- 10e. Responsive ---------------------------------------- */
@media (max-width: 900px) {
  .quienes-somos,
  .vision {
    grid-template-columns: 1fr;
    padding: var(--space-lg) var(--space-sm);
  }

  /* En móvil la imagen de visión va arriba del texto */
  .vision .qs-imagen { order: -1; }
}


/* ----------------------------------------------------------------
   11. CALL TO ACTION BANNER
---------------------------------------------------------------- */

.cta-banner {
  position: relative;
  overflow: hidden;
  padding: calc(var(--space-xl) + 1rem) var(--space-lg);
  margin: var(--space-lg) 0 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.cta-contenido {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  max-width: 960px;
}

.cta-titulo {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}

.cta-titulo em {
  font-style: italic;
  color: var(--color-primary);
}

.cta-subtitulo {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: 1.7;
}

.cta-acciones {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-xs);
}

.btn-outline-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--color-text);
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: var(--navbar-radius);
  padding: 0.75rem 2rem;
  font-family: var(--font-base);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
}

.btn-outline-dark:hover {
  border-color: var(--color-text);
  background: rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

@media (max-width: 600px) {
  .cta-banner {
    margin: var(--space-sm);
    padding: var(--space-lg) var(--space-sm);
    border-radius: 1.25rem;
  }
}


/* ----------------------------------------------------------------
   12. FOOTER
---------------------------------------------------------------- */

.footer {
  background: #000000;
  color: rgba(255, 255, 255, 0.75);
  padding-top: 2.5rem;
  position: relative;
  overflow: hidden;
}

/* Fade que sube desde el footer hacia el CTA */
.footer::before {
  content: '';
  position: absolute;
  top: -120px;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, var(--color-bg), #000000);
  pointer-events: none;
  z-index: 0;
}

/* Halo verde decorativo arriba a la derecha */
.footer::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(92, 189, 42, 0.1) 0%, transparent 65%);
  pointer-events: none;
}

/* ---- Cuerpo: grid de 4 columnas ---------------------------- */
.footer-body {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-xl);
  padding: 0 var(--space-xl) 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---- Columna marca ----------------------------------------- */
.footer-logo img {
  height: 52px;
  width: auto;
  object-fit: contain;
  margin-bottom: var(--space-sm);
}

.footer-desc {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: var(--space-md);
  max-width: 260px;
}

.footer-social {
  display: flex;
  gap: 0.6rem;
}

.social-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.social-btn svg { width: 15px; height: 15px; }

.social-btn:hover {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
}

/* ---- Columnas de enlaces ----------------------------------- */
.footer-col__title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary-light);
  margin-bottom: var(--space-md);
}

.footer-col__links {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer-col__links a {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
  transition: color var(--transition-fast), padding-left var(--transition-fast);
  display: inline-block;
}

.footer-col__links a:hover {
  color: #ffffff;
  padding-left: 4px;
}

/* ---- Columna contacto -------------------------------------- */
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
}

.footer-contact svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-primary-light);
}

.footer-contact a { color: rgba(255, 255, 255, 0.85); transition: color var(--transition-fast); }
.footer-contact a:hover { color: var(--color-primary-light); }

/* ---- Botón "Ventas por línea de producto" ------------------ */
.footer-ventas-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.65rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.footer-ventas-btn:hover { background: var(--color-primary); border-color: var(--color-primary); }
.footer-ventas-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ---- Modal: ventas por línea de producto -------------------- */
.ventas-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  padding: 20px;
}
.ventas-modal-backdrop.open { display: flex; }

.ventas-modal {
  background: #fff;
  border-radius: 1rem;
  width: 100%;
  max-width: 420px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}
.ventas-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid #eee;
  font-weight: 800;
  color: #1a1a1a;
  font-size: 0.95rem;
}
.ventas-modal__close {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none;
  background: #f2f2f2;
  color: #1a1a1a;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast);
}
.ventas-modal__close:hover { background: #e5e5e5; }
.ventas-modal__body { padding: 0.6rem 1.4rem 1.4rem; }

.ventas-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid #f0ede8;
}
.ventas-item:last-child { border-bottom: none; }
.ventas-item__label { font-size: 0.85rem; font-weight: 700; color: #1a1a1a; }
.ventas-item__contact { font-size: 0.82rem; color: #666; }
.ventas-item__contact a { color: var(--color-primary); }

/* ---- Barra inferior --------------------------------------- */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-xl);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  flex-wrap: wrap;
  gap: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---- Botón flotante WhatsApp ------------------------------ */
.whatsapp-fab {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  z-index: 999;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25d366;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.whatsapp-fab svg { width: 26px; height: 26px; }

.whatsapp-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(37, 211, 102, 0.55);
}

/* ---- Responsive ------------------------------------------- */
@media (max-width: 900px) {
  .footer-body {
    grid-template-columns: 1fr 1fr;
    padding: 0 var(--space-lg) var(--space-lg);
  }
}

@media (max-width: 500px) {
  .footer-body { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
}


/* ----------------------------------------------------------------
   13. PLACEHOLDERS TEMPORALES
---------------------------------------------------------------- */
---------------------------------------------------------------- */
main section {
  min-height: 100vh;
}


#sectores {
  min-height: unset;
  position: relative;
  z-index: 1;
  background: var(--color-bg);
  overflow: hidden;
}

#productos { background: #fef9e8; }
#blog      { background: #f5e8fe; }

/* ================================================================
   SECTORES - grid de tarjetas (reemplaza pinwheel)
================================================================ */
.sectores-grid-section {
  background: #1a1a1a;
  padding: 6rem 5rem;
}

.sgs-header {
  text-align: center;
  margin-bottom: 3rem;
}

.sgs-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 0.75rem;
}
.sgs-label::before, .sgs-label::after {
  content: '';
  width: 20px; height: 1px;
  background: rgba(255,255,255,0.2);
}

.sgs-title {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}

.sgs-sub {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.45);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.7;
}

.sgs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.sgs-card {
  position: relative;
  height: 420px;
  border-radius: 1.25rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
  cursor: pointer;
}

.sgs-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
  background-color: #2a2a2a;
}

.sgs-card:hover .sgs-card__bg {
  transform: scale(1.06);
}

.sgs-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 55%, rgba(0,0,0,0.05) 100%);
  transition: background 0.3s ease;
}

.sgs-card:hover .sgs-card__overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.1) 100%);
}

.sgs-card__body {
  position: relative;
  z-index: 2;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sgs-card__num {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  opacity: 0.8;
}

.sgs-card__chip {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
}

.sgs-card__title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.sgs-card__desc {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.sgs-card:hover .sgs-card__desc {
  max-height: 80px;
  opacity: 1;
}

.sgs-card__link {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  transition: color 0.2s, letter-spacing 0.2s;
}

.sgs-card:hover .sgs-card__link {
  color: #fff;
  letter-spacing: 0.02em;
}

@media (max-width: 1100px) {
  .sectores-grid-section { padding: 5rem 3rem; }
  .sgs-grid { grid-template-columns: repeat(2, 1fr); }
  .sgs-card { height: 360px; }
}
@media (max-width: 600px) {
  .sectores-grid-section { padding: 4rem 1.5rem; }
  .sgs-grid { grid-template-columns: 1fr; }
  .sgs-card { height: 300px; }
  .sgs-card__desc { max-height: 80px; opacity: 1; }
}

/* ================================================================
   DIFERENCIADORES - estilos globales (sectores e inicio)
================================================================ */
.diff {
  background: #fff;
  padding: 5rem 10rem;
  text-align: center;
}
.diff--home {
  background: #f5f4ef;
}
.diff__label {
  display: none;
}
.diff__title {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1.12;
  margin-bottom: 1rem;
}
.diff__sub {
  font-size: 0.95rem;
  color: #666;
  line-height: 1.7;
  max-width: 640px;
  margin: 0 auto 4rem;
}
.diff__layout {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: center;
}
.diff__col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.diff-card {
  background: #f5f4ef;
  border-radius: 1.25rem;
  padding: 1.75rem 1.5rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: transform 0.2s, box-shadow 0.2s;
}
.diff-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.diff-card--link {
  text-decoration: none;
  cursor: pointer;
}
.diff-card__num {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}
.diff-card__title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1.25;
}
.diff-card__text {
  font-size: 0.78rem;
  color: #777;
  line-height: 1.65;
}
/* Diagrama circular */
.diff__circle-wrap {
  position: relative;
  width: 420px;
  height: 420px;
  flex-shrink: 0;
}
.diff__circle-wrap::before {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1.5px dashed rgba(0,0,0,0.1);
  animation: spin-slow 30s linear infinite;
}
@keyframes spin-slow { to { transform: rotate(360deg); } }
.diff__donut {
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 48px rgba(0,0,0,0.12);
  position: relative;
}
.diff__donut--home { background: #108643; }
.diff__donut::before {
  content: '';
  position: absolute;
  inset: 38px;
  border-radius: 50%;
  background: #fff;
}
.diff__donut-inner {
  position: relative;
  z-index: 1;
  width: 176px;
  height: 176px;
  border-radius: 50%;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2), inset 0 2px 4px rgba(255,255,255,0.3);
}
.diff__donut-inner--home { background: #108643; }
.diff__donut-inner svg {
  width: 52px;
  height: 52px;
  color: #fff;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.diff__node {
  position: absolute;
  z-index: 2;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  transition: transform 0.2s, box-shadow 0.2s;
}
.diff--home .diff__node { color: #108643; }
.diff__node:hover { box-shadow: 0 10px 28px rgba(0,0,0,0.2); }
.diff__node svg { width: 26px; height: 26px; }
.diff__node--top    { top: -32px;  left: 50%; transform: translateX(-50%); }
.diff__node--right  { right: -32px; top: 50%; transform: translateY(-50%); }
.diff__node--bottom { bottom: -32px; left: 50%; transform: translateX(-50%); }
.diff__node--left   { left: -32px;  top: 50%; transform: translateY(-50%); }
.diff__node--top:hover    { transform: translateX(-50%) scale(1.15); }
.diff__node--right:hover  { transform: translateY(-50%) scale(1.15); }
.diff__node--bottom:hover { transform: translateX(-50%) scale(1.15); }
.diff__node--left:hover   { transform: translateY(-50%) scale(1.15); }

/* Variante diagonal (home): cada icono a la altura de su tarjeta */
.diff__node--top-left     { top: 18%;    left: -28px; }
.diff__node--bottom-left  { bottom: 18%; left: -28px; }
.diff__node--top-right    { top: 18%;    right: -28px; }
.diff__node--bottom-right { bottom: 18%; right: -28px; }
.diff__node--top-left:hover,
.diff__node--bottom-left:hover,
.diff__node--top-right:hover,
.diff__node--bottom-right:hover { transform: scale(1.15); }
@media (max-width: 1100px) {
  .diff { padding: 5rem 4rem; }
  .diff__layout { grid-template-columns: 1fr; }
  .diff__circle-wrap { margin: 0 auto; }
}
@media (max-width: 600px) {
  .diff { padding: 4rem 1.5rem; }

  /* El diagrama mide 420px y en móvil se sale de la pantalla, lo escalamos */
  .diff__circle-wrap { width: 280px; height: 280px; }
  .diff__donut        { width: 280px; height: 280px; }
  .diff__donut::before { inset: 25px; }
  .diff__donut-inner   { width: 118px; height: 118px; }
  .diff__donut-inner svg { width: 35px; height: 35px; }
  .diff__node          { width: 44px; height: 44px; }
  .diff__node svg      { width: 18px; height: 18px; }
  .diff__node--top-left,
  .diff__node--bottom-left  { left: -14px; }
  .diff__node--top-right,
  .diff__node--bottom-right { right: -14px; }
}

/* ================================================================
   SECTORES - pinwheel interactivo (legacy)
================================================================ */
.sectores-wheel {
  background: #f5f4ef;
  padding: 6rem 4rem;
}

.sectores-header {
  text-align: center;
  margin-bottom: 3rem;
}

.sectores-header__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.sectores-header__title {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 0.75rem;
}

.sectores-header__sub {
  font-size: 0.95rem;
  color: #666;
  line-height: 1.7;
  max-width: 540px;
  margin: 0 auto;
}

/* Layout: label | svg | label en grid 3 columnas x 2 filas */
.wheel-layout {
  display: grid;
  grid-template-columns: 1fr 480px 1fr;
  grid-template-rows: 1fr 1fr;
  max-width: 1000px;
  margin: 0 auto;
  align-items: center;
}

.wlabel--tl  { grid-column: 1; grid-row: 1; text-align: right; padding-right: 2.5rem; }
.wlabel--tr  { grid-column: 3; grid-row: 1; text-align: left;  padding-left: 2.5rem; }
.wheel-center{ grid-column: 2; grid-row: 1 / 3; }
.wlabel--bl  { grid-column: 1; grid-row: 2; text-align: right; padding-right: 2.5rem; }
.wlabel--br  { grid-column: 3; grid-row: 2; text-align: left;  padding-left: 2.5rem; }

/* Etiquetas */
.wlabel {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem;
  border-radius: 1rem;
  transition: background 0.2s;
}
.wlabel:hover { background: rgba(0,0,0,0.04); }

.wlabel__num {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  display: block;
}
.wlabel__num em {
  font-style: normal;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #bbb;
  vertical-align: middle;
  margin-left: 0.3rem;
}

.wlabel__title {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.3;
}

.wlabel__desc {
  display: block;
  font-size: 0.78rem;
  color: #888;
  line-height: 1.55;
}

/* SVG */
.wheel-center { position: relative; }
.wheel-svg    { width: 100%; height: auto; display: block; }

/* Pétalos hover */
.wpetal {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
a:hover > .wpetal {
  transform: scale(1.05);
  opacity: 0.92;
}

/* Círculos de ícono hover */
.wicon-ring {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.2s ease;
}
a:hover > .wicon-ring { transform: scale(1.12); }

/* Responsive */
@media (max-width: 1100px) {
  .wheel-layout { grid-template-columns: 1fr 380px 1fr; }
}
@media (max-width: 860px) {
  .wheel-layout {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }
  .wlabel--tl  { grid-column: 1; grid-row: 1; text-align: left; padding-right: 0; padding-bottom: 0; }
  .wlabel--tr  { grid-column: 2; grid-row: 1; text-align: left; padding-left: 1rem; }
  .wheel-center{ grid-column: 1 / 3; grid-row: 2; }
  .wlabel--bl  { grid-column: 1; grid-row: 3; text-align: left; padding-right: 0; }
  .wlabel--br  { grid-column: 2; grid-row: 3; text-align: left; padding-left: 1rem; }
}
@media (max-width: 520px) {
  .sectores-wheel { padding: 4rem 1.25rem; }
  .wheel-layout { grid-template-columns: 1fr; }
  .wlabel--tl,.wlabel--tr,.wlabel--bl,.wlabel--br { grid-column: 1; text-align: left; padding: 0.5rem 0; }
  .wlabel--tl { grid-row: 1; }
  .wlabel--tr { grid-row: 2; }
  .wheel-center { grid-column: 1; grid-row: 3; }
  .wlabel--bl { grid-row: 4; }
  .wlabel--br { grid-row: 5; }
}