:root {
  --black: #050605;
  --black-2: #080A08;
  --charcoal: #0B0E0C;
  --dark-gray: #151815;
  --gray: #252925;
  --green: #048A25;
  --green-light: #19B943;
  --green-dark: #02661B;
  --white: #FFFFFF;
  --gray-text: #B8BDB9;
  --gray-light: #D4D8D5;
  --border: rgba(255,255,255,0.08);
  --border-green: rgba(4,138,37,0.45);
  --shadow: 0 15px 40px rgba(0,0,0,0.35);
  --shadow-green: 0 0 35px rgba(4,138,37,0.15);
  --radius: 14px;
  --radius-small: 8px;
  --max-width: 1200px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:80px; }
body { background:var(--black); color:var(--white); font-family:"Roboto",sans-serif; line-height:1.6; overflow-x:hidden; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; }
ul { list-style:none; }

.container { width:calc(100% - 32px); max-width:var(--max-width); margin:0 auto; }
.section { padding:70px 0; }
.section-dark { background:var(--black); }
.section-charcoal { background:var(--charcoal); }

.section-title { margin-bottom:45px; text-align:center; }
.section-kicker { display:inline-block; margin-bottom:12px; color:var(--green-light); font-family:"Montserrat",sans-serif; font-size:.72rem; font-weight:800; letter-spacing:2px; text-transform:uppercase; }
.section-title h2 { font-family:"Montserrat",sans-serif; font-size:2rem; font-weight:800; line-height:1.15; }
.section-title p { max-width:680px; margin:16px auto 0; color:var(--gray-text); font-size:1rem; }
.green { color:var(--green-light); }

.btn {
  display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:13px 22px;
  border-radius:8px; font-family:"Montserrat",sans-serif; font-size:.75rem; font-weight:800;
  text-align:center; text-transform:uppercase;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.btn-primary { background:var(--green); color:var(--white); }
.btn-primary:hover { background:var(--green-light); transform:translateY(-2px); box-shadow:0 10px 25px rgba(4,138,37,.25); }
.btn-outline { border:1px solid var(--green); color:var(--green-light); background:transparent; }
.btn-outline:hover { background:var(--green); color:var(--white); transform:translateY(-2px); }

.site-header {
  position:fixed; top:0; left:0; width:100%; height:70px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; background:rgba(5,6,5,.96); border-bottom:1px solid var(--border);
  backdrop-filter:blur(12px); z-index:1000;
}
.logo { display:flex; flex-direction:column; width:max-content; font-family:"Montserrat",sans-serif; font-weight:900; line-height:.85; text-transform:uppercase; }
.logo span:nth-child(1), .logo span:nth-child(3) { font-size:.85rem; }
.logo span:nth-child(2) { color:var(--green-light); font-size:.55rem; letter-spacing:1px; text-align:center; }

.menu-toggle {
  width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:8px; background:var(--dark-gray);
  color:var(--white); cursor:pointer; font-size:1.1rem; transition:.25s ease;
}
.menu-toggle:hover { border-color:var(--green); color:var(--green-light); }

.main-nav {
  position:fixed; top:70px; right:-280px; width:200px; min-height:calc(60vh - 70px);
  padding:30px 20px; background:var(--charcoal); border-left:1px solid var(--border);
  transition:right .3s ease; z-index:999;
}
.main-nav.active { right:0; }
.main-nav ul { display:flex; flex-direction:column; gap:8px; }
.main-nav a { display:block; padding:13px 14px; color:var(--gray-light); font-family:"Montserrat",sans-serif; font-size:.78rem; font-weight:700; border-radius:7px; transition:.25s ease; }
.main-nav a:hover, .main-nav a:focus { color:var(--white); background:var(--green-dark); }
.main-nav .nav-cta { margin-top:8px; background:var(--green); color:var(--white); text-align:center; }
.main-nav .nav-cta:hover { background:var(--green-light); }

.hero {
  min-height:100vh; display:flex; align-items:center; padding:110px 0 60px;
  background: radial-gradient(circle at 50% 15%, rgba(4,138,37,.16), transparent 42%), var(--black);
}
.hero-container { width:calc(100% - 32px); max-width:var(--max-width); margin:0 auto; display:flex; flex-direction:column; gap:45px; }
.hero-content { text-align:center; }
.hero-kicker { display:inline-block; margin-bottom:15px; color:var(--green-light); font-family:"Montserrat",sans-serif; font-size:.72rem; font-weight:800; letter-spacing:2px; text-transform:uppercase; }
.hero h1 { font-family:"Montserrat",sans-serif; font-size:2.35rem; font-weight:900; line-height:1.05; }
.hero h1 span { display:block; color:var(--green-light); }
.hero-description { max-width:620px; margin:20px auto 0; color:var(--gray-text); font-size:1rem; }
.hero-highlight { max-width:600px; margin:18px auto 0; color:var(--gray-light); font-family:"Montserrat",sans-serif; font-size:.95rem; }
.hero-highlight strong { color:var(--white); }
.hero-actions { display:flex; flex-direction:column; gap:12px; margin-top:28px; }
.hero-image { display:flex; justify-content:center; }
.hero-image img { width:100%; max-width:420px; border-radius:var(--radius); box-shadow:var(--shadow); }

.platform-intro { display:flex; flex-direction:column; gap:30px; }
.platform-intro-text h3 { margin-bottom:15px; font-family:"Montserrat",sans-serif; font-size:1.5rem; line-height:1.2; }
.platform-intro-text p { margin-bottom:15px; color:var(--gray-text); font-size:1rem; }
.platform-intro-text strong { color:var(--white); }
.platform-box { padding:28px 22px; background:var(--dark-gray); border:1px solid var(--border-green); border-radius:var(--radius); box-shadow:var(--shadow); }
.platform-box .big-word { margin-bottom:3px; color:var(--green-light); font-family:"Montserrat",sans-serif; font-size:1.65rem; font-weight:900; }
.platform-box p { margin-bottom:20px; color:var(--gray-text); font-size:.9rem; }
.platform-box p:last-child { margin-bottom:0; }

.skills-grid { display:grid; grid-template-columns:1fr; gap:15px; }
.skill-card { min-height:0; padding:25px 20px; background:var(--dark-gray); border:1px solid var(--border); border-radius:var(--radius-small); transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.skill-card:hover { border-color:var(--green); transform:translateY(-3px); box-shadow:0 10px 25px rgba(0,0,0,.25); }
.skill-number { display:block; margin-bottom:12px; color:var(--green-light); font-family:"Montserrat",sans-serif; font-size:.72rem; font-weight:800; }
.skill-card h3 { margin-bottom:8px; font-family:"Montserrat",sans-serif; font-size:1rem; }
.skill-card p { color:var(--gray-text); font-size:.9rem; }

.systems-grid { display:grid; grid-template-columns:1fr; gap:16px; }
.system-card { position:relative; padding:25px 20px; background:var(--charcoal); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:transform .25s ease, border-color .25s ease; }
.system-card::before { content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--green); }
.system-card:hover { border-color:var(--border-green); transform:translateY(-3px); }
.system-number { color:var(--green-light); font-family:"Montserrat",sans-serif; font-size:.72rem; font-weight:800; }
.system-card h3 { margin:10px 0; font-family:"Montserrat",sans-serif; font-size:1.2rem; font-weight:800; }
.system-card p { color:var(--gray-text); font-size:.9rem; }
.system-price { margin-top:18px; color:var(--white); font-family:"Montserrat",sans-serif; font-size:.85rem; font-weight:800; }
.system-price span { color:var(--green-light); font-size:1rem; }

.commissions { display:grid; grid-template-columns:1fr; gap:18px; }
.commission-card { padding:30px 22px; background:var(--dark-gray); border:1px solid var(--border); border-radius:var(--radius); text-align:center; transition:transform .25s ease, border-color .25s ease; }
.commission-card:hover { transform:translateY(-4px); border-color:var(--green); }
.commission-card.featured { border-color:var(--green); box-shadow:var(--shadow-green); }
.commission-card h3 { font-family:"Montserrat",sans-serif; font-size:1rem; font-weight:800; }
.commission-price { margin:15px 0; font-family:"Montserrat",sans-serif; font-size:1.8rem; font-weight:900; }
.commission-direct { color:var(--green-light); font-family:"Montserrat",sans-serif; font-size:1.6rem; font-weight:900; }
.commission-label { color:var(--gray-text); font-size:.72rem; }
.commission-description { margin-top:15px; color:var(--gray-text); font-size:.85rem; }

.formula { display:flex; flex-direction:column; gap:12px; margin-top:35px; }
.formula-step { position:relative; padding:22px 18px; background:var(--dark-gray); border-left:3px solid var(--green); border-radius:0 var(--radius-small) var(--radius-small) 0; }
.formula-step strong { display:block; margin-bottom:5px; color:var(--green-light); font-family:"Montserrat",sans-serif; font-size:.78rem; }
.formula-step p { color:var(--gray-text); font-size:.9rem; }

.audience { display:flex; flex-direction:column; gap:15px; }
.audience-card { padding:25px 20px; background:var(--charcoal); border:1px solid var(--border); border-radius:var(--radius); }
.audience-card h3 { margin-bottom:10px; font-family:"Montserrat",sans-serif; font-size:1.05rem; }
.audience-card p { color:var(--gray-text); font-size:.9rem; }

.path { display:flex; flex-direction:column; }
.path-step { position:relative; padding:20px 0 20px 35px; border-left:2px solid var(--green); }
.path-step:last-child { border-left-color:transparent; }
.path-number { position:absolute; top:17px; left:-13px; width:24px; height:24px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--green); color:var(--white); font-family:"Montserrat",sans-serif; font-size:.7rem; font-weight:800; }
.path-step h3 { margin-bottom:5px; font-family:"Montserrat",sans-serif; font-size:1rem; }
.path-step p { color:var(--gray-text); font-size:.9rem; }

  .muro-socios-localito {
    position: relative;
    overflow: hidden;
    padding: clamp(3.5rem, 7vw, 6rem) 1.25rem;
    color: #fff;
    text-align: center;
    background: #000;
  }

  .muro-socios-localito__inner {
    position: relative;
    width: min(100%, 850px);
    margin: 0 auto;
  }

  .muro-socios-localito__eyebrow {
    display: inline-block;
    margin-bottom: 1rem;
    color: #fff;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.17em;
  }

  .muro-socios-localito h2 {
    margin: 0 auto 1.25rem;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    line-height: 1.15;
  }

  /* Único detalle verde del título */
  .muro-socios-localito h2 span {
    color: #19b943;
  }

  .muro-socios-localito__description {
    max-width: 690px;
    margin: 0 auto 2rem;
    color: #fff;
    font-size: 1.04rem;
    line-height: 1.8;
  }

  .muro-socios-localito__points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 0 auto 2.25rem;
  }

  .muro-socios-localito__point {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    min-height: 125px;
    padding: 1.25rem 0.85rem;
    border: 1px solid #292929;
    border-radius: 16px;
    background: #0b0b0b;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.5;
  }

  /* Iconos verdes */
  .muro-socios-localito__point i {
    color: #19b943;
    font-size: 1.55rem;
  }

  .muro-socios-localito__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    max-width: 100%;
    padding: 1rem 1.5rem;
    border: 2px solid #19b943;
    border-radius: 8px;
    background: #19b943;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.5;
    text-decoration: none;
    transition:
      background 0.2s ease,
      border-color 0.2s ease,
      color 0.2s ease,
      transform 0.2s ease,
      box-shadow 0.2s ease;
  }

  /* Hover verde */
  .muro-socios-localito__button:hover {
    transform: translateY(-2px);
    background: #12883b;
    border-color: #12883b;
    color: #fff;
    box-shadow: 0 8px 24px rgba(25, 185, 67, 0.25);
  }

  .muro-socios-localito__button:focus-visible {
    outline: 2px solid #19b943;
    outline-offset: 4px;
  }

  .muro-socios-localito__note {
    max-width: 600px;
    margin: 1.5rem auto 0;
    color: #fff;
    font-size: 0.85rem;
    line-height: 1.8;
  }

  @media (max-width: 600px) {
    .muro-socios-localito__points {
      grid-template-columns: 1fr;
      gap: 0.75rem;
    }

    .muro-socios-localito__point {
      flex-direction: row;
      justify-content: flex-start;
      min-height: auto;
      padding: 1rem;
      text-align: left;
    }

    .muro-socios-localito__point i {
      width: 30px;
      flex-shrink: 0;
      text-align: center;
    }

    .muro-socios-localito__button {
      width: 100%;
      padding: 0.95rem 1rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .muro-socios-localito__button {
      transition: none;
    }

    .muro-socios-localito__button:hover {
      transform: none;
    }
  }

.final-cta { padding:40px 20px; text-align:center; background:linear-gradient(135deg, var(--green-dark), var(--green)); }
.final-cta h2 { font-family:"Montserrat",sans-serif; font-size:2rem; font-weight:900; line-height:1.1; }
.final-cta p { max-width:650px; margin:18px auto 25px; color:rgba(255,255,255,.88); font-size:.95rem; }
.final-cta .btn { background:var(--white); color:var(--green-dark); }
.final-cta .btn:hover { background:var(--black); color:var(--white); }

.site-footer { padding:50px 0 25px; background:var(--black-2); border-top:1px solid var(--border); }
.footer-content { display:flex; flex-direction:column; gap:30px; text-align: center; }
.footer-brand h3 { font-family:"Montserrat",sans-serif; font-size:1rem; }
.footer-brand p { max-width:430px; margin-top:10px; color:var(--gray-text); font-size:.85rem; }
.footer-links h4 { margin-bottom:12px; color:var(--green-light); font-family:"Montserrat",sans-serif; font-size:.72rem; letter-spacing:1px; text-transform:uppercase; }
.footer-links a { display:block; margin-bottom:7px; color:var(--gray-text); font-size:.85rem; transition:color .2s ease; }
.footer-links a:hover { color:var(--green-light); }
.footer-bottom { margin-top:35px; padding-top:20px; border-top:1px solid var(--border); text-align:center; color:#777; font-size:.7rem; }
.footer-bottom p + p { margin-top:8px; }

.reveal { opacity:0; transform:translateY(25px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

::selection { background:var(--green); color:var(--white); }
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:var(--black); }
::-webkit-scrollbar-thumb { background:var(--gray); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:var(--green); }

@media (min-width:768px){
  .container { width:calc(100% - 60px); }
  .section { padding:90px 0; }
  .section-title h2 { font-size:2.6rem; }
  .site-header { height:76px; padding:0 30px; }
  .menu-toggle { display:none; }
  .main-nav { position:static; width:auto; min-height:auto; padding:0; background:transparent; border:none; }
  .main-nav ul { flex-direction:row; align-items:center; gap:4px; }
  .main-nav a { padding:9px 10px; font-size:.68rem; }
  .main-nav .nav-cta { margin-top:0; }
  .hero { padding-top:125px; }
  .hero-container { width:calc(100% - 60px); flex-direction:row; align-items:center; gap:50px; }
  .hero-content { flex:1; text-align:left; }
  .hero-description { margin-left:0; }
  .hero-highlight { margin-left:0; }
  .hero-actions { flex-direction:row; flex-wrap:wrap; }
  .hero-image { flex:0 0 42%; }
  .hero h1 { font-size:3.1rem; }
  .platform-intro { display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:50px; }
  .skills-grid { grid-template-columns:repeat(2,1fr); }
  .systems-grid { grid-template-columns:repeat(2,1fr); }
  .commissions { grid-template-columns:repeat(3,1fr); align-items:stretch; }
  .audience { display:grid; grid-template-columns:repeat(2,1fr); }
  .path { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .path-step { padding:25px 20px; border-left:none; border-top:3px solid var(--green); }
  .path-step:last-child { border-top-color:var(--green); }
  .path-number { top:-13px; left:20px; }
  .footer-content { display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; }
}

@media (min-width:1100px){
  .container { width:calc(100% - 100px); }
  .section { padding:110px 0; }
  .site-header { height:82px; padding:0 50px; }
  .logo span:nth-child(1), .logo span:nth-child(3) { font-size:1rem; }
  .logo span:nth-child(2) { font-size:.6rem; }
  .main-nav ul { gap:8px; }
  .main-nav a { padding:10px 13px; font-size:.72rem; }
  .hero { min-height:100vh; padding-top:130px; }
  .hero-container { width:calc(100% - 100px); gap:80px; }
  .hero-content { flex:1.1; }
  .hero-image { flex:0 0 40%; }
  .hero h1 { font-size:4.2rem; }
  .hero-description { font-size:1.1rem; line-height:1.75; }
  .hero-highlight { font-size:1rem; }
  .platform-intro { grid-template-columns:1fr 1fr; gap:90px; }
  .platform-intro-text h3 { font-size:2rem; }
  .platform-box { padding:45px; }
  .platform-box .big-word { font-size:2rem; }
  .skills-grid { grid-template-columns:repeat(3,1fr); gap:20px; }
  .skill-card { min-height:190px; padding:30px; }
  .systems-grid { grid-template-columns:repeat(3,1fr); gap:22px; }
  .system-card { min-height:230px; padding:30px; }
  .commission-card { padding:40px 30px; }
  .commission-price { font-size:2.2rem; }
  .commission-direct { font-size:2rem; }
  .audience { grid-template-columns:repeat(3,1fr); gap:25px; }
  .audience-card { padding:30px; }
  .path { gap:30px; }
  .path-step { padding:30px 25px; }
  .final-cta { padding:110px 30px; }
  .final-cta h2 { font-size:3.4rem; }
}

@media (min-width:1400px){
  :root { --max-width:1280px; }
  .container { width:calc(100% - 120px); }
  .section { padding:130px 0; }
  .site-header { padding:0 70px; }
  .hero-container { width:calc(100% - 120px); gap:110px; }
  .hero h1 { font-size:5rem; }
  .hero-description { font-size:1.2rem; line-height:1.8; }
  .hero-image img { max-width:520px; }
  .section-title h2 { font-size:3.3rem; }
  .section-title p { font-size:1.1rem; }
  .platform-intro { gap:120px; }
  .platform-intro-text h3 { font-size:2.3rem; }
  .skills-grid { gap:25px; }
  .skill-card { min-height:210px; padding:35px; }
  .systems-grid { gap:25px; }
  .system-card { min-height:260px; padding:35px; }
  .commissions { gap:25px; }
  .commission-card { min-height:390px; padding:45px 35px; }
  .final-cta { padding:150px 30px; }
  .final-cta h2 { font-size:4.2rem; }
  .final-cta p { font-size:1.1rem; }
}