/* ===================================================================
   Effisia — Página de contacto
   Tema oscuro por defecto, claro opcional vía [data-theme="light"]
=================================================================== */

* { box-sizing: border-box; }

:root {
  --bg: #05070F; --text: #E8ECF6; --text-strong: #ffffff;
  --muted: #9AA3BC; --muted2: #A7B0C8; --muted3: #8A93AD; --label: #C2CAE0; --eyebrow: #7C8AAE;
  --footer-dim: #5E6884; --footer-bg: rgba(5,7,15,.6);
  --bd-0: rgba(255,255,255,.08); --bd-1: rgba(255,255,255,.1); --bd-2: rgba(255,255,255,.12);
  --chip: rgba(255,255,255,.06); --chip2: rgba(255,255,255,.08);
  --card: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  --card-flat: rgba(255,255,255,.025);
  --input-bg: rgba(8,12,24,.6); --grid: rgba(255,255,255,.05); --fx-opacity: 1;
  --nav-bg: rgba(5,7,15,.55);
  --brand: linear-gradient(120deg,#22D3EE,#2A6FFF,#7C3AED,#D17CB8,#7C3AED,#2A6FFF,#22D3EE);
  --brand-2: linear-gradient(120deg,#00C8FF,#7C3AED);
}

html[data-theme="light"] {
  --bg: #EDF0F8; --text: #141A36; --text-strong: #0A0F24;
  --muted: #566184; --muted2: #49557C; --muted3: #6B7493; --label: #3C476B; --eyebrow: #7480A4;
  --footer-dim: #8A93AD; --footer-bg: rgba(255,255,255,.72);
  --bd-0: rgba(20,28,60,.1); --bd-1: rgba(20,28,60,.12); --bd-2: rgba(20,28,60,.16);
  --chip: rgba(255,255,255,.72); --chip2: rgba(124,58,237,.08);
  --card: linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,255,255,.66));
  --card-flat: rgba(255,255,255,.72);
  --input-bg: rgba(255,255,255,.9); --grid: rgba(20,28,60,.06); --fx-opacity: .55;
  --nav-bg: rgba(237,240,248,.72);
}

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
html, body { margin: 0; padding: 0; background: var(--bg); }
body {
  font-family: 'Manrope', sans-serif;
  color: var(--text);
  overflow-x: hidden;
}
img { display: block; }
a { color: inherit; }

::selection { background: rgba(124,58,237,.35); color: #fff; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: linear-gradient(#2A6FFF,#7C3AED); border-radius: 6px; }

/* ---------------- Keyframes ---------------- */
@keyframes blobA { 0%{transform:translate(0,0);} 50%{transform:translate(8vw,6vh);} 100%{transform:translate(0,0);} }
@keyframes blobB { 0%{transform:translate(0,0);} 50%{transform:translate(-7vw,-5vh);} 100%{transform:translate(0,0);} }
@keyframes blobC { 0%{transform:translate(0,0);} 50%{transform:translate(5vw,-7vh);} 100%{transform:translate(0,0);} }
@keyframes shimmer { 0%{background-position:0% 50%;} 100%{background-position:100% 50%;} }
@keyframes cardHop {
  0%, 60%, 100% { transform: translateY(0); }
  70% { transform: translateY(-11px); }
  79% { transform: translateY(0); }
  85% { transform: translateY(-4px); }
  92% { transform: translateY(0); }
}
@keyframes floatY { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);} }
@keyframes pulseRing { 0%{transform:scale(1);opacity:.5;} 70%{transform:scale(1.8);opacity:0;} 100%{opacity:0;} }
@keyframes waPulse { 0%{box-shadow:0 0 0 0 rgba(37,211,102,.5);} 70%{box-shadow:0 0 0 16px rgba(37,211,102,0);} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0);} }
@keyframes waWiggle { 0%,86%,100%{transform:rotate(0);} 90%{transform:rotate(-20deg);} 94%{transform:rotate(16deg);} }

/* ---------------- Shell ---------------- */
.page {
  position: relative;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  transition: background .4s ease, color .4s ease;
}

/* ---------------- Animated background ---------------- */
.fx {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  opacity: var(--fx-opacity); transition: opacity .4s ease;
}
.fx .blob { position: absolute; filter: blur(22px); will-change: transform; }
.fx .blob-a { top:-15%; left:-10%; width:55vw; height:55vw; background:radial-gradient(circle at center, rgba(0,200,255,.45), transparent 65%); animation:blobA 18s ease-in-out infinite; }
.fx .blob-b { top:20%; right:-15%; width:50vw; height:50vw; background:radial-gradient(circle at center, rgba(124,58,237,.4), transparent 65%); animation:blobB 22s ease-in-out infinite; }
.fx .blob-c { bottom:-20%; left:25%; width:50vw; height:50vw; background:radial-gradient(circle at center, rgba(214,124,184,.34), transparent 65%); animation:blobC 20s ease-in-out infinite; }
.fx .grid {
  position:absolute; inset:0;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%, #000 30%, transparent 80%);
  mask-image:radial-gradient(ellipse at 50% 40%, #000 30%, transparent 80%);
}
.fx canvas { position:absolute; inset:0; width:100%; height:100%; }

/* ---------------- Shared bits ---------------- */
.wrap { max-width: 1400px; margin: 0 auto; }
.eyebrow {
  font-size:13px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--eyebrow); margin-bottom:14px;
}
.brand-text {
  background: var(--brand); background-size:200% 100%; background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.brand-text-2 {
  background: var(--brand-2);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}

.btn-brand {
  display:inline-flex; align-items:center; gap:10px; padding:16px 32px; border-radius:999px;
  background: var(--brand); background-size:200% 100%; background-repeat:no-repeat; color:#fff; text-decoration:none;
  font-size:16px; font-weight:700; box-shadow:0 10px 40px rgba(124,58,237,.5);
  transition:transform .15s ease; animation:shimmer 5s ease-in-out infinite alternate; border:none; cursor:pointer;
}
.btn-brand:hover { transform: translateY(-2px); }

.btn-wa {
  display:inline-flex; align-items:center; gap:10px; padding:16px 30px; border-radius:999px;
  border:1px solid rgba(37,211,102,.45); background:rgba(255,255,255,.04); backdrop-filter:blur(8px);
  color:var(--text-strong); text-decoration:none; font-size:16px; font-weight:700;
  transition:transform .15s ease, background .2s; animation:waPulse 2.4s ease-in-out infinite;
}
.btn-wa:hover { background:rgba(255,255,255,.1); transform:scale(1.05); }
.wa-dot {
  display:inline-flex; width:26px; height:26px; align-items:center; justify-content:center;
  border-radius:50%; background:#25D366; color:#fff; animation:waWiggle 2.4s ease-in-out infinite;
}

/* ---------------- Nav ---------------- */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:transparent; border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
/* Transparente arriba (como el navbar original); banda translúcida solo al hacer scroll */
.nav.scrolled {
  background:var(--nav-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--bd-0); box-shadow:0 8px 30px rgba(0,0,0,.18);
}
.nav-inner {
  display:flex; align-items:center; justify-content:space-between;
  max-width:1400px; margin:0 auto; padding:20px clamp(20px,6vw,80px);
  transition:padding .3s ease;
}
.nav.scrolled .nav-inner { padding-top:13px; padding-bottom:13px; }
.nav-brand { display:flex; align-items:center; flex-shrink:0; gap:11px; text-decoration:none; }
.nav-brand .brand-mark { height:32px; width:32px; border-radius:50%; filter:drop-shadow(0 2px 10px rgba(124,58,237,.3)); }
.brand-name {
  font-family:'Space Grotesk',sans-serif; font-weight:600; letter-spacing:-.025em; line-height:1;
  background:var(--brand-2); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.nav-brand .brand-name { font-size:22px; }
.nav-links { display:flex; align-items:center; gap:28px; }
.nav-links a.link { color:var(--muted2); text-decoration:none; font-size:14px; font-weight:600; transition:color .2s; }
.nav-links a.link:hover { color:var(--text-strong); }
.theme-toggle {
  display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  border-radius:50%; border:1px solid var(--bd-2); background:var(--chip); color:var(--text);
  cursor:pointer; transition:transform .3s, background .2s;
}
.theme-toggle:hover { transform:rotate(25deg) scale(1.1); background:var(--chip2); }
.theme-toggle svg { display:block; }
.lang-toggle {
  display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 14px;
  border-radius:999px; border:1px solid var(--bd-2); background:var(--chip); color:var(--text);
  cursor:pointer; font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:700; letter-spacing:.04em;
  transition:transform .2s, background .2s;
}
.lang-toggle:hover { transform:scale(1.06); background:var(--chip2); }
.nav-cta {
  display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:999px;
  background:var(--brand); background-size:200% 100%; background-repeat:no-repeat; color:#fff; text-decoration:none;
  font-size:14px; font-weight:700; box-shadow:0 6px 24px rgba(124,58,237,.4); animation:shimmer 5s ease-in-out infinite alternate;
}

/* ---------------- Hero ---------------- */
.hero {
  position:relative; z-index:5; max-width:1400px; margin:0 auto;
  padding:clamp(104px,13vh,170px) clamp(20px,6vw,80px) 80px; text-align:center;
}
.hero h1 {
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(40px,7vw,86px);
  line-height:1.02; letter-spacing:-.02em; margin:0 0 26px;
}
.hero h1 .brand-text { animation:shimmer 6s ease-in-out infinite alternate; }
.hero p.lead {
  max-width:620px; margin:0 auto 42px; font-size:clamp(16px,2vw,20px); line-height:1.6; color:var(--muted2);
}
.hero-cta { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
.stats { display:flex; flex-wrap:wrap; gap:clamp(24px,6vw,72px); justify-content:center; margin-top:72px; }
.stat .num { font-family:'Space Grotesk',sans-serif; font-size:40px; font-weight:700; }
.stat .lbl { font-size:13px; color:var(--muted3); font-weight:600; }

/* ---------------- Sections ---------------- */
.section { position:relative; z-index:5; max-width:1400px; margin:0 auto; padding:clamp(50px,9vh,110px) clamp(20px,6vw,80px); }
.section-head { text-align:center; margin-bottom:56px; }
.section-head h2 {
  font-family:'Space Grotesk',sans-serif; font-size:clamp(30px,4.5vw,52px); font-weight:700; margin:0; letter-spacing:-.02em;
}

/* ---------------- Services ---------------- */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; }
.service-card {
  position:relative; padding:32px 28px; border-radius:22px; border:1px solid var(--bd-0);
  background:var(--card); backdrop-filter:blur(10px); overflow:hidden;
  transition:transform .25s ease, border-color .25s;
}
.service-card:hover { border-color:rgba(124,58,237,.5); }
/* Pequeños saltos en orden (tras el reveal). El delay > duración del reveal para no
   interrumpir la entrada; los delays escalonados generan la secuencia en cascada. */
.cards .service-card.in { animation: cardHop 3s ease-in-out 2 forwards; }
.cards .service-card.in:nth-child(1) { animation-delay: 1.0s; }
.cards .service-card.in:nth-child(2) { animation-delay: 1.18s; }
.cards .service-card.in:nth-child(3) { animation-delay: 1.36s; }
.cards .service-card.in:nth-child(4) { animation-delay: 1.54s; }
.cards .service-card.in:nth-child(n+5) { animation-delay: 1.72s; }
.service-card .glow {
  position:absolute; top:-30px; right:-30px; width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.35),transparent 70%); filter:blur(10px);
}
.service-card .icon {
  position:relative; width:54px; height:54px; border-radius:15px; display:flex; align-items:center; justify-content:center;
  font-size:26px; background:linear-gradient(135deg,#00C8FF,#7C3AED); box-shadow:0 8px 24px rgba(124,58,237,.4); margin-bottom:22px;
}
.service-card h3 { font-family:'Space Grotesk',sans-serif; font-size:20px; font-weight:600; margin:0 0 10px; }
.service-card p { font-size:14.5px; line-height:1.6; color:var(--muted); margin:0; }

/* ---------------- Piker ---------------- */
.piker-panel {
  position:relative; border-radius:30px; overflow:hidden; border:1px solid var(--bd-1);
  background:linear-gradient(135deg,rgba(0,200,255,.12),rgba(124,58,237,.1),rgba(124,58,237,.1));
}
.piker-panel .grid-bg {
  position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:40px 40px;
}
.piker-inner {
  position:relative; display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:40px; align-items:center; padding:clamp(34px,5vw,64px);
}
.piker-badge {
  display:inline-flex; align-items:center; gap:8px; padding:7px 16px; border-radius:999px;
  background:var(--chip2); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--label); margin-bottom:22px;
}
.piker-inner h2 { font-family:'Space Grotesk',sans-serif; font-size:clamp(34px,5vw,58px); font-weight:700; margin:0 0 18px; letter-spacing:-.02em; }
.piker-inner p { font-size:17px; line-height:1.65; color:var(--muted2); max-width:480px; margin:0 0 30px; }
.piker-link {
  display:inline-flex; align-items:center; gap:10px; padding:14px 28px; border-radius:999px;
  background:#fff; color:#0A0F1F; text-decoration:none; font-size:15px; font-weight:700;
  box-shadow:0 8px 30px rgba(0,0,0,.3); transition:transform .15s;
}
.piker-link:hover { transform:translateY(-2px); }
.piker-art { display:flex; justify-content:center; }
.piker-badge-img { position:relative; width:200px; height:200px; animation:floatY 6s ease-in-out infinite; }
.piker-badge-img img {
  position:absolute; inset:0; width:200px; height:200px; border-radius:46px;
  box-shadow:0 30px 80px rgba(124,58,237,.55);
}
.piker-badge-img .ring {
  position:absolute; inset:-12px; border-radius:56px; border:1px solid rgba(255,255,255,.2);
  animation:pulseRing 3s ease-out infinite;
}

/* ---------------- Proceso ---------------- */
.steps { position:relative; z-index:1; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px; }
.step {
  position:relative; padding:30px 26px; border-radius:20px; border:1px solid var(--bd-0);
  background:var(--card-flat); transition:transform .25s ease, border-color .25s, box-shadow .25s;
}
.step:hover { transform:translateY(-8px); border-color:rgba(124,58,237,.5); box-shadow:0 18px 50px rgba(124,58,237,.25); }
.step .n {
  font-family:'Space Grotesk',sans-serif; font-size:48px; font-weight:700; line-height:1;
  background:var(--brand-2); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  margin-bottom:18px;
}
.step h3 { font-family:'Space Grotesk',sans-serif; font-size:19px; font-weight:600; margin:0 0 10px; }
.step p { font-size:14px; line-height:1.6; color:var(--muted); margin:0; }

/* ---------------- Contacto / form ---------------- */
.contact { max-width:1000px; }
.contact-head h2 { font-family:'Space Grotesk',sans-serif; font-size:clamp(34px,5vw,60px); font-weight:700; margin:0 0 16px; letter-spacing:-.02em; }
.contact-head p { font-size:17px; color:var(--muted2); max-width:520px; margin:0 auto; }
.contact-head { text-align:center; margin-bottom:48px; }
.form-card {
  position:relative; border-radius:28px; border:1px solid var(--bd-1); background:var(--card);
  backdrop-filter:blur(14px); padding:clamp(26px,4vw,48px); box-shadow:0 30px 90px rgba(0,0,0,.4);
}
.contact-form { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field { display:flex; flex-direction:column; gap:8px; }
.field.full { grid-column:1 / -1; }
.field span.lbl { font-size:13px; font-weight:700; color:var(--label); }
.field input, .field textarea {
  padding:14px 16px; border-radius:13px; border:1px solid var(--bd-2); background:var(--input-bg);
  color:var(--text); font-family:inherit; font-size:15px; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.field textarea { resize:vertical; }
.field input:focus, .field textarea:focus { border-color:#7C3AED; box-shadow:0 0 0 3px rgba(124,58,237,.25); }
.field input::placeholder, .field textarea::placeholder { color:var(--muted3); }
.honeypot { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-error { grid-column:1 / -1; color:#FF8FB4; font-size:14px; font-weight:600; }
.form-error:empty { display:none; }
.submit {
  grid-column:1 / -1; padding:17px; border-radius:14px; border:none; cursor:pointer;
  background:var(--brand); background-size:200% 100%; background-repeat:no-repeat; color:#fff;
  font-family:'Space Grotesk',sans-serif; font-size:16px; font-weight:700;
  box-shadow:0 12px 40px rgba(124,58,237,.45); animation:shimmer 5s ease-in-out infinite alternate; transition:transform .15s;
}
.submit:hover { transform:translateY(-2px); }
.submit:disabled { opacity:.6; cursor:progress; transform:none; }

.form-success { text-align:center; padding:30px 10px; }
.form-success .check {
  width:74px; height:74px; margin:0 auto 24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:36px; background:linear-gradient(135deg,#00C8FF,#7C3AED); box-shadow:0 10px 36px rgba(124,58,237,.5); color:#fff;
}
.form-success h3 { font-family:'Space Grotesk',sans-serif; font-size:28px; font-weight:700; margin:0 0 12px; }
.form-success p { font-size:16px; color:var(--muted2); max-width:440px; margin:0 auto 28px; }
.wa-success {
  display:inline-flex; align-items:center; gap:10px; padding:16px 32px; border-radius:999px;
  background:#25D366; color:#03210F; text-decoration:none; font-size:16px; font-weight:700;
  box-shadow:0 10px 34px rgba(37,211,102,.4); transition:transform .15s;
}
.wa-success:hover { transform:scale(1.05); }
.hidden { display:none !important; }

/* ---------------- WhatsApp banner ---------------- */
.wa-banner-section { position:relative; z-index:5; max-width:1400px; margin:0 auto; padding:0 clamp(20px,6vw,80px) clamp(40px,7vh,90px); }
.wa-banner {
  position:relative; overflow:hidden; border-radius:26px; background:linear-gradient(120deg,#0A2A1A,#103626);
  border:1px solid rgba(37,211,102,.3); padding:clamp(30px,5vw,56px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px;
}
.wa-banner .glow { position:absolute; top:-40px; right:60px; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle,rgba(37,211,102,.4),transparent 70%); filter:blur(20px); }
/* Fondo siempre verde oscuro -> texto claro fijo en ambos temas */
.wa-banner h3 { font-family:'Space Grotesk',sans-serif; font-size:clamp(24px,3.5vw,36px); font-weight:700; margin:0 0 8px; color:#EAFBF1; }
.wa-banner p { font-size:16px; color:#B7D8C5; margin:0; }
.wa-banner-btn {
  position:relative; display:inline-flex; align-items:center; gap:12px; padding:18px 34px; border-radius:999px;
  background:#25D366; color:#03210F; text-decoration:none; font-size:17px; font-weight:700;
  box-shadow:0 12px 40px rgba(37,211,102,.45); transition:transform .15s; animation:waPulse 2.4s ease-in-out infinite;
}
.wa-banner-btn:hover { transform:scale(1.06); }
.wa-banner-btn .dot { display:inline-flex; width:28px; height:28px; align-items:center; justify-content:center; border-radius:50%; background:#03210F; color:#25D366; }

/* ---------------- Footer ---------------- */
.footer { position:relative; z-index:5; border-top:1px solid var(--bd-0); background:var(--footer-bg); backdrop-filter:blur(10px); }
.footer-grid { max-width:1400px; margin:0 auto; padding:56px clamp(20px,6vw,80px) 30px; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:36px; }
.footer-brand { display:flex; align-items:center; gap:11px; margin-bottom:18px; }
.footer-brand .brand-mark { height:30px; width:30px; border-radius:50%; }
.footer-brand .brand-name { font-size:21px; }
.footer p.about { font-size:14px; color:var(--muted3); line-height:1.6; max-width:260px; margin:0; }
.footer .col-head { font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--eyebrow); margin-bottom:16px; }
.footer-contact { display:flex; flex-direction:column; gap:12px; font-size:14.5px; color:var(--muted2); }
.footer-contact a, .footer-contact span { color:var(--muted2); text-decoration:none; transition:color .2s; }
.footer-contact a:hover { color:var(--text-strong); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.06); text-align:center; padding:22px; font-size:13px; color:var(--footer-dim); }

.wa-inline { display:inline-flex; align-items:center; margin-right:6px; vertical-align:-3px; }

/* ---------------- Reveal animation ---------------- */
[data-reveal] {
  opacity: 0; transform: translateY(34px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
[data-reveal].in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, [data-reveal] { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 720px) {
  .nav-links { gap:16px; }
  .nav-links a.link { display:none; }
  .contact-form { grid-template-columns:1fr; }
}