/* ============================================================
   MyBalls — Landing comercial v2 (diseño propio, desde cero)
   Lenguaje: "Roland Garros de día" · verde #0d7f3e · dorado #d4a017
   Sin dependencias externas: tipografía de sistema, SVG inline.
   ============================================================ */

:root{
    --verde:#0d7f3e; --verde-osc:#0a6532; --verde-prof:#07331d;
    --lima:#a9cf38; --lima-suave:#eef7dd;
    --dorado:#d4a017; --dorado-suave:#fdf1cf; --dorado-txt:#8a6d1a;
    --tinta:#1e293b; --gris:#64748b; --gris-suave:#94a3b8;
    --borde:#e2e8f0; --fondo:#f4f8f5; --card:#ffffff;
    --radio:18px; --radio-lg:26px;
    --sombra:0 10px 30px rgba(13,127,62,.08);
    --sombra-lg:0 24px 60px rgba(7,51,29,.14);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    color:var(--tinta); background:var(--fondo);
    line-height:1.55; -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }

.wrap{ max-width:1160px; margin:0 auto; padding:0 22px; }
.sec{ padding:84px 0; }
.sec-tight{ padding:56px 0; }

/* ---------- Píldoras y botones (familia MyBalls) ---------- */
.chip{
    display:inline-flex; align-items:center; gap:8px;
    background:#fff; border:1.5px solid var(--borde); border-radius:999px;
    padding:8px 16px; font-size:12.5px; font-weight:800; letter-spacing:.5px;
    text-transform:uppercase; color:var(--verde-osc);
}
.chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--lima); box-shadow:0 0 0 4px var(--lima-suave); }
.chip-oro{ background:var(--dorado-suave); border-color:#eadfb1; color:var(--dorado-txt); }

.btn{
    display:inline-flex; align-items:center; gap:10px;
    border-radius:999px; padding:15px 26px; font-size:15.5px; font-weight:800;
    text-decoration:none; border:none; cursor:pointer;
    transition:transform .14s, box-shadow .14s, background .14s;
    white-space:nowrap;
}
.btn svg{ width:20px; height:20px; flex:0 0 auto; }
.btn-verde{
    background:linear-gradient(135deg,var(--verde),var(--verde-osc)); color:#fff;
    box-shadow:0 12px 28px rgba(10,101,50,.32);
}
.btn-verde:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(10,101,50,.40); }
.btn-borde{
    background:#fff; color:var(--verde-osc); border:1.5px solid var(--verde);
}
.btn-borde:hover{ background:var(--verde); color:#fff; transform:translateY(-2px); }
.btn-blanco{ background:#fff; color:var(--verde-osc); box-shadow:0 12px 28px rgba(0,0,0,.18); }
.btn-blanco:hover{ transform:translateY(-2px); }
.btn-wa{ background:#25D366; color:#fff; box-shadow:0 12px 28px rgba(37,211,102,.35); }
.btn-wa:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(37,211,102,.45); color:#fff; }

/* ---------- Nav ---------- */
.nav{
    position:sticky; top:0; z-index:50;
    background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--borde);
}
.nav-in{ display:flex; align-items:center; gap:26px; height:74px; }
.nav-logo img{ height:42px; width:auto; }
.nav-links{ display:flex; gap:26px; margin-left:auto; list-style:none; }
.nav-links a{ text-decoration:none; font-weight:700; font-size:14.5px; color:var(--gris); transition:color .12s; }
.nav-links a:hover{ color:var(--verde-osc); }
.nav-cta{ margin-left:6px; }
.nav-cta .btn{ padding:11px 20px; font-size:14px; }
.nav-burger{ display:none; margin-left:auto; background:#fff; border:1.5px solid var(--borde); border-radius:12px; width:46px; height:46px; align-items:center; justify-content:center; cursor:pointer; }
.nav-burger svg{ width:22px; height:22px; }

.menu-movil{ display:none; position:fixed; inset:0; z-index:60; }
.menu-movil.abierto{ display:block; }
.menu-velo{ position:absolute; inset:0; background:rgba(15,23,42,.5); }
.menu-panel{
    position:absolute; top:0; right:0; width:min(320px,86vw); height:100%;
    background:#fff; padding:22px; display:flex; flex-direction:column; gap:6px;
    box-shadow:-20px 0 50px rgba(0,0,0,.2);
}
.menu-panel img{ height:38px; width:auto; margin-bottom:14px; }
.menu-panel a{ text-decoration:none; font-weight:800; color:var(--tinta); padding:13px 12px; border-radius:12px; }
.menu-panel a:hover{ background:var(--lima-suave); color:var(--verde-osc); }
.menu-panel .btn{ margin-top:auto; justify-content:center; }
.menu-x{ position:absolute; top:16px; right:16px; background:none; border:none; font-size:26px; cursor:pointer; color:var(--gris); }

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; padding:72px 0 88px; }
.hero-blob{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; pointer-events:none; }
.hero-blob.b1{ width:520px; height:520px; background:var(--lima-suave); top:-160px; right:-120px; }
.hero-blob.b2{ width:420px; height:420px; background:#dff0e6; bottom:-180px; left:-140px; }
.hero-in{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.hero h1{ font-size:52px; line-height:1.08; letter-spacing:-1.2px; font-weight:900; margin:18px 0 16px; }
.hero h1 .oro{ color:var(--dorado); }
.hero p.lead{ font-size:18.5px; color:var(--gris); max-width:520px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin:28px 0 22px; }
.hero-mini{ display:flex; gap:10px; flex-wrap:wrap; }
.hero-mini .chip{ font-size:11.5px; padding:7px 13px; }
.hero-art{ position:relative; }
.hero-art svg{ width:100%; height:auto; filter:drop-shadow(0 30px 50px rgba(7,51,29,.18)); }

/* ---------- Cinta de confianza ---------- */
.cinta{ background:linear-gradient(135deg,var(--verde),var(--verde-osc)); color:#fff; }
.cinta-in{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:30px 0; }
.cinta-item{ display:flex; align-items:center; gap:16px; }
.cinta-item svg{ width:44px; height:44px; flex:0 0 auto; }
.cinta-item b{ display:block; font-size:22px; letter-spacing:-.3px; }
.cinta-item span{ font-size:13.5px; opacity:.85; }

/* ---------- Encabezados de sección ---------- */
.sec-head{ text-align:center; max-width:720px; margin:0 auto 46px; }
.sec-head h2{ font-size:36px; letter-spacing:-.8px; font-weight:900; margin:16px 0 12px; }
.sec-head p{ color:var(--gris); font-size:16.5px; }

/* ---------- Filas producto (ilustración + texto) ---------- */
.fila{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; padding:44px 0; }
.fila:nth-child(even) .fila-art{ order:2; }
.fila-art{
    background:#f8f7f6; border-radius:var(--radio-lg); overflow:hidden;
    box-shadow:var(--sombra);
}
.fila-art svg{ width:100%; height:auto; }
.fila-art img{ display:block; width:100%; height:auto; border-radius:var(--radio-lg); }
.fila h3{ font-size:26px; letter-spacing:-.5px; font-weight:900; margin:14px 0 10px; }
.fila p{ color:var(--gris); }
.fila ul{ list-style:none; margin-top:18px; display:flex; flex-direction:column; gap:11px; }
.fila li{ display:flex; gap:11px; align-items:flex-start; font-weight:600; color:#334155; }
.fila li svg{ width:21px; height:21px; flex:0 0 auto; margin-top:1px; }

/* ---------- Beneficios ---------- */
.grid-benef{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.benef{
    background:#fff; border:1.5px solid var(--borde); border-radius:var(--radio);
    padding:26px; box-shadow:var(--sombra); transition:transform .15s, box-shadow .15s;
}
.benef:hover{ transform:translateY(-4px); box-shadow:var(--sombra-lg); }
.benef-ico{
    width:54px; height:54px; border-radius:16px;
    background:linear-gradient(135deg,var(--verde),var(--verde-osc));
    display:flex; align-items:center; justify-content:center; margin-bottom:16px;
    box-shadow:0 10px 22px rgba(10,101,50,.28);
}
.benef-ico svg{ width:28px; height:28px; }
.benef h4{ font-size:17.5px; font-weight:900; letter-spacing:-.2px; margin-bottom:8px; }
.benef p{ color:var(--gris); font-size:14.5px; }

/* ---------- Demo band ---------- */
.demo{
    background:linear-gradient(135deg,var(--verde),var(--verde-prof));
    border-radius:var(--radio-lg); color:#fff; overflow:hidden; position:relative;
    padding:46px 50px; display:flex; align-items:center; gap:36px; flex-wrap:wrap;
    box-shadow:var(--sombra-lg);
}
.demo::after{
    content:""; position:absolute; right:-90px; top:-90px; width:320px; height:320px;
    border:34px solid rgba(255,255,255,.07); border-radius:50%;
}
.demo h3{ font-size:28px; letter-spacing:-.5px; margin-bottom:8px; }
.demo p{ opacity:.88; max-width:560px; }
.demo .btn{ margin-left:auto; position:relative; z-index:1; }

/* ---------- Planes ---------- */
.grid-planes{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.plan{
    background:#fff; border:1.5px solid var(--borde); border-radius:var(--radio-lg);
    box-shadow:var(--sombra); display:flex; flex-direction:column;
    position:relative;
}
.plan-head{ padding:26px 26px 0; }
.plan-nombre{ font-size:13px; font-weight:900; letter-spacing:1px; text-transform:uppercase; color:var(--gris-suave); }
.plan-precio{ display:flex; align-items:baseline; gap:7px; margin:10px 0 4px; }
.plan-precio .num{ font-size:44px; font-weight:900; letter-spacing:-1.5px; color:var(--tinta); }
.plan-precio .mon{ font-size:17px; font-weight:800; color:var(--verde-osc); }
.plan-precio .per{ font-size:14px; color:var(--gris-suave); font-weight:700; }
.plan-desc{ color:var(--gris); font-size:14.5px; padding:0 26px 18px; }
.plan-lista{ list-style:none; padding:20px 26px; border-top:1.5px dashed var(--borde); display:flex; flex-direction:column; gap:12px; flex:1; }
.plan-lista li{ display:flex; gap:10px; font-size:14.5px; font-weight:600; color:#334155; }
.plan-lista svg{ width:20px; height:20px; flex:0 0 auto; margin-top:1px; }
.plan-cta{ padding:0 26px 26px; }
.plan-cta{ border-radius:0 0 var(--radio-lg) var(--radio-lg); }
.plan-cta .btn{ width:100%; justify-content:center; }
.plan-fav{ border:2px solid var(--verde); box-shadow:var(--sombra-lg); transform:translateY(-8px); }
.plan-fav .plan-head{ background:linear-gradient(135deg,var(--verde),var(--verde-osc)); padding-bottom:20px; border-radius:calc(var(--radio-lg) - 2px) calc(var(--radio-lg) - 2px) 0 0; }
.plan-fav .plan-nombre{ color:rgba(255,255,255,.8); }
.plan-fav .plan-precio .num, .plan-fav .plan-precio .mon{ color:#fff; }
.plan-fav .plan-precio .per{ color:rgba(255,255,255,.75); }
.plan-badge{
    position:absolute; top:-15px; left:50%; transform:translateX(-50%);
    background:var(--dorado); color:#fff; font-size:12px; font-weight:900;
    letter-spacing:.8px; text-transform:uppercase; padding:7px 18px; border-radius:999px;
    box-shadow:0 10px 22px rgba(212,160,23,.45); white-space:nowrap;
}
.plan-regalo{
    margin:34px auto 0; max-width:640px; text-align:center;
    background:var(--dorado-suave); border:1.5px solid #eadfb1; border-radius:var(--radio);
    padding:18px 24px; color:var(--dorado-txt); font-weight:800;
    display:flex; align-items:center; gap:12px; justify-content:center;
}
.plan-regalo svg{ width:26px; height:26px; flex:0 0 auto; }
.plan-nota{ text-align:center; color:var(--gris-suave); font-size:13.5px; margin-top:16px; }

/* ---------- FAQ ---------- */
.faq{ max-width:780px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.faq details{
    background:#fff; border:1.5px solid var(--borde); border-radius:var(--radio);
    box-shadow:var(--sombra); overflow:hidden;
}
.faq summary{
    list-style:none; cursor:pointer; padding:20px 24px;
    font-weight:800; font-size:16px; display:flex; align-items:center; gap:14px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .mas{
    margin-left:auto; width:30px; height:30px; border-radius:50%; flex:0 0 auto;
    background:var(--lima-suave); color:var(--verde-osc);
    display:flex; align-items:center; justify-content:center;
    font-size:19px; font-weight:900; transition:transform .18s, background .18s;
}
.faq details[open] summary .mas{ transform:rotate(45deg); background:var(--verde); color:#fff; }
.faq .resp{ padding:0 24px 22px; color:var(--gris); }

/* ---------- Contacto ---------- */
.contacto{
    background:linear-gradient(135deg,var(--verde),var(--verde-prof));
    border-radius:var(--radio-lg); color:#fff; padding:52px;
    display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center;
    box-shadow:var(--sombra-lg); position:relative; overflow:hidden;
}
.contacto::before{
    content:""; position:absolute; left:-70px; bottom:-110px; width:300px; height:300px;
    border:30px solid rgba(255,255,255,.06); border-radius:50%;
}
.contacto h2{ font-size:34px; letter-spacing:-.7px; margin:14px 0 10px; }
.contacto p{ opacity:.9; }
.contacto .chip{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.25); color:#fff; }
.contacto-acciones{ display:flex; flex-direction:column; gap:14px; position:relative; z-index:1; }
.acc{
    display:flex; align-items:center; gap:16px; text-decoration:none;
    border-radius:var(--radio); padding:18px 22px; font-size:17px; color:#fff;
    transition:transform .14s;
}
.acc:hover{ transform:translateY(-2px); }
.acc svg{ width:30px; height:30px; flex:0 0 auto; }
.acc b{ font-size:19px; }
.acc small{ display:block; opacity:.8; font-size:13px; }
.acc-wa{ background:#25D366; box-shadow:0 14px 30px rgba(0,0,0,.25); }
.acc-mail{ background:rgba(255,255,255,.10); border:1.5px solid rgba(255,255,255,.30); }

/* ---------- Footer ---------- */
.foot{ padding:36px 0 30px; }
.foot-in{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.foot-in img{ height:34px; width:auto; }
.foot-links{ display:flex; gap:22px; list-style:none; margin-left:auto; flex-wrap:wrap; }
.foot-links a{ text-decoration:none; color:var(--gris); font-weight:700; font-size:14px; }
.foot-links a:hover{ color:var(--verde-osc); }
.foot-bajo{
    border-top:1.5px solid var(--borde); margin-top:22px; padding-top:20px;
    display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
    color:var(--gris-suave); font-size:13.5px;
}
.foot-bajo a{ color:var(--verde-osc); font-weight:800; text-decoration:none; }
.foot-bajo a:hover{ text-decoration:underline; }

/* ---------- Animación de entrada ---------- */
.rev{ opacity:0; transform:translateY(22px); transition:opacity .55s ease, transform .55s ease; }
.rev.vivo{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px){
    .hero-in{ grid-template-columns:1fr; gap:40px; }
    .hero h1{ font-size:42px; }
    .grid-benef{ grid-template-columns:repeat(2,1fr); }
    .fila{ grid-template-columns:1fr; gap:26px; }
    .fila:nth-child(even) .fila-art{ order:0; }
    .grid-planes{ grid-template-columns:1fr; max-width:460px; margin:0 auto; }
    .plan-fav{ transform:none; }
    .contacto{ grid-template-columns:1fr; padding:38px 26px; }
    .cinta-in{ grid-template-columns:1fr; gap:16px; }
}
@media (max-width: 760px){
    .nav-links, .nav-cta{ display:none; }
    .nav-burger{ display:flex; }
    .sec{ padding:60px 0; }
    .hero{ padding:44px 0 60px; }
    .hero h1{ font-size:34px; letter-spacing:-.8px; }
    .hero p.lead{ font-size:16.5px; }
    .grid-benef{ grid-template-columns:1fr; }
    .sec-head h2{ font-size:28px; }
    .demo{ padding:32px 26px; }
    .demo .btn{ margin-left:0; }
    .btn{ padding:14px 22px; font-size:15px; }
}