/* ================================================================
   BY VALERIA · Funnel UGC — Neumorphism design system
   Superficie suave, sombras duales (luz arriba-izq / sombra abajo-der),
   elementos extruidos y estados "presionados" (inset).
   ================================================================ */

:root{
  --surface:    #E7E5E4;   /* superficie base (piedra cálida) */
  --surface-2:  #EDECEB;   /* superficie elevada */
  --surface-3:  #DEDCDA;   /* superficie hundida */
  --text:       #1E2938;
  --muted:      #5C6B7C;
  --muted-2:    #8C97A5;
  --primary:    #006666;   /* teal — CTA / foco */
  --primary-2:  #0A7A7A;
  --accent:     #FF2157;   /* rosa — acentos / highlights */
  --success:    #00A63D;
  --wa:         #25D366;

  --sh-dark:    rgba(161,155,150,.62);
  --sh-darker:  rgba(145,139,134,.75);
  --sh-light:   rgba(255,255,255,.92);

  --r-lg: 26px;
  --r-md: 18px;
  --r-sm: 13px;

  --neu-out:    8px 8px 18px var(--sh-dark), -8px -8px 18px var(--sh-light);
  --neu-out-sm: 5px 5px 11px var(--sh-dark), -5px -5px 11px var(--sh-light);
  --neu-in:     inset 5px 5px 11px var(--sh-darker), inset -5px -5px 11px var(--sh-light);
  --neu-in-sm:  inset 3px 3px 7px var(--sh-darker), inset -3px -3px 7px var(--sh-light);

  --font-display:'Space Mono', monospace;
  --font-body:  'DM Sans', sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  background:var(--surface);
  color:var(--text);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

.app{ max-width:520px; margin:0 auto; min-height:100vh; position:relative; }

/* ================= TOPBAR + PROGRESS ================= */
.topbar{
  position:sticky; top:0; z-index:50;
  background:var(--surface);
  padding:14px 18px 10px;
}
.topbar-inner{ display:flex; align-items:center; gap:14px; }
.btn-back{
  width:40px; height:40px; border:none; cursor:pointer;
  border-radius:50%;
  background:var(--surface);
  box-shadow:var(--neu-out-sm);
  color:var(--text);
  display:flex; align-items:center; justify-content:center;
  transition:box-shadow .15s ease, transform .15s ease;
  flex-shrink:0;
}
.btn-back:active{ box-shadow:var(--neu-in-sm); transform:scale(.96); }
.btn-back:focus-visible{ outline:3px solid var(--primary); outline-offset:2px; }
.progress-wrap{ flex:1; display:flex; align-items:center; gap:10px; }
.progress-track{
  flex:1; height:12px; border-radius:999px;
  background:var(--surface);
  box-shadow:var(--neu-in-sm);
  overflow:hidden;
}
.progress-bar{
  height:100%; width:0%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--primary), var(--primary-2));
  transition:width .35s ease;
}
.progress-lbl{
  font-family:var(--font-display); font-size:11px; font-weight:700;
  color:var(--muted); min-width:28px; text-align:right;
}

/* ================= SCREENS ================= */
.screen{ display:none; animation:fadeUp .3s ease; }
.screen.active{ display:block; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }
.sc-inner{ padding:8px 20px 56px; }

/* ================= Q-HEADER ================= */
.q-header{ margin:10px 0 22px; }
.q-badge{
  display:inline-block;
  font-family:var(--font-display); font-size:10px; font-weight:700;
  letter-spacing:.18em; color:var(--primary);
  background:var(--surface);
  box-shadow:var(--neu-in-sm);
  border-radius:999px;
  padding:7px 14px; margin-bottom:14px;
}
.q-title{
  font-family:var(--font-display); font-size:25px; font-weight:700;
  line-height:1.2; letter-spacing:-.02em;
}
.q-highlight{ color:var(--primary); }
.q-sub{ margin-top:8px; font-size:14.5px; color:var(--muted); line-height:1.5; }

/* ================= LANDING ================= */
.landing-sc{ padding-top:2px; }

.hero-video-wrap{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  aspect-ratio:9/12;
  background:var(--surface-3);
  box-shadow:var(--neu-out);
}
.hero-video{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-video-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(30,41,56,.45));
  pointer-events:none;
}
.btn-sound{
  position:absolute; right:14px; bottom:14px;
  width:46px; height:46px; border:none; border-radius:50%;
  background:rgba(231,229,228,.9); color:var(--text);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 4px 14px rgba(30,41,56,.35);
  backdrop-filter:blur(4px);
}
.btn-sound.sound-on{ background:var(--primary); color:#fff; }

.hero-content{ padding:26px 4px 6px; text-align:center; }
.hero-badge-top{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-size:10.5px; font-weight:700;
  letter-spacing:.2em; color:var(--muted);
  background:var(--surface);
  box-shadow:var(--neu-in-sm);
  border-radius:999px; padding:8px 16px;
  margin-bottom:16px; text-transform:uppercase;
}
.badge-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px rgba(255,33,87,.18);
  animation:dotPulse 1.6s ease-in-out infinite;
}
@keyframes dotPulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.25);} }

.hero-h1{
  font-family:var(--font-display); font-size:30px; font-weight:700;
  line-height:1.18; letter-spacing:-.02em;
}
.hero-highlight{
  color:var(--primary);
  display:inline-block;
}
.hero-brands-row{
  margin-top:14px;
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px;
  font-family:var(--font-display); font-size:11px; font-weight:700;
  letter-spacing:.14em; color:var(--muted);
}
.hbr-dot{ color:var(--accent); }

/* CTA principal */
.btn-cta{
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:10px;
  border:none; cursor:pointer;
  margin-top:22px;
  padding:19px 24px;
  border-radius:var(--r-md);
  background:linear-gradient(145deg, var(--primary-2), var(--primary));
  color:#fff;
  font-family:var(--font-display); font-size:15.5px; font-weight:700; letter-spacing:.06em;
  box-shadow:7px 7px 16px var(--sh-dark), -7px -7px 16px var(--sh-light), inset 0 1px 0 rgba(255,255,255,.25);
  transition:box-shadow .15s ease, transform .15s ease;
}
.btn-cta:active{ transform:translateY(2px); box-shadow:3px 3px 8px var(--sh-dark), -3px -3px 8px var(--sh-light); }
.btn-cta:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }
.btn-cta:disabled{ opacity:.55; cursor:not-allowed; }
.hero-micro{ margin-top:12px; font-size:12.5px; color:var(--muted-2); }

/* TRUST STRIP */
.trust-strip{
  margin-top:26px;
  display:flex; align-items:center; justify-content:space-around;
  background:var(--surface);
  border-radius:var(--r-md);
  box-shadow:var(--neu-out-sm);
  padding:16px 10px;
}
.trust-strip-item{ text-align:center; }
.trust-strip-item strong{
  display:block; font-family:var(--font-display); font-size:19px; font-weight:700;
  color:var(--text);
}
.trust-strip-item span{
  font-size:11px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase;
}
.trust-highlight{ color:var(--accent) !important; }
.trust-strip-sep{ width:1px; height:34px; background:var(--surface-3); box-shadow:1px 0 0 var(--sh-light); }

/* ================= PORTAFOLIO (landing) ================= */
.port-section{ margin-top:34px; }
.port-head{
  display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px;
}
.port-title{
  font-family:var(--font-display); font-size:16px; font-weight:700; letter-spacing:.02em;
}
.port-title span{ color:var(--accent); }
.port-sub{ font-size:11.5px; color:var(--muted-2); }
.port-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.port-item{
  position:relative;
  border-radius:var(--r-md);
  overflow:hidden;
  aspect-ratio:9/14;
  background:var(--surface-3);
  box-shadow:var(--neu-out-sm);
  cursor:pointer;
  border:none; padding:0;
}
.port-item video,
.port-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.port-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, transparent 50%, rgba(30,41,56,.5));
  transition:opacity .2s ease;
}
.port-item.playing .port-play{ opacity:0; pointer-events:none; }
.port-play-btn{
  width:52px; height:52px; border-radius:50%;
  background:rgba(231,229,228,.92);
  display:flex; align-items:center; justify-content:center;
  color:var(--primary);
  box-shadow:0 6px 18px rgba(30,41,56,.35);
}
.port-tag{
  position:absolute; left:10px; bottom:10px;
  font-family:var(--font-display); font-size:10px; font-weight:700; letter-spacing:.12em;
  color:#fff; background:rgba(30,41,56,.55);
  padding:5px 10px; border-radius:999px;
  backdrop-filter:blur(3px);
  text-transform:uppercase;
}
.port-fallback{
  position:absolute; inset:0; display:flex; flex-direction:column; gap:8px;
  align-items:center; justify-content:center; color:var(--muted-2);
  font-size:12px; text-align:center; padding:12px;
}
.port-fallback span{ font-size:30px; }

/* MARCAS */
.brands-trust{ margin-top:30px; text-align:center; }
.brands-trust-title{
  font-family:var(--font-display); font-size:10.5px; font-weight:700;
  letter-spacing:.2em; color:var(--muted-2); text-transform:uppercase; margin-bottom:14px;
}
.brands-logos{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
}
.brands-logos .blogo{
  height:52px; min-width:84px; padding:10px 16px;
  border-radius:var(--r-sm);
  background:var(--surface);
  box-shadow:var(--neu-in-sm);
  display:flex; align-items:center; justify-content:center;
}
.brands-logos img{ max-height:30px; max-width:90px; object-fit:contain; filter:grayscale(1) opacity(.75); }

/* MARQUEE NICHOS */
.cities-marquee{
  margin-top:30px; overflow:hidden;
  border-radius:999px;
  background:var(--surface);
  box-shadow:var(--neu-in-sm);
  padding:12px 0;
}
.cities-marquee-inner{
  display:flex; gap:22px; width:max-content;
  animation:marquee 18s linear infinite;
  font-family:var(--font-display); font-size:12px; font-weight:700;
  letter-spacing:.08em; color:var(--muted);
  padding-left:10px; white-space:nowrap;
}
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.cm-dot{ color:var(--accent); }

/* CTA final del landing */
.landing-bottom-cta{ margin-top:30px; }

/* ================= CARDS DE SELECCIÓN (servicios) ================= */
.cards-col{ display:flex; flex-direction:column; gap:16px; }
.card-srv{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; border:none; cursor:pointer; text-align:left;
  background:var(--surface);
  border-radius:var(--r-md);
  box-shadow:var(--neu-out-sm);
  padding:18px;
  transition:box-shadow .18s ease, transform .18s ease;
  position:relative;
}
.card-srv:active{ transform:scale(.985); }
.card-srv.selected{
  box-shadow:var(--neu-in);
}
.card-srv.selected .srv-num{ background:var(--primary); color:#fff; box-shadow:none; }
.card-srv:focus-visible{ outline:3px solid var(--primary); outline-offset:3px; }
.srv-left{ display:flex; align-items:center; gap:14px; min-width:0; }
.srv-num{
  width:46px; height:46px; flex-shrink:0;
  border-radius:var(--r-sm);
  background:var(--surface);
  box-shadow:var(--neu-in-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; line-height:1; overflow:hidden; text-align:center;
}
.srv-num.srv-num-sm{ font-size:14px; letter-spacing:-2px; }
.srv-text{ min-width:0; }
.srv-text strong{ display:block; font-size:15.5px; font-weight:700; letter-spacing:-.01em; }
.srv-text small{ display:block; margin-top:3px; font-size:12.5px; color:var(--muted); line-height:1.45; }
.srv-price{
  margin-top:7px; display:inline-block;
  font-family:var(--font-display); font-size:12.5px; font-weight:700;
  color:var(--primary);
  background:var(--surface);
  box-shadow:var(--neu-in-sm);
  border-radius:999px; padding:5px 12px;
}
.srv-price-old{ color:var(--muted-2); font-weight:400; font-size:11px; margin-right:2px; }
.srv-arrow{ color:var(--muted-2); font-size:18px; flex-shrink:0; }

/* --- multi-selección de servicios --- */
.srv-multi{ user-select:none; }
.srv-check{
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--neu-in-sm);
  color:transparent; font-weight:700; font-size:15px;
  transition:background .15s ease, color .15s ease;
}
.card-srv.selected .srv-check{ background:var(--primary); color:#fff; box-shadow:none; }
.srv-qty{ display:inline-flex; align-items:center; gap:9px; margin-top:9px; }
.srv-qty[hidden]{ display:none; }
.qb{
  width:31px; height:31px; border-radius:50%; border:none; cursor:pointer;
  background:var(--surface); box-shadow:var(--neu-out-sm);
  font-size:16px; font-weight:700; color:var(--primary); line-height:1;
}
.qb:active{ box-shadow:var(--neu-in-sm); }
.srv-qty .qv{ font-family:var(--font-display); font-size:14.5px; min-width:18px; text-align:center; }
.srv-qty i{ font-size:11px; color:var(--muted-2); font-style:normal; }
.step-continue{ position:sticky; bottom:12px; margin-top:18px; z-index:20; }
.step-continue .btn-cta{
  margin-top:0;
  box-shadow:7px 7px 16px var(--sh-dark), -7px -7px 16px var(--sh-light), 0 12px 28px rgba(30,41,56,.2);
}
.srv-badge{
  position:absolute; top:-9px; right:14px;
  font-family:var(--font-display); font-size:9.5px; font-weight:700; letter-spacing:.12em;
  background:var(--accent); color:#fff;
  border-radius:999px; padding:5px 11px;
  box-shadow:0 4px 10px rgba(255,33,87,.35);
}
.srv-badge.badge-save{ background:var(--success); box-shadow:0 4px 10px rgba(0,166,61,.3); }

/* ================= PILLS ================= */
.pills-col{ display:flex; flex-direction:column; gap:15px; }
.pill{
  display:flex; align-items:center; gap:14px;
  width:100%; border:none; cursor:pointer; text-align:left;
  background:var(--surface);
  border-radius:var(--r-md);
  box-shadow:var(--neu-out-sm);
  padding:17px 18px;
  transition:box-shadow .18s ease, transform .18s ease;
}
.pill:active{ transform:scale(.985); }
.pill.selected{ box-shadow:var(--neu-in); }
.pill:focus-visible{ outline:3px solid var(--primary); outline-offset:3px; }
.pill-icon{
  width:44px; height:44px; flex-shrink:0;
  border-radius:50%;
  background:var(--surface);
  box-shadow:var(--neu-in-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
}
.pill.selected .pill-icon{ background:var(--primary); box-shadow:none; }
.pill-text strong{ display:block; font-size:15px; font-weight:700; }
.pill-text small{ display:block; margin-top:3px; font-size:12.5px; color:var(--muted); line-height:1.45; }
.pill-note{
  margin-top:16px; font-size:12px; color:var(--muted-2); line-height:1.55; text-align:center;
}

/* ================= FORM ================= */
.form-sc{ padding-bottom:70px; }
.form-summary{
  background:var(--surface);
  border-radius:var(--r-md);
  box-shadow:var(--neu-in-sm);
  padding:16px 18px;
  margin-bottom:20px;
}
.sum-row{
  display:flex; justify-content:space-between; gap:12px;
  padding:7px 0; font-size:13.5px;
}
.sum-row + .sum-row{ border-top:1px solid var(--surface-3); }
.sum-k{ color:var(--muted); }
.sum-v{ font-weight:700; text-align:right; }
.sum-row.sum-total{ border-top:2px solid var(--surface-3); margin-top:4px; padding-top:11px; }
.sum-total .sum-k{ color:var(--text); font-weight:700; }
.sum-total .sum-v{ font-family:var(--font-display); color:var(--primary); font-size:15px; }

.form-fields{ display:flex; flex-direction:column; gap:7px; }
.form-fields label{
  font-family:var(--font-display); font-size:11px; font-weight:700;
  letter-spacing:.1em; color:var(--muted); text-transform:uppercase;
  margin:10px 2px 2px;
}
.form-fields input{
  width:100%; border:none;
  background:var(--surface);
  border-radius:var(--r-sm);
  box-shadow:var(--neu-in-sm);
  padding:16px 18px;
  font-family:var(--font-body); font-size:15.5px; color:var(--text);
}
.form-fields input::placeholder{ color:var(--muted-2); }
.form-fields input:focus{ outline:3px solid var(--primary); outline-offset:0; }
.btn-submit{ margin-top:26px; }
.form-legal{ margin-top:12px; font-size:11.5px; color:var(--muted-2); text-align:center; line-height:1.5; }

/* ================= PANTALLA FINAL · COTIZACIÓN + VALERIA ================= */
.final-sc{ padding-bottom:70px; }
.quote-card{
  background:var(--surface);
  border-radius:var(--r-lg);
  box-shadow:var(--neu-out);
  padding:22px 20px;
  margin-bottom:24px;
}
.quote-label{
  font-family:var(--font-display); font-size:10.5px; font-weight:700;
  letter-spacing:.18em; color:var(--accent); text-transform:uppercase;
  margin-bottom:12px; display:flex; align-items:center; gap:8px;
}
.quote-rows{ }
.quote-note{
  margin-top:14px; font-size:11.5px; color:var(--muted-2); line-height:1.55;
}

.creator-card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:var(--surface);
  border-radius:var(--r-lg);
  box-shadow:var(--neu-out);
  padding:26px 20px 24px;
  text-decoration:none; color:var(--text);
}
.cc-photo{
  position:relative; width:112px; height:112px; margin-bottom:14px;
  border-radius:50%;
  background:var(--surface);
  box-shadow:var(--neu-out-sm);
  padding:6px;
}
.cc-photo img{
  width:100%; height:100%; object-fit:cover; border-radius:50%; display:block;
}
.cc-fallback{
  width:100%; height:100%; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:42px; background:var(--surface-3);
}
.cc-online{
  position:absolute; right:8px; bottom:10px;
  width:18px; height:18px; border-radius:50%;
  background:var(--success); border:3px solid var(--surface);
  animation:dotPulse 1.8s ease-in-out infinite;
}
.cc-name{ font-family:var(--font-display); font-size:20px; font-weight:700; }
.cc-handle{ margin-top:4px; font-size:13px; color:var(--muted); }
.cc-handle b{ color:var(--accent); font-weight:700; }
.cc-wa{
  margin-top:18px; width:100%;
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(145deg, #2EE077, var(--wa));
  color:#fff; border-radius:var(--r-md);
  padding:17px 20px;
  font-family:var(--font-display); font-size:15px; font-weight:700; letter-spacing:.05em;
  box-shadow:6px 6px 14px var(--sh-dark), -6px -6px 14px var(--sh-light);
  animation:ctaPulse 1.8s ease-in-out infinite;
}
@keyframes ctaPulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.02);} }
.creator-note{ margin-top:16px; font-size:12px; color:var(--muted-2); text-align:center; line-height:1.55; }

/* ================= COOKIE BAR ================= */
.cookie-bar{
  position:fixed; left:50%; bottom:-120px; transform:translateX(-50%);
  width:calc(100% - 32px); max-width:488px; z-index:80;
  display:flex; align-items:center; gap:12px;
  background:var(--surface);
  border-radius:var(--r-md);
  box-shadow:var(--neu-out), 0 10px 30px rgba(30,41,56,.18);
  padding:14px 16px;
  transition:bottom .4s ease;
}
.cookie-bar.show{ bottom:16px; }
.cookie-bar p{ font-size:12px; color:var(--muted); line-height:1.4; flex:1; }
.cookie-ok{
  border:none; cursor:pointer;
  background:var(--primary); color:#fff;
  border-radius:999px; padding:10px 18px;
  font-family:var(--font-display); font-size:12px; font-weight:700;
}

/* ================= DESKTOP ================= */
@media(min-width:720px){
  body{
    background:
      radial-gradient(700px 500px at 85% -5%, rgba(0,102,102,.07), transparent 60%),
      radial-gradient(600px 420px at -5% 105%, rgba(255,33,87,.05), transparent 60%),
      var(--surface);
  }
  .app{
    max-width:560px;
    box-shadow:var(--neu-out);
    border-radius:var(--r-lg);
    margin:28px auto; min-height:calc(100vh - 56px);
    overflow:hidden;
    background:var(--surface);
  }
  .topbar{ border-radius:var(--r-lg) var(--r-lg) 0 0; }
}