/* styles.css — BABE stop-akn. Paleta neutra BABÉ aplicada (guia-estilo-babe.md v1). */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      /* Paleta de marca BABÉ — minimalista, gris/neutro + acento teal suave */
      --ink: #2e2e2e; --gray: #8c8c8c; --gray-2: #6b6b6b;
      --line: #e4e0da; --bg: #ffffff; --bg-2: #f6f4f1; --beige: #ece5da;
      --accent: #6f9a98; --accent-d: #557a78; --accent-l: #e6efee;
      --wa: #25D366; --wa-d: #1da851;
      /* aliases backward-compat para clases existentes (inline style="color:var(--azul)" en index.html) */
      --azul: #557a78; --azul-d: #557a78; --fondo: #f6f4f1;
      --texto: #2e2e2e; --blanco: #ffffff; --gris: #6b6b6b; --borde: #e4e0da;
    }
    html { scroll-behavior: smooth; }
    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: var(--bg); color: var(--ink); line-height: 1.6; font-size: 16px; }
    img { max-width: 100%; height: auto; display: block; }
    a { color: inherit; text-decoration: none; }
    .container { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 20px; }
    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
    .btn-wa { display: inline-flex; align-items: center; gap: 10px; background: var(--wa); color: #fff; font-weight: 700; font-size: 1rem; padding: 14px 28px; border-radius: 50px; border: none; cursor: pointer; transition: background 0.2s, transform 0.1s; text-align: center; line-height: 1.3; }
    .btn-wa:hover { background: var(--wa-d); }
    .btn-wa:active { transform: scale(0.97); }
    .btn-wa svg { flex-shrink: 0; }
    .btn-wa--full { display: flex; width: 100%; justify-content: center; }
    .site-header { background: var(--bg); border-bottom: 1px solid var(--line); padding: 14px 20px; position: sticky; top: 0; z-index: 100; }
    .site-header .container { display: flex; align-items: center; justify-content: space-between; }
    .logo-text { color: var(--ink); font-size: 1.25rem; font-weight: 800; letter-spacing: 2px; }
    .logo-sub { color: var(--gray); font-size: 0.72rem; font-weight: 400; display: block; line-height: 1.2; }
    .header-cta { background: var(--wa); color: #fff; font-weight: 700; font-size: 0.82rem; padding: 8px 16px; border-radius: 50px; white-space: nowrap; transition: background 0.2s; }
    .header-cta:hover { background: var(--wa-d); }
    .hero { background: linear-gradient(170deg, #faf8f5 0%, #efe9e1 100%); padding: 48px 20px 40px; text-align: center; }
    .hero-eyebrow { display: inline-block; background: var(--ink); color: #fff; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 4px 14px; border-radius: 50px; margin-bottom: 18px; }
    .hero h1 { font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 800; color: var(--ink); line-height: 1.25; margin-bottom: 16px; }
    .hero h1 em { font-style: normal; color: var(--accent-d); }
    .hero-sub { font-size: 1.05rem; color: var(--gray-2); margin-bottom: 28px; max-width: 520px; margin-left: auto; margin-right: auto; }
    .hero-badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 28px; }
    .badge { background: var(--bg); border: 1.5px solid var(--line); color: var(--gray-2); font-size: 0.78rem; font-weight: 600; padding: 5px 13px; border-radius: 50px; }
    .trust-bar { background: var(--ink); color: #fff; padding: 14px 20px; text-align: center; }
    .trust-bar-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 24px; font-size: 0.82rem; font-weight: 600; }
    .trust-item { display: flex; align-items: center; gap: 6px; }
    .trust-item::before { content: '✓'; font-weight: 800; color: var(--accent); }
    .section { padding: 48px 20px; }
    .section--alt { background: var(--bg-2); }
    .section-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--accent-d); margin-bottom: 8px; }
    .section h2 { font-size: clamp(1.3rem, 4vw, 1.9rem); font-weight: 800; line-height: 1.25; margin-bottom: 20px; color: var(--ink); }
    .pain-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
    .pain-list li { display: flex; align-items: flex-start; gap: 12px; background: var(--bg); border-left: 4px solid #e05252; padding: 14px 16px; border-radius: 0 8px 8px 0; font-size: 0.96rem; }
    .pain-list li::before { content: '😔'; font-size: 1.2rem; flex-shrink: 0; line-height: 1.4; }
    .featured-section { margin-bottom: 32px; }
    .featured-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
    @media (min-width: 480px) { .featured-grid { grid-template-columns: 1fr 1fr; } }
    .products-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
    @media (min-width: 480px) { .products-grid { grid-template-columns: 1fr 1fr; } }
    .product-card { background: var(--bg); border: 1.5px solid var(--line); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 8px; transition: box-shadow 0.2s, border-color 0.2s; }
    .product-card:hover { box-shadow: 0 4px 20px rgba(46,46,46,0.07); border-color: var(--accent); }
    .product-card--featured { border: 2px solid var(--accent); background: linear-gradient(135deg, rgba(111,154,152,0.07) 0%, transparent 100%); }
    .product-icon { width: 44px; height: 44px; background: var(--accent-l); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
    .product-name { font-weight: 700; font-size: 0.95rem; color: var(--ink); line-height: 1.3; }
    .product-desc { font-size: 0.84rem; color: var(--gray-2); line-height: 1.45; }
    .product-cta { margin-top: 6px; }
    .product-cta a { font-size: 0.82rem; font-weight: 600; color: var(--accent-d); }
    .product-cta a:hover { text-decoration: underline; }
    .featured-label { display: inline-block; background: var(--ink); color: #fff; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; margin-bottom: 8px; }
    .reasons-list { display: flex; flex-direction: column; gap: 20px; }
    .reason { display: flex; align-items: flex-start; gap: 16px; background: var(--bg); border-radius: 12px; padding: 20px; border: 1.5px solid var(--line); }
    .reason-icon { width: 48px; height: 48px; background: var(--accent-l); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; }
    .reason-body h3 { font-weight: 700; font-size: 1rem; margin-bottom: 4px; color: var(--ink); }
    .reason-body p { font-size: 0.88rem; color: var(--gray-2); line-height: 1.5; }
    .cta-final { background: var(--ink); padding: 56px 20px; text-align: center; color: #fff; }
    .cta-final h2 { font-size: clamp(1.4rem, 5vw, 2rem); font-weight: 800; margin-bottom: 12px; line-height: 1.25; }
    .cta-final p { font-size: 1rem; color: rgba(255,255,255,0.85); margin-bottom: 28px; max-width: 480px; margin-left: auto; margin-right: auto; }
    .store-info { margin-top: 28px; background: rgba(255,255,255,0.08); border-radius: 12px; padding: 18px 20px; display: inline-block; text-align: left; max-width: 400px; width: 100%; }
    .store-info p { font-size: 0.85rem; color: rgba(255,255,255,0.88); margin-bottom: 0; }
    .store-info strong { color: #fff; }
    .site-footer { background: #1f1f1f; color: rgba(255,255,255,0.55); padding: 24px 20px; text-align: center; font-size: 0.78rem; line-height: 1.6; }
    .site-footer a { color: rgba(255,255,255,0.75); text-decoration: underline; }
    .sticky-wa { display: none; position: fixed; bottom: 20px; right: 20px; z-index: 200; }
    @media (max-width: 600px) { .sticky-wa { display: block; } }
    .sticky-wa a { width: 58px; height: 58px; background: var(--wa); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(37,211,102,0.45); transition: transform 0.2s; }
    .sticky-wa a:hover { transform: scale(1.08); }

/* BABE-LINKS:INI */
/* Enlaces internos entre lineas BABE. Bloque generado por
   _shared/enlaces_internos_babe.py, no editar a mano.
   Radio 12px = el mismo que ya usan las tarjetas de estas landings. */
.lineas-babe{background:var(--bg-2,#f6f4f1);border-top:1px solid var(--line,#e4e0da);padding:3rem 1.25rem}
.lineas-wrap{max-width:1040px;margin:0 auto}
.lineas-babe h2{margin:0 0 .5rem;font-size:1.5rem;line-height:1.25;color:var(--ink,#2e2e2e)}
.lineas-intro{margin:0 0 1.75rem;max-width:56ch;color:var(--gray-2,#6b6b6b)}
.lineas-grid{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:0;padding:0;list-style:none}
.lineas-grid a{display:block;padding:.9rem 1rem;background:var(--bg,#fff);border:1px solid var(--line,#e4e0da);border-radius:12px;text-decoration:none;transition:border-color .18s ease,transform .18s ease}
.lineas-grid a:hover,.lineas-grid a:focus-visible{border-color:var(--accent,#6f9a98);transform:translateY(-1px)}
.linea-nombre{display:block;font-weight:600;color:var(--ink,#2e2e2e)}
.linea-desc{display:block;margin-top:.15rem;font-size:.86rem;color:var(--gray-2,#6b6b6b)}
.lineas-tienda{margin:1.75rem 0 0}
.lineas-tienda a{color:var(--accent-d,#557a78);font-weight:600}
@media (prefers-reduced-motion:reduce){.lineas-grid a{transition:none}.lineas-grid a:hover{transform:none}}
@media (max-width:600px){.lineas-babe{padding:2.25rem 1rem}}
/* BABE-LINKS:FIN */