/* ============================================================
   Kuidaka — estilos exclusivos de la LANDING (index.html)
   ============================================================ */

/* ---------- Keyframes ---------- */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(28px,-22px) scale(1.08)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-24px,18px) scale(1.1)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Hero ---------- */
.hero{padding:64px 0 40px;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(64px);opacity:.42;z-index:0;pointer-events:none}
.blob.b1{width:440px;height:440px;background:radial-gradient(circle,#E0A96A,transparent 70%);
  top:-130px;right:-90px;animation:drift 15s ease-in-out infinite}
.blob.b2{width:360px;height:360px;background:radial-gradient(circle,#C47A3A,transparent 70%);
  top:200px;left:-150px;animation:drift2 19s ease-in-out infinite}
.hero .wrap{position:relative;z-index:1;display:grid;gap:36px}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--copper-d);
  background:rgba(196,122,58,.1);border:1px solid rgba(196,122,58,.22);padding:7px 14px;border-radius:999px;
  width:max-content}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--copper);box-shadow:0 0 0 4px rgba(196,122,58,.18)}
h1{font-family:var(--serif);font-weight:700;font-size:clamp(40px,9vw,66px);line-height:1.03;
  letter-spacing:-.025em;margin:18px 0 0;color:var(--ink)}
h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sub{font-size:clamp(17px,4.4vw,20px);color:var(--ink-soft);max-width:34ch;margin-top:20px}

/* ---------- Insignias de tienda (CTA) ---------- */
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.badge{display:inline-flex;align-items:center;gap:11px;background:var(--cocoa);color:#fff;
  padding:12px 18px;border-radius:15px;text-decoration:none;transition:transform .22s,box-shadow .22s}
.badge:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(59,26,10,.3)}
.badge svg{width:26px;height:26px;flex:none;fill:#fff}
.badge .bt{display:flex;flex-direction:column;line-height:1.15}
.badge .bt small{font-size:10.5px;opacity:.82;font-weight:500}
.badge .bt b{font-size:17px;font-weight:600}
.avail{display:flex;align-items:center;gap:8px;margin-top:18px;font-size:13.5px;color:var(--muted);font-weight:500}
.avail b{color:var(--ink-soft)}
.avail .sp{color:var(--copper)}

/* ---------- Móvil (marco iPhone + pantalla placeholder) ---------- */
.phone-stage{display:flex;justify-content:center;position:relative}
.phone{position:relative;width:270px;height:552px;border-radius:46px;background:#0d0d10;
  padding:11px;box-shadow:0 40px 80px -20px rgba(92,46,14,.42),0 0 0 2px rgba(0,0,0,.06);
  animation:float 6s ease-in-out infinite}
.phone .island{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:92px;height:26px;
  background:#0d0d10;border-radius:999px;z-index:3}
.screen{width:100%;height:100%;border-radius:36px;overflow:hidden;background:var(--bg);position:relative}
.screen>img{width:100%;height:100%;object-fit:cover}       /* para la captura real cuando se añada */
.ph-head{padding:44px 16px 12px;background:#fff;border-bottom:1px solid var(--line)}
.ph-title{font-family:var(--serif);font-weight:700;font-size:22px}
.ph-sub{font-size:12px;color:var(--muted)}
.ph-card{margin:14px 12px;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 6px 18px rgba(26,26,26,.05)}
.ph-crow{display:flex;align-items:center;gap:9px;padding:11px 12px}
.ph-av{width:34px;height:34px;border-radius:50%;background:var(--grad);flex:none}
.ph-name{font-size:12.5px;font-weight:700}
.ph-meta{font-size:11px;color:var(--muted)}
.ph-photo{height:150px;background:linear-gradient(135deg,#E7D3BE,#C4956A);position:relative}
.ph-photo.v:after{content:"✓ Verificada";position:absolute;top:10px;left:10px;font-size:10px;font-weight:700;
  color:#fff;background:var(--green);padding:4px 8px;border-radius:999px}
.ph-foot{display:flex;gap:6px;padding:11px 12px;align-items:center}
.ph-chip{font-size:10.5px;font-weight:600;color:var(--copper-d);background:rgba(196,122,58,.1);
  padding:4px 9px;border-radius:999px}
.ph-chip.v{color:#1E9B72;background:rgba(43,184,138,.12)}
.ph-star{margin-left:auto;font-size:12px;color:var(--copper);font-weight:700}
.ph-cap{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:9px;color:var(--muted);
  padding:6px;background:rgba(248,249,250,.82)}

/* ---------- Franja de posicionamiento ---------- */
.strip{background:var(--cocoa);color:#f3e7dc;padding:17px 0}
.strip .wrap{display:flex;flex-wrap:wrap;gap:6px 26px;justify-content:center;align-items:center;
  font-family:var(--serif);font-size:clamp(17px,4vw,22px);text-align:center}
.strip b{color:var(--gold)}
.strip .d{color:#8a6a52}

/* ---------- Marquee de cocinas ---------- */
.mq{padding:20px 0;background:var(--cream);overflow:hidden;border-bottom:1px solid var(--line)}
.mq-track{display:flex;gap:14px;width:max-content;animation:marquee 34s linear infinite}
.mq-item{font-family:var(--serif);font-size:19px;color:var(--ink-soft);white-space:nowrap}
.mq-item:before{content:"•";color:var(--copper);margin-right:14px}

/* ---------- Secciones genéricas ---------- */
.sec{padding:74px 0}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--copper)}
h2{font-family:var(--serif);font-weight:700;font-size:clamp(28px,6.5vw,42px);line-height:1.08;
  letter-spacing:-.02em;margin:10px 0 0;max-width:16ch;color:var(--ink)}
.lead{font-size:17px;color:var(--ink-soft);margin-top:14px;max-width:52ch}

/* ---------- Cómo funciona (3 pasos) ---------- */
.steps{display:grid;gap:18px;margin-top:40px}
.step{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px 22px;
  box-shadow:0 10px 30px rgba(92,46,14,.05);transition:transform .3s,box-shadow .3s}
.step:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(160,98,42,.16)}
.step .n{width:44px;height:44px;border-radius:13px;background:var(--grad);color:#fff;font-weight:700;
  font-size:19px;display:grid;place-items:center;font-family:var(--serif)}
.step h3{font-family:var(--serif);font-size:22px;font-weight:700;margin:16px 0 6px}
.step p{font-size:15px;color:var(--ink-soft)}

/* ---------- Features alternadas ---------- */
.feat{display:grid;gap:34px;align-items:center;padding:56px 0}
.feat .art{display:flex;justify-content:center}
.mini{width:230px;height:470px;border-radius:40px;background:#0d0d10;padding:9px;
  box-shadow:0 34px 66px -22px rgba(92,46,14,.38)}
.mini .screen{border-radius:32px}
.fbadge{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--copper-d);
  background:rgba(196,122,58,.1);padding:8px 14px;border-radius:999px;margin-bottom:6px}

/* ---------- Banda de persona ---------- */
.persona{background:var(--grad-rich);color:#fff;padding:78px 0;text-align:center;overflow:hidden;position:relative}
.persona .q{font-family:var(--serif);font-weight:700;font-size:clamp(26px,6.2vw,44px);line-height:1.12;
  letter-spacing:-.02em;max-width:20ch;margin:0 auto}
.persona .q em{font-style:italic;font-weight:500;opacity:.94}
.persona p{margin-top:20px;font-size:17px;opacity:.92;max-width:44ch;margin-left:auto;margin-right:auto}

/* ---------- CTA final ---------- */
.final{padding:82px 0;text-align:center}
.final h2{margin:0 auto;max-width:18ch}
.final .cta-row{justify-content:center}
.final .avail{justify-content:center}

/* ---------- Desktop ---------- */
@media(min-width:860px){
  .hero{padding:96px 0 70px}
  .hero .wrap{grid-template-columns:1.05fr .95fr;align-items:center;gap:20px}
  .phone{width:360px;height:750px}
  .mini{width:360px;height:750px}
  .steps{grid-template-columns:repeat(3,1fr)}
  .feat{grid-template-columns:1fr 1fr}
  .feat.rev .art{order:-1}
  .sec{padding:96px 0}
}