/* ==========================================================================
   Drazmol Consultores — estilos base compartidos por TODAS las páginas
   Paleta, tipografías, botones, cards y componentes reutilizables viven aquí.
   Cada página puede tener además su propio <page>.css con estilos únicos.
   ========================================================================== */

:root {
  --navy: #002858;
  --navy-light: #073B7C;
  --blue: #1088D0;
  --blue-dark: #0d70b0;
  --blue-light: #4FA3E0;
  --purple: #6A4FCF;
  --purple-dark: #5a40b8;
  --purple-bg: #F8F7FF;
  --purple-bg-2: #EDE9FF;
  --bg: #F4F8FD;
  --bg-blue-tint: #E8F0FA;
  --border: #D9DEE5;
  --border-light: #E8F0FA;
  --text: #2D3A4F;
  --text-muted: #6b7280;
  --text-faint: #9ca3af;
  --white: #ffffff;

  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Open Sans', Arial, sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 99px;

  --shadow-card: 0 4px 20px rgba(0,40,88,0.07);
  --shadow-card-hover: 0 12px 32px rgba(0,40,88,0.1);
  --nav-height: 72px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  padding-top: var(--nav-height);
}

img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button, input, textarea, select { font-family: inherit; }
button { cursor: pointer; }
::placeholder { color: var(--text-faint); }
select { appearance: none; cursor: pointer; }

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 64px;
}

@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes waPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
  transition: all 0.2s;
}
.btn-primary { background: var(--blue); color: var(--white); box-shadow: 0 4px 20px rgba(16,136,208,0.4); }
.btn-primary:hover { background: var(--blue-dark); transform: translateY(-2px); }
.btn-navy { background: var(--navy); color: var(--white); box-shadow: 0 3px 12px rgba(0,40,88,0.2); }
.btn-navy:hover { background: var(--navy-light); transform: translateY(-1px); }
.btn-purple { background: var(--purple); color: var(--white); box-shadow: 0 3px 12px rgba(106,79,207,0.3); }
.btn-purple:hover { background: var(--purple-dark); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--navy); border: 2px solid var(--navy); }
.btn-outline:hover { background: var(--navy); color: var(--white); }
.btn-outline-white { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,0.35); }
.btn-outline-white:hover { border-color: white; background: rgba(255,255,255,0.08); }
.btn-whatsapp { background: #25D366; color: var(--white); }
.btn-whatsapp:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-block { width: 100%; }

/* ---------- Badges / eyebrows ---------- */
.eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 20px;
  border-radius: var(--radius-pill);
  margin-bottom: 18px;
  background: var(--bg-blue-tint);
  color: var(--blue);
}
.eyebrow-purple { background: var(--purple-bg-2); color: var(--purple); }
.eyebrow-dark { background: transparent; border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.6); }

.badge-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  color: var(--white);
}

/* ---------- Cards reutilizables ---------- */
.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  transition: all 0.2s;
}
.card:hover { box-shadow: var(--shadow-card-hover); border-color: transparent; transform: translateY(-3px); }

.icon-tile {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--navy);
}
.icon-tile img, .icon-tile svg, .icon-tile i { width: 26px; height: 26px; color: var(--white); }

/* ---------- Encabezado de página interior (hero corto) ---------- */
.page-hero {
  background: var(--navy);
  padding: 30px 64px 64px;
  position: relative;
  overflow: hidden;
  text-align: center;
  color: var(--white);
}
.page-hero::before, .page-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--navy-light);
}
.page-hero::before { top: -80px; right: -80px; width: 440px; height: 440px; opacity: 0.5; }
.page-hero::after { bottom: -60px; left: -60px; width: 360px; height: 360px; opacity: 0.4; }
.page-hero-inner { position: relative; z-index: 1; }
.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,0.2);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 20px;
  color: rgba(255,255,255,0.6);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 0.15s;
}
.breadcrumb:hover { border-color: rgba(255,255,255,0.5); color: rgba(255,255,255,0.9); }
.page-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.page-hero p { font-size: 17px; color: rgba(255,255,255,0.68); max-width: 600px; margin: 0 auto; line-height: 1.6; }

/* ---------- Formularios ---------- */
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.field input, .field textarea, .field select {
  display: block;
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  color: var(--text);
  background: var(--white);
  outline: none;
  transition: all 0.15s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(16,136,208,0.1);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* ---------- Hero (carrusel de Inicio) ----------
   Cada slide usa una imagen de fondo de página completa (assets/hero-fondo-*.png)
   con espacio negativo a la izquierda para el texto. La altura del track es un
   clamp() fijo (no depende de 100vh), así que el bloque de texto y los botones
   siempre caen en la misma posición sin importar el tamaño de la ventana. */
#hero-track {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  /* Antes clamp(560px, 74vh, 660px) — en laptops (viewport ~650-800px de alto)
     esa altura empujaba la barra de confianza (8+ años, cumplimiento, etc.,
     justo debajo del hero) fuera de la vista sin hacer scroll. Se redujo para
     que nav + hero + esa barra quepan juntos en una laptop común. */
  min-height: clamp(380px, 52vh, 500px);
}
.hero-slide {
  position: absolute; inset: 0; display: flex; align-items: center;
  padding: 40px 64px; transition: transform .55s cubic-bezier(.22,.61,.36,1);
  background-size: cover; background-repeat: no-repeat;
  background-color: #eef3fa;
}
/* Cada slide tiene su propia composición (foto + cadena de íconos de
   instituciones + libreta de resultados), así que cada una necesita su
   propio ajuste de posición para que esa cadena de íconos quede centrada
   contra el bloque de texto — valores calibrados a ojo, uno por slide. */
.hero-slide[data-slide="0"] { background-position: right 25%; }
.hero-slide[data-slide="1"] { background-position: right 26%; background-size: 86%; }
.hero-slide[data-slide="2"] { background-position: right 15%; background-size: 90%;}
.hero-slide-inner { width: 100%; max-width: 1280px; margin: 0 auto; position: relative; z-index: 1; }
.hero-copy { max-width: 560px; }
.hero-eyebrow {
  display: inline-flex; border: 1px solid rgba(0,40,88,0.25); border-radius: 99px;
  padding: 6px 16px; margin-bottom: 14px; font-size: 12px; font-weight: 700;
  color: var(--navy); letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(255,255,255,0.65);
}
.hero-heading {
  font-family: var(--font-heading); font-weight: 900; color: var(--navy);
  line-height: 1.15; margin-bottom: 14px;
  font-size: clamp(24px, min(2.8vw, 4.8vh), 46px);
}
.hero-paragraph { font-size: 15px; color: #3d4a5c; line-height: 1.65; margin-bottom: 26px; max-width: 460px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px;
  border-radius: 50%; background: rgba(255,255,255,0.8); border: 1px solid rgba(0,40,88,0.15);
  cursor: pointer; color: var(--navy); font-size: 28px; display: flex; align-items: center;
  justify-content: center; z-index: 20; box-shadow: 0 4px 16px rgba(0,40,88,0.12); transition: background 0.2s;
}
.hero-arrow:hover { background: white; }
.hero-dots { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 20; }
.hero-dots button { height: 10px; border-radius: 99px; border: none; cursor: pointer; transition: all 0.3s ease; background: rgba(0,40,88,0.25); }

@media (max-width: 860px) {
  .hero-slide::before { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,0.86); }
  .hero-copy { max-width: 100%; }
  .hero-arrow { display: none; }
}

/* ---------- Herramientas: calculadoras y tabuladores ---------- */
.tool-disclaimer {
  display: flex; gap: 14px; align-items: flex-start; background: #FFF7ED;
  border: 1px solid #FDE4B8; border-radius: 14px; padding: 16px 20px; margin-bottom: 32px;
  font-size: 13px; color: #7c4a03; line-height: 1.6;
}
.tool-disclaimer i { flex-shrink: 0; color: #b45309; width: 18px; height: 18px; margin-top: 1px; }
.tool-disclaimer a { color: #7c4a03; text-decoration: underline; font-weight: 700; }

.tool-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 960px) { .tool-grid { grid-template-columns: 1fr; } }

.tool-card { background: white; border-radius: 20px; padding: 36px; border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.tool-card h2 { font-family: var(--font-heading); font-size: 18px; font-weight: 800; color: var(--navy); margin-bottom: 20px; }

.result-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: 14px; color: var(--text); border-bottom: 1px solid var(--border-light); }
.result-row .label { color: var(--text-muted); }
.result-row .value { font-weight: 700; color: var(--navy); white-space: nowrap; }
.result-row.negative .value { color: #b91c1c; }
.result-row.positive .value { color: #15803d; }
.result-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0 4px; margin-top: 6px; border-top: 2px solid var(--navy); font-family: var(--font-heading); font-size: 17px; font-weight: 800; color: var(--navy); }

.data-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; margin-bottom: 12px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.data-table th { background: var(--bg); color: var(--navy); font-family: var(--font-heading); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; text-align: left; padding: 12px 16px; border-bottom: 2px solid var(--border); }
.data-table td { padding: 10px 16px; border-bottom: 1px solid var(--border-light); color: var(--text); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--bg); }

.tool-nav-anchor { scroll-margin-top: 96px; }
.official-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--blue); }

/* ---------- Navegación ---------- */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: var(--navy); height: var(--nav-height);
  display: flex; align-items: center; padding: 0 40px;
  box-shadow: 0 2px 24px rgba(0,0,40,0.22);
}
.navbar .logo-box { background: white; border-radius: 8px; padding: 5px 10px; display: inline-flex; align-items: center; }
.navbar .logo-box img { height: 38px; width: auto; }
/* min-width:0 es la parte que importa: sin esto, un flex item con contenido que
   no rompe línea (los nav-btn con white-space:nowrap) nunca se encoge por debajo
   de su ancho de contenido, así que en vez de ajustarse termina empujando al
   botón CONTÁCTANOS (el último elemento) fuera de la pantalla. */
.nav-links { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.nav-btn {
  background: none; border: none; cursor: pointer; padding: 8px 12px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  border-radius: var(--radius-sm); color: rgba(255,255,255,0.8); white-space: nowrap;
  transition: all 0.2s; display: flex; align-items: center; gap: 3px;
}
.nav-btn:hover, .nav-btn.active { color: white; background: rgba(255,255,255,0.12); }
.nav-social { display: flex; gap: 6px; margin-right: 14px; padding-right: 16px; border-right: 1px solid rgba(255,255,255,0.15); flex-shrink: 0; }
.nav-social a {
  width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center; transition: all 0.2s;
}
.navbar .contact-btn { flex-shrink: 0; padding: 10px 22px; }
.nav-mobile-toggle { display: none; background: none; border: none; color: white; cursor: pointer; padding: 8px; }

/* Los mega-menús (Servicios, Herramientas) definen su propio ancho/posición
   inline en partials/nav.html, pero ninguno tenía tope de alto — en pantallas
   bajas (laptop con zoom, ventana no maximizada) el menú se salía por debajo
   del viewport sin ninguna forma de alcanzar lo que quedaba cortado. Con esto,
   el menú nunca crece más allá del espacio libre bajo el navbar y, si su
   contenido no cabe, aparece scroll DENTRO del menú (no en toda la página). */
[data-dropdown-menu] {
  max-height: calc(100vh - var(--nav-height) - 28px);
  overflow-y: auto;
}

/* Zona intermedia entre el menú móvil (860px) y el ancho que el nav completo
   necesita de verdad (~1300px con los 6 elementos + iconos + botón). Sin esto,
   pantallas de laptop comunes (1280–1366px) caen en una "zona muerta" donde el
   menú de escritorio sigue activo pero no le alcanza el espacio, y el botón
   CONTÁCTANOS se corta. Aquí solo se compacta el espaciado, no se cambia el
   diseño ni se oculta nada. */
@media (max-width: 1300px) {
  .navbar { padding: 0 24px; }
  .navbar .logo-box { padding: 4px 8px; }
  .navbar .logo-box img { height: 32px; }
  .nav-links { gap: 10px; }
  .nav-btn { padding: 8px 8px; font-size: 12px; }
  .nav-social { gap: 4px; margin-right: 10px; padding-right: 12px; }
  .nav-social a { width: 28px; height: 28px; }
  .navbar .contact-btn { padding: 9px 16px; font-size: 12px; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); padding: 64px 64px 0; color: white; }
.footer-grid { display: grid; grid-template-columns: 2fr 1.2fr 1fr 1.5fr; gap: 48px; padding-bottom: 48px; }
.footer-col-title { font-family: var(--font-heading); font-size: 11px; font-weight: 700; color: white; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 20px; }
.footer-link { background: none; border: none; cursor: pointer; font-family: var(--font-body); font-size: 13px; color: rgba(255,255,255,0.60); text-align: left; padding: 0; transition: color 0.2s; display: block; }
.footer-link:hover { color: white; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.10); padding: 20px 0; display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: rgba(255,255,255,0.35); }

/* ---------- WhatsApp flotante ---------- */
#wa-float { position: fixed; bottom: 24px; right: 24px; z-index: 999; display: flex; align-items: center; gap: 10px; }
#wa-tooltip {
  background: rgba(0,21,48,0.88); color: white; font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: 8px; white-space: nowrap; opacity: 0;
  transform: translateX(8px); transition: opacity 0.2s, transform 0.2s; pointer-events: none;
}
#wa-float:hover #wa-tooltip { opacity: 1; transform: translateX(0); }
#wa-float a.wa-btn {
  width: 56px; height: 56px; border-radius: 50%; background: #25D366; display: flex;
  align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37,211,102,0.5);
  animation: waPulse 2.5s ease-in-out infinite; flex-shrink: 0;
}

/* ---------- Utilidades ---------- */
.section { padding: 30px 64px; }
.section-white { background: var(--white); }
.section-tint { background: var(--bg); }
.text-center { text-align: center; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .container { padding: 0 32px; }
  .section { padding: 64px 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .nav-links { position: fixed; top: var(--nav-height); left: 0; right: 0; background: var(--navy); flex-direction: column; align-items: stretch; padding: 12px; gap: 4px; box-shadow: 0 12px 24px rgba(0,0,40,0.3); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: all 0.2s; max-height: calc(100vh - var(--nav-height)); overflow-y: auto; }
  .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-social { display: none; }
  .nav-mobile-toggle { display: flex; }
  .navbar { padding: 0 20px; }
  .navbar .contact-btn { display: none; }

  .hero-slide { padding: 28px 20px; }

  /* Mega-menús (Servicios, Herramientas): en escritorio flotan con ancho y
     columnas fijos definidos inline en partials/nav.html. Un estilo inline
     solo se puede vencer desde una hoja externa con !important. Aquí se
     convierten en una tarjeta de acordeón de ancho completo, en flujo normal
     dentro del propio panel móvil (no flotando encima). */
  [data-dropdown-menu] {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
    border: 1px solid var(--border-light) !important;
    margin-top: 6px;
    max-height: none;
    overflow-y: visible;
  }
  .nav-dropdown-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .nav-btn[aria-expanded="true"] { color: white; background: rgba(255,255,255,0.12); }
}

@media (max-width: 640px) {
  .container { padding: 0 20px; }
  .section { padding: 48px 20px; }
  .page-hero { padding: 56px 20px 40px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
  .field-row { grid-template-columns: 1fr; }
  /* Botón de WhatsApp más pequeño y más pegado a la esquina en móvil, para
     que estorbe menos a botones cercanos (ej. "Aplicar" en vacantes). */
  #wa-float { bottom: 16px; right: 16px; }
  #wa-float a.wa-btn { width: 48px; height: 48px; }
  #wa-float a.wa-btn svg { width: 22px; height: 22px; }
}