/* =========================================================
   THE LABS. — LANDING STYLESHEET (/healthy only)
   Loads after base.css. Requires base.css tokens.
   ========================================================= */

/* HERO */
.hero .container{
  display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-6);
  align-items:center;
  padding-top: var(--space-7); padding-bottom: var(--space-7);
}
.hero-copy .price{
  font-size:22px; font-weight:700; margin: var(--space-3) 0 var(--space-4);
}
.hero-copy h1{ margin-bottom: var(--space-3); }
.hero-copy .sub{ font-size:19px; color:var(--charcoal-70); margin-bottom: var(--space-4); max-width:480px;}
.hero-visual{ display:flex; justify-content:center; }
.hero-visual img{ max-width:340px; border-radius: var(--radius-sm); box-shadow: 0 20px 60px rgba(37,36,38,0.10); }
.hero-anim{ opacity:0; transform:translateY(16px); animation: heroIn 700ms ease-out forwards; }
.hero-anim.delay{ animation-delay:150ms; }
@keyframes heroIn{ to{ opacity:1; transform:translateY(0);} }

/* Identificación */
.identificacion{ background:var(--warm-white); }
.identificacion h2{ max-width:720px; margin:0 auto var(--space-6); }
.id-grid{
  display:grid; grid-template-columns:1fr 1fr; gap: var(--space-5) var(--space-6);
  max-width: 900px; margin:0 auto;
}
.id-item{ padding: var(--space-3) 0; border-top:1px solid var(--soft-grey); font-size:19px; }
.id-item:nth-child(-n+2){ border-top:none; }

/* Reframe */
.reframe{ background: var(--soft-grey); text-align:center; }
.reframe .inner{ max-width:640px; margin:0 auto; }
.reframe h2{ margin-bottom: var(--space-3); }
.reframe p{ font-size:18px; color:var(--charcoal-70); margin-bottom: var(--space-4); }
.reframe .closer{ font-weight:700; font-size:18px; }

/* Qué es */
.que-es .container{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap: var(--space-6); align-items:center;
}
.que-es h2{ margin-bottom: var(--space-3); }
.que-es .lead{ font-size:19px; margin-bottom: var(--space-3); }
.que-es .body{ color:var(--charcoal-70); font-size:16px; }
.que-es .detail-img{ border-radius:var(--radius-sm); border:1px solid var(--soft-grey); overflow:hidden; }

/* Qué incluye */
.incluye-grid{
  display:grid; grid-template-columns:1fr 1fr; gap: var(--space-4);
  margin-top: var(--space-6);
}
.incluye-card{
  background: var(--warm-white); border:1px solid var(--soft-grey); border-radius: var(--radius-sm);
  padding: var(--space-4); transition: border-color 150ms ease-out, transform 150ms ease-out;
}
.incluye-card:hover{ border-color: var(--sage); transform: translateY(-2px); }
.incluye-card .num{ color:var(--sage); font-weight:700; font-size:14px; letter-spacing:1px; margin-bottom:var(--space-2); display:block; }
.incluye-card h3{ margin-bottom: var(--space-2); }
.incluye-card ul{ list-style:none; color:var(--charcoal-70); font-size:15px; margin-bottom: var(--space-3); }
.incluye-card li{ padding:4px 0; }
.incluye-card li::before{ content:"— "; }
.incluye-card img{
  border-radius:12px; border:1px solid var(--soft-grey);
  width:100%; height:170px; object-fit:cover; object-position: top center;
}
.incluye-cta{ text-align:center; margin-top: var(--space-5); }

/* Preview carousel */
.preview{ background: var(--soft-grey); }
.preview h2{ text-align:center; margin-bottom:var(--space-1); }
.preview .sub{ text-align:center; color:var(--charcoal-70); margin-bottom: var(--space-5); font-size:17px; }
.carousel-wrap{ position:relative; max-width: 1100px; margin:0 auto; }
.carousel{
  display:flex; gap: var(--space-3); overflow-x:auto; scroll-snap-type:x mandatory;
  padding: var(--space-2) var(--space-2) var(--space-4);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.carousel::-webkit-scrollbar{ display:none; }
.carousel .slide{
  scroll-snap-align:center; flex: 0 0 auto; width:260px;
}
.carousel .slide img{
  border-radius: var(--radius-sm); border:1px solid var(--soft-grey);
  box-shadow: 0 12px 30px rgba(37,36,38,0.08);
}
.carousel .slide .cap{ font-size:13px; color:var(--charcoal-70); margin-top: var(--space-2); text-align:center; }
.carousel-arrow{
  position:absolute; top:45%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; background:var(--warm-white);
  border:1px solid var(--soft-grey); display:flex; align-items:center; justify-content:center;
  font-size:18px; box-shadow:0 4px 12px rgba(37,36,38,0.08);
}
.carousel-arrow.prev{ left:-8px; } .carousel-arrow.next{ right:-8px; }
.carousel-arrow:focus-visible{ outline:2px solid var(--sage); outline-offset:2px; }
.dots{ display:flex; justify-content:center; gap:8px; margin-top:var(--space-2); }
.dot{ width:7px; height:7px; border-radius:50%; background:var(--stone); opacity:0.5; transition:opacity 150ms, transform 150ms; }
.dot.active{ opacity:1; background:var(--charcoal); transform:scale(1.3); }

/* AI Prompt Lab */
.ai-lab .container{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:var(--space-6); align-items:center; }
.ai-lab h2{ margin-bottom:var(--space-3); }
.ai-lab .lead{ font-size:19px; margin-bottom:var(--space-3); }
.ai-lab .body{ color:var(--charcoal-70); margin-bottom:var(--space-4); }
.prompt-card{
  background: var(--warm-white); border:1px solid var(--soft-grey); border-radius:var(--radius-lg);
  padding: var(--space-4);
}
.prompt-card .ptag{ color:var(--sage); font-weight:700; font-size:14px; letter-spacing:1px; margin-bottom:var(--space-1); display:block; }
.prompt-card h3{ margin-bottom:var(--space-3); }
.prompt-card .body-text{ font-size:15px; color:var(--charcoal); background:var(--soft-grey); border-radius:12px; padding:var(--space-3); margin-bottom:var(--space-3); }
.prompt-card .row{ display:flex; gap:var(--space-2); font-size:14px; margin-bottom:var(--space-1); }
.prompt-card .row b{ min-width:120px; color:var(--charcoal-70); font-size:13px; text-transform:uppercase; letter-spacing:0.5px; }
.prompt-card .power{
  background: var(--sage); border-radius:12px; padding: var(--space-3); margin-top:var(--space-3);
}
.prompt-card .power b{ display:block; margin-bottom:4px; font-size:13px; letter-spacing:0.5px; text-transform:uppercase; }

/* 30-day */
.challenge{ background: var(--sage-tint); }
.challenge h2{ text-align:center; margin-bottom:var(--space-2); }
.challenge > .container > p.body{ text-align:center; max-width:600px; margin:0 auto var(--space-2); color:var(--charcoal-70); font-size:18px; }
.challenge .permission{ text-align:center; font-size:14px; color:var(--charcoal-70); margin-bottom:var(--space-6); }
.weeks{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-2); margin-bottom:var(--space-6); }
.week-card{ background:var(--warm-white); border-radius:var(--radius-sm); padding:var(--space-3); text-align:center; border:1px solid var(--soft-grey);}
.week-card .wk{ font-size:13px; color:var(--sage); font-weight:700; margin-bottom:4px; display:block; }
.week-card .wt{ font-size:14px; font-weight:700; display:block; }
.challenge-evidence{ max-width:420px; margin:0 auto; }
.challenge-evidence img{ border-radius:var(--radius-sm); box-shadow:0 12px 30px rgba(37,36,38,0.08); }

/* Tools that stay */
.tools .container{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6); align-items:center; }
.tools h2{ margin-bottom:var(--space-3); }
.tools .body{ color:var(--charcoal-70); margin-bottom:var(--space-4); font-size:18px; }
.tools .closer-card{
  background:var(--charcoal); color:var(--warm-white); border-radius:var(--radius-sm);
  padding:var(--space-4); font-weight:700; font-size:16px; letter-spacing:0.3px;
}
.tools .evidence img{ border-radius:var(--radius-sm); border:1px solid var(--soft-grey); box-shadow:0 12px 30px rgba(37,36,38,0.08); }

/* Para quien es */
.qualify{ background:var(--soft-grey); }
.qualify-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); max-width:960px; margin:0 auto; }
.qualify-col h3{ margin-bottom:var(--space-3); }
.qualify-col ul{ list-style:none; }
.qualify-col li{ padding:10px 0 10px 28px; position:relative; border-top:1px solid rgba(37,36,38,0.08); font-size:16px; }
.qualify-col li:first-child{ border-top:none; }
.qualify-col.yes li::before{ content:"✓"; position:absolute; left:0; color:var(--sage); font-weight:700; }
.qualify-col.no li::before{ content:"–"; position:absolute; left:0; color:var(--stone); font-weight:700; }

/* Oferta */
.oferta .card{
  max-width:720px; margin:0 auto; background:var(--warm-white); border:1px solid var(--soft-grey);
  border-radius:var(--radius-lg); padding: var(--space-6); text-align:center;
}
.oferta .price{ font-size:44px; font-weight:700; margin: var(--space-2) 0 var(--space-4); }
.oferta .price small{ font-size:16px; font-weight:400; color:var(--charcoal-70); display:block; margin-top:4px;}
.oferta ul{ list-style:none; text-align:left; display:grid; grid-template-columns:1fr 1fr; gap:8px 24px; margin: var(--space-4) 0; }
.oferta li{ font-size:15px; padding-left:20px; position:relative; }
.oferta li::before{ content:"—"; position:absolute; left:0; color:var(--sage); }
.oferta .trust{ font-size:13px; color:var(--charcoal-70); margin-top:var(--space-3); }

/* FAQ */
.faq .container{ max-width:800px; }
.faq h2{ text-align:center; margin-bottom:var(--space-6); }
.faq-item{ border-top:1px solid var(--soft-grey); }
.faq-item:last-child{ border-bottom:1px solid var(--soft-grey); }
.faq-q{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding: var(--space-3) 0; text-align:left; font-weight:700; font-size:17px;
}
.faq-q .icon{ font-size:20px; font-weight:400; transition:transform 200ms ease-out; flex-shrink:0; margin-left:16px;}
.faq-item.open .faq-q .icon{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height 250ms ease-out; }
.faq-item.open .faq-a{ max-height:200px; }
.faq-a p{ padding-bottom: var(--space-3); color:var(--charcoal-70); font-size:16px; }
.faq-cta{ text-align:center; margin-top:var(--space-5); }

/* Final CTA */
.final{ background:var(--charcoal); color:var(--warm-white); text-align:center; }
.final h2{ margin-bottom:var(--space-2); }
.final .tagline{ font-size:18px; color:rgba(250,249,247,0.7); margin-bottom:var(--space-4); }
.final .dot{ width:10px; height:10px; border-radius:50%; background:var(--sage); margin:0 auto var(--space-4); }
.final .reminder{ font-size:14px; color:rgba(250,249,247,0.6); margin-top:var(--space-3); }

/* Sticky CTA */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  background:var(--warm-white); border-top:1px solid var(--soft-grey);
  padding:12px 20px; box-shadow:0 -8px 24px rgba(37,36,38,0.08);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  transform:translateY(120%); transition: transform 250ms ease-out;
}
.sticky-cta.visible{ transform:translateY(0); }
.sticky-cta .info{ font-size:13px; color:var(--charcoal-70); display:none; }
.sticky-cta .btn{ height:48px; padding:0 24px; font-size:15px; flex:1; max-width:340px; }


/* Landing-specific responsive */
@media (max-width: 860px){
  .hero .container{ grid-template-columns:1fr; gap:var(--space-4); padding-top:var(--space-5); padding-bottom:var(--space-5); }
  .hero-visual{ order:-1; }
  .hero-visual img{ max-width:240px; }
  .hero-copy .sub{ max-width:none; }

  .id-grid{ grid-template-columns:1fr; gap:0; }
  .id-item{ border-top:1px solid var(--soft-grey) !important; }
  .id-item:first-child{ border-top:none !important; }

  .que-es .container{ grid-template-columns:1fr; }
  .que-es .detail-img{ order:-1; max-width:280px; margin:0 auto var(--space-3); }

  .incluye-grid{ grid-template-columns:1fr; }

  .ai-lab .container{ grid-template-columns:1fr; }
  .ai-lab .visual{ order:-1; }

  .weeks{ grid-template-columns:1fr 1fr; }

  .tools .container{ grid-template-columns:1fr; }
  .tools .evidence{ order:-1; max-width:280px; margin:0 auto; }

  .qualify-grid{ grid-template-columns:1fr; gap:var(--space-4); }

  .oferta ul{ grid-template-columns:1fr; }
  .oferta .card{ padding: var(--space-4) var(--space-3); }

  .btn{ width:100%; }
  .hero-copy .btn{ width:100%; }
  .incluye-cta .btn, .faq-cta .btn, .oferta .btn{ width:100%; }
}