/**
 * PUBLIKATE.CL - SISTEMA DE DISEÑO HÍBRIDO LUX (Alternativa A)
 * Arquitectura: CSS3 Puro / Variables Nativas / Aceleración GPU
 * Estética: Hero Midnight Navy (#090d16) + Cuerpo Clean Slate (#f8fafc / #ffffff) + Footer Midnight (#0b101d)
 */

:root {
  /* Lienzo y Superficies Corporativas (Clean Slate) */
  --color-bg-base: #f8fafc;
  --color-bg-surface: #ffffff;
  --color-bg-surface-subtle: #f1f5f9;
  --color-bg-surface-muted: #e2e8f0;
  --color-border-subtle: #e2e8f0;
  --color-border-hover: #cbd5e1;
  --color-border-focus: #dc2626;

  /* Tipografía Corporativa de Alto Contraste */
  --color-text-primary: #0f172a;
  /* Slate 900 */
  --color-text-secondary: #334155;
  /* Slate 700 */
  --color-text-muted: #64748b;
  /* Slate 500 */
  --color-text-light: #94a3b8;
  /* Slate 400 */

  /* Paleta de Acentos de Precisión */
  --color-accent-red: #dc2626;
  --color-accent-red-hover: #b91c1c;
  --color-accent-cyan: #0284c7;
  --color-accent-emerald: #059669;
  --color-accent-amber: #d97706;
  --color-accent-purple: #7c3aed;

  /* Entorno Hero y Footer (Midnight Navy Institucional) */
  --color-midnight-base: #090d16;
  --color-midnight-surface: #0f172a;
  --color-midnight-border: rgba(255, 255, 255, 0.08);

  /* Variables base cascada publikate.min.css */
  --bg-page: #f8fafc;
  --bg-surface: #ffffff;
  --bg-subtle: #f1f5f9;
  --bg-muted: #e2e8f0;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --text-light: #94a3b8;
  --border-subtle: #e2e8f0;
  --border-hover: #cbd5e1;
}

/* ========================================================
   CANVAS GLOBAL Y TIPOGRAFÍA BASE
   ======================================================== */
body {
  background-color: var(--color-bg-base);
  color: var(--color-text-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========================================================
   CABECERA Y HERO INSTITUCIONAL (MIDNIGHT NAVY)
   ======================================================== */
.site-header {
  background: rgba(9, 13, 22, 0.92) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid var(--color-midnight-border) !important;
}

.hero-lux,
.hero-section {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background: radial-gradient(circle at 14% 25%, rgba(37, 99, 235, 0.38) 0%, transparent 45%),
    radial-gradient(circle at 86% 75%, rgba(220, 38, 38, 0.22) 0%, transparent 40%),
    linear-gradient(180deg, #0d1527 0%, #090e1a 60%, #070a14 100%);
  border-bottom: 1px solid rgba(56, 189, 248, 0.18);
  color: #ffffff;
}

/* Pliegue Superior del Hero: 100% Viewport Height */
.site-main > .hero-lux:first-of-type,
.site-main > .hero-section:first-of-type,
.site-main > section:first-of-type.hero-lux,
.site-main > section:first-of-type.hero-section,
.hero-fold {
  min-height: calc(100vh - 107px);
  min-height: calc(100dvh - 107px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 768px) {
  .site-main > .hero-lux:first-of-type,
  .site-main > .hero-section:first-of-type,
  .site-main > section:first-of-type.hero-lux,
  .site-main > section:first-of-type.hero-section,
  .hero-fold {
    min-height: auto;
    padding-top: 4.5rem !important;
    padding-bottom: 3.5rem !important;
  }
}

.hero-lux h1,
.hero-section h1,
.hero-title {
  color: #ffffff !important;
}

.hero-lux p,
.hero-section p,
.hero-description {
  color: #cbd5e1 !important;
}

.hero-code-theme {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero-code-theme::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -30%;
  background-image: url('../img/hero-code-pattern.svg');
  background-repeat: repeat;
  background-size: 700px auto;
  transform: rotate(-36deg);
  transform-origin: center center;
  opacity: 0.32;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(120deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.65) 50%, rgba(0, 0, 0, 0.20) 100%);
  mask-image: linear-gradient(120deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.65) 50%, rgba(0, 0, 0, 0.20) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Tarjetas dentro de cabeceras Hero oscuras */
.hero-lux .card-precision,
.hero-section .card-precision {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  color: #ffffff;
}

.hero-lux .card-precision .card-precision-title,
.hero-section .card-precision .card-precision-title {
  color: #ffffff;
}

.hero-lux .card-precision .card-precision-body,
.hero-section .card-precision .card-precision-body {
  color: #cbd5e1;
}

/* ========================================================
   SECCIONES DEL CUERPO (CLEAN SLATE)
   ======================================================== */
.section-clean-canvas {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg-base);
  border-bottom: 1px solid var(--color-border-subtle);
  padding: 5rem 0;
}

.section-clean-white {
  position: relative;
  overflow: hidden;
  background-color: #ffffff;
  border-bottom: 1px solid var(--color-border-subtle);
  padding: 5rem 0;
}

.section-clean-slate {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg-surface-subtle);
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  padding: 5rem 0;
}

/* Compatibilidad para páginas existentes */
.section-lux-dark {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg-base);
  border-bottom: 1px solid var(--color-border-subtle);
}

.section-lux-slate {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg-surface-subtle);
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* ========================================================
   FONDOS VECTORIALES ULTRA-TRANSPARENTES (100% VIEWPORT)
   ======================================================== */
.ley-21719-section {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background-color: var(--color-bg-base, #f8fafc);
  background-image: url('/assets/img/ley-21719-bg.svg');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
}

.services-section-bg {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background-color: var(--color-bg-surface-subtle, #f1f5f9);
  background-image: url('/assets/img/services-tech-bg.svg');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
}

.contact-section-bg,
section#formulario-evaluacion {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background-color: var(--color-bg-base, #f8fafc);
  background-image: url('/assets/img/contact-circuit-bg.svg');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Texturas Vectoriales Sutiles para Fondos Claros (100% Viewport Width) */
.pattern-overlay-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.12;
  background-image: url('/assets/img/tech-grid-pattern.svg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

div.pattern-overlay-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.12;
  background-image: url('/assets/img/tech-grid-pattern.svg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

div.pattern-overlay-grid::before {
  display: none !important;
}

.pattern-overlay-waves::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.12;
  background-image: url('/assets/img/data-waves-pattern.svg');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}

div.pattern-overlay-waves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.12;
  background-image: url('/assets/img/data-waves-pattern.svg');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
}

div.pattern-overlay-waves::before {
  display: none !important;
}

/* ========================================================
   TARJETAS MONOLITO DE PRECISIÓN (PURE WHITE CARDS)
   ======================================================== */
.card-precision,
.card-lux {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.04), 0 10px 15px -3px rgba(15, 23, 42, 0.03);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}

.card-precision:hover,
.card-lux:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-hover);
  box-shadow: 0 12px 24px -4px rgba(15, 23, 42, 0.08);
}

.card-precision-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
}

.card-precision-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.card-precision-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

.card-precision-index {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-light);
  letter-spacing: 0.06em;
}

.card-precision-body {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: 0.85rem;
  padding-left: 0.85rem;
}

.card-precision-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 0.85rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-weight: 500;
  border-top: 1px solid var(--color-bg-surface-subtle);
  padding-top: 0.65rem;
}

.card-precision-legal {
  color: var(--color-text-primary);
  font-weight: 600;
}

.card-precision h2,
.card-precision h3,
.card-precision h4,
.card-lux h2,
.card-lux h3,
.card-lux h4 {
  color: var(--color-text-primary, #0f172a) !important;
}

.card-precision p,
.card-precision li,
.card-lux p,
.card-lux li {
  color: var(--color-text-secondary, #334155) !important;
}

.card-precision strong,
.card-lux strong {
  color: var(--color-text-primary, #0f172a) !important;
}

.section-clean-canvas h2,
.section-clean-white h2,
.section-clean-slate h2,
.section-lux-dark h2,
.section-lux-slate h2 {
  color: var(--color-text-primary, #0f172a) !important;
}

.section-clean-canvas p,
.section-clean-white p,
.section-clean-slate p,
.section-lux-dark p,
.section-lux-slate p {
  color: var(--color-text-secondary, #334155);
}

/* Excepción: Tarjetas en el Hero Oscuro Superior */
.hero-lux .card-precision,
.hero-lux .card-lux {
  background: rgba(15, 23, 42, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.hero-lux .card-precision h2,
.hero-lux .card-precision h3,
.hero-lux .card-precision h4,
.hero-lux .card-precision div {
  color: #ffffff !important;
}

.hero-lux .card-precision p,
.hero-lux .card-precision li {
  color: #cbd5e1 !important;
}

/* Formularios en Lienzo Limpio */
.card-precision select,
.card-precision input[type="text"],
.card-precision input[type="email"],
.card-precision input[type="tel"],
.card-precision input[type="number"],
.card-precision textarea {
  background-color: #ffffff !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border-subtle) !important;
  border-radius: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.card-precision select:focus,
.card-precision input:focus,
.card-precision textarea:focus {
  border-color: var(--color-accent-red) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
  outline: none;
}

.hero-lux .card-precision select,
.hero-lux .card-precision input,
.hero-lux .card-precision textarea,
.hero-section .card-precision select,
.hero-section .card-precision input,
.hero-section .card-precision textarea {
  background-color: #0b0f19 !important;
  color: #ffffff !important;
  border: 1px solid #1e293b !important;
}

/* Indicadores Verticales de Categoría */
.precision-indicator {
  width: 3.5px;
  height: 16px;
  border-radius: 2px;
  flex-shrink: 0;
}

.precision-indicator-cyan {
  background: var(--color-accent-cyan);
}

.precision-indicator-emerald {
  background: var(--color-accent-emerald);
}

.precision-indicator-purple {
  background: var(--color-accent-purple);
}

.precision-indicator-amber {
  background: var(--color-accent-amber);
}

.precision-indicator-red {
  background: var(--color-accent-red);
}

/* ========================================================
   TARJETAS DE SERVICIOS Y DIFERENCIADORES
   ======================================================== */
.service-card-lux {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 14px;
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.04), 0 10px 15px -3px rgba(15, 23, 42, 0.03);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}

.service-card-lux:hover {
  transform: translateY(-4px);
  border-color: var(--color-border-hover);
  box-shadow: 0 16px 32px -4px rgba(15, 23, 42, 0.09);
}

.service-card-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--color-text-primary);
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
  min-height: 3.4rem;
  display: flex;
  align-items: flex-start;
  line-height: 1.3;
}

.service-card-desc {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  min-height: 4.8rem;
}

.service-card-benefits {
  border-top: 1px solid var(--color-bg-surface-subtle);
  padding-top: 1.25rem;
  margin-bottom: 1.75rem;
}

.service-benefits-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.75;
  min-height: 6rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.45rem;
}

.service-card-actions {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.service-card-links {
  margin-top: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-align: center;
  min-height: 3.2rem;
  justify-content: center;
}

.service-card-links a {
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-text-secondary);
  transition: color 0.2s ease;
}

.service-card-links a:hover {
  color: var(--color-text-primary);
  text-decoration: underline;
}

.diff-card-lux,
.case-card-lux {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 14px;
  padding: 2rem 1.75rem;
  box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.04), 0 10px 15px -3px rgba(15, 23, 42, 0.03);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.diff-card-lux:hover,
.case-card-lux:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-hover);
  box-shadow: 0 14px 28px -4px rgba(15, 23, 42, 0.08);
}

.diff-card-lux h3,
.case-card-lux h3 {
  color: var(--color-text-primary);
}

.diff-card-lux p,
.case-card-lux p {
  color: var(--color-text-secondary);
}

/* Módulos Semánticos Biselados */
.semantic-tile {
  background: #ffffff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 10px;
  padding: 1.25rem;
  text-decoration: none;
  display: block;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.03);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.semantic-tile:hover {
  transform: translateY(-2px);
  border-color: #38bdf8 !important;
  background: #f0f9ff !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.semantic-tile-title {
  color: var(--color-text-primary);
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.35rem;
}

.semantic-tile-desc {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  padding-left: 0.85rem;
}

/* ========================================================
   BADGES Y PILLS LUMINOSOS
   ======================================================== */
.badge-lux {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding: 0.35rem 1rem;
  margin-bottom: 1.25rem;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.badge-lux-cyan {
  background: rgba(2, 132, 199, 0.1);
  border: 1px solid rgba(2, 132, 199, 0.3);
  color: var(--color-accent-cyan);
}

.badge-lux-red {
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.3);
  color: var(--color-accent-red);
}

.badge-lux-amber {
  background: rgba(217, 119, 6, 0.1);
  border: 1px solid rgba(217, 119, 6, 0.3);
  color: var(--color-accent-amber);
}

.badge-lux-emerald {
  background: rgba(5, 150, 105, 0.1);
  border: 1px solid rgba(5, 150, 105, 0.3);
  color: var(--color-accent-emerald);
}

.status-dot-glow {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px currentColor;
}

/* ========================================================
   BOTONES CON RESPLANDOR (GLOW CTAs)
   ======================================================== */
.btn-lux-primary {
  background: #dc2626;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 0.85rem 1.85rem;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(220, 38, 38, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.btn-lux-primary:hover {
  background: #b91c1c;
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.45);
  transform: translateY(-1px);
}

.btn-lux-emerald {
  background: rgba(16, 185, 129, 0.15);
  color: #059669 !important;
  border: 1px solid rgba(5, 150, 105, 0.4);
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 0.85rem 1.6rem;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.12);
  transition: all 0.2s;
}

.btn-lux-emerald:hover {
  background: rgba(16, 185, 129, 0.22);
  border-color: #059669;
  transform: translateY(-1px);
}

.btn-lux-secondary {
  background: #ffffff;
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text-primary) !important;
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.85rem 1.6rem;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  transition: all 0.2s;
}

.btn-lux-secondary:hover {
  border-color: var(--color-border-hover);
  background: var(--color-bg-surface-subtle);
  transform: translateY(-1px);
}

/* ========================================================
   CONTENEDOR DE FORMULARIOS CORPORATIVOS
   ======================================================== */
.glass-panel-lux {
  background: #ffffff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 18px;
  padding: 2.75rem 2.25rem;
  box-shadow: 0 20px 40px -8px rgba(15, 23, 42, 0.08);
}

.form-lux-input,
.form-lux-select,
.form-lux-textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  color: var(--color-text-primary);
  font-size: 0.875rem;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.form-lux-input:focus,
.form-lux-select:focus,
.form-lux-textarea:focus {
  border-color: #dc2626;
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.form-lux-input::placeholder,
.form-lux-textarea::placeholder {
  color: #94a3b8;
}

.form-lux-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.4rem;
}

/* ========================================================
   FOOTER INSTITUCIONAL (MIDNIGHT NAVY)
   ======================================================== */
.site-footer {
  background: #0b101d !important;
  border-top: 1px solid #1e293b !important;
  color: #94a3b8 !important;
}

.site-footer a {
  color: #94a3b8;
  transition: color 0.2s ease;
}

.site-footer a:hover {
  color: #ffffff;
}

/* ========================================================
   RESPONSIVIDAD Y UTILIDADES
   ======================================================= */
@media (max-width: 768px) {
  .hero-code-theme::before {
    opacity: 0.18;
    background-size: 480px auto;
  }
}