#!/usr/bin/env python3
"""Generate Propuesta-Espinel.pdf via Chrome headless.

Propuesta de SOCIEDAD DE CRECIMIENTO POR RESULTADOS para Espinel Abogados.
Modelo: Meses 1-3 -> $300 honorario Valírica + $50 budget Google Ads ($350/mes).
Mes 4+ (si se cumple el objetivo de captación) -> $350 honorario + ads ampliado.
Si no se cumple: sin permanencia y el cliente se queda con toda la infraestructura.
"""
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; }

/* ── PAGES ──────────────────────────────────────── */

.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;
}

/* ── GLOWS ──────────────────────────────────────── */

.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 ──────────────────────────────────────── */

.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; }

/* ── FOOTER ─────────────────────────────────────── */

.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); }

/* ── SECTION LABELS ─────────────────────────────── */

.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 (P02) ────────────────────────────────── */

.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 ──────────────────────────────────────── */

.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 (P04) ─────────────────────────────── */

.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; }

/* ── MODELO (P05) ───────────────────────────────── */

.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 (P06) ──────────────────────────────── */

.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 (P07) ──────────────────────────────── */

.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; }

/* ── METODOLOGÍA (P08) ──────────────────────────── */

.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; }

/* ── ROADMAP (P09) ──────────────────────────────── */

.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 ────────────────────────────────────────── */

.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 COVER ─────────────────────────────────── */

.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; }
}
"""

def footer(n, label="Valírica · Propuesta · Espinel Abogados"):
    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 · Espinel Abogados</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 Espinel Abogados &middot; espinelabogados.com</div>
  <div class="cover-tag">Propuesta &middot; Sociedad de Crecimiento Digital</div>
  <h1 class="cover-title">
    Más clientes para<br>
    Espinel Abogados<br>
    <span class="accent">Derecho Energético</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 ADRIANA ==================== -->
<div class="page carta">
  <div class="carta-saludo">Para Adriana Espinel</div>
  <h2 class="carta-quote">
    Tu próximo cliente no te<br>
    busca por tu nombre. Busca<br>
    <em>resolver un problema</em> —<br>
    y tiene que encontrarte a ti.
  </h2>
  <div class="carta-rule"></div>
  <p class="carta-body">En derecho energético las decisiones se toman antes de la primera llamada. El director jurídico de una generadora, el sponsor de un proyecto renovable o el equipo de una multinacional buscan en internet a quien entienda de PPAs, regulación CREG, arbitraje o hidrógeno. Ese primer contacto digital decide si te consideran.</p>
  <p class="carta-body">Espinel Abogados ya tiene una base sólida: un sitio construido con rigor técnico, rápido, optimizado y diseñado para transmitir autoridad. Esa infraestructura ya existe y ya es tuya. El trabajo de fondo está hecho.</p>
  <p class="carta-body">Lo que proponemos ahora no es rediseñar nada. Es poner ese motor a trabajar: convertir el sitio en una fuente constante de consultas cualificadas mediante SEO, contenido y campañas de Google Ads gestionadas con criterio.</p>
  <p class="carta-body">Y lo proponemos de la forma más honesta posible: una cuota baja, una ventana de tres meses para demostrar resultados, y sin atarte a nada. Si funciona, seguimos. Si no, te quedas con todo lo construido. El riesgo lo asumimos nosotros.</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, desarrollamos y operamos plataformas web 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">100%</div><div class="stl">Infraestructura tuya</div></div>
    <div class="stat"><div class="stn">0</div><div class="stl">Permanencia exigida</div></div>
    <div class="stat"><div class="stn">USD</div><div class="stl">Modelo por resultados</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, contenido, optimización de campañas— pero cada decisión de estrategia, diseño y comunicación la toma una persona.</p>
  <p>El resultado es simple: ejecución más rápida, criterio real detrás de cada acción y un costo menor para el cliente. Y en esta propuesta, además, alineamos nuestros incentivos con los tuyos: solo tiene sentido continuar si conseguimos clientes.</p>
  {footer(3)}
</div>

<!-- ==================== P04 EL PROYECTO ==================== -->
<div class="page">
  <div class="sn">02 &middot; El proyecto</div>
  <h1 class="st">Lo que el motor digital<br>debe <em>hacer por ti</em>.</h1>
  <p class="sl">El sitio de una firma de este nivel no es una tarjeta de presentación. Es el primer filtro, la primera prueba de autoridad y el primer canal de captación —todo al mismo tiempo.</p>
  <div class="proyecto-grid">
    <div class="pj-card">
      <div class="pj-card-icon">Objetivo 01</div>
      <h4>Captar al cliente correcto</h4>
      <p>Cada visita debe terminar en una consulta cualificada del sector energético. No buscamos tráfico por volumen; buscamos clientes potenciales reales.</p>
    </div>
    <div class="pj-card">
      <div class="pj-card-icon">Objetivo 02</div>
      <h4>Demostrar autoridad</h4>
      <p>Regulación, arbitraje, hidrógeno, transición. La trayectoria de Adriana y la firma tiene que respirar en cada página y construir confianza desde el primer segundo.</p>
    </div>
    <div class="pj-card">
      <div class="pj-card-icon">Objetivo 03</div>
      <h4>Ser encontrado en Google</h4>
      <p>Cuando alguien busca un abogado de regulación energética o de arbitraje en energía, Espinel tiene que aparecer. SEO técnico y Google Ads trabajando juntos.</p>
    </div>
    <div class="pj-card">
      <div class="pj-card-icon">Objetivo 04</div>
      <h4>Crecer con la firma</h4>
      <p>Una base lista para escalar a nuevas áreas, idiomas o mercados de LATAM sin rehacer nada. La infraestructura ya está; la hacemos rendir.</p>
    </div>
  </div>
  {footer(4)}
</div>

<!-- ==================== P05 EL MODELO ==================== -->
<div class="page">
  <div class="sn">03 &middot; El modelo</div>
  <h1 class="st">Una sociedad alineada a<br><em>resultados</em>, sin riesgo para ti.</h1>
  <p class="sl">La mayoría de las agencias cobran un gran anticipo y desaparecen. Nosotros proponemos lo contrario: una cuota baja, una ventana para demostrar y la libertad de salir cuando quieras.</p>
  <div class="compare">
    <div class="compare-col">
      <div class="compare-header old">Agencia tradicional</div>
      <div class="compare-body">
        <div class="compare-item"><div class="ci-icon" style="color:#e05555;">✗</div><div class="ci-text"><strong>Anticipo alto sin garantías</strong> — pagas por adelantado y el resultado es un problema tuyo</div></div>
        <div class="compare-item"><div class="ci-icon" style="color:#e05555;">✗</div><div class="ci-text"><strong>Contratos con permanencia</strong> — te atan durante meses aunque no funcione</div></div>
        <div class="compare-item"><div class="ci-icon" style="color:#e05555;">✗</div><div class="ci-text"><strong>Lock-in del activo</strong> — si te vas, te quedas sin acceso a lo construido</div></div>
        <div class="compare-item"><div class="ci-icon" style="color:#e05555;">✗</div><div class="ci-text"><strong>Cobran por entregar</strong> — no por conseguirte clientes reales</div></div>
        <div class="compare-item"><div class="ci-icon" style="color:#e05555;">✗</div><div class="ci-text"><strong>El riesgo lo asumes tú</strong> — el cliente es quien pierde si no hay retorno</div></div>
      </div>
    </div>
    <div class="compare-col new-col">
      <div class="compare-header new">Modelo Valírica</div>
      <div class="compare-body">
        <div class="compare-item"><div class="ci-icon" style="color:#12d6e0;">✓</div><div class="ci-text"><strong>Cuota mensual baja</strong> — $300 de honorario + $50 de campaña, sin grandes anticipos</div></div>
        <div class="compare-item"><div class="ci-icon" style="color:#12d6e0;">✓</div><div class="ci-text"><strong>Tres meses para demostrar</strong> — una ventana clara con resultados reales sobre la mesa</div></div>
        <div class="compare-item"><div class="ci-icon" style="color:#12d6e0;">✓</div><div class="ci-text"><strong>Sin permanencia</strong> — si no funciona, no seguimos; sin penalización</div></div>
        <div class="compare-item"><div class="ci-icon" style="color:#12d6e0;">✓</div><div class="ci-text"><strong>Te quedas con todo</strong> — la infraestructura web es tuya, pase lo que pase</div></div>
        <div class="compare-item"><div class="ci-icon" style="color:#12d6e0;">✓</div><div class="ci-text"><strong>Continuamos solo si hay clientes</strong> — nuestros incentivos alineados con los tuyos</div></div>
      </div>
    </div>
  </div>
  <p style="margin-top:5mm; font-family:'Poppins',sans-serif; font-size:9pt; color:#5A6B78;">La infraestructura web ya está construida con estándar premium y es 100% tuya desde el primer día. Lo que financias cada mes es la operación que la convierte en clientes: SEO, contenido y campañas.</p>
  {footer(5)}
</div>

<!-- ==================== P06 ALCANCE ==================== -->
<div class="page">
  <div class="sn">04 &middot; Alcance del trabajo</div>
  <h1 class="st">Todo lo que ponemos<br>a <em>trabajar</em> cada mes.</h1>
  <p class="sl" style="margin-bottom:5mm;">Alcance claro. Sin permanencia. Sin letra pequeña.</p>

  <div class="alcance-list">
    <div class="alcance-item">
      <div class="ai-label">Infraestructura web</div>
      <div class="ai-content">
        <h4>Sitio institucional premium, mantenido</h4>
        <p>El sitio multipágina ya construido —rápido, optimizado y 100% propiedad de Espinel— con mantenimiento técnico, actualizaciones y mejoras continuas incluidas durante toda la operación.</p>
      </div>
    </div>
    <div class="alcance-item">
      <div class="ai-label">SEO &amp; contenido</div>
      <div class="ai-content">
        <h4>Posicionamiento orgánico del sector</h4>
        <p>Optimización técnica continua y contenido jurídico-energético que construye autoridad e indexación para las búsquedas que hacen tus clientes potenciales: regulación, arbitraje, hidrógeno, transición.</p>
      </div>
    </div>
    <div class="alcance-item">
      <div class="ai-label">Google Ads</div>
      <div class="ai-content">
        <h4>Campañas de captación gestionadas</h4>
        <p>Diseño, lanzamiento y gestión de campañas en Google para captar consultas cualificadas desde el primer mes. Optimización continua del presupuesto hacia las palabras y servicios que convierten.</p>
      </div>
    </div>
    <div class="alcance-item">
      <div class="ai-label">Presencia &amp; LinkedIn</div>
      <div class="ai-content">
        <h4>Refuerzo de autoridad B2B</h4>
        <p>Seguimiento digital y refuerzo de la autoridad de Adriana y de la firma en LinkedIn, el canal donde está el decisor del sector energético. Coherencia de mensaje entre el sitio y el perfil.</p>
      </div>
    </div>
    <div class="alcance-item">
      <div class="ai-label">Analítica &amp; reporte</div>
      <div class="ai-content">
        <h4>Medición mensual transparente</h4>
        <p>Medición de consultas captadas, origen del tráfico y rendimiento de campañas. Informe mensual claro: qué está funcionando, qué se ajusta y cómo avanzamos hacia el objetivo acordado.</p>
      </div>
    </div>
  </div>

  <div class="alcance-foto">
    <div class="af-badge">Incluido</div>
    <div class="af-text"><strong>Infraestructura 100% tuya</strong> — Pase lo que pase al final de los tres meses, todo el sitio, el código y los activos digitales quedan en propiedad de Espinel Abogados. Sin lock-in, sin rescate, sin permanencia.</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;">Un modelo en <em>dos fases</em>. Decides con datos.</h1>
  <p style="font-family:'Poppins',sans-serif;font-size:9pt;color:#5A6B78;margin-bottom:5mm;">Pagas poco, demuestras resultados durante tres meses y decides la continuidad con cifras reales sobre la mesa.</p>
  <div class="pricing-wrap">
    <div class="tier tier-main">
      <div class="tier-badge">Punto de partida</div>
      <div class="tier-name">Fase 1 &middot; Validación</div>
      <div class="tier-tag">Meses 1 a 3. Tres meses para convertir la infraestructura en clientes reales. Sin permanencia.</div>
      <div class="tier-price-block">
        <div class="tier-price"><span class="tier-price-cur">$</span>350 <span style="font-size:12pt;">USD</span><span style="font-size:9pt;color:rgba(255,255,255,.65);"> / mes</span></div>
        <div class="tier-price-sub">$300 USD &middot; Honorario Valírica (SEO, contenido, gestión, mantenimiento)<br>$50 USD &middot; Presupuesto de campaña en Google Ads</div>
        <div class="tier-price-tot">Total: $350 USD / mes &middot; durante 3 meses</div>
      </div>
      <div class="tier-div"></div>
      <ul>
        <li>Infraestructura web premium mantenida</li>
        <li>SEO técnico y contenido del sector energético</li>
        <li>Campañas de Google Ads gestionadas</li>
        <li>Refuerzo de presencia y autoridad en LinkedIn</li>
        <li>Analítica y reporte mensual de consultas</li>
        <li>Sin permanencia ni penalización por salir</li>
        <li>Infraestructura 100% en propiedad de Espinel</li>
      </ul>
      <div class="tier-foot">
        <strong>Duración:</strong> 3 meses &middot; pago mensual<br>
        <strong>Evaluación:</strong> al cierre del mes 3, con resultados sobre la mesa
      </div>
    </div>
    <div class="tier-side">
      <div class="tsc"><h4>Fase 2 &middot; Continuidad</h4><p>Si al final de los 3 meses se cumple el objetivo de captación acordado, continuamos: $350 USD/mes de honorario más un presupuesto de Google Ads ampliado.</p></div>
      <div class="tsc"><h4>Si no se cumple</h4><p>No seguimos. Sin penalización ni permanencia. Te quedas con toda la infraestructura web, lista y en propiedad de Espinel.</p></div>
      <div class="tsc"><h4>El objetivo</h4><p>Definimos juntos, en la llamada de alineación, la meta concreta de captación de clientes que marca el éxito de la fase.</p></div>
    </div>
  </div>
  {footer(7)}
</div>

<!-- ==================== P08 METODOLOGÍA ==================== -->
<div class="page">
  <div class="sn">06 &middot; Metodología</div>
  <h1 class="st">Cuatro fases. Una decisión<br>con datos. <em>Evaluación al mes 3</em>.</h1>
  <p class="sl">Un proceso transparente. Cada mes ves qué funciona. La continuidad no se asume: se decide con resultados sobre la mesa.</p>
  <div class="method">
    <div class="ms2">
      <div class="mn">1</div>
      <h5>Diagnóstico</h5>
      <p>Revisión del sitio, del mercado y de las búsquedas del sector. Definición conjunta del objetivo de captación. Semana 1.</p>
    </div>
    <div class="ms2">
      <div class="mn">2</div>
      <h5>Activación</h5>
      <p>Lanzamiento de campañas de Google Ads, SEO técnico y primeros contenidos. El motor empieza a captar. Mes 1.</p>
    </div>
    <div class="ms2">
      <div class="mn">3</div>
      <h5>Optimización</h5>
      <p>Ajuste continuo de campañas, contenido y conversión según los datos reales de consultas. Meses 2–3.</p>
    </div>
    <div class="ms2">
      <div class="mn">4</div>
      <h5>Evaluación</h5>
      <p>Revisión conjunta de resultados frente al objetivo. Decisión go / no-go con datos. Fin del mes 3.</p>
    </div>
  </div>

  <h2 style="margin-top:14mm;">Comunicación durante la sociedad</h2>
  <p>Tendrás un canal de comunicación directo con tu responsable de proyecto y un informe mensual con las consultas captadas, su origen y el rendimiento de cada campaña. Sin sorpresas: sabes en todo momento si la inversión está dando resultados y hacia dónde se ajusta el siguiente mes.</p>
  {footer(8)}
</div>

<!-- ==================== P09 PRÓXIMOS PASOS ==================== -->
<div class="page">
  <div class="sn">07 &middot; Cómo arrancamos</div>
  <h1 class="st" style="font-size:26pt;">De hoy a los primeros<br>clientes en <em>semanas</em>.</h1>
  <p class="sl" style="margin-bottom:5mm;">No hay que decidir nada complejo hoy. Una llamada de 30 minutos basta para definir el objetivo 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>Definimos el objetivo de captación, las áreas prioritarias —regulación, arbitraje, hidrógeno, transición— y el enfoque de las campañas.</p></div>
  </div>
  <div class="rs">
    <div class="rt">Día +3</div>
    <div class="rc"><h4>Arranque de la sociedad</h4><p>Confirmamos el acuerdo, se activa la cuota mensual ($300 honorario + $50 campaña) y arranca la fase de validación.</p></div>
  </div>
  <div class="rs">
    <div class="rt">Mes 1</div>
    <div class="rc"><h4>Activación del motor</h4><p>Campañas de Google Ads en marcha, SEO técnico aplicado y primeros contenidos publicados. Empiezan a llegar las primeras consultas.</p></div>
  </div>
  <div class="rs">
    <div class="rt">Meses 2–3</div>
    <div class="rc"><h4>Optimización y reporte</h4><p>Afinamos campañas y contenido según los datos reales. Informe mensual de consultas captadas, origen y rendimiento.</p></div>
  </div>
  <div class="rs">
    <div class="rt">Fin del mes 3</div>
    <div class="rc"><h4>Evaluación y decisión</h4><p>Revisamos resultados frente al objetivo. Continuamos a la Fase 2 o cerramos —con toda la infraestructura ya en tus manos.</p></div>
  </div>
  {footer(9)}
</div>

<!-- ==================== P10 CTA ==================== -->
<div class="cta-page">
  <div class="bg-glow g3"></div>
  <div class="cta-tag">Próximo paso</div>
  <h1 class="cta-title">Adriana —<br>pongamos el motor<br>a <em>trabajar</em>.</h1>
  <p class="cta-body">En 30 minutos definimos el objetivo de captación, resolvemos todas las dudas y salimos con un plan concreto. Si Valírica no es la opción correcta para esta etapa, 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>

<!-- ==================== P11 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 autoridad de Espinel<br>ya está construida.<br><em>Ahora hagamos que el cliente<br>correcto la encuentre.</em></h2>
  <div class="bd"></div>
  <div class="bm">
    <div>
      <h5>Contacto</h5>
      <p>juan@valirica.com<br>valirica.com<br>Madrid &middot; Bogotá &middot; Remoto</p>
    </div>
    <div>
      <h5>Documento</h5>
      <p>Propuesta &middot; Espinel Abogados<br>Preparada para Adriana Espinel &middot; Confidencial<br>&copy; Valírica &middot; Todos los derechos reservados</p>
    </div>
  </div>
</div>

</body>
</html>"""

out_html = os.path.join(WORKDIR, "propuesta-espinel.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-Espinel.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)
