#!/usr/bin/env python3
"""Generate Propuesta-Psicologia.pdf via Chrome headless."""
import base64, os, subprocess, sys

WORKDIR = os.path.dirname(os.path.abspath(__file__))

with open(os.path.join(WORKDIR, "Dev-Valirica-Logo-Light-Clean.svg"), "rb") as f:
    LOGO = "data:image/svg+xml;base64," + base64.b64encode(f.read()).decode()

CSS = """
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Poppins:wght@300;400;500;600;700&display=swap');

@page { size: A4 portrait; margin: 0; }

*, *::before, *::after {
  margin: 0; padding: 0; box-sizing: border-box;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

:root {
  --navy: #012133;
  --cyan: #12d6e0;
  --paper: #F7F9FB;
  --line: #E5EAEE;
  --muted: #5A6B78;
  --soft-navy: #1a3548;
}

html, body { font-family: "Playfair Display", Georgia, serif; font-size: 10.5pt; color: var(--navy); background: #fff; }

.page-cover {
  width: 210mm; height: 297mm;
  background: linear-gradient(145deg, #012133 0%, #01283f 50%, #013d5a 100%);
  color: white; position: relative; overflow: hidden;
  padding: 28mm 22mm; page-break-after: always;
}

.page {
  width: 210mm; min-height: 297mm;
  padding: 22mm 20mm 30mm 20mm;
  page-break-after: always; position: relative; background: white;
}

.cta-page {
  width: 210mm; min-height: 297mm;
  background: linear-gradient(145deg, #012133 0%, #01283f 50%, #013d5a 100%);
  color: white; padding: 32mm 25mm 28mm 25mm;
  page-break-after: always; position: relative; overflow: hidden;
}

.back-cover {
  width: 210mm; height: 297mm; background: var(--navy);
  color: white; padding: 32mm 25mm; position: relative;
  overflow: hidden; page-break-after: auto;
}

.bg-glow { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.g1 { top:-50mm; right:-50mm; width:210mm; height:210mm;
      background: radial-gradient(circle, rgba(18,214,224,.20) 0%, transparent 68%); }
.g2 { bottom:-80mm; left:-60mm; width:190mm; height:190mm;
      background: radial-gradient(circle, rgba(18,214,224,.11) 0%, transparent 68%); }
.g3 { top:-55mm; right:-55mm; width:220mm; height:220mm;
      background: radial-gradient(circle, rgba(18,214,224,.20) 0%, transparent 68%); }
.g4 { bottom:-100mm; left:-50mm; width:260mm; height:260mm;
      background: radial-gradient(circle, rgba(18,214,224,.13) 0%, transparent 68%); }

.cover-logo { width: 36mm; display: block; position: relative; z-index: 2; }

.cover-client {
  font-family: "Poppins", sans-serif; font-size: 7.5pt; letter-spacing: .32em;
  color: rgba(255,255,255,.55); text-transform: uppercase; margin-top: 52mm;
  font-weight: 400; position: relative; z-index: 2;
}

.cover-tag {
  font-family: "Poppins", sans-serif; font-size: 8.5pt; letter-spacing: .22em;
  color: var(--cyan); text-transform: uppercase; margin-top: 4mm;
  font-weight: 600; position: relative; z-index: 2;
}

.cover-title {
  font-family: "Playfair Display", Georgia, serif; font-size: 42pt;
  line-height: 1.06; font-weight: 700; margin-top: 10mm; letter-spacing: -.015em;
  position: relative; z-index: 2; color: white;
}

.cover-title .accent { color: var(--cyan); font-style: italic; font-weight: 600; }

.cover-bottom {
  position: absolute; bottom: 26mm; left: 22mm; right: 22mm;
  display: flex; justify-content: space-between; align-items: flex-end; z-index: 2;
}

.cover-meta {
  font-family: "Poppins", sans-serif; font-size: 7.5pt; letter-spacing: .15em;
  color: rgba(255,255,255,.45); text-transform: uppercase;
}

.cover-edition {
  font-family: "Playfair Display", serif; font-size: 26pt; font-weight: 400;
  color: var(--cyan); line-height: 1;
}

.cover-line { width: 16mm; height: 2px; background: var(--cyan); margin: 4mm 0; }

.pf {
  position: absolute; bottom: 11mm; left: 20mm; right: 20mm;
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 3mm; border-top: 1px solid var(--line);
}
.pf-text { font-family:"Poppins",sans-serif; font-size:6.5pt; letter-spacing:.14em; color:var(--muted); text-transform:uppercase; }
.pf-num  { font-family:"Poppins",sans-serif; font-size:8pt; font-weight:600; color:var(--navy); }

.sn {
  font-family:"Poppins",sans-serif; font-size:8pt; letter-spacing:.28em;
  color:var(--cyan); text-transform:uppercase; font-weight:600;
  margin-bottom:7mm; display:flex; align-items:center; gap:3mm;
}
.sn::before { content:""; display:inline-block; width:11mm; height:1.5px; background:var(--cyan); flex-shrink:0; }

.st { font-family:"Playfair Display",Georgia,serif; font-size:32pt; font-weight:700; line-height:1.1; letter-spacing:-.018em; color:var(--navy); margin-bottom:5mm; }
.st em { color:var(--cyan); font-style:italic; font-weight:600; }

.sl { font-family:"Playfair Display",Georgia,serif; font-size:12pt; font-weight:400; line-height:1.6; color:var(--muted); max-width:148mm; margin-bottom:9mm; }

h2 { font-family:"Playfair Display",serif; font-size:17pt; font-weight:700; color:var(--navy); margin:7mm 0 3mm 0; letter-spacing:-.01em; line-height:1.2; }
h3 { font-family:"Poppins",sans-serif; font-size:8pt; font-weight:600; letter-spacing:.20em; text-transform:uppercase; color:var(--cyan); margin-bottom:2.5mm; }

p { font-family:"Playfair Display",Georgia,serif; font-size:10.5pt; line-height:1.65; color:var(--soft-navy); margin-bottom:3.5mm; }

.carta { padding-top: 32mm; }

.carta-saludo {
  font-family:"Poppins",sans-serif; font-size:8pt; letter-spacing:.22em;
  text-transform:uppercase; color:var(--cyan); font-weight:600; margin-bottom:7mm;
}

.carta-quote {
  font-family:"Playfair Display",serif; font-size:28pt; font-weight:700;
  line-height:1.18; color:var(--navy); letter-spacing:-.02em;
  max-width:162mm; margin-bottom:14mm;
}
.carta-quote em { color:var(--cyan); font-style:italic; }

.carta-rule { width:18mm; height:2px; background:var(--cyan); margin-bottom:9mm; }

.carta-body { font-family:"Playfair Display",serif; font-size:11.5pt; line-height:1.72; color:var(--soft-navy); max-width:152mm; margin-bottom:4mm; }

.carta-firma { font-family:"Poppins",sans-serif; font-size:7.5pt; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:13mm; }

.stats { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; background:var(--navy); border-radius:4mm; overflow:hidden; margin:8mm 0; }
.stat { text-align:center; padding:7mm 4mm; border-right:1px solid rgba(255,255,255,.10); }
.stat:last-child { border-right:none; }
.stn { font-family:"Playfair Display",serif; font-size:27pt; font-weight:500; color:var(--cyan); line-height:1; margin-bottom:2mm; }
.stl { font-family:"Poppins",sans-serif; font-size:6.5pt; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.65); }

.proyecto-grid { display:grid; grid-template-columns:1fr 1fr; gap:5mm; margin-top:6mm; }

.pj-card {
  padding:6mm; background:var(--paper); border-radius:4mm;
  border-top:3px solid var(--cyan);
}

.pj-card-icon {
  font-family:"Poppins",sans-serif; font-size:7pt; letter-spacing:.22em;
  text-transform:uppercase; color:var(--cyan); font-weight:700; margin-bottom:2.5mm;
}

.pj-card h4 { font-family:"Playfair Display",serif; font-size:13pt; font-weight:700; color:var(--navy); margin-bottom:2.5mm; line-height:1.2; }
.pj-card p  { font-family:"Poppins",sans-serif; font-size:8.5pt; line-height:1.55; color:var(--muted); margin:0; }

.compare { display:grid; grid-template-columns:1fr 1fr; gap:5mm; margin-top:6mm; }
.compare-col { border-radius:4mm; overflow:hidden; }
.compare-header {
  padding:4mm 5.5mm;
  font-family:"Poppins",sans-serif; font-size:8pt; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
}
.compare-header.old { background:#F0F0F2; color:var(--muted); }
.compare-header.new { background:var(--navy); color:var(--cyan); }
.compare-body { padding:5mm 5.5mm; background:var(--paper); }
.compare-col.new-col .compare-body { background:linear-gradient(160deg,#f0fcfd,#fff); border:1.5px solid var(--cyan); border-top:none; border-radius:0 0 4mm 4mm; }
.compare-item {
  display:flex; align-items:flex-start; gap:3mm;
  padding:2mm 0; border-bottom:1px solid var(--line);
}
.compare-item:last-child { border-bottom:none; }
.ci-icon { font-size:9pt; flex-shrink:0; margin-top:.5mm; }
.ci-text { font-family:"Poppins",sans-serif; font-size:8.5pt; line-height:1.5; color:var(--soft-navy); }
.ci-text strong { color:var(--navy); font-weight:600; }

.alcance-list { margin-top:6mm; }
.alcance-item {
  display:grid; grid-template-columns:38mm 1fr;
  gap:5mm; padding:4.5mm 0;
  border-bottom:1px solid var(--line);
  page-break-inside:avoid;
}
.alcance-item:last-child { border-bottom:none; }
.ai-label {
  font-family:"Poppins",sans-serif; font-size:7.5pt; letter-spacing:.16em;
  color:var(--cyan); text-transform:uppercase; font-weight:700; padding-top:1mm;
  line-height:1.4;
}
.ai-content h4 { font-family:"Playfair Display",serif; font-size:12pt; font-weight:700; color:var(--navy); margin-bottom:1.5mm; }
.ai-content p  { font-family:"Poppins",sans-serif; font-size:8.5pt; line-height:1.5; color:var(--muted); margin:0; }

.alcance-foto {
  margin-top:5mm; padding:5mm 6mm;
  background:linear-gradient(135deg,#012133,#013d5a);
  border-radius:4mm; display:flex; align-items:center; gap:5mm;
}
.af-badge {
  font-family:"Poppins",sans-serif; font-size:7pt; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cyan); font-weight:700;
  background:rgba(18,214,224,.15); border:1px solid rgba(18,214,224,.40);
  padding:1.5mm 3.5mm; border-radius:100px; white-space:nowrap;
}
.af-text { font-family:"Poppins",sans-serif; font-size:8.5pt; color:rgba(255,255,255,.85); line-height:1.5; }
.af-text strong { color:white; font-weight:600; }

.pricing-wrap { margin-top:5mm; display:flex; gap:6mm; }

.tier-main {
  flex:1; border:2px solid var(--cyan); border-radius:5mm;
  padding:8mm 8mm 7mm 8mm;
  background:linear-gradient(160deg,#fff 0%,#f0fcfd 100%); position:relative;
}

.tier-badge {
  position:absolute; top:-3.5mm; left:50%; transform:translateX(-50%);
  background:var(--cyan); color:var(--navy);
  font-family:"Poppins",sans-serif; font-size:6.5pt; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  padding:1.5mm 5mm; border-radius:100px; white-space:nowrap;
}

.tier-name { font-family:"Playfair Display",serif; font-size:18pt; font-weight:700; color:var(--navy); margin-bottom:2mm; }
.tier-tag  { font-family:"Poppins",sans-serif; font-size:8pt; color:var(--muted); margin-bottom:5mm; line-height:1.45; }

.tier-price-block { background:var(--navy); border-radius:4mm; padding:5mm 6mm; margin-bottom:5mm; }
.tier-price { font-family:"Playfair Display",serif; font-size:27pt; font-weight:700; color:white; line-height:1; }
.tier-price-cur { font-size:14pt; vertical-align:top; margin-right:1mm; }
.tier-price-sub { font-family:"Poppins",sans-serif; font-size:7pt; color:rgba(255,255,255,.65); margin-top:2mm; line-height:1.65; }
.tier-price-tot { font-family:"Poppins",sans-serif; font-size:8.5pt; font-weight:600; color:var(--cyan); margin-top:1.5mm; }

.tier-div { height:1px; background:var(--line); margin:4mm 0; }

.tier ul { list-style:none; padding:0; margin:0; }
.tier ul li {
  font-family:"Poppins",sans-serif; font-size:8.5pt; line-height:1.5;
  color:var(--soft-navy); padding-left:5mm; position:relative; margin-bottom:2mm;
}
.tier ul li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--cyan); font-weight:700; }

.tier-foot { margin-top:4mm; padding-top:3.5mm; border-top:1px solid var(--line); font-family:"Poppins",sans-serif; font-size:8pt; color:var(--muted); line-height:1.7; }
.tier-foot strong { color:var(--navy); }

.tier-side { width:56mm; flex-shrink:0; }

.tsc { background:var(--paper); border-radius:4mm; padding:5mm 5.5mm; border-top:3px solid var(--cyan); margin-bottom:4mm; }
.tsc h4 { font-family:"Playfair Display",serif; font-size:11pt; font-weight:700; color:var(--navy); margin-bottom:2mm; }
.tsc p  { font-family:"Poppins",sans-serif; font-size:8.5pt; color:var(--muted); margin:0; line-height:1.5; }

/* ── PLAN DE PAGOS (mini card en sidebar) ───────── */
.pay-card { background:var(--navy); border-radius:4mm; padding:5mm 5mm 4.5mm 5mm; color:white; margin-bottom:0; }
.pay-card-title {
  font-family:"Poppins",sans-serif; font-size:7pt; letter-spacing:.22em;
  text-transform:uppercase; color:var(--cyan); font-weight:700; margin-bottom:1.5mm;
}
.pay-card-sub { font-family:"Playfair Display",serif; font-size:10pt; font-weight:600; color:white; margin-bottom:3.5mm; line-height:1.3; }
.pay-row { display:flex; align-items:center; gap:3mm; padding:2mm 0; border-bottom:1px solid rgba(255,255,255,.10); }
.pay-row:last-child { border-bottom:none; }
.pay-dot {
  width:5.5mm; height:5.5mm; border-radius:50%; background:var(--cyan); color:var(--navy);
  font-family:"Playfair Display",serif; font-size:8.5pt; font-weight:700;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.pay-when { font-family:"Poppins",sans-serif; font-size:7pt; letter-spacing:.10em; text-transform:uppercase; color:rgba(255,255,255,.65); font-weight:600; line-height:1.3; flex:1; }
.pay-amount { font-family:"Playfair Display",serif; font-size:11pt; font-weight:700; color:white; line-height:1; }

/* ── RETAINER (servicio mensual) ────────────────── */
.retainer {
  margin-top:6mm; border:2px solid var(--cyan); border-radius:5mm; overflow:hidden;
  background:linear-gradient(160deg,#fff 0%,#f0fcfd 100%);
}
.retainer-head {
  background:var(--navy); padding:6mm 7mm; display:flex; justify-content:space-between; align-items:center; gap:5mm;
}
.retainer-head .rh-left { flex:1; }
.retainer-head h4 { font-family:"Playfair Display",serif; font-size:16pt; font-weight:700; color:white; line-height:1.2; margin-bottom:1mm; }
.retainer-head .rh-tag { font-family:"Poppins",sans-serif; font-size:7.5pt; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); font-weight:600; margin-bottom:2mm; }
.retainer-head .rh-sub { font-family:"Poppins",sans-serif; font-size:8.5pt; color:rgba(255,255,255,.70); line-height:1.45; }
.retainer-head .rh-price { text-align:right; flex-shrink:0; }
.retainer-head .rh-price .rp-num { font-family:"Playfair Display",serif; font-size:26pt; font-weight:700; color:white; line-height:1; }
.retainer-head .rh-price .rp-cur { font-size:14pt; vertical-align:top; margin-left:1mm; }
.retainer-head .rh-price .rp-month { font-family:"Poppins",sans-serif; font-size:7pt; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan); font-weight:600; margin-top:1.5mm; }
.retainer-head .rh-price .rp-iva { font-family:"Poppins",sans-serif; font-size:7pt; color:rgba(255,255,255,.55); margin-top:1mm; }
.retainer-body { padding:6mm 7mm; }
.retainer-grid { display:grid; grid-template-columns:1fr 1fr; gap:4mm 7mm; }
.retainer-grid .rg-item h5 { font-family:"Playfair Display",serif; font-size:10.5pt; font-weight:700; color:var(--navy); margin-bottom:1mm; }
.retainer-grid .rg-item p  { font-family:"Poppins",sans-serif; font-size:8pt; line-height:1.5; color:var(--muted); margin:0; }
.retainer-foot {
  margin-top:5mm; padding-top:4mm; border-top:1px solid var(--line);
  font-family:"Poppins",sans-serif; font-size:8pt; color:var(--muted); line-height:1.6;
}
.retainer-foot strong { color:var(--navy); }

.method { display:grid; grid-template-columns:repeat(4,1fr); gap:4mm; margin-top:8mm; position:relative; }
.ms2 { position:relative; padding-top:14mm; }
.ms2::before { content:""; position:absolute; top:5mm; left:0; right:0; height:1.5px; background:var(--line); }
.ms2:first-child::before { left:50%; }
.ms2:last-child::before  { right:50%; }
.mn { position:absolute; top:0; left:50%; transform:translateX(-50%); width:10mm; height:10mm; background:var(--cyan); color:var(--navy); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:"Playfair Display",serif; font-size:11pt; font-weight:700; }
.ms2 h5 { font-family:"Playfair Display",serif; font-size:10pt; font-weight:700; color:var(--navy); margin-bottom:2mm; text-align:center; line-height:1.2; }
.ms2 p  { font-family:"Poppins",sans-serif; font-size:7.5pt; line-height:1.45; color:var(--muted); text-align:center; margin:0; }

.rs { display:grid; grid-template-columns:30mm 1fr; gap:5mm; padding:4mm 0; border-bottom:1px solid var(--line); page-break-inside:avoid; }
.rs:last-child { border-bottom:none; }
.rt { font-family:"Poppins",sans-serif; font-size:7.5pt; letter-spacing:.18em; color:var(--cyan); text-transform:uppercase; font-weight:700; padding-top:1mm; }
.rc h4 { font-family:"Playfair Display",serif; font-size:11.5pt; font-weight:700; color:var(--navy); margin-bottom:1mm; }
.rc p  { font-family:"Poppins",sans-serif; font-size:8.5pt; line-height:1.5; color:var(--muted); margin:0; }

.cta-tag {
  font-family:"Poppins",sans-serif; font-size:8pt; letter-spacing:.30em;
  color:var(--cyan); text-transform:uppercase; font-weight:600;
  margin-bottom:8mm; position:relative; z-index:2; display:flex; align-items:center; gap:3mm;
}
.cta-tag::before { content:""; display:inline-block; width:11mm; height:1.5px; background:var(--cyan); }

.cta-title { font-family:"Playfair Display",serif; font-size:34pt; font-weight:700; line-height:1.08; letter-spacing:-.02em; color:white; max-width:142mm; margin-bottom:8mm; position:relative; z-index:2; }
.cta-title em { color:var(--cyan); font-style:italic; }

.cta-body { font-family:"Playfair Display",serif; font-size:11.5pt; line-height:1.65; color:rgba(255,255,255,.78); max-width:138mm; margin-bottom:11mm; position:relative; z-index:2; }

.cta-row { display:grid; grid-template-columns:1fr 1fr; gap:5mm; margin-bottom:11mm; position:relative; z-index:2; }

.cta-box { background:rgba(18,214,224,.07); border:1px solid rgba(18,214,224,.28); border-radius:4mm; padding:6mm 7mm; }
.cta-box-label { font-family:"Poppins",sans-serif; font-size:7pt; letter-spacing:.22em; text-transform:uppercase; color:var(--cyan); font-weight:600; margin-bottom:2.5mm; }
.cta-box-content { font-family:"Playfair Display",serif; font-size:14.5pt; font-weight:500; color:white; line-height:1.3; }

.sig { margin-top:13mm; padding-top:7mm; border-top:1px solid rgba(18,214,224,.22); position:relative; z-index:2; }
.sig-name { font-family:"Playfair Display",serif; font-style:italic; font-size:17pt; color:var(--cyan); margin-bottom:2mm; }
.sig-role { font-family:"Poppins",sans-serif; font-size:8pt; color:rgba(255,255,255,.65); letter-spacing:.05em; line-height:1.6; }

.back-logo { width:32mm; display:block; margin-bottom:28mm; position:relative; z-index:2; }
.bq { font-family:"Playfair Display",serif; font-size:22pt; font-weight:700; line-height:1.22; letter-spacing:-.015em; color:white; max-width:150mm; position:relative; z-index:2; }
.bq em { color:var(--cyan); font-style:italic; }
.bd { width:16mm; height:2px; background:var(--cyan); margin:13mm 0; position:relative; z-index:2; }
.bm { position:absolute; bottom:24mm; left:25mm; right:25mm; display:grid; grid-template-columns:1fr 1fr; gap:8mm; z-index:2; }
.bm h5 { font-family:"Poppins",sans-serif; font-size:7pt; letter-spacing:.22em; text-transform:uppercase; color:var(--cyan); font-weight:600; margin-bottom:3mm; }
.bm p  { font-family:"Poppins",sans-serif; font-size:8.5pt; color:rgba(255,255,255,.80); line-height:1.65; margin:0; }

@media print {
  * { -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
}
"""

LABEL = "Valírica · Propuesta Web · Centro de Psicología 360"

def footer(n, label=LABEL):
    return f"""
    <div class="pf">
      <span class="pf-text">{label}</span>
      <span class="pf-num">{n:02d}</span>
    </div>"""

HTML = f"""<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Valírica · Propuesta Web · Centro de Psicología 360</title>
<style>{CSS}</style>
</head>
<body>

<!-- ==================== P01 PORTADA ==================== -->
<div class="page-cover">
  <div class="bg-glow g1"></div>
  <div class="bg-glow g2"></div>
  <img class="cover-logo" src="{LOGO}" alt="Valírica">
  <div class="cover-client">Para Paola &middot; Centro de Psicología 360</div>
  <div class="cover-tag">Propuesta Web &middot; Sitio Institucional &middot; España &amp; México</div>
  <h1 class="cover-title">
    Presencia digital para<br>
    un nuevo centro de<br>
    <span class="accent">psicología 360</span>.
  </h1>
  <div class="cover-bottom">
    <div>
      <div class="cover-meta">Valírica &middot; Agile Development</div>
      <div class="cover-line"></div>
      <div class="cover-meta">valirica.com</div>
    </div>
    <div class="cover-edition">&#39;26</div>
  </div>
</div>

<!-- ==================== P02 CARTA A PAOLA ==================== -->
<div class="page carta">
  <div class="carta-saludo">Para Paola</div>
  <h2 class="carta-quote">
    Un centro de psicología 360<br>
    necesita una <em>puerta digital</em><br>
    tan cuidada como su consulta.
  </h2>
  <div class="carta-rule"></div>
  <p class="carta-body">Cuando alguien busca ayuda psicológica, el primer paso casi siempre ocurre en silencio: una búsqueda en Google a las once de la noche. Ese primer contacto con la web es, en la práctica, la primera sesión. Tiene que transmitir cercanía, profesionalismo y la idea de un equipo que entiende a cada consultante desde diferentes corrientes y enfoques.</p>
  <p class="carta-body">Esta propuesta nace pensando en eso: una web que opere en España y México, que comunique el enfoque 360 del centro —tipos de consultantes, corrientes terapéuticas, modalidades— y que convierta visitas en primeras consultas agendadas.</p>
  <p class="carta-body">No es solo una web. Es una base técnica limpia, rápida y 100% tuya, lista para crecer hacia reservas online, blog clínico, área para profesionales o lo que el centro necesite en el futuro, sin depender de plantillas ni licencias mensuales.</p>
  <p class="carta-body">Estamos listos para arrancar. Y con muchas ganas de ayudarte a contar esta historia desde el día uno.</p>
  <div class="carta-firma">— El equipo de Valírica</div>
  {footer(2)}
</div>

<!-- ==================== P03 QUIÉNES SOMOS ==================== -->
<div class="page">
  <div class="sn">01 &middot; Quiénes somos</div>
  <h1 class="st">Una agencia boutique<br><em>boosted by AI</em>, con sello humano.</h1>
  <p class="sl">Diseñamos y desarrollamos plataformas web y móviles para empresas y profesionales que decidieron dejar de improvisar en digital. Combinamos velocidad, criterio de producto y tecnología de primer nivel.</p>
  <div class="stats">
    <div class="stat"><div class="stn">+15</div><div class="stl">Proyectos entregados</div></div>
    <div class="stat"><div class="stn">3</div><div class="stl">Verticales clave</div></div>
    <div class="stat"><div class="stn">100%</div><div class="stl">Código en propiedad</div></div>
    <div class="stat"><div class="stn">60d</div><div class="stl">Soporte post-launch</div></div>
  </div>
  <h2>Cómo trabajamos</h2>
  <p>No somos una factoría. Somos un equipo pequeño donde cada proyecto tiene un responsable con nombre y apellido. Usamos inteligencia artificial para acelerar el trabajo —investigación, prototipado, generación de código base— pero cada decisión de diseño, arquitectura y experiencia la toma una persona.</p>
  <p>El resultado es simple: entregas más rápidas, código más limpio y un costo menor para el cliente. Sin sacrificar una línea de calidad.</p>
  {footer(3)}
</div>

<!-- ==================== P04 EL PROYECTO ==================== -->
<div class="page">
  <div class="sn">02 &middot; El proyecto</div>
  <h1 class="st">Lo que la web del centro<br>debe <em>hacer por ti</em>.</h1>
  <p class="sl">La web de un centro de psicología no es un folleto digital. Es la primera consulta antes de la consulta: tiene que generar confianza, explicar el enfoque y convertir.</p>
  <div class="proyecto-grid">
    <div class="pj-card">
      <div class="pj-card-icon">Objetivo 01</div>
      <h4>Captar y agendar</h4>
      <p>Cada visita debería terminar en una primera consulta agendada o en un contacto cualificado. La web trabaja por el centro las 24 horas, en España y México.</p>
    </div>
    <div class="pj-card">
      <div class="pj-card-icon">Objetivo 02</div>
      <h4>Comunicar el enfoque 360</h4>
      <p>Distintas corrientes terapéuticas, distintos tipos de consultantes (adultos, parejas, adolescentes, familias) y modalidades online/presencial. Todo claro desde la primera pantalla.</p>
    </div>
    <div class="pj-card">
      <div class="pj-card-icon">Objetivo 03</div>
      <h4>Ser encontrado en Google</h4>
      <p>SEO base bien hecho desde el inicio: indexación correcta, Core Web Vitals en verde y posicionamiento orientado a búsquedas locales en Madrid y CDMX.</p>
    </div>
    <div class="pj-card">
      <div class="pj-card-icon">Objetivo 04</div>
      <h4>Escalar cuando quieras</h4>
      <p>Construido en HTML puro, sin dependencias de plugins. Cuando el centro crezca, la web crece contigo: reservas online, blog clínico, área de profesionales.</p>
    </div>
  </div>
  {footer(4)}
</div>

<!-- ==================== P05 POR QUÉ HTML ==================== -->
<div class="page">
  <div class="sn">03 &middot; La decisión técnica</div>
  <h1 class="st">Por qué construirlo en HTML<br>y no en una <em>plantilla genérica</em>.</h1>
  <p class="sl">Wix, Squarespace o un WordPress con plantilla resuelven a corto plazo. Para un centro que quiere proyectar profesionalismo y crecer entre países, se quedan cortos rápido.</p>
  <div class="compare">
    <div class="compare-col">
      <div class="compare-header old">Plantilla (Wix / WP)</div>
      <div class="compare-body">
        <div class="compare-item"><div class="ci-icon" style="color:#e05555;">✗</div><div class="ci-text"><strong>Carga lenta</strong> — plugins acumulados, scripts innecesarios, hosting compartido</div></div>
        <div class="compare-item"><div class="ci-icon" style="color:#e05555;">✗</div><div class="ci-text"><strong>Core Web Vitals en rojo</strong> — Google penaliza la velocidad y afecta posicionamiento</div></div>
        <div class="compare-item"><div class="ci-icon" style="color:#e05555;">✗</div><div class="ci-text"><strong>Cuota mensual</strong> — pagas para siempre por usar la plataforma y por cada función extra</div></div>
        <div class="compare-item"><div class="ci-icon" style="color:#e05555;">✗</div><div class="ci-text"><strong>Difícil de escalar</strong> — funcionalidades complejas requieren plugins de pago o workarounds</div></div>
        <div class="compare-item"><div class="ci-icon" style="color:#e05555;">✗</div><div class="ci-text"><strong>Diseño encadenado</strong> — la plantilla limita lo que se puede transmitir como marca</div></div>
      </div>
    </div>
    <div class="compare-col new-col">
      <div class="compare-header new">Web a medida en HTML</div>
      <div class="compare-body">
        <div class="compare-item"><div class="ci-icon" style="color:#12d6e0;">✓</div><div class="ci-text"><strong>Carga en menos de 1 seg</strong> — código limpio, sin dependencias innecesarias, CDN óptimo</div></div>
        <div class="compare-item"><div class="ci-icon" style="color:#12d6e0;">✓</div><div class="ci-text"><strong>Core Web Vitals optimizados</strong> — Google posiciona mejor, más tráfico orgánico en ES y MX</div></div>
        <div class="compare-item"><div class="ci-icon" style="color:#12d6e0;">✓</div><div class="ci-text"><strong>Sin cuotas de plataforma</strong> — el código es tuyo, lo alojas donde quieras, sin lock-in</div></div>
        <div class="compare-item"><div class="ci-icon" style="color:#12d6e0;">✓</div><div class="ci-text"><strong>Escalable a cualquier tecnología</strong> — cuando quieras, agregamos reservas, blog, área profesional o app</div></div>
        <div class="compare-item"><div class="ci-icon" style="color:#12d6e0;">✓</div><div class="ci-text"><strong>Diseño libre</strong> — la web se ve exactamente como se diseña, sin limitaciones de theme</div></div>
      </div>
    </div>
  </div>
  <p style="margin-top:5mm; font-family:'Poppins',sans-serif; font-size:9pt; color:#5A6B78;">Una marca nueva merece nacer con una base técnica seria. HTML a medida es lo que usan hoy las webs más rápidas del mundo: ligereza, control absoluto y libertad para crecer.</p>
  {footer(5)}
</div>

<!-- ==================== P06 ALCANCE ==================== -->
<div class="page">
  <div class="sn">04 &middot; Alcance del trabajo</div>
  <h1 class="st">Todo lo que entregamos<br>en <em>45 días</em>.</h1>
  <p class="sl" style="margin-bottom:5mm;">Alcance cerrado. Sin letra pequeña. Sin sorpresas.</p>

  <div class="alcance-list">
    <div class="alcance-item">
      <div class="ai-label">Diseño &amp; Maquetado</div>
      <div class="ai-content">
        <h4>Diseño y prototipado directo en HTML</h4>
        <p>Diseño visual del sitio adaptado a la identidad del centro, construido directamente en HTML/CSS. Revisión y validación contigo en cada etapa antes de avanzar.</p>
      </div>
    </div>
    <div class="alcance-item">
      <div class="ai-label">Desarrollo web</div>
      <div class="ai-content">
        <h4>Arquitectura de páginas internas</h4>
        <p>Desarrollo HTML/CSS/JS de todas las páginas: home, enfoque 360, corrientes y servicios, tipos de consultantes, equipo, modalidades (presencial/online), sedes ES &amp; MX, contacto. Responsivo en móvil, tablet y escritorio.</p>
      </div>
    </div>
    <div class="alcance-item">
      <div class="ai-label">Multi-país</div>
      <div class="ai-content">
        <h4>Operación en España y México</h4>
        <p>Estructura preparada para dos mercados: textos, moneda, formularios y contactos diferenciados por país. SEO local orientado a búsquedas en Madrid y CDMX.</p>
      </div>
    </div>
    <div class="alcance-item">
      <div class="ai-label">Core Web Vitals</div>
      <div class="ai-content">
        <h4>Optimización de rendimiento y carga</h4>
        <p>Optimización técnica de todos los indicadores de Google: LCP, FID y CLS en verde. Carga ultrarrápida para retención de usuarios y mejor posicionamiento orgánico.</p>
      </div>
    </div>
    <div class="alcance-item">
      <div class="ai-label">SEO Base</div>
      <div class="ai-content">
        <h4>Indexación en Google</h4>
        <p>Metadatos, sitemap XML, robots.txt, Open Graph y schema markup para clínicas y profesionales de la salud. Alta en Google Search Console y verificación de indexación correcta en ES y MX.</p>
      </div>
    </div>
  </div>

  <div class="alcance-foto">
    <div class="af-badge">Incluido</div>
    <div class="af-text"><strong>Naming &amp; branding de la marca</strong> — Propuesta de naming, identidad visual base (logotipo, paleta, tipografía) y manual mínimo de marca para que el centro nazca con una identidad coherente y aplicable desde el día uno.</div>
  </div>
  {footer(6)}
</div>

<!-- ==================== P07 PROPUESTA ECONÓMICA ==================== -->
<div class="page">
  <div class="sn">05 &middot; Propuesta económica</div>
  <h1 class="st" style="font-size:24pt;margin-bottom:2mm;">Inversión para la <em>web del centro</em>.</h1>
  <p style="font-family:'Poppins',sans-serif;font-size:9pt;color:#5A6B78;margin-bottom:5mm;">Precio cerrado, alcance claro y plazo comprometido. Sin sorpresas.</p>
  <div class="pricing-wrap">
    <div class="tier tier-main">
      <div class="tier-badge">Propuesta seleccionada</div>
      <div class="tier-name">Sitio Web Institucional</div>
      <div class="tier-tag">Desarrollo a medida en HTML para el nuevo centro de psicología 360, operativo en España y México.</div>
      <div class="tier-price-block">
        <div class="tier-price">1.300 <span style="font-size:12pt;">€</span></div>
        <div class="tier-price-sub">Base imponible: 1.300,00 €<br>IVA (21%): 273,00 €</div>
        <div class="tier-price-tot">Total con IVA: 1.573,00 €</div>
      </div>
      <div class="tier-div"></div>
      <ul>
        <li>Diseño y prototipado directo en HTML</li>
        <li>Desarrollo HTML &middot; sitio institucional completo</li>
        <li>Arquitectura de páginas internas (ES &amp; MX)</li>
        <li>Optimización Core Web Vitals</li>
        <li>SEO Base: indexación en Google</li>
        <li>Diseño 100% responsivo (móvil &middot; tablet &middot; desktop)</li>
        <li>Código fuente entregado en tu servidor</li>
        <li>Naming &amp; branding de la marca</li>
        <li>60 días de soporte post-launch</li>
      </ul>
      <div class="tier-foot">
        <strong>Tiempo de entrega:</strong> 45 días desde el kick-off &middot; <strong>Forma de pago:</strong> ver plan al lateral
      </div>
    </div>
    <div class="tier-side">
      <div class="tsc"><h4>Código 100% tuyo</h4><p>Todo el código fuente, repositorios y propiedad intelectual son tuyos desde el día de la entrega. Sin lock-in.</p></div>
      <div class="tsc"><h4>Precio cerrado</h4><p>El precio no varía durante el proyecto. Sin sorpresas ni cobros adicionales por el alcance acordado.</p></div>
      <div class="pay-card">
        <div class="pay-card-title">Plan de pago</div>
        <div class="pay-card-sub">3 cuotas mensuales<br>de 433,33 € + IVA</div>
        <div class="pay-row">
          <div class="pay-dot">1</div>
          <div class="pay-when">Mes 1<br>Firma</div>
          <div class="pay-amount">524,33 €</div>
        </div>
        <div class="pay-row">
          <div class="pay-dot">2</div>
          <div class="pay-when">Mes 2<br>Desarrollo</div>
          <div class="pay-amount">524,33 €</div>
        </div>
        <div class="pay-row">
          <div class="pay-dot">3</div>
          <div class="pay-when">Mes 3<br>Entrega</div>
          <div class="pay-amount">524,34 €</div>
        </div>
      </div>
    </div>
  </div>
  {footer(7)}
</div>

<!-- ==================== P08 SERVICIO COMPLEMENTARIO ==================== -->
<div class="page">
  <div class="sn">06 &middot; Servicio complementario</div>
  <h1 class="st" style="font-size:24pt;margin-bottom:2mm;">Mantener la web <em>viva, posicionada<br>y creciendo</em>.</h1>
  <p style="font-family:'Poppins',sans-serif;font-size:9pt;color:#5A6B78;margin-bottom:5mm;">Un acompañamiento mensual opcional, pensado para que la web no se quede estática después del lanzamiento. SEO, GEO, contenido y mejoras continuas.</p>

  <div class="retainer">
    <div class="retainer-head">
      <div class="rh-left">
        <div class="rh-tag">Plan mensual &middot; opcional</div>
        <h4>Soporte, contenidos y posicionamiento SEO &amp; GEO</h4>
        <div class="rh-sub">Acompañamiento continuo para mantener la web actualizada y mejorar su visibilidad mes a mes en España y México.</div>
      </div>
      <div class="rh-price">
        <div class="rp-num">560<span class="rp-cur">€</span></div>
        <div class="rp-month">/ mes</div>
        <div class="rp-iva">+ IVA (21%)</div>
      </div>
    </div>
    <div class="retainer-body">
      <div class="retainer-grid">
        <div class="rg-item">
          <h5>Actualización de contenidos</h5>
          <p>Cambios, altas y bajas de páginas, equipo, servicios y modalidades. La web siempre refleja lo que el centro está ofreciendo hoy.</p>
        </div>
        <div class="rg-item">
          <h5>Posicionamiento SEO</h5>
          <p>Optimización continua de metadatos, contenido, enlaces internos y Core Web Vitals para escalar en Google en ES y MX.</p>
        </div>
        <div class="rg-item">
          <h5>Posicionamiento GEO</h5>
          <p>Geo-localización en Madrid y CDMX: Google Business, fichas locales, schema y trabajo específico sobre búsquedas locales.</p>
        </div>
        <div class="rg-item">
          <h5>Soporte técnico</h5>
          <p>Hosting monitorizado, backups, correcciones rápidas y mantenimiento técnico de la plataforma sin coste por incidencia.</p>
        </div>
        <div class="rg-item">
          <h5>Reunión mensual</h5>
          <p>Una sesión cada mes para revisar resultados, analizar oportunidades, plantear ideas y definir prioridades del mes siguiente.</p>
        </div>
        <div class="rg-item">
          <h5>Informe mensual</h5>
          <p>Reporte breve con métricas clave: tráfico, posicionamiento, conversiones y aprendizajes accionables para el centro.</p>
        </div>
      </div>
      <div class="retainer-foot">
        <strong>560 € / mes + IVA &middot; Total con IVA: 677,60 € / mes.</strong> Sin permanencia &middot; facturación mensual &middot; activable desde el día siguiente al lanzamiento.
      </div>
    </div>
  </div>
  {footer(8)}
</div>

<!-- ==================== P09 METODOLOGÍA ==================== -->
<div class="page">
  <div class="sn">07 &middot; Metodología</div>
  <h1 class="st">Cuatro fases. Cero sorpresas.<br><em>Entrega en 45 días</em>.</h1>
  <p class="sl">Un proceso claro y predecible desde el primer día. Validas antes de que avancemos. No hay grandes revelaciones al final, hay pequeñas aprobaciones en el camino.</p>
  <div class="method">
    <div class="ms2">
      <div class="mn">1</div>
      <h5>Discovery</h5>
      <p>Kick-off, sesión de naming, mapa de páginas y definición de tono visual. Días 1–3.</p>
    </div>
    <div class="ms2">
      <div class="mn">2</div>
      <h5>Diseño</h5>
      <p>Maquetado y diseño visual directo en HTML, branding base de la marca. Validación antes de avanzar. Sem. 1–2.</p>
    </div>
    <div class="ms2">
      <div class="mn">3</div>
      <h5>Desarrollo</h5>
      <p>HTML a medida, integración de contenidos, optimización de rendimiento y SEO ES/MX. Sem. 3–6.</p>
    </div>
    <div class="ms2">
      <div class="mn">4</div>
      <h5>Lanzamiento</h5>
      <p>Despliegue en producción, verificación de indexación en Google y 60 días de soporte VIP post-launch. Día 45.</p>
    </div>
  </div>

  <h2 style="margin-top:14mm;">Comunicación durante el proyecto</h2>
  <p>Tendrás un canal de comunicación directo con tu responsable de proyecto. Demos de avance en las semanas clave, donde puedes ver la web en tiempo real e indicar ajustes antes del siguiente sprint. Sin sorpresas al final, sin interpretaciones libres del briefing.</p>
  {footer(9)}
</div>

<!-- ==================== P10 PRÓXIMOS PASOS ==================== -->
<div class="page">
  <div class="sn">08 &middot; Cómo arrancamos</div>
  <h1 class="st" style="font-size:26pt;">De hoy al lanzamiento<br>en <em>45 días</em>.</h1>
  <p class="sl" style="margin-bottom:5mm;">No hay que decidir nada complejo hoy. Una llamada de 30 minutos es suficiente para alinear el alcance y arrancar.</p>
  <div class="rs">
    <div class="rt">Día 0</div>
    <div class="rc"><h4>Llamada de alineación (30 min &middot; gratuita)</h4><p>Revisamos juntos la visión del centro, confirmamos el alcance de páginas, el enfoque 360 y los matices entre la operación de España y México.</p></div>
  </div>
  <div class="rs">
    <div class="rt">Día +3</div>
    <div class="rc"><h4>Firma y primera cuota</h4><p>Firmamos el acuerdo, se realiza el pago de la primera cuota (524,33 € con IVA) y asignamos el equipo de proyecto. Arranca el kick-off oficial.</p></div>
  </div>
  <div class="rs">
    <div class="rt">Semana 1–2</div>
    <div class="rc"><h4>Naming, branding y diseño</h4><p>Trabajamos la propuesta de naming y branding base. Presentamos el diseño visual construido directamente en HTML. Tú apruebas, pides ajustes o lo confirmas.</p></div>
  </div>
  <div class="rs">
    <div class="rt">Mes 2</div>
    <div class="rc"><h4>Segunda cuota &middot; desarrollo</h4><p>Pago de la segunda cuota (524,33 € con IVA) en pleno desarrollo, con demos verificables. Construcción de páginas, Core Web Vitals y SEO base.</p></div>
  </div>
  <div class="rs">
    <div class="rt">Día 45 &middot; Mes 3</div>
    <div class="rc"><h4>Lanzamiento, entrega y pago final</h4><p>Despliegue en producción, verificación de indexación en Google Search Console y pago de la tercera cuota (524,34 € con IVA). Opcionalmente arranca el plan mensual de soporte, contenidos, SEO &amp; GEO.</p></div>
  </div>
  {footer(10)}
</div>

<!-- ==================== P11 CTA ==================== -->
<div class="cta-page">
  <div class="bg-glow g3"></div>
  <div class="cta-tag">Próximo paso</div>
  <h1 class="cta-title">Paola —<br>arranquemos con<br>una <em>llamada de 30 min</em>.</h1>
  <p class="cta-body">En 30 minutos alineamos el alcance, resolvemos todas las dudas y salimos con un plan concreto. Si Valírica no es la opción correcta para este proyecto, también te lo decimos.</p>
  <div class="cta-row">
    <div class="cta-box"><div class="cta-box-label">Email</div><div class="cta-box-content">juan@valirica.com</div></div>
    <div class="cta-box"><div class="cta-box-label">WhatsApp Business</div><div class="cta-box-content">+34 600 876 538</div></div>
  </div>
  <p class="cta-body" style="font-size:10.5pt;">Escríbenos con cualquier duda sobre la propuesta y te respondemos a la brevedad.</p>
  <div class="sig">
    <div class="sig-name">Juan</div>
    <div class="sig-role">Valírica<br>juan@valirica.com</div>
  </div>
</div>

<!-- ==================== P12 BACK COVER ==================== -->
<div class="back-cover">
  <div class="bg-glow g4"></div>
  <img class="back-logo" src="{LOGO}" alt="Valírica">
  <h2 class="bq">La consulta ya tiene<br>su lugar y su enfoque.<br><em>Ahora que también<br>tenga su presencia digital.</em></h2>
  <div class="bd"></div>
  <div class="bm">
    <div>
      <h5>Contacto</h5>
      <p>juan@valirica.com<br>valirica.com<br>Madrid &middot; CDMX &middot; Remoto</p>
    </div>
    <div>
      <h5>Documento</h5>
      <p>Propuesta Web &middot; Centro de Psicología 360<br>Preparada para Paola &middot; Confidencial<br>&copy; Valírica &middot; Todos los derechos reservados</p>
    </div>
  </div>
</div>

</body>
</html>"""

out_html = os.path.join(WORKDIR, "propuesta-psicologia-gen.html")
with open(out_html, "w", encoding="utf-8") as f:
    f.write(HTML)
print(f"HTML: {out_html}  ({len(HTML):,} bytes)")

CHROME = "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
out_pdf = os.path.join(WORKDIR, "Propuesta-Psicologia.pdf")

cmd = [
    CHROME, "--headless=new", "--disable-gpu", "--no-sandbox",
    "--disable-software-rasterizer", "--run-all-compositor-stages-before-draw",
    "--virtual-time-budget=8000",
    f"--print-to-pdf={out_pdf}",
    "--no-pdf-header-footer", "--print-to-pdf-no-header",
    f"file://{out_html}",
]

print("Running Chrome headless…")
r = subprocess.run(cmd, capture_output=True, text=True, timeout=60)
if r.returncode == 0:
    print(f"PDF: {out_pdf}  ({os.path.getsize(out_pdf):,} bytes)")
else:
    print("STDERR:", r.stderr[:2000])
    sys.exit(1)
