body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#111;background:url('https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1600&q=80') no-repeat center fixed;background-size:cover}
    body:before{content:'';position:fixed;inset:0;background:rgba(255,247,204,0.88);z-index:-1}
    a{text-decoration:none;color:inherit}

    header.hero{background:url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1600&q=80') no-repeat center/cover;min-height:70vh;position:relative;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;padding:40px 20px}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.65),rgba(0,0,0,.55))}
.hero-content{position:relative;z-index:1;max-width:900px;animation:fadeUp 1s ease both}
.hero h1{margin:0;font-size:48px;letter-spacing:1px;background:none;color:#ffd400;text-shadow:0 3px 10px rgba(0,0,0,.8)}
.hero h2{margin:12px 0 8px;font-size:26px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.7)}
.hero .tagline{font-size:18px;margin:10px 0 16px;color:#f5f5f5;text-shadow:0 2px 6px rgba(0,0,0,.7)}
.hero-url a{color:#ffd400;font-weight:bold}
.hero-badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.badge{background:rgba(0,0,0,.65);color:#ffd400;padding:4px 10px;border-radius:999px;font-size:13px}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.hero-btn{background:#ffd400;color:#111}
.hero-btn.secondary{background:#111;color:#ffd400;border:1px solid #ffd400}
@media(max-width:768px){.hero h1{font-size:34px}.hero h2{font-size:20px}.hero .tagline{font-size:15px}}

    section{max-width:1100px;margin:0 auto;padding:40px 20px}
    .intro{text-align:center;margin-bottom:40px}
    .intro h2{margin:0 0 10px 0;display:inline-block;background:rgba(0,0,0,0.75);color:#ffd400;padding:8px 16px;border-radius:10px;text-shadow:0 2px 8px rgba(0,0,0,0.85)}
.intro p{margin-top:10px;display:inline-block;background:rgba(0,0,0,0.65);color:#fff;padding:6px 14px;border-radius:8px;text-shadow:0 2px 6px rgba(0,0,0,0.85);max-width:900px}
/* En Tecnologías, Testimonios, Por qué elegirnos y Valor agregado: subtítulos sin overlays */
#tecnologias .feature p,#testimonios .feature p,#porque .feature p,#valor .feature p{background:none !important;padding:0 !important;border-radius:0 !important;text-shadow:none !important;color:#333 !important;display:block !important}
/* En Valor: tarjetas como el resto (sin fondo gris extra) */
#valor .feature{background:#ffffff;border:1px solid #e5e5e5;box-shadow:0 4px 10px rgba(0,0,0,.08)}

    .plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
    .plan{background:#ffffff;border:1px solid #ddd;border-radius:10px;padding:24px;display:flex;flex-direction:column;justify-content:space-between}
    .plan h3{text-align:center;margin:0 0 10px 0}
    .price{text-align:center;font-size:26px;font-weight:bold;margin:10px 0}
    ul{padding-left:18px;margin:12px 0 20px 0}
    li{margin-bottom:6px;font-size:14px}

    .btn{display:block;margin-top:auto;text-align:center;background:#111;color:#ffd400;padding:12px 16px;border-radius:8px;font-weight:bold}

    .cta{text-align:center;background:#ffd400;padding:40px 20px}
    .cta h2{margin:0 0 12px 0;display:inline-block;background:rgba(0,0,0,0.65);color:#ffd400;padding:6px 14px;border-radius:8px;text-shadow:0 2px 6px rgba(0,0,0,0.6)}

    footer{background:#111;color:#ffd400;text-align:center;padding:18px;font-size:14px}
    .banner{
        /* background:url('https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&w=1600&q=80') no-repeat center; */
        background-size:cover;
        position:relative;
        color:#ffd400;padding:50px 20px;text-align:center}
  /* .banner:before{content:'';position:absolute;inset:0;background:rgba(0,0,0,0.7)} */
  .banner>p{margin-top:10px;display:inline-block;background:rgba(0,0,0,0.65);color:#fff;padding:6px 14px;border-radius:8px;text-shadow:0 2px 6px rgba(0,0,0,0.85);max-width:900px}
  .banner>*{position:relative;z-index:1}
  .banner h2{font-size:28px;margin:0 0 10px 0;display:inline-block;background:rgba(0,0,0,0.65);padding:6px 14px;border-radius:8px;text-shadow:0 2px 8px rgba(0,0,0,0.8)}
  .banner p{max-width:700px;margin:0 auto;font-size:16px}
  .features{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin-top:30px;}
  .feature{text-align:center;background:#ffffff;border:1px solid #e5e5e5;border-radius:10px;padding:16px;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;position:relative;overflow:hidden}
  .feature strong{display:block;margin-top:6px;color:#111;font-size:16px}
  .feature p{color:#333}
  .feature .icon{font-size:42px;margin-bottom:8px;color:#ffd400}
  .plan h3:before{content:"💻 ";}
  .plan:nth-child(2) h3:before{content:"🌐 ";}
  .plan:nth-child(3) h3:before{content:"🛡️ ";}
  .whatsapp-float{position:fixed;bottom:20px;right:20px;width:60px;height:60px;background:#25D366;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;box-shadow:0 4px 12px rgba(0,0,0,0.3);z-index:9999;transition:transform .2s ease,box-shadow .2s ease}
  .whatsapp-float:hover{transform:scale(1.08);box-shadow:0 6px 16px rgba(0,0,0,0.35)}
  .whatsapp-float span{font-size:30px;line-height:1}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
section,.plan,.feature{animation:fadeUp .8s ease both}
.plan:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 14px 28px rgba(0,0,0,.25)}
.feature:hover{transform:translateY(-6px) scale(1.025);box-shadow:0 16px 32px rgba(0,0,0,.22);border-color:#ffd400;background:#fff}
.feature:hover .icon{transform:scale(1.1);filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));}
.feature .icon{transition:transform .25s ease,filter .25s ease}

.plan{transition:transform .25s ease, box-shadow .25s ease}
.plan:hover h3{color:#ffd400}
.plan:hover .btn{background:#ffd400;color:#111}
.plan:hover ul li{transform:translateX(4px);transition:.2s}
.banner{background-attachment:fixed}

nav{position:sticky;top:0;z-index:1000;background:#111;display:flex;justify-content:space-between;align-items:center;padding:10px 12px}
nav .links{display:flex;gap:16px}
.menu-toggle{display:none;color:#ffd400;font-size:22px;cursor:pointer}
@media(max-width:768px){nav .links{display:none;flex-direction:column;gap:10px;background:#111;position:absolute;top:48px;left:0;right:0;padding:12px;text-align:center}
nav .links.active{display:flex}
.menu-toggle{display:block}}

html{scroll-behavior:smooth}

.progress-bar{position:fixed;top:0;left:0;height:4px;background:#ffd400;width:0%;z-index:2000}

.toggle-theme{color:#ffd400;border:1px solid #ffd400;padding:4px 8px;border-radius:6px;font-size:12px;cursor:pointer}
body.dark{color:#eee}
body.dark header,body.dark .cta{background:#000;color:#ffd400}
body.dark .plan,body.dark .feature{background:#111;color:#eee;border-color:#333}
body.dark .feature strong, body.dark .feature p,
body.dark .plan h3, body.dark .plan li,
body.dark h1, body.dark h2, body.dark h3, body.dark p { color:#fff !important; }
nav a{color:#ffd400;font-weight:bold;font-size:14px;padding:6px 10px;border-radius:6px;transition:.2s}
nav a:hover{background:#ffd400;color:#111}