#!/usr/bin/env python3
"""Generate Propuesta-Fasmer.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:26pt; font-weight:700;
  line-height:1.18; color:var(--navy); letter-spacing:-.02em;
  max-width:162mm; margin-bottom:12mm;
}
.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:11mm; }

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

/* ── MÓDULOS (cards compactas apiladas, 3 caben en 1 página) ── */

.mod-card {
  background:var(--paper); border-radius:4mm; padding:5mm 6mm 4.5mm 6mm;
  border-left:3px solid var(--cyan); margin-bottom:3.5mm;
  page-break-inside:avoid;
}
.mod-head { margin-bottom:1.5mm; }
.mod-tag {
  display:block;
  font-family:"Poppins",sans-serif; font-size:6.5pt; letter-spacing:.22em;
  text-transform:uppercase; color:var(--cyan); font-weight:700; margin-bottom:1.5mm;
}
.mod-title { font-family:"Playfair Display",serif; font-size:13pt; font-weight:700; color:var(--navy); line-height:1.2; text-transform:none; letter-spacing:-.005em; margin:0; }
.mod-desc  { font-family:"Poppins",sans-serif; font-size:8pt; line-height:1.5; color:var(--muted); margin-bottom:3mm; }
.mod-list  { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:1mm 5mm; }
.mod-list li {
  font-family:"Poppins",sans-serif; font-size:7.8pt; line-height:1.45;
  color:var(--soft-navy); padding-left:4.5mm; position:relative;
}
.mod-list li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--cyan); font-weight:700; font-size:8pt; }

/* ── ROLES ──────────────────────────────────────── */

.roles { display:grid; grid-template-columns:1fr 1fr; gap:5mm; margin-top:6mm; }
.role-card {
  padding:7mm; background:var(--paper); border-radius:4mm;
  border-top:3px solid var(--cyan);
}
.role-tag {
  font-family:"Poppins",sans-serif; font-size:7pt; letter-spacing:.22em;
  text-transform:uppercase; color:var(--cyan); font-weight:700; margin-bottom:2.5mm;
}
.role-card h4 { font-family:"Playfair Display",serif; font-size:14pt; font-weight:700; color:var(--navy); margin-bottom:3mm; }
.role-card ul { list-style:none; padding:0; margin:0; }
.role-card ul li {
  font-family:"Poppins",sans-serif; font-size:8.5pt; line-height:1.55;
  color:var(--soft-navy); padding-left:5mm; position:relative; margin-bottom:1.5mm;
}
.role-card ul li::before { content:"•"; position:absolute; left:0; top:0; color:var(--cyan); font-weight:700; }

/* ── BLOQUE NORMATIVA ESPAÑOLA ──────────────────── */

.norma {
  margin-top:7mm; padding:5mm 6mm;
  background:linear-gradient(135deg,#012133,#013d5a);
  border-radius:4mm; display:flex; align-items:center; gap:5mm;
}
.norma-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;
}
.norma-text { font-family:"Poppins",sans-serif; font-size:8.5pt; color:rgba(255,255,255,.85); line-height:1.5; }
.norma-text strong { color:white; font-weight:600; }

/* ── PRICING ────────────────────────────────────── */

.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:7.5pt; color:rgba(255,255,255,.70); margin-top:2.5mm; line-height:1.7; }
.tier-price-tot { font-family:"Poppins",sans-serif; font-size:9pt; font-weight:600; color:var(--cyan); margin-top:2mm; }

.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:60mm; 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:12pt; font-weight:700; color:white; line-height:1; }

/* ── METODOLOGÍA ────────────────────────────────── */

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

.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-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 App · Fasmer Seven Company"):
    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 App · Fasmer Seven Company SL</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 Fasmer Seven Company SL</div>
  <div class="cover-tag">Propuesta Web App &middot; Gestión de Personal</div>
  <h1 class="cover-title">
    Una plataforma para<br>
    gestionar a tu equipo<br>
    <span class="accent">sin papel ni Excel</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 CLAUDIA ==================== -->
<div class="page carta">
  <div class="carta-saludo">Para Claudia &middot; Fasmer Seven Company</div>
  <h2 class="carta-quote">
    Hola Claudia.<br>
    Una web app pensada para que<br>
    la gestión del equipo deje de<br>
    <em>vivir entre carpetas y hojas de cálculo</em>.
  </h2>
  <div class="carta-rule"></div>
  <p class="carta-body">Gestionar personas en una empresa pequeña suele significar lo mismo en todos lados: contratos en una carpeta, nóminas en otra, fichajes en un Excel, permisos por WhatsApp y vacaciones en la agenda. Funciona, pero pierde tiempo, datos y trazabilidad.</p>
  <p class="carta-body">Lo que te proponemos es una web app sencilla, cerrada en alcance y diseñada específicamente para Fasmer: un único lugar donde tú gestionas todo y tus empleados acceden a lo suyo —su nómina, su fichaje, sus vacaciones— desde el móvil o el navegador.</p>
  <p class="carta-body">Tres módulos, dos roles, 45 días de desarrollo y un precio cerrado. Sin licencias mensuales, sin SaaS de terceros: la plataforma queda en vuestros servidores y el código es 100% de Fasmer desde el día de la entrega.</p>
  <p class="carta-body">Esta propuesta es la concreción del paquete <strong>Essential</strong> de Valírica, ajustada al alcance específico que hablamos contigo.</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 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 coste 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 plataforma<br>de Fasmer <em>debe resolver</em>.</h1>
  <p class="sl">Una herramienta interna pensada para una operación real, no un producto genérico adaptado a la fuerza. Tres módulos que cubren el día a día de gestión de personal.</p>

  <div class="roles">
    <div class="role-card">
      <div class="role-tag">Hoy</div>
      <h4>Información dispersa</h4>
      <ul>
        <li>Contratos y documentos en carpetas físicas o drives</li>
        <li>Nóminas enviadas por correo, sin historial centralizado</li>
        <li>Fichajes en papel o Excel sin trazabilidad real</li>
        <li>Permisos y vacaciones por WhatsApp o llamada</li>
        <li>Cumplimiento normativo manual y propenso a fallos</li>
      </ul>
    </div>
    <div class="role-card" style="border-top-color:var(--cyan);background:linear-gradient(160deg,#f0fcfd,#fff);border:1.5px solid var(--cyan);">
      <div class="role-tag">Con la plataforma</div>
      <h4>Un único lugar</h4>
      <ul>
        <li>Ficha completa de cada empleado, accesible y editable</li>
        <li>Histórico de nóminas descargable por el propio empleado</li>
        <li>Fichaje digital con geolocalización y jornadas reales</li>
        <li>Solicitudes de permisos y vacaciones gestionadas en flujo</li>
        <li>Cumplimiento de normativa española integrado por defecto</li>
      </ul>
    </div>
  </div>

  <div class="norma">
    <div class="norma-badge">Normativa ES</div>
    <div class="norma-text"><strong>Diseñada conforme a la legislación española vigente</strong> — Real Decreto-Ley 8/2019 (registro horario obligatorio), Estatuto de los Trabajadores y RGPD para el tratamiento de datos personales del equipo.</div>
  </div>
  {footer(4)}
</div>

<!-- ==================== P05 LOS 3 MÓDULOS ==================== -->
<div class="page">
  <div class="sn">03 &middot; Alcance del trabajo</div>
  <h1 class="st" style="font-size:26pt;margin-bottom:3mm;">Tres módulos. Un solo <em>panel</em>.</h1>
  <p class="sl" style="font-size:10.5pt;margin-bottom:7mm;">Alcance cerrado y entregado en 45 días. Sin letra pequeña.</p>

  <div class="mod-card">
    <div class="mod-head">
      <span class="mod-tag">Módulo 01 &middot; Empleados</span>
      <h3 class="mod-title">Ficha de empleado &middot; alta, edición y consulta</h3>
    </div>
    <p class="mod-desc">Una ficha completa por empleado con todos los datos que la empresa necesita gestionar y consultar en cualquier momento, centralizada en la base de datos del cliente.</p>
    <ul class="mod-list">
      <li>Datos personales y de contacto</li>
      <li>Número de Seguridad Social</li>
      <li>Datos del contrato laboral</li>
      <li>Categoría profesional y puesto</li>
      <li>Documentos de permisos y certificados</li>
      <li>Histórico de cambios contractuales</li>
      <li>Datos bancarios para nómina</li>
      <li>Búsqueda y filtrado por campos</li>
    </ul>
  </div>

  <div class="mod-card">
    <div class="mod-head">
      <span class="mod-tag">Módulo 02 &middot; Documental y nóminas</span>
      <h3 class="mod-title">Subida de nóminas &middot; histórico visible al empleado</h3>
    </div>
    <p class="mod-desc">El administrador sube las nóminas mensuales (PDF o lote) y cada empleado las consulta y descarga desde su área privada, con histórico completo de todos los meses.</p>
    <ul class="mod-list">
      <li>Carga masiva o individual de nóminas</li>
      <li>Asignación automática por empleado</li>
      <li>Histórico mensual descargable</li>
      <li>Repositorio documental por empleado</li>
      <li>Notificación al publicar nueva nómina</li>
      <li>Control de accesos y descargas</li>
    </ul>
  </div>

  <div class="mod-card">
    <div class="mod-head">
      <span class="mod-tag">Módulo 03 &middot; Fichaje y jornada</span>
      <h3 class="mod-title">Fichaje digital con geolocalización &middot; permisos y vacaciones</h3>
    </div>
    <p class="mod-desc">Registro horario conforme al Real Decreto-Ley 8/2019, con jornadas dinámicas y personalizables por empleado, geolocalización del fichaje y gestión completa de permisos y vacaciones.</p>
    <ul class="mod-list">
      <li>Fichaje entrada/salida desde móvil o navegador</li>
      <li>Geolocalización del punto de fichaje</li>
      <li>Jornadas personalizadas por empleado</li>
      <li>Pausas y cambios de turno</li>
      <li>Solicitud de permisos y vacaciones</li>
      <li>Aprobación/rechazo por el administrador</li>
      <li>Calendario laboral y festivos ES</li>
      <li>Informes de horas y resumen mensual</li>
    </ul>
  </div>
  {footer(5)}
</div>

<!-- ==================== P06 ROLES Y ENTREGABLES BASE ==================== -->
<div class="page">
  <div class="sn">04 &middot; Roles y entregables</div>
  <h1 class="st">Dos roles. Cero confusiones.<br>Cada uno ve <em>lo suyo</em>.</h1>
  <p class="sl">La plataforma diferencia claramente lo que ve y puede hacer la administración de lo que ve y puede hacer cada empleado.</p>

  <div class="roles">
    <div class="role-card">
      <div class="role-tag">Rol 01 &middot; Administrador</div>
      <h4>Panel completo de gestión</h4>
      <ul>
        <li>Alta, edición y baja de empleados</li>
        <li>Gestión de documentación contractual</li>
        <li>Subida de nóminas (individual o masiva)</li>
        <li>Visualización de fichajes y jornadas</li>
        <li>Aprobación de permisos y vacaciones</li>
        <li>Configuración de jornadas y festivos</li>
        <li>Informes y exportaciones</li>
      </ul>
    </div>
    <div class="role-card">
      <div class="role-tag">Rol 02 &middot; Empleado</div>
      <h4>Área privada del trabajador</h4>
      <ul>
        <li>Acceso a sus datos personales y contrato</li>
        <li>Descarga de su histórico de nóminas</li>
        <li>Fichaje diario con geolocalización</li>
        <li>Solicitud de permisos y vacaciones</li>
        <li>Consulta de saldo de vacaciones</li>
        <li>Calendario propio de jornada</li>
      </ul>
    </div>
  </div>

  <h2 style="margin-top:9mm;">Lo que incluye además todo proyecto Essential</h2>
  <p>Diseño UX/UI completo, módulos de login, edición de perfil y gestión de contraseña, landing de acceso, integración con base de datos SQL, plataforma de email transaccional para notificaciones, entrega del código fuente en vuestro servidor y 60 días de soporte VIP post-launch.</p>

  <div class="norma" style="margin-top:6mm;">
    <div class="norma-badge">Infra</div>
    <div class="norma-text"><strong>Hosting y dominio los proporciona Fasmer.</strong> Vosotros nos enviáis los datos de acceso al servidor y al dominio, y nosotros nos encargamos de configurar la base de datos, el despliegue y todo lo técnico. Sin coste de infraestructura por nuestra parte.</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 app de Fasmer</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">Paquete Essential &middot; personalizado</div>
      <div class="tier-name">Web App de Gestión de Personal</div>
      <div class="tier-tag">Desarrollo a medida para Fasmer Seven Company SL · 3 módulos · 2 roles de usuario · normativa española.</div>
      <div class="tier-price-block">
        <div class="tier-price">1.500 <span style="font-size:12pt;">€</span></div>
        <div class="tier-price-sub">Base imponible: 1.500,00 €<br>IVA (21%): 315,00 €</div>
        <div class="tier-price-tot">Total con IVA: 1.815,00 €</div>
      </div>
      <div class="tier-div"></div>
      <ul>
        <li>Módulo 01 · Gestión de empleados (datos, contrato, documentos)</li>
        <li>Módulo 02 · Gestión documental y nóminas</li>
        <li>Módulo 03 · Fichaje digital, permisos y vacaciones</li>
        <li>Rol administrador y rol empleado</li>
        <li>Cumplimiento normativo español (RDL 8/2019 y RGPD)</li>
        <li>Diseño UX/UI completo</li>
        <li>Login, edición de perfil y gestión de contraseña</li>
        <li>Email transaccional integrado</li>
        <li>Base de datos SQL configurada en vuestro servidor</li>
        <li>Código fuente entregado en propiedad</li>
        <li>60 días de soporte VIP 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% de Fasmer</h4><p>Todo el código fuente, repositorios y propiedad intelectual son vuestros desde el día de la entrega. Sin lock-in ni licencias.</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>Sin SaaS mensual</h4><p>No pagáis cuotas a Valírica ni a terceros por usar la plataforma. La infraestructura es vuestra.</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 605 €</div>
        <div class="pay-row">
          <div class="pay-dot">1</div>
          <div class="pay-when">Mes 1<br>Firma</div>
          <div class="pay-amount">605 €</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">605 €</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">605 €</div>
        </div>
      </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. Cero sorpresas.<br><em>Entrega en 45 días</em>.</h1>
  <p class="sl">Un proceso claro y predecible desde el primer día. Validáis 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, levantamiento del flujo real de Fasmer, datos del equipo y jornadas. Días 1–3.</p>
    </div>
    <div class="ms2">
      <div class="mn">2</div>
      <h5>Diseño UX/UI</h5>
      <p>Prototipado directo en HTML/PHP de los 3 módulos. Validación con Claudia antes de desarrollar. Sem. 1–2.</p>
    </div>
    <div class="ms2">
      <div class="mn">3</div>
      <h5>Desarrollo</h5>
      <p>Construcción de los módulos por sprints semanales con demos en vivo y acceso al repositorio. Sem. 3–5.</p>
    </div>
    <div class="ms2">
      <div class="mn">4</div>
      <h5>Lanzamiento</h5>
      <p>Despliegue en vuestro servidor, formación del equipo 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 canal directo con tu responsable de proyecto. Demos semanales donde puedes ver el avance real e indicar ajustes antes del siguiente sprint. Sin sorpresas al final, sin interpretaciones libres del briefing.</p>
  {footer(8)}
</div>

<!-- ==================== P09 ROADMAP ==================== -->
<div class="page">
  <div class="sn">07 &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>Confirmamos detalles del flujo interno de Fasmer, número de empleados, jornadas tipo y cualquier ajuste fino sobre el alcance de los tres módulos.</p></div>
  </div>
  <div class="rs">
    <div class="rt">Día +3</div>
    <div class="rc"><h4>Firma y primer pago</h4><p>Firmamos el contrato, recibimos el primer pago de 605 €, los datos de acceso al hosting y dominio, y asignamos el equipo de proyecto.</p></div>
  </div>
  <div class="rs">
    <div class="rt">Semana 1–2</div>
    <div class="rc"><h4>Diseño UX/UI directo en código</h4><p>Maquetado y diseño visual de los 3 módulos directamente en HTML/PHP —UX precisa, lista para conectar con la base de datos—. Nada avanza hasta que Claudia valida los flujos.</p></div>
  </div>
  <div class="rs">
    <div class="rt">Semanas 3–5</div>
    <div class="rc"><h4>Desarrollo por sprints</h4><p>Construcción del backend, frontend, base de datos, fichaje, gestión de nóminas y flujos de permisos. Demos semanales con avance real.</p></div>
  </div>
  <div class="rs">
    <div class="rt">Día +30</div>
    <div class="rc"><h4>Segunda cuota</h4><p>Pago de la segunda cuota de 605 € a los 30 días del kick-off, en pleno desarrollo y con demos verificables.</p></div>
  </div>
  <div class="rs">
    <div class="rt">Día 45</div>
    <div class="rc"><h4>Lanzamiento, formación y pago final</h4><p>Despliegue en vuestro servidor, formación del equipo y pago de la tercera cuota de 605 €. 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">Claudia —<br>arranquemos con<br>una <em>llamada de 30 min</em>.</h1>
  <p class="cta-body">En 30 minutos cerramos detalles del flujo interno, resolvemos cualquier duda sobre el alcance y salimos con un plan concreto. Si Valírica no es la opción correcta para Fasmer, 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">Gestionar al equipo<br>no debería ser<br><em>el trabajo más pesado<br>de la semana</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 App &middot; Fasmer Seven Company SL<br>Preparada para Claudia &middot; Confidencial<br>&copy; Valírica &middot; Todos los derechos reservados</p>
    </div>
  </div>
</div>

</body>
</html>"""

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