@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Poppins:wght@600;700&display=swap');
:root{
  --pink:#eda0c6;
  --pink-light:#FDE9F1;
  --pink-mid:#FBD4E5;
  --pink-dark:#f18db6;
  --text:#3D3D3D;
  --muted:#8a8a8a;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui;background:var(--pink-light);color:var(--text)}
.poppins{font-family:'Poppins',sans-serif}
.inter{font-family:'Inter',sans-serif}


.badge-ribbon{width:56px;height:56px;background:white;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(237,160,198,.25)}

.hero{display:grid;grid-template-columns:420px 1fr;gap:0;background:white;border-radius:24px;overflow:hidden;box-shadow:0 12px 40px rgba(122,70,101,.12);margin-top:18px}
.hero-img{position:relative;background:#f8f8f8}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:top center;min-height:560px}
.hero-img::after{content:'';position:absolute;right:0;top:0;bottom:0;width:120px;background:linear-gradient(to right, transparent, white)}

.hero-content{padding:28px 32px 22px}
.kicker{display:inline-flex;gap:8px;align-items:center;background:white;border:1px solid var(--pink);border-radius:999px;padding:6px 14px;font-size:11px;color:var(--pink-dark);font-weight:600}
h1{font-size:36px;line-height:1.05;margin-top:16px;color:var(--pink-dark)}
h1 .light{font-weight:300;color:#9a9a9a;display:block;font-size:30px;margin-top:2px}
.subcopy{margin-top:12px;font-size:13px;color:var(--pink);background:var(--pink-light);display:inline-block;padding:8px 14px;border-radius:10px}

.groups{margin-top:22px;display:grid;grid-template-columns:1fr 1.6fr;gap:18px}
.group-title{font-size:11px;letter-spacing:.14em;font-weight:700;color:var(--pink-dark);text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.group-title::after{content:'';height:1px;flex:1;background:var(--pink-mid)}
.cards{display:grid;gap:10px}
.cards.small{grid-template-columns:1fr 1fr}
.card{background:white;border:1px solid #eee;border-radius:14px;padding:12px 14px;transition:.2s}
.card:hover{border-color:var(--pink)}
.card.popular{border-color:var(--pink-dark);box-shadow:0 8px 24px rgba(122,70,101,.18);transform:scale(1.02);position:relative}
.badge-pop{position:absolute;top:-10px;left:12px;background:var(--pink-dark);color:white;font-size:8.5px;font-weight:700;letter-spacing:.12em;padding:4px 10px;border-radius:999px}
.card-name{font-size:11px;font-weight:700;line-height:1.2}
.card-detail{font-size:8px;color:var(--muted);margin-top:4px;line-height:1.35}
.card-price{display:flex;align-items:baseline;gap:8px;margin-top:8px}
.price{font-size:20px;font-weight:700;color:var(--pink-dark)}
.original{font-size:10px;color:#bbb;text-decoration:line-through}
.special{display:inline-block;margin-top:6px;font-size:8px;background:var(--pink-dark);color:white;padding:3px 8px;border-radius:999px;font-weight:600}

.vigencia{margin-top:14px;text-align:right;font-size:9px;color:#aaa}


@media(max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero-img img{min-height:360px}
  .groups{grid-template-columns:1fr}
}