instalacion_caldera/opciones_calefaccion.html

1011 lines
32 KiB
HTML

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Zonificación de Calefacción - Peisa Prima Tec</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--bg: #0b0f19;
--surface: #131b2e;
--surface-card: #18233c;
--surface-hover: #1f2d4d;
--border: #233354;
--text: #f1f5f9;
--text-muted: #94a3b8;
--primary: #3b82f6;
--accent: #06b6d4;
--success: #10b981;
--warning: #f59e0b;
--gold: #eab308;
--red-mandada: #ef4444;
--blue-retorno: #38bdf8;
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: var(--bg);
color: var(--text);
line-height: 1.5;
padding: 30px 16px 80px 16px;
}
.container {
max-width: 980px;
margin: 0 auto;
}
/* Header */
header {
text-align: center;
margin-bottom: 20px;
}
.badge-top {
display: inline-block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 3px 12px;
border-radius: 999px;
background: rgba(59, 130, 246, 0.15);
color: var(--primary);
border: 1px solid rgba(59, 130, 246, 0.3);
margin-bottom: 10px;
}
h1 {
font-family: 'Outfit', sans-serif;
font-size: 28px;
font-weight: 800;
letter-spacing: -0.02em;
margin-bottom: 4px;
}
.subtitle {
color: var(--text-muted);
font-size: 14px;
}
/* BLOQUE DE JUSTIFICACIÓN TÉCNICA (144 m2) */
.dimensioning-box {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(59, 130, 246, 0.08) 100%);
border: 1px solid rgba(16, 185, 129, 0.35);
border-radius: var(--radius-md);
padding: 20px 22px;
margin-bottom: 24px;
box-shadow: 0 4px 20px -5px rgba(16, 185, 129, 0.15);
}
.dimensioning-header {
margin-bottom: 14px;
}
.dim-badge {
display: inline-block;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 2px 10px;
border-radius: 6px;
background: rgba(16, 185, 129, 0.2);
color: #34d399;
border: 1px solid rgba(16, 185, 129, 0.4);
margin-bottom: 6px;
}
.dimensioning-header h2 {
font-family: 'Outfit', sans-serif;
font-size: 19px;
font-weight: 700;
color: var(--text);
}
.dim-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 14px;
margin-bottom: 14px;
}
.dim-item {
background: rgba(11, 15, 25, 0.6);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 12px 14px;
display: flex;
gap: 10px;
align-items: flex-start;
}
.dim-icon {
font-size: 20px;
line-height: 1;
padding-top: 2px;
}
.dim-content strong {
display: block;
font-size: 13px;
color: var(--text);
margin-bottom: 3px;
}
.dim-content p {
font-size: 12px;
color: var(--text-muted);
line-height: 1.45;
}
.dim-footer {
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 10px;
font-size: 13px;
color: #a7f3d0;
}
.dim-footer strong {
color: #34d399;
}
/* Selector de Opciones */
.hint-click {
text-align: center;
margin-bottom: 14px;
font-size: 13px;
color: var(--accent);
font-weight: 600;
}
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
margin-bottom: 30px;
}
.card-option {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 16px;
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
position: relative;
transition: all 0.2s ease;
}
.card-option:hover {
border-color: var(--primary);
transform: translateY(-3px);
box-shadow: 0 8px 20px -5px rgba(59, 130, 246, 0.25);
}
.card-option.custom-plan {
border-color: #38bdf8;
background: linear-gradient(180deg, rgba(6, 182, 212, 0.12) 0%, rgba(19, 27, 46, 1) 50%);
box-shadow: 0 0 25px -5px rgba(6, 182, 212, 0.25);
}
.card-option.custom-plan:hover {
box-shadow: 0 8px 30px -5px rgba(6, 182, 212, 0.4);
}
.card-option.favorite {
border-color: var(--gold);
background: linear-gradient(180deg, rgba(234, 179, 8, 0.08) 0%, rgba(19, 27, 46, 1) 45%);
}
.card-tag {
position: absolute;
top: -10px;
right: 14px;
background: var(--gold);
color: #0b0f19;
font-size: 10px;
font-weight: 800;
padding: 2px 8px;
border-radius: 999px;
text-transform: uppercase;
}
.card-tag.tag-blue {
background: #0284c7;
color: #ffffff;
}
.card-title {
font-family: 'Outfit', sans-serif;
font-size: 16px;
font-weight: 700;
margin-bottom: 4px;
}
.card-scope {
font-size: 12px;
color: var(--accent);
font-weight: 500;
margin-bottom: 10px;
}
.card-cta {
margin-top: auto;
border-top: 1px solid var(--border);
padding-top: 8px;
font-size: 12px;
font-weight: 600;
color: var(--primary);
display: flex;
justify-content: space-between;
}
.card-option.custom-plan .card-cta {
color: #38bdf8;
}
.card-option.favorite .card-cta {
color: var(--gold);
}
/* SECCIÓN DE DETALLE Y ESQUEMAS */
.detail-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 24px;
margin-bottom: 30px;
transition: border-color 0.3s, box-shadow 0.3s;
}
.detail-card:target {
border-color: var(--primary);
box-shadow: 0 0 25px rgba(59, 130, 246, 0.2);
}
.detail-card.custom-detail {
border-color: rgba(56, 189, 248, 0.5);
background: linear-gradient(180deg, rgba(6, 182, 212, 0.04) 0%, rgba(19, 27, 46, 1) 20%);
}
.detail-card.custom-detail:target {
border-color: #38bdf8;
box-shadow: 0 0 35px rgba(56, 189, 248, 0.35);
}
.detail-card.favorite-detail {
border-color: rgba(234, 179, 8, 0.35);
}
.detail-card.favorite-detail:target {
border-color: var(--gold);
box-shadow: 0 0 30px rgba(234, 179, 8, 0.25);
}
.detail-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
flex-wrap: wrap;
gap: 10px;
}
.detail-title {
font-family: 'Outfit', sans-serif;
font-size: 20px;
font-weight: 700;
color: var(--text);
display: flex;
align-items: center;
gap: 8px;
}
.btn-top {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border);
color: var(--text-muted);
font-size: 11px;
font-weight: 600;
padding: 4px 10px;
border-radius: 999px;
text-decoration: none;
transition: all 0.2s;
}
.btn-top:hover {
background: rgba(59, 130, 246, 0.15);
color: var(--primary);
}
.detail-summary {
font-size: 14px;
color: var(--text-muted);
margin-bottom: 16px;
}
/* ESQUEMAS GRÁFICOS VISUALES HIDRÁULICOS */
.pipe-diagram {
background: #080c16;
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 20px;
margin: 16px 0;
display: flex;
flex-direction: column;
gap: 14px;
align-items: center;
}
.box-boiler {
background: #1e293b;
border: 2px solid var(--gold);
border-radius: var(--radius-sm);
padding: 10px 18px;
text-align: center;
font-weight: 700;
font-size: 14px;
color: #fde047;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
min-width: 220px;
}
.box-boiler span {
font-size: 11px;
font-weight: 500;
color: #94a3b8;
}
.pipe-trunk {
display: flex;
justify-content: center;
align-items: center;
gap: 24px;
font-size: 12px;
font-weight: 700;
width: 100%;
}
.pipe-line-red {
color: var(--red-mandada);
display: flex;
align-items: center;
gap: 4px;
}
.pipe-line-blue {
color: var(--blue-retorno);
display: flex;
align-items: center;
gap: 4px;
}
.manifold-container {
width: 100%;
max-width: 780px;
background: rgba(19, 27, 46, 0.8);
border: 1px dashed var(--border);
border-radius: var(--radius-md);
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.manifold-label {
font-size: 11px;
font-weight: 700;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.05em;
text-align: center;
}
.branch-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
}
.branch-card {
background: #0f172a;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 10px;
display: flex;
flex-direction: column;
gap: 6px;
text-align: center;
font-size: 12px;
}
.branch-valve {
background: rgba(16, 185, 129, 0.15);
color: #34d399;
border: 1px solid rgba(16, 185, 129, 0.3);
border-radius: 4px;
padding: 3px 6px;
font-weight: 600;
font-size: 11px;
}
.branch-radiator {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 4px;
padding: 6px;
font-weight: 600;
color: var(--text);
}
.branch-bypass {
background: rgba(244, 63, 94, 0.12);
border: 1px dashed #f43f5e;
border-radius: 4px;
padding: 8px;
color: #fda4af;
font-size: 11px;
font-weight: 600;
text-align: center;
}
.key-points {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 14px;
}
.point-badge {
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border);
padding: 6px 12px;
border-radius: 8px;
font-size: 12px;
color: var(--text-muted);
}
.point-badge strong {
color: var(--text);
}
/* Grilla de 2 Plantas en Sección a Medida */
.house-floors-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 16px;
margin: 18px 0;
}
.floor-box {
background: rgba(11, 15, 25, 0.7);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 18px;
}
.floor-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
border-bottom: 1px solid var(--border);
padding-bottom: 8px;
}
.floor-header h3 {
font-family: 'Outfit', sans-serif;
font-size: 16px;
font-weight: 700;
color: var(--text);
}
.floor-tag {
font-size: 11px;
font-weight: 700;
padding: 2px 8px;
border-radius: 4px;
background: rgba(59, 130, 246, 0.2);
color: #60a5fa;
}
.floor-items {
list-style: none;
font-size: 13px;
color: var(--text-muted);
}
.floor-items li {
margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 10px;
background: rgba(255, 255, 255, 0.02);
border-radius: 6px;
}
.floor-items li strong {
color: var(--text);
}
.badge-status {
font-size: 10px;
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
}
.badge-status.unified { background: rgba(59, 130, 246, 0.2); color: #93c5fd; }
.badge-status.servo { background: rgba(16, 185, 129, 0.2); color: #34d399; }
.badge-status.free { background: rgba(244, 63, 94, 0.2); color: #fda4af; }
</style>
</head>
<body>
<div class="container" id="inicio">
<header>
<div class="badge-top">Esquemas Hidráulicos</div>
<h1>Zonificación de Calefacción</h1>
<p class="subtitle">Peisa Prima Tec | Distribución de Agua y Control de Caudales</p>
</header>
<!-- JUSTIFICACIÓN TÉCNICA DEL CASO (144 m2) -->
<div class="dimensioning-box">
<div class="dimensioning-header">
<span class="dim-badge">Caso Real: 144 m² (PB: 60 m² + PA: 84 m²)</span>
<h2>¿Por qué NO necesitas bombas adicionales?</h2>
</div>
<div class="dim-grid">
<div class="dim-item">
<div class="dim-icon">🔥</div>
<div class="dim-content">
<strong>Potencia Térmica Sobrada</strong>
<p>Tu casa demanda aprox. 14.000 kcal/h (~16 kW). La caldera Peisa entrega 20.000 a 27.500 kcal/h (le sobra más de un 30%).</p>
</div>
</div>
<div class="dim-item">
<div class="dim-icon">💧</div>
<div class="dim-content">
<strong>Caudal de Bomba Holgado</strong>
<p>Se requiere aprox. 700 l/h de circulación. La bomba interna que ya trae la caldera entrega entre 1.200 y 1.500 l/h.</p>
</div>
</div>
<div class="dim-item">
<div class="dim-icon">⚖️</div>
<div class="dim-content">
<strong>Circuito Cerrado (Efecto Sifón)</strong>
<p>La altura de Planta Alta no frena la bomba: el agua que sube se compensa con la que baja. Solo vence el rozamiento de caños.</p>
</div>
</div>
</div>
<div class="dim-footer">
👉 <strong>Conclusión:</strong> La <strong>Opción 1</strong> (Bomba interna + Servoválvulas en colector) es la solución técnica óptima. Te ahorras 2 bombas secundarias, aguja hidráulica y espacio en sala de máquinas.
</div>
</div>
<div class="hint-click">
Acceso rápido a las opciones de diseño:
</div>
<!-- BOTONES DE ACCESO RÁPIDO -->
<div class="cards-grid">
<!-- Botón especial al plan a medida -->
<a href="#configuracion-a-medida" class="card-option custom-plan">
<div class="card-tag tag-blue">🎯 Tu Proyecto</div>
<div class="card-title">Plan a Medida (144 m²)</div>
<div class="card-scope">PB Integrada + PA Cuarto x Cuarto</div>
<div class="card-cta"><span>Ver tu plano definitivo</span> <span>↓</span></div>
</a>
<a href="#opcion-habitacion" class="card-option favorite">
<div class="card-tag">⭐ Favorita</div>
<div class="card-title">1. Por Habitación</div>
<div class="card-scope">Colector Genérico</div>
<div class="card-cta"><span>Ver esquema</span> <span>↓</span></div>
</a>
<a href="#opcion-trv" class="card-option">
<div class="card-title">2. En Radiadores</div>
<div class="card-scope">Cabezales TRV Directos</div>
<div class="card-cta"><span>Ver esquema</span> <span>↓</span></div>
</a>
<a href="#opcion-bombas" class="card-option">
<div class="card-title">3. Bombas + Separador</div>
<div class="card-scope">Para Grandes Superficies</div>
<div class="card-cta"><span>Ver esquema</span> <span>↓</span></div>
</a>
</div>
<!-- ============================================================== -->
<!-- SECCIÓN A MEDIDA: CONFIGURACIÓN EXACTA DE LA VIVIENDA -->
<!-- ============================================================== -->
<div id="configuracion-a-medida" class="detail-card custom-detail">
<div class="detail-top">
<div>
<span class="dim-badge" style="background: rgba(56, 189, 248, 0.2); color: #38bdf8; border-color: rgba(56, 189, 248, 0.4);">
🎯 Configuración Definitiva del Proyecto
</span>
<h2 class="detail-title" style="margin-top: 4px;">
Plan Técnico a Medida (8 Radiadores en 144 m²)
</h2>
</div>
<a href="#inicio" class="btn-top">↑ Volver</a>
</div>
<p class="detail-summary">
Planta Baja (60 m²) unificada en <strong>1 sola zona térmica</strong> comandada por el termostato del Living. Planta Alta (84 m²) con <strong>control independiente cuarto por cuarto</strong> en dormitorios y el <strong>radiador toallero del baño siempre abierto</strong> actuando como bypass natural de seguridad.
</p>
<!-- TARJETAS DE LAS DOS PLANTAS -->
<div class="house-floors-grid">
<!-- PLANTA BAJA -->
<div class="floor-box">
<div class="floor-header">
<h3>Planta Baja (60 m²)</h3>
<span class="floor-tag">1 Zona Única</span>
</div>
<p style="font-size: 12px; color: var(--text-muted); margin-bottom: 10px;">
Cocina, Living y Comedor integrados. Comandados al unísono por <strong>1 solo termostato en el Living</strong>.
</p>
<ul class="floor-items">
<li>
<span>🛋️ Radiador Living</span>
<span class="badge-status unified">Abre con Living</span>
</li>
<li>
<span>🍽️ Radiador Comedor</span>
<span class="badge-status unified">Abre con Living</span>
</li>
<li>
<span>🍳 Radiador Cocina</span>
<span class="badge-status unified">Abre con Living</span>
</li>
</ul>
</div>
<!-- PLANTA ALTA -->
<div class="floor-box">
<div class="floor-header">
<h3>Planta Alta (84 m²)</h3>
<span class="floor-tag">Zonificada por Cuarto</span>
</div>
<p style="font-size: 12px; color: var(--text-muted); margin-bottom: 10px;">
Colector de 5 bocas. Cada dormitorio fija su temperatura deseada de forma independiente.
</p>
<ul class="floor-items">
<li>
<span>🛏️ Radiador Dormitorio 1</span>
<span class="badge-status servo">Servoválvula + Termostato 1</span>
</li>
<li>
<span>🛏️ Radiador Dormitorio 2</span>
<span class="badge-status servo">Servoválvula + Termostato 2</span>
</li>
<li>
<span>🛏️ Radiador Dormitorio 3</span>
<span class="badge-status servo">Servoválvula + Termostato 3</span>
</li>
<li>
<span>🧺 Radiador Lavadero</span>
<span class="badge-status servo">Servoválvula / Manual</span>
</li>
<li>
<span>🚿 Radiador Baño (Toallero)</span>
<span class="badge-status free">SIEMPRE ABIERTO (Bypass)</span>
</li>
</ul>
</div>
</div>
<!-- ESQUEMA TÉCNICO HIDRÁULICO DE LA CASA -->
<div class="pipe-diagram">
<div class="box-boiler">
CALDERA PEISA PRIMA TEC
<span>(1 Bomba Interna — Impulsa los 8 radiadores)</span>
</div>
<div class="pipe-trunk">
<div class="pipe-line-red">▼ Troncal Mandada (1 pulgada)</div>
<div class="pipe-line-blue">▲ Troncal Retorno (1 pulgada)</div>
</div>
<!-- BIFURCACIÓN -->
<div style="width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 14px;">
<!-- COLECTOR PB -->
<div class="manifold-container" style="border-color: #3b82f6;">
<div class="manifold-label" style="color: #60a5fa;">Colector Planta Baja (3 Salidas)</div>
<div style="font-size: 11px; text-align: center; color: #94a3b8; margin-bottom: 6px;">
Apertura en bloque con Termostato del Living
</div>
<div class="branch-list" style="grid-template-columns: 1fr;">
<div class="branch-card">
<span class="branch-radiator">Radiador Living</span>
</div>
<div class="branch-card">
<span class="branch-radiator">Radiador Comedor</span>
</div>
<div class="branch-card">
<span class="branch-radiator">Radiador Cocina</span>
</div>
</div>
</div>
<!-- COLECTOR PA -->
<div class="manifold-container" style="border-color: #38bdf8;">
<div class="manifold-label" style="color: #38bdf8;">Colector Planta Alta (5 Salidas)</div>
<div style="font-size: 11px; text-align: center; color: #94a3b8; margin-bottom: 6px;">
Servoválvulas independientes + Toallero libre
</div>
<div class="branch-list" style="grid-template-columns: 1fr;">
<div class="branch-card">
<span class="branch-valve">Servoválvula 1</span>
<span class="branch-radiator">Radiador Dormitorio 1</span>
</div>
<div class="branch-card">
<span class="branch-valve">Servoválvula 2</span>
<span class="branch-radiator">Radiador Dormitorio 2</span>
</div>
<div class="branch-card">
<span class="branch-valve">Servoválvula 3</span>
<span class="branch-radiator">Radiador Dormitorio 3</span>
</div>
<div class="branch-card">
<span class="branch-valve" style="background: rgba(148,163,184,0.15); color: #cbd5e1; border-color: #475569;">
Servoválvula / Manual
</span>
<span class="branch-radiator">Radiador Lavadero</span>
</div>
<div class="branch-bypass">
🛡️ Radiador Baño (Toallero)
<span style="font-weight: normal; color: #cbd5e1;">— Paso continuo de agua (Bypass Natural)</span>
</div>
</div>
</div>
</div>
</div>
<!-- RESUMEN DE MATERIALES REALES -->
<div class="key-points">
<div class="point-badge">Bombas adicionales: <strong>0</strong></div>
<div class="point-badge">Termostatos de pared: <strong>4</strong> (1 en Living PB + 3 en Dormitorios PA)</div>
<div class="point-badge">Servoválvulas: <strong>4</strong> (o 5 con lavadero)</div>
<div class="point-badge">Válvula Bypass extra: <strong>0</strong> (cumplida por el toallero del baño)</div>
</div>
</div>
<!-- ============================================================== -->
<!-- OPCIÓN 1: VÁLVULAS POR HABITACIÓN (GENÉRICA) -->
<!-- ============================================================== -->
<div id="opcion-habitacion" class="detail-card favorite-detail">
<div class="detail-top">
<h2 class="detail-title">⭐ Opción 1: Servoválvulas en Colector (Por Habitación)</h2>
<a href="#inicio" class="btn-top">↑ Volver</a>
</div>
<p class="detail-summary">
Una sola cañería troncal alimenta el colector de distribución. En el colector, cada salida tiene su servoválvula electrotérmica para abrir o cerrar el paso de agua a cada radiador. <strong>Utiliza únicamente la bomba interna de la caldera.</strong>
</p>
<div class="pipe-diagram">
<div class="box-boiler">
CALDERA PEISA PRIMA TEC
<span>(1 Bomba Circuladora Interna)</span>
</div>
<div class="pipe-trunk">
<div class="pipe-line-red">▼ Mandada (Agua Caliente)</div>
<div class="pipe-line-blue">▲ Retorno (Agua Enfriada)</div>
</div>
<div class="manifold-container">
<div class="manifold-label">Nicho de Colector Central</div>
<div class="branch-list">
<div class="branch-card">
<span class="branch-valve">Servoválvula 1</span>
<span style="color: #64748b;">↓</span>
<span class="branch-radiator">Radiador Dormitorio 1</span>
</div>
<div class="branch-card">
<span class="branch-valve">Servoválvula 2</span>
<span style="color: #64748b;">↓</span>
<span class="branch-radiator">Radiador Dormitorio 2</span>
</div>
<div class="branch-card">
<span class="branch-valve">Servoválvula 3</span>
<span style="color: #64748b;">↓</span>
<span class="branch-radiator">Radiador Estar / Living</span>
</div>
</div>
<div class="branch-bypass">
🛡️ Válvula de Bypass Diferencial (o Radiador Toallero del baño siempre abierto)
</div>
</div>
</div>
<div class="key-points">
<div class="point-badge">Bombas adicionales: <strong>0</strong></div>
<div class="point-badge">Control: <strong>Independiente por cada cuarto</strong></div>
<div class="point-badge">Válvulas: <strong>Ocultas en la caja del colector</strong></div>
</div>
</div>
<!-- ============================================================== -->
<!-- OPCIÓN 2: CABEZALES TERMOSTÁTICOS DIRECTOS (TRV) -->
<!-- ============================================================== -->
<div id="opcion-trv" class="detail-card">
<div class="detail-top">
<h2 class="detail-title">Opción 2: Cabezales Termostáticos Directos en Radiadores</h2>
<a href="#inicio" class="btn-top">↑ Volver</a>
</div>
<p class="detail-summary">
Cañería directa tradicional. La regulación de temperatura se realiza mediante perillas termostáticas (mecánicas o a pilas) colocadas en la entrada de cada radiador.
</p>
<div class="pipe-diagram">
<div class="box-boiler">
CALDERA PEISA PRIMA TEC
<span>(1 Bomba Circuladora Interna)</span>
</div>
<div class="pipe-trunk">
<div class="pipe-line-red">▼ Cañería de Ida a Radiadores</div>
<div class="pipe-line-blue">▲ Cañería de Retorno</div>
</div>
<div class="manifold-container">
<div class="manifold-label">Regulación directa sobre el cuerpo del radiador</div>
<div class="branch-list">
<div class="branch-card">
<span class="branch-radiator">Radiador 1</span>
<span class="branch-valve" style="background: rgba(59,130,246,0.15); color: #60a5fa; border-color: rgba(59,130,246,0.3);">
Perilla TRV (Posición 3 = 20 °C)
</span>
</div>
<div class="branch-card">
<span class="branch-radiator">Radiador 2</span>
<span class="branch-valve" style="background: rgba(59,130,246,0.15); color: #60a5fa; border-color: rgba(59,130,246,0.3);">
Perilla TRV (Posición 2 = 17 °C)
</span>
</div>
<div class="branch-card">
<span class="branch-radiator">Radiador 3</span>
<span class="branch-valve" style="background: rgba(59,130,246,0.15); color: #60a5fa; border-color: rgba(59,130,246,0.3);">
Perilla TRV (Posición 4 = 23 °C)
</span>
</div>
</div>
</div>
</div>
<div class="key-points">
<div class="point-badge">Bombas adicionales: <strong>0</strong></div>
<div class="point-badge">Instalación: <strong>Directo en cada radiador</strong></div>
<div class="point-badge">Costo: <strong>El más bajo</strong></div>
</div>
</div>
<!-- ============================================================== -->
<!-- OPCIÓN 3: 2 BOMBAS + SEPARADOR HIDRÁULICO + SERVOVÁLVULAS -->
<!-- ============================================================== -->
<div id="opcion-bombas" class="detail-card">
<div class="detail-top">
<h2 class="detail-title">Opción 3: Dos Bombas + Separador Hidráulico (con Servoválvulas)</h2>
<a href="#inicio" class="btn-top">↑ Volver</a>
</div>
<p class="detail-summary">
La caldera alimenta un separador hidráulico (aguja). Desde allí, dos bombas secundarias impulsan el agua a los colectores de cada planta, y cada colector lleva sus <strong>servoválvulas por ambiente</strong>.
</p>
<div class="pipe-diagram">
<div class="box-boiler">
CALDERA PEISA
<span>(Bomba Primaria Interna)</span>
</div>
<div style="font-size: 12px; color: #f59e0b; font-weight: 700;">
▼ Circuito Primario Corto ▲
</div>
<!-- SEPARADOR -->
<div style="background: #1e1b4b; border: 2px solid #818cf8; border-radius: 8px; padding: 10px 24px; font-weight: 800; font-size: 13px; color: #c7d2fe; text-align: center;">
SEPARADOR HIDRÁULICO (AGUJA)
<div style="font-size: 10px; font-weight: 500; color: #94a3b8;">Desacopla la caldera para que no interfiera con las bombas secundarias</div>
</div>
<div style="font-size: 12px; color: var(--accent); font-weight: 700;">
▼ Circuitos Secundarios Dedicados ▲
</div>
<div class="manifold-container">
<div class="branch-list" style="grid-template-columns: 1fr 1fr;">
<!-- PLANTA BAJA -->
<div class="branch-card" style="border-color: #3b82f6;">
<span class="branch-valve" style="background: rgba(59,130,246,0.25); color: #93c5fd; border-color: #3b82f6;">
BOMBA SECUNDARIA PB
</span>
<span style="color: #64748b;">↓</span>
<div style="background: #0b0f19; padding: 6px; border-radius: 4px; border: 1px dashed #334e7d;">
<div style="font-size: 11px; color: #38bdf8; font-weight: bold; margin-bottom: 4px;">Colector PB</div>
<div style="font-size: 10px; color: #94a3b8;">Servoválvulas en cada circuito (Living, Cocina, Estar)</div>
</div>
</div>
<!-- PLANTA ALTA -->
<div class="branch-card" style="border-color: #3b82f6;">
<span class="branch-valve" style="background: rgba(59,130,246,0.25); color: #93c5fd; border-color: #3b82f6;">
BOMBA SECUNDARIA PA
</span>
<span style="color: #64748b;">↓</span>
<div style="background: #0b0f19; padding: 6px; border-radius: 4px; border: 1px dashed #334e7d;">
<div style="font-size: 11px; color: #38bdf8; font-weight: bold; margin-bottom: 4px;">Colector PA</div>
<div style="font-size: 10px; color: #94a3b8;">Servoválvulas en cada radiador de dormitorio</div>
</div>
</div>
</div>
</div>
</div>
<div class="key-points">
<div class="point-badge" style="border-color: #ef4444; color: #fca5a5;">Bombas adicionales: <strong>2</strong></div>
<div class="point-badge">Regulación: <strong>Servoválvulas por cuarto en ambas plantas</strong></div>
<div class="point-badge">Uso real: <strong>Casas grandes (>200 m²) o Piso Radiante PB + Radiadores PA</strong></div>
</div>
</div>
</div>
<script>
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
const targetId = this.getAttribute('href');
if (targetId === '#inicio') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
targetElement.scrollIntoView({ behavior: 'smooth' });
}
});
});
</script>
</body>
</html>