/* Ficha ZelvIA 2.0 — DESIGN.md §10 bis, maestras docs/maestras/zelvia-ficha-suno-v4.html
 * y zelvia-ficha-quillbot-v2.html. Tokens canónicos en zelvia-tokens.css (§2, §4 bis).
 * Clases con prefijo zv-ficha-: propiedad exclusiva de tool.html, sin colisiones
 * con otras superficies (DESIGN.md §12: evitar nombres cortos y genéricos).
 */

body.zv-ficha {
  margin: 0;
  min-width: 0;
  background: var(--zv-color-paper-reading);
  color: var(--zv-reading-text);
  font-family: var(--zv-font-ui);
  font-weight: var(--zv-font-weight-regular);
  cursor: auto;
}

body.zv-ficha::before,
.zv-ficha #cv,
.zv-ficha #cglow,
.zv-ficha .cur,
.zv-ficha .cur-ring,
.zv-ficha .hero-lights,
.zv-ficha canvas:not([data-essential]) {
  display: none !important;
}

.zv-ficha .page,
.zv-ficha .page button,
.zv-ficha .page input,
.zv-ficha .page textarea,
.zv-ficha .page select,
.zv-ficha .page * {
  font-family: var(--zv-font-ui);
}

.zv-ficha-page :focus-visible { outline: 2px solid var(--zv-color-teal-text); outline-offset: 3px; border-radius: 6px; }
.zv-ficha-page a { color: inherit; }
.zv-ficha-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* ── Cabecera (DESIGN.md §10 bis · 1) ─────────────────────────────────────── */
.zv-ficha-hero { padding: calc(76px + var(--zv-space-6)) 0 var(--zv-space-6); }
.zv-ficha-hero__split { display: flex; flex-wrap: wrap; gap: var(--zv-space-12) var(--zv-space-8); align-items: flex-end; justify-content: space-between; }
.zv-ficha-hero__id { flex: 1 1 480px; min-width: 0; }
.zv-ficha-hero__name { display: flex; align-items: center; gap: var(--zv-space-4); }
.zv-ficha-logo { width: 76px; height: 76px; border-radius: var(--zv-radius-panel); }
.zv-ficha-hero__name h1 {
  margin: 0; color: var(--zv-color-ink); font-family: var(--zv-font-display);
  font-weight: var(--zv-font-weight-bold); font-size: 46px; line-height: 1;
}
.zv-ficha-hero__cat { margin: var(--zv-space-1) 0 0; color: var(--zv-color-muted); font-size: 15px; }
.zv-ficha-hero__desc { max-width: 46ch; margin: var(--zv-space-6) 0 0; color: var(--zv-color-ink-soft); font-size: 20px; line-height: 1.45; }
.zv-ficha-hero__side { display: grid; justify-items: end; gap: var(--zv-space-4); flex: 0 0 auto; }

.zv-ficha-tags { display: flex; flex-wrap: wrap; gap: var(--zv-space-2); justify-content: flex-end; }
.zv-ficha-tag { font-size: 14.5px; font-weight: var(--zv-font-weight-medium); color: var(--zv-color-ink-soft); background: var(--zv-color-bg-panel); border-radius: var(--zv-radius-row); padding: 5px 11px; }
.zv-ficha-tagnote { flex-basis: 100%; margin: 0; color: var(--zv-color-muted); font-size: 13px; line-height: 1.35; text-align: right; }
.zv-ficha-tag--free { color: var(--zv-color-teal-text); background: var(--zv-color-teal-soft); }
.zv-ficha-tag--paid { color: var(--zv-color-amber-text); background: var(--zv-color-amber-bg); }

.zv-ficha-hero__actions { display: flex; align-items: center; gap: var(--zv-space-6); flex-wrap: wrap; }

/* ── Botones (DESIGN.md §7) ────────────────────────────────────────────────── */
.zv-ficha-btn {
  display: inline-flex; align-items: center; gap: var(--zv-space-2);
  height: var(--zv-height-lg); padding: 0 var(--zv-space-6);
  border-radius: var(--zv-radius-btn); font-weight: var(--zv-font-weight-semibold);
  font-size: 16px; text-decoration: none; border: 0; cursor: pointer;
  transition: transform var(--zv-motion-micro-duration) var(--zv-motion-enter-easing);
}
.zv-ficha-btn--primary,
.zv-ficha-page a.zv-ficha-btn--primary { background: var(--zv-color-navy); color: var(--zv-color-on-navy, #F2F5FA); box-shadow: var(--zv-shadow-navy); }
.zv-ficha-btn--primary:hover { transform: translateY(-1px); }
.zv-ficha-btn--primary:active { transform: translateY(1px); }
.zv-ficha-btn--secondary {
  height: var(--zv-height-md); padding: 8px var(--zv-space-4); font-size: 15px;
  color: var(--zv-color-ink); background: var(--zv-color-surface);
  border: 1px solid var(--zv-color-line-strong); box-shadow: var(--zv-shadow-e1);
}
.zv-ficha-btn--secondary:hover { transform: translateY(-1px); }
.zv-ficha-btn--sm { height: 44px; padding: 8px var(--zv-space-4); font-size: 15px; width: 100%; justify-content: center; margin-top: auto; }
.zv-ficha-lnk {
  position: relative; display: inline-flex; align-items: center; gap: var(--zv-space-2);
  color: var(--zv-color-ink); font-weight: var(--zv-font-weight-semibold); font-size: 15px;
  text-decoration: none; padding: 4px 0;
}
.zv-ficha-lnk::after { content: ""; position: absolute; left: 0; right: 24px; bottom: 0; height: 2px; background: var(--zv-color-teal-link); transform-origin: left; transform: scaleX(.35); transition: transform 260ms var(--zv-motion-enter-easing); }
.zv-ficha-lnk:hover::after { transform: scaleX(1); }
.zv-ficha-lnk svg { transition: transform 200ms var(--zv-motion-enter-easing); }
.zv-ficha-lnk:hover svg { transform: translateX(4px); }

/* ── Ritmo general de bloques ─────────────────────────────────────────────── */
.zv-ficha-section { padding: var(--zv-space-6) 0 var(--zv-space-12); }
.zv-ficha-h2 { font-family: var(--zv-font-display); font-weight: var(--zv-font-weight-bold); font-size: 28px; letter-spacing: -.015em; margin: 0 0 var(--zv-space-4); color: var(--zv-color-ink); }
.zv-ficha-h2--small { font-size: 22px; margin-bottom: var(--zv-space-4); }
.zv-ficha-h2--alts { margin-top: var(--zv-space-8); }

/* ── Veredicto ZelvIA (robot + sello, una sola vez — DESIGN.md §14) ───────── */
.zv-ficha-verdict__grid {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--zv-space-8); align-items: center;
  padding: var(--zv-space-6) var(--zv-space-6);
  border-radius: var(--zv-radius-panel);
  background: var(--zv-color-surface); border: 1px solid var(--zv-color-line);
  box-shadow: var(--zv-shadow-e3);
}
.zv-ficha-verdict__grid--solo { grid-template-columns: 1fr; }
.zv-ficha-verdict__text { position: relative; padding-left: 96px; min-height: 96px; }
.zv-ficha-verdict__bot { position: absolute; left: -4px; top: -6px; height: 100px; width: auto; filter: drop-shadow(0 10px 8px rgba(40,32,26,.22)); }
.zv-ficha-verdict__text h2 { margin: 0 0 6px; font-family: var(--zv-font-display); font-weight: var(--zv-font-weight-semibold); font-size: 19px; color: var(--zv-color-ink); }
.zv-ficha-verdict__text p { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--zv-color-ink-soft); }
.zv-ficha-verdict__punch { margin-top: var(--zv-space-2) !important; font-weight: var(--zv-font-weight-semibold); color: var(--zv-color-ink) !important; }
zelvia-sello { justify-self: end; }

/* ── Aviso de cambio + «Es nuestra elección para…» ─────────────────────────── */
.zv-ficha-alerts { display: grid; gap: var(--zv-space-3); }
.zv-ficha-alert,
.zv-ficha-pickfor {
  display: flex; align-items: center; gap: var(--zv-space-4);
  padding: var(--zv-space-4) var(--zv-space-6); border-radius: var(--zv-radius-panel);
  background: var(--zv-color-surface); border: 1px solid var(--zv-color-line);
  text-decoration: none; color: var(--zv-color-ink);
  transition: transform var(--zv-motion-micro-duration) var(--zv-motion-enter-easing);
}
.zv-ficha-alert { background: var(--zv-color-amber-bg); border-color: #EBCB9C; color: #3A2A14; }
.zv-ficha-alert:hover,
.zv-ficha-pickfor:hover { transform: translateY(-1px); }
.zv-ficha-alert p { margin: 0; flex: 1; font-size: 16px; }
.zv-ficha-alert strong { color: var(--zv-color-amber-text); }
.zv-ficha-alert__dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #C77A1E; box-shadow: 0 0 0 5px rgba(199,122,30,.18); }
.zv-ficha-pickfor { box-shadow: var(--zv-shadow-e2); border-color: #9FD3CB; box-shadow: inset 0 0 0 1px #9FD3CB, var(--zv-shadow-e2); }
.zv-ficha-pickfor span:nth-child(2) { flex: 1; font-size: 16px; }
.zv-ficha-pickfor__dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--zv-color-teal-graphic); box-shadow: 0 0 0 5px rgba(0,169,157,.15); }
.zv-ficha-pickfor__cta { display: inline-flex; align-items: center; gap: var(--zv-space-2); font-weight: var(--zv-font-weight-semibold); font-size: 15px; flex: none !important; }

/* ── Lo mejor / lo peor ────────────────────────────────────────────────────── */
.zv-ficha-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--zv-space-4); align-items: stretch; }
.zv-ficha-proscons__col {
  padding: var(--zv-space-6); border-radius: var(--zv-radius-field);
  background: var(--zv-color-surface); border: 1px solid var(--zv-color-line);
  box-shadow: var(--zv-shadow-e2);
}
.zv-ficha-proscons__col--good { box-shadow: inset 0 3px 0 var(--zv-color-teal-graphic), var(--zv-shadow-e2); }
.zv-ficha-proscons__col--bad { box-shadow: inset 0 3px 0 var(--zv-color-danger), var(--zv-shadow-e2); }
.zv-ficha-proscons__col h2 { font-size: 20px; margin: 0 0 var(--zv-space-3); font-family: var(--zv-font-display); }
.zv-ficha-proscons__col ul { margin: 0; padding-left: 20px; font-size: 16px; line-height: 1.6; color: var(--zv-color-ink-soft); }

/* ── Planes (componente «Tarjeta de plan» — DESIGN.md §7) ─────────────────── */
.zv-ficha-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--zv-space-4); align-items: stretch; }
.zv-ficha-plan {
  display: flex; flex-direction: column; padding: var(--zv-space-6);
  border-radius: var(--zv-radius-field); background: var(--zv-color-surface);
  border: 1px solid var(--zv-color-line); box-shadow: var(--zv-shadow-e2);
}
.zv-ficha-plan h3 { margin: 0; font-size: 18px; font-family: var(--zv-font-display); }
/* Etiqueta neutra: describe lo que dice Planes.tag (p.ej. "Más popular"), nunca una elección
   editorial de ZelvIA — por eso no lleva el tratamiento teal reservado a esa afirmación. */
.zv-ficha-plan__tag { display: inline-block; margin-left: 6px; vertical-align: 2px; font-size: 12px; font-weight: var(--zv-font-weight-semibold); color: var(--zv-color-muted); background: var(--zv-color-bg-panel); border-radius: 7px; padding: 3px 9px; }
.zv-ficha-plan__price { font-family: var(--zv-font-display); font-size: 28px; margin: var(--zv-space-2) 0 var(--zv-space-3); color: var(--zv-color-ink); }
.zv-ficha-plan__price small { font-family: var(--zv-font-ui); font-size: 14px; color: var(--zv-color-muted); font-weight: var(--zv-font-weight-medium); }
.zv-ficha-plan__feats { margin: 0 0 var(--zv-space-4); padding-left: 18px; font-size: 15px; line-height: 1.6; color: var(--zv-color-ink-soft); }
.zv-ficha-plans__note { margin: var(--zv-space-4) 0 0; font-size: 14px; color: var(--zv-color-muted); }

/* ── «X, en detalle» ──────────────────────────────────────────────────────── */
.zv-ficha-detail { max-width: 72ch; }
.zv-ficha-detail p { margin: 0 0 var(--zv-space-4); font-size: 17px; line-height: 1.6; color: var(--zv-color-ink-soft); }
.zv-ficha-detail p:last-child { margin-bottom: 0; }

/* ── Para quién sí / no ───────────────────────────────────────────────────── */
.zv-ficha-who {
  display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--zv-radius-field);
  background: var(--zv-color-surface); border: 1px solid var(--zv-color-line);
  box-shadow: var(--zv-shadow-e2); overflow: hidden;
}
.zv-ficha-who__col { padding: var(--zv-space-6); }
.zv-ficha-who__col--yes { background: linear-gradient(#F3FAF8, var(--zv-color-surface)); }
.zv-ficha-who__col--no { background: linear-gradient(#FBF1F1, var(--zv-color-surface)); border-left: 1px solid var(--zv-color-line); }
.zv-ficha-who__col h2 { display: flex; align-items: center; gap: var(--zv-space-3); font-size: 19px; margin: 0 0 var(--zv-space-3); font-family: var(--zv-font-display); }
.zv-ficha-who__col p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--zv-color-ink-soft); }
.zv-ficha-who__mark { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: var(--zv-font-weight-bold); flex: none; }
.zv-ficha-who__col--yes .zv-ficha-who__mark { background: var(--zv-color-teal-soft); color: var(--zv-color-teal-text); }
.zv-ficha-who__col--no .zv-ficha-who__mark { background: var(--zv-color-danger-soft); color: var(--zv-color-danger); }

/* ── FAQ + Datos prácticos + Si no te encaja ───────────────────────────────── */
.zv-ficha-faqgrid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--zv-space-8); align-items: start; }
.zv-ficha-faq { margin-bottom: var(--zv-space-2); border-radius: var(--zv-radius-btn); background: var(--zv-color-surface); border: 1px solid var(--zv-color-line); box-shadow: var(--zv-shadow-e1); }
.zv-ficha-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--zv-space-3); padding: var(--zv-space-4); cursor: pointer; font-weight: var(--zv-font-weight-semibold); color: var(--zv-color-ink); }
.zv-ficha-faq summary::-webkit-details-marker { display: none; }
.zv-ficha-faq[open] summary svg { transform: rotate(180deg); }
.zv-ficha-faq summary svg { transition: transform 200ms; flex: none; }
.zv-ficha-faq p { margin: 0; padding: 0 var(--zv-space-4) var(--zv-space-4); font-size: 15.5px; line-height: 1.55; color: var(--zv-color-ink-soft); }

.zv-ficha-facts { margin: 0 0 var(--zv-space-6); padding: 6px var(--zv-space-4); border-radius: var(--zv-radius-field); background: var(--zv-color-surface); border: 1px solid var(--zv-color-line); box-shadow: var(--zv-shadow-e2); }
.zv-ficha-facts > div { display: flex; justify-content: space-between; align-items: center; gap: var(--zv-space-4); padding: var(--zv-space-3) 0; border-bottom: 1px solid var(--zv-color-line); font-size: 15px; }
.zv-ficha-facts > div:last-child { border-bottom: 0; }
.zv-ficha-facts dt { color: var(--zv-color-muted); }
.zv-ficha-facts dd { margin: 0; font-weight: var(--zv-font-weight-semibold); color: var(--zv-color-ink); display: flex; align-items: center; gap: var(--zv-space-2); text-align: right; }
.zv-ficha-fact__mark { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: var(--zv-font-weight-bold); flex: none; }
.zv-ficha-fact--ok .zv-ficha-fact__mark { background: var(--zv-color-teal-soft); color: var(--zv-color-teal-text); }
.zv-ficha-fact--ko .zv-ficha-fact__mark { background: var(--zv-color-danger-soft); color: var(--zv-color-danger); }
.zv-ficha-fact--warn .zv-ficha-fact__mark { background: var(--zv-color-amber-bg); color: var(--zv-color-amber-text); }
.zv-ficha-fact--unknown .zv-ficha-fact__mark { background: var(--zv-color-bg-panel); color: var(--zv-color-muted); }

.zv-ficha-altlist { display: flex; flex-wrap: wrap; gap: var(--zv-space-2); }
.zv-ficha-fchip {
  display: inline-flex; align-items: center; height: 38px; padding: 0 var(--zv-space-4);
  border-radius: var(--zv-radius-btn); background: var(--zv-color-surface); border: 1px solid var(--zv-color-line);
  text-decoration: none; color: var(--zv-color-ink); font-size: 14.5px; font-weight: var(--zv-font-weight-medium);
  box-shadow: var(--zv-shadow-e1); transition: transform 160ms var(--zv-motion-enter-easing);
}
.zv-ficha-fchip:hover { transform: translateY(-1px); }
.zv-ficha-fchip { gap: var(--zv-space-2); }
.zv-ficha-fchip:has(.zv-ficha-fchip__logo) { padding-left: 6px; }
.zv-ficha-fchip__logo { width: 26px; height: 26px; border-radius: 50%; }
.zv-ficha-fact__check { display: block; }
.zv-ficha-stores { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--zv-space-3); }
.zv-ficha-store { display: inline-flex; align-items: center; gap: 6px; color: var(--zv-color-ink); text-decoration: none; }
.zv-ficha-store:hover span { text-decoration: underline; text-underline-offset: 3px; }
.zv-ficha-store__icon { flex: none; }
.zv-ficha-fchip--plain { border-style: dashed; background: var(--zv-color-bg-panel); color: var(--zv-color-muted); box-shadow: none; }

/* ── Móvil (≤860 px) ──────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .zv-ficha-hero { padding: calc(64px + var(--zv-space-4)) 0 var(--zv-space-4); }
  .zv-ficha-hero__split { flex-direction: column; align-items: stretch; gap: var(--zv-space-4); }
  .zv-ficha-hero__side { justify-items: start; }
  .zv-ficha-hero__name h1 { font-size: 32px; }
  .zv-ficha-hero__desc { font-size: 17px; max-width: none; }
  .zv-ficha-tags { justify-content: flex-start; }
  .zv-ficha-tagnote { text-align: left; }

  .zv-ficha-verdict__grid { grid-template-columns: 1fr; padding: var(--zv-space-4); }
  zelvia-sello { justify-self: start; }

  .zv-ficha-proscons,
  .zv-ficha-plans,
  .zv-ficha-who,
  .zv-ficha-faqgrid { grid-template-columns: 1fr; }
  .zv-ficha-who__col--no { border-left: 0; border-top: 1px solid var(--zv-color-line); }

  .zv-ficha-h2 { font-size: 24px; }
}