/* ============ WillieTok — Tema simple y mobile-first (Baby Pink) ============ */
/* Reset mínimo */
*{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:#111;
  background:#f6f7fb;

  /* Sticky footer */
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column;
}

/* Contenedor global y ancho del contenido principal igual al buscador */
:root{
  --search-max: 820px;   /* mismo ancho que la barra del hero */
  --gallery-max: 620px;
  --photo-min: 220px;

  /* Paleta baby pink */
  --pink-50:  #fff1f7;
  --pink-200: #ffd6e9;
  --pink-400: #ff9ac2;
  --pink-500: #ff7fb2;
  --pink-600: #ff4d8d;  /* principal */
  --pink-700: #e63b79;  /* hover/dark */

  /* UI base */
  --ink:#0a0a0a; 
  --muted:#6b7280; 
  --border:#e5e7eb; 
  --panel:#ffffff;
  --panel-2:#f8f8f8;
  --ring:rgba(0,0,0,.10);
  --shadow: 0 8px 30px rgba(0,0,0,.06);
}

a{color:inherit;text-decoration:none}
.container{max-width:980px;margin:0 auto;padding:0 16px}

/* Header minimal */
header{
  position:sticky;top:0;z-index:10;
  background:#ffffffd9; backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--border);
}
.nav{height:56px;display:flex;align-items:center;gap:10px}
.brand{display:flex;align-items:center;font-weight:800;font-size:18px;text-decoration:none;color:#111}
.brand i{font-size:22px;margin-right:6px}

/* ============ HERO (Baby Pink) ============ */
.hero{
  color:#fff;
  padding:48px 0 36px;
  background:
    radial-gradient(1100px 380px at 50% -120px, rgba(255,223,237,.55) 0%, transparent 60%),
    linear-gradient(135deg, var(--pink-200) 0%, var(--pink-400) 48%, var(--pink-500) 85%, #ff6fa6 100%);
}
.hero h1{
  margin:0 0 10px;
  font-size:clamp(24px,4.6vw,36px);
  font-weight:800;
  text-align:center;
  letter-spacing:.2px;
}
.hero .sub{
  margin:0 auto 18px;
  max-width:680px;
  text-align:center;
  opacity:.95;
  font-size:14px;
}

/* Buscador en forma de pastilla */
.search{
  max-width:var(--search-max);
  margin:0 auto;
  background:rgba(255,255,255,.18);
  border:2px solid rgba(255,255,255,.70);
  box-shadow:0 18px 40px rgba(255,111,166,.25);
  border-radius:14px;
  display:flex;align-items:center;gap:10px;
  padding:8px;
}
.input{
  flex:1;
  height:48px;
  border:0;
  background:rgba(255,255,255,.90);
  color:#111;
  border-radius:10px;
  padding:0 14px;
  outline:none;
  font-size:16px; /* ⛔ evita zoom en iOS al enfocar */
}
.input::placeholder{color:#8086a3}
.btn{
  height:48px; padding:0 14px; border:0; border-radius:10px; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; font-weight:700; white-space:nowrap;
  font-size:16px; /* ⛔ evita zoom en iOS */
}
.btn i{font-size:18px}
.btn-paste{
  background:#fff; color: var(--pink-600);
  box-shadow:0 4px 10px rgba(255,77,141,.18);
}
.btn-cta{
  background: var(--pink-600); color:#fff;
  box-shadow: 0 10px 20px rgba(255,77,141,.35);
}
.btn-cta:hover{filter:brightness(.98)}
.btn:active{transform:translateY(1px)}

/* Badges pequeños bajo el buscador */
.tiny-badges{
  display:flex; gap:18px; justify-content:center; flex-wrap:wrap;
  margin:16px 0 0; font-size:13px; opacity:.95;
}
.tiny-badges .item{display:flex;align-items:center;gap:8px}
.tiny-badges i{font-size:18px;color:var(--pink-600)}

/* ============ MAIN ============ */
main.section{
  padding:28px 0 56px;
  flex:1; /* empuja footer abajo */
}
/* Ancho del contenido igual al buscador */
main .container{ max-width:var(--search-max); margin-left:auto; margin-right:auto; }

/* Si quieres una sola columna dentro de 820px (más limpio) */
.grid{display:grid; grid-template-columns:1fr; gap:24px}
.card{
  background:#fff; border:1px solid #e8e8ef; border-radius:16px; padding:18px;
  box-shadow:0 10px 26px rgba(17,17,17,.05);
}
.card h2{margin:0 0 6px;font-size:20px}
.muted{color:#6b7280;margin:0 0 12px}
.features{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.chip{
  background:#fff; border:1px solid #ececf4; border-radius:12px; padding:10px 12px; font-size:13px;
  display:flex; align-items:center; gap:8px
}
.chip i{color:var(--pink-600)}

/* Resultados */
.results{margin-top:16px}
.result-card{
  background:#fff; border:1px solid #ececf4; border-radius:16px; padding:16px; box-shadow:0 8px 22px rgba(0,0,0,.06);
  overflow:hidden;
}
.player{width:100%; aspect-ratio:16/9; border-radius:12px; background:#f2f2f8; border:1px solid #ececf4}
.thumb{width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#f4f5fb; border:1px solid #ececf4}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}

.meta .title{font-weight:800;margin:10px 0 6px;font-size:18px}
.meta .by{color:#737799;font-size:14px}
.cta-row{display:flex; gap:10px; flex-wrap:wrap}
.dl{
  display:inline-flex; align-items:center; gap:8px; height:40px;
  border:1px solid #e6e8f2; background:#fff; color:#111; border-radius:12px; padding:0 12px; cursor:pointer;
  font-size:14px;
}
.dl-primary{background:#111;color:#fff;border-color:#111}
.dl:hover{filter:brightness(.98)}

/* Skeleton */
.skeleton{position:relative;overflow:hidden;background:#eee;border-radius:12px}
.skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(0,0,0,.06),transparent);transform:translateX(-100%);animation:shimmer 1.2s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}

/* Galería de fotos — limpio y centrado */
.gallery{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(var(--photo-min),1fr)); gap:12px;
  max-width:var(--gallery-max); margin:8px auto 0;
}
.photo-card{display:flex;flex-direction:column;gap:8px}
.thumb.photo{aspect-ratio:4/3;border-radius:12px;overflow:hidden;border:1px solid #ececf4;background:#f4f5fb}
.thumb.photo img{width:100%;height:100%;object-fit:cover;display:block}
.dl.full{justify-content:center}

/* Footer */
footer{border-top:1px solid #ececf4;background:#fff;margin-top:auto}
.footer-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 16px}
.footer-links{display:flex;gap:14px;flex-wrap:wrap}
.footer-links a{color:#111;opacity:.85;text-decoration:none}
.footer-links a:hover{text-decoration:underline}
.footer-bottom{border-top:1px solid #ececf4;padding:16px 0;display:flex;justify-content:center}
.credit{display:inline-flex;align-items:center;gap:8px;border:1px solid #ececf4;padding:8px 12px;border-radius:12px;background:#fff}

/* Dialog (modal nativo) */
dialog.modal{width:min(720px,92vw);border:1px solid #e8e8ef;border-radius:14px;padding:0;box-shadow:0 20px 60px rgba(0,0,0,.22)}
dialog::backdrop{background:rgba(0,0,0,.35)}
.modal__head{padding:14px 16px;border-bottom:1px solid #ececf4;display:flex;align-items:center;justify-content:space-between}
.modal__title{font-size:18px;font-weight:800;margin:0}
.modal__body{padding:16px;color:#333;line-height:1.7}
.modal__foot{padding:14px 16px;border-top:1px solid #ececf4;display:flex;justify-content:flex-end}
.btn-ghost{background:#fff;border:1px solid #e6e8f2;border-radius:10px;padding:10px 12px;font-weight:600;cursor:pointer}
.close-x{border:none;background:transparent;font-size:22px;cursor:pointer;line-height:1}

/* ============ Mejora responsive ============ */
/* Compacta un poco en móviles */
@media (max-width:640px){
  .hero{padding:36px 0 22px}
  .search{padding:6px;border-radius:12px}
  .input{height:44px}
  .btn{height:44px}
  /* En móviles, asegura fuentes 16px para evitar zoom al enfocar */
  .input, .btn, input, button, select, textarea { font-size:16px }
}
/* Si la pantalla es muy estrecha, apila Paste/Download debajo del input */
@media (max-width:460px){
  .search{flex-wrap:wrap}
  .input{flex-basis:100%}
  .btn-paste,.btn-cta{flex:1;min-width:calc(50% - 4px)}
}
/* Galería: 1 columna en pantallas pequeñas */
@media (max-width:640px){
  :root{ --gallery-max: 100%; --photo-min: 160px }
}



/* ===== Contenido más ancho que el buscador ===== */
:root{
  /* El buscador sigue en ~820px (var(--search-max) en tu CSS) */
  /* Nuevo ancho para el contenido principal (ajústalo a gusto) */
  --content-max: 1120px;   /* prueba 1040–1200px */
}

/* El main usa el ancho grande, no el del buscador */
main .container{
  max-width: var(--content-max) !important;
  margin-left: auto;
  margin-right: auto;
}

/* 2 columnas, separadas y limpias (como “antes”) */
.grid{
  grid-template-columns: 1.1fr 1fr !important;
  gap: 40px !important;
}

/* La card izquierda se mantiene como tarjeta */
.grid .card{
  border-radius: 16px !important;
  margin: 0 !important;
}

/* La parte derecha (“How it works”) sin caja, solo texto */
.grid .card + .prose{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #333;
  line-height: 1.75;
}
.grid .card + .prose h3{
  margin: 0 0 10px;
  font-size: 28px;
  font-weight: 800;
  color: #111;
}
.grid .card + .prose p{ margin: 0 0 10px; }

/* En móvil, una columna para mejor lectura */
@media (max-width: 980px){
  .grid{
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* ==== Theme toggle (LIGHT) ==== */
.theme-btn{
  margin-left:auto;                /* empuja el botón a la derecha en .nav */
  height:40px;
  padding:0 14px;
  border:1px solid #e6e8f2;
  background:#ffffff;
  color:#111;
  border-radius:9999px;            /* pill */
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:14px;
  line-height:1;
  box-shadow:0 6px 16px rgba(255,77,141,.18);
  transition:box-shadow .18s ease, transform .12s ease, filter .12s ease;
}
.theme-btn i, .theme-btn__icon{font-size:18px; line-height:1}
.theme-btn:hover{ transform:translateY(-1px); filter:brightness(.98) }
.theme-btn:active{ transform:translateY(0) }
.theme-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(255,77,141,.25), 0 6px 16px rgba(255,77,141,.18);
}
@media (max-width:640px){
  .theme-btn{ height:36px; padding:0 12px; font-size:13px }
}