:root {
      --pink: #f3b8c8; --pink-soft: #f9e4ea;
      --yellow: #f5d65e; --yellow-soft: #fbf3c8;
      --teal: #5eb3c4; --teal-soft: #d9eef2;
      --orange: #f0a05a; --green: #7dce6f; --green-soft: #e2f5de;
      --purple: #8b6b9a; --purple-soft: #ebe4ef;
      --red: #e0453a; --bg: #faf7f2; --ink: #3a2433; --muted: #6b5563;
      --card: #fff; --fg: #3a2433;
      --chalk: #eef1f3; --graphite: #3a3d42;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin:0; font-family:"DM Sans",system-ui,sans-serif; background:var(--bg); color:var(--ink); line-height:1.5; }
    h1,h2,h3,.display { font-family:"Fredoka",system-ui,sans-serif; font-weight:700; letter-spacing:-.02em; }
    a { color: inherit; text-decoration: none; }
    .wrap { width:min(1080px, calc(100% - 2rem)); margin:0 auto; }
    .shadow-pop { box-shadow: 5px 5px 0 0 var(--fg); }
    .shadow-pop-lg { box-shadow: 9px 9px 0 0 var(--fg); }
    .btn-pop {
      display:inline-flex; align-items:center; justify-content:center;
      border-radius:999px; padding:.75rem 1.4rem; font-weight:700;
      border:2px solid var(--fg); box-shadow:3px 3px 0 0 var(--fg);
      background:var(--red); color:#fff; cursor:pointer; transition: transform .15s, box-shadow .15s;
    }
    .btn-pop:hover { transform: translate(-2px,-2px); box-shadow:5px 5px 0 0 var(--fg); }
    .loop {
      display:inline-block; border-radius:50%;
      -webkit-mask: radial-gradient(circle, transparent 32%, #000 34%);
      mask: radial-gradient(circle, transparent 32%, #000 34%);
    }
    header {
      position:sticky; top:0; z-index:20; border-bottom:2px solid rgba(58,36,51,.1);
      background:rgba(250,247,242,.9); backdrop-filter:blur(10px);
    }
    .nav { display:flex; align-items:center; justify-content:space-between; padding: .85rem 0; }
    .brand { display:flex; align-items:center; gap:.5rem; font-family:"Fredoka",sans-serif; font-size:1.8rem; }
    .nav-links { display:flex; gap:1.4rem; font-size:.9rem; font-weight:600; }
    @media (max-width:800px){ .nav-links{display:none} }
    .hero { position:relative; overflow:hidden; background:var(--pink-soft); padding:3.5rem 0 4rem; }
    .hero-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:2.5rem; align-items:center; position:relative; z-index:1; }
    @media (max-width:900px){
      .hero-grid, .three-cols, .two, .libreta-grid, .buy { grid-template-columns:1fr !important; }
    }
    .pill { display:inline-block; border-radius:999px; background:var(--yellow); padding:.35rem 1rem; font-size:.85rem; font-weight:700; }
    .hero h1 { font-size:clamp(2.6rem,6vw,4.4rem); line-height:1.02; margin:.8rem 0; }
    .hero h1 .red { color:var(--red); }
    .lead { color:var(--muted); font-size:1.1rem; max-width:32rem; }
    .price-card { display:inline-block; border:2px solid var(--fg); background:var(--card); border-radius:1.5rem; padding:.85rem 1.2rem; }
    .price-card .tag { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--red); }
    .price-card .amt { font-family:"Fredoka",sans-serif; font-size:2.2rem; }
    .was { text-decoration:line-through; color:var(--muted); font-size:1rem; margin-left:.35rem; }
    .hero-img { border:2px solid var(--fg); border-radius:2rem; overflow:hidden; transform:rotate(1deg); background:var(--card); }
    .hero-img img { width:100%; display:block; }
    section { padding:3.5rem 0; }
    .section-title { font-size:clamp(2rem,4vw,3rem); margin:0 0 .5rem; }
    .muted { color:var(--muted); }
    .three-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:1.8rem; }
    .two { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:1.8rem; }
    .card { border:2px solid var(--fg); border-radius:1.5rem; background:var(--card); overflow:hidden; }
    .card .pad { padding:1.3rem; }
    .product-top { padding:.75rem; }
    .product-top.rosa { background:var(--pink); }
    .product-top.celeste { background:var(--teal); }
    .product-top.neutro { background:var(--chalk); }
    .product-top img { width:100%; border-radius:1rem; display:block; aspect-ratio:16/10; object-fit:cover; }
    .yellow-soft { background:var(--yellow-soft); }
    .teal-soft { background:var(--teal-soft); }
    .dark-block { background:var(--fg); color:#f7f1ea; border-radius:2.5rem; padding:2.2rem; }
    .feats { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.8rem; }
    @media (max-width:860px){ .feats, .three-cols { grid-template-columns:1fr; } }
    .feat { border:1px solid rgba(255,255,255,.15); border-radius:1rem; padding:1.1rem; }
    .plan { border:2px solid var(--fg); border-radius:1.5rem; padding:1.5rem; }
    .plan.green { background:var(--green-soft); }
    .plan.purple { background:var(--purple-soft); }
    .libreta-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center; }
    .libreta-paper { border:2px solid var(--fg); border-radius:1rem; background:var(--card); padding:1.3rem; transform:rotate(-2deg); }
    .libreta-paper .row { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px dashed rgba(58,36,51,.3); padding:.7rem 0; font-family:"Caveat",cursive; font-size:1.5rem; }
    .libreta-paper .head { font-family:"DM Sans",sans-serif; font-weight:700; font-size:1rem; border-bottom:2px solid var(--fg); }
    .buy { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; border:2px solid var(--fg); border-radius:2.5rem; background:var(--card); padding:1.5rem; }
    input { width:100%; border:2px solid #e5d9cf; border-radius:.8rem; padding:.85rem 1rem; font:inherit; background:var(--bg); margin-top:.35rem; }
    label { font-size:.85rem; font-weight:700; }
    form { display:grid; gap:.9rem; margin-top:1rem; }
    details { border:2px solid var(--fg); border-radius:1rem; background:var(--card); padding:1rem 1.2rem; margin:.6rem 0; }
    summary { font-weight:700; cursor:pointer; }
    .manifesto { text-align:center; font-family:"Fredoka",sans-serif; font-size:1.5rem; max-width:36rem; margin:3rem auto 0; line-height:1.35; }
    footer { background:var(--pink-soft); text-align:center; padding:2.5rem 1rem; color:var(--muted); font-size:.9rem; }
    .float-loop {
      position:absolute; border-radius:50%; pointer-events:none; z-index:0;
      -webkit-mask: radial-gradient(circle, transparent 32%, #000 34%);
      mask: radial-gradient(circle, transparent 32%, #000 34%);
      will-change: transform;
    }
    .fl1 { left:-1.5rem; top:4.5rem; width:5.5rem; height:5.5rem; background:var(--yellow); animation: drift1 9s ease-in-out infinite; }
    .fl2 { right:2rem; top:1.2rem; width:3.8rem; height:3.8rem; background:var(--teal); animation: drift2 11s ease-in-out infinite; }
    .fl3 { left:32%; bottom:2rem; width:3.2rem; height:3.2rem; background:var(--green); animation: drift3 8s ease-in-out infinite; }
    .fl4 { right:6%; bottom:5rem; width:4.2rem; height:4.2rem; background:var(--purple); animation: drift4 10s ease-in-out infinite; }
    .fl5 { left:8%; top:55%; width:2.6rem; height:2.6rem; background:var(--orange); animation: drift2 7s ease-in-out infinite reverse; }
    .fl6 { right:38%; top:12%; width:2.2rem; height:2.2rem; background:var(--red); animation: drift1 12s ease-in-out infinite reverse; }
    @keyframes drift1 {
      0%,100% { transform: translate(0,0) rotate(0deg); }
      33% { transform: translate(28px,-22px) rotate(18deg); }
      66% { transform: translate(-18px,16px) rotate(-12deg); }
    }
    @keyframes drift2 {
      0%,100% { transform: translate(0,0) rotate(0deg); }
      50% { transform: translate(-32px,24px) rotate(-22deg); }
    }
    @keyframes drift3 {
      0%,100% { transform: translate(0,0) scale(1); }
      40% { transform: translate(20px,-28px) scale(1.08); }
      70% { transform: translate(-14px,10px) scale(.96); }
    }
    @keyframes drift4 {
      0%,100% { transform: translate(0,0) rotate(8deg); }
      50% { transform: translate(-24px,-18px) rotate(-14deg); }
    }
    .swatches { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.6rem; }
    .swatch {
      border:2px solid #ddd; border-radius:999px; padding:.45rem .9rem; font-weight:600; background:#fff; cursor:pointer;
    }
    .swatch.active { border-color:var(--fg); box-shadow:2px 2px 0 0 var(--fg); }
    .swatch[data-s="frutilla"].active { background:var(--pink); }
    .swatch[data-s="pileta"].active { background:var(--teal); color:#fff; }
    .swatch[data-s="mineral"].active { background:var(--chalk); }
    .footer-loops { display:flex; justify-content:center; gap:.5rem; margin-bottom:1rem; }
    .footer-loops .loop { width:1.25rem; height:1.25rem; }
    @media (prefers-reduced-motion: reduce) {
      .float-loop { animation: none !important; }
    }


    /* Waitlist API form helpers — same visual system */
    .btn-pop:disabled { opacity: .65; cursor: wait; transform: none; box-shadow: 3px 3px 0 0 var(--fg); }
    .hp { position:absolute; left:-9999px; opacity:0; height:0; width:0; overflow:hidden; }
    .form-msg { display:none; padding:.85rem 1rem; border-radius:1rem; font-weight:700; border:2px solid var(--fg); }
    .form-msg.ok { display:block; background:var(--green-soft); color:var(--ink); }
    .form-msg.err { display:block; background:#fde8e6; color:var(--red); }
    select {
      width:100%; border:2px solid #e5d9cf; border-radius:.8rem; padding:.85rem 1rem;
      font:inherit; background:var(--bg); margin-top:.35rem; color:var(--ink);
    }
    .qty-row { display:flex; align-items:center; gap:.75rem; }
    .qty-btn {
      width:2.25rem; height:2.25rem; border-radius:999px; border:2px solid var(--fg);
      background:#fff; font-weight:700; cursor:pointer; font-size:1.1rem;
    }
    .field-row { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
    @media (max-width:600px){ .field-row { grid-template-columns:1fr; } }

/* === solucion + promesas === */
.sol-label {
  display:inline-block; border:2px solid var(--fg); border-radius:999px;
  padding:.4rem 1.1rem; font-size:.78rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.06em;
}
.sol-label.teal { background:var(--teal); color:#fff; }
.sol-label.pink { background:var(--pink); color:var(--ink); }
.sol-cards .sol-card { padding:1.4rem 1.35rem 1.5rem; }
.sol-icon {
  width:3.4rem; height:3.4rem; border-radius:50%; border:2px solid var(--fg);
  display:flex; align-items:center; justify-content:center; margin-bottom:.9rem;
  box-shadow:3px 3px 0 0 var(--fg); color:var(--ink);
}
.sol-icon.pink { background:var(--pink); }
.sol-icon.yellow { background:var(--yellow); }
.sol-icon.green { background:var(--green); }
.promises {
  display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.2rem;
}
.promise {
  display:inline-flex; align-items:center; gap:.55rem;
  border:2px solid var(--fg); border-radius:999px;
  padding:.55rem 1rem .55rem .65rem; font-weight:700; font-size:.95rem;
  box-shadow:3px 3px 0 0 var(--fg);
}
.promise .check {
  width:1.55rem; height:1.55rem; border-radius:50%; background:var(--fg); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.85rem; font-weight:800; flex-shrink:0;
}
.promise.pink { background:var(--pink); }
.promise.yellow { background:var(--yellow); }
.promise.teal { background:var(--teal); color:#fff; }
.promise.teal .check { background:#fff; color:var(--fg); }
.promise.green { background:var(--green); }

.lead-hook{display:block;font-weight:700;font-size:1.15em;line-height:1.35;margin-bottom:.55rem;letter-spacing:-.01em}
.lead .red{color:var(--red)}

    .units { display:grid; gap:1rem; }
    .unit { border:2px solid var(--fg); border-radius:1.25rem; padding:1rem; background:#fff; }
    .unit-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.55rem; gap:.75rem; }
    .unit-title { font-size:1.15rem; }
    .unit-price { font-weight:800; font-size:.95rem; }
    .unit .swatches { margin-top:.35rem; }
    .add-another {
      width:100%; border:2px dashed var(--fg); background:transparent; border-radius:1rem;
      padding:.85rem 1rem; font-weight:700; cursor:pointer; font-family:inherit; font-size:.95rem;
    }
    .add-another:hover { background:var(--yellow); }
    .remove-second {
      width:100%; border:none; background:transparent; color:var(--ink); opacity:.65;
      font-weight:600; cursor:pointer; font-family:inherit; font-size:.85rem; text-decoration:underline;
      padding:0;
    }