@charset "utf-8";
/* CSS Document */


    :root{
      /* FONDOS (los mantienes oscuros como te gustan) */
      --bg:#0b1220;        /* azul noche */
      --bg-2:#0f172a;      /* slate 900 */
      --card:#0f1b31;      /* elevación */
      --card-2:#0c1528;

      /* TIPOGRAFÍA */
      --text:#F5F7FF;      /* blanco suave legible */
      --muted:#CFC9D2;     /* gris-malva suave (combina con vino) */

      /* ACENTOS (NUEVOS COLORES) */
      --accent:#8E1E3A;    /* ROJO CONCHO DE VINO (principal) */
      --accent-2:#E05A78;  /* VINO CLARO / ROSE para hover y gradiente */
      --accent-3:#1F3A5F;  /* AZUL PETRÓLEO (tercer color sugerido, sutil) */

      /* LÍNEAS y estados */
      --line:#261320;      /* ciruela profunda, combina con el vino */
      --ok:#22c55e;
      --danger:#ef4444;

      --radius:18px;
      --shadow:0 12px 40px rgba(0,0,0,.35);
      --container:1100px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      /* Gradiente con halo en tono vino (reemplaza el amarillo anterior) */
      background:
        radial-gradient(1200px 600px at 70% -10%, rgba(142,30,58,.16), transparent 60%),
        linear-gradient(180deg,var(--bg),var(--bg-2));
      color:var(--text);
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
      line-height:1.6;
    }

    /* Enlaces: vino -> rose */
    a{ color: var(--accent); text-decoration:none }
    a:hover{ color: var(--accent-2); }

    .container{max-width:var(--container);margin:0 auto;padding:0 16px}

    /* Header */
    header{position:sticky;top:0;z-index:50;background:rgba(11,18,32,.7);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
    .nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
    .brand{display:flex;gap:10px;align-items:center}
    .dot{width:10px;height:10px;border-radius:50%;background:var(--accent)}
    .brand b{letter-spacing:.3px}

    .menu{display:flex;gap:18px}
    .menu a{color:var(--muted);font-weight:600;font-size:14px}
    .menu a:hover{color:var(--text)}

    .hamb{display:none;gap:8px;flex-direction:column}
    .hamb span{width:24px;height:1px;background:var(--text)} /* barras blancas */

    /* Mobile menu */
    .drawer{display:none;border-top:1px solid var(--line)}
    .drawer a{display:block;padding:12px 8px;border-bottom:1px solid var(--line);color:var(--muted)}

    /* Hero */
    .hero{position:relative;padding:56px 0 28px;overflow:hidden}
    .hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
    .pill{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));font-size:12px;color:var(--muted)}
    h1{font-size:clamp(28px,5.2vw,44px);line-height:1.15;margin:12px 0 8px}
    .lead{font-size:clamp(15px,2.7vw,18px);color:var(--muted)}
    .chips{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 26px}
    .chip{border:1px dashed var(--line);padding:8px 10px;border-radius:12px;color:var(--muted);font-size:13px}

    .cta{display:flex;gap:10px;flex-wrap:wrap}
    .btn{appearance:none;border:0;border-radius:14px;padding:12px 16px;font-weight:700;cursor:pointer}
    .btn-primary{
      background:linear-gradient(90deg,var(--accent),var(--accent-2));
      color:#fff; /* en vino se lee mejor blanco que #222 */
    }
    .btn-primary:hover{filter:brightness(1.05)}
    .btn-ghost{background:transparent;border:1px solid var(--line);color:var(--text)}

    .hero-card{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
    .hero-card img{display:block;width:100%;height:auto}
    .hero-card figcaption{padding:12px 14px;color:var(--muted);font-size:13px;border-top:1px solid var(--line)}

    /* Sections */
    section{padding:36px 0;border-top:1px solid var(--line)}
    h2{font-size:clamp(22px,4vw,30px);margin:0 0 6px}
    .sub{color:var(--muted);margin-bottom:18px}

    .grid-3{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
    .card{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid var(--line);border-radius:var(--radius);padding:18px}

    /* Lista de beneficios */
    .benefits{ margin: 0; padding: 0; list-style: none; }
    .benefits li{
      display: grid;
      grid-template-columns: 10px 1fr;
      column-gap: 10px;
      align-items: start;
      text-align: left;
      word-spacing: normal;
      letter-spacing: normal;
    }
    .benefits .dot{ width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:7px; }
    .benefits .txt{ display:block; }
    .benefits .txt{ text-wrap: pretty; hyphens: auto; }

    .plans .price{font-weight:800;font-size:18px;color:var(--accent)}
    .plans .small{color:var(--muted);font-size:13px}

    /* ==== GALLERY FIX – móvil estable y sin overflow ==== */
    html, body { overflow-x: hidden; }

    .gallery{
      display: grid;
      grid-template-columns: minmax(0,2fr) minmax(0,1fr);
      gap: 12px;
      align-items: stretch;
    }
    .gallery > figure{
      margin: 0;
      border: 1px solid var(--line);
      border-radius: 14px;
      overflow: hidden;
      background: var(--card);
    }
    .gallery img{
      display: block;
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }
    @media (max-width: 900px){
      .gallery{ grid-template-columns: 1fr; }
      .gallery > figure:first-child{ aspect-ratio: 16 / 9; }
      .gallery > figure:nth-child(2),
      .gallery > figure:nth-child(3){ aspect-ratio: 1 / 1; }
    }

    .faq details{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid var(--line);border-radius:12px;margin:10px 0}
    .faq summary{cursor:pointer;padding:14px 16px;font-weight:700}
    .faq .content{padding:0 16px 14px;color:var(--muted)}

    /* Sticky mobile bar (no se usa porque tienes FAB de WhatsApp) */
    .sticky-cta{position:fixed;inset:auto 0 0 0;background:rgba(12,21,40,.9);backdrop-filter:blur(8px);display:none;gap:10px;padding:10px;border-top:1px solid var(--line);z-index:60}

    /* Footer */
    footer{border-top:1px solid var(--line);padding:22px 0;color:var(--muted)}
    .foot{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
    .foot a{color:var(--text)}

    /* Responsive */
    @media (max-width: 900px){
      .hero-grid{grid-template-columns:1fr}
      .grid-3{grid-template-columns:1fr}
      .gallery{grid-template-columns:1fr}
      .menu{display:none}
      .hamb{display:flex}
      .sticky-cta{display:flex}
      header{position:fixed;width:100%}
      .hero{padding-top:84px}
    }

    /* Simple reveals */
    [data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .5s ease, transform .5s ease}
    [data-reveal].show{opacity:1;transform:none}

    /* Botón flotante de WhatsApp – móvil minimalista */
    .fab-whatsapp{
      position: fixed;
      right: 16px;
      bottom: calc(16px + env(safe-area-inset-bottom));
      width: 56px; height: 56px;
      border-radius: 999px;
      display: grid; place-items: center;
      background: #25D366; /* verde WhatsApp */
      box-shadow: 0 10px 24px rgba(0,0,0,.28);
      z-index: 80;
      transition: transform .25s ease, opacity .25s ease;
    }
    .fab-whatsapp.is-hidden{ transform: translateY(120%); opacity: 0; pointer-events: none; }
    .fab-whatsapp:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; border-radius: 999px; }

    @media (min-width: 901px){
      .fab-whatsapp{ display:none; }
    }