/* ===== VYNET360 THEME v14b ===== */
:root {
  --brand-blue: #1399d6;
  --brand-orange: #ff6a00;
  --bg: #ffffff;
  --bg-soft: #f5f8fb;
  --text: #0b2a3f;
  --muted: #475569;
  --card: #ffffff;
  --border: #e2e8f0;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
}
html[data-theme="dark"] {
  --bg: #0b1320;
  --bg-soft: #0f1a2a;
  --text: #eaf4ff;
  --muted: #c2d3e5;
  --card: #0f1c30;
  --border: #1e3147;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  --font: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
}

/* Global */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
section, .section { scroll-margin-top: 80px; }
body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.65; }
.container { width: min(1150px, 92%); margin: 0 auto; }
.muted { color: var(--muted); }

.topbar { background: linear-gradient(90deg, var(--brand-blue), var(--brand-orange)); color:#fff; font-size:.9rem; padding:.4rem 0; }
.topbar a{ color:#fff; text-decoration:none; } .topbar .dot{ opacity:.7; margin: 0 .4rem; }
.flex{ display:flex; } .space-between{ justify-content:space-between; } .align-center{ align-items:center; }

.header { position: sticky; top:0; z-index:50; background: color-mix(in oklab, var(--bg) 86%, transparent); backdrop-filter: blur(10px); border-bottom:1px solid var(--border); }
.header__inner{ display:flex; align-items:center; justify-content:space-between; padding:.65rem 0; }
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit; font-weight:900; letter-spacing:.2px; }
.brand__logo{ width:40px; height:40px; } .brand__text{ font-size:1.3rem; }
.brand .accent{ color: var(--brand-orange); }
html[data-theme="light"] .brand__text { color: var(--brand-blue); }

.nav{ position:relative; } .nav__toggle{ display:none; width:44px; height:40px; border:0; background:transparent; cursor:pointer; }
.nav__toggle span{ display:block; height:2px; margin:7px; background:var(--text); transition:.3s; }
.nav__links{ list-style:none; display:flex; gap:1rem; margin:0; padding:0; align-items:center; }
.nav__links a{ text-decoration:none; color:var(--text); font-weight:900; padding:.4rem .6rem; border-radius:.6rem; }
.nav__links a:hover{ background: var(--bg-soft); }
.theme-switch{ border:1px solid var(--border); background:var(--card); padding:.4rem .55rem; border-radius:1rem; cursor:pointer; box-shadow: var(--shadow); display:flex; gap:.45rem; }
@media (max-width: 920px){
  .nav__toggle{ display:block; }
  .nav__links{ position:absolute; right:0; top:120%; flex-direction:column; background:var(--card); border:1px solid var(--border); padding:.8rem; border-radius:1rem; box-shadow: var(--shadow); display:none; }
  .nav__links.show{ display:flex; }
}

.hero{ position:relative; overflow:clip; padding:3.5rem 0 2rem;
  background: radial-gradient(1200px 250px at 20% -10%, color-mix(in oklab, var(--brand-orange) 25%, transparent), transparent),
              radial-gradient(1200px 250px at 80% -10%, color-mix(in oklab, var(--brand-blue) 35%, transparent), transparent); }
.hero__inner{ display:grid; grid-template-columns: 1.1fr .9fr; align-items:center; gap:2rem; }
.hero__logo{ width:85%; max-width:420px; filter: drop-shadow(0 10px 25px rgba(0,0,0,.2)); }
.orb{ position:absolute; width:160px; height:160px; border-radius:50%; filter:blur(25px); opacity:.6; }
.orb--left{ left:-20px; top:40px; background: var(--brand-orange); animation: floaty 6s ease-in-out infinite; }
.orb--right{ right:10px; top:0; background: var(--brand-blue); animation: floaty 7s ease-in-out infinite; }
.hero__wave{ height:50px; background: linear-gradient(180deg, transparent, var(--bg)); margin-top:1rem; }

/* HERO TITLE ultra legible */
:root{ --hero-plate-light: rgba(255,255,255,.86); --hero-plate-dark: rgba(12,19,32,.76); }
.hero-title{ display:grid; gap:.2rem; line-height:1.05; margin:0 0 .6rem; letter-spacing:.2px; font-weight:900; font-size: clamp(2.2rem, 3.8vw + .6rem, 4.2rem); position:relative; z-index:1; }
.hero-title .t1,.hero-title .t2,.hero-title .t3{ display:block; }
.hero-title::before{ content:""; position:absolute; inset:-14px -18px; z-index:-1; border-radius:20px;
  background: radial-gradient(1200px 240px at 10% 15%, var(--hero-plate-light), transparent 65%);
  box-shadow: 0 8px 30px rgba(0,0,0,.20);
}
html[data-theme="dark"] .hero-title::before{
  background: radial-gradient(1200px 260px at 10% 15%, var(--hero-plate-dark), transparent 65%);
  box-shadow: 0 14px 40px rgba(0,0,0,.55);
}
html[data-theme="light"] .hero-title .t1{ color:#0b2a3f; } html[data-theme="light"] .hero-title .t2{ color:#1399d6; } html[data-theme="light"] .hero-title .t3{ color:#0b2a3f; }
html[data-theme="dark"]  .hero-title .t1{ color:#eaf4ff; } html[data-theme="dark"] .hero-title .t2{ color:#4ec3ff; } html[data-theme="dark"] .hero-title .t3{ color:#eaf4ff; }
html[data-theme="light"] .hero-title span{ text-shadow: 0 1px 0 #fff, 0 10px 24px rgba(0,0,0,.18); }
html[data-theme="dark"]  .hero-title span{ text-shadow: 0 1px 0 rgba(0,0,0,.7), 0 18px 36px rgba(0,0,0,.85); }
.hero-title span{ transform: translateY(8px); opacity:0; transition: transform .6s ease, opacity .6s ease; }
.reveal.visible.hero-title span{ transform: translateY(0); opacity:1; }
.reveal.visible.hero-title .t2{ transition-delay:.06s; } .reveal.visible.hero-title .t3{ transition-delay:.12s; }

.section{ padding:3.2rem 0; } .section__title{ margin:0 0 .6rem; font-size: clamp(1.4rem, 1.2rem + 2vw, 2.4rem); } .section__lead{ color:var(--muted); margin:0 0 2rem; }

.grid{ display:grid; gap:1.2rem; } .grid--2{ grid-template-columns: repeat(2,1fr);} .grid--3{ grid-template-columns: repeat(3,1fr);} .grid--4{ grid-template-columns: repeat(4,1fr);}
@media (max-width:1000px){ .hero__inner{ grid-template-columns:1fr; } .hero__art{ order:-1; display:flex; align-items:center; justify-content:center; } }
@media (max-width:900px){ .grid--4{ grid-template-columns: repeat(2,1fr);} .grid--3{ grid-template-columns: repeat(2,1fr);} .grid--2{ grid-template-columns: 1fr;} }

.card,.glass,.product,.form{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:1.1rem; box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease; }
.glass{ background: color-mix(in srgb, var(--card) 80%, transparent); }
.hover-raise:hover{ transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.18); }
.emboss-hover{ position:relative; }
.emboss-hover:hover{ box-shadow: 0 22px 56px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12); }
.tilt{ will-change: transform; transform-style: preserve-3d; }
.tilt:hover{ transform: perspective(800px) rotateX(2deg) rotateY(-2deg) translateY(-4px); }

.product__icon{ font-size:1.8rem; } .chip{ display:inline-block; padding:.4rem .65rem; border-radius:999px; background:var(--bg-soft); color:var(--text); text-decoration:none; border:1px solid var(--border); font-weight:900; }
.list-check li::marker{ content:"✔ "; color: var(--brand-blue); font-weight:900; }

.marquee{ overflow:hidden; border:1px dashed var(--border); border-radius:12px; padding:.6rem; }
.marquee__track{ display:flex; gap:2.5rem; animation: slide 18s linear infinite; font-weight:900; color: color-mix(in oklab, var(--text) 70%, var(--brand-blue)); }
@keyframes slide{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

.form .form__row{ display:flex; flex-direction:column; gap:.35rem; margin-bottom:.7rem; }
.form input,.form select,.form textarea{ padding:.7rem .8rem; border-radius:10px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-weight:600; }
.form__feedback{ min-height:1.2rem; color:var(--brand-blue); font-weight:900; }
.form__errors{ margin:.4rem 0 0 1.1rem; color:#ff6666; font-weight:900; }
.field-error{ color:#ff5a5a; font-weight:900; font-size:.85rem; min-height:1rem; margin-top:.15rem; }
.is-invalid{ border-color:#ff6666 !important; box-shadow: 0 0 0 3px rgba(255,102,102,.12); }

/* CTAs */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:900; text-decoration:none; padding:.78rem 1.05rem; border-radius:14px; border:1px solid transparent; cursor:pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.btn--cta{ position:relative; overflow:hidden; box-shadow: 0 10px 24px rgba(0,0,0,.12); }
.btn--cta::after{ content:""; position:absolute; inset:-2px; border-radius:16px; background: conic-gradient(from 0deg, var(--brand-blue), var(--brand-orange), var(--brand-blue)); z-index:-1; filter: blur(12px); opacity:.18; transition: opacity .2s ease; }
.btn--cta:hover::after{ opacity:.34; }
.btn--primary{ background: linear-gradient(180deg, color-mix(in oklab, var(--brand-blue) 92%, white), color-mix(in oklab, var(--brand-blue) 72%, black)); color:#fff; }
.btn--primary:hover{ transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0,0,0,.18); }
.btn--ghost{ background: transparent; border-color: color-mix(in oklab, var(--brand-blue) 35%, var(--text)); color: var(--text); }
.btn--ghost:hover{ background: color-mix(in oklab, var(--brand-blue) 12%, var(--bg)); }
.btn--send{ font-size:1rem; padding:.9rem 1.2rem; background: linear-gradient(90deg, var(--brand-blue), var(--brand-orange)); border:0; color:#fff; box-shadow: 0 12px 28px rgba(0,0,0,.22); }
.btn--send:hover{ transform: translateY(-2px) scale(1.01); }
.btn--send:active{ transform: translateY(0); box-shadow: 0 6px 16px rgba(0,0,0,.18) inset; }

/* Stats elegantes */
.stats{ display:grid; grid-template-columns: repeat(3, minmax(120px,1fr)); gap:1rem; margin-top:1.4rem; }
.stat{ background: var(--card); border:1px solid var(--border); border-radius:14px; padding:.8rem; text-align:center; box-shadow: var(--shadow); }
.stat__num{ display:block; font-size: clamp(1.8rem, 1.2rem + 3.2vw, 3rem); font-weight:900; background: linear-gradient(90deg, var(--brand-blue), var(--brand-orange)); -webkit-background-clip:text; background-clip:text; color: transparent; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.stat__label{ color: var(--muted); font-weight:900; }

.footer{ background:var(--bg-soft); border-top:1px solid var(--border); }
.footer .links{ list-style:none; padding:0; margin:0; } .footer .links a{ text-decoration:none; color:var(--muted); font-weight:900; }
.footer__bottom{ text-align:center; padding:1rem 0; color:var(--muted); border-top:1px dashed var(--border); margin-top:1rem; }

/* Reveal on scroll (aparece al bajar y al subir) */
.reveal{ opacity:0; transform: translateY(18px) scale(.98); filter: blur(2px);
  transition: opacity .6s ease, transform .6s ease, filter .6s ease; will-change: transform, opacity, filter; }
.reveal.visible{ opacity:1; transform: translateY(0) scale(1); filter: none; }
@media (prefers-reduced-motion: reduce){ .marquee__track{ animation:none; } .reveal,.reveal.visible{ transition:none; transform:none; opacity:1; filter:none; } }

/* Toasts */
.toast{ position: fixed; left:50%; bottom:24px; transform: translateX(-50%) translateY(16px);
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-orange)); color:#fff; padding:.75rem 1rem; border-radius:14px; box-shadow:0 10px 28px rgba(0,0,0,.25);
  display:flex; align-items:center; gap:.6rem; font-weight:900; z-index:80; opacity:0; transition: transform .25s ease, opacity .25s ease; }
.toast--warn{ background: linear-gradient(90deg, #e6a400, #ff6a00); }
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); } .toast__icon{ font-size:1.1rem; }
html[data-theme="dark"] .toast{ box-shadow: 0 14px 36px rgba(0,0,0,.55); }

/* WhatsApp FAB */
.whatsapp-fab{ position: fixed; right:18px; bottom:18px; z-index:60; background:#25D366; color:#fff; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.25); border:2px solid #fff; transition: transform .2s ease, box-shadow .2s ease; }
.whatsapp-fab:hover{ transform: translateY(-3px) scale(1.03); box-shadow:0 12px 28px rgba(0,0,0,.3); }

@keyframes floaty { 0%{ transform: translateY(0) } 50%{ transform: translateY(-8px) } 100%{ transform: translateY(0) } }