/* ═══════════════════════════════════════════════════════════════════════
   theme-2026.css — V3 KPMG EDITION
   Inspirado en: kpmg.com/es — corporativo, serio, confiable, estructurado
   
   KPMG Style: 
   - Fondos azul corporativo profundo (no negro)
   - Secciones grandes de color sólido alternando azul/blanco
   - Tipografía Open Sans-like limpia y seria  
   - Cards con bordes definidos, sin sombras exageradas
   - Acentos en azul eléctrico claro y dorado
   - Header transparente sobre hero, sólido al hacer scroll
   - Estilo más institucional y corporativo que V2
   
   Colores: #0A2342 navy · #071428 deep · #D4AF37 gold · #1a4a8a royal
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --np-navy: #0A2342;
  --np-navy-deep: #071428;
  --np-navy-mid: #0d2d55;
  --np-royal: #163d6e;
  --np-gold: #D4AF37;
  --np-gold-light: #f0d878;
  --np-blue-light: #e8f0fe;
  --np-cream: #f6f8fb;
  --np-white: #ffffff;
  --np-body: #3d4f5f;
  --np-heading: #0a1628;
  --np-border: #d6dfe8;
  --np-shadow: 0 2px 8px rgba(10,35,66,0.06);
  --np-shadow-hover: 0 8px 32px rgba(10,35,66,0.10);
  --section-pad: clamp(5rem, 8vw, 8rem);
  --radius: 12px;
}

/* ══════════════════════════════════════════════
   GLOBAL
   ══════════════════════════════════════════════ */

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  color: var(--np-body);
}

main > section {
  padding-top: var(--section-pad) !important;
  padding-bottom: var(--section-pad) !important;
  position: relative;
}
main > section:first-child {
  padding-top: clamp(7rem, 11vw, 11rem) !important;
  padding-bottom: clamp(5rem, 8vw, 8rem) !important;
}

/* No gold lines — KPMG uses solid color blocks, not separators */
main > section + section::before { display: none !important; }

/* ══════════════════════════════════════════════
   TYPOGRAPHY — CLEAN, CORPORATE, STRUCTURED
   ══════════════════════════════════════════════ */

main h2:not(.hero h2):not(.gar-card h2) {
  font-family: 'Open Sans', sans-serif !important;
  font-size: clamp(1.8rem, 3.8vw, 3rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.015em !important;
  font-weight: 800 !important;
  color: var(--np-heading) !important;
}

.section-label {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.15em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--np-gold) !important;
}

main > section p.text-lg,
main > section p.text-slate2 {
  font-size: clamp(1rem, 1.4vw, 1.1rem) !important;
  line-height: 1.8 !important;
  color: var(--np-body);
}

/* ══════════════════════════════════════════════
   SECTION BACKGROUNDS — ID-based selectors
   ══════════════════════════════════════════════ */

/* Default: all sections white */
main > section:not(.hero):not(#contacto):not(#stats):not(#intro):not(#cobertura) {
  background: var(--np-white) !important;
}

/* === #stats — NAVY SOLID === */
#stats {
  background: var(--np-navy) !important;
  border: none !important;
  padding: clamp(3rem, 5vw, 5rem) 0 !important;
}
#stats .text-3xl, #stats .text-4xl,
#stats .text-navy, #stats [class*="text-navy"],
#stats .font-black {
  color: var(--np-gold) !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: clamp(2.6rem, 5vw, 4rem) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
#stats .text-xs, #stats .text-slate2,
#stats [class*="text-slate"], #stats .font-semibold {
  color: rgba(255,255,255,0.80) !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600 !important;
}
.stat-item + .stat-item::before {
  background: rgba(255,255,255,0.15) !important;
}

/* === #testimonios — CREAM === */
#testimonios {
  background: var(--np-cream) !important;
}

/* === #catalogo — CREAM === */
#catalogo {
  background: var(--np-cream) !important;
}

/* === Garantias (8th) — LIGHT BLUE === */
main > section:nth-child(8) {
  background: var(--np-blue-light) !important;
}

/* === #intro — NAVY GRADIENT + SLIDESHOW === */
#intro {
  background: linear-gradient(180deg, var(--np-navy) 0%, var(--np-royal) 100%) !important;
}

/* === #cobertura — NAVY + SLIDESHOW === */
#cobertura {
  background: var(--np-navy) !important;
}

/* ─── DARK SECTION TEXT OVERRIDES (#intro, #cobertura) ─── */

/* Headings */
#intro h2, #intro h3, #intro h4,
#cobertura h2, #cobertura h3, #cobertura h4 {
  color: #fff !important;
}

/* Labels */
#intro .section-label, #cobertura .section-label {
  color: var(--np-gold) !important;
}

/* text-navy */
#intro .text-navy, #intro [class*="text-navy"],
#cobertura .text-navy, #cobertura [class*="text-navy"] {
  color: #fff !important;
}

/* Paragraphs & slate */
#intro p, #intro .text-slate2, #intro [class*="text-slate"],
#cobertura p, #cobertura .text-slate2, #cobertura [class*="text-slate"] {
  color: rgba(255,255,255,0.75) !important;
}

/* Bold / strong */
#intro strong, #intro .font-bold, #intro .font-black, #intro .font-semibold,
#cobertura strong, #cobertura .font-bold, #cobertura .font-black, #cobertura .font-semibold {
  color: #fff !important;
}

/* Cards */
#intro .cert-card, #cobertura .cert-card,
#intro .diff-card, #cobertura .diff-card {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(12px);
}
#intro .cert-arrow, #cobertura .cert-arrow {
  color: var(--np-gold) !important;
}

/* City pills */
#cobertura .city-pill {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #fff !important;
}
#cobertura .city-pill:hover {
  background: rgba(212,175,55,0.10) !important;
  border-color: var(--np-gold) !important;
}
#cobertura .city-dot {
  background: var(--np-gold) !important;
}

/* SVG icons */
#intro svg, #cobertura svg {
  color: var(--np-gold) !important;
  stroke: var(--np-gold) !important;
}

/* ══════════════════════════════════════════════
   HERO — KPMG CORPORATE BLUE
   ══════════════════════════════════════════════ */

.hero {
  position: relative;
  min-height: 90vh !important;
  overflow: hidden;
}
.hero h1 {
  font-family: 'Open Sans', sans-serif !important;
  font-size: clamp(2.6rem, 5.5vw, 4.8rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
  font-weight: 800 !important;
}
.hero [class*="bg-white/10"] {
  background: rgba(212,175,55,0.10) !important;
  border: 1px solid rgba(212,175,55,0.3) !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
}

/* Feature cards — structured, corporate */
.hero [class*="bg-white/8"] {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  padding: 18px 20px !important;
  border-radius: 10px !important;
  border-left: 3px solid var(--np-gold) !important;
  transition: all 0.3s ease !important;
}
.hero [class*="bg-white/8"]:hover {
  background: rgba(255,255,255,0.10) !important;
  transform: translateX(4px);
}
.hero [class*="bg-white/8"] h2, .hero .bg-white\/8 h2 {
  font-size: 14px !important; line-height: 1.3 !important;
  font-weight: 700 !important; color: #fff !important;
  letter-spacing: 0 !important;
}
.hero [class*="bg-white/8"] p {
  font-size: 12px !important; color: rgba(255,255,255,0.6) !important;
}

/* Trust banner — corporate gold card */
.hero-trust-banner {
  background: rgba(212,175,55,0.10) !important;
  border: 2px solid var(--np-gold) !important;
  border-radius: 10px;
  padding: 22px 24px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.hero-trust-banner h3 {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 15px !important; line-height: 1.35 !important;
  font-weight: 800 !important; color: var(--np-gold) !important;
}
.hero-trust-banner p {
  font-size: 12.5px !important; line-height: 1.6 !important;
  color: rgba(255,255,255,0.7) !important;
}
.hero-trust-banner strong { color: #fff !important; }

/* Vanta */
.vanta-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.vanta-bg canvas { display: block; width: 100% !important; height: 100% !important; }
.hero > .max-w-screen-xl, .hero > div:not(.vanta-bg):not(.vanta-fallback) { position: relative; z-index: 1; }
.vanta-fallback {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(150deg, var(--np-navy-deep) 0%, var(--np-royal) 100%);
}

/* ══════════════════════════════════════════════
   CARDS — CORPORATE, STRUCTURED, CLEAN BORDERS
   ══════════════════════════════════════════════ */

.cert-card {
  background: var(--np-white) !important;
  border: 1px solid var(--np-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none;
  transition: all 0.35s ease !important;
  position: relative;
  overflow: hidden;
}
.cert-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--np-shadow-hover) !important;
  border-color: var(--np-gold) !important;
}
/* Gold top border on hover */
.cert-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--np-gold);
  transform: scaleX(0); transition: transform 0.35s ease;
  transform-origin: left;
}
.cert-card:hover::before { transform: scaleX(1); }

.diff-card {
  background: var(--np-white) !important;
  border: 1px solid var(--np-border) !important;
  border-radius: var(--radius) !important;
  padding: 36px 28px !important;
  box-shadow: none;
  transition: all 0.35s ease !important;
  position: relative;
}
.diff-card:hover {
  border-color: var(--np-gold) !important;
  box-shadow: var(--np-shadow-hover) !important;
  transform: translateY(-4px) !important;
}
.diff-card .text-2xl {
  font-family: 'Open Sans', sans-serif !important;
  font-size: clamp(2rem, 3.5vw, 2.8rem) !important;
  letter-spacing: -0.02em;
  color: var(--np-heading) !important;
  font-weight: 800 !important;
}
.diff-card .font-bold.text-navy { color: var(--np-heading) !important; }

/* Icon containers — light blue bg */
.diff-card .w-14.h-14.rounded-2xl,
.diff-card [class*="bg-amber-50"],
.diff-card [class*="bg-blue-50"],
.diff-card [class*="bg-green-50"],
.diff-card [class*="bg-purple-50"] {
  background: var(--np-blue-light) !important;
  border-radius: 10px !important;
}

/* Testimonials */
article[itemscope] {
  background: var(--np-white) !important;
  border: 1px solid var(--np-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none;
  transition: all 0.3s ease !important;
}
article[itemscope]:hover {
  box-shadow: var(--np-shadow-hover) !important;
  border-color: var(--np-gold) !important;
}
article[itemscope] .w-12.h-12.rounded-full,
article[itemscope] .w-10.h-10.rounded-full {
  background: var(--np-navy) !important;
  color: var(--np-gold) !important;
  font-weight: 800 !important;
}

/* Guarantees */
.gar-card {
  border-radius: var(--radius) !important;
  padding: 40px !important;
  transition: all 0.35s ease !important;
}
.gar-card:hover { transform: translateY(-4px) !important; }
.gar-card[class*="bg-[#fdf9ec]"] {
  background: #fff !important;
  border: 2px solid var(--np-gold) !important;
  box-shadow: none;
}
.gar-card[class*="bg-[#fdf9ec]"]:hover { box-shadow: var(--np-shadow-hover) !important; }
.gar-card[class*="bg-[#fdf9ec]"] h2, .gar-card[class*="bg-[#fdf9ec]"] h3 { color: var(--np-heading) !important; }
.gar-card[class*="bg-[#fdf9ec]"] p { color: var(--np-body) !important; }
.gar-card.bg-navy, .gar-card[class*="bg-navy"] {
  background: var(--np-navy) !important;
  border: none !important;
  box-shadow: none;
}
.gar-card.bg-navy:hover, .gar-card[class*="bg-navy"]:hover { box-shadow: var(--np-shadow-hover) !important; }
.gar-card.bg-navy h2, .gar-card.bg-navy p,
.gar-card[class*="bg-navy"] h2, .gar-card[class*="bg-navy"] p { color: #fff !important; }
.gar-card .text-4xl {
  font-size: clamp(2.5rem, 4vw, 3.5rem) !important;
  font-weight: 800 !important; line-height: 1 !important;
}

/* FAQ */
.faq-item {
  border: 1px solid var(--np-border) !important;
  border-radius: var(--radius) !important;
  background: var(--np-white) !important;
  transition: all 0.3s ease !important;
}
.faq-item:hover { border-color: var(--np-gold) !important; }
.faq-icon { color: var(--np-gold) !important; }

/* City pills */
.city-pill {
  background: var(--np-white) !important;
  border: 1px solid var(--np-border) !important;
  color: var(--np-heading) !important;
  transition: all 0.3s ease !important;
  border-radius: 8px !important;
}
.city-pill:hover {
  border-color: var(--np-gold) !important;
  background: var(--np-blue-light) !important;
}
.city-dot { background: var(--np-gold) !important; }

/* ══════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════ */

.btn-gold {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 16px 36px !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transition: all 0.3s ease !important;
}
.btn-gold:hover {
  box-shadow: 0 8px 24px rgba(212,175,55,0.35) !important;
  transform: translateY(-2px) !important;
}

.btn-ghost {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 16px 36px !important;
}

/* ══════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════ */

.header {
  font-family: 'Open Sans', sans-serif !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  background: rgba(255,255,255,0.92) !important;
  border-bottom: 1px solid rgba(10,35,66,0.06) !important;
  transition: all 0.4s ease !important;
}
.header.scrolled {
  box-shadow: 0 2px 16px rgba(10,35,66,0.08) !important;
  background: rgba(255,255,255,0.98) !important;
}

.urgency-bar {
  font-family: 'Open Sans', sans-serif !important;
  background: var(--np-navy) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.nav-dropdown-menu {
  border-radius: var(--radius) !important;
  box-shadow: 0 12px 48px rgba(10,35,66,0.12) !important;
  border: 1px solid var(--np-border) !important;
}
.dd-item { border-radius: 8px !important; }

/* ══════════════════════════════════════════════
   CONTACT
   ══════════════════════════════════════════════ */

#contacto {
  background: var(--np-navy) !important;
}
#contacto form {
  background: var(--np-white) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
  border: none !important;
}
#contacto form .form-label, #contacto form label { color: var(--np-heading) !important; }
.form-input {
  font-family: 'Open Sans', sans-serif !important;
  border-radius: 8px !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
  border: 1.5px solid var(--np-border) !important;
  transition: all 0.3s !important;
}
.form-input:focus {
  border-color: var(--np-gold) !important;
  box-shadow: 0 0 0 3px rgba(212,175,55,0.1) !important;
}
#contacto button[type="submit"] {
  font-family: 'Open Sans', sans-serif !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 18px !important;
}
#contacto [class*="bg-white/20"] {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 8px !important;
}

/* ══════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════ */

footer {
  font-family: 'Open Sans', sans-serif !important;
  background: var(--np-navy-deep) !important;
}

/* ══════════════════════════════════════════════
   FLOATING CTA
   ══════════════════════════════════════════════ */

.float-wa, .float-main {
  font-family: 'Open Sans', sans-serif !important;
  border-radius: 8px !important;
}
.float-wa { padding: 12px 22px !important; box-shadow: 0 6px 20px rgba(37,211,102,0.3) !important; }
.float-main { padding: 14px 26px !important; box-shadow: 0 6px 20px rgba(212,175,55,0.3) !important; }

/* ══════════════════════════════════════════════
   SCROLL ANIMATIONS
   ══════════════════════════════════════════════ */

.reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}
.reveal.revealed { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0; transform: translateX(-30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal-left.revealed { opacity: 1; transform: translateX(0); }

.reveal-scale {
  opacity: 0; transform: scale(0.95);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.reveal-scale.revealed { opacity: 1; transform: scale(1); }

.scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 3px; background: var(--np-gold);
  z-index: 10001; transform-origin: left; transform: scaleX(0);
  pointer-events: none;
}

/* ══════════════════════════════════════════════
   SECTION SLIDESHOW BACKGROUNDS
   ══════════════════════════════════════════════ */

.np-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.np-slideshow-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  will-change: opacity;
  animation: npKenBurns 20s ease-in-out infinite alternate;
}
.np-slideshow-img.active {
  opacity: 1;
}
@keyframes npKenBurns {
  0% { transform: scale(1); }
  100% { transform: scale(1.08); }
}
/* Dark overlay for text readability */
.np-slideshow-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(10,35,66,0.82) 0%,
    rgba(10,35,66,0.75) 50%,
    rgba(7,20,40,0.85) 100%
  );
}
/* Content above overlay */
section:has(.np-slideshow) > *:not(.np-slideshow) {
  position: relative;
  z-index: 2;
}
/* Text overrides for slideshow sections */
section:has(.np-slideshow) h2 { color: #fff !important; }
section:has(.np-slideshow) .section-label { color: var(--np-gold) !important; }
section:has(.np-slideshow) p { color: rgba(255,255,255,0.75) !important; }
section:has(.np-slideshow) .city-pill {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #fff !important;
}
section:has(.np-slideshow) .city-pill:hover {
  background: rgba(212,175,55,0.12) !important;
  border-color: var(--np-gold) !important;
}
section:has(.np-slideshow) .city-dot { background: var(--np-gold) !important; }
section:has(.np-slideshow) .diff-card {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(12px);
}
section:has(.np-slideshow) .diff-card h3,
section:has(.np-slideshow) .diff-card .font-bold { color: #fff !important; }
section:has(.np-slideshow) .diff-card .text-slate2,
section:has(.np-slideshow) .diff-card p:not(.text-2xl) { color: rgba(255,255,255,0.65) !important; }

/* ══════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-scale { opacity: 1 !important; transform: none !important; transition: none !important; }
  .vanta-bg { display: none !important; }
  .scroll-progress { display: none; }
  .np-slideshow { display: none !important; }
  @keyframes npKenBurns { 0%, 100% { transform: none; } }
}

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */

@media (max-width: 767px) {
  .vanta-bg { display: none !important; }
  .np-slideshow { display: none !important; }
  .hero {
    background: linear-gradient(150deg, var(--np-navy-deep), var(--np-royal)) !important;
    min-height: auto !important;
  }
  .hero h1 { font-size: clamp(2rem, 8vw, 3rem) !important; }
  main h2:not(.hero h2):not(.gar-card h2) { font-size: clamp(1.5rem, 6vw, 2.2rem) !important; }
  main > section { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  .stat-item .text-3xl, .stat-item .text-4xl,
  main > section:nth-child(2) .text-navy,
  main > section:nth-child(2) [class*="text-navy"] { font-size: 2rem !important; }
  .gar-card { padding: 24px !important; }
  .diff-card { padding: 24px 20px !important; }
  .btn-gold { padding: 14px 24px !important; font-size: 14px !important; }
  .scroll-progress { display: none; }
  .hero-trust-banner { padding: 16px 18px; }
  .hero-trust-banner h3 { font-size: 13px !important; }
}

@media (min-width: 1440px) {
  .hero h1 { font-size: 5rem !important; }
  main h2:not(.hero h2):not(.gar-card h2) { font-size: 3.4rem !important; }
}