#!/usr/bin/env python3
"""Generate Propuesta-ReyGuerrero.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; }

/* ── 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; }

/* ── WHY HTML (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 Web · Rey Guerrero"):
    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 · Rey Guerrero | Sabor Pacífico</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 Clau &amp; Rey · reyguerrero.co</div>
  <div class="cover-tag">Propuesta Web · Sitio Institucional</div>
  <h1 class="cover-title">
    Presencia digital para<br>
    Rey Guerrero<br>
    <span class="accent">Sabor Pacífico</span>.
  </h1>
  <div class="cover-bottom">
    <div>
      <div class="cover-meta">Valírica · 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 CLAU Y REY ==================== -->
<div class="page carta">
  <div class="carta-saludo">Para Clau &amp; Rey</div>
  <h2 class="carta-quote">
    Rey Guerrero no es solo un restaurante.<br>
    Es una <em>narrativa cultural</em> que merece<br>
    una presencia digital a su altura.
  </h2>
  <div class="carta-rule"></div>
  <p class="carta-body">Cuando alguien busca el mejor restaurante de cocina del Pacífico en Bogotá, el primer lugar al que llega antes de cruzar la puerta es el sitio web. Ese primer contacto digital tiene que comunicar en tres segundos lo que Rey Guerrero comunica en cada plato: identidad, raíces y excelencia.</p>
  <p class="carta-body">Hoy el sitio actual cumple su función, pero está construido sobre WordPress —una plataforma que limita el rendimiento, frena la velocidad de carga y hace difícil escalar hacia experiencias digitales más ambiciosas: reservas en línea, menú interactivo, galería de eventos, integración con medios.</p>
  <p class="carta-body">Esta propuesta no es solo un rediseño. Es la migración a una base técnica limpia, rápida y 100% de ustedes, sobre la que pueden construir cualquier cosa que el negocio necesite en el futuro, sin depender de plugins ni licencias.</p>
  <p class="carta-body">Estamos listos para arrancar. Y tenemos muchas ganas de contar esta historia.</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 · 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 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 · El proyecto</div>
  <h1 class="st">Lo que el sitio de Rey Guerrero<br>debe <em>hacer por ustedes</em>.</h1>
  <p class="sl">Un sitio web para un restaurante de este nivel no es un folleto digital. Es el primer maître, el primer plato y la primera impresión —todo al mismo tiempo.</p>
  <div class="proyecto-grid">
    <div class="pj-card">
      <div class="pj-card-icon">Objetivo 01</div>
      <h4>Capturar y convertir</h4>
      <p>Cada visita tiene que terminar en una reserva, una llamada o un evento agendado. El sitio trabaja por ustedes las 24 horas.</p>
    </div>
    <div class="pj-card">
      <div class="pj-card-icon">Objetivo 02</div>
      <h4>Narrar la identidad Pacífica</h4>
      <p>La cocina ancestral, la historia de Clau y Rey, el vínculo con el Pacífico colombiano. Todo eso tiene que respirar 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, velocidad de carga optimizada para que Google los posicione mejor.</p>
    </div>
    <div class="pj-card">
      <div class="pj-card-icon">Objetivo 04</div>
      <h4>Escalar cuando quieran</h4>
      <p>Construido en HTML puro, sin dependencias de plugins. Cuando Rey Guerrero crezca, el sitio crece con ustedes: reservas online, tienda, eventos, app.</p>
    </div>
  </div>
  {footer(4)}
</div>

<!-- ==================== P05 POR QUÉ HTML ==================== -->
<div class="page">
  <div class="sn">03 · La decisión técnica</div>
  <h1 class="st">Por qué salir de WordPress<br>es la <em>mejor decisión</em> que pueden tomar.</h1>
  <p class="sl">WordPress fue la solución correcta en su momento. Hoy es un lastre de rendimiento para un negocio que quiere competir en digital.</p>
  <div class="compare">
    <div class="compare-col">
      <div class="compare-header old">WordPress actual</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, base de datos pesada, hosting genérico</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 el posicionamiento</div></div>
        <div class="compare-item"><div class="ci-icon" style="color:#e05555;">✗</div><div class="ci-text"><strong>Actualizaciones constantes</strong> — plugins que rompen cosas, vulnerabilidades de seguridad</div></div>
        <div class="compare-item"><div class="ci-icon" style="color:#e05555;">✗</div><div class="ci-text"><strong>Difícil de escalar</strong> — agregar funcionalidades complejas requiere 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> — el theme limita lo que se puede hacer visualmente</div></div>
      </div>
    </div>
    <div class="compare-col new-col">
      <div class="compare-header new">Nuevo sitio en HTML</div>
      <div class="compare-body">
        <div class="compare-item"><div class="ci-icon" style="color:var(--cyan);">✓</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:var(--cyan);">✓</div><div class="ci-text"><strong>Core Web Vitals optimizados</strong> — Google los posiciona mejor, más tráfico orgánico</div></div>
        <div class="compare-item"><div class="ci-icon" style="color:var(--cyan);">✓</div><div class="ci-text"><strong>Cero mantenimiento técnico</strong> — no hay plugins que actualizar ni bases de datos que vigilar</div></div>
        <div class="compare-item"><div class="ci-icon" style="color:var(--cyan);">✓</div><div class="ci-text"><strong>Escalable a cualquier tecnología</strong> — cuando quieran, agregamos React, reservas, e-commerce o una app</div></div>
        <div class="compare-item"><div class="ci-icon" style="color:var(--cyan);">✓</div><div class="ci-text"><strong>Diseño libre</strong> — el sitio 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:var(--muted);">El blog existente de WordPress se migra íntegramente: descarga y respaldo completo de la base de datos para que no pierdan ningún contenido.</p>
  {footer(5)}
</div>

<!-- ==================== P06 ALCANCE ==================== -->
<div class="page">
  <div class="sn">04 · 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 de Rey Guerrero, construido directamente en HTML/CSS. Revisión y validación con Clau y Rey 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 del sitio: menú, historia, servicios, el fogón, prensa, reservas y contacto. Diseño responsivo para móvil, tablet y escritorio.</p>
      </div>
    </div>
    <div class="alcance-item">
      <div class="ai-label">Migración WordPress</div>
      <div class="ai-content">
        <h4>Respaldo completo del blog existente</h4>
        <p>Descarga y respaldo completo de la base de datos de WordPress. Exportación de todo el contenido del blog para que no se pierda ninguna entrada ni archivo.</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 rendimiento de Google: LCP, FID y CLS en verde. Carga máxima optimizada para retención de usuarios y 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>Configuración de metadatos, sitemap XML, robots.txt, Open Graph y schema markup para restaurantes. Alta en Google Search Console y verificación de indexación correcta.</p>
      </div>
    </div>
  </div>

  <div class="alcance-foto">
    <div class="af-badge">Incluido</div>
    <div class="af-text"><strong>Sesión fotográfica · 1 hora</strong> — Visita de fotógrafo profesional al restaurante para capturar el ambiente, los platos y el espacio. Las imágenes se integran directamente en el sitio.</div>
  </div>
  {footer(6)}
</div>

<!-- ==================== P07 PROPUESTA ECONÓMICA ==================== -->
<div class="page">
  <div class="sn">05 · Propuesta Económica</div>
  <h1 class="st" style="font-size:24pt;margin-bottom:2mm;">Inversión para el <em>sitio web de Rey Guerrero</em>.</h1>
  <p style="font-family:'Poppins',sans-serif;font-size:9pt;color:var(--muted);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 Rey Guerrero | Sabor Pacífico, optimizado para rendimiento y listo para escalar.</div>
      <div class="tier-price-block">
        <div class="tier-price"><span class="tier-price-cur">$</span>3.000.000 <span style="font-size:12pt;">COP</span></div>
        <div class="tier-price-sub">Subtotal: $3.000.000 COP<br>IVA (19%): $570.000 COP</div>
        <div class="tier-price-tot">Total con IVA: $3.570.000 COP</div>
      </div>
      <div class="tier-div"></div>
      <ul>
        <li>Diseño y prototipado directo en HTML</li>
        <li>Desarrollo HTML · sitio institucional completo</li>
        <li>Arquitectura de páginas internas</li>
        <li>Migración y respaldo completo de WordPress</li>
        <li>Optimización Core Web Vitals</li>
        <li>SEO Base: indexación en Google</li>
        <li>Diseño 100% responsivo (móvil · tablet · desktop)</li>
        <li>Código fuente entregado en su servidor</li>
        <li>Sesión fotográfica de 1 hora incluida</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<br>
        <strong>Forma de pago:</strong> 50% al inicio &middot; 50% al finalizar
      </div>
    </div>
    <div class="tier-side">
      <div class="tsc"><h4>Código 100% de ustedes</h4><p>Todo el código fuente, repositorios y propiedad intelectual son de ustedes 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="tsc"><h4>Fotógrafo incluido</h4><p>Una sesión de 1 hora en el restaurante para capturar imágenes reales de Rey Guerrero, listas para el sitio.</p></div>
    </div>
  </div>
  {footer(7)}
</div>

<!-- ==================== P08 METODOLOGÍA ==================== -->
<div class="page">
  <div class="sn">06 · 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. Ustedes validan 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, revisión del sitio actual, mapa de páginas y definición del 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. Revisión con Clau y Rey antes de avanzar a la versión final. Sem. 1–2.</p>
    </div>
    <div class="ms2">
      <div class="mn">3</div>
      <h5>Desarrollo</h5>
      <p>HTML a medida. Sesión fotográfica. Integración de contenidos, optimización de rendimiento y SEO. 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án un canal de comunicación directo con su responsable de proyecto. Demos de avance en las semanas clave, donde pueden ver el sitio en tiempo real e indicar ajustes antes del siguiente sprint. Sin sorpresas al final, sin interpretaciones libres del briefing.</p>
  {footer(8)}
</div>

<!-- ==================== P09 PRÓXIMOS PASOS ==================== -->
<div class="page">
  <div class="sn">07 · 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 · gratuita)</h4><p>Revisamos el sitio actual de reyguerrero.co, confirmamos el alcance de páginas, el tono visual y cualquier contenido que quieran conservar o mejorar.</p></div>
  </div>
  <div class="rs">
    <div class="rt">Día +3</div>
    <div class="rc"><h4>Confirmación y contrato</h4><p>Firmamos el acuerdo, se realiza el pago del 50% inicial 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>Maquetado y validación del diseño</h4><p>Presentamos el diseño visual construido directamente en HTML. Ustedes lo aprueban, piden ajustes o lo confirman. Nada avanza sin su validación.</p></div>
  </div>
  <div class="rs">
    <div class="rt">Semana 2–3</div>
    <div class="rc"><h4>Sesión fotográfica en el restaurante</h4><p>Visita de nuestro fotógrafo a Rey Guerrero: ambiente, platos, equipo y espacio. Las imágenes se integran directamente en el desarrollo.</p></div>
  </div>
  <div class="rs">
    <div class="rt">Semanas 3–6</div>
    <div class="rc"><h4>Desarrollo, optimización y contenidos</h4><p>Construcción del sitio en HTML, migración del blog de WordPress, configuración de Core Web Vitals, SEO base y pruebas finales en todos los dispositivos.</p></div>
  </div>
  <div class="rs">
    <div class="rt">Día 45</div>
    <div class="rc"><h4>Lanzamiento y entrega</h4><p>Despliegue en producción, verificación de indexación en Google Search Console y pago del 50% restante. Comienza el período de soporte VIP de 60 días.</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">Clau, Rey —<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 se los 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 les 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 cocina del Pacífico<br>ya tiene voz en el mundo.<br><em>Ahora que también<br>tenga 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; Bogotá &middot; Remoto</p>
    </div>
    <div>
      <h5>Documento</h5>
      <p>Propuesta Web &middot; Rey Guerrero | Sabor Pacífico<br>Preparada para Clau &amp; Rey &middot; Confidencial<br>&copy; Valírica &middot; Todos los derechos reservados</p>
    </div>
  </div>
</div>

</body>
</html>"""

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