/* PyMEOS · leadmagnet.css · 2026-05-25
   SSoT visual de los lead magnets (auditorías) y comparativas por vertical.
   Brand kit: Fraunces 900 + DM Sans 300 + ink #1d1d1f + accent #0066cc + cyan #00B4D8.
   Reglas vigentes: cero glassmorphism · cero gradientes púrpura · respeta reduced-motion.
*/
:root {
  --ink: #1d1d1f;
  --ink-2: #3a3a3e;
  --ink-3: #86868b;
  --paper: #f9f9f9;
  --line: #d2d2d7;
  --accent: #0066cc;
  --cyan: #00B4D8;
  --measure: 720px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { background: var(--paper); color: var(--ink); font-family: 'DM Sans', -apple-system, sans-serif; font-weight: 300; line-height: 1.55; -webkit-font-smoothing: antialiased; }

/* ─── 3D ambient background · SVG geométrico perspective ─── */
.amb-3d {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  perspective: 1400px; perspective-origin: 50% 30%;
}
.amb-3d svg {
  position: absolute; left: 50%; top: 50%;
  width: clamp(900px, 110vw, 1600px);
  height: clamp(900px, 110vw, 1600px);
  transform: translate(-50%, -50%) rotateX(58deg) rotateZ(0deg);
  transform-origin: 50% 50%;
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .amb-3d svg { animation: ambRot 90s linear infinite; }
}
@keyframes ambRot {
  0%   { transform: translate(-50%, -50%) rotateX(58deg) rotateZ(0deg); }
  100% { transform: translate(-50%, -50%) rotateX(58deg) rotateZ(360deg); }
}
.amb-3d .ring  { fill: none; stroke: #1d1d1f; stroke-width: 0.6; opacity: 0.10; }
.amb-3d .ring2 { fill: none; stroke: #0066cc; stroke-width: 0.5; opacity: 0.14; }
.amb-3d .ring3 { fill: none; stroke: #00B4D8; stroke-width: 0.8; opacity: 0.16; }
.amb-3d .dot   { fill: #1d1d1f; opacity: 0.18; }
.amb-3d .dotC  { fill: #00B4D8; opacity: 0.22; }
.amb-3d .axis  { stroke: #1d1d1f; stroke-width: 0.4; opacity: 0.08; }
@media (max-width: 720px) { .amb-3d svg { opacity: 0.7; } }
@media (prefers-reduced-motion: reduce) { .amb-3d { display: none; } }

.page { position: relative; z-index: 1; max-width: var(--measure); margin: 0 auto; padding: clamp(48px, 8vw, 96px) clamp(24px, 5vw, 48px); }

/* ─── Brand header ─── */
.brand-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 32px; border-bottom: 1px solid var(--line); margin-bottom: 48px; }
.brand-lockup { height: 40px; }
.brand-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }

/* ─── Hero ─── */
.hero { margin-bottom: 56px; }
.hero h1 { font-family: 'Fraunces', Georgia, serif; font-weight: 900; font-size: clamp(36px, 5.5vw, 56px); line-height: 1.02; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 24px; text-wrap: balance; }
.hero h1 .accent { color: var(--accent); font-style: italic; font-weight: 700; }
.hero p.lead { font-size: clamp(17px, 2vw, 20px); color: var(--ink-2); max-width: 56ch; }

/* ─── Intro card ─── */
.intro { background: #ffffff; border: 1px solid var(--line); border-radius: 12px; padding: 28px clamp(20px, 3vw, 36px); margin-bottom: 56px; }
.intro h2 { font-family: Fraunces, Georgia, serif; font-weight: 700; font-size: 22px; margin-bottom: 12px; color: var(--ink); }
.intro p { color: var(--ink-2); font-size: 16px; }
.intro ul { list-style: none; padding: 16px 0 0; }
.intro li { padding: 8px 0 8px 24px; position: relative; font-size: 15px; color: var(--ink-2); }
.intro li::before { content: "·"; position: absolute; left: 8px; color: var(--accent); font-weight: 700; font-size: 20px; line-height: 1; top: 6px; }

/* ─── Preguntas ─── */
h2.section { font-family: Fraunces, Georgia, serif; font-weight: 900; font-size: clamp(26px, 3.5vw, 36px); letter-spacing: -0.015em; margin: 48px 0 8px; color: var(--ink); }
h2.section .light { font-weight: 300; color: var(--ink-2); }
p.section-sub { color: var(--ink-3); font-size: 14px; margin-bottom: 24px; }

.q { background: #ffffff; border: 1px solid var(--line); border-radius: 10px; padding: 20px clamp(18px, 2.5vw, 28px); margin-bottom: 14px; page-break-inside: avoid; }
.q-head { display: flex; gap: 14px; align-items: baseline; margin-bottom: 8px; }
.q-num { font-family: Fraunces, serif; font-weight: 900; font-size: 28px; color: var(--ink-3); flex-shrink: 0; min-width: 36px; }
.q-text { font-family: Fraunces, serif; font-weight: 700; font-size: clamp(17px, 2vw, 20px); color: var(--ink); line-height: 1.25; }
.q-help { color: var(--ink-2); font-size: 14px; margin: 8px 0 0 50px; }
.q-blank { display: flex; align-items: center; gap: 10px; margin: 14px 0 0 50px; }
.q-blank label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
input.q-input, input.calc-input {
  flex: 1; background: transparent; border: none;
  border-bottom: 1.5px solid var(--ink);
  font-family: inherit; font-size: 15px; font-weight: 500;
  color: var(--ink); padding: 4px 6px;
  outline: none; min-height: 26px; min-width: 60px;
  transition: border-bottom-color 0.18s ease, background-color 0.18s ease;
  -webkit-appearance: none; appearance: none; border-radius: 0;
}
input.q-input:focus, input.calc-input:focus {
  border-bottom-color: var(--accent); background-color: rgba(0, 102, 204, 0.04);
}
input.q-input::placeholder, input.calc-input::placeholder {
  color: var(--ink-3); opacity: 0.5; font-weight: 400; font-style: italic;
}

/* ─── Cálculo ─── */
.calc { background: #ffffff; border: 2px solid var(--accent); border-radius: 12px; padding: 28px clamp(20px, 3vw, 36px); margin: 48px 0; page-break-inside: avoid; }
.calc h3 { font-family: Fraunces, serif; font-weight: 900; font-size: 24px; margin-bottom: 16px; }
.calc-row { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-bottom: 1px dotted var(--line); font-size: 15px; gap: 14px; flex-wrap: wrap; }
.calc-row:last-of-type { border-bottom: none; }
.calc-row b { font-family: Fraunces, serif; font-weight: 700; }
.calc-row .calc-label { flex: 1; min-width: 220px; }
.calc-row .calc-controls { display: flex; align-items: center; gap: 8px; }
.calc-row .calc-controls input.calc-input { max-width: 130px; text-align: right; }
.calc-total { background: var(--ink); color: #fff; padding: 18px clamp(16px, 2.5vw, 24px); border-radius: 8px; margin-top: 20px; display: flex; justify-content: space-between; align-items: baseline; }
.calc-total .label { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.calc-total .value { font-family: Fraunces, serif; font-weight: 900; font-size: 28px; }

/* ─── Interpretación ─── */
.verdict { margin: 48px 0; }
.verdict-row { display: grid; grid-template-columns: 90px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.verdict-row:last-child { border-bottom: none; }
.verdict-row .range { font-family: Fraunces, serif; font-weight: 900; font-size: 18px; color: var(--accent); }
.verdict-row .read { color: var(--ink-2); font-size: 15px; }

/* ─── CTA cierre ─── */
.cta { background: var(--ink); color: #ffffff; border-radius: 14px; padding: clamp(32px, 5vw, 56px); margin-top: 64px; text-align: center; page-break-inside: avoid; }
.cta h3 { font-family: Fraunces, serif; font-weight: 900; font-size: clamp(24px, 3.5vw, 36px); margin-bottom: 14px; line-height: 1.1; text-wrap: balance; }
.cta p { color: rgba(255,255,255,0.78); max-width: 50ch; margin: 0 auto 28px; font-size: 16px; }
.cta a.btn { display: inline-block; background: #ffffff; color: var(--ink); padding: 16px 32px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 16px; letter-spacing: -0.005em; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.cta a.btn:hover { transform: translateY(-1px); box-shadow: 0 12px 32px rgba(0,0,0,0.18); }
.cta .alt { display: block; margin-top: 18px; color: rgba(255,255,255,0.6); font-size: 13px; }
.cta .alt a { color: var(--cyan); text-decoration: none; }

/* ─── Foot ─── */
.foot { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.foot p { font-size: 12px; color: var(--ink-3); }
.foot a { color: var(--ink-2); text-decoration: none; border-bottom: 1px dotted var(--ink-3); }

/* ─── Microanimaciones · más presentes pero editorial ─── */
@media (prefers-reduced-motion: no-preference) {
  .hero, .intro, .q, .calc, .verdict, .cta {
    opacity: 0;
    transform: translateY(28px);
    animation: pmsReveal 0.85s cubic-bezier(0.16, 0.84, 0.24, 1) forwards;
  }
  .hero  { animation-delay: 0.10s; }
  .intro { animation-delay: 0.25s; }
  .q:nth-of-type(1) { animation-delay: 0.30s; }
  .q:nth-of-type(2) { animation-delay: 0.36s; }
  .q:nth-of-type(3) { animation-delay: 0.42s; }
  .q:nth-of-type(4) { animation-delay: 0.48s; }
  .q:nth-of-type(5) { animation-delay: 0.54s; }
  .q:nth-of-type(6) { animation-delay: 0.60s; }
  .q:nth-of-type(7) { animation-delay: 0.66s; }
  .q:nth-of-type(8) { animation-delay: 0.72s; }
  .q:nth-of-type(9) { animation-delay: 0.78s; }
  .q:nth-of-type(10){ animation-delay: 0.84s; }
  .calc { animation-delay: 0.45s; }
  .verdict { animation-delay: 0.30s; }
  .cta { animation-delay: 0.40s; }

  .q { transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; }
  .q:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 10px 28px rgba(0, 102, 204, 0.12); }
  .q:hover .q-num { color: var(--accent); }
  .q .q-num { transition: color 0.2s ease; }

  .cta a.btn { animation: pmsPulse 3.8s ease-in-out infinite; transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.2s ease; }
  .cta a.btn:hover { animation-play-state: paused; transform: translateY(-3px) scale(1.02); box-shadow: 0 16px 40px rgba(0, 180, 216, 0.28); }
  .cta a.btn:active { transform: translateY(-1px) scale(0.99); }

  .brand-lockup { animation: pmsFadeIn 0.7s ease forwards; opacity: 0; }

  .verdict-row { transition: padding-left 0.2s ease, color 0.2s ease; }
  .verdict-row:hover { padding-left: 8px; }
  .verdict-row:hover .range { color: var(--ink); }
}

@keyframes pmsReveal { to { opacity: 1; transform: translateY(0); } }
@keyframes pmsFadeIn { to { opacity: 1; } }
@keyframes pmsPulse {
  0%, 100% { box-shadow: 0 8px 20px rgba(0,0,0,0.18); }
  50%      { box-shadow: 0 14px 36px rgba(0, 180, 216, 0.28); }
}

/* ─── Estilos para vs-pages (comparativas honestas) ─── */
.vs-page { max-width: 760px; line-height: 1.65; }
.vs-page .crumbs { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.vs-page .crumbs a { color: var(--ink-3); text-decoration: none; border-bottom: 1px dotted var(--ink-3); }
.vs-page h1 { font-family: 'Fraunces', Georgia, serif; font-weight: 900; font-size: clamp(34px, 5vw, 52px); line-height: 1.04; letter-spacing: -0.02em; margin-bottom: 24px; text-wrap: balance; }
.vs-page h1 .italic { font-style: italic; font-weight: 700; color: var(--accent); }
.vs-page .dek { font-size: clamp(17px, 2vw, 21px); color: var(--ink-2); max-width: 56ch; margin-bottom: 48px; }
.vs-page h2 { font-family: Fraunces, Georgia, serif; font-weight: 900; font-size: clamp(24px, 3.2vw, 32px); margin: 56px 0 16px; line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; }
.vs-page h2 .light { font-weight: 300; color: var(--ink-2); }
.vs-page h3 { font-family: Fraunces, serif; font-weight: 700; font-size: 19px; margin: 32px 0 10px; color: var(--ink); }
.vs-page article > p { color: var(--ink-2); font-size: 17px; margin-bottom: 18px; max-width: 64ch; }
.vs-page article > p strong { color: var(--ink); font-weight: 500; }
.vs-page ul.bullets { padding-left: 0; list-style: none; margin: 16px 0 24px; max-width: 64ch; }
.vs-page ul.bullets li { padding: 6px 0 6px 22px; position: relative; color: var(--ink-2); font-size: 16px; }
.vs-page ul.bullets li::before { content: "·"; position: absolute; left: 6px; color: var(--accent); font-weight: 900; font-size: 22px; line-height: 1; top: 4px; }
.vs-page .compare { width: 100%; border-collapse: collapse; margin: 24px 0 32px; font-size: 15px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.vs-page .compare th { text-align: left; padding: 14px 16px; background: var(--ink); color: #fff; font-family: Fraunces, serif; font-weight: 700; font-size: 14px; }
.vs-page .compare td { padding: 14px 16px; border-top: 1px solid var(--line); color: var(--ink-2); vertical-align: top; }
.vs-page .compare td:first-child { font-weight: 500; color: var(--ink); background: #ffffff; width: 32%; }
.vs-page .compare tr:nth-child(odd) td:not(:first-child) { background: #fcfcfd; }
.vs-page blockquote { font-family: Fraunces, serif; font-style: italic; font-weight: 400; font-size: clamp(20px, 2.5vw, 26px); line-height: 1.35; color: var(--ink); border-left: 3px solid var(--accent); padding: 12px 0 12px 24px; margin: 32px 0; max-width: 56ch; }
.vs-page blockquote cite { display: block; margin-top: 12px; font-style: normal; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }

@media (prefers-reduced-motion: no-preference) {
  .vs-page article > h1, .vs-page article > .dek, .vs-page article > h2, .vs-page article > h3, .vs-page article > p,
  .vs-page article > ul.bullets, .vs-page article > .compare, .vs-page article > blockquote, .vs-page .cta {
    opacity: 0; transform: translateY(24px);
    animation: pmsReveal 0.85s cubic-bezier(0.16, 0.84, 0.24, 1) forwards;
  }
  .vs-page article > h1 { animation-delay: 0.10s; }
  .vs-page article > .dek { animation-delay: 0.22s; }
  .vs-page article > h2:nth-of-type(1) { animation-delay: 0.34s; }
  .vs-page article > h2:nth-of-type(2) { animation-delay: 0.42s; }
  .vs-page article > h2:nth-of-type(3) { animation-delay: 0.50s; }
  .vs-page article > h2:nth-of-type(4) { animation-delay: 0.58s; }
  .vs-page article > h2:nth-of-type(5) { animation-delay: 0.66s; }
  .vs-page article > h2:nth-of-type(6) { animation-delay: 0.74s; }
  .vs-page article > .compare { animation-delay: 0.50s; }
  .vs-page article > blockquote { animation-delay: 0.55s; }
  .vs-page .compare tbody tr { transition: background-color 0.22s ease, transform 0.22s ease; }
  .vs-page .compare tbody tr:hover td:not(:first-child) { background: #eef4fd; }
  .vs-page .compare tbody tr:hover { transform: translateX(2px); }
  .vs-page ul.bullets li { transition: transform 0.2s ease, color 0.2s ease; }
  .vs-page ul.bullets li:hover { transform: translateX(6px); color: var(--ink); }
  .vs-page blockquote { transition: border-color 0.3s ease, padding-left 0.3s ease; }
  .vs-page blockquote:hover { border-color: var(--accent); padding-left: 32px; }
}

/* ─── Print ─── */
@media print {
  html, body { background: #ffffff; }
  .page { padding: 24px 0; max-width: 680px; }
  .amb-3d { display: none; }
  .cta { background: #f0f0f2; color: var(--ink); }
  .cta p, .cta .alt { color: var(--ink-2); }
  .cta a.btn { background: var(--ink); color: #fff; }
  .calc-total { background: #f0f0f2; color: var(--ink); }
  .calc-total .label { color: var(--ink-2); }
  .q, .intro, .calc, .cta { box-shadow: none; }
  input.q-input, input.calc-input { border-bottom: 1.5px solid var(--ink); background: transparent; }
  a { color: var(--ink) !important; }
}