/* ============================================================
   COMPONENTS — bloques reutilizables para TODAS las páginas
   (Hero, Insight, Framework, GoodBad, Examples, Checklist,
   Downloads, Module cards, botones, placeholders visuales)
   ============================================================ */

/* ---------- Placeholder visual (cuando no hay imagen en Sheets) ---------- */
.ph-visual{
  background:
    radial-gradient(120% 140% at 15% 10%, rgba(56,99,69,.10), transparent 55%),
    radial-gradient(120% 140% at 85% 90%, rgba(185,151,91,.14), transparent 55%),
    linear-gradient(135deg, #F4F3EF 0%, #EDEBE5 100%);
  position:relative;
  overflow:hidden;
}
.ph-visual::after{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(20,21,26,.05) 1px, transparent 1.5px);
  background-size: 18px 18px;
  opacity:.5;
}
.ph-visual img{
  position:relative; z-index:1; width:100%; height:100%; object-fit:cover;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-text); font-weight:600; font-size:var(--fs-body-s);
  padding:12px 22px; border-radius:999px; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.btn-primary{background:var(--action); color:#fff;}
.btn-primary:hover{background:var(--action-hover); transform:translateY(-1px); box-shadow:var(--shadow-soft);}
.btn-ghost{background:transparent; color:var(--ink-900); border-color:var(--border);}
.btn-ghost:hover{border-color:var(--ink-300);}

/* ---------- HERO ---------- */
.hero{
  padding:var(--space-9) 0 var(--space-8);
}
.hero-kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--action); margin-bottom:var(--space-5);
}
.hero-kicker::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--action);}
.hero-headline{
  font-family:var(--font-display); font-weight:700;
  font-size:var(--fs-display-xl); line-height:var(--lh-tight);
  color:var(--ink-900); letter-spacing:-.02em; margin:0 0 var(--space-5);
  max-width:16ch;
}
.hero-subtext{
  font-size:var(--fs-body-l); color:var(--ink-500); max-width:46ch;
  line-height:var(--lh-normal); margin:0 0 var(--space-7);
}
.hero-visual{
  width:100%; height:min(58vh, 560px); border-radius:var(--radius-l);
  margin-top:var(--space-7);
}

/* ---------- INSIGHT ---------- */
.insight{
  padding:var(--space-9) 0;
  border-top:1px solid var(--border);
  display:grid; grid-template-columns:200px 1fr; gap:var(--space-8);
}
.insight-label{
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-300);
}
.insight-text{
  font-family:var(--font-display); font-weight:500;
  font-size:var(--fs-display-m); line-height:var(--lh-snug); color:var(--ink-900);
  max-width:22ch;
}

/* ---------- FRAMEWORK ---------- */
.framework{
  padding:var(--space-9) 0;
  border-top:1px solid var(--border);
}
.framework-head{max-width:640px; margin-bottom:var(--space-7);}
.framework-title{
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-display-m);
  color:var(--ink-900); margin:0 0 var(--space-3);
}
.framework-text{font-size:var(--fs-body-l); color:var(--ink-500); line-height:var(--lh-normal); margin:0;}
.framework-visual{
  width:100%; height:380px; border-radius:var(--radius-l);
}

/* ---------- GOOD / BAD ---------- */
.goodbad{
  padding:var(--space-9) 0; border-top:1px solid var(--border);
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6);
}
.gb-col-title{
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:var(--space-5); display:flex; align-items:center; gap:8px;
}
.gb-col-title.is-good{color:var(--action);}
.gb-col-title.is-bad{color:var(--brand-guinda);}
.gb-col-title .mark{
  width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; color:#fff;
}
.gb-col-title.is-good .mark{background:var(--action);}
.gb-col-title.is-bad .mark{background:var(--brand-guinda);}
.gb-item{
  display:grid; grid-template-columns:64px 1fr; gap:14px;
  padding:var(--space-4) 0; border-bottom:1px solid var(--border);
}
.gb-item:last-child{border-bottom:none;}
.gb-thumb{width:64px; height:64px; border-radius:var(--radius-s);}
.gb-item h4{margin:0 0 4px; font-size:var(--fs-body); font-weight:600; color:var(--ink-900);}
.gb-item p{margin:0; font-size:var(--fs-body-s); color:var(--ink-500); line-height:var(--lh-normal);}

/* ---------- EXAMPLES (galería) ---------- */
.examples{padding:var(--space-9) 0; border-top:1px solid var(--border);}
.examples-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-5); margin-top:var(--space-6);
}
.example-card{
  border-radius:var(--radius-m); overflow:hidden; background:var(--surface-1);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.example-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-card-hover);}
.example-media{width:100%; height:200px;}
.example-body{padding:var(--space-4);}
.example-body h4{margin:0 0 4px; font-size:var(--fs-body); font-weight:600;}
.example-body p{margin:0; font-size:var(--fs-body-s); color:var(--ink-500);}

.moodboard-label{
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-300); margin:var(--space-6) 0 var(--space-3);
}

/* ---------- PROMPTS IA ---------- */
.prompts-ai{padding:var(--space-9) 0; border-top:1px solid var(--border);}
.prompts-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-5); margin-top:var(--space-6);}
.prompt-card{
  border:1px solid var(--border); border-radius:var(--radius-m); padding:var(--space-5);
  background:var(--surface-1); display:flex; flex-direction:column; gap:10px;
}
.prompt-tool{
  align-self:flex-start; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--brand-blue); background:#E7F3FB; padding:3px 9px; border-radius:20px;
}
.prompt-card h4{margin:0; font-size:var(--fs-body); font-weight:600; color:var(--ink-900);}
.prompt-text{
  font-family:var(--font-mono); font-size:11.5px; color:var(--ink-700); background:var(--surface-0);
  border:1px solid var(--border); border-radius:var(--radius-s); padding:12px; margin:0;
  white-space:pre-wrap; line-height:1.5; max-height:160px; overflow-y:auto;
}
.prompt-copy{align-self:flex-start; padding:8px 16px; font-size:12px;}

/* ---------- CHECKLIST ---------- */
.checklist-block{padding:var(--space-9) 0; border-top:1px solid var(--border);}
.checklist-list{max-width:640px; margin-top:var(--space-6); display:flex; flex-direction:column; gap:2px;}
.checklist-row{
  display:flex; align-items:flex-start; gap:12px; padding:14px 4px; border-bottom:1px solid var(--border);
  font-size:var(--fs-body); color:var(--ink-700);
}
.checklist-row .box{
  width:18px; height:18px; border-radius:6px; border:1.5px solid var(--ink-300); flex-shrink:0; margin-top:2px;
}

/* ---------- DOWNLOADS ---------- */
.downloads{padding:var(--space-9) 0 var(--space-10); border-top:1px solid var(--border);}
.downloads-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-4); margin-top:var(--space-6);}
.download-card{
  display:flex; align-items:center; gap:14px;
  padding:var(--space-4) var(--space-5); border:1px solid var(--border); border-radius:var(--radius-m);
  text-decoration:none; color:var(--ink-900);
  transition:border-color .18s var(--ease), transform .18s var(--ease);
}
.download-card:hover{border-color:var(--action); transform:translateY(-2px);}
.download-icon{
  width:38px; height:38px; border-radius:var(--radius-s); background:var(--action-tint); color:var(--action);
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; flex-shrink:0;
}
.download-card h4{margin:0 0 2px; font-size:var(--fs-body-s); font-weight:600;}
.download-card span{font-size:11.5px; color:var(--ink-300); text-transform:uppercase; letter-spacing:.04em;}

@media (max-width: 900px){
  .insight{grid-template-columns:1fr; gap:var(--space-4);}
  .goodbad{grid-template-columns:1fr;}
  .examples-grid{grid-template-columns:1fr 1fr;}
  .downloads-grid{grid-template-columns:1fr;}
  .prompts-grid{grid-template-columns:1fr;}
}
@media (max-width: 600px){
  .examples-grid{grid-template-columns:1fr;}
}

/* ---------- MODAL (conectar Google Sheet) ---------- */
.modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(20,21,26,.45);
  align-items:center; justify-content:center; z-index:100; backdrop-filter:blur(2px);
}
.modal-overlay.show{display:flex;}
.modal{
  background:var(--surface-0); border-radius:var(--radius-l); padding:var(--space-6);
  width:460px; max-width:90vw; box-shadow:var(--shadow-card-hover);
}
.modal h3{margin:0 0 var(--space-3); font-family:var(--font-display); color:var(--ink-900);}
.modal p{font-size:var(--fs-body-s); color:var(--ink-500); line-height:var(--lh-normal);}
.modal code{background:var(--surface-2); padding:1px 5px; border-radius:4px; font-size:11px;}
.modal input{
  width:100%; padding:11px 14px; border:1px solid var(--border); border-radius:var(--radius-s);
  font-size:var(--fs-body-s); margin:var(--space-4) 0 var(--space-5); font-family:var(--font-text);
}
.modal-actions{display:flex; gap:10px;}
.modal-actions .btn{flex:1; justify-content:center;}

.assist-status{
  display:flex; align-items:center; gap:8px; margin-bottom:var(--space-4);
  font-size:12.5px; font-weight:600; color:var(--ink-500);
}
.assist-dot{width:8px; height:8px; border-radius:50%; background:var(--brand-warmgray); flex-shrink:0;}
.assist-dot.is-connecting{background:var(--brand-amber); animation:pulse 1.1s ease-in-out infinite;}
.assist-dot.is-connected{background:var(--action);}
.assist-dot.is-error{background:var(--brand-guinda);}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.35;}}
.assist-message{
  font-size:12px; min-height:16px; margin:-8px 0 var(--space-4); line-height:1.5;
}
.assist-message.is-error{color:var(--brand-guinda);}
.assist-message.is-ok{color:var(--action);}

/* v5 — designer direction modules */
.hero-headline,.framework-title,.insight-text{font-weight:300!important;letter-spacing:-.035em}.hero-headline{font-size:clamp(3.2rem,7vw,7rem)!important}.section-eyebrow,.micro-label{font-size:10px;letter-spacing:.14em;font-weight:600;color:var(--action);text-transform:uppercase}.system-block{padding:var(--space-9) 0;border-top:1px solid var(--border)}
.color-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.color-card{border:1px solid var(--border);border-radius:18px;overflow:hidden;background:#fff;transition:transform .16s var(--ease),box-shadow .16s var(--ease)}.color-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft)}.color-swatch{height:150px}.color-body{padding:20px}.color-name{font-size:18px;font-weight:500}.hex-copy{border:0;background:var(--surface-2);border-radius:999px;padding:6px 10px;margin:9px 0;font-family:var(--font-mono);cursor:pointer}.color-rgb{font-size:12px;color:var(--ink-500);margin-bottom:18px}.color-body p{font-size:13px;color:var(--ink-700);margin:4px 0 14px;line-height:1.45}
.spec-table{border-top:1px solid var(--border)}.spec-row{display:grid;grid-template-columns:1fr 2fr .7fr 1.3fr;gap:18px;padding:18px 0;border-bottom:1px solid var(--border);align-items:start;font-size:13px}.spec-head{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-300)}.spec-row code{font-size:12px;color:var(--action)}
.photo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.photo-card{border:1px solid var(--border);border-radius:20px;overflow:hidden;background:#fff}.photo-placeholder{height:260px;background:linear-gradient(145deg,#eef2ed,#d8e3db 55%,#c7ae7a);display:flex;align-items:flex-end;padding:20px;color:#fff;font-size:28px;font-weight:300}.photo-body{padding:22px}.photo-body h4{font-size:20px;font-weight:400;margin:0 0 18px}.photo-body dl{display:grid;grid-template-columns:90px 1fr;gap:8px;font-size:12px}.photo-body dt{font-weight:600;color:var(--ink-500)}.photo-body dd{margin:0;color:var(--ink-700)}details{margin-top:16px;border-top:1px solid var(--border);padding-top:12px}summary{cursor:pointer;font-size:12px;color:var(--action)}details p{font-size:12px;line-height:1.5;color:var(--ink-500)}
.approval-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.approval-step{display:flex;gap:14px;padding:20px;border:1px solid var(--border);border-radius:16px;background:var(--surface-0)}.step-number{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--action);color:#fff;font-size:12px;flex:0 0 auto}.approval-step h4{font-weight:500;margin:4px 0 8px}.approval-step p{font-size:13px;margin:0 0 8px;line-height:1.4}.approval-step span{font-size:11px;color:var(--ink-500)}
@media(max-width:900px){.color-grid{grid-template-columns:repeat(2,1fr)}.photo-grid,.approval-flow{grid-template-columns:1fr}.spec-row{grid-template-columns:1fr}.spec-head{display:none}}@media(max-width:600px){.color-grid{grid-template-columns:1fr}}