/* =============================================================
   LP PARQUES · OVERRIDES
   La landing consume el mismo sistema de diseno que integer.mx:
     /shared/tokens.css  +  /shared/base.css
     /shared/components.css  +  /site.css
   Este archivo solo contiene lo especifico de la landing que el
   sitio no necesita. Todo lo demas se hereda de site.css, asi que
   cualquier cambio de diseno en el sitio se refleja aqui.
   ============================================================= */

/* ---------- HEADER · nav de anclas (el sitio usa nav de paginas) ---------- */
.site .site-header__nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -6px;
  height: 2px;
  background: var(--orange);
  transition: right var(--duration) var(--ease-out);
}
.site .site-header__nav a:hover { color: var(--ink); }
.site .site-header__nav a:hover::after { right: 0; }

.site .header-phone { display: none; }
@media (min-width: 1024px) {
  .site .header-phone { display: inline-flex; }
}

/* ---------- INDUSTRIAS · glow al hover ---------- */
.site .industry::before {
  content: '';
  position: absolute;
  bottom: -50%;
  right: -30%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(229, 80, 48, 0.18), transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration) var(--ease-out);
}
.site .industry:hover::before { opacity: 1; }

/* ---------- HERO STATS · la LP tiene 4, el sitio 3 ---------- */
.site .hero__stats { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .site .hero__stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .site .hero__stats { grid-template-columns: 1fr; }
}

/* ---------- HEADER · dropdown de telefonos (Comercial / RH) ---------- */
.site .header-phone-drop { display: none; }
@media (min-width: 1280px) {
  .site .header-phone-drop { display: inline-flex; }
}
.site .nav-drop__menu--phones { min-width: 240px; }
.site .phone-opt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: var(--r-leve);
}
.site .phone-opt:hover { background: var(--gray-50); }
.site .phone-opt__area {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.site .phone-opt:hover .phone-opt__area { color: var(--orange); }
.site .phone-opt__num {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* ---------- MODAL · dos areas de contacto (Comercial / RH) ---------- */
.site .contact-areas {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 560px) {
  .site .contact-areas { grid-template-columns: 1fr 1fr; }
}
.site .contact-area {
  border: 1px solid var(--line);
  border-radius: var(--r-leve);
  padding: var(--space-4);
  background: var(--bg);
}
.site .contact-area__title {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 var(--space-3);
}
.site .contact-area__links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.site .contact-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 8px;
  border-radius: var(--r-leve);
  transition: background var(--duration) var(--ease-out);
}
.site .contact-line:hover { background: var(--gray-50); }
.site .contact-line__icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-leve);
  background: var(--gray-100);
  color: var(--ink-soft);
}
.site .contact-line__icon svg { width: 17px; height: 17px; }
.site .contact-line--whatsapp:hover .contact-line__icon { background: var(--whatsapp); color: #fff; }
.site .contact-line--phone:hover .contact-line__icon,
.site .contact-line--mail:hover .contact-line__icon { background: var(--orange); color: #fff; }
.site .contact-line__text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.site .contact-line__label {
  font-size: 0.6875rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.site .contact-line__value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* dropdown de telefonos: abierto por tap/teclado */
.site .header-phone-drop.is-open .nav-drop__menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}