/* ============================================
   LA MENTE MAESTRA — CSS PREMIUM v3
   Luxury Culinary Editorial
   Fraunces + Jost + JetBrains Mono
   ============================================ */
/* RESET DE EMERGENCIA PARA WHATSAPP */
.wa-floating-button {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    left: auto !important;
    display: flex !important;
    z-index: 99999 !important;
    text-decoration: none !important;
    background: none !important;
}

.wa-button-inner {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 20px !important;
    background: #0b1e2d !important; /* Color azul oscuro de tu sitio */
    border: 1px solid #c8a96a !important;
    border-radius: 20px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8) !important;
}

.wa-label-container {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
}

.wa-uptitle {
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #c8a96a !important;
    margin: 0 !important;
    letter-spacing: 1px !important;
}

.wa-tel {
    font-size: 14px !important;
    color: #ede8df !important;
    margin: 0 !important;
    font-family: sans-serif !important;
}

.wa-status-indicator {
    width: 8px !important;
    height: 8px !important;
    background: #4ade80 !important;
    border-radius: 50% !important;
}
:root {
  --bg:    #050d16;
  --bg2:   #000000;
  --bg3:   #0b1e2d;
  --bg4:   #122840;
  --bg5:   #1a3350;

  --accent:      #c8a96a;
  --accent2:     #a8893a;
  --accent3:     #e8d4a0;
  --accent4:     #f5eed8;
  --accent-glow: rgba(200,169,106,0.14);
  --accent-glow2: rgba(200,169,106,0.05);

  --green:  #38a169;
  --red:    #e53e3e;
  --orange: #dd6b20;

  --text:  #ede8df;
  --text2: #b5ad9e;
  --text3: #6e6558;

  --radius:    10px;
  --radius-lg: 18px;
  --radius-xl: 28px;

  --border:        1px solid rgba(200,169,106,0.18);
  --border-subtle: 1px solid rgba(255,255,255,0.055);
  --border-strong: 1px solid rgba(200,169,106,0.35);

  --ease:        cubic-bezier(0.25,0.46,0.45,0.94);
  --ease-bounce: cubic-bezier(0.34,1.56,0.64,1);
  --ease-out:    cubic-bezier(0.16,1,0.3,1);
  --t:  all 0.4s var(--ease);
  --tf: all 0.2s ease;
  --ts: all 0.8s var(--ease);
}


#btn-descarga {
  position: relative;
  z-index: 10;
}
/* ── Reset ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:80px; font-size:16px; }

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family:'monserrat', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ── Atmospheric backgrounds ── */
body::before {
  content:'';
  position:fixed; inset:0; z-index:-3;
  background:
    radial-gradient(ellipse 100% 70% at 10% 20%, rgba(11,30,45,0.9) 0%, transparent 60%),
    radial-gradient(ellipse 80% 90% at 90% 80%, rgba(18,40,64,0.6) 0%, transparent 60%),
    var(--bg);
  animation: bgShift 28s ease-in-out infinite alternate;
}

/* Noise texture */
.noise-overlay {
  position:fixed; inset:0; z-index:-1;
  opacity:0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  pointer-events:none;
}

/* Grid */
.grid-overlay {
  position:fixed; inset:0; z-index:-2;
  background-image:
    linear-gradient(rgba(200,169,106,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,169,106,0.03) 1px, transparent 1px);
  background-size:72px 72px;
  pointer-events:none;
  mask-image: radial-gradient(ellipse 75% 75% at 50% 40%, black 20%, transparent 100%);
}

/* Stars */
body::after {
  content:'';
  position:fixed; inset:0; z-index:-2;
  background-image:
    radial-gradient(1px 1px at 7%  11%, rgba(255,255,255,0.2), transparent),
    radial-gradient(1px 1px at 19% 47%, rgba(200,169,106,0.16), transparent),
    radial-gradient(1.5px 1.5px at 29% 79%, rgba(255,255,255,0.12), transparent),
    radial-gradient(1px 1px at 41% 23%, rgba(255,255,255,0.14), transparent),
    radial-gradient(1px 1px at 53% 87%, rgba(200,169,106,0.11), transparent),
    radial-gradient(1.5px 1.5px at 61% 37%, rgba(255,255,255,0.16), transparent),
    radial-gradient(1px 1px at 73% 61%, rgba(255,255,255,0.08), transparent),
    radial-gradient(1px 1px at 83% 17%, rgba(200,169,106,0.1), transparent),
    radial-gradient(1.5px 1.5px at 91% 57%, rgba(255,255,255,0.13), transparent);
  animation: starsFloat 16s ease-in-out infinite alternate;
  pointer-events:none;
}

@keyframes bgShift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
@keyframes starsFloat {
  0%   { opacity:0.45; transform:translateY(0); }
  50%  { opacity:1; }
  100% { opacity:0.5; transform:translateY(-10px); }
}

a { text-decoration:none; color:inherit; transition:var(--tf); }
ul { list-style:none; }
img { max-width:100%; height:auto; display:block; }
.material-symbols-rounded {
  font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24;
  vertical-align:middle; user-select:none;
}
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg2); }
::-webkit-scrollbar-thumb { background:var(--bg4); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:var(--accent2); }
::selection { background:var(--accent); color:var(--bg); }

/* ============================================
   NAV
   ============================================ */
nav {
  position:fixed; top:0; left:0;
  width:100%; z-index:1000;
  display:flex; justify-content:space-between; align-items:center;
  padding:0.75rem 5%;
  background:rgba(5,13,22,0.3);
  backdrop-filter:blur(32px) saturate(200%);
  -webkit-backdrop-filter:blur(32px) saturate(200%);
  border-bottom:var(--border-subtle);
  transition:var(--t);
}
nav.scrolled {
  padding:0.5rem 5%;
  background:rgba(5,13,22,0.95);
  border-bottom:var(--border);
  box-shadow:0 8px 40px rgba(0,0,0,0.55);
}
.logo { display:flex; align-items:center; z-index:1001; }
.brand-logo {
  height:84px; width:auto;
  transition:var(--t);
  filter:drop-shadow(0 0 10px var(--accent-glow));
  animation:logoFloat 7s ease-in-out infinite;
}
@keyframes logoFloat {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-3px); }
}
.brand-logo:hover { transform:scale(1.06); }
.nav-links { display:flex; align-items:center; gap:0.15rem; }
.nav-links li a {
  position:relative;
  display:flex; align-items:center; gap:0.4rem;
  padding:0.5rem 0.9rem;
  font-size:0.87rem; font-weight:500; letter-spacing:0.02em;
  color:var(--text2);
  border-radius:var(--radius);
  transition:var(--tf);
}
.nav-icon { font-size:17px!important; opacity:0.5; transition:var(--t); }
.nav-links li a:hover { color:var(--accent); background:var(--accent-glow); transform:translateY(-1px); }
.nav-links li a:hover .nav-icon { opacity:1; animation:iconBounce 0.4s var(--ease-bounce); }
@keyframes iconBounce { 0%,100%{transform:scale(1)} 50%{transform:scale(1.3)} }
.nav-links li a.active { color:var(--accent); background:var(--accent-glow); }
.nav-links li a.active .nav-icon { opacity:1; }

.nav-cta {
  background:linear-gradient(135deg, var(--accent), var(--accent2))!important;
  color:var(--bg)!important;
  padding:0.5rem 1.2rem!important;
  font-weight:700!important;
  box-shadow:0 2px 14px rgba(200,169,106,0.22);
}
.nav-cta:hover {
  transform:translateY(-2px)!important;
  box-shadow:0 6px 24px rgba(200,169,106,0.38)!important;
}

.menu-toggle {
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; cursor:pointer; z-index:1001;
  padding:7px; border-radius:var(--radius);
  background:transparent; border:var(--border-subtle);
  transition:var(--tf);
}
.menu-toggle:hover { background:var(--accent-glow); border-color:var(--border); }
.menu-toggle span { display:block; width:100%; height:2px; background:var(--accent); border-radius:2px; transition:var(--t); transform-origin:center; }
.menu-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.menu-toggle.active span:nth-child(2) { opacity:0; transform:scaleX(0); }
.menu-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* ============================================
   HERO
   ============================================ */
header { position:relative; min-height:100vh; overflow:hidden; }

.orb { position:absolute; border-radius:50%; pointer-events:none; z-index:0; }
.orb-1 {
  width:700px; height:700px; top:-250px; right:-250px;
  background:radial-gradient(circle, rgba(18,40,64,0.6) 0%, transparent 70%);
  animation:orbFloat1 20s ease-in-out infinite;
}
.orb-2 {
  width:450px; height:450px; bottom:-120px; left:-120px;
  background:radial-gradient(circle, rgba(200,169,106,0.035) 0%, transparent 70%);
  animation:orbFloat2 16s ease-in-out infinite reverse;
}
.orb-3 {
  width:300px; height:300px; top:55%; left:45%;
  background:radial-gradient(circle, rgba(200,169,106,0.025) 0%, transparent 70%);
  animation:orbFloat1 25s ease-in-out infinite;
}
@keyframes orbFloat1 {
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(-70px,55px) scale(1.07)}
  66%{transform:translate(35px,-35px) scale(0.95)}
}
@keyframes orbFloat2 {
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(45px,-65px) scale(1.1)}
}

.hero {
  display:flex; align-items:center; justify-content:center;
  gap:4rem; min-height:100vh;
  padding:130px 5% 80px; position:relative; z-index:1;
}
.hero-content { flex:1; max-width:560px; animation:heroSlideIn 1s var(--ease-out); }
@keyframes heroSlideIn { from{opacity:0;transform:translateY(40px);filter:blur(8px)} to{opacity:1;transform:translateY(0);filter:blur(0)} }

/* Badge */
.badge {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.42rem 1.2rem 0.42rem 0.8rem;
  background:linear-gradient(135deg, rgba(200,169,106,0.1), rgba(200,169,106,0.03));
  border:var(--border); border-radius:50px;
  font-size:0.73rem; font-weight:700; letter-spacing:0.2em;
  color:var(--accent); margin-bottom:2rem;
  animation:badgePulse 3.5s ease-in-out infinite;
  position:relative; overflow:hidden;
}
.badge-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); animation:dotBlink 1.5s ease-in-out infinite; flex-shrink:0; }
@keyframes dotBlink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.35;transform:scale(0.65)} }
.badge::before {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(200,169,106,0.2),transparent);
  animation:badgeSweep 4s ease-in-out infinite;
}
@keyframes badgeSweep { 0%{left:-100%} 50%{left:100%} 100%{left:100%} }
.badge-icon { font-size:15px!important; animation:rocketShake 2.5s ease-in-out infinite; }
@keyframes rocketShake { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-10deg)} 75%{transform:rotate(10deg)} }
@keyframes badgePulse { 0%,100%{box-shadow:0 0 10px var(--accent-glow)} 50%{box-shadow:0 0 24px var(--accent-glow),0 0 50px var(--accent-glow2)} }

/* Hero h1 */
.hero-content h1 {
  font-family:'monserrat', sans-serif;
  font-size:clamp(2.7rem,5.5vw,4.1rem);
  font-weight:700; line-height:1.1;
  margin-bottom:1.6rem; color:var(--text);
  letter-spacing:-0.025em;
  animation:titleReveal 1.1s var(--ease-out) 0.15s both;
}
@keyframes titleReveal { from{opacity:0;transform:translateY(24px);filter:blur(6px)} to{opacity:1;transform:translateY(0);filter:blur(0)} }
.hero-em {
  display:block; font-style:italic; font-weight:600;
  background:linear-gradient(120deg, var(--accent) 0%, var(--accent3) 40%, var(--accent2) 70%, var(--accent) 100%);
  background-size:300% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:goldShimmer 6s ease-in-out infinite;
}
@keyframes goldShimmer { 0%{background-position:0% center} 50%{background-position:100% center} 100%{background-position:0% center} }
.hero-subtitle { font-size:1.12rem; color:var(--text2); margin-bottom:0.9rem; line-height:1.68; animation:fadeUp 1s var(--ease-out) 0.35s both; }
.hero-description { font-size:0.95rem; color:var(--text3); margin-bottom:2.4rem; line-height:1.8; animation:fadeUp 1s var(--ease-out) 0.45s both; }
@keyframes fadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }

.cta-group { display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:3rem; animation:fadeUp 1s var(--ease-out) 0.55s both; }

.hero-stats {
  display:flex; align-items:center; gap:1.2rem;
  padding:1rem 1.6rem;
  background:rgba(11,30,45,0.55);
  border:var(--border-subtle); border-radius:var(--radius-lg);
  backdrop-filter:blur(16px);
  animation:fadeUp 1s var(--ease-out) 0.7s both;
  transition:var(--t);
}
.hero-stats:hover { background:rgba(11,30,45,0.75); border-color:rgba(200,169,106,0.13); transform:translateY(-2px); }
.stat-item { display:flex; align-items:center; gap:0.65rem; }
.stat-icon { font-size:20px!important; color:var(--accent); }
.stat-item div { display:flex; flex-direction:column; }
.stat-item strong { font-size:0.9rem; font-weight:700; color:var(--text); line-height:1.2; }
.stat-item span:not(.material-symbols-rounded) { font-size:0.72rem; color:var(--text3); font-weight:400; }
.stat-divider { width:1px; height:28px; background:rgba(255,255,255,0.07); flex-shrink:0; }

/* Hero image */
.hero-image { flex:1.5; max-width:860px; position:relative; animation:heroImageIn 1.2s var(--ease-out) 0.2s both; }
@keyframes heroImageIn { from{opacity:0;transform:translateY(50px) scale(0.93);filter:blur(8px)} to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)} }

.hero-mockup-container {
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:
    0 35px 100px rgba(0,0,0,0.7),
    0 0 0 1px rgba(200,169,106,0.12),
    0 0 0 2px rgba(255,255,255,0.025);
  transition:var(--t);
  animation:mockupFloat 9s ease-in-out infinite;
}
@keyframes mockupFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
.hero-mockup-container:hover {
  box-shadow:0 45px 120px rgba(0,0,0,0.75),0 0 0 1px rgba(200,169,106,0.28),0 0 80px rgba(200,169,106,0.06);
  animation-play-state:paused; transform:translateY(-10px) scale(1.01);
}
.mockup-browser-bar {
  display:flex; align-items:center; gap:8px;
  padding:10px 16px;
  background:linear-gradient(180deg,var(--bg4),var(--bg3));
  border-bottom:var(--border-subtle);
}
.mockup-browser-bar .dot { width:10px; height:10px; border-radius:50%; display:inline-block; transition:var(--t); }
.mockup-browser-bar .dot:nth-child(1) { background:var(--red); box-shadow:0 0 5px rgba(229,62,62,0.5); }
.mockup-browser-bar .dot:nth-child(2) { background:var(--orange); box-shadow:0 0 5px rgba(221,107,32,0.5); }
.mockup-browser-bar .dot:nth-child(3) { background:var(--green); box-shadow:0 0 5px rgba(56,161,105,0.5); }
.hero-mockup-container:hover .dot { animation:dotPulse 1s ease-in-out infinite; }
.hero-mockup-container:hover .dot:nth-child(2) { animation-delay:0.15s; }
.hero-mockup-container:hover .dot:nth-child(3) { animation-delay:0.3s; }
@keyframes dotPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.4)} }
.browser-url {
  display:flex; align-items:center; gap:6px;
  margin-left:12px; padding:4px 14px;
  background:rgba(0,0,0,0.35); border-radius:6px;
  font-size:0.73rem; color:var(--text3);
  font-family:'monserrat', sans-serif;
  flex:1; max-width:360px; border:var(--border-subtle);
}
.browser-url .material-symbols-rounded { color:var(--green); }
.hero-mockup { position:relative; background:var(--bg3); aspect-ratio:16/9; width:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hero-mockup img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: none !important; /* Fuerza a que no haya desenfoque */
    transition: var(--ts);
}
.mockup-overlay { position:absolute; inset:0; display:none; align-items:center; justify-content:center; background:rgba(5,13,22,0.38); backdrop-filter:blur(2px); transition:var(--ts); }
.hero-mockup-container:hover .mockup-overlay { background:rgba(5,13,22,0.08); backdrop-filter:blur(0); }
.mockup-overlay span {
  font-family:'monserrat', sans-serif; font-size:1.05rem; font-weight:700;
  letter-spacing:0.35em; color:var(--accent); text-shadow:0 0 30px var(--accent-glow);
  padding:0.75rem 2.2rem;
  border:var(--border); border-radius:var(--radius);
  background:rgba(5,13,22,0.65); backdrop-filter:blur(8px);
}

.float-badge {
  position:absolute; display:flex; align-items:center; gap:0.4rem;
  padding:0.55rem 1rem;
  background:rgba(11,30,45,0.92); border:var(--border); border-radius:50px;
  font-size:0.8rem; font-weight:600; color:var(--text);
  backdrop-filter:blur(18px); box-shadow:0 8px 24px rgba(0,0,0,0.45);
  pointer-events:none;
}
.float-badge .material-symbols-rounded { font-size:16px!important; }
.float-badge-1 { top:20%; left:-4%; animation:floatBadge1 6s ease-in-out infinite; animation-delay:1s; }
.float-badge-1 .material-symbols-rounded { color:var(--green); }
.float-badge-2 { bottom:20%; right:-3%; animation:floatBadge2 7s ease-in-out infinite; animation-delay:0.5s; }
.float-badge-2 .material-symbols-rounded { color:var(--accent); }
@keyframes floatBadge1 { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-8px) rotate(1deg)} }
@keyframes floatBadge2 { 0%,100%{transform:translateY(0) rotate(1deg)} 50%{transform:translateY(-10px) rotate(-1deg)} }

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  padding:0.85rem 1.8rem;
  font-family:'monserrat', sans-serif; font-size:0.93rem; font-weight:600;
  border:none; border-radius:var(--radius); cursor:pointer;
  transition:var(--t); white-space:nowrap;
  position:relative; overflow:hidden; letter-spacing:0.02em;
}
.btn .material-symbols-rounded { font-size:20px!important; transition:var(--t); }
.btn-primary {
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  color:var(--bg); box-shadow:0 4px 20px rgba(200,169,106,0.28);
}
.btn-primary::before {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.28),transparent);
  transition:left 0.55s ease;
}
.btn-primary:hover { transform:translateY(-3px) scale(1.02); box-shadow:0 10px 38px rgba(200,169,106,0.42); background:linear-gradient(135deg,var(--accent3),var(--accent)); }
.btn-primary:hover::before { left:100%; }
.btn-primary:hover .material-symbols-rounded { transform:translateX(3px); }
.btn-primary:active { transform:translateY(-1px) scale(0.98); }
.btn-secondary {
  background:transparent; color:var(--accent);
  border:1.5px solid rgba(200,169,106,0.35);
}
.btn-secondary::before {
  content:''; position:absolute; inset:0;
  background:var(--accent-glow); opacity:0;
  transition:opacity 0.3s ease; z-index:-1;
}
.btn-secondary:hover { border-color:var(--accent); transform:translateY(-3px); box-shadow:0 8px 28px rgba(200,169,106,0.1); }
.btn-secondary:hover::before { opacity:1; }
.btn-lg { padding:1.1rem 2.8rem; font-size:1.05rem; }
.btn-lg .material-symbols-rounded { font-size:22px!important; }
.btn-full { width:100%; }

/* ============================================
   SECTION EYEBROW — unique style
   ══ LABEL ══
   ============================================ */
.section-eyebrow {
  display:flex; align-items:center; justify-content:center;
  gap:1rem; margin-bottom:1.4rem;
}
.eyebrow-line { flex:1; max-width:60px; height:1px; background:linear-gradient(90deg,transparent,rgba(200,169,106,0.5)); }
.section-eyebrow .eyebrow-line:last-child { background:linear-gradient(90deg,rgba(200,169,106,0.5),transparent); }
.eyebrow-text {
  display:inline-flex; align-items:center; gap:0.4rem;
  font-size:0.72rem; font-weight:700; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--accent);
}
.eyebrow-text .material-symbols-rounded { font-size:14px!important; }

.section-header {
  text-align:center; max-width:700px; margin:0 auto 4.5rem;
}
.section-header h2 {
  font-family:'monserrat', sans-serif;
  font-size:clamp(2rem,4vw,2.9rem);
  font-weight:700; margin-bottom:1rem; color:var(--text);
  letter-spacing:-0.025em; line-height:1.18;
}
.section-header h2 span {
  font-style:italic;
  background:linear-gradient(130deg, var(--accent), var(--accent3));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.section-header p { font-size:1rem; color:var(--text3); line-height:1.8; }

/* Scroll reveal */
.scroll-reveal {
  opacity:0; transform:translateY(32px); filter:blur(4px);
  transition:opacity 0.75s var(--ease-out),transform 0.75s var(--ease-out),filter 0.75s var(--ease-out);
}
.scroll-reveal.revealed { opacity:1; transform:translateY(0); filter:blur(0); }

/* --- ESTILOS MEJORADOS: STORY BLOCK --- */
.story-block {
    max-width: 900px;
    margin: 0 auto 7rem; /* Espacio generoso para separar de la sección anterior */
    padding: 5rem 3rem;
    background: rgba(200, 169, 106, 0.03); 
    border: var(--border-subtle);
    border-radius: var(--radius-xl);
    text-align: center;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.story-quote {
    font-size: 5.5rem !important;
    color: var(--accent);
    opacity: 0.12;
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Fraunces', serif;
}

.story-inner {
    position: relative;
    z-index: 1;
}

.story-block p {
    font-family: 'Fraunces', serif;
    font-size: 1.5rem;
    line-height: 1.8;
    color: var(--text2);
    font-weight: 300;
    font-style: italic;
    margin-bottom: 3rem;
}

.story-block strong {
    color: var(--text);
    font-weight: 600;
    font-style: normal;
}

.highlight-text {
    color: var(--accent3);
    border-bottom: 2px solid var(--accent2);
    font-style: normal;
    padding-bottom: 2px;
}

.story-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

.story-line {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.6;
}

.story-author {
    font-family: 'Jost', sans-serif;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.35em;
    color: var(--accent);
    font-weight: 700;
}

/* Ajustes Responsivos para el Story Block */
@media (max-width: 768px) {
    .story-block {
        padding: 4rem 1.5rem;
        margin-bottom: 5rem;
        margin-top: 2rem;
    }
    .story-block p {
        font-size: 1.2rem;
    }
    .story-quote {
        font-size: 4rem !important;
    }
    .story-line {
        width: 40px;
    }
}
.launch-badge.active-status {
    background: rgba(56, 161, 105, 0.1) !important;
    border-color: #38a169 !important;
    color: #38a169 !important;
}

.launch-badge.active-status .material-symbols-rounded {
    animation: none !important; /* Quitamos el giro de reloj de arena */
}

/* ============================================
   FEATURES — numbered editorial cards
   ============================================ */
.features {
  padding:9rem 5%; position:relative;
  background:
    radial-gradient(ellipse 70% 60% at 90% 20%, rgba(18,40,64,0.55) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 5% 80%, rgba(200,169,106,0.04) 0%, transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(11,30,45,0.5) 50%, transparent 100%);
}
.section-line {
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:1px; height:90px;
  background:linear-gradient(180deg,transparent,rgba(200,169,106,0.5),transparent);
}

.features-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px;
  max-width:1200px; margin:0 auto;
  border:var(--border-subtle); border-radius:var(--radius-xl);
  overflow:hidden;
  background:rgba(200,169,106,0.08);
  box-shadow:0 0 0 1px rgba(200,169,106,0.07), 0 40px 80px rgba(0,0,0,0.4);
}

.feature-card {
  padding:2.4rem 2.2rem;
  background:rgba(11,30,45,0.7);
  transition:var(--t);
  position:relative;
  overflow:hidden;
  cursor:default;
  backdrop-filter:blur(10px);
}

.feature-card::after {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(200,169,106,0.05) 0%, transparent 55%);
  opacity:0; transition:opacity 0.4s ease;
}

.feature-card:hover {
  background:rgba(18,40,64,0.9);
  transform:scale(1.01);
  z-index:1;
  box-shadow:0 0 40px rgba(200,169,106,0.08) inset;
}
.feature-card:hover::after { opacity:1; }

/* Number + icon row */
.fc-top {
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:1.2rem;
}

.feature-icon-wrapper {
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(200,169,106,0.08);
  border:var(--border); border-radius:var(--radius);
  transition:var(--t);
}
.feature-card:hover .feature-icon-wrapper {
  background:rgba(200,169,106,0.15);
  transform:scale(1.1) rotate(4deg);
  border-color:rgba(200,169,106,0.4);
}
.feature-icon-wrapper .material-symbols-rounded { font-size:22px!important; color:var(--accent); }

/* Ghost number */
.fc-num {
  font-family:'monserrat', sans-serif;
  font-size:3rem; font-weight:700; line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(200,169,106,0.15);
  letter-spacing:-0.02em;
  transition:var(--t);
  user-select:none;
}
.feature-card:hover .fc-num {
  -webkit-text-stroke-color:rgba(200,169,106,0.35);
}

/* Animated rule */
.fc-rule {
  width:100%; height:1px;
  background:linear-gradient(90deg, var(--accent), transparent);
  margin-bottom:1.4rem;
  transform-origin:left;
  transform:scaleX(0.2);
  opacity:0.3;
  transition:transform 0.5s var(--ease-out), opacity 0.4s ease;
}
.feature-card:hover .fc-rule { transform:scaleX(1); opacity:1; }

.feature-card h3 {
  font-family:'monserrat', sans-serif;
  font-size:1.18rem; font-weight:600;
  color:var(--text); margin-bottom:0.75rem;
  letter-spacing:-0.01em;
}
.feature-card p { font-size:0.9rem; color:var(--text3); line-height:1.78; margin-bottom:1.6rem; }

.feature-link {
  display:flex; align-items:center; gap:0.35rem;
  font-size:0.82rem; font-weight:600;
  color:var(--accent); letter-spacing:0.04em; text-transform:uppercase;
  opacity:0; transform:translateX(-10px);
  transition:var(--t);
}
.feature-link .material-symbols-rounded { font-size:16px!important; }
.feature-card:hover .feature-link { opacity:1; transform:translateX(0); }

/* ============================================
   COURSES — table of contents / menu style
   ============================================ */
.courses {
  padding:9rem 5%; position:relative;
  background:
    radial-gradient(ellipse 80% 60% at 10% 30%, rgba(200,169,106,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 85% 70%, rgba(18,40,64,0.6) 0%, transparent 65%),
    linear-gradient(180deg, transparent 0%, rgba(7,19,30,0.7) 50%, transparent 100%);
}
.courses-content { max-width:1100px; margin:0 auto; }

.courses-list {
  display:flex; flex-direction:column;
  border:var(--border);
  border-radius:var(--radius-xl);
  overflow:hidden;
  background:rgba(11,30,45,0.45);
  backdrop-filter:blur(12px);
  box-shadow:0 30px 80px rgba(0,0,0,0.35);
  margin-bottom:3rem;
}

.course-row {
  display:grid;
  grid-template-columns:60px 56px 1fr auto;
  align-items:center;
  gap:1.6rem;
  padding:1.8rem 2.4rem;
  border-bottom:var(--border-subtle);
  transition:var(--t);
  position:relative;
  overflow:hidden;
}
.course-row:last-child { border-bottom:none; }

.course-row::before {
  content:'';
  position:absolute; left:0; top:0; bottom:0;
  width:0; background:linear-gradient(90deg,rgba(200,169,106,0.06),transparent);
  transition:width 0.5s var(--ease-out);
}
.course-row::after {
  content:'';
  position:absolute; left:0; top:0; bottom:0;
  width:3px; background:linear-gradient(180deg,transparent,var(--accent),transparent);
  opacity:0; transition:opacity 0.3s ease;
}
.course-row:hover { background:rgba(18,40,64,0.6); }
.course-row:hover::before { width:100%; }
.course-row:hover::after { opacity:1; }

/* Roman numerals */
.cr-num {
  font-family:'monserrat', sans-serif;
  font-size:1.1rem; font-weight:300; font-style:italic;
  color:var(--accent); letter-spacing:0.04em;
  text-align:center; opacity:0.7;
  transition:var(--t);
}
.course-row:hover .cr-num { opacity:1; transform:scale(1.08); }

.cr-icon {
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(200,169,106,0.07);
  border:var(--border-subtle);
  border-radius:var(--radius);
  transition:var(--t);
  flex-shrink:0;
}
.course-row:hover .cr-icon {
  background:rgba(200,169,106,0.14);
  border-color:rgba(200,169,106,0.3);
  transform:rotate(5deg) scale(1.05);
}
.cr-icon .material-symbols-rounded { font-size:22px!important; color:var(--accent); }

.cr-body h3 {
  font-family:'monserrat', sans-serif;
  font-size:1.1rem; font-weight:600; color:var(--text);
  margin-bottom:0.3rem; letter-spacing:-0.01em;
}
.cr-body p { font-size:0.88rem; color:var(--text3); line-height:1.6; }

.course-badge {
  display:inline-flex; align-items:center; gap:0.35rem;
  padding:0.35rem 1rem;
  background:rgba(200,169,106,0.07);
  border:var(--border); border-radius:50px;
  font-size:0.75rem; font-weight:600; color:var(--accent);
  letter-spacing:0.03em; white-space:nowrap; flex-shrink:0;
  transition:var(--t);
}
.course-badge .material-symbols-rounded { font-size:14px!important; }
.course-row:hover .course-badge { background:rgba(200,169,106,0.14); border-color:rgba(200,169,106,0.4); }

.courses-cta {
  display:flex; flex-direction:column; align-items:center; gap:1.2rem;
}
.courses-cta-text {
  display:flex; align-items:center; gap:0.4rem;
  font-size:0.88rem; color:var(--text3); font-style:italic;
}
.courses-cta-text .material-symbols-rounded { font-size:18px!important; color:var(--accent); }

/* ============================================
   FREE VERSION — manifesto numbered list
   ============================================ */

.free-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra todo el bloque de títulos y el grid */
}

.free-header {
    text-align: center; /* Centra el título y subtítulo */
    margin-bottom: 60px;
    width: 100%;
}

.free-header p {
    margin: 0 auto; /* Centra el párrafo descriptivo */
    max-width: 600px;
}

.free-grid-balance {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 50px;
    align-items: center; 
    width: 100%; /* Ocupa el ancho del contenedor centrado */
}

/* Columna Visual */
.app-mockup-wrapper {
    position: relative;
    border-radius: 12px;
    background: #0b1e2d;
    border: 1px solid rgba(200, 169, 106, 0.2);
    box-shadow: 0 40px 80px rgba(0,0,0,0.6);
    overflow: hidden;
}

.mockup-img {
    width: 100%;
    display: block;
    transition: transform 0.5s ease;
}

.trust-badge {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(11, 30, 45, 0.5);
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text3);
    font-size: 13px;
}

.trust-badge .material-symbols-rounded { color: var(--accent); font-size: 18px; }

/* Columna Información */
/* LISTA */
.manifesto-slim {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ITEM */
.m-item {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(200, 169, 106, 0.03); /* Fondo con un toque dorado muy sutil */
  border: 1px solid rgba(255, 255, 255, 0.05); /* Borde suave */
  transition: all 0.3s ease;
}

.m-item:hover {
  transform: translateY(-3px);
  border-color: rgba(200, 169, 106, 0.4); /* Brillo dorado al pasar el mouse */
  background: rgba(200, 169, 106, 0.08);
}

/* NUMERO */
.m-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent); /* Dorado de la página */
  min-width: 28px;
  font-family: 'JetBrains Mono', monospace;
}

/* TEXTO */
.m-txt strong {
  color: var(--text); /* Color crema/blanco roto de tu sitio */
  font-size: 15px;
}

.m-txt p {
  color: var(--text3); /* Color gris/marrón suave de tus descripciones */
  font-size: 13px;
  margin-top: 3px;
}

/* ITEM DESTACADO */
.m-item.highlight {
  border-color: var(--accent);
  background: rgba(200, 169, 106, 0.1);
}

/* ACTION BLOCK */
.action-block {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* BOTÓN PRO */
.btn-premium {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  color: var(--bg); /* El texto del botón debe ser oscuro como tu fondo */
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-premium:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 30px rgba(200, 169, 106, 0.3); /* Sombra dorada */
}

/* TAG */
.version-tag {
  font-size: 11px;
  color: var(--text3); /* Integrado con el esquema de colores */
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .free-grid-balance {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }
    .m-item { justify-content: center; }
    .m-txt { text-align: left; }
    .mini-tip { justify-content: center; }
}

/* ============================================
   COMING SOON — bordered frame with corners
   ============================================ */
.coming-soon {
  padding:9rem 5%; text-align:center;
  background:
    radial-gradient(ellipse 80% 80% at 50% 50%, rgba(200,169,106,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 0% 50%, rgba(18,40,64,0.5) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 50%, rgba(18,40,64,0.5) 0%, transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(8,20,32,0.65) 50%, transparent 100%);
}

.coming-soon-box {
  max-width:680px; margin:0 auto;
  padding:4.5rem 4rem;
  background:rgba(11,30,45,0.55);
  border:var(--border);
  border-radius:var(--radius-xl);
  position:relative; overflow:hidden;
  backdrop-filter:blur(18px);
  box-shadow:0 40px 100px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Corner ornaments */
.cs-corner {
  position:absolute; width:20px; height:20px;
  border-color:var(--accent); border-style:solid; opacity:0.5;
}
.cs-tl { top:16px; left:16px; border-width:2px 0 0 2px; border-radius:4px 0 0 0; }
.cs-tr { top:16px; right:16px; border-width:2px 2px 0 0; border-radius:0 4px 0 0; }
.cs-bl { bottom:16px; left:16px; border-width:0 0 2px 2px; border-radius:0 0 0 4px; }
.cs-br { bottom:16px; right:16px; border-width:0 2px 2px 0; border-radius:0 0 4px 0; }

.coming-glow {
  position:absolute; top:-50%; left:50%; transform:translateX(-50%);
  width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle,rgba(200,169,106,0.06) 0%,transparent 70%);
  pointer-events:none;
}

.coming-icon {
  font-size:52px!important; color:var(--accent); display:block;
  margin:0 auto 1.8rem;
  animation:iconFloat 4s ease-in-out infinite;
}
@keyframes iconFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

.coming-soon-box h2 {
  font-family:'monserrat', sans-serif;
  font-size:clamp(1.8rem,3.5vw,2.5rem);
  font-weight:700; color:var(--text);
  margin-bottom:1.2rem; letter-spacing:-0.02em; line-height:1.2;
}
.coming-soon-box h2 span {
  font-style:italic;
  background:linear-gradient(130deg,var(--accent),var(--accent3));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.coming-soon-box > p { font-size:1rem; color:var(--text3); line-height:1.8; margin-bottom:2rem; }

.coming-info {
  background:rgba(5,13,22,0.45); border:var(--border-subtle); border-radius:var(--radius);
  padding:1.5rem 2rem; margin-bottom:2.2rem; text-align:left;
}
.coming-question { display:flex; align-items:center; gap:0.5rem; font-size:0.95rem; font-weight:600; color:var(--text); margin-bottom:0.6rem; }
.coming-question .material-symbols-rounded { font-size:18px!important; color:var(--accent); }
.coming-answer { font-size:0.9rem; color:var(--text3); line-height:1.7; }

.launch-badge {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.7rem 1.8rem;
  background:linear-gradient(135deg,rgba(200,169,106,0.1),rgba(200,169,106,0.03));
  border:var(--border); border-radius:50px;
  font-size:0.85rem; font-weight:600; color:var(--accent);
  letter-spacing:0.04em;
  animation:badgePulse 3s ease-in-out infinite;
}
.launch-badge .material-symbols-rounded { font-size:18px!important; animation:spin 3s linear infinite; }
@keyframes spin { from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* ============================================
   NEWSLETTER — two-column layout
   ============================================ */
.newsletter {
  padding:9rem 5%;
  background:
    radial-gradient(ellipse 70% 70% at 80% 20%, rgba(18,40,64,0.55) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(200,169,106,0.04) 0%, transparent 55%),
    linear-gradient(180deg, transparent 0%, rgba(10,24,38,0.7) 50%, transparent 100%);
}

.newsletter-inner {
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center;
}

.nl-panel {}
.nl-eyebrow { justify-content:flex-start; }

.nl-title {
  font-family:'monserrat', sans-serif;
  font-size:clamp(2rem,3.5vw,2.8rem);
  font-weight:700; color:var(--text);
  margin-bottom:1rem; letter-spacing:-0.025em; line-height:1.18;
}
.nl-title span {
  font-style:italic;
  background:linear-gradient(130deg,var(--accent),var(--accent3));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.nl-desc { font-size:0.97rem; color:var(--text3); line-height:1.8; margin-bottom:2rem; }

.nl-perks { display:flex; flex-direction:column; gap:0.9rem; }
.nl-perk {
  display:flex; align-items:center; gap:0.9rem;
  padding:0.9rem 1.2rem;
  background:rgba(11,30,45,0.5);
  border:var(--border-subtle); border-radius:var(--radius);
  font-size:0.9rem; color:var(--text2);
  transition:var(--t);
}
.nl-perk:hover { border-color:rgba(200,169,106,0.2); background:rgba(18,40,64,0.6); transform:translateX(4px); }
.nl-perk .material-symbols-rounded { font-size:20px!important; color:var(--accent); flex-shrink:0; }

.nl-form-panel {
  background:rgba(11,30,45,0.6);
  border:var(--border-subtle); border-radius:var(--radius-xl);
  padding:2.5rem;
  backdrop-filter:blur(16px);
  box-shadow:0 30px 80px rgba(0,0,0,0.3);
  position:relative; overflow:hidden;
}
.nl-form-panel::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
}

.newsletter-form { display:flex; flex-direction:column; gap:1rem; margin-bottom:1.2rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

.input-group { position:relative; }
.input-icon {
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  font-size:20px!important; color:var(--text3); pointer-events:none;
  transition:var(--tf); z-index:1;
}
.input-group input {
  width:100%; padding:0.9rem 1rem 0.9rem 3rem;
  background:rgba(5,13,22,0.6);
  border:var(--border-subtle); border-radius:var(--radius);
  font-family:'monserrat', sans-serif; font-size:0.92rem; color:var(--text);
  outline:none; transition:var(--t);
}
.input-group input::placeholder { color:var(--text3); }
.input-group input:focus { border-color:rgba(200,169,106,0.38); background:rgba(5,13,22,0.8); box-shadow:0 0 0 3px rgba(200,169,106,0.05); }
.input-group:focus-within .input-icon { color:var(--accent); }

.newsletter-disclaimer {
  display:flex; align-items:flex-start; gap:0.4rem;
  font-size:0.79rem; color:var(--text3); line-height:1.5;
}
.newsletter-disclaimer .material-symbols-rounded { font-size:14px!important; flex-shrink:0; margin-top:2px; }

/* ============================================
   FOOTER
   ============================================ */
footer {
  padding:5rem 5% 2rem; border-top:var(--border-subtle);
  position:relative;
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(18,40,64,0.45) 0%, transparent 65%),
    linear-gradient(180deg, transparent 0%, rgba(5,10,18,0.8) 100%);
}
footer::before {
  content:'';
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:240px; height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
}
.footer-content { max-width:1100px; margin:0 auto; }
.footer-top {
  display:grid; grid-template-columns:1fr auto; gap:4rem;
  margin-bottom:3rem; align-items:start;
}
.footer-contact-item {
    background: rgba(200, 169, 106, 0.05);
    padding: 8px 12px !important;
    border-radius: var(--radius);
    border: 1px solid rgba(200, 169, 106, 0.1);
    margin-top: 5px;
}

.footer-contact-item:hover {
    border-color: var(--accent);
    background: rgba(200, 169, 106, 0.1) !important;
}
@media (min-width: 1024px) {
    .footer-top {
        display: grid;
        grid-template-columns: 1.5fr 1fr 1fr; /* La marca es más ancha que las columnas de links */
        gap: 4rem;
    }
}

.footer-brand { max-width:420px; }
.footer-logo-img { height:82px; width:auto; margin-bottom:1.2rem; filter:drop-shadow(0 0 8px var(--accent-glow)); }
.footer-tagline { font-size:0.82rem; font-weight:700; color:var(--accent); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:0.8rem; }
.footer-description { font-size:0.88rem; color:var(--text3); line-height:1.78; }

.footer-nav { display:flex; flex-direction:column; gap:0.55rem; }
.footer-nav h4 { font-size:0.72rem; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--text3); margin-bottom:0.5rem; }
.footer-nav a { display:flex; align-items:center; gap:0.5rem; font-size:0.88rem; color:var(--text2); padding:0.3rem 0; transition:var(--tf); }
.footer-nav a .material-symbols-rounded { font-size:16px!important; opacity:0.45; }
.footer-nav a:hover { color:var(--accent); transform:translateX(4px); }
.footer-nav a:hover .material-symbols-rounded { opacity:1; }

.footer-divider { height:1px; background:var(--border-subtle); margin-bottom:2rem; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-bottom p { font-size:0.81rem; color:var(--text3); }
.footer-credit { display:flex; align-items:center; gap:0.4rem; }

/* ============================================
   NOTIFICATIONS
   ============================================ */
.notification {
  position:fixed; top:24px; right:24px; z-index:9999;
  display:flex; align-items:flex-start; gap:0.8rem;
  padding:1rem 1.2rem; border-radius:var(--radius-lg);
  max-width:380px;
  backdrop-filter:blur(22px); border:var(--border-subtle);
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
  opacity:0; transform:translateX(110%) scale(0.95);
  transition:opacity 0.4s var(--ease),transform 0.4s var(--ease-bounce);
}
.notification.show { opacity:1; transform:translateX(0) scale(1); }
.notification-success { background:rgba(5,25,14,0.97); border-color:rgba(56,161,105,0.3); }
.notification-error { background:rgba(35,8,8,0.97); border-color:rgba(229,62,62,0.3); }
.notif-icon { flex-shrink:0; }
.notif-icon .material-symbols-rounded { font-size:22px!important; }
.notification-success .notif-icon .material-symbols-rounded { color:var(--green); }
.notification-error .notif-icon .material-symbols-rounded { color:var(--red); }
.notif-message { font-size:0.88rem; color:var(--text); line-height:1.5; }
.notif-close { background:none; border:none; color:var(--text3); cursor:pointer; padding:2px; border-radius:4px; transition:var(--tf); flex-shrink:0; margin-left:auto; display:flex; }
.notif-close:hover { color:var(--text); background:rgba(255,255,255,0.08); }

/* ============================================
   CURSOR GLOW
   ============================================ */
.cursor-glow {
  position:fixed; width:350px; height:350px;
  border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle,rgba(200,169,106,0.03) 0%,transparent 70%);
  mix-blend-mode:screen;
}

/* Section separators */
.features, .courses, .coming-soon { position:relative; }
.features::after, .courses::after, .coming-soon::after {
  content:'';
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:60px; height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
}

/* --- COMPONENTES WHATSAPP DENTRO DEL FORMULARIO --- */
.form-or-divider {
    text-align: center;
    margin: 15px 0;
    position: relative;
}

.form-or-divider::before {
    content: '';
    position: absolute;
    top: 50%; left: 0; width: 100%; height: 1px;
    background: rgba(255, 255, 255, 0.05);
    z-index: 0;
}

.form-or-divider span {
    background: #0b1e2d; /* El mismo fondo oscuro de tu formulario */
    padding: 0 15px;
    font-size: 11px;
    color: var(--text3);
    position: relative;
    z-index: 1;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-whatsapp-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid rgba(200, 169, 106, 0.2);
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    background: rgba(200, 169, 106, 0.02);
}

.btn-whatsapp-contact:hover {
    background: rgba(200, 169, 106, 0.08);
    border-color: var(--accent);
    transform: translateY(-2px);
}

.wa-svg-mini {
    width: 18px;
    height: 18px;
    fill: var(--accent);
}

/* Ajuste de icono de seguridad final */
.newsletter-disclaimer {
    margin-top: 20px;
    justify-content: center;
}

/* ============================================
   NUEVO WIDGET WHATSAPP - ESTILO CONCIERGE
   ============================================ */
/* ============================================
   WIDGET WHATSAPP GOLD PREMIUM
   ============================================ */
.wa-premium-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 99999;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.wa-btn-inner {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 20px 10px 10px;
    background: rgba(5, 13, 22, 0.7); /* Azul muy oscuro traslúcido */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(200, 169, 106, 0.3); /* Dorado sutil */
    border-radius: 50px; /* Estilo pill elegante */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

/* Contenedor del icono */
.wa-icon-box {
    position: relative;
    background: rgba(200, 169, 106, 0.1);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(200, 169, 106, 0.2);
}

/* Logo de WhatsApp en Dorado */
.wa-svg-gold {
    width: 24px;
    height: 24px;
    fill: #c8a96a; /* Tu color dorado exacto */
    filter: drop-shadow(0 0 4px rgba(200, 169, 106, 0.2));
}

/* Punto de estado "Online" */
.wa-status-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 9px;
    height: 9px;
    background: #4ade80; /* Verde neón */
    border-radius: 50%;
    border: 2px solid #050d16;
    box-shadow: 0 0 8px #4ade80;
}

/* Textos */
.wa-text-box {
    display: flex;
    flex-direction: column;
}

.wa-tag {
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 800;
    color: #c8a96a;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.wa-status {
    font-size: 13px;
    color: #ede8df;
    font-weight: 400;
    opacity: 0.8;
}

/* Efectos al pasar el mouse */
.wa-premium-btn:hover {
    transform: translateY(-8px) scale(1.02);
}

.wa-premium-btn:hover .wa-btn-inner {
    border-color: #c8a96a;
    background: rgba(11, 30, 45, 0.9);
    box-shadow: 0 20px 50px rgba(200, 169, 106, 0.2);
}

.wa-premium-btn:hover .wa-svg-gold {
    transform: scale(1.1);
}

/* Móvil: Diseño compacto */
@media (max-width: 768px) {
    .wa-premium-btn {
        bottom: 20px;
        right: 20px;
    }
    .wa-text-box {
        display: none; /* Escondemos texto en móvil */
    }
    .wa-btn-inner {
        padding: 8px;
        border-radius: 50%;
    }
}
/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width:1100px) {
  .features-grid { grid-template-columns:repeat(2,1fr); }
  .newsletter-inner { grid-template-columns:1fr; gap:3rem; }
  .nl-eyebrow { justify-content:center; }
  .nl-panel { text-align:center; }
  .nl-perks { align-items:center; }
  .nl-perk { width:100%; max-width:400px; }
}

/* ============================================
   📱 RESPONSIVE MOBILE (iPhone / Android)
   ============================================ */

@media (max-width: 1024px) {

  /* HERO */
  .hero {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
    padding: 120px 20px 60px;
  }

  .hero-content {
    max-width: 100%;
  }

  .hero-image {
    width: 100%;
  }

  /* CTA */
  .cta-group {
    justify-content: center;
  }

  /* STATS */
  .hero-stats {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* NAV */
  .menu-toggle {
    display: flex;
  }

  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100vh;
    width: 260px;
    background: rgba(5,13,22,0.98);
    flex-direction: column;
    padding: 100px 20px;
    gap: 1rem;
    transition: 0.3s ease;
  }

  .nav-links.active {
    right: 0;
  }

  .nav-links li {
    width: 100%;
  }

  .nav-links li a {
    width: 100%;
    justify-content: flex-start;
    font-size: 1rem;
    padding: 12px;
  }

  .nav-cta {
    width: 100%;
    text-align: center;
  }

  /* LOGO */
  .brand-logo {
    height: 60px;
  }

  /* FEATURES */
  .features-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* TEXTOS */
  .hero-content h1 {
    font-size: 2.2rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }

  .hero-description {
    font-size: 0.9rem;
  }
}


/* 📱 EXTRA CHICO (iPhone SE / Android chico) */
@media (max-width: 480px) {

  .hero {
    padding: 110px 15px 50px;
  }

  .hero-content h1 {
    font-size: 1.9rem;
  }

  .cta-group {
    flex-direction: column;
  }

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

  .hero-stats {
    flex-direction: column;
    gap: 10px;
  }

  .stat-divider {
    display: none;
  }
}

@media (max-width:768px) {
  html { font-size:15px; }
  nav { padding:0.7rem 5%; height:70px; }
  .brand-logo { height:44px!important; }
  .menu-toggle { display:flex; }
  .nav-links {
    position:fixed; top:0; right:-100%;
    width:80%; max-width:320px; height:100vh;
    flex-direction:column; justify-content:center; gap:0.5rem;
    padding:2rem;
    background:rgba(5,13,22,0.98); backdrop-filter:blur(32px);
    border-left:var(--border);
    transition:right 0.4s var(--ease); z-index:1000;
    box-shadow:-10px 0 50px rgba(0,0,0,0.65);
  }
  .nav-links.active { right:0; }
  .nav-links li a { font-size:1.05rem; padding:1rem 1.2rem; width:100%; }
  .nav-cta { width:100%; justify-content:center; margin-top:1rem; padding:1rem 1.2rem!important; }
  .hero { padding:100px 5% 50px; min-height:auto; gap:2.5rem; }
  .hero-content h1 { font-size:2.2rem; }
  .cta-group { flex-direction:column; width:100%; }
  .cta-group .btn { width:100%; justify-content:center; }
  .hero-stats { flex-direction:column; gap:1.2rem; padding:1.2rem; width:100%; }
  .stat-divider { width:60px; height:1px; }
  .hero-mockup { aspect-ratio:16/9; }
  .hero-mockup-container { animation:none; }
  .browser-url { display:none; }
  .float-badge { display:none; }

  .features { padding:6rem 4%; }
  .features-grid { grid-template-columns:1fr; border-radius:var(--radius-lg); }
  .feature-card { padding:2rem 1.8rem; }
  .fc-rule { transform:scaleX(0.4); opacity:0.5; }

  .courses { padding:6rem 4%; }
  .course-row { grid-template-columns:50px 46px 1fr; gap:1rem; padding:1.5rem 1.5rem; }
  .course-badge { display:none; }
/* ============================================
   SECCIÓN FREE VERSION - REDISEÑO
   ============================================ */
.free-version {
    padding: 100px 5%;
    position: relative;
    overflow: hidden;
}

.free-two-col {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr; /* La captura tiene más peso */
    gap: 80px;
    align-items: center; /* Centrado vertical perfecto */
    max-width: 1200px;
    margin: 0 auto;
}

/* Captura de Pantalla */
.app-preview {
    border-radius: 12px;
    background: #0b1e2d;
    border: 1px solid rgba(200, 169, 106, 0.2);
    box-shadow: 0 50px 100px rgba(0,0,0,0.5);
    overflow: hidden;
}

.app-preview-bar {
    background: #122840;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.app-preview-url {
    background: rgba(0,0,0,0.2);
    padding: 4px 15px;
    border-radius: 4px;
    font-size: 11px;
    color: var(--text3);
    margin-left: 10px;
    flex: 1;
}

/* Chips Flotantes */
.preview-chip {
    position: absolute;
    background: rgba(11, 30, 45, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(200, 169, 106, 0.3);
    padding: 12px 18px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.chip-local { top: 10%; right: -20px; animation: float 6s ease-in-out infinite; }
.chip-seguro { bottom: 5%; left: -20px; animation: float 6s ease-in-out infinite reverse; }

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Lista de Manifiesto */
.manifesto-list {
    margin-bottom: 40px;
}

.manifesto-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    position: relative;
}

.mi-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 24px;
    font-weight: 700;
    color: var(--accent);
    opacity: 0.3;
}

.mi-content strong {
    display: block;
    color: var(--text);
    font-size: 18px;
    margin-bottom: 5px;
}

.mi-content p {
    color: var(--text3);
    font-size: 14px;
    line-height: 1.6;
}

/* Caja de Botón */
.free-cta-box {
    background: rgba(200, 169, 106, 0.05);
    padding: 30px;
    border-radius: 16px;
    border: 1px dashed rgba(200, 169, 106, 0.2);
    text-align: center;
    margin-bottom: 30px;
}

.btn-glow {
    box-shadow: 0 0 20px rgba(200, 169, 106, 0.3);
}

.btn-glow:hover {
    box-shadow: 0 0 40px rgba(200, 169, 106, 0.5);
}

.cta-note {
    font-size: 12px;
    color: var(--text3);
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* Tip Box */
.tip-box {
    display: flex;
    gap: 15px;
    background: rgba(56, 161, 105, 0.05);
    border: 1px solid rgba(56, 161, 105, 0.2);
    padding: 20px;
    border-radius: 12px;
}

.tip-icon { color: var(--green); }
.tip-box p { font-size: 13px; color: var(--text2); }

/* Responsive */
@media (max-width: 992px) {
    .free-two-col {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .chip-local, .chip-seguro {
        position: static;
        margin: 10px 0;
    }
}


@media (hover:none) {
  .feature-card:hover,.course-row:hover,.manifesto-item:hover { transform:none; }
  .btn:hover { transform:none; }
  .feature-link { opacity:1; transform:none; }
  .fc-rule { transform:scaleX(0.6); opacity:0.6; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
  }
  html { scroll-behavior:auto; }
  .scroll-reveal { opacity:1; transform:none; filter:none; }
}

@media print {
  nav,.badge,.cta-group,.newsletter,
  .hero-image,.cursor-glow,.menu-toggle,
  .float-badge,.grid-overlay,.noise-overlay { display:none!important; }
  body { background:#fff; color:#000; }
}