/*
Theme Name: Waqala Media
Theme URI: https://waqalamedia.es
Author: WAQALA MEDIA
Author URI: https://waqalamedia.es
Description: Tema premium para WAQALA MEDIA — agencia digital de lujo (negro, oro y verde). Ligero y 100% compatible con Elementor y el editor de bloques de WordPress. Incluye navbar, footer, botón de WhatsApp, chatbot y plantillas de página listas para usar.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: waqala-media
Tags: business, portfolio, elementor, full-width-template, custom-logo, custom-menu, featured-images, translation-ready, rtl-language-support
*/

/* ====================================================================
   Las cabeceras de arriba son OBLIGATORIAS para que WordPress reconozca
   el tema (eso era lo que faltaba y provocaba el error de instalación).
   Debajo va la hoja de estilos completa de WAQALA MEDIA.
   ==================================================================== */

/* =====================================================
   WAQALA MEDIA — Global Stylesheet
   Luxury Arabic-Western Digital Agency
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Marcellus&family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ===== CSS VARIABLES ===== */
:root {
  --gold: #b09157;
  --gold-light: #d4b483;
  --gold-lighter: #e8d5a3;
  --gold-dark: #8a6e3b;
  --gold-glow: rgba(176, 145, 87, 0.4);
  --green: #1a593f;
  --green-dark: #0d3326;
  --green-deeper: #071a13;
  --white: #ffffff;
  --cream: #f5f0e8;
  --dark: #080c0a;
  --dark-2: #0d110e;
  --dark-3: #141a16;
  --dark-card: rgba(13, 17, 14, 0.85);
  --btn-border: #b09157;
  --btn-text: #1a3a8f;
  --btn-bg: #ffffff;

  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Outfit', sans-serif;

  --nav-h: 82px;
  --section-py: 110px;
  --container: 1220px;
  --radius: 3px;
  --radius-lg: 10px;

  --shadow-gold: 0 0 40px rgba(176, 145, 87, 0.25), 0 4px 20px rgba(0,0,0,0.6);
  --shadow-card: 0 8px 40px rgba(0,0,0,0.5), 0 1px 0 rgba(176,145,87,0.15) inset;
  --transition: all 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== RESET & BASE ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

body {
  font-family: var(--font-body);
  background: var(--dark);
  color: var(--white);
  line-height: 1.7;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--dark-2); }
::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, var(--gold-dark), var(--gold)); border-radius: 3px; }

/* ===== CUSTOM CURSOR ===== */
.cursor-ring {
  position: fixed;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.12s ease, width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
  opacity: 0.7;
}
.cursor-dot {
  position: fixed;
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.04s ease;
}
body:has(a:hover) .cursor-ring,
body:has(button:hover) .cursor-ring {
  width: 52px;
  height: 52px;
  opacity: 0.4;
}

/* ===== ARABIC GEOMETRIC PATTERN (SVG background) ===== */
.geo-pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23b09157' stroke-width='0.5' stroke-opacity='0.12'%3E%3Cpolygon points='40,2 52,14 68,14 78,28 78,52 68,66 52,66 40,78 28,66 12,66 2,52 2,28 12,14 28,14'/%3E%3Cpolygon points='40,10 50,20 64,20 72,32 72,48 64,60 50,60 40,70 30,60 16,60 8,48 8,32 16,20 30,20'/%3E%3Cline x1='40' y1='2' x2='40' y2='78'/%3E%3Cline x1='2' y1='40' x2='78' y2='40'/%3E%3Cline x1='12' y1='14' x2='68' y2='66'/%3E%3Cline x1='68' y1='14' x2='12' y2='66'/%3E%3C/g%3E%3C/svg%3E");
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  line-height: 1.15;
  font-weight: 600;
}

.display-title {
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.section-title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 600;
  line-height: 1.2;
}

/* ===== GOLD GRADIENT TEXT ===== */
.gold-text {
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-light) 45%, var(--gold-lighter) 55%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
}

/* Gold shimmer animation */
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.gold-shimmer {
  background: linear-gradient(90deg, var(--gold-dark) 25%, var(--gold-lighter) 50%, var(--gold-dark) 75%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

/* ===== GEOMETRIC CORNER DECORATOR ===== */
.geo-corner {
  position: relative;
}
.geo-corner::before,
.geo-corner::after {
  content: '';
  position: absolute;
  width: 28px;
  height: 28px;
  border-color: var(--gold);
  border-style: solid;
  opacity: 0.6;
}
.geo-corner::before {
  top: -8px;
  left: -8px;
  border-width: 2px 0 0 2px;
}
.geo-corner::after {
  bottom: -8px;
  right: -8px;
  border-width: 0 2px 2px 0;
}

/* ===== SECTION LABEL ===== */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.section-label::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--gold);
}

/* ===== LAYOUT ===== */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

section {
  padding: var(--section-py) 0;
  position: relative;
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 32px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: var(--radius);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.btn-primary {
  background: var(--btn-bg);
  color: var(--btn-text);
  border: 2.5px solid var(--btn-border);
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.btn-primary:hover {
  color: var(--white);
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px var(--gold-glow);
}
.btn-primary:hover::before { opacity: 1; }
.btn-primary:hover span,
.btn-primary:hover i { position: relative; z-index: 1; }
.btn-primary span, .btn-primary i { position: relative; z-index: 1; }

.btn-gold {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: var(--dark);
  border: 2.5px solid transparent;
  font-weight: 700;
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px var(--gold-glow);
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
}

.btn-outline {
  background: transparent;
  color: var(--gold);
  border: 1.5px solid rgba(176, 145, 87, 0.4);
}
.btn-outline:hover {
  border-color: var(--gold);
  background: rgba(176, 145, 87, 0.08);
  transform: translateY(-2px);
}

.btn-whatsapp {
  background: rgba(37, 211, 102, 0.12);
  color: #25d366;
  border: 2px solid rgba(37, 211, 102, 0.4);
}
.btn-whatsapp:hover {
  background: #25d366;
  color: white;
  border-color: #25d366;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(37,211,102,0.3);
}

.btn-lg {
  padding: 16px 44px;
  font-size: 1rem;
}

/* ===== NAVIGATION ===== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  z-index: 1000;
  transition: var(--transition);
}

.navbar.scrolled {
  background: rgba(8, 12, 10, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(176, 145, 87, 0.15);
  box-shadow: 0 4px 30px rgba(0,0,0,0.4);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 40px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  transition: var(--transition-fast);
}
.nav-logo:hover { opacity: 0.85; }
.nav-logo img {
  height: 54px;
  width: auto;
  mix-blend-mode: screen;
  filter: brightness(1.1) contrast(1.05);
}
.nav-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.nav-logo-text span:first-child {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.08em;
}
.nav-logo-text span:last-child {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--green);
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-link {
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.75);
  border-radius: var(--radius);
  position: relative;
  transition: var(--transition-fast);
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1.5px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
  transition: width 0.3s ease;
}
.nav-link:hover { color: var(--white); }
.nav-link:hover::after,
.nav-link.active::after { width: calc(100% - 32px); }
.nav-link.active { color: var(--gold); }

.nav-cta {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  transition: var(--transition-fast);
}
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav */
.mobile-nav {
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  background: rgba(8, 12, 10, 0.98);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(176, 145, 87, 0.2);
  padding: 24px 32px 32px;
  z-index: 999;
  flex-direction: column;
  gap: 8px;
  transform: translateY(-20px);
  opacity: 0;
  transition: var(--transition);
}
.mobile-nav.open {
  display: flex;
  transform: translateY(0);
  opacity: 1;
}
.mobile-nav .nav-link {
  font-size: 1.1rem;
  padding: 12px 0;
  border-bottom: 1px solid rgba(176, 145, 87, 0.08);
  color: var(--white);
}
.mobile-nav .btn { margin-top: 12px; text-align: center; justify-content: center; }

/* ===== HERO SECTION ===== */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background: var(--dark);
}

#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
  padding-top: var(--nav-h);
  padding-bottom: 60px;
}

.hero-text { position: relative; z-index: 2; }

.hero-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
  padding: 6px 16px 6px 6px;
  border: 1px solid rgba(176, 145, 87, 0.25);
  border-radius: 2px;
  background: rgba(176, 145, 87, 0.06);
}
.hero-label .dot {
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  animation: pulse-dot 2s ease infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

.hero-title {
  font-size: clamp(2.8rem, 5.5vw, 5rem);
  font-weight: 700;
  line-height: 1.06;
  margin-bottom: 22px;
  color: var(--white);
}

.hero-subtitle {
  font-size: 1.05rem;
  font-weight: 300;
  color: rgba(255,255,255,0.6);
  max-width: 480px;
  line-height: 1.75;
  margin-bottom: 40px;
}

.hero-btns {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-stats {
  display: flex;
  gap: 40px;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid rgba(176, 145, 87, 0.12);
}
.hero-stat {}
.hero-stat-num {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 4px;
}
.hero-stat-label {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.45);
  font-weight: 400;
  letter-spacing: 0.05em;
}

/* ===== LAPTOP MOCKUP ===== */
.hero-visual {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.laptop-wrapper {
  position: relative;
  width: 100%;
  max-width: 560px;
}

/* Decorative geometric rings around laptop */
.laptop-geo-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: geo-rotate 20s linear infinite;
}
.laptop-geo-ring:nth-child(1) {
  width: 95%;
  height: 95%;
  border-color: rgba(176, 145, 87, 0.12);
}
.laptop-geo-ring:nth-child(2) {
  width: 108%;
  height: 108%;
  border-color: rgba(176, 145, 87, 0.07);
  animation-duration: 30s;
  animation-direction: reverse;
}
@keyframes geo-rotate { to { transform: translate(-50%, -50%) rotate(360deg); } }

.laptop {
  position: relative;
  background: linear-gradient(145deg, #1c1c1c, #0a0a0a);
  border-radius: 14px 14px 0 0;
  padding: 12px 12px 0;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.07),
    0 40px 80px rgba(0,0,0,0.7),
    0 0 60px rgba(176, 145, 87, 0.15);
  border: 1px solid rgba(176, 145, 87, 0.25);
}

.laptop-notch {
  width: 60px;
  height: 10px;
  background: #0a0a0a;
  border-radius: 0 0 6px 6px;
  margin: 0 auto 8px;
}

.laptop-screen {
  background: #0b1410;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 16/10;
  border: 1px solid rgba(176, 145, 87, 0.15);
}

/* Booking App UI inside screen */
.booking-app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #0d1a14;
  font-size: 11px;
}

.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  background: #071010;
  border-bottom: 1px solid rgba(176,145,87,0.2);
  flex-shrink: 0;
}
.app-topbar-title {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--gold);
  font-weight: 600;
}
.app-traffic {
  display: flex;
  gap: 4px;
}
.app-traffic span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.app-traffic span:nth-child(1) { background: #ff5f56; }
.app-traffic span:nth-child(2) { background: #ffbd2e; }
.app-traffic span:nth-child(3) { background: #27c93f; }
.app-status {
  font-size: 9px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.1em;
}

.app-body {
  display: grid;
  grid-template-columns: 90px 1fr;
  flex: 1;
  min-height: 0;
}

.app-sidebar-panel {
  background: #071310;
  border-right: 1px solid rgba(176,145,87,0.12);
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sidebar-item {
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 9px;
  color: rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.2s;
}
.sidebar-item.active {
  background: rgba(176,145,87,0.15);
  color: var(--gold);
}
.sidebar-item i { font-size: 10px; }

.app-main-panel {
  padding: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.app-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  flex-shrink: 0;
}
.mini-stat {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(176,145,87,0.12);
  border-radius: 4px;
  padding: 6px 8px;
}
.mini-stat-label {
  font-size: 8px;
  color: rgba(255,255,255,0.35);
  margin-bottom: 2px;
}
.mini-stat-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1;
}
.mini-stat-change {
  font-size: 8px;
  color: #27c93f;
  margin-top: 1px;
}

.bookings-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  overflow: hidden;
}

.booking-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(176,145,87,0.08);
  opacity: 0;
  transform: translateX(10px);
  animation: slide-in-row 0.5s ease forwards;
}
.booking-row:nth-child(1) { animation-delay: 0.2s; }
.booking-row:nth-child(2) { animation-delay: 0.5s; }
.booking-row:nth-child(3) { animation-delay: 0.8s; }
.booking-row:nth-child(4) { animation-delay: 1.1s; }
@keyframes slide-in-row {
  to { opacity: 1; transform: translateX(0); }
}

.booking-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
}
.booking-info { flex: 1; min-width: 0; }
.booking-name { font-size: 9px; color: var(--white); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.booking-service { font-size: 8px; color: rgba(255,255,255,0.35); }
.booking-time { font-size: 8px; color: var(--gold); flex-shrink: 0; }
.booking-badge {
  padding: 2px 6px;
  border-radius: 20px;
  font-size: 7px;
  font-weight: 600;
  flex-shrink: 0;
}
.badge-confirm { background: rgba(39, 201, 63, 0.15); color: #27c93f; }
.badge-pending { background: rgba(255, 189, 46, 0.15); color: #ffbd2e; }

/* Toast notification */
.app-toast {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(13, 26, 20, 0.95);
  border: 1px solid rgba(176,145,87,0.3);
  border-radius: 6px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  color: var(--white);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  animation: toast-pop 4s ease infinite;
}
.toast-icon { color: #27c93f; font-size: 12px; }
@keyframes toast-pop {
  0%, 85%, 100% { opacity: 0; transform: translateY(10px) scale(0.95); }
  15%, 70% { opacity: 1; transform: translateY(0) scale(1); }
}

.laptop-base {
  background: linear-gradient(to bottom, #1a1a1a, #111);
  height: 22px;
  border-radius: 0 0 2px 2px;
  position: relative;
}
.laptop-stand {
  width: 120px;
  height: 14px;
  background: linear-gradient(to bottom, #111, #0a0a0a);
  margin: 0 auto;
  border-radius: 0 0 8px 8px;
  border: 1px solid rgba(255,255,255,0.05);
  border-top: none;
}
.laptop-foot {
  width: 200px;
  height: 8px;
  background: #0d0d0d;
  margin: 0 auto;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

/* Gold glow under laptop */
.laptop-glow {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 60px;
  background: radial-gradient(ellipse, rgba(176, 145, 87, 0.2) 0%, transparent 70%);
  filter: blur(10px);
}

/* ===== SECTION HEADER ===== */
.section-header {
  text-align: center;
  margin-bottom: 70px;
}
.section-header .section-label { justify-content: center; }
.section-header .section-title { margin-bottom: 16px; }
.section-header p {
  max-width: 550px;
  margin: 0 auto;
  color: rgba(255,255,255,0.5);
  font-size: 1rem;
  font-weight: 300;
}

/* ===== VALUE PROPS ===== */
.value-section {
  background: var(--dark-2);
  border-top: 1px solid rgba(176,145,87,0.1);
  border-bottom: 1px solid rgba(176,145,87,0.1);
  padding: 80px 0;
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.value-card {
  padding: 50px 40px;
  text-align: center;
  position: relative;
  border-right: 1px solid rgba(176,145,87,0.1);
  transition: var(--transition);
}
.value-card:last-child { border-right: none; }
.value-card:hover { background: rgba(176, 145, 87, 0.04); }

.value-icon {
  width: 72px;
  height: 72px;
  border: 1.5px solid rgba(176, 145, 87, 0.3);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  font-size: 1.8rem;
  color: var(--gold);
  position: relative;
  transition: var(--transition);
  background: rgba(176,145,87,0.05);
}
.value-card:hover .value-icon {
  transform: scale(1.1) rotate(-5deg);
  border-color: var(--gold);
  box-shadow: 0 0 30px var(--gold-glow);
  background: rgba(176,145,87,0.12);
}

.value-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 12px;
}

.value-desc {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.7;
}

/* ===== SERVICES GRID ===== */
.services-section {
  position: relative;
}
.services-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 50% at 50% 100%, rgba(26, 89, 63, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  background: rgba(176,145,87,0.1);
  border: 1px solid rgba(176,145,87,0.1);
}

.service-card {
  background: var(--dark-2);
  padding: 44px 36px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition);
}
.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(176, 145, 87, 0.08) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.service-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0);
  transition: transform 0.4s ease;
}
.service-card:hover { background: var(--dark-3); transform: translateY(-3px); }
.service-card:hover::before { opacity: 1; }
.service-card:hover::after { transform: scaleX(1); }

.service-card-num {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  color: rgba(176,145,87,0.22);
  line-height: 1;
  margin-bottom: 16px;
  transition: var(--transition);
}
.service-card:hover .service-card-num { color: rgba(176,145,87,0.38); }

.service-icon {
  font-size: 2rem;
  color: var(--gold);
  margin-bottom: 20px;
  display: block;
  transition: var(--transition);
}
.service-card:hover .service-icon { transform: scale(1.2); }

.service-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 12px;
  line-height: 1.2;
}

.service-desc {
  font-size: 0.87rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.7;
}

.service-arrow {
  position: absolute;
  bottom: 28px;
  right: 28px;
  color: rgba(176,145,87,0.25);
  font-size: 1rem;
  transition: var(--transition);
}
.service-card:hover .service-arrow {
  color: var(--gold);
  transform: translate(3px, -3px);
}

/* ===== PRICING SECTION ===== */
.pricing-section {
  background: var(--dark-2);
  position: relative;
  overflow: hidden;
}
.pricing-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

.pricing-card {
  background: rgba(13,17,14,0.6);
  border: 1px solid rgba(176,145,87,0.12);
  border-radius: var(--radius-lg);
  padding: 44px 36px;
  position: relative;
  transition: var(--transition);
  backdrop-filter: blur(10px);
}
.pricing-card:hover {
  border-color: rgba(176,145,87,0.35);
  transform: translateY(-6px);
  box-shadow: var(--shadow-gold);
}

.pricing-card.featured {
  border-color: var(--gold);
  background: rgba(176, 145, 87, 0.05);
  transform: translateY(-12px);
  box-shadow: var(--shadow-gold);
}
.pricing-card.featured:hover { transform: translateY(-18px); }

.pricing-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: var(--dark);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 5px 18px;
  border-radius: 20px;
  white-space: nowrap;
}

.pricing-icon {
  font-size: 2rem;
  margin-bottom: 18px;
}

.pricing-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 8px;
}

.pricing-price {
  margin: 24px 0;
}
.pricing-amount {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.pricing-period {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
  margin-top: 4px;
}

.pricing-divider {
  height: 1px;
  background: rgba(176,145,87,0.12);
  margin: 24px 0;
}

.pricing-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
}
.pricing-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.65);
}
.pricing-feature i {
  color: var(--gold);
  font-size: 0.8rem;
  flex-shrink: 0;
  width: 14px;
}

.pricing-cta { width: 100%; justify-content: center; }

/* ===== PORTFOLIO SECTION ===== */
.portfolio-section { position: relative; }

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}

.portfolio-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 4/3;
  background: var(--dark-3);
}

.portfolio-card-bg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.portfolio-card:hover .portfolio-card-bg { transform: scale(1.08); }

.portfolio-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,12,10,0.95) 0%, rgba(8,12,10,0.4) 50%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
  transition: var(--transition);
}

.portfolio-category {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}

.portfolio-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 12px;
}

.portfolio-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  opacity: 0;
  transform: translateY(10px);
  transition: var(--transition);
}
.portfolio-card:hover .portfolio-link {
  opacity: 1;
  transform: translateY(0);
}

.portfolio-cta {
  text-align: center;
  margin-top: 50px;
}

/* ===== TESTIMONIALS ===== */
.testimonials-section {
  background: var(--dark-2);
  overflow: hidden;
  position: relative;
}
.testimonials-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.testimonials-slider-wrapper { overflow: hidden; }

.testimonials-slider {
  display: flex;
  gap: 28px;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.testimonial-card {
  flex: 0 0 calc(33.333% - 19px);
  background: rgba(13,17,14,0.5);
  border: 1px solid rgba(176,145,87,0.1);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  position: relative;
  backdrop-filter: blur(10px);
}
.testimonial-card::before {
  content: '"';
  position: absolute;
  top: 20px;
  right: 28px;
  font-family: var(--font-display);
  font-size: 5rem;
  color: rgba(176,145,87,0.12);
  line-height: 1;
}

.testimonial-stars {
  color: var(--gold);
  font-size: 0.85rem;
  margin-bottom: 18px;
  letter-spacing: 2px;
}

.testimonial-text {
  font-size: 0.93rem;
  line-height: 1.8;
  color: rgba(255,255,255,0.7);
  margin-bottom: 28px;
  font-style: italic;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 300;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
}
.testimonial-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(176,145,87,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
  background: linear-gradient(135deg, var(--gold-dark), var(--gold-light));
  flex-shrink: 0;
}
.testimonial-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--white);
  margin-bottom: 2px;
}
.testimonial-role {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
}

.slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 44px;
}
.slider-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(176,145,87,0.3);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  background: rgba(176,145,87,0.05);
}
.slider-btn:hover {
  border-color: var(--gold);
  background: rgba(176,145,87,0.12);
  transform: scale(1.1);
}
.slider-dots {
  display: flex;
  gap: 8px;
}
.slider-dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: rgba(176,145,87,0.25);
  cursor: pointer;
  transition: all 0.3s ease;
}
.slider-dot.active {
  width: 20px;
  background: var(--gold);
}

/* ===== BLOG SECTION ===== */
.blog-section { position: relative; display: none !important; }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.blog-card {
  background: var(--dark-2);
  border: 1px solid rgba(176,145,87,0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
  cursor: pointer;
}
.blog-card:hover {
  transform: translateY(-6px);
  border-color: rgba(176,145,87,0.25);
  box-shadow: var(--shadow-card);
}

.blog-img {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  position: relative;
  overflow: hidden;
}
.blog-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,12,10,0.8) 0%, transparent 100%);
}

.blog-content { padding: 28px; }

.blog-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.blog-category {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 3px 10px;
  background: rgba(176,145,87,0.1);
  border-radius: 2px;
}
.blog-date {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
}

.blog-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 12px;
  line-height: 1.35;
  transition: var(--transition-fast);
}
.blog-card:hover .blog-title { color: var(--gold-light); }

.blog-excerpt {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.7;
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-readmore {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s ease;
}
.blog-card:hover .blog-readmore { gap: 10px; }

.blog-cta { text-align: center; margin-top: 50px; }

/* ===== CTA FINAL ===== */
.cta-section {
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26,89,63,0.8) 0%, rgba(8,12,10,0.95) 60%);
}
.cta-section .geo-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.4;
}

.cta-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}
.cta-content .section-title {
  font-size: clamp(2rem, 4vw, 3.5rem);
  margin-bottom: 20px;
}
.cta-content p {
  font-size: 1rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 40px;
  line-height: 1.7;
}
.cta-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ===== FOOTER ===== */
footer {
  background: var(--dark-2);
  border-top: 1px solid rgba(176,145,87,0.12);
  padding: 70px 0 30px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1.2fr;
  gap: 60px;
  margin-bottom: 60px;
}

.footer-brand {}
.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.footer-logo img { height: 44px; }
.footer-logo-text {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.footer-desc {
  font-size: 0.87rem;
  color: rgba(255,255,255,0.4);
  line-height: 1.75;
  margin-bottom: 24px;
  max-width: 300px;
}
.footer-social {
  display: flex;
  gap: 10px;
}
.social-btn {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(176,145,87,0.25);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  transition: var(--transition-fast);
}
.social-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(176,145,87,0.08);
  transform: translateY(-2px);
}

.footer-col-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(176,145,87,0.12);
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-link {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.4);
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 6px;
}
.footer-link:hover { color: var(--gold); padding-left: 4px; }
.footer-link i { font-size: 0.65rem; color: var(--gold); }

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.4);
  margin-bottom: 14px;
  transition: var(--transition-fast);
}
.footer-contact-item:hover { color: rgba(255,255,255,0.7); }
.footer-contact-item i { color: var(--gold); font-size: 0.9rem; width: 16px; }

.footer-bottom {
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-copyright {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.3);
}
.footer-copyright span {
  color: var(--gold);
}
.footer-legal {
  display: flex;
  gap: 20px;
}
.footer-legal a {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.3);
  transition: color 0.2s;
}
.footer-legal a:hover { color: var(--gold); }

/* ===== FLOATING WHATSAPP ===== */
.wa-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 58px;
  height: 58px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: white;
  z-index: 900;
  box-shadow: 0 4px 20px rgba(37,211,102,0.4), 0 2px 8px rgba(0,0,0,0.3);
  transition: var(--transition);
}
.wa-float:hover {
  transform: scale(1.12);
  box-shadow: 0 8px 32px rgba(37,211,102,0.5);
}
.wa-float::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25d366;
  animation: wa-ripple 2.5s ease-out infinite;
}
@keyframes wa-ripple {
  0% { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.2); }
}
.wa-float i { position: relative; z-index: 1; }

/* ===== CHATBOT ===== */
.chatbot-toggle {
  position: fixed;
  bottom: 28px;
  left: 28px;
  width: 58px;
  height: 58px;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--dark);
  z-index: 900;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(176,145,87,0.4);
  transition: var(--transition);
}
.chatbot-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 32px rgba(176,145,87,0.5);
}

.chatbot-window {
  position: fixed;
  bottom: 100px;
  left: 28px;
  width: 360px;
  height: 500px;
  background: #0d1510;
  border: 1px solid rgba(176,145,87,0.25);
  border-radius: 16px;
  z-index: 901;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 40px rgba(176,145,87,0.1);
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: bottom left;
}
.chatbot-window.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

.chatbot-header {
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(26,89,63,0.8), rgba(8,12,10,0.95));
  border-radius: 16px 16px 0 0;
  border-bottom: 1px solid rgba(176,145,87,0.2);
  display: flex;
  align-items: center;
  gap: 12px;
}
.chatbot-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(176,145,87,0.4);
  overflow: hidden;
  flex-shrink: 0;
}
.chatbot-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chatbot-info {}
.chatbot-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--white);
}
.chatbot-status {
  font-size: 0.72rem;
  color: #27c93f;
  display: flex;
  align-items: center;
  gap: 4px;
}
.chatbot-status::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #27c93f;
  border-radius: 50%;
  animation: pulse-dot 2s infinite;
}
.chatbot-close {
  margin-left: auto;
  color: rgba(255,255,255,0.4);
  font-size: 1.1rem;
  cursor: pointer;
  transition: color 0.2s;
  padding: 4px;
}
.chatbot-close:hover { color: var(--white); }

.chatbot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.chatbot-messages::-webkit-scrollbar { width: 3px; }
.chatbot-messages::-webkit-scrollbar-thumb { background: rgba(176,145,87,0.3); border-radius: 2px; }

.chat-msg {
  max-width: 82%;
  animation: msg-appear 0.25s ease;
}
@keyframes msg-appear {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.chat-msg.bot { align-self: flex-start; }
.chat-msg.user { align-self: flex-end; }

.chat-bubble {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.85rem;
  line-height: 1.55;
}
.chat-msg.bot .chat-bubble {
  background: rgba(26,89,63,0.25);
  border: 1px solid rgba(176,145,87,0.12);
  color: rgba(255,255,255,0.85);
  border-radius: 4px 12px 12px 12px;
}
.chat-msg.user .chat-bubble {
  background: linear-gradient(135deg, rgba(176,145,87,0.25), rgba(176,145,87,0.15));
  border: 1px solid rgba(176,145,87,0.2);
  color: var(--white);
  border-radius: 12px 4px 12px 12px;
}

.chat-quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.quick-reply {
  padding: 5px 12px;
  border: 1px solid rgba(176,145,87,0.3);
  border-radius: 20px;
  font-size: 0.75rem;
  color: var(--gold);
  cursor: pointer;
  transition: var(--transition-fast);
  background: rgba(176,145,87,0.05);
}
.quick-reply:hover {
  background: rgba(176,145,87,0.15);
  border-color: var(--gold);
}

.chatbot-typing {
  display: flex;
  gap: 4px;
  padding: 10px 14px;
  background: rgba(26,89,63,0.2);
  border: 1px solid rgba(176,145,87,0.1);
  border-radius: 4px 12px 12px 12px;
  width: fit-content;
  align-self: flex-start;
}
.chatbot-typing span {
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  animation: typing-bounce 1.2s ease infinite;
}
.chatbot-typing span:nth-child(2) { animation-delay: 0.2s; }
.chatbot-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

.chatbot-input-area {
  padding: 14px 16px;
  border-top: 1px solid rgba(176,145,87,0.12);
  display: flex;
  gap: 10px;
  background: rgba(8,12,10,0.6);
  border-radius: 0 0 16px 16px;
}
.chatbot-input {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(176,145,87,0.15);
  border-radius: 22px;
  padding: 9px 16px;
  font-size: 0.85rem;
  color: var(--white);
  outline: none;
  transition: border-color 0.2s;
}
.chatbot-input:focus { border-color: rgba(176,145,87,0.4); }
.chatbot-input::placeholder { color: rgba(255,255,255,0.25); }
.chatbot-send {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--transition-fast);
}
.chatbot-send:hover { transform: scale(1.1); box-shadow: 0 4px 14px var(--gold-glow); }

/* ===== PAGE HEADER (interior pages) ===== */
.page-header {
  padding: 160px 0 80px;
  background: radial-gradient(ellipse 70% 80% at 50% 0%, rgba(26,89,63,0.25) 0%, transparent 70%),
              var(--dark);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.page-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.page-header-title {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 700;
  color: var(--white);
  margin-bottom: 16px;
}
.page-header-sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.5);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.7;
}
.breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.35);
  margin-bottom: 24px;
}
.breadcrumb a { color: var(--gold); }
.breadcrumb span { color: rgba(176,145,87,0.4); }

/* ===== SERVICES PAGE ===== */
.services-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.service-detail-card {
  background: var(--dark-2);
  border: 1px solid rgba(176,145,87,0.1);
  border-radius: var(--radius-lg);
  padding: 44px 40px;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}
.service-detail-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0);
  transition: transform 0.4s ease;
}
.service-detail-card:hover {
  border-color: rgba(176,145,87,0.25);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}
.service-detail-card:hover::before { transform: scaleX(1); }

.sdc-icon {
  width: 64px;
  height: 64px;
  background: rgba(176,145,87,0.08);
  border: 1.5px solid rgba(176,145,87,0.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--gold);
  margin-bottom: 24px;
  transition: var(--transition);
}
.service-detail-card:hover .sdc-icon {
  background: rgba(176,145,87,0.15);
  border-color: var(--gold);
  transform: scale(1.08);
}

.sdc-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 14px;
}

.sdc-desc {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.75;
  margin-bottom: 24px;
}

.sdc-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 28px;
}
.sdc-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.87rem;
  color: rgba(255,255,255,0.6);
}
.sdc-feature i { color: var(--gold); font-size: 0.75rem; flex-shrink: 0; }

/* ===== PROJECTS PAGE ===== */
.filter-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 50px;
  flex-wrap: wrap;
}
.filter-btn {
  padding: 8px 22px;
  border-radius: 2px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid rgba(176,145,87,0.2);
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: var(--transition-fast);
  background: transparent;
}
.filter-btn:hover,
.filter-btn.active {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(176,145,87,0.08);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.project-card {
  background: var(--dark-2);
  border: 1px solid rgba(176,145,87,0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
  position: relative;
}
.project-card:hover {
  border-color: rgba(176,145,87,0.3);
  transform: translateY(-5px);
  box-shadow: var(--shadow-gold);
}

.project-thumb {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  position: relative;
  overflow: hidden;
}

.project-info { padding: 24px; }
.project-cat {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.project-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 8px;
}
.project-desc {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.4);
  line-height: 1.65;
  margin-bottom: 18px;
}

/* ===== BLOG PAGE ===== */
.blog-page-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 50px;
  align-items: start;
}

.blog-articles {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.blog-article-card {
  display: grid;
  grid-template-columns: 280px 1fr;
  background: var(--dark-2);
  border: 1px solid rgba(176,145,87,0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
}
.blog-article-card:hover {
  border-color: rgba(176,145,87,0.25);
  transform: translateX(4px);
  box-shadow: var(--shadow-card);
}

.article-img {
  height: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  flex-shrink: 0;
}
.article-body { padding: 28px; }
.article-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.article-category {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 3px 10px;
  background: rgba(176,145,87,0.1);
  border-radius: 2px;
}
.article-date {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.3);
}
.article-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 10px;
  line-height: 1.3;
  transition: color 0.2s;
}
.blog-article-card:hover .article-title { color: var(--gold-light); }
.article-excerpt {
  font-size: 0.87rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.7;
  margin-bottom: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-sidebar {}
.sidebar-widget {
  background: var(--dark-2);
  border: 1px solid rgba(176,145,87,0.1);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-bottom: 24px;
}
.widget-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(176,145,87,0.12);
}
.category-tag {
  display: inline-block;
  padding: 5px 14px;
  border: 1px solid rgba(176,145,87,0.2);
  border-radius: 2px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
  margin: 4px;
  cursor: pointer;
  transition: var(--transition-fast);
}
.category-tag:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(176,145,87,0.06);
}

/* ===== CONTACT PAGE ===== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 60px;
  align-items: start;
}

.contact-form-wrap {}
.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-group.full { grid-column: 1 / -1; }

.form-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
}

.form-control {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(176,145,87,0.15);
  border-radius: var(--radius);
  padding: 13px 16px;
  font-size: 0.9rem;
  color: var(--white);
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
  width: 100%;
}
.form-control:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(176,145,87,0.1);
}
.form-control::placeholder { color: rgba(255,255,255,0.2); }
.form-control option { background: var(--dark-2); }

textarea.form-control {
  resize: vertical;
  min-height: 130px;
}

.form-submit {
  grid-column: 1 / -1;
  margin-top: 8px;
}

.contact-info {}
.contact-info-card {
  background: var(--dark-2);
  border: 1px solid rgba(176,145,87,0.1);
  border-radius: var(--radius-lg);
  padding: 36px;
  margin-bottom: 20px;
}
.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(176,145,87,0.07);
}
.contact-item:last-child { border-bottom: none; padding-bottom: 0; }
.contact-item-icon {
  width: 42px;
  height: 42px;
  background: rgba(176,145,87,0.08);
  border: 1px solid rgba(176,145,87,0.2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 1rem;
  flex-shrink: 0;
}
.contact-item-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 4px;
}
.contact-item-value {
  font-size: 0.92rem;
  color: var(--white);
}
.contact-item-value a { color: var(--white); transition: color 0.2s; }
.contact-item-value a:hover { color: var(--gold); }

/* ===== SCROLL ANIMATIONS ===== */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-left.revealed { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-right.revealed { opacity: 1; transform: translateX(0); }

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
  .hero-content { gap: 40px; }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; }
  .footer-grid > *:last-child { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  :root { --section-py: 80px; }
  .hero-content { grid-template-columns: 1fr; text-align: center; }
  .hero-subtitle { margin: 0 auto 40px; }
  .hero-btns { justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-visual { display: none; }
  .value-grid { grid-template-columns: 1fr; }
  .value-card { border-right: none; border-bottom: 1px solid rgba(176,145,87,0.1); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .pricing-card.featured { transform: none; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .testimonial-card { flex: 0 0 calc(100% - 0px); }
  .blog-grid { grid-template-columns: 1fr; }
  .services-detail-grid { grid-template-columns: 1fr; }
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-page-grid { grid-template-columns: 1fr; }
  .blog-article-card { grid-template-columns: 1fr; }
  .article-img { min-height: 180px; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links, .nav-cta .btn { display: none; }
  .hamburger { display: flex; }
}

@media (max-width: 600px) {
  :root { --section-py: 60px; }
  .container { padding: 0 20px; }
  .nav-inner { padding: 0 20px; }
  .services-grid { grid-template-columns: 1fr; }
  .projects-grid { grid-template-columns: 1fr; }
  .contact-form { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .chatbot-window { width: calc(100vw - 40px); left: 20px; }
  .wa-float { bottom: 20px; right: 20px; }
  .chatbot-toggle { bottom: 20px; left: 20px; }
  .hero-stats { gap: 24px; }
  .portfolio-grid { grid-template-columns: 1fr; }
}

/* =====================================================
   VIBRANCY & LIFE — Visual Enhancement Layer
   ===================================================== */

/* ── HERO: fallback gradient (canvas overrides when JS runs) ── */
.hero {
  background:
    radial-gradient(ellipse 90% 75% at 50% -5%, rgba(26,89,63,0.50) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 50% 85%, rgba(176,145,87,0.10) 0%, transparent 50%),
    linear-gradient(to right, rgba(3,6,4,0.78) 0%, rgba(3,6,4,0.08) 45%, transparent 68%),
    var(--dark);
}

/* ── VALUE SECTION: fondo verde vivo ── */
.value-section {
  background:
    linear-gradient(180deg,
      var(--dark) 0%,
      rgba(26,89,63,0.18) 35%,
      rgba(26,89,63,0.12) 65%,
      var(--dark) 100%
    );
  border-top: 1px solid rgba(176,145,87,0.18);
  border-bottom: 1px solid rgba(176,145,87,0.18);
}

.value-card { border-right-color: rgba(176,145,87,0.14); }
.value-icon {
  background: linear-gradient(135deg, rgba(26,89,63,0.25), rgba(176,145,87,0.15));
  border-color: rgba(176,145,87,0.4);
}
.value-card:hover .value-icon {
  background: linear-gradient(135deg, rgba(26,89,63,0.4), rgba(176,145,87,0.25));
  box-shadow: 0 0 40px rgba(176,145,87,0.25), 0 0 80px rgba(26,89,63,0.2);
}

/* ── SERVICES SECTION: gradiente top más visible ── */
.services-section::before {
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(26,89,63,0.28) 0%, transparent 65%),
    radial-gradient(ellipse 35% 35% at 90% 85%, rgba(176,145,87,0.12) 0%, transparent 55%);
}

/* Service cards: más vida con gradiente y borde verde */
.service-card {
  background: linear-gradient(145deg, rgba(13,26,20,0.9), rgba(8,12,10,0.98));
  border: 1px solid rgba(176,145,87,0.1);
  border-top: 1px solid rgba(176,145,87,0.06);
}
.service-card:hover {
  background: linear-gradient(145deg, rgba(26,89,63,0.18), rgba(13,20,16,0.97));
  border-color: rgba(176,145,87,0.35);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 40px rgba(176,145,87,0.12), inset 0 1px 0 rgba(176,145,87,0.15);
  transform: translateY(-5px);
}
.services-grid { background: rgba(176,145,87,0.15); }

/* Icon brillante */
.service-icon {
  display: inline-flex;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(26,89,63,0.3), rgba(176,145,87,0.15));
  border: 1px solid rgba(176,145,87,0.25);
  margin-bottom: 18px;
  font-size: 1.5rem;
}
.service-card:hover .service-icon {
  background: linear-gradient(135deg, rgba(26,89,63,0.5), rgba(176,145,87,0.25));
  border-color: var(--gold);
  box-shadow: 0 0 24px rgba(176,145,87,0.3);
  transform: scale(1.15) rotate(-3deg);
}

/* ── PRICING: más rico visualmente ── */
.pricing-section {
  background:
    linear-gradient(180deg, var(--dark) 0%, rgba(13,26,20,0.7) 40%, rgba(26,89,63,0.1) 55%, rgba(13,26,20,0.7) 70%, var(--dark) 100%);
}

.pricing-card {
  background: linear-gradient(145deg, rgba(13,26,20,0.7), rgba(8,12,10,0.95));
  border: 1px solid rgba(176,145,87,0.16);
}
.pricing-card:hover {
  background: linear-gradient(145deg, rgba(26,89,63,0.15), rgba(13,20,16,0.95));
  border-color: rgba(176,145,87,0.4);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 50px rgba(176,145,87,0.15);
}
.pricing-card.featured {
  background: linear-gradient(145deg, rgba(26,89,63,0.2), rgba(176,145,87,0.08), rgba(13,20,16,0.95));
  border-color: var(--gold);
  box-shadow: 0 0 60px rgba(176,145,87,0.2), 0 24px 60px rgba(0,0,0,0.5);
}

/* ── PORTFOLIO: más drama ── */
.portfolio-section { background: var(--dark-2); }
.portfolio-card:hover .portfolio-overlay {
  background: linear-gradient(to top, rgba(8,12,10,0.98) 0%, rgba(8,12,10,0.5) 50%, rgba(26,89,63,0.15) 100%);
}
.portfolio-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(176,145,87,0);
  transition: border-color 0.4s;
  pointer-events: none;
  z-index: 2;
}
.portfolio-card:hover::after { border-color: rgba(176,145,87,0.35); }

/* ── TESTIMONIALS: fondo rico ── */
.testimonials-section {
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(26,89,63,0.12) 0%, transparent 70%),
    var(--dark-2);
}
.testimonial-card {
  background: linear-gradient(145deg, rgba(13,26,20,0.6), rgba(8,12,10,0.9));
  border-color: rgba(176,145,87,0.15);
}
.testimonial-card:hover {
  border-color: rgba(176,145,87,0.3);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 30px rgba(176,145,87,0.08);
}

/* ── BLOG CARDS: más coloridas ── */
.blog-section {
  background:
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(176,145,87,0.07) 0%, transparent 55%),
    var(--dark);
}
.blog-card {
  background: linear-gradient(145deg, rgba(13,26,20,0.65), rgba(8,12,10,0.95));
  border-color: rgba(176,145,87,0.1);
}
.blog-card:hover {
  background: linear-gradient(145deg, rgba(26,89,63,0.15), rgba(13,20,16,0.97));
  border-color: rgba(176,145,87,0.3);
  box-shadow: 0 20px 50px rgba(0,0,0,0.45), 0 0 30px rgba(176,145,87,0.1);
}

/* Blog image emojis más grandes y con fondo vivido */
.blog-img { font-size: 3.5rem; }

/* ── SECTION HEADERS: línea decorativa dorada ── */
.section-header::after {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-dark), var(--gold), var(--gold-dark), transparent);
  margin: 22px auto 0;
  border-radius: 1px;
}

/* ── SERVICE DETAIL CARDS (página servicios): más vida ── */
.service-detail-card {
  background: linear-gradient(145deg, rgba(13,26,20,0.7), rgba(8,12,10,0.95));
  border-color: rgba(176,145,87,0.12);
}
.service-detail-card:hover {
  background: linear-gradient(145deg, rgba(26,89,63,0.16), rgba(13,20,16,0.97));
  border-color: rgba(176,145,87,0.35);
  box-shadow: 0 20px 50px rgba(0,0,0,0.45), 0 0 40px rgba(176,145,87,0.1);
}
.sdc-icon {
  background: linear-gradient(135deg, rgba(26,89,63,0.3), rgba(176,145,87,0.15));
  border-color: rgba(176,145,87,0.35);
}
.service-detail-card:hover .sdc-icon {
  background: linear-gradient(135deg, rgba(26,89,63,0.5), rgba(176,145,87,0.25));
  border-color: var(--gold);
  box-shadow: 0 0 28px rgba(176,145,87,0.3);
}

/* ── PROYECTOS: cards más vivas ── */
.project-card {
  background: linear-gradient(145deg, rgba(13,26,20,0.65), rgba(8,12,10,0.95));
  border-color: rgba(176,145,87,0.1);
}
.project-card:hover {
  background: linear-gradient(145deg, rgba(26,89,63,0.15), rgba(13,20,16,0.97));
  border-color: rgba(176,145,87,0.35);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 40px rgba(176,145,87,0.15);
}

/* ── PAGE HEADER (páginas interiores): más brillante ── */
.page-header {
  background:
    radial-gradient(ellipse 80% 80% at 50% 0%, rgba(26,89,63,0.4) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 80% 60%, rgba(176,145,87,0.15) 0%, transparent 55%),
    var(--dark);
}

/* ── FOOTER: más verde ── */
footer {
  background:
    linear-gradient(180deg, rgba(26,89,63,0.08) 0%, var(--dark-2) 20%);
  border-top-color: rgba(176,145,87,0.2);
}

/* ── TEXTO CUERPO: ligeramente más visible ── */
.hero-subtitle { color: rgba(255,255,255,0.72); }
.section-header p { color: rgba(255,255,255,0.6); }
.value-desc { color: rgba(255,255,255,0.58); }
.service-desc { color: rgba(255,255,255,0.55); }
.sdc-desc { color: rgba(255,255,255,0.6); }
.pricing-feature { color: rgba(255,255,255,0.75); }
.testimonial-text { color: rgba(255,255,255,0.8); }
.blog-excerpt { color: rgba(255,255,255,0.55); }

/* ── HERO STATS: separador más visible ── */
.hero-stats {
  border-top-color: rgba(176,145,87,0.22);
}

/* ── GEO PATTERN: más visible ── */
.geo-pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23b09157' stroke-width='0.6' stroke-opacity='0.22'%3E%3Cpolygon points='40,2 52,14 68,14 78,28 78,52 68,66 52,66 40,78 28,66 12,66 2,52 2,28 12,14 28,14'/%3E%3Cpolygon points='40,10 50,20 64,20 72,32 72,48 64,60 50,60 40,70 30,60 16,60 8,48 8,32 16,20 30,20'/%3E%3Cline x1='40' y1='2' x2='40' y2='78'/%3E%3Cline x1='2' y1='40' x2='78' y2='40'/%3E%3Cline x1='12' y1='14' x2='68' y2='66'/%3E%3Cline x1='68' y1='14' x2='12' y2='66'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── CONTACT INFO CARD: más rica ── */
.contact-info-card {
  background: linear-gradient(145deg, rgba(13,26,20,0.7), rgba(8,12,10,0.95));
  border-color: rgba(176,145,87,0.15);
}
.contact-item-icon {
  background: linear-gradient(135deg, rgba(26,89,63,0.3), rgba(176,145,87,0.15));
  border-color: rgba(176,145,87,0.3);
}

/* ── SIDEBAR WIDGETS: más vivos ── */
.sidebar-widget {
  background: linear-gradient(145deg, rgba(13,26,20,0.65), rgba(8,12,10,0.95));
  border-color: rgba(176,145,87,0.13);
}

/* ── BLOG ARTICLE CARD: ── */
.blog-article-card {
  background: linear-gradient(145deg, rgba(13,26,20,0.65), rgba(8,12,10,0.95));
  border-color: rgba(176,145,87,0.1);
}
.blog-article-card:hover {
  background: linear-gradient(145deg, rgba(26,89,63,0.15), rgba(13,20,16,0.97));
  border-color: rgba(176,145,87,0.3);
}

/* ── SCROLLBAR: más dorada ── */
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--gold-dark), var(--gold), var(--gold-dark));
  box-shadow: 0 0 6px rgba(176,145,87,0.4);
}

/* ── BUTTONS: hover más dramático ── */
.btn-primary:hover {
  box-shadow: 0 8px 30px rgba(176,145,87,0.35), 0 2px 8px rgba(0,0,0,0.4);
}
.btn-gold:hover {
  box-shadow: 0 8px 30px rgba(176,145,87,0.4), 0 2px 8px rgba(0,0,0,0.4);
}

/* ── HERO CANVAS GLOW: partículas más visibles ── */
#hero-canvas { opacity: 0.9; }

/* =====================================================
   CORRECTIONS v2 — Cursor off · Verde vivo · Más claro · Botones nuevos
   ===================================================== */

/* ── CURSOR DORADO: desactivado ── */
.cursor-ring,
.cursor-dot { display: none !important; }
* { cursor: auto; }
a, button, [role="button"], .btn, .service-card, .portfolio-card,
.blog-card, .filter-btn, .slider-btn, .quick-reply,
.chatbot-toggle, .chatbot-send, .chatbot-close, .hamburger {
  cursor: pointer;
}

/* ── FONDO: más claro y respirable ── */
body { background: #0f1a13; }

.hero {
  background:
    radial-gradient(ellipse 85% 70% at 5% 55%, rgba(30,122,82,0.52) 0%, transparent 55%),
    radial-gradient(ellipse 55% 50% at 88% 15%, rgba(176,145,87,0.2) 0%, transparent 50%),
    radial-gradient(ellipse 45% 40% at 55% 95%, rgba(30,122,82,0.3) 0%, transparent 55%),
    #0f1a13;
}

.value-section {
  background: linear-gradient(180deg,
    #0f1a13 0%,
    rgba(30,122,82,0.24) 35%,
    rgba(30,122,82,0.18) 65%,
    #0f1a13 100%
  );
  border-top-color: rgba(176,145,87,0.22);
  border-bottom-color: rgba(176,145,87,0.22);
}

.services-section,
.blog-section,
.portfolio-section { background: #0f1a13; }

.pricing-section,
.testimonials-section {
  background: linear-gradient(180deg, #0f1a13 0%, #142018 40%, rgba(30,122,82,0.12) 55%, #142018 70%, #0f1a13 100%);
}

footer { background: linear-gradient(180deg, rgba(30,122,82,0.1) 0%, #111c15 20%); }

/* Cards: fondos más claros (verde oscuro en lugar de casi-negro) */
.service-card {
  background: linear-gradient(145deg, #152018, #0f1a13);
}
.service-card:hover {
  background: linear-gradient(145deg, rgba(30,122,82,0.2), #121c16);
}
.pricing-card,
.testimonial-card {
  background: linear-gradient(145deg, #152018, #0f1a13);
  border-color: rgba(176,145,87,0.18);
}
.pricing-card.featured {
  background: linear-gradient(145deg, rgba(30,122,82,0.22), rgba(176,145,87,0.08), #121c16);
}
.blog-card {
  background: linear-gradient(145deg, #162119, #101910);
  border-color: rgba(176,145,87,0.12);
}
.blog-card:hover { background: linear-gradient(145deg, rgba(30,122,82,0.2), #141e14); }

.service-detail-card,
.project-card {
  background: linear-gradient(145deg, #152018, #0f1a13);
  border-color: rgba(176,145,87,0.14);
}
.service-detail-card:hover,
.project-card:hover {
  background: linear-gradient(145deg, rgba(30,122,82,0.2), #121c16);
}

.blog-article-card,
.sidebar-widget,
.contact-info-card {
  background: linear-gradient(145deg, #162119, #101910);
  border-color: rgba(176,145,87,0.14);
}
.blog-article-card:hover { background: linear-gradient(145deg, rgba(30,122,82,0.18), #141e14); }

.chatbot-window { background: #112016; }
.chatbot-header { background: linear-gradient(135deg, rgba(30,122,82,0.7), rgba(10,16,12,0.98)); }

/* ── VERDE: más brillante y saturado ── */
/* Icon backgrounds (value + sdc) */
.value-icon {
  background: linear-gradient(135deg, rgba(30,122,82,0.35), rgba(176,145,87,0.2));
  border-color: rgba(176,145,87,0.45);
}
.value-card:hover .value-icon {
  background: linear-gradient(135deg, rgba(30,122,82,0.55), rgba(176,145,87,0.3));
  box-shadow: 0 0 36px rgba(30,122,82,0.35), 0 0 60px rgba(176,145,87,0.15);
}
.sdc-icon {
  background: linear-gradient(135deg, rgba(30,122,82,0.35), rgba(176,145,87,0.18));
  border-color: rgba(176,145,87,0.4);
}
.service-detail-card:hover .sdc-icon {
  background: linear-gradient(135deg, rgba(30,122,82,0.55), rgba(176,145,87,0.28));
  box-shadow: 0 0 30px rgba(30,122,82,0.35);
}
.service-icon {
  background: linear-gradient(135deg, rgba(30,122,82,0.35), rgba(176,145,87,0.18));
  border-color: rgba(176,145,87,0.35);
}
.service-card:hover .service-icon {
  background: linear-gradient(135deg, rgba(30,122,82,0.55), rgba(176,145,87,0.28));
  box-shadow: 0 0 24px rgba(30,122,82,0.4);
  border-color: var(--gold);
}
.contact-item-icon {
  background: linear-gradient(135deg, rgba(30,122,82,0.35), rgba(176,145,87,0.18));
  border-color: rgba(176,145,87,0.35);
}

/* Page header: verde más vivo */
.page-header {
  background:
    radial-gradient(ellipse 80% 75% at 50% 0%, rgba(30,122,82,0.45) 0%, transparent 65%),
    radial-gradient(ellipse 45% 35% at 80% 60%, rgba(176,145,87,0.18) 0%, transparent 55%),
    #0f1a13;
}

/* ── BOTONES: nuevo estilo — glass oscuro + gold ── */
.btn-primary {
  background: rgba(15,26,19,0.7);
  color: var(--gold-light);
  border: 1.5px solid rgba(176,145,87,0.55);
  backdrop-filter: blur(10px);
}
.btn-primary::before {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
}
.btn-primary:hover {
  color: #0a0f0b;
  border-color: var(--gold);
  box-shadow: 0 8px 32px rgba(176,145,87,0.38), 0 2px 8px rgba(0,0,0,0.5);
}

/* Nav CTA button en fondo scrolled */
.navbar.scrolled .btn-primary {
  background: rgba(20,35,26,0.8);
}

/* ── TEXTO: más visible ── */
.hero-subtitle { color: rgba(255,255,255,0.75); }
.value-desc    { color: rgba(255,255,255,0.65); }
.service-desc  { color: rgba(255,255,255,0.62); }
.sdc-desc      { color: rgba(255,255,255,0.65); }
.pricing-feature { color: rgba(255,255,255,0.78); }
.testimonial-text { color: rgba(255,255,255,0.82); }
.blog-excerpt  { color: rgba(255,255,255,0.6); }
.article-excerpt { color: rgba(255,255,255,0.6); }
.section-header p { color: rgba(255,255,255,0.62); }
.footer-desc   { color: rgba(255,255,255,0.5); }
.footer-link   { color: rgba(255,255,255,0.48); }
.nav-link      { color: rgba(255,255,255,0.82); }

/* =====================================================
   v3 — Menos verde · Negro premium neutro · Iconos sin caja
   ===================================================== */

/* ── FONDOS: negro premium, verde solo en el hero como acento ── */
body { background: #0c0c0c !important; }

.hero {
  background:
    radial-gradient(ellipse 55% 50% at 0% 65%, rgba(26,89,63,0.22) 0%, transparent 52%),
    radial-gradient(ellipse 35% 30% at 94% 10%, rgba(176,145,87,0.11) 0%, transparent 45%),
    #0c0c0c !important;
}

.value-section {
  background: linear-gradient(180deg, #0c0c0c 0%, #101010 50%, #0c0c0c 100%) !important;
  border-color: rgba(176,145,87,0.13) !important;
}

.services-section,
.blog-section  { background: #0c0c0c !important; }

.pricing-section  { background: #0f0f0f !important; }
.testimonials-section { background: #0f0f0f !important; }
.portfolio-section { background: #0d0d0d !important; }

footer {
  background: #0f0f0f !important;
  border-top-color: rgba(176,145,87,0.15) !important;
}

.navbar.scrolled {
  background: rgba(12,12,12,0.97) !important;
}

/* ── CARDS: negro neutro elegante, verde solo en hover ── */
.service-card,
.pricing-card,
.blog-card,
.testimonial-card,
.service-detail-card,
.project-card,
.blog-article-card,
.sidebar-widget,
.contact-info-card {
  background: linear-gradient(145deg, #161616, #0d0d0d) !important;
}

.service-card:hover,
.blog-card:hover,
.service-detail-card:hover,
.project-card:hover,
.blog-article-card:hover {
  background: linear-gradient(145deg, rgba(26,89,63,0.1), #121212) !important;
}

.pricing-card:hover {
  background: linear-gradient(145deg, rgba(26,89,63,0.08), #131313) !important;
}

.pricing-card.featured {
  background: linear-gradient(145deg, rgba(26,89,63,0.14), rgba(176,145,87,0.06), #121212) !important;
}

.chatbot-window { background: #0f0f0f !important; }
.chatbot-header { background: linear-gradient(135deg, rgba(26,89,63,0.65), rgba(8,12,10,0.98)) !important; }

/* ── ICONOS VALUE: caja mínima sin verde dominante ── */
.value-icon {
  background: rgba(176,145,87,0.07) !important;
  border-color: rgba(176,145,87,0.22) !important;
}
.value-card:hover .value-icon {
  background: rgba(176,145,87,0.14) !important;
  border-color: rgba(176,145,87,0.5) !important;
  box-shadow: 0 0 22px rgba(176,145,87,0.2) !important;
  transform: scale(1.08) rotate(-4deg) !important;
}

/* ── ICONOS SERVICE CARDS: sin caja · dorado → blanco en hover ── */
.service-icon {
  display: block !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  font-size: 2rem !important;
  color: var(--gold) !important;
  margin-bottom: 20px !important;
}

.service-card:hover .service-icon {
  background: transparent !important;
  border: none !important;
  color: rgba(255,255,255,0.95) !important;
  transform: scale(1.14) !important;
  text-shadow: 0 0 18px rgba(255,255,255,0.4) !important;
  box-shadow: none !important;
}

/* SDS icon (servicios page): igual, sin verde, dorado → blanco hover */
.sdc-icon {
  background: rgba(176,145,87,0.07) !important;
  border-color: rgba(176,145,87,0.22) !important;
}
.service-detail-card:hover .sdc-icon {
  background: rgba(176,145,87,0.14) !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 24px rgba(176,145,87,0.25) !important;
}

/* ── CONTACT icon: sin verde ── */
.contact-item-icon {
  background: rgba(176,145,87,0.07) !important;
  border-color: rgba(176,145,87,0.22) !important;
}

/* =====================================================
   v4 — SECTION ATMOSPHERES: cada sección su propio ambiente
   ===================================================== */

/* ── HERO: verde oscuro + dorado (ya tiene, refuerzo) ── */
.hero {
  background:
    radial-gradient(ellipse 60% 55% at 0% 65%, rgba(26,89,63,0.28) 0%, transparent 55%),
    radial-gradient(ellipse 40% 35% at 95% 10%, rgba(176,145,87,0.13) 0%, transparent 48%),
    radial-gradient(ellipse 35% 30% at 50% 100%, rgba(26,89,63,0.15) 0%, transparent 50%),
    #0a0a0a !important;
}

/* ── VALUE PROPS: cálido, ámbar / dorado sutil ── */
.value-section {
  background:
    radial-gradient(ellipse 65% 60% at 85% 50%, rgba(176,145,87,0.09) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 10% 80%, rgba(176,145,87,0.05) 0%, transparent 55%),
    linear-gradient(180deg, #0a0a0a 0%, #111009 50%, #0a0a0a 100%) !important;
  border-top: 1px solid rgba(176,145,87,0.14) !important;
  border-bottom: 1px solid rgba(176,145,87,0.14) !important;
}

/* ── SERVICES: negro puro, limpio, neutral ── */
.services-section {
  background: #0a0a0a !important;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.services-section::before {
  background:
    radial-gradient(ellipse 55% 45% at 50% 0%, rgba(176,145,87,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 30% 30% at 95% 90%, rgba(26,89,63,0.07) 0%, transparent 50%) !important;
}

/* ── PRICING: verde profundo, premium ── */
.pricing-section {
  background:
    radial-gradient(ellipse 70% 55% at 50% 55%, rgba(26,89,63,0.13) 0%, transparent 65%),
    radial-gradient(ellipse 40% 35% at 5% 20%, rgba(26,89,63,0.08) 0%, transparent 50%),
    linear-gradient(180deg, #0a0a0a 0%, #090d0b 45%, #07100d 55%, #0a0a0a 100%) !important;
  border-top: 1px solid rgba(26,89,63,0.25) !important;
  border-bottom: 1px solid rgba(26,89,63,0.15) !important;
}

/* ── PORTFOLIO: negro máximo, contraste total para las imágenes ── */
.portfolio-section {
  background: #060606 !important;
  border-top: 1px solid rgba(176,145,87,0.1);
}

/* ── TESTIMONIALS: verde-noche profundo ── */
.testimonials-section {
  background:
    radial-gradient(ellipse 65% 55% at 15% 50%, rgba(26,89,63,0.12) 0%, transparent 58%),
    radial-gradient(ellipse 45% 40% at 85% 30%, rgba(26,89,63,0.07) 0%, transparent 52%),
    linear-gradient(180deg, #0a0a0a 0%, #080e0b 45%, #070d09 55%, #0a0a0a 100%) !important;
  border-top: 1px solid rgba(26,89,63,0.2) !important;
  border-bottom: 1px solid rgba(26,89,63,0.12) !important;
}

/* ── BLOG: cálido, ámbar muy sutil ── */
.blog-section {
  background:
    radial-gradient(ellipse 60% 50% at 75% 60%, rgba(176,145,87,0.07) 0%, transparent 58%),
    radial-gradient(ellipse 35% 35% at 20% 25%, rgba(176,145,87,0.04) 0%, transparent 50%),
    linear-gradient(180deg, #0a0a0a 0%, #100f0b 45%, #0f0d0a 55%, #0a0a0a 100%) !important;
  border-top: 1px solid rgba(176,145,87,0.12);
}

/* ── CTA SECTION: ya tiene verde, mejoramos ── */
.cta-section {
  background: linear-gradient(135deg, rgba(26,89,63,0.85) 0%, rgba(8,12,10,0.97) 60%) !important;
}

/* ── FOOTER: neutro oscuro con línea dorada ── */
footer {
  background: #0a0a0a !important;
  border-top: 1px solid rgba(176,145,87,0.18) !important;
}

/* ── PAGE HEADERS (páginas interiores): verde premium ── */
.page-header {
  background:
    radial-gradient(ellipse 80% 70% at 50% -10%, rgba(26,89,63,0.4) 0%, transparent 65%),
    radial-gradient(ellipse 40% 35% at 85% 70%, rgba(176,145,87,0.12) 0%, transparent 55%),
    #0a0a0a !important;
}

/* ── SECTION SEPARATORS: líneas decorativas entre secciones ── */
.value-section,
.pricing-section,
.testimonials-section,
.blog-section {
  position: relative;
}

/* Línea dorada top en secciones pares */
.pricing-section::after,
.blog-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(176,145,87,0.2), transparent);
}

/* ── CARDS: tonos acordes a su sección ── */

/* En value section (cálido): cards con borde dorado más cálido */
.value-card {
  border-right-color: rgba(176,145,87,0.12) !important;
}

/* En pricing: cards ya tienen el featured verde */

/* En testimonials (verde-noche): cards más verdes */
.testimonial-card {
  background: linear-gradient(145deg, #0e1611, #090e0b) !important;
  border-color: rgba(176,145,87,0.14) !important;
}
.testimonial-card:hover {
  background: linear-gradient(145deg, rgba(26,89,63,0.15), #0b130e) !important;
}

/* En blog (cálido): cards con toque ámbar */
.blog-card {
  background: linear-gradient(145deg, #141209, #0c0c08) !important;
}
.blog-card:hover {
  background: linear-gradient(145deg, rgba(176,145,87,0.1), #111009) !important;
}

/* BOOKING APP en el laptop: mantiene verde ── */
.booking-app { background: #0d1a14 !important; }
.app-topbar  { background: #071010 !important; }
.app-sidebar-panel { background: #071310 !important; }

/* =====================================================
   v5 — REAL CONTRAST: secciones con personalidad, cards visibles
   ===================================================== */

body { background: #080808 !important; }

.hero {
  background:
    radial-gradient(ellipse 65% 55% at 0% 65%, rgba(26,89,63,0.35) 0%, transparent 58%),
    radial-gradient(ellipse 40% 35% at 95% 10%, rgba(176,145,87,0.14) 0%, transparent 48%),
    #080808 !important;
}

.value-section {
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(26,89,63,0.22) 0%, transparent 70%),
    #0d1510 !important;
  border-top: 1px solid rgba(26,89,63,0.35) !important;
  border-bottom: 1px solid rgba(26,89,63,0.25) !important;
}

.services-section {
  background: #0a0a0a !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
}

.pricing-section {
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(26,89,63,0.2) 0%, transparent 70%),
    #0c1410 !important;
  border-top: 1px solid rgba(26,89,63,0.3) !important;
  border-bottom: 1px solid rgba(26,89,63,0.2) !important;
}

.portfolio-section {
  background: #060606 !important;
  border-top: 1px solid rgba(176,145,87,0.12) !important;
}

.testimonials-section {
  background:
    radial-gradient(ellipse 70% 55% at 20% 50%, rgba(26,89,63,0.18) 0%, transparent 62%),
    #0a1210 !important;
  border-top: 1px solid rgba(26,89,63,0.28) !important;
}

.blog-section {
  background:
    radial-gradient(ellipse 55% 50% at 80% 60%, rgba(176,145,87,0.08) 0%, transparent 60%),
    #0e0c09 !important;
  border-top: 1px solid rgba(176,145,87,0.15) !important;
}

.cta-section {
  background: linear-gradient(135deg, rgba(26,89,63,0.9) 0%, rgba(8,16,11,0.98) 65%) !important;
}

footer {
  background: #0d0d0d !important;
  border-top: 1px solid rgba(176,145,87,0.22) !important;
}

/* CARDS: claramente más claras que su fondo */

.value-card {
  background: rgba(28,43,30,0.7) !important;
  border-right-color: rgba(26,89,63,0.25) !important;
}
.value-card:hover { background: rgba(32,55,36,0.75) !important; }

.service-card {
  background: #1a1a1a !important;
  border: 1px solid rgba(176,145,87,0.14) !important;
}
.service-card:hover {
  background: #1f2a22 !important;
  border-color: rgba(176,145,87,0.38) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6), 0 0 28px rgba(176,145,87,0.1) !important;
  transform: translateY(-4px) !important;
}
.services-grid { background: rgba(176,145,87,0.2) !important; gap: 2px !important; }

.pricing-card {
  background: linear-gradient(145deg, #1d2b20, #162218) !important;
  border-color: rgba(176,145,87,0.22) !important;
}
.pricing-card:hover {
  background: linear-gradient(145deg, #243325, #1a2820) !important;
  border-color: rgba(176,145,87,0.42) !important;
}
.pricing-card.featured {
  background: linear-gradient(145deg, #1e3525, rgba(176,145,87,0.08), #162218) !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 50px rgba(26,89,63,0.3), 0 0 30px rgba(176,145,87,0.18) !important;
}

.testimonial-card {
  background: linear-gradient(145deg, #1a2b22, #122018) !important;
  border-color: rgba(176,145,87,0.18) !important;
}
.testimonial-card:hover {
  background: linear-gradient(145deg, #1f3528, #162820) !important;
  border-color: rgba(176,145,87,0.36) !important;
}

.blog-card {
  background: linear-gradient(145deg, #1e1b11, #181510) !important;
  border-color: rgba(176,145,87,0.16) !important;
}
.blog-card:hover {
  background: linear-gradient(145deg, #252010, #1e1b11) !important;
  border-color: rgba(176,145,87,0.36) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 20px rgba(176,145,87,0.12) !important;
}

.service-detail-card {
  background: linear-gradient(145deg, #1d2b20, #152218) !important;
  border-color: rgba(176,145,87,0.18) !important;
}
.service-detail-card:hover {
  background: linear-gradient(145deg, #243325, #1a2820) !important;
  border-color: rgba(176,145,87,0.4) !important;
}
.project-card {
  background: linear-gradient(145deg, #1a1a1a, #131313) !important;
  border-color: rgba(176,145,87,0.14) !important;
}
.project-card:hover {
  background: linear-gradient(145deg, #1f2a22, #171f1a) !important;
  border-color: rgba(176,145,87,0.38) !important;
}
.blog-article-card {
  background: linear-gradient(145deg, #1e1b11, #181510) !important;
  border-color: rgba(176,145,87,0.14) !important;
}
.blog-article-card:hover {
  background: linear-gradient(145deg, #252010, #1e1b11) !important;
  border-color: rgba(176,145,87,0.34) !important;
}
.sidebar-widget {
  background: linear-gradient(145deg, #1a1a1a, #121212) !important;
  border-color: rgba(176,145,87,0.16) !important;
}
.contact-info-card {
  background: linear-gradient(145deg, #1a2b22, #121f18) !important;
  border-color: rgba(176,145,87,0.18) !important;
}
.chatbot-window { background: #111a13 !important; }

/* TEXTO: máxima legibilidad */
.value-title   { color: rgba(255,255,255,0.95) !important; }
.value-desc    { color: rgba(255,255,255,0.72) !important; }
.service-title { color: rgba(255,255,255,0.95) !important; }
.service-desc  { color: rgba(255,255,255,0.68) !important; }
.sdc-title     { color: rgba(255,255,255,0.95) !important; }
.sdc-desc      { color: rgba(255,255,255,0.68) !important; }
.pricing-name  { color: rgba(255,255,255,0.95) !important; }
.pricing-feature { color: rgba(255,255,255,0.82) !important; }
.testimonial-text { color: rgba(255,255,255,0.85) !important; }
.blog-title    { color: rgba(255,255,255,0.95) !important; }
.blog-excerpt  { color: rgba(255,255,255,0.65) !important; }
.hero-subtitle { color: rgba(255,255,255,0.78) !important; }
.section-header p { color: rgba(255,255,255,0.65) !important; }

/* =====================================================
   v6 — DRAMATIC CONTRAST: cards clearly lighter than sections
   ===================================================== */

/* Section backgrounds: truly dark so cards pop */
body { background: #030303 !important; }

.hero {
  background:
    radial-gradient(ellipse 65% 55% at 0% 65%, rgba(26,89,63,0.38) 0%, transparent 58%),
    radial-gradient(ellipse 40% 35% at 95% 10%, rgba(176,145,87,0.15) 0%, transparent 48%),
    #050505 !important;
}

.value-section {
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(26,89,63,0.28) 0%, transparent 70%),
    #090e0a !important;
  border-top: 1px solid rgba(26,89,63,0.4) !important;
  border-bottom: 1px solid rgba(26,89,63,0.28) !important;
}

.services-section {
  background: #030303 !important;
  border-top: 1px solid rgba(176,145,87,0.1) !important;
}

.pricing-section {
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(26,89,63,0.24) 0%, transparent 70%),
    #060c08 !important;
  border-top: 1px solid rgba(26,89,63,0.35) !important;
  border-bottom: 1px solid rgba(26,89,63,0.22) !important;
}

.portfolio-section {
  background: #040404 !important;
  border-top: 1px solid rgba(176,145,87,0.14) !important;
}

.testimonials-section {
  background:
    radial-gradient(ellipse 70% 55% at 20% 50%, rgba(26,89,63,0.22) 0%, transparent 62%),
    #060d08 !important;
  border-top: 1px solid rgba(26,89,63,0.32) !important;
}

.blog-section {
  background:
    radial-gradient(ellipse 55% 50% at 80% 60%, rgba(176,145,87,0.1) 0%, transparent 60%),
    #050502 !important;
  border-top: 1px solid rgba(176,145,87,0.16) !important;
}

/* ── Service cards: #242424 on #030303 = 36 vs 3 levels, clearly visible ── */
.service-card {
  background: #242424 !important;
  border: 1px solid rgba(176,145,87,0.16) !important;
  border-left: 3px solid rgba(176,145,87,0.32) !important;
}
.service-card:hover {
  background: #2b3028 !important;
  border-left-color: rgba(176,145,87,0.7) !important;
  border-color: rgba(176,145,87,0.42) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.7), 0 0 28px rgba(176,145,87,0.14) !important;
  transform: translateY(-4px) !important;
}
.services-grid {
  background: rgba(176,145,87,0.14) !important;
  gap: 1px !important;
}

/* ── Value cards ── */
.value-card {
  background: rgba(38,62,44,0.82) !important;
  border: 1px solid rgba(26,89,63,0.35) !important;
}
.value-card:hover {
  background: rgba(46,74,52,0.88) !important;
  border-color: rgba(26,89,63,0.55) !important;
}

/* ── Pricing cards ── */
.pricing-card {
  background: linear-gradient(145deg, #1f2f22, #162018) !important;
  border-color: rgba(176,145,87,0.26) !important;
}
.pricing-card:hover {
  background: linear-gradient(145deg, #263828, #1c2820) !important;
  border-color: rgba(176,145,87,0.46) !important;
}
.pricing-card.featured {
  background: linear-gradient(145deg, #1e3a28, rgba(176,145,87,0.06), #14201a) !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 50px rgba(26,89,63,0.32), 0 0 30px rgba(176,145,87,0.2) !important;
}

/* ── Testimonial cards ── */
.testimonial-card {
  background: linear-gradient(145deg, #1f3028, #152218) !important;
  border-color: rgba(176,145,87,0.22) !important;
}
.testimonial-card:hover {
  background: linear-gradient(145deg, #243830, #1a2a22) !important;
  border-color: rgba(176,145,87,0.4) !important;
}

/* ── Blog cards: warm amber on near-black ── */
.blog-card {
  background: linear-gradient(145deg, #222016, #191710) !important;
  border-color: rgba(176,145,87,0.2) !important;
}
.blog-card:hover {
  background: linear-gradient(145deg, #2c2818, #22201a) !important;
  border-color: rgba(176,145,87,0.4) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.6), 0 0 20px rgba(176,145,87,0.14) !important;
}

/* ── Other page cards ── */
.service-detail-card {
  background: linear-gradient(145deg, #1f2f22, #162018) !important;
  border-left: 3px solid rgba(176,145,87,0.3) !important;
  border-color: rgba(176,145,87,0.2) !important;
}
.service-detail-card:hover {
  background: linear-gradient(145deg, #263828, #1c2820) !important;
  border-left-color: rgba(176,145,87,0.65) !important;
}
.project-card {
  background: linear-gradient(145deg, #222222, #181818) !important;
  border-color: rgba(176,145,87,0.16) !important;
}
.project-card:hover {
  background: linear-gradient(145deg, #2a3028, #1e2420) !important;
  border-color: rgba(176,145,87,0.42) !important;
}
.blog-article-card {
  background: linear-gradient(145deg, #222016, #191710) !important;
  border-color: rgba(176,145,87,0.16) !important;
}
.blog-article-card:hover {
  background: linear-gradient(145deg, #2c2818, #22201a) !important;
  border-color: rgba(176,145,87,0.36) !important;
}
.sidebar-widget {
  background: linear-gradient(145deg, #1e1e1e, #161616) !important;
  border-color: rgba(176,145,87,0.18) !important;
}
.contact-info-card {
  background: linear-gradient(145deg, #1f3028, #142018) !important;
  border-color: rgba(176,145,87,0.2) !important;
}

footer { background: #0a0a0a !important; }

/* =====================================================
   v7 — LUXURY PREMIUM: warm amber dark, no icon boxes,
   gold-top-border cards, ghost watermark numbers
   ===================================================== */

/* ── Foundation: warm dark, not cold black ── */
body { background: #0d0b08 !important; }

.services-section {
  background: #0d0b08 !important;
  border-top: 1px solid rgba(176,145,87,0.14) !important;
}
.portfolio-section {
  background: #0a0906 !important;
  border-top: 1px solid rgba(176,145,87,0.14) !important;
}
.blog-section {
  background:
    radial-gradient(ellipse 50% 50% at 80% 60%, rgba(176,145,87,0.07) 0%, transparent 60%),
    #0c0a06 !important;
  border-top: 1px solid rgba(176,145,87,0.16) !important;
}
.testimonials-section {
  background:
    radial-gradient(ellipse 70% 55% at 20% 50%, rgba(26,89,63,0.18) 0%, transparent 60%),
    #070e09 !important;
  border-top: 1px solid rgba(26,89,63,0.3) !important;
}

/* ── Service cards: warm amber luxury, gold-top stripe ── */
.service-card {
  background: linear-gradient(160deg, #1e1b12 0%, #151310 100%) !important;
  border: 1px solid rgba(176,145,87,0.12) !important;
  border-top: 2px solid rgba(176,145,87,0.4) !important;
  border-left: none !important;
  box-shadow:
    inset 0 1px 0 rgba(176,145,87,0.12),
    0 4px 24px rgba(0,0,0,0.45) !important;
  position: relative !important;
  overflow: hidden !important;
}
.service-card:hover {
  background: linear-gradient(160deg, #282318 0%, #1e1a13 100%) !important;
  border-color: rgba(176,145,87,0.32) !important;
  border-top-color: rgba(176,145,87,0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(176,145,87,0.2),
    0 18px 52px rgba(0,0,0,0.6),
    0 0 40px rgba(176,145,87,0.08) !important;
  transform: translateY(-3px) !important;
}
.services-grid {
  background: rgba(176,145,87,0.15) !important;
  gap: 1px !important;
}

/* Number as large ghost watermark */
.service-card-num {
  position: absolute !important;
  bottom: -8px !important;
  right: 14px !important;
  font-size: 6rem !important;
  line-height: 1 !important;
  color: rgba(176,145,87,0.07) !important;
  margin: 0 !important;
  font-weight: 700 !important;
  pointer-events: none !important;
  user-select: none !important;
}
.service-card:hover .service-card-num {
  color: rgba(176,145,87,0.13) !important;
}

/* ── Value icons: NO box, just the icon floating with glow ── */
.value-icon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: block !important;
  margin-bottom: 20px !important;
}
.value-icon i {
  font-size: 2.4rem !important;
  color: var(--gold) !important;
  filter: drop-shadow(0 0 14px rgba(176,145,87,0.4)) !important;
}
.value-card:hover .value-icon {
  transform: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.value-card:hover .value-icon i {
  filter: drop-shadow(0 0 22px rgba(176,145,87,0.62)) !important;
}

/* Value cards: minimal, refined */
.value-card {
  background: rgba(12,22,14,0.85) !important;
  border: 1px solid rgba(26,89,63,0.22) !important;
  border-top: 2px solid rgba(176,145,87,0.3) !important;
  border-right: none !important;
  box-shadow: inset 0 1px 0 rgba(176,145,87,0.08) !important;
}
.value-card:hover {
  background: rgba(18,32,20,0.92) !important;
  border-top-color: rgba(176,145,87,0.58) !important;
}

/* ── Portfolio: remove emoji placeholders ── */
.portfolio-card-bg span { display: none !important; }

/* ── Pricing cards ── */
.pricing-card {
  background: linear-gradient(160deg, #1a2a1c 0%, #111a13 100%) !important;
  border: 1px solid rgba(176,145,87,0.16) !important;
  border-top: 2px solid rgba(176,145,87,0.3) !important;
  box-shadow: inset 0 1px 0 rgba(176,145,87,0.09) !important;
}
.pricing-card.featured {
  background: linear-gradient(160deg, #1e3825 0%, #14201a 100%) !important;
  border-color: rgba(176,145,87,0.4) !important;
  border-top-color: var(--gold) !important;
  box-shadow: inset 0 1px 0 rgba(176,145,87,0.18), 0 0 60px rgba(26,89,63,0.28) !important;
}
.pricing-card:hover {
  background: linear-gradient(160deg, #22342a 0%, #192820 100%) !important;
  border-top-color: rgba(176,145,87,0.62) !important;
}

/* ── Testimonial cards ── */
.testimonial-card {
  background: linear-gradient(160deg, #162618 0%, #101c12 100%) !important;
  border: 1px solid rgba(176,145,87,0.14) !important;
  border-top: 2px solid rgba(176,145,87,0.28) !important;
  box-shadow: inset 0 1px 0 rgba(176,145,87,0.08) !important;
}
.testimonial-card:hover {
  background: linear-gradient(160deg, #1d3222 0%, #14221a 100%) !important;
  border-top-color: rgba(176,145,87,0.54) !important;
}

/* ── Blog cards ── */
.blog-card {
  background: linear-gradient(160deg, #1e1b12 0%, #141210 100%) !important;
  border: 1px solid rgba(176,145,87,0.14) !important;
  border-top: 2px solid rgba(176,145,87,0.28) !important;
  box-shadow: inset 0 1px 0 rgba(176,145,87,0.08) !important;
}
.blog-card:hover {
  background: linear-gradient(160deg, #26221a 0%, #1c1914 100%) !important;
  border-top-color: rgba(176,145,87,0.55) !important;
  box-shadow: inset 0 1px 0 rgba(176,145,87,0.14), 0 16px 44px rgba(0,0,0,0.6) !important;
}

/* ── Interior page cards ── */
.service-detail-card {
  background: linear-gradient(160deg, #1a2a1c 0%, #111a13 100%) !important;
  border: 1px solid rgba(176,145,87,0.14) !important;
  border-top: 2px solid rgba(176,145,87,0.32) !important;
  border-left: none !important;
  box-shadow: inset 0 1px 0 rgba(176,145,87,0.09) !important;
}
.service-detail-card:hover {
  background: linear-gradient(160deg, #22342a 0%, #182820 100%) !important;
  border-top-color: rgba(176,145,87,0.6) !important;
}
.project-card {
  background: linear-gradient(160deg, #1c1a12 0%, #131210 100%) !important;
  border: 1px solid rgba(176,145,87,0.12) !important;
  border-top: 2px solid rgba(176,145,87,0.28) !important;
}
.project-card:hover {
  background: linear-gradient(160deg, #242018 0%, #1c1814 100%) !important;
  border-top-color: rgba(176,145,87,0.55) !important;
}
.blog-article-card {
  background: linear-gradient(160deg, #1e1b12 0%, #141210 100%) !important;
  border: 1px solid rgba(176,145,87,0.12) !important;
  border-top: 2px solid rgba(176,145,87,0.26) !important;
}
.sidebar-widget {
  background: linear-gradient(160deg, #1c1a12 0%, #131210 100%) !important;
  border: 1px solid rgba(176,145,87,0.14) !important;
  border-top: 2px solid rgba(176,145,87,0.24) !important;
}
.contact-info-card {
  background: linear-gradient(160deg, #162618 0%, #101c12 100%) !important;
  border: 1px solid rgba(176,145,87,0.14) !important;
  border-top: 2px solid rgba(176,145,87,0.28) !important;
}

footer { background: #080604 !important; }

/* =====================================================
   v8 — NÚMEROS ARRIBA VISIBLES + HOVERS DE BOTÓN
   ===================================================== */

/* ── Números: de vuelta arriba, dorado visible ── */
.service-card-num {
  position: static !important;
  bottom: auto !important;
  right: auto !important;
  font-size: 2.6rem !important;
  line-height: 1 !important;
  color: rgba(176,145,87,0.62) !important;
  margin: 0 0 16px 0 !important;
  font-weight: 700 !important;
  font-family: var(--font-display) !important;
  pointer-events: none !important;
}
.service-card:hover .service-card-num {
  color: rgba(176,145,87,0.9) !important;
}

/* ── Transición rápida y suave para todos los botones ── */
.btn {
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  will-change: transform !important;
}

/* btn-primary: gold fill, dark text, lift + glow ── */
.btn-primary:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 36px rgba(176,145,87,0.42), 0 0 18px rgba(176,145,87,0.22) !important;
  color: #080604 !important;
  border-color: var(--gold) !important;
}

/* btn-outline: relleno dorado suave, borde brillante ── */
.btn-outline:hover {
  background: rgba(176,145,87,0.16) !important;
  border-color: var(--gold) !important;
  color: var(--gold) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 28px rgba(176,145,87,0.28) !important;
}

/* btn-whatsapp: escala + glow verde ── */
.btn-whatsapp:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 28px rgba(37,211,102,0.38) !important;
}

/* btn-gold: lift + glow cálido ── */
.btn-gold:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 36px rgba(176,145,87,0.48) !important;
}

/* ── Botones de filtro en proyectos ── */
.filter-btn {
  transition: all 0.18s ease !important;
}
.filter-btn:hover {
  background: rgba(176,145,87,0.14) !important;
  border-color: rgba(176,145,87,0.65) !important;
  color: var(--gold) !important;
  transform: translateY(-1px) !important;
}
.filter-btn.active {
  background: rgba(176,145,87,0.2) !important;
  border-color: var(--gold) !important;
  color: var(--gold) !important;
}

/* ── Botones del slider de testimonios ── */
.slider-btn:hover {
  background: rgba(176,145,87,0.22) !important;
  border-color: var(--gold) !important;
  transform: scale(1.18) !important;
  box-shadow: 0 0 22px rgba(176,145,87,0.3) !important;
}

/* ── Portfolio card link ── */
.portfolio-link {
  transition: all 0.2s ease !important;
  border: 1px solid rgba(176,145,87,0.35) !important;
  padding: 6px 14px !important;
  border-radius: 2px !important;
}
.portfolio-link:hover {
  background: rgba(176,145,87,0.15) !important;
  border-color: var(--gold) !important;
  color: var(--gold) !important;
  gap: 10px !important;
}

/* ── Flecha de tarjeta de servicio ── */
.service-arrow {
  color: rgba(176,145,87,0.3) !important;
  transition: all 0.2s ease !important;
}
.service-card:hover .service-arrow {
  color: var(--gold) !important;
  transform: translate(4px, -4px) !important;
}

/* ── Ocultar breadcrumb en páginas interiores ── */
nav.breadcrumb { display: none !important; }

/* ── Cursor: pointer en hijos de elementos clicables ── */
a *, a i, a span,
button *, button i, button span,
.btn *, .filter-btn *, .slider-btn *,
.quick-reply, .quick-reply *,
.chatbot-toggle, .chatbot-toggle *,
.chatbot-send, .chatbot-send *,
.chatbot-close, .chatbot-close *,
.hamburger, .hamburger * { cursor: pointer !important; }
input, textarea, .chatbot-input { cursor: text !important; }

/* ── Ocultar spans de emoji en proyectos ── */
.project-thumb span { display: none !important; }

/* ── Iconos FA en project-thumb y portfolio-card-bg ── */
.project-thumb i, .portfolio-card-bg i {
  font-size: 4rem !important;
  color: rgba(255,255,255,0.15) !important;
  filter: drop-shadow(0 0 20px rgba(176,145,87,0.15)) !important;
  transition: all 0.4s ease !important;
}
.project-card:hover .project-thumb i,
.portfolio-card:hover .portfolio-card-bg i {
  color: rgba(176,145,87,0.35) !important;
  filter: drop-shadow(0 0 30px rgba(176,145,87,0.3)) !important;
  transform: scale(1.08) !important;
}

/* =====================================================
   v9 — BOTONES DORADOS + PREVIEWS REALES DE PROYECTOS
   ===================================================== */

/* CTA principales: dorado en reposo, blanco al hacer hover. */
.btn,
.btn-primary,
.btn-outline,
.btn-gold,
.btn-whatsapp {
  min-height: 44px;
  background: linear-gradient(135deg, #c6a96b 0%, var(--gold) 58%, #9a783e 100%) !important;
  color: #0b0b08 !important;
  border: 2px solid var(--gold) !important;
  box-shadow: 0 7px 22px rgba(176,145,87,0.24), inset 0 1px 0 rgba(255,255,255,0.28) !important;
  cursor: pointer !important;
  user-select: none;
  touch-action: manipulation;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease,
              border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.btn::before,
.btn-primary::before {
  display: none !important;
}

.btn:hover,
.btn-primary:hover,
.btn-outline:hover,
.btn-gold:hover,
.btn-whatsapp:hover {
  background: #fff !important;
  color: #11100c !important;
  border-color: var(--gold) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 11px 30px rgba(176,145,87,0.34), 0 0 0 1px rgba(176,145,87,0.15) !important;
}

.btn:active,
.btn-primary:active,
.btn-outline:active,
.btn-gold:active,
.btn-whatsapp:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: 0 3px 10px rgba(176,145,87,0.25) !important;
}

.btn:focus-visible,
.portfolio-link:focus-visible,
.filter-btn:focus-visible,
.slider-btn:focus-visible {
  outline: 3px solid var(--gold-light);
  outline-offset: 4px;
}

.btn,
.btn *,
a,
a *,
button,
button * {
  cursor: pointer !important;
}

.portfolio-link {
  min-height: 44px;
  padding: 10px 18px !important;
  color: #0b0b08 !important;
  background: linear-gradient(135deg, #c6a96b 0%, var(--gold) 58%, #9a783e 100%) !important;
  border: 2px solid var(--gold) !important;
  box-shadow: 0 7px 22px rgba(176,145,87,0.24) !important;
  cursor: pointer !important;
  user-select: none;
}
.portfolio-link:hover {
  color: #11100c !important;
  background: #fff !important;
  border-color: var(--gold) !important;
  box-shadow: 0 10px 28px rgba(176,145,87,0.32) !important;
}

/* Miniaturas tipo captura web: enseñan el diseño, no un icono genérico. */
.portfolio-card-bg,
.project-thumb {
  background: #12110e !important;
  padding: 18px 18px 0;
  align-items: flex-end;
}

.site-preview {
  --preview-accent: #b09157;
  --preview-dark: #17120c;
  --preview-soft: #ead9b8;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #17130e;
  background: #f6f1e8;
  border: 1px solid rgba(255,255,255,0.24);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 20px 45px rgba(0,0,0,0.48);
  transform: translateY(7px);
  transition: transform 0.45s ease, box-shadow 0.45s ease;
}

.portfolio-card:hover .site-preview,
.project-card:hover .site-preview {
  transform: translateY(0) scale(1.015);
  box-shadow: 0 24px 55px rgba(0,0,0,0.58);
}

.preview-chrome {
  height: 22px;
  padding: 0 9px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: rgba(255,255,255,0.48);
  background: #24231f;
  font-size: 6px;
}

.preview-chrome > span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b09157;
}
.preview-chrome > span:nth-child(2) { opacity: 0.65; }
.preview-chrome > span:nth-child(3) { opacity: 0.35; }
.preview-chrome small {
  margin-left: auto;
  margin-right: auto;
  font-size: 6px;
  letter-spacing: 0.04em;
}

.preview-nav {
  height: 29px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--preview-dark);
  background: rgba(255,255,255,0.92);
  border-bottom: 1px solid rgba(20,20,20,0.08);
}
.preview-nav strong {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.13em;
}
.preview-nav > span {
  font-size: 5px;
  font-weight: 700;
  opacity: 0.62;
}

.preview-stage {
  height: calc(100% - 51px);
  padding: 18px 16px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--preview-accent) 26%, transparent), transparent 35%),
    linear-gradient(135deg, #fbf8f1, var(--preview-soft));
}
.preview-stage > div:first-child {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
.preview-stage small {
  color: var(--preview-accent);
  font-size: 5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.preview-stage b {
  max-width: 150px;
  margin: 5px 0 8px;
  color: var(--preview-dark);
  font-family: var(--font-display);
  font-size: clamp(13px, 1.5vw, 21px);
  line-height: 0.98;
}
.preview-stage em {
  padding: 5px 8px;
  color: #fff;
  background: var(--preview-accent);
  border-radius: 1px;
  font-size: 5px;
  font-style: normal;
  font-weight: 800;
}

.preview-product,
.preview-fashion,
.preview-panels,
.preview-architecture,
.preview-suit {
  height: 90%;
  position: relative;
  z-index: 1;
}
.preview-product {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
}
.preview-product span {
  width: 25%;
  height: 62%;
  border-radius: 4px 4px 1px 1px;
  background: linear-gradient(160deg, #f7e4b5, var(--preview-accent) 45%, #3b2814);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45), 0 8px 12px rgba(30,20,10,0.22);
}
.preview-product span:nth-child(2) { height: 85%; }
.preview-product span::before {
  content: '';
  display: block;
  width: 52%;
  height: 14%;
  margin: -13% auto 0;
  background: #2a241c;
  border-radius: 2px 2px 0 0;
}

.preview-fashion { display: flex; justify-content: center; gap: 5px; }
.preview-fashion i {
  width: 40%;
  height: 100%;
  display: block;
  border-radius: 70% 70% 8px 8px;
  background: linear-gradient(155deg, rgba(255,255,255,0.45), transparent 34%), var(--preview-accent);
  clip-path: polygon(31% 0,69% 0,78% 15%,100% 35%,83% 48%,75% 35%,86% 100%,14% 100%,25% 35%,17% 48%,0 35%,22% 15%);
}
.preview-fashion i:nth-child(2) { opacity: 0.62; transform: scale(0.9) translateY(6px); }

.preview-search {
  grid-column: 1 / -1;
  align-self: end;
  display: grid;
  grid-template-columns: 1fr 1fr 24px;
  gap: 3px;
  padding: 5px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.preview-search span {
  padding: 5px;
  color: rgba(0,0,0,0.45);
  border: 1px solid rgba(0,0,0,0.08);
  font-size: 5px;
}
.preview-search i { background: var(--preview-accent); }

.preview-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  transform: rotate(3deg);
}
.preview-panels span {
  background: linear-gradient(145deg, rgba(255,255,255,0.45), transparent), var(--preview-accent);
  border-radius: 3px;
}
.preview-panels span:first-child { grid-row: 1 / 3; }

.preview-architecture {
  background: linear-gradient(150deg, transparent 35%, var(--preview-accent) 36% 64%, var(--preview-dark) 65%);
  clip-path: polygon(12% 100%,12% 42%,44% 16%,44% 39%,87% 0,87% 100%);
}
.preview-suit i {
  position: absolute;
  inset: 0 16%;
  background: linear-gradient(100deg, #161719 0 48%, #303236 49% 52%, #111214 53%);
  clip-path: polygon(25% 0,75% 0,100% 22%,82% 35%,74% 25%,82% 100%,18% 100%,26% 25%,18% 35%,0 22%);
}

.preview-tayba { --preview-accent:#9b672f; --preview-dark:#24160c; --preview-soft:#ead6b5; }
.preview-princesa { --preview-accent:#9c466e; --preview-dark:#2d1021; --preview-soft:#f2d9e3; }
.preview-naylah { --preview-accent:#674a83; --preview-dark:#1f152b; --preview-soft:#e6dcf0; }
.preview-travel { --preview-accent:#167b9b; --preview-dark:#082b3a; --preview-soft:#cce7ed; }
.preview-alburak { --preview-accent:#39764e; --preview-dark:#102a19; --preview-soft:#d7e7d8; }
.preview-prefor { --preview-accent:#bd7734; --preview-dark:#242627; --preview-soft:#e7ddd1; }
.preview-aloguid { --preview-accent:#9d653b; --preview-dark:#2b1d15; --preview-soft:#e9ddd2; }
.preview-sully { --preview-accent:#8b477d; --preview-dark:#281326; --preview-soft:#eddaea; }
.preview-larocca { --preview-accent:#a68b4b; --preview-dark:#171817; --preview-soft:#e5e0d4; }
.preview-sultani { --preview-accent:#315c89; --preview-dark:#111d31; --preview-soft:#d7e1ed; }

@media (max-width: 600px) {
  .portfolio-card-bg { padding: 12px 12px 0; }
  .project-thumb { padding: 14px 14px 0; height: 220px; }
  .preview-stage b { font-size: 16px; }

  .portfolio-overlay {
    padding: 22px !important;
    background: linear-gradient(to top, rgba(8,12,10,0.99) 0%, rgba(8,12,10,0.82) 36%, rgba(8,12,10,0.08) 78%) !important;
  }
  .portfolio-link {
    opacity: 1 !important;
    transform: none !important;
    background: linear-gradient(135deg, #c6a96b 0%, var(--gold) 58%, #9a783e 100%) !important;
  }
  .portfolio-card .preview-stage > div:first-child {
    opacity: 0.28;
  }
}

/* =====================================================
   v16 — NAVEGACIÓN EDITORIAL
   ===================================================== */

.nav-links {
  gap: 7px;
}

.nav-link {
  padding: 9px 15px;
  font-family: 'Marcellus', var(--font-display);
  font-size: 1.06rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .025em;
  color: rgba(255,255,255,.82);
}

.nav-link::after {
  bottom: 2px;
  height: 1px;
}

.nav-link:hover,
.nav-link.active {
  color: #f4ead5;
}

.mobile-nav .nav-link {
  font-family: 'Marcellus', var(--font-display);
  font-size: 1.3rem;
  letter-spacing: .025em;
}

/* El menú compacto entra antes de que la tipografía pierda aire. */
@media (min-width: 901px) and (max-width: 1050px) {
  .nav-links,
  .nav-cta .btn {
    display: none;
  }
  .hamburger {
    display: flex;
  }
}

/* =====================================================
   v10 — JERARQUÍA DE BOTONES + HERO SAAS PROFESIONAL
   ===================================================== */

/* El logo gana presencia sin alterar la altura del navbar. */
.nav-logo {
  min-width: 116px;
}
.nav-logo img {
  height: 70px !important;
  width: 70px !important;
  object-fit: contain;
}

/* Base de interacción compartida. */
.btn {
  min-height: 44px;
  cursor: pointer !important;
  user-select: none;
  touch-action: manipulation;
  transition: transform .2s ease, background .2s ease, color .2s ease,
              border-color .2s ease, box-shadow .2s ease !important;
}

/* CTA principal: dorado. */
.btn-primary,
.btn-gold {
  color: #0b0b08 !important;
  background: linear-gradient(135deg, #cfb271 0%, #b09157 58%, #92713b 100%) !important;
  border: 2px solid #b09157 !important;
  box-shadow: 0 7px 22px rgba(176,145,87,.24), inset 0 1px 0 rgba(255,255,255,.3) !important;
}
.btn-primary:hover,
.btn-gold:hover {
  color: #11100c !important;
  background: #fff !important;
  border-color: #b09157 !important;
  box-shadow: 0 11px 30px rgba(176,145,87,.32) !important;
}

/* Acciones secundarias: oscuras y elegantes, no otro bloque dorado. */
.btn-outline {
  color: #d9c28e !important;
  background: rgba(12,18,14,.72) !important;
  border: 1.5px solid rgba(176,145,87,.58) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 7px 20px rgba(0,0,0,.24) !important;
}
.btn-outline:hover {
  color: #15130e !important;
  background: #fff !important;
  border-color: #b09157 !important;
  box-shadow: 0 10px 26px rgba(176,145,87,.24) !important;
}

/* WhatsApp integrado en la paleta verde oscuro y dorado de WAQALA. */
.btn-whatsapp,
a.btn[href*="wa.me"] {
  color: #f8f4ea !important;
  background: linear-gradient(135deg, #236b4d 0%, var(--green) 55%, var(--green-dark) 100%) !important;
  border: 2px solid rgba(212,180,131,.72) !important;
  box-shadow: 0 8px 26px rgba(7,26,19,.42), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.btn-whatsapp:hover,
a.btn[href*="wa.me"]:hover {
  color: var(--green-dark) !important;
  background: var(--cream) !important;
  border-color: var(--gold) !important;
  box-shadow: 0 11px 30px rgba(176,145,87,.25) !important;
}
.btn-whatsapp:focus-visible,
a.btn[href*="wa.me"]:focus-visible {
  outline-color: var(--gold-light);
}

.wa-float {
  background: linear-gradient(145deg, #236b4d, var(--green-dark)) !important;
  border: 1px solid rgba(212,180,131,.58);
  box-shadow: 0 8px 28px rgba(7,26,19,.55), 0 0 0 10px rgba(26,89,63,.13) !important;
}
.wa-float:hover {
  background: linear-gradient(145deg, #2b7657, var(--green)) !important;
  box-shadow: 0 12px 34px rgba(7,26,19,.6), 0 0 0 12px rgba(176,145,87,.1) !important;
}
.wa-float::before {
  background: var(--green) !important;
}

/* =====================================================
   v11 — TARJETAS DE SERVICIOS MÁS COMPACTAS
   ===================================================== */

.services-detail-section {
  padding: 72px 0 82px;
}

.services-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: stretch;
}

.service-detail-card {
  min-width: 0;
  padding: 25px 24px 23px !important;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  column-gap: 14px;
  align-content: start;
}

.service-detail-card .sdc-icon {
  grid-column: 1;
  grid-row: 1;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  font-size: 1.15rem !important;
}

.service-detail-card .sdc-title {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0 !important;
  font-size: 1.25rem !important;
  line-height: 1.08;
}

.service-detail-card .sdc-desc {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 17px 0 15px !important;
  font-size: .82rem !important;
  line-height: 1.55 !important;
}

.service-detail-card .sdc-features {
  grid-column: 1 / -1;
  grid-row: 3;
  gap: 5px !important;
  margin: 0 0 19px !important;
}

.service-detail-card .sdc-feature {
  align-items: flex-start;
  gap: 8px !important;
  font-size: .78rem !important;
  line-height: 1.38;
}

.service-detail-card .sdc-feature i {
  margin-top: 3px;
  font-size: .68rem !important;
}

.service-detail-card > .btn {
  grid-column: 1 / -1;
  grid-row: 4;
  min-height: 44px;
  width: 100%;
  padding: 9px 15px !important;
  justify-content: center;
  font-size: .78rem;
}

@media (max-width: 700px) {
  .services-detail-section {
    padding: 52px 0 64px;
  }
  .services-detail-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .service-detail-card {
    padding: 22px 20px 20px !important;
  }
  .service-detail-card .sdc-desc {
    margin-top: 15px !important;
  }
}

/* =====================================================
   v12 — HERO COMPLETO EN ESCRITORIOS DE POCA ALTURA
   ===================================================== */

.hero {
  padding: 0 !important;
}

@media (min-width: 901px) and (max-height: 850px) {
  .hero {
    min-height: 100vh;
  }

  .hero-content {
    min-height: 100vh;
    padding-top: calc(var(--nav-h) + 14px);
    padding-bottom: 24px;
    align-items: center;
  }

  .hero-label {
    margin-bottom: 15px;
  }

  .hero-title {
    max-width: 590px;
    font-size: clamp(3.25rem, 4.45vw, 4.35rem);
    line-height: 1;
    margin-bottom: 15px;
  }

  .hero-subtitle {
    margin-bottom: 25px;
    line-height: 1.55;
  }

  .hero-stats {
    gap: 34px;
    margin-top: 27px;
    padding-top: 22px;
  }

  .hero-stat-num {
    font-size: 1.85rem;
  }

  .hero-visual {
    transform: translateY(-44px);
  }
}

/* =====================================================
   v13 — ALINEACIÓN DE PLANES Y CTA RECOMENDADO
   ===================================================== */

/* El plan recomendado conserva el CTA dorado aunque abra WhatsApp. */
.pricing-card.featured .pricing-cta.btn-gold,
.pricing-card.featured a.pricing-cta[href*="wa.me"] {
  color: #0b0b08 !important;
  background: linear-gradient(135deg, #cfb271 0%, #b09157 58%, #92713b 100%) !important;
  border-color: var(--gold) !important;
  box-shadow: 0 7px 22px rgba(176,145,87,.28), inset 0 1px 0 rgba(255,255,255,.3) !important;
}
.pricing-card.featured .pricing-cta.btn-gold:hover,
.pricing-card.featured a.pricing-cta[href*="wa.me"]:hover {
  color: #11100c !important;
  background: var(--cream) !important;
  border-color: var(--gold) !important;
  box-shadow: 0 11px 30px rgba(176,145,87,.34) !important;
}

/* La tienda conserva una prestación adicional sin crecer más que el plan 1. */
@media (min-width: 901px) {
  .pricing-card-ecommerce {
    min-height: 632px;
    display: flex;
    flex-direction: column;
  }
  .pricing-card-ecommerce .pricing-features {
    gap: 6px;
    margin-bottom: 22px;
  }
  .pricing-card-ecommerce .pricing-feature {
    line-height: 1.35;
  }
  .pricing-card-ecommerce .pricing-cta {
    margin-top: auto;
  }
}

/* =====================================================
   v15 — REMATES SIMÉTRICOS EN ETIQUETAS DE SECCIÓN
   ===================================================== */

/* Variante general: línea dorada delante y detrás. */
.section-label::before,
.section-label::after {
  content: '';
  width: 32px;
  height: 1px;
  display: block;
  flex: 0 0 32px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.section-label::after {
  background: linear-gradient(90deg, var(--gold), transparent);
}

/* Variante editorial: rombos iguales a ambos lados. */
.section-label.section-label-diamond::before,
.section-label.section-label-diamond::after {
  width: 36px;
  height: 9px;
  flex-basis: 36px;
  background:
    linear-gradient(var(--gold), var(--gold)) left center / 13px 1px no-repeat,
    linear-gradient(45deg, transparent 43%, var(--gold) 44% 56%, transparent 57%) center / 9px 9px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right center / 13px 1px no-repeat;
  opacity: .88;
}

/* Variante ligera: tres puntos y línea, también simétrica. */
.section-label.section-label-dots::before,
.section-label.section-label-dots::after {
  width: 38px;
  height: 5px;
  flex-basis: 38px;
  background:
    radial-gradient(circle, var(--gold) 0 1.5px, transparent 1.8px) left center / 5px 5px no-repeat,
    radial-gradient(circle, var(--gold) 0 1.5px, transparent 1.8px) 7px center / 5px 5px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right center / 24px 1px no-repeat;
  opacity: .82;
}

.section-label.section-label-dots::after {
  transform: scaleX(-1);
}

@media (max-width: 600px) {
  .section-label {
    gap: 8px;
    letter-spacing: .16em;
  }
  .section-label::before,
  .section-label::after {
    width: 22px;
    flex-basis: 22px;
  }
  .section-label.section-label-diamond::before,
  .section-label.section-label-diamond::after,
  .section-label.section-label-dots::before,
  .section-label.section-label-dots::after {
    width: 27px;
    flex-basis: 27px;
  }
}

/* Dashboard del hero. */
.laptop-wrapper {
  max-width: 610px !important;
}
.laptop {
  padding: 10px 10px 0 !important;
  background: linear-gradient(145deg, #252725, #090b0a) !important;
  border-color: rgba(212,180,131,.3) !important;
  border-radius: 18px 18px 2px 2px !important;
  box-shadow: 0 34px 80px rgba(0,0,0,.72), 0 0 70px rgba(176,145,87,.12) !important;
}
.laptop-notch {
  width: 54px !important;
  height: 7px !important;
  margin-bottom: 7px !important;
  opacity: .72;
}
.laptop-screen {
  aspect-ratio: 16 / 10 !important;
  background: #0a0d0b !important;
  border-color: rgba(255,255,255,.09) !important;
  border-radius: 8px 8px 2px 2px !important;
}
.growth-dashboard {
  width: 100%;
  height: 100%;
  color: #eef1ee;
  background:
    radial-gradient(circle at 82% 0%, rgba(176,145,87,.08), transparent 28%),
    #0d100e;
  font-family: var(--font-body);
  font-size: 9px;
  overflow: hidden;
}
.gd-topbar {
  height: 47px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(18,21,19,.96);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.gd-brand,
.gd-top-actions,
.gd-heading,
.gd-card-head,
.gd-channel,
.gd-automation {
  display: flex;
  align-items: center;
}
.gd-brand {
  gap: 8px;
}
.gd-brand-mark {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  color: #11130f;
  background: linear-gradient(135deg, #e2c78f, #a47d42);
  border-radius: 7px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(176,145,87,.22);
}
.gd-brand div {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.gd-brand strong {
  font-size: 9px;
  font-weight: 650;
}
.gd-brand small {
  margin-top: 3px;
  color: rgba(255,255,255,.35);
  font-size: 6px;
}
.gd-top-actions {
  gap: 9px;
}
.gd-live {
  padding: 4px 7px;
  color: #75d8a0;
  background: rgba(39,201,99,.08);
  border: 1px solid rgba(39,201,99,.16);
  border-radius: 20px;
  font-size: 6px;
  font-weight: 600;
}
.gd-live i,
.gd-automation-status i {
  width: 5px;
  height: 5px;
  display: inline-block;
  margin-right: 4px;
  background: #34d47a;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(52,212,122,.7);
  animation: gd-pulse 2s ease infinite;
}
@keyframes gd-pulse {
  50% { opacity: .45; box-shadow: 0 0 2px rgba(52,212,122,.2); }
}
.gd-avatar {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  color: #d8c18e;
  background: #252a26;
  border: 1px solid rgba(176,145,87,.2);
  border-radius: 50%;
  font-size: 7px;
  font-weight: 700;
}
.gd-shell {
  height: calc(100% - 47px);
  display: grid;
  grid-template-columns: 45px 1fr;
}
.gd-sidebar {
  padding: 12px 8px 9px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 8px;
  background: #101411;
  border-right: 1px solid rgba(255,255,255,.055);
}
.gd-sidebar span {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.34);
  border-radius: 7px;
  font-size: 9px;
}
.gd-sidebar span.active {
  color: #d8bd83;
  background: rgba(176,145,87,.13);
  border: 1px solid rgba(176,145,87,.14);
}
.gd-sidebar .gd-sidebar-bottom {
  margin-top: auto;
}
.gd-main {
  min-width: 0;
  padding: 12px 13px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gd-heading {
  justify-content: space-between;
}
.gd-heading > div {
  display: flex;
  flex-direction: column;
}
.gd-heading small {
  color: #a98950;
  font-size: 5px;
  font-weight: 700;
  letter-spacing: .15em;
}
.gd-heading strong {
  margin-top: 2px;
  color: #f4f3ee;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1;
}
.gd-heading > span {
  padding: 5px 7px;
  color: rgba(255,255,255,.46);
  background: #151916;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 5px;
  font-size: 6px;
}
.gd-heading > span i { margin-left: 5px; font-size: 5px; }
.gd-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.gd-metric {
  padding: 8px 9px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  background: linear-gradient(145deg, #161b17, #121613);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 7px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.gd-metric > span {
  grid-column: 1 / -1;
  margin-bottom: 3px;
  color: rgba(255,255,255,.38);
  font-size: 6px;
}
.gd-metric strong {
  color: #f4f3ee;
  font-size: 12px;
  line-height: 1;
}
.gd-metric small {
  color: #54d28b;
  font-size: 5px;
  font-weight: 600;
}
.gd-content {
  min-height: 0;
  display: grid;
  grid-template-columns: 1.55fr .8fr;
  gap: 7px;
  flex: 1;
}
.gd-chart-card,
.gd-side-card {
  min-height: 0;
  padding: 9px;
  background: linear-gradient(145deg, #151916, #101411);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 7px;
}
.gd-card-head {
  justify-content: space-between;
}
.gd-card-head > div:first-child {
  display: flex;
  flex-direction: column;
}
.gd-card-head span {
  color: rgba(255,255,255,.38);
  font-size: 6px;
}
.gd-card-head strong {
  margin-top: 1px;
  color: #eee9de;
  font-size: 9px;
}
.gd-legend {
  color: rgba(255,255,255,.38);
  font-size: 5px;
}
.gd-legend i {
  width: 5px;
  height: 5px;
  display: inline-block;
  margin-right: 3px;
  background: #c6a466;
  border-radius: 50%;
}
.gd-chart {
  height: calc(100% - 27px);
  min-height: 80px;
  margin-top: 4px;
  position: relative;
}
.gd-chart svg {
  width: 100%;
  height: calc(100% - 13px);
  position: relative;
  z-index: 2;
  overflow: visible;
}
.gd-chart-area { fill: url(#chart-fill); }
.gd-chart-line {
  fill: none;
  stroke: #d0ae6c;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(208,174,108,.34));
}
.gd-chart circle {
  fill: #e4ca92;
  stroke: #3a3020;
  stroke-width: 2;
}
.gd-grid-line {
  height: 1px;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  background: rgba(255,255,255,.04);
}
.gd-grid-line.line-1 { top: 25%; }
.gd-grid-line.line-2 { top: 50%; }
.gd-grid-line.line-3 { top: 75%; }
.gd-chart-labels {
  display: flex;
  justify-content: space-between;
  color: rgba(255,255,255,.22);
  font-size: 5px;
}
.gd-side-card {
  display: flex;
  flex-direction: column;
}
.gd-channel {
  justify-content: space-between;
  margin-top: 9px;
  color: rgba(255,255,255,.55);
  font-size: 6px;
}
.gd-channel span i {
  width: 11px;
  color: #c2a364;
}
.gd-channel b {
  color: #ded8cb;
  font-size: 6px;
}
.gd-progress {
  height: 3px;
  margin-top: 4px;
  overflow: hidden;
  background: rgba(255,255,255,.055);
  border-radius: 8px;
}
.gd-progress i {
  height: 100%;
  display: block;
  background: linear-gradient(90deg, #8c6d3a, #d3b578);
  border-radius: inherit;
}
.gd-automation {
  min-height: 37px;
  padding: 7px 9px;
  gap: 8px;
  background: linear-gradient(90deg, rgba(176,145,87,.09), rgba(31,116,75,.075));
  border: 1px solid rgba(176,145,87,.13);
  border-radius: 7px;
}
.gd-automation-icon {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  color: #d4b778;
  background: rgba(176,145,87,.11);
  border-radius: 6px;
  font-size: 8px;
}
.gd-automation > div {
  display: flex;
  flex-direction: column;
}
.gd-automation strong {
  font-size: 7px;
}
.gd-automation small {
  color: rgba(255,255,255,.33);
  font-size: 5px;
}
.gd-automation-status {
  margin-left: auto;
  color: #69d397;
  font-size: 5px;
  font-weight: 600;
}

@media (max-width: 900px) {
  .nav-logo {
    min-width: auto;
  }
  .nav-logo img {
    height: 64px !important;
    width: 64px !important;
  }
}

/* =====================================================
   LAPTOP PREMIUM OVERLAYS
   ===================================================== */

/* Subtle floating on the whole laptop wrapper */
.laptop-wrapper {
  animation: lm-float 7s ease-in-out infinite;
}
@keyframes lm-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-9px); }
}

/* ── 1 · Booking notification toast ──────────────── */
.lm-notif {
  position: absolute;
  top: -10px; right: -10px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  width: 232px;
  background: rgba(7, 12, 9, 0.93);
  border: 1px solid rgba(176, 145, 87, 0.32);
  border-radius: 10px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* hidden by default — JS adds .vis to trigger cycle */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px) scale(0.95);
}
.lm-notif.vis {
  animation: lm-notif-cycle 4s ease forwards;
}
@keyframes lm-notif-cycle {
  0%   { opacity: 0; transform: translateY(-10px) scale(0.95); }
  14%  { opacity: 1; transform: translateY(0)     scale(1);    }
  78%  { opacity: 1; transform: translateY(0)     scale(1);    }
  100% { opacity: 0; transform: translateY(-5px)  scale(0.97); }
}
.lm-notif__icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  background: rgba(26, 89, 63, 0.25);
  border: 1px solid rgba(176, 145, 87, 0.22);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.lm-notif__text {
  display: flex; flex-direction: column; gap: 3px;
}
.lm-notif__text strong {
  font-size: 0.70rem; font-weight: 600;
  color: #fff; letter-spacing: 0.01em;
}
.lm-notif__text span {
  font-size: 0.63rem; color: rgba(176, 145, 87, 0.75);
}

/* ── 2 · Live leads chip ──────────────────────────── */
.lm-stat {
  position: absolute;
  bottom: 72px; left: -14px;
  z-index: 10;
  display: flex; align-items: center; gap: 7px;
  padding: 6px 13px;
  background: rgba(7, 12, 9, 0.88);
  border: 1px solid rgba(176, 145, 87, 0.20);
  border-radius: 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: lm-fade-up 0.7s 0.6s ease both;
}
@keyframes lm-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.lm-stat__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #1a593f;
  box-shadow: 0 0 7px rgba(26, 89, 63, 0.9);
  animation: lm-dot-blink 2.2s ease-in-out infinite;
}
@keyframes lm-dot-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.65); }
}
.lm-stat__val {
  font-size: 0.80rem; font-weight: 700; color: #b09157;
}
.lm-stat__val.bump {
  animation: lm-val-up 0.35s ease;
}
@keyframes lm-val-up {
  0%, 100% { color: #b09157; }
  50%      { color: #f5c76b; transform: scale(1.18); }
}
.lm-stat__lbl {
  font-size: 0.62rem; color: rgba(255,255,255,0.38); letter-spacing: 0.03em;
}

/* ── 3 · Screen pulse beacons ─────────────────────── */
.lm-beacon {
  position: absolute;
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(176, 145, 87, 0.70);
  box-shadow: 0 0 10px rgba(176, 145, 87, 0.50);
  animation: lm-beacon-pulse 2.8s ease-in-out infinite;
  z-index: 5;
}
.lm-beacon--a { top: 76px;  right: 98px;  animation-delay: 0s;   }
.lm-beacon--b { top: 146px; right: 74px;  animation-delay: 1.3s; }
@keyframes lm-beacon-pulse {
  0%, 100% { opacity: .55; transform: scale(1);   box-shadow: 0 0 8px  rgba(176,145,87,.40); }
  50%      { opacity: 1;   transform: scale(1.55); box-shadow: 0 0 18px rgba(176,145,87,.70); }
}

/* ── 4 · Automation flow ─────────────────────────── */
.lm-flow {
  position: absolute;
  inset: -50px -60px;
  pointer-events: none;
  z-index: 6;
  overflow: visible;
}
.lm-flow__svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}

/* Dim dashed base circuit */
.lm-fpath {
  fill: none;
  stroke: rgba(176, 145, 87, 0.11);
  stroke-width: 1;
  stroke-dasharray: 5 4;
}

/* Glowing segment (JS toggles .on class) */
.lm-fglow {
  fill: none;
  stroke: rgba(176, 145, 87, 0);
  stroke-width: 1.6;
  filter: drop-shadow(0 0 5px rgba(176, 145, 87, 0.85));
  transition: stroke 0.5s ease, opacity 0.5s ease;
  opacity: 0;
}
.lm-fglow.on {
  stroke: rgba(245, 199, 107, 0.82);
  opacity: 1;
}

/* ── Chip nodes ───────────────────────────────────── */
.lm-chip {
  position: absolute;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  background: rgba(7, 12, 9, 0.90);
  border: 1px solid rgba(176, 145, 87, 0.15);
  border-radius: 20px;
  font-size: 0.64rem; font-weight: 600;
  color: rgba(255, 255, 255, 0.50);
  letter-spacing: 0.04em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
  transition: border-color 0.45s ease, color 0.45s ease, box-shadow 0.45s ease;
  animation: lm-fade-up 0.7s ease both;
}
.lm-chip i { font-size: 0.62rem; color: #b09157; transition: color 0.45s; }

/* Active chip (when its flow segment is lit) */
.lm-chip.on {
  border-color: rgba(176, 145, 87, 0.52);
  color: rgba(255, 255, 255, 0.90);
  box-shadow: 0 0 14px rgba(176, 145, 87, 0.20);
}
.lm-chip.on i { color: #f5c76b; }

/* Chip positions — relative to .lm-flow (inset: -50px -60px beyond wrapper) */
#lm-n1 { top: 4px;   left: 130px;  animation-delay: .10s; } /* Lead     — top area     */
#lm-n2 { top: 128px; left: 2px;    animation-delay: .20s; } /* IA       — left upper   */
#lm-n3 { top: 320px; left: 2px;    animation-delay: .30s; } /* WhatsApp — left lower   */
#lm-n4 { top: 456px; left: 492px;  animation-delay: .40s; } /* Reserva  — bottom right */
#lm-n5 { top: 128px; right: 2px;   animation-delay: .50s; } /* Venta    — right upper  */

/* ── Reduced motion ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .laptop-wrapper   { animation: none !important; }
  .lm-beacon,
  .lm-stat__dot     { animation: none !important; }
  .lm-notif         { display: none; }
  .lm-fglow         { transition: none !important; }
  .lm-chip          { animation: none !important; opacity: 1; }
  .lm-stat          { animation: none !important; opacity: 1; }
}