<style>
    html, body { margin:0; padding:0; width:100%; overflow-x:hidden; }
    html { scroll-behavior:smooth; }
    body { -webkit-text-size-adjust:100%; touch-action: pan-y; }
    :focus-visible{ outline: 3px solid rgba(11,74,122,.35); outline-offset:2px; border-radius:12px; }

    #app, #app * { box-sizing:border-box; }
    #app{
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, Helvetica, sans-serif;
      color:#111;
      --green:#0f5b3c;
      --green2:#0b3d2e;
      --blue:#0b4a7a;
      --ink:#0b0f14;
      --muted:#5b6774;
      --line:rgba(17,17,17,.12);
      --soft:#f4f6f8;
      --max:1120px;
      --shadow: 0 14px 34px rgba(0,0,0,.10);
      --shadow2: 0 18px 50px rgba(0,0,0,.14);
      --headerH: 78px;
    }
    #app a { color:inherit; text-decoration:none; }
    #app img, #app video { max-width:100%; display:block; }
    #app ul { margin:0; padding:0; list-style:none; }
    #app .wrap{ max-width:var(--max); margin:0 auto; padding:0 16px; }

    #app .lift{ transition: transform .25s ease, box-shadow .25s ease; will-change: transform; }
    #app .lift:hover{ transform: translateY(-4px); box-shadow: var(--shadow2); }
    #app .reveal{ opacity:0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
    #app .reveal.in{ opacity:1; transform:none; }
    @media (prefers-reduced-motion: reduce){
      html { scroll-behavior:auto; }
      #app .lift, #app .reveal{ transition:none !important; }
    }

    #app header{
      background: rgba(255,255,255,.78);
      border-bottom:1px solid rgba(0,0,0,.08);
      position: sticky; top:0; z-index: 50;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    #app .head{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; min-height:var(--headerH); }
    #app .brand{ display:flex; align-items:center; gap:12px; min-width:0; }
    #app .logoWrap{
      width:120px; height:48px;
      border-radius:12px;
      overflow:hidden;
      border:1px solid rgba(0,0,0,.10);
      background:#fff;
      display:flex; align-items:center; justify-content:center;
      padding:6px 8px;
      flex:0 0 auto;
      box-shadow: 0 10px 24px rgba(0,0,0,.06);
    }
    #app .logoWrap img{ width:100%; object-fit:contain; }
    #app .brandTxt{ min-width:0; }
    #app .brand .name{ font-weight:950; letter-spacing:.2px; font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    #app .brand .tag{ font-size:12px; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

    #app nav.menu{ display:flex; align-items:center; gap:10px; font-weight:950; font-size:14px; }
    #app nav.menu > a{ padding:10px 10px; border-radius:12px; }
    #app nav.menu > a:hover{ background: rgba(244,246,248,.9); }

    #app .dd{ position:relative; }
    #app .dd > a{ display:inline-flex; align-items:center; gap:6px; }
    #app .dd .panel{
      display:none;
      position:absolute; top:46px; left:0;
      min-width:300px;
      background:#fff;
      border:1px solid var(--line);
      box-shadow: var(--shadow);
      border-radius:14px;
      padding:8px;
      transform-origin: top left;
      animation: ddIn .22s ease;
    }
    @keyframes ddIn{ from{opacity:0; transform: translateY(-6px);} to{opacity:1; transform:none;} }
    #app .dd:hover .panel{ display:block; }
    #app .dd .panel a{ display:block; padding:10px 10px; border-radius:12px; color:var(--ink); font-weight:950; }
    #app .dd .panel a:hover{ background: var(--soft); }
    #app .dd small{ display:block; font-weight:900; color:var(--muted); margin-top:2px; }

    #app .cta{
      background: var(--green);
      color:#fff !important;
      border-radius:14px;
      padding:10px 12px !important;
      display:inline-flex; align-items:center; gap:8px;
      font-weight:950;
      transition: background .2s ease, transform .2s ease;
      box-shadow: 0 14px 26px rgba(15,91,60,.18);
    }
    #app .cta:hover{ background: var(--green2); transform: translateY(-1px); }

    #app .telPill{
      display:inline-flex; align-items:center; gap:8px;
      padding:10px 12px;
      border-radius:14px;
      border:1px solid var(--line);
      background:#fff;
      font-weight:950;
      color:var(--ink);
    }
    #app .telPill:hover{ background: var(--soft); }

    #app .burger{
      display:none;
      border:1px solid var(--line);
      padding:10px 12px;
      border-radius:14px;
      background:#fff;
      font-weight:950;
    }
    #app .mnav{ display:none; border-top:1px solid var(--line); background:#fff; }
    #app .mnav a{ display:block; padding:14px 16px; border-bottom:1px solid rgba(0,0,0,.06); font-weight:950; }
    #app .mnav a:last-child{ border-bottom:none; }
    #app .mnav .sub{ padding-left:28px; color:var(--muted); }

    #app .hero{ position:relative; background:#000; }
    #app .slides{ position:relative; height:520px; overflow:hidden; background:#000; }
    #app .heroVideo{
      position:absolute; inset:0;
      width:100%; height:100%;
      object-fit:cover;
      transform: scale(1.02);
      filter: saturate(1.05) contrast(1.03);
    }
    #app .overlay{
      position:absolute; inset:0;
      background:
        radial-gradient(900px 520px at 20% 35%, rgba(15,91,60,.22), transparent 55%),
        linear-gradient(90deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.50) 55%, rgba(0,0,0,.28) 100%);
    }
    #app .heroContent{ position:absolute; inset:0; display:flex; align-items:center; }
    #app .heroBox{ max-width:780px; color:#fff; }
    #app .heroBox h1{ margin:0 0 10px; font-size:46px; line-height:1.02; letter-spacing:-.8px; font-weight:950; }
    #app .heroBox p{ margin:0 0 14px; font-size:16px; line-height:1.55; opacity:.98; max-width:66ch; }

    #app .heroBtns{ display:flex; gap:10px; flex-wrap:wrap; }
    #app .btn{
      display:inline-flex; align-items:center; justify-content:center;
      padding:12px 14px;
      border-radius:16px;
      font-weight:950;
      border:1px solid rgba(255,255,255,.25);
      background: rgba(255,255,255,.10);
      color:#fff;
      cursor:pointer;
      transition: background .2s ease, transform .2s ease;
      -webkit-tap-highlight-color: transparent;
    }
    #app .btn:hover{ background: rgba(255,255,255,.16); transform: translateY(-1px); }
    #app .btn.primary{ background: var(--green); border-color: transparent; }
    #app .btn.primary:hover{ background: var(--green2); }

    #app .heroContacts{
      margin-top:10px;
      display:flex; gap:10px; flex-wrap:wrap;
      align-items:center;
      font-weight:950;
      opacity:.97;
    }
    #app .heroContacts a{
      display:inline-flex; align-items:center; gap:8px;
      padding:10px 12px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.10);
    }
    #app .heroContacts a:hover{ background: rgba(255,255,255,.16); }

    #app .contactName{
      width:100%;
      font-weight:950;
      opacity:.95;
      margin-top:6px;
      letter-spacing:.2px;
    }

    #app section{ padding:34px 0; background:#fff; scroll-margin-top: calc(var(--headerH) + 14px); }
    #app .titleRow{ text-align:center; margin-bottom:18px; }
    #app .titleRow h2{ margin:0 0 8px; font-size:28px; font-weight:950; letter-spacing:.2px; color: var(--ink); text-transform: uppercase; }
    #app .titleRow p{ margin:0 auto; max-width:92ch; color: var(--muted); line-height:1.55; font-size:14px; }

    #app .grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:18px; }
    #app .card{ border:1px solid var(--line); background:#fff; box-shadow: var(--shadow); border-radius:18px; overflow:hidden; }
    #app .card .img{ width:100%; aspect-ratio:1/1; background: var(--soft); overflow:hidden; }
    #app .card .img img{ width:100%; height:100%; object-fit:cover; transition: transform .35s ease; }
    #app .card:hover .img img{ transform: scale(1.03); }
    #app .card .body{ padding:14px; }
    #app .card h3{ margin:0 0 8px; font-size:16px; font-weight:950; text-transform: uppercase; letter-spacing:.2px; }
    #app .card p{ margin:0 0 10px; color: var(--muted); font-size:13px; line-height:1.45; }
    #app .bul{ display:grid; gap:6px; margin:0 0 10px; }
    #app .bul li{ display:flex; gap:10px; align-items:flex-start; color: var(--muted); font-weight:950; font-size:13px; }
    #app .bul i{ width:8px; height:8px; margin-top:6px; border-radius:999px; background: linear-gradient(135deg, var(--green), var(--blue)); }

    #app .card .actions{ display:flex; gap:10px; flex-wrap:wrap; padding: 0 14px 14px; }
    #app .mini{
      padding:12px 12px;
      border-radius:16px;
      border:1px solid var(--line);
      background: var(--soft);
      font-weight:950;
      font-size:13px;
      color: var(--ink);
      cursor:pointer;
      transition: transform .2s ease, background .2s ease;
      display:inline-flex; align-items:center; justify-content:center;
    }
    #app .mini:hover{ transform: translateY(-1px); background: rgba(244,246,248,.85); }
    #app .mini.wa{ background: var(--green); border-color: transparent; color:#fff; }
    #app .mini.wa:hover{ background: var(--green2); }

    #app .sgrid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:16px; }
    @media (max-width: 980px){ #app .sgrid{ grid-template-columns: 1fr; } }
    #app .sbox{
      border:1px solid var(--line);
      background:#fff;
      box-shadow: var(--shadow);
      border-radius:18px;
      padding:14px;
    }
    #app .sbox h3{
      margin:0 0 10px;
      font-size:15px;
      font-weight:950;
      text-transform: uppercase;
      letter-spacing:.2px;
    }
    #app .slist{ display:grid; gap:8px; }
    #app .slist li{
      display:flex; gap:10px; align-items:flex-start;
      color: var(--muted);
      font-weight:950;
      font-size:13px;
      line-height:1.35;
    }
    #app .slist i{
      width:8px; height:8px; margin-top:6px;
      border-radius:999px;
      background: linear-gradient(135deg, var(--green), var(--blue));
      flex:0 0 auto;
    }

    #app .infoShell{
      border:1px solid var(--line);
      background:#fff;
      box-shadow: var(--shadow);
      border-radius:20px;
      overflow:hidden;
    }
    #app .infoTop{
      padding:16px;
      background: linear-gradient(135deg, rgba(15,91,60,.10), rgba(11,74,122,.08));
      border-bottom:1px solid rgba(0,0,0,.06);
    }
    #app .infoTop h3{
      margin:0 0 6px;
      font-size:18px;
      font-weight:950;
      text-transform: uppercase;
      letter-spacing:.2px;
      color: var(--ink);
    }
    #app .pillGrid{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap:10px;
      padding:16px;
    }
    @media (max-width: 1000px){ #app .pillGrid{ grid-template-columns: repeat(2, 1fr);} }
    #app .pill{
      border:1px solid rgba(0,0,0,.10);
      border-radius:999px;
      padding:10px 12px;
      background: var(--soft);
      font-weight:950;
      color: var(--ink);
      text-align:center;
    }

    #app .listsRow{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:16px;
      padding:16px;
      border-top:1px solid rgba(0,0,0,.06);
    }
    @media (max-width: 980px){ #app .listsRow{ grid-template-columns: 1fr; } }

    #app .lbox{
      border:1px solid rgba(0,0,0,.10);
      border-radius:18px;
      background:#fff;
      padding:14px;
    }
    #app .lbox h4{
      margin:0 0 10px;
      font-weight:950;
      text-transform: uppercase;
      letter-spacing:.2px;
      font-size:14px;
      color: var(--ink);
    }
    #app .litems{ display:grid; gap:8px; }
    #app .litems li{
      display:flex; gap:10px; align-items:flex-start;
      color: var(--muted);
      font-weight:950;
      font-size:13px;
      line-height:1.35;
    }
    #app .litems i{
      width:8px; height:8px; margin-top:6px;
      border-radius:999px;
      background: linear-gradient(135deg, var(--green), var(--blue));
      flex:0 0 auto;
    }

    #app .videosWrap{
      margin-top:18px;
      display:grid;
      gap:18px;
    }
    #app .videoRow{
      display:grid;
      gap:16px;
    }
    #app .videoRow.verticals{ grid-template-columns: repeat(3, minmax(0, 1fr)); align-items:start; }
    #app .videoRow.horizontals{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
    @media (max-width: 980px){
      #app .videoRow.verticals,
      #app .videoRow.horizontals{ grid-template-columns: 1fr; }
    }

    #app .vcard{
      border:1px solid var(--line);
      background:#fff;
      box-shadow: var(--shadow);
      border-radius:22px;
      overflow:hidden;
      position:relative;
    }
    #app .vcardHead{
      padding:12px 14px;
      border-bottom:1px solid rgba(0,0,0,.06);
      background: linear-gradient(135deg, rgba(15,91,60,.06), rgba(11,74,122,.06));
    }
    #app .vcardHead strong{
      display:block;
      font-size:14px;
      font-weight:950;
      color:var(--ink);
      text-transform:uppercase;
      letter-spacing:.2px;
    }
    #app .vcardHead span{
      display:block;
      margin-top:3px;
      font-size:12px;
      color:var(--muted);
      font-weight:900;
    }
    #app .vmedia{
      position:relative;
      background:#000;
      overflow:hidden;
    }
    #app .vmedia.vertical{ aspect-ratio: 9 / 16; }
    #app .vmedia.horizontal{ aspect-ratio: 16 / 9; }
    #app .vmedia video{
      width:100%;
      height:100%;
      object-fit:cover;
      background:#000;
    }

    /* FIX: ya no hay poster global aquí */
    #app .videoPreview{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      background-position:center;
      background-size:cover;
      background-repeat:no-repeat;
      transition: opacity .28s ease, visibility .28s ease;
      pointer-events:none;
    }
    #app .videoPreview::before{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.38));
    }
    #app .videoPreview.hide{
      opacity:0;
      visibility:hidden;
    }
    #app .videoPreview .playBadge{
      position:relative;
      z-index:2;
      width:70px;
      height:70px;
      border-radius:999px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:rgba(255,255,255,.16);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border:1px solid rgba(255,255,255,.26);
      box-shadow: 0 10px 30px rgba(0,0,0,.25);
      color:#fff;
      font-size:24px;
      font-weight:950;
    }

    #app .band{
      background: var(--soft);
      border-top: 1px solid rgba(0,0,0,.06);
      border-bottom: 1px solid rgba(0,0,0,.06);
      padding:26px 0;
    }
    #app .band .row{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
    #app .band h3{ margin:0; font-weight:950; text-transform: uppercase; letter-spacing:.2px; font-size:18px; }
    #app .band span{ color: var(--muted); font-weight:950; font-size:13px; }
    #app .band .right{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
    #app .band .phone{
      font-weight:950;
      color: var(--ink);
      padding:12px 12px;
      border-radius:16px;
      border:1px solid rgba(0,0,0,.10);
      background:#fff;
    }

    #app .ggrid{ display:grid; grid-template-columns: repeat(6, 1fr); gap:10px; margin-top:16px; }
    @media (max-width: 1000px){ #app .ggrid{ grid-template-columns: repeat(3, 1fr);} }
    @media (max-width: 520px){ #app .ggrid{ grid-template-columns: repeat(2, 1fr);} }
    #app .gimg{ border:1px solid rgba(0,0,0,.10); border-radius:18px; overflow:hidden; background:#fff; aspect-ratio: 1 / 1; box-shadow: 0 10px 24px rgba(0,0,0,.08); transition: transform .22s ease, box-shadow .22s ease; }
    #app .gimg:hover{ transform: translateY(-3px); box-shadow: var(--shadow2); }
    #app .gimg img{ width:100%; height:100%; object-fit:cover; }

    #app .faqWrap{ max-width:980px; margin:0 auto; }
    #app .faqList{ display:grid; gap:12px; margin-top:18px; }
    #app .faqItem{ border:1px solid var(--line); background:#fff; box-shadow: var(--shadow); border-radius:18px; overflow:hidden; }
    #app .faqBtn{
      width:100%; text-align:left;
      padding:14px 14px;
      border:0; background:transparent;
      cursor:pointer;
      display:flex; align-items:flex-start; justify-content:space-between;
      gap:12px;
      font-weight:950; color: var(--ink);
    }
    #app .faqBtn:hover{ background: rgba(15,91,60,.05); }
    #app .faqQ{ line-height:1.25; }
    #app .faqIcon{
      width:30px; height:30px;
      border-radius:12px;
      background: linear-gradient(135deg, var(--green), var(--blue));
      color:#fff;
      display:flex; align-items:center; justify-content:center;
      font-weight:950;
      transform: translateY(-2px);
    }
    #app .faqA{ display:none; padding: 0 14px 14px; color: var(--muted); font-weight:900; font-size:13px; line-height:1.6; }
    #app .faqItem.open .faqA{ display:block; animation: faqIn .18s ease; }
    #app .faqItem.open .faqIcon{ transform: rotate(45deg); transition: transform .18s ease; }
    @keyframes faqIn{ from{opacity:0; transform: translateY(-6px);} to{opacity:1; transform:none;} }

    #app footer{ background: var(--green2); color:#fff; padding:18px 0; }
    #app .footRow{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:13px; opacity:.95; }

    #app .waFloat{
      position: fixed; right: 14px; bottom: 14px;
      z-index: 60;
      display:none;
      border-radius: 999px;
      padding: 12px 14px;
      background: var(--green);
      color:#fff;
      font-weight:950;
      box-shadow: 0 18px 50px rgba(0,0,0,.22);
      border:1px solid rgba(255,255,255,.12);
      -webkit-tap-highlight-color: transparent;
    }
    #app .waFloat:hover{ background: var(--green2); }

    @media (max-width: 980px){ #app .grid{ grid-template-columns: 1fr; } }
    @media (max-width: 920px){
      #app nav.menu{ display:none; }
      #app .burger{ display:inline-flex; }
      #app .dd:hover .panel{ display:none; }
      #app .head{ padding:10px 0; }
      #app .logoWrap{ width:110px; height:44px; }
      #app .brand .name{ font-size:16px; }
      #app .brand .tag{ font-size:12px; }
      #app .slides{ height:540px; }
      #app .heroBox h1{ font-size:34px; }
      #app .heroBox p{ font-size:15px; }
      #app .waFloat{ display:inline-flex; }
    }
    @media (max-width: 520px){
      #app .heroBox h1{ font-size:30px; }
      #app .heroBox p{ font-size:14px; }
    }
    
    
    
    .officialPaymentNote{
  margin-top:14px;
  width:fit-content;
  max-width:100%;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.20);
  color:#fff;
  backdrop-filter:blur(8px);
  box-shadow:0 10px 28px rgba(0,0,0,.16);
}

.officialPaymentNote span{
  display:block;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.5px;
  opacity:.86;
  margin-bottom:3px;
}

.officialPaymentNote strong{
  display:block;
  font-size:13px;
  line-height:1.35;
}

.officialPaymentNote small{
  display:block;
  margin-top:4px;
  font-size:11.5px;
  line-height:1.35;
  opacity:.82;
}

.bandPaymentNote{
  width:100%;
  margin-top:8px;
  padding:9px 11px;
  border-radius:12px;
  background:rgba(11,61,46,.08);
  border:1px solid rgba(11,61,46,.16);
  color:#0b3d2e;
  font-size:12.5px;
  font-weight:800;
  line-height:1.45;
}

.bandPaymentNote strong{
  color:#0b0f14;
}

@media(max-width:640px){
  .officialPaymentNote{
    width:100%;
  }

  .officialPaymentNote strong{
    font-size:12.5px;
    word-break:break-word;
  }

  .bandPaymentNote{
    font-size:12px;
  }
}
  </style>