@font-face { font-family:'Montserrat'; font-style:normal; font-weight:200 700; font-display:swap; src:local('Montserrat'); }
@font-face { font-family:'Playfair Display'; font-style:normal; font-weight:500 600; font-display:swap; src:local('Playfair Display'); }

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

:root {
  --white: #FFFFFF;
  --off-white: #F8F6F3;
  --warm: #F4F2EE;
  --border: rgba(0,0,0,0.06);
  --border-mid: rgba(0,0,0,0.12);
  --muted: #999;
  --dim: #666;
  --text: #1A1A1A;
  --accent: #C62828;
  --accent-light: rgba(198,40,40,0.06);
  --font: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Playfair Display', serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --radius: 6px;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--white);
  color: var(--text);
  font-size: 18px;
  line-height: 1.7;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── SCROLL INDICATOR ── */
.scroll-indicator { position:fixed; top:0; left:0; width:100%; height:2px; z-index:9999; background:transparent; }
.scroll-indicator-bar { height:100%; width:0; background:var(--accent); transition:width 0.05s linear; }

/* ── PARALLAX SECTION ── */
.parallax-section { position:relative; overflow:hidden; }
.parallax-bg {
  position:absolute; inset:-15%; z-index:0;
  background-size:cover; background-position:center;
  will-change:transform; transform:translateZ(0);
}
.parallax-overlay {
  position:absolute; inset:0; z-index:1;
  background:rgba(255,255,255,0.04);
}
.parallax-video {
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%;
  object-fit:cover;
}
#esencia .section-title { font-weight:700; }
#esencia .section-sub { font-weight:700; color:#000; }
.parallax-section .section-inner { position:relative; z-index:2; }

/* ── NAV ── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 56px; height:72px; background:transparent;
  transition:all 0.5s var(--ease-out); transform:translateY(0);
}
.nav.hidden { transform:translateY(-100%); }
.nav.scrolled { background:rgba(255,255,255,0.92); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); }
.nav-logo {
  font-family:var(--font); font-size:22px; font-weight:600;
  letter-spacing:4px; text-transform:uppercase;
  color:var(--text); text-decoration:none;
}
.nav-logo span { color:var(--accent); }
.nav-links { display:flex; align-items:center; gap:2px; list-style:none; }
.nav-links a {
  display:block; padding:8px 20px; border-radius:var(--radius);
  color:rgba(255,255,255,0.65); text-decoration:none;
  font-size:15px; font-weight:400; letter-spacing:1.5px;
  text-transform:uppercase; transition:all 0.3s; border:1px solid transparent;
}
.nav.scrolled .nav-links a { color:var(--dim); }
.nav-links a:hover { color:#fff; background:rgba(255,255,255,0.06); }
.nav.scrolled .nav-links a:hover { color:var(--text); background:var(--accent-light); }
.nav-links a.active { color:var(--accent) !important; background:rgba(198,40,40,0.08); border-color:rgba(198,40,40,0.15); }
.nav.scrolled .nav-links a.active { color:var(--accent) !important; background:rgba(198,40,40,0.08); border-color:rgba(198,40,40,0.15); }
.nav-cta { background:var(--accent) !important; color:white !important; border-color:var(--accent) !important; font-weight:600 !important; }
.nav-cta:hover { opacity:0.85 !important; }
.nav-cta.active { background:var(--accent) !important; color:white !important; border-color:var(--accent) !important; opacity:1 !important; }
.nav-hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; border:1px solid rgba(255,255,255,0.2); border-radius:var(--radius); background:transparent; }
.nav.scrolled .nav-hamburger { border-color:var(--border); }
.nav-hamburger span { display:block; width:20px; height:1.5px; background:#fff; transition:all 0.3s; }
.nav.scrolled .nav-hamburger span { background:var(--text); }
.nav-drawer { display:none; position:fixed; top:72px; left:0; right:0; background:rgba(255,255,255,0.98); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); padding:24px 40px; z-index:999; flex-direction:column; gap:4px; }
.nav-drawer.open { display:flex; }
.nav-drawer a { display:block; padding:12px 16px; color:var(--dim); text-decoration:none; font-size:16px; letter-spacing:1px; text-transform:uppercase; border-radius:var(--radius); transition:all 0.3s; }
.nav-drawer a:hover { color:var(--text); background:rgba(0,0,0,0.03); }

/* ── HERO ── */
#hero { position:relative; height:100vh; overflow:hidden; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,#1a1a1a 0%,#0d0d0d 100%); }
.hero-grid { position:absolute; inset:0; z-index:0; background-image:linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.015) 1px, transparent 1px); background-size:80px 80px; }
.hero-pattern-watermark { position:absolute; inset:0; z-index:0; background-image:radial-gradient(circle at 50% 50%, rgba(198,40,40,0.04) 0%, transparent 50%), radial-gradient(circle at 30% 20%, rgba(255,255,255,0.02) 0%, transparent 40%); pointer-events:none; }
.hero-particles { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.particle { position:absolute; width:3px; height:3px; background:rgba(255,255,255,0.15); border-radius:50%; animation:particleFloat linear infinite; }
@keyframes particleFloat { 0%{transform:translateY(100vh) rotate(0deg);opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{transform:translateY(-10vh) rotate(720deg);opacity:0} }
.hero-content { position:relative; z-index:2; text-align:center; padding:0 24px; max-width:720px; }
.hero-label { display:inline-block; font-size:14px; font-weight:500; letter-spacing:4px; text-transform:uppercase; color:var(--accent); margin-bottom:24px; border:1px solid rgba(198,40,40,0.3); padding:8px 20px; border-radius:40px; opacity:0; transform:translateY(20px); animation:fadeUp 0.8s var(--ease-out) 0.2s forwards; }
@keyframes fadeUp { to{opacity:1;transform:translateY(0)} }
.hero-logo-text { font-family:var(--font-display); font-size:clamp(72px,10vw,120px); font-weight:500; color:white; line-height:1; margin-bottom:16px; opacity:0; transform:translateY(30px); animation:fadeUp 0.8s var(--ease-out) 0.4s forwards; }
.hero-logo-text span { color:var(--accent); }
.hero-sub { font-size:17px; color:rgba(255,255,255,0.45); font-weight:300; line-height:1.8; max-width:480px; margin:0 auto 40px; opacity:0; transform:translateY(30px); animation:fadeUp 0.8s var(--ease-out) 0.6s forwards; }
.hero-actions { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; opacity:0; transform:translateY(30px); animation:fadeUp 0.8s var(--ease-out) 0.8s forwards; }
.btn-outline { display:inline-flex; align-items:center; gap:8px; padding:16px 40px; border-radius:40px; border:1px solid rgba(255,255,255,0.2); background:transparent; color:rgba(255,255,255,0.8); font-size:15px; letter-spacing:2px; text-transform:uppercase; text-decoration:none; cursor:pointer; transition:all 0.4s var(--ease-out); font-family:var(--font); font-weight:400; }
.btn-outline:hover { background:white; color:#1a1a1a; border-color:white; transform:translateY(-2px); }
.btn-accent { display:inline-flex; align-items:center; gap:8px; padding:16px 40px; border-radius:40px; border:none; background:var(--accent); color:white; font-size:15px; letter-spacing:2px; text-transform:uppercase; text-decoration:none; cursor:pointer; transition:all 0.4s var(--ease-out); font-family:var(--font); font-weight:500; }
.btn-accent:hover { opacity:0.85; transform:translateY(-2px); }
.hero-scroll-hint { position:absolute; bottom:36px; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; color:rgba(255,255,255,0.25); font-size:12px; letter-spacing:3px; text-transform:uppercase; animation:hintBounce 2.4s ease-in-out infinite; }
@keyframes hintBounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(8px)} }

/* ── SECTION BASE ── */
.section { padding:120px 56px; position:relative; }
.section-warm { background:var(--off-white); }
.section-dark { background:#1a1a1a; color:white; }
.section-label { font-size:14px; font-weight:500; letter-spacing:4px; text-transform:uppercase; color:var(--accent); margin-bottom:20px; }
.section-title { font-family:var(--font-display); font-size:clamp(38px,4.5vw,56px); font-weight:500; line-height:1.1; margin-bottom:20px; }
.section-sub { font-size:18px; color:var(--dim); line-height:1.8; max-width:560px; font-weight:300; }
.section-dark .section-sub { color:rgba(255,255,255,0.5); }

/* ── REVEAL CARDS ── */
.reveal-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:56px; background:var(--border); }
.reveal-card { background:var(--white); padding:48px 40px; cursor:pointer; position:relative; transition:all 0.5s var(--ease-out); min-height:220px; display:flex; flex-direction:column; justify-content:center; }
.reveal-card:hover { background:#2a2a2a; }
.reveal-card:hover .reveal-title { color:white; }
.reveal-card:hover .reveal-body p { color:rgba(255,255,255,0.7); }
.reveal-card:hover .reveal-card-number { color:rgba(255,255,255,0.06); }
.reveal-card-number { font-size:60px; font-weight:200; color:rgba(0,0,0,0.03); line-height:1; position:absolute; top:16px; right:24px; pointer-events:none; transition:color 0.5s, transform 0.3s; font-family:var(--font); }
.reveal-card.active .reveal-card-number { color:var(--accent-light); }
.reveal-trigger { font-size:13px; font-weight:500; letter-spacing:3px; text-transform:uppercase; color:var(--accent); margin-bottom:4px; display:flex; align-items:center; gap:8px; }
.reveal-trigger-icon { display:inline-flex; width:26px; height:26px; border-radius:50%; border:1px solid var(--accent); align-items:center; justify-content:center; font-size:16px; transition:transform 0.4s var(--ease-out); font-weight:300; line-height:1; }
.reveal-card.active .reveal-trigger-icon { transform:rotate(45deg); }
.reveal-title { font-size:22px; font-weight:500; color:var(--text); margin-bottom:0; transition:margin 0.4s var(--ease-out); font-family:var(--font); }
.reveal-card.active .reveal-title { margin-bottom:16px; }
.reveal-body { max-height:0; overflow:hidden; transition:max-height 0.5s var(--ease-out), opacity 0.4s ease, margin 0.4s ease; opacity:0; margin-top:0; }
.reveal-card.active .reveal-body { max-height:600px; opacity:1; margin-top:4px; }
.reveal-body p { font-size:17px; color:var(--dim); line-height:1.8; font-weight:300; }
.reveal-body .ver-mas-servicio { display:inline-block; margin-top:16px; font-size:13px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent); text-decoration:none; border-bottom:1px solid transparent; transition:all 0.3s; }
.reveal-body .ver-mas-servicio:hover { border-bottom-color:var(--accent); }
.reveal-clients { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.reveal-clients span { font-size:14px; letter-spacing:0.5px; color:var(--muted); background:rgba(0,0,0,0.03); padding:6px 16px; border-radius:4px; border:1px solid var(--border); }

/* 4-column for 8 servicios */
.servicios-grid { grid-template-columns:repeat(4,1fr); }
.servicios-grid .reveal-card { min-height:200px; padding:36px 28px; }
.servicios-grid .reveal-card-number { font-size:44px; top:12px; right:16px; }
.servicios-grid .reveal-title { font-size:18px; }
.servicios-grid .reveal-body p { font-size:15px; }

/* ── PORTFOLIO TABS ── */
.portfolio-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-top:40px; position:relative; z-index:2; }
.portfolio-tab {
  padding:10px 24px; border-radius:40px; border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03); color:rgba(255,255,255,0.4);
  font-family:var(--font); font-size:13px; font-weight:400; letter-spacing:1.5px;
  text-transform:uppercase; cursor:pointer; transition:all 0.3s var(--ease-out);
}
.portfolio-tab:hover { color:rgba(255,255,255,0.7); background:rgba(255,255,255,0.06); }
.portfolio-tab.active { color:white; background:var(--accent); border-color:var(--accent); font-weight:500; }

/* ── PORTFOLIO CLIENTS ── */
.portfolio-client-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:32px; position:relative; z-index:2; min-height:200px; }
.portfolio-client-card.hidden-card { display:none; }
.ver-mas-btn {
  display:block; margin:32px auto 0; padding:14px 40px; border-radius:40px;
  border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.03);
  color:rgba(255,255,255,0.5); font-family:var(--font); font-size:14px;
  letter-spacing:2px; text-transform:uppercase; cursor:pointer;
  transition:all 0.3s var(--ease-out);
}
.ver-mas-btn:hover { color:white; background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.2); }
.portfolio-client-card {
  text-align:center; padding:28px 12px 24px;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06);
  border-radius:8px; transition:all 0.4s var(--ease-out);
  cursor:pointer; text-decoration:none; display:block;
}
.portfolio-client-card:hover { background:rgba(255,255,255,0.07); border-color:rgba(255,255,255,0.12); transform:translateY(-6px); }
.portfolio-client-avatar {
  width:72px; height:72px; border-radius:50%; margin:0 auto 14px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:22px; font-weight:500;
  background:rgba(198,40,40,0.12); color:var(--accent);
  border:2px solid rgba(198,40,40,0.15); transition:all 0.4s;
}
.portfolio-client-card:hover .portfolio-client-avatar { background:var(--accent); color:white; border-color:var(--accent); }
.portfolio-client-name { font-size:14px; font-weight:500; color:#fff; margin-bottom:2px; line-height:1.2; }
.portfolio-client-sector { font-size:11px; color:rgba(255,255,255,0.3); font-weight:300; line-height:1.3; }
.portfolio-client-card { opacity:0; transform:translateY(24px); transition:opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.portfolio-client-card.visible { opacity:1; transform:translateY(0); }

/* ── ALIADOS ── */
.aliados-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:48px; position:relative; z-index:2; }
.aliado-card { text-align:center; padding:28px 16px 24px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); border-radius:8px; transition:all 0.4s var(--ease-out); }
.aliado-card:hover { background:rgba(255,255,255,0.07); border-color:rgba(255,255,255,0.12); transform:translateY(-6px); }
.aliado-avatar {
  width:90px; height:90px; border-radius:50%; margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:28px; font-weight:500;
  background:rgba(198,40,40,0.15); color:var(--accent);
  border:2px solid rgba(198,40,40,0.2); transition:all 0.4s;
}
.aliado-card:hover .aliado-avatar { background:var(--accent); color:white; border-color:var(--accent); }
.aliado-nombre { font-size:16px; font-weight:500; color:#fff; margin-bottom:4px; }
.aliado-rol { font-size:12px; color:rgba(255,255,255,0.35); font-weight:300; line-height:1.4; }
.aliado-card { opacity:0; transform:translateY(24px); transition:opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.aliado-card.visible { opacity:1; transform:translateY(0); }
.aliado-card.hidden-card { display:none; }

/* ── TESTIMONIOS (Carrusel) ── */
.testimonios-carousel { position:relative; margin-top:48px; overflow:hidden; z-index:2; }
.testimonios-track { display:flex; gap:24px; transition:transform 0.5s var(--ease-out); }
.testimonios-carousel .testimonio-card { flex:0 0 calc((100% - 48px) / 3); min-width:0; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding:36px 28px 28px; transition:all 0.4s var(--ease-out); }
.testimonios-carousel .testimonio-card:hover { background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.1); transform:translateY(-4px); }
.testimonio-quote { font-family:var(--font-display); font-size:64px; line-height:0.6; color:var(--accent); opacity:0.3; margin-bottom:8px; }
.testimonio-texto { font-size:16px; color:rgba(255,255,255,0.65); line-height:1.7; font-weight:300; font-style:italic; }
.testimonio-autor { display:flex; align-items:center; gap:14px; margin-top:20px; padding-top:16px; border-top:1px solid rgba(255,255,255,0.04); }
.testimonio-avatar { width:44px; height:44px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:15px; font-weight:500; background:rgba(198,40,40,0.15); color:var(--accent); }
.testimonio-nombre { font-size:14px; font-weight:500; color:#fff; }
.testimonio-empresa { font-size:12px; color:rgba(255,255,255,0.3); font-weight:300; }
.test-carousel-btn { position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,0.1); background:rgba(0,0,0,0.3); color:white; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.3s; opacity:0; }
.testimonios-carousel:hover .test-carousel-btn { opacity:1; }
.test-carousel-btn:hover { background:var(--accent); border-color:var(--accent); }
.test-prev { left:8px; }
.test-next { right:8px; }
.test-carousel-dots { display:flex; justify-content:center; gap:8px; margin-top:24px; }
.test-carousel-dot { width:8px; height:8px; border-radius:50%; border:none; background:rgba(255,255,255,0.15); cursor:pointer; transition:all 0.3s; padding:0; }
.test-carousel-dot.active { background:var(--accent); }

/* ── STATS ── */
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; margin-top:56px; background:var(--border); }
.stat-cell { background:var(--white); padding:56px 36px; text-align:center; }
.stat-number { font-size:clamp(48px,5vw,72px); font-weight:300; color:var(--accent); line-height:1; margin-bottom:8px; }
.stat-desc { font-size:15px; color:var(--muted); letter-spacing:1px; font-weight:300; text-transform:uppercase; }

/* ── REVEAL ON SCROLL ── */
.reveal { opacity:0; transform:translateY(30px); transition:opacity 0.7s ease, transform 0.7s var(--ease-out); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-d1 { transition-delay:0.1s; }
.reveal-d2 { transition-delay:0.2s; }
.reveal-d3 { transition-delay:0.3s; }

/* ── CTA + FORM ── */
#cta { text-align:center; padding:120px 56px 100px; background:#1a1a1a; color:white; position:relative; overflow:hidden; }
.cta-video-overlay { position:absolute; inset:0; z-index:1; background:rgba(0,0,0,0.55); }
#cta .cta-content { position:relative; z-index:2; }
.cta-title { font-family:var(--font-display); font-size:clamp(38px,5vw,56px); font-weight:500; line-height:1.1; margin-bottom:16px; }
.cta-title span { color:var(--accent); }
.cta-sub { color:rgba(255,255,255,0.4); font-size:18px; max-width:460px; margin:0 auto 8px; font-weight:300; line-height:1.7; }
.cta-email { font-size:18px; color:var(--accent); text-decoration:none; font-weight:400; border-bottom:1px solid transparent; transition:border 0.3s; }
.cta-email:hover { border-bottom-color:var(--accent); }
.contact-form { max-width:520px; margin:40px auto 0; text-align:left; }
.form-group { margin-bottom:18px; }
.form-group label { display:block; font-size:13px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,0.3); margin-bottom:6px; }
.form-group input, .form-group textarea { width:100%; padding:14px 18px; border-radius:var(--radius); border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.04); color:var(--white); font-family:var(--font); font-size:16px; font-weight:300; outline:none; transition:all 0.3s; }
.form-group input:focus, .form-group textarea:focus { border-color:var(--accent); background:rgba(198,40,40,0.04); }
.form-group textarea { min-height:120px; resize:vertical; }
.form-submit { width:100%; padding:16px 40px; border-radius:40px; border:none; background:var(--accent); color:white; font-size:15px; letter-spacing:2px; text-transform:uppercase; font-family:var(--font); font-weight:500; cursor:pointer; transition:all 0.4s var(--ease-out); }
.form-submit:hover { opacity:0.85; transform:translateY(-2px); }

/* ── FOOTER ── */
footer { border-top:1px solid var(--border); padding:48px 56px; display:flex; align-items:center; justify-content:space-between; font-size:15px; color:var(--muted); font-weight:300; }
footer a { color:var(--dim); text-decoration:none; transition:color 0.3s; }
footer a:hover { color:var(--text); }
.footer-links { display:flex; gap:28px; }

/* ── NOTIFICATION ── */
.notification {
  position:fixed; top:24px; left:0; right:0; z-index:99999;
  transform:translateY(-120px);
  display:flex; align-items:center; gap:14px;
  padding:14px 20px 14px 24px; border-radius:14px;
  font-family:var(--font); font-size:15px; font-weight:400; line-height:1.4;
  background:#0d0d0d; color:white;
  box-shadow:0 8px 48px rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.06);
  transition:transform 0.5s cubic-bezier(0.22,1,0.36,1);
  max-width:520px; width:calc(100vw - 40px); margin:0 auto;
  pointer-events:none;
}
.notification.show { transform:translateY(0); pointer-events:auto; }
.notification-icon { width:22px; height:22px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.notification-icon svg { width:100%; height:100%; display:block; fill:currentColor; }
.notification-icon .n-icon-success { display:none; color:#2ecc71; }
.notification-icon .n-icon-error { display:none; color:#e74c3c; }
.notification-success .n-icon-success { display:block; }
.notification-error .n-icon-error { display:block; }
.notification-success { border-color:rgba(46,204,113,0.15); }
.notification-error { border-color:rgba(231,76,60,0.15); }
.notification-msg { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.notification-close {
  width:26px; height:26px; border-radius:50%; border:none; flex-shrink:0;
  background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.35);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:12px; transition:all 0.3s; padding:0;
}
.notification-close:hover { background:rgba(255,255,255,0.12); color:white; }

/* ── TOAST ── */
.toast { position:fixed; bottom:32px; right:32px; z-index:9999; background:var(--text); color:var(--white); border-radius:12px; padding:16px 28px; font-size:17px; font-weight:300; box-shadow:0 8px 40px rgba(0,0,0,0.15); transform:translateY(80px); opacity:0; transition:all 0.5s var(--ease-out); pointer-events:none; }
.toast.show { transform:translateY(0); opacity:1; }

/* ── BRIEF MODAL ── */
.modal-overlay { position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,0.7); backdrop-filter:blur(12px); display:none; align-items:center; justify-content:center; padding:20px; overflow-y:auto; }
.modal-overlay.open { display:flex; }
.modal-card { border-radius:24px; width:100%; max-width:640px; max-height:90vh; overflow-y:auto; position:relative; padding:32px 36px 24px; box-shadow:0 20px 80px rgba(0,0,0,0.25); }
.modal-card-dark { background:#0d0d0d; border:1px solid rgba(255,255,255,0.06); }
.modal-close { position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:15px; transition:all 0.3s; }
.modal-close-light { background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.35); }
.modal-close-light:hover { background:rgba(255,255,255,0.12); color:white; }
.modal-brand { text-align:center; padding-bottom:16px; margin-bottom:8px; border-bottom:1px solid rgba(255,255,255,0.04); }
.modal-brand-506 { font-family:var(--font-display); font-size:26px; font-weight:500; color:var(--accent); letter-spacing:2px; }
.modal-brand-ideas { font-family:var(--font-display); font-size:26px; font-weight:500; color:rgba(255,255,255,0.2); letter-spacing:2px; }
.modal-header { margin-bottom:20px; padding-right:32px; }
.modal-title { font-family:var(--font-display); font-size:28px; font-weight:500; color:white; }
.modal-sub { font-size:15px; color:rgba(255,255,255,0.35); font-weight:300; margin-top:4px; }
.modal-body { min-height:280px; }
.modal-step { display:none; }
.modal-step.active { display:block; animation:modalFade 0.4s var(--ease-out); }
@keyframes modalFade { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.modal-step-title { font-size:20px; font-weight:500; color:white; margin-bottom:20px; }
.modal-checkboxes { display:flex; flex-direction:column; gap:8px; }
.modal-check { display:flex; align-items:center; gap:12px; cursor:pointer; padding:10px 14px; border-radius:var(--radius); border:1px solid var(--border); transition:all 0.3s; }
.modal-check:hover { background:rgba(0,0,0,0.02); }
.modal-check input { width:18px; height:18px; accent-color:var(--accent); cursor:pointer; flex-shrink:0; }
.modal-check span { font-size:15px; color:var(--dim); font-weight:300; }
.modal-check-dark { border-color:rgba(255,255,255,0.08); background:rgba(255,255,255,0.02); }
.modal-check-dark:hover { background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.14); }
.modal-check-dark span { color:rgba(255,255,255,0.65); }
.modal-check-dark input:checked + span { color:white; }
.modal-check-dark:has(input:checked) { border-color:var(--accent); background:rgba(198,40,40,0.06); }
.form-label-light { color:rgba(255,255,255,0.45) !important; font-size:13px; letter-spacing:0.5px; text-transform:uppercase; }
.form-input-light { background:rgba(255,255,255,0.04) !important; border-color:rgba(255,255,255,0.08) !important; color:white !important; }
.form-input-light:focus { border-color:var(--accent) !important; background:rgba(198,40,40,0.06) !important; }
.form-input-light::placeholder { color:rgba(255,255,255,0.2); }
.modal-overlay .form-group select.form-input-light { background:rgba(255,255,255,0.04) !important; color:white !important; border-color:rgba(255,255,255,0.08) !important; }
.modal-overlay .form-group select.form-input-light option { background:#1a1a1a; color:white; }
.modal-progress { padding-top:20px; margin-top:4px; }
.modal-progress-bar { height:2px; background:var(--accent); border-radius:2px; transition:width 0.5s var(--ease-out); width:0; }
.modal-step-indicators { display:flex; align-items:center; justify-content:center; gap:0; margin-top:10px; }
.modal-step-dot { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:500; transition:all 0.4s var(--ease-out); flex-shrink:0; }
.modal-step-dot.active { background:var(--accent); color:white; }
.modal-step-dot-dark { background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.2); }
.modal-step-dot-dark.active { background:var(--accent); color:white; }
.modal-step-line { height:1px; flex:1; min-width:20px; transition:background 0.4s; }
.modal-step-line.active { background:var(--accent); }
.modal-step-line-dark { background:rgba(255,255,255,0.06); }
.modal-step-line-dark.active { background:var(--accent); }
.modal-footer { display:flex; align-items:center; gap:12px; margin-top:20px; padding-top:16px; }
.modal-footer-dark { border-top:1px solid rgba(255,255,255,0.06); }
.modal-btn { padding:14px 32px; border-radius:40px; font-family:var(--font); font-size:14px; letter-spacing:1.5px; text-transform:uppercase; cursor:pointer; transition:all 0.3s var(--ease-out); border:none; font-weight:500; }
.modal-btn-accent { background:var(--accent); color:white; }
.modal-btn-accent:hover { opacity:0.85; transform:translateY(-2px); }
.modal-btn-ghost { background:transparent; color:rgba(255,255,255,0.35); padding:14px 20px; }
.modal-btn-ghost:hover { color:rgba(255,255,255,0.7); }
#brief-resumen { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding:20px; font-size:14px; color:rgba(255,255,255,0.6); font-weight:300; line-height:1.8; }

/* ── PATTERN UTILITIES ── */
.pattern-dots { background-image: radial-gradient(rgba(198,40,40,0.1) 1.5px, transparent 1.5px) !important; background-size: 20px 20px !important; background-position: 0 0 !important; background-repeat: repeat !important; }
.pattern-stripes { background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.03) 0px, rgba(0,0,0,0.03) 1.5px, transparent 1.5px, transparent 14px) !important; background-size: auto !important; background-repeat: repeat !important; }
.pattern-grid { background-image: linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px) !important; background-size: 32px 32px !important; background-position: 0 0 !important; background-repeat: repeat !important; }
.pattern-cross { background-image: repeating-linear-gradient(45deg, rgba(198,40,40,0.05) 0px, rgba(198,40,40,0.05) 1px, transparent 1px, transparent 10px), repeating-linear-gradient(-45deg, rgba(198,40,40,0.05) 0px, rgba(198,40,40,0.05) 1px, transparent 1px, transparent 10px) !important; background-size: auto !important; background-repeat: repeat !important; }
.pattern-waves { background: repeating-linear-gradient(-3deg, transparent 0px, transparent 18px, rgba(198,40,40,0.03) 18px, rgba(198,40,40,0.03) 19px) !important; background-size: auto !important; }
.pattern-zigzag { background: linear-gradient(135deg, rgba(198,40,40,0.06) 25%, transparent 25%) -15px 0, linear-gradient(225deg, rgba(198,40,40,0.06) 25%, transparent 25%) -15px 0, linear-gradient(315deg, rgba(198,40,40,0.06) 25%, transparent 25%) 0 0, linear-gradient(45deg, rgba(198,40,40,0.06) 25%, transparent 25%) 0 0 !important; background-size: 30px 30px !important; background-repeat: repeat !important; }
.pattern-morph { background-image: radial-gradient(circle at 30% 40%, rgba(198,40,40,0.04) 0%, transparent 40%), radial-gradient(circle at 70% 60%, rgba(0,0,0,0.03) 0%, transparent 35%), radial-gradient(circle at 50% 80%, rgba(0,0,0,0.03) 0%, transparent 30%) !important; background-size: 100% 100% !important; background-position: 0 0 !important; background-repeat: no-repeat !important; }
.pattern-ring { background: radial-gradient(circle at 50% 50%, transparent 8px, rgba(198,40,40,0.04) 8px, rgba(198,40,40,0.04) 10px, transparent 10px) !important; background-size: 36px 36px !important; background-position: 0 0 !important; background-repeat: repeat !important; }
.pattern-stripe-light { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 16px) !important; background-size: auto !important; background-repeat: repeat !important; }
.pattern-dot-light { background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px) !important; background-size: 24px 24px !important; background-position: 0 0 !important; background-repeat: repeat !important; }

/* ── RESPONSIVE ── */
@media (max-width:1200px) {
  .servicios-grid { grid-template-columns:repeat(3,1fr); }
  .portfolio-client-grid { grid-template-columns:repeat(4,1fr); }
  .testimonios-carousel .testimonio-card { flex:0 0 calc((100% - 24px) / 2); }
}

@media (max-width:1024px) {
  .nav { padding:0 32px; }
  .section { padding:80px 32px; }
  #cta { padding:80px 32px; }
  footer { padding:32px; }
  .reveal-grid { grid-template-columns:repeat(2,1fr); }
  .portfolio-client-grid { grid-template-columns:repeat(3,1fr); }
  .testimonios-carousel .testimonio-card { flex:0 0 calc((100% - 24px) / 2); }
  .parallax-bg { inset:-5%; }

}

@media (max-width:768px) {
  .nav { padding:0 20px; height:64px; }
  .nav-links { display:none; }
  .nav-hamburger { display:flex; }
  .nav-drawer { top:64px; }
  .section { padding:56px 20px; }
  #cta { padding:64px 20px; }
  footer { padding:24px 20px; flex-direction:column; gap:12px; }
  .reveal-grid, .servicios-grid { grid-template-columns:1fr; }
  .reveal-card { padding:32px 24px; min-height:160px; }
  .portfolio-client-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .portfolio-client-avatar { width:60px; height:60px; font-size:18px; }
  .portfolio-client-name { font-size:13px; }
  .testimonios-carousel .testimonio-card { flex:0 0 100%; }
  .testimonios-track { gap:0; }
  .test-carousel-btn { display:none; }
  .portfolio-tabs { gap:6px; }
  .portfolio-tab { padding:8px 16px; font-size:12px; }
  .aliados-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .aliado-avatar { width:72px; height:72px; font-size:22px; }
  .stats-row { grid-template-columns:repeat(2,1fr); }
  .stat-cell { padding:36px 24px; }
  .footer-links { gap:16px; flex-wrap:wrap; justify-content:center; }
  .hero-logo-text { font-size:56px; }
  .hero-particles { display:none; }
  .modal-card { padding:24px 20px; }
  .modal-step-title { font-size:18px; }
  .modal-btn { padding:12px 24px; font-size:13px; }
}