:root{
  /* Colores del mockup */
  --peach-1: #f3b294;   /* fondo principal */
  --peach-2: #e8cec2;   /* fondo claro */
  --paper:   #ffffff;   /* tarjeta */
  --paper-2: #f6efe9;   /* tinte suave */
  --ink:     #1e1510;   /* texto */
  --muted:   #544238;   /* texto secundario */
  --tan:     #d19c79;
  --brown:   #936850;
  --pink:    #ea6fb1;   /* título */
  --gold:    #c2a46a;   /* botón */
  --gold-700:#a7864d;   /* hover */
  --shadow:  0 20px 60px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html, body{
  height: 100dvh;
  overflow: hidden;
}

.reveal{
  opacity: 0;
  transform: translateY(16px) scale(.985);
  filter: blur(1px) saturate(.9);
  transition:
    opacity .6s ease var(--d, 0ms),
    transform .6s ease var(--d, 0ms),
    filter .6s ease var(--d, 0ms);
  will-change: opacity, transform;
}
.reveal.in{
  opacity: 1;
  transform: none;
  filter: none;
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; filter:none; transition:none; }
}

body{
  margin:0;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--ink);
  background: radial-gradient(1200px 700px at 10% -10%, var(--peach-2), transparent 60%),
              radial-gradient(900px 600px at 110% 10%, var(--peach-1), transparent 60%),
              #f4b89f;
  overflow-x:hidden;
}

.bg{ position:fixed; inset:0; pointer-events:none; opacity:.2; }

.shell {
  display: flex;
  width: min(1400px, 96vw);
  height: calc(100dvh - 64px);
  margin: 32px auto;
  border-radius: 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--paper);
  box-shadow: var(--shadow);
  padding: 28px 32px 20px;
  height: calc(100dvh - 64px);
  overflow: hidden;
}

/* Topbar */
.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-bottom: 6px;
  align-self: stretch;
}

.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-weight:600; }
.brand .logo{
  display:grid; place-items:center;
  width:38px; height:38px; border-radius:10px;
  background:linear-gradient(120deg, var(--paper-2), #fff8f3);
  color:var(--brown);
  box-shadow:0 8px 20px rgba(0,0,0,.06) inset;
}
.brand-text{text-transform:capitalize; letter-spacing:.5px}

.nav{display:flex; gap:18px; margin-left:8px}
.nav-link{ font-size:.95rem; color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:10px; }
.nav-link:hover,.nav-link.is-active{ background:var(--paper-2); color:var(--ink) }

.actions{ margin-left:auto; display:flex; align-items:center; gap:10px }
.search{
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background:var(--paper-2); color:var(--muted);
}
.search input{ 
  border:none; 
  outline:none; 
  background:transparent; 
  font-size:.95rem; 
  width:160px; 
}
.icon-btn{ 
  border:none; 
  background:var(--paper-2); 
  border-radius:14px; 
  padding:8px; 
  cursor:pointer; 
  color:var(--muted); 
}
.icon-btn:hover{ 
  filter:brightness(.95) 
}
/* Texto e imagen */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 22px;
  padding: 0 36px;
  width: 100%;
  flex: 1 1 auto; 
  align-self: center; 
}
/* imagen */
.hero-img {
  display: block;
  width: 70%;
  max-width: 480px; 
  height: auto;
  border-radius: 20px;
}
.hero-media{
  position: relative;
  width: 520px;
  min-width: 520px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Texto */
.hero-copy{
  padding-left: 100px;
  max-width: 640px;
}
.hero-copy h1{
  margin:0 0 6px 0; line-height:1.05;
  font-family:'Fraunces', serif; font-weight:700;
  font-size: clamp(48px, 6vw, 64px);
  color:var(--pink);
}

.hero-copy .eyebrow{ letter-spacing:.35em; font-size:.8rem; color:#b69063; margin-bottom:6px; }
.hero-copy .sub{ color:var(--muted); margin:6px 0 18px }
.options{ display:flex; align-items:center; gap:18px; flex-wrap:wrap }
.qty .label{ display:block; font-size:.85rem; color:#b69063; margin-bottom:6px }
.pill{
  background:var(--paper-2);
  display:inline-flex; align-items:center; gap:12px;
  padding:8px 12px; border-radius:16px; font-weight:600;
}
.pill button{ width:26px; height:26px; border-radius:9px; border:none; background:#eadfd6; cursor:pointer; font-size:18px; line-height:1; }
.pill .count{ min-width:18px; text-align:center }

.cta{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--gold); color:#fff; text-decoration:none;
  padding:14px 22px; border-radius:18px; font-weight:600;
  box-shadow: 0 10px 30px rgba(194,164,106,.35);
}
.cta:hover{ background:var(--gold-700) }



/* Chips */
.chip{
  position:absolute; left:8%; top:10%;
  background:var(--paper);
  padding:10px 14px; border-radius:14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
  color:var(--muted); font-weight:600;
}
.chip-1{ left:56%; top:8% }
.chip-2{ left:26%; top:66% }
.chip-3{ left:80%; top:46% }

.foot{ display:flex; justify-content:flex-end; padding:18px 6px 10px }
.continue{ color:#b69063; text-decoration:none; font-size:.9rem }
.continue:hover{ text-decoration:underline }

.site-foot{
  margin-top: auto;              /* lo manda al fondo del shell */
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0 8px;
  border-top: 1px solid #efe7df; /* separador suave */
  color: #b69063;                /* dorado suave */
  opacity: .68;                  /* medio visible */
  font-size: .9rem;
  letter-spacing: .02em;
}
/* Responsive Tablets */
@media (max-width: 960px){
  .hero{ grid-template-columns:1fr; padding-top:8px }
  .hero-media .chip{ display:none }
  .actions .search input{ width:110px }
}
@media (max-width: 560px){
  .nav{ display:none }
  .shell{ padding:18px 16px }
  .brand-text{ display:none }
  .circle{ width:100% }
  .cta{ width:100%; justify-content:center }
}

/* Responsive */
/* Iphones hasta 430px */
@media (max-width: 480px){

  html, body{
    height: auto;
    min-height: 100dvh;
    overflow: auto;
  }

  .topbar{ gap: 10px; padding-bottom: 4px; }
  .brand-text{ display: none; }
  .nav{ display: none; }
  .actions .search{ flex: 1; }
  .actions .search input{ width: 100%; font-size: 14px; }
  .icon-btn{ padding: 8px; border-radius: 12px; }

  .hero{
    grid-template-columns: 1fr;
    align-items: start;
    gap: 14px;
    padding: 6px 4px 12px;
  }

.hero-copy{
  padding-left: 0;
  max-width: 100%;
  text-align: center;
  margin: 0 auto;
}

/* Centrar controles debajo del texto */
.options{ justify-content: center; }
.qty .label{ width: 100%; text-align: center; }
  .hero-copy .eyebrow{ letter-spacing: .25em; font-size: .75rem; }
  .hero-copy h1{ font-size: clamp(32px, 9vw, 40px); }
  .hero-copy .sub{ margin: 8px 0 14px; }
  .cta{ width: 100%; justify-content: center; padding: 12px 16px; border-radius: 14px; }

  .hero-media{
    order: 2; 
    width: 100%;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .hero-img{
    width: clamp(240px, 70vw, 340px);
    max-width: none;
    height: auto;
  }
  .chip{ display: none; }

  .foot{ justify-content: center; padding: 14px 0 8px; }
  .continue{ display: inline-block; margin-top: 4px; }
}

/* Folds y Z Flip 344px */
@media (max-width: 372px){
  .actions .search{ display: none; }
  .hero-copy h1{ font-size: clamp(28px, 10vw, 36px); }
  .cta{ padding: 10px 14px; }
  .shell{ padding: 14px 12px; }
}