<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Registro de Asistentes — Gala 10° Aniversario · Corazón de Plata</title>
<link href=”https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Montserrat:wght@300;400;500&display=swap” rel=”stylesheet”>
<style>
.cpm-form-wrap *, .cpm-form-wrap *::before, .cpm-form-wrap *::after { box-sizing: border-box; margin: 0; padding: 0; }
.cpm-form-wrap {
–negro:#0a0a0a; –carbon:#111111; –grafito:#1c1c1c; –grafito2:#242424;
–borde:#2e2e2e; –oro:#c9a84c; –oro-claro:#e8c96a; –plata:#b8c4d0;
–texto:#e8e0d4; –texto-suave:#8e8880; –error:#c0614a; –exito:#5a9e7a;
background:var(–negro);
color:var(–texto);
font-family:’Cormorant Garamond’,Georgia,serif;
font-size:17px;
line-height:1.6;
padding: 0;
margin: 0;
}
.cpm-hero {
position:relative; text-align:center; padding:56px 24px 40px;
background:linear-gradient(180deg,#0e0b06 0%,var(–negro) 100%);
border-bottom:1px solid var(–borde); overflow:hidden;
}
.cpm-hero::before {
content:”; position:absolute; inset:0;
background:radial-gradient(ellipse 70% 60% at 50% -10%,rgba(201,168,76,.12) 0%,transparent 70%);
pointer-events:none;
}
.cpm-emblema {
display:inline-flex; align-items:center; justify-content:center;
width:64px; height:64px; border:1.5px solid var(–oro); border-radius:50%; margin-bottom:20px;
}
.cpm-emblema svg { width:34px; height:34px; }
.cpm-eyebrow {
font-family:’Montserrat’,sans-serif; font-size:9px; font-weight:500;
letter-spacing:.35em; text-transform:uppercase; color:var(–oro); margin-bottom:12px;
}
.cpm-titulo {
font-family:’Cinzel’,serif; font-size:clamp(20px,4.5vw,36px); font-weight:700;
line-height:1.2; color:#fff; letter-spacing:.04em; margin-bottom:8px;
}
.cpm-subtitulo {
font-family:’Cinzel’,serif; font-size:clamp(12px,2.2vw,16px); font-weight:400;
color:var(–oro-claro); letter-spacing:.06em; margin-bottom:16px;
}
.cpm-meta {
font-family:’Cormorant Garamond’,serif; font-style:italic; font-size:14px;
color:var(–plata); letter-spacing:.02em;
}
.cpm-divisor { display:flex; align-items:center; gap:14px; margin:24px auto; max-width:320px; }
.cpm-divisor-linea { flex:1; height:1px; background:linear-gradient(90deg,transparent,var(–oro),transparent); }
.cpm-divisor-rombo { width:5px; height:5px; background:var(–oro); transform:rotate(45deg); flex-shrink:0; }
.cpm-contenedor { max-width:660px; margin:0 auto; padding:36px 20px 64px; }
.cpm-intro { text-align:center; margin-bottom:36px; }
.cpm-intro p { font-size:15px; font-style:italic; color:var(–plata); line-height:1.7; }
.cpm-seccion {
background:var(–grafito); border:1px solid var(–borde); border-radius:2px;
padding:28px 24px; margin-bottom:20px; position:relative;
}
.cpm-seccion::before {
content:”; position:absolute; top:0; left:0; width:3px; height:100%;
background:linear-gradient(180deg,var(–oro) 0%,var(–plata) 100%); border-radius:2px 0 0 2px;
}
.cpm-stit {
font-family:’Cinzel’,serif; font-size:11px; font-weight:600;
letter-spacing:.2em; text-transform:uppercase; color:var(–oro); margin-bottom:20px;
}
.cpm-campo { margin-bottom:20px; }
.cpm-campo:last-child { margin-bottom:0; }
.cpm-form-wrap label {
display:block; font-family:’Montserrat’,sans-serif; font-size:9px; font-weight:500;
letter-spacing:.2em; text-transform:uppercase; color:var(–plata); margin-bottom:7px;
}
.cpm-form-wrap label .req { color:var(–oro); margin-left:3px; font-size:11px; }
.cpm-form-wrap input[type=”text”],
.cpm-form-wrap input[type=”tel”],
.cpm-form-wrap input[type=”number”],
.cpm-form-wrap select {
width:100%; background:var(–grafito2); border:1px solid var(–borde); border-radius:1px;
color:var(–texto); font-family:’Cormorant Garamond’,serif; font-size:16px;
padding:11px 15px; outline:none; transition:border-color .2s,box-shadow .2s;
appearance:none; -webkit-appearance:none;
}
.cpm-form-wrap input::placeholder { color:var(–texto-suave); font-style:italic; }
.cpm-form-wrap input:focus, .cpm-form-wrap select:focus {
border-color:var(–oro); box-shadow:0 0 0 3px rgba(201,168,76,.08);
}
.cpm-form-wrap input.cpm-err-input, .cpm-form-wrap select.cpm-err-input { border-color:var(–error); }
.cpm-form-wrap select {
background-image:url(“data:image/svg+xml,%3Csvg xmlns=’http://www.w3.org/2000/svg’ width=’12’ height=’8′ viewBox=’0 0 12 8’%3E%3Cpath d=’M1 1l5 5 5-5′ stroke=’%23c9a84c’ stroke-width=’1.5′ fill=’none’ stroke-linecap=’round’/%3E%3C/svg%3E”);
background-repeat:no-repeat; background-position:right 15px center; cursor:pointer;
}
.cpm-form-wrap select option { background:var(–carbon); color:var(–texto); }
.cpm-radio-grupo { display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }
.cpm-radio-item {
display:flex; align-items:center; gap:10px; background:var(–grafito2);
border:1px solid var(–borde); border-radius:2px; padding:10px 16px; cursor:pointer;
transition:border-color .18s,background .18s; flex:1; min-width:120px;
}
.cpm-radio-item:hover { border-color:var(–oro); background:rgba(201,168,76,.05); }
.cpm-radio-item input { width:15px; height:15px; accent-color:var(–oro); flex-shrink:0; cursor:pointer; margin:0; }
.cpm-radio-item span { font-family:’Cormorant Garamond’,serif; font-size:15px; color:var(–texto); }
/* ── CONTADOR MAX 2 ── */
.cpm-personas-opciones { display:flex; gap:10px; margin-top:4px; }
.cpm-personas-btn {
flex:1; padding:14px 10px; background:var(–grafito2); border:1px solid var(–borde);
border-radius:2px; color:var(–texto); font-family:’Cinzel’,serif; font-size:18px;
font-weight:600; cursor:pointer; text-align:center; transition:all .18s; user-select:none;
}
.cpm-personas-btn:hover { border-color:var(–oro); background:rgba(201,168,76,.06); }
.cpm-personas-btn.activo {
border-color:var(–oro); background:rgba(201,168,76,.12); color:var(–oro-claro);
box-shadow:0 0 0 2px rgba(201,168,76,.15);
}
.cpm-personas-label {
font-family:’Montserrat’,sans-serif; font-size:9px; letter-spacing:.15em;
text-transform:uppercase; color:var(–texto-suave); display:block; margin-top:8px;
text-align:center;
}
.cpm-btn {
width:100%; margin-top:28px; padding:17px 32px;
background:linear-gradient(135deg,#b8942e 0%,#e8c96a 50%,#b8942e 100%);
background-size:200% 100%; border:none; border-radius:1px; color:var(–negro);
font-family:’Cinzel’,serif; font-size:12px; font-weight:700; letter-spacing:.3em;
text-transform:uppercase; cursor:pointer; transition:background-position .4s,transform .15s,box-shadow .2s;
box-shadow:0 4px 24px rgba(201,168,76,.2);
}
.cpm-btn:hover { background-position:100% 0; box-shadow:0 6px 32px rgba(201,168,76,.35); transform:translateY(-1px); }
.cpm-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.cpm-spinner {
display:inline-block; width:14px; height:14px;
border:2px solid rgba(0,0,0,.3); border-top-color:#000;
border-radius:50%; animation:cpm-spin .7s linear infinite; vertical-align:middle; margin-right:8px;
}
@keyframes cpm-spin { to { transform:rotate(360deg); } }
.cpm-exito {
display:none; text-align:center; padding:44px 28px; background:var(–grafito);
border:1px solid var(–exito); border-radius:2px; margin-top:20px;
}
.cpm-exito-icon { font-size:38px; margin-bottom:14px; display:block; }
.cpm-exito h3 { font-family:’Cinzel’,serif; font-size:18px; color:var(–oro-claro); margin-bottom:10px; letter-spacing:.1em; }
.cpm-exito p { font-style:italic; color:var(–plata); font-size:15px; line-height:1.7; }
.cpm-err-red {
display:none; text-align:center; padding:16px 20px; background:rgba(192,97,74,.1);
border:1px solid var(–error); border-radius:2px; margin-top:12px;
font-family:’Montserrat’,sans-serif; font-size:11px; color:var(–error); letter-spacing:.05em;
}
.cpm-msg-err {
font-family:’Montserrat’,sans-serif; font-size:9px; color:var(–error);
letter-spacing:.08em; margin-top:5px; display:none;
}
.cpm-footer {
text-align:center; padding:24px 20px; border-top:1px solid var(–borde);
font-family:’Montserrat’,sans-serif; font-size:9px; letter-spacing:.15em;
text-transform:uppercase; color:var(–texto-suave);
}
.cpm-footer strong { color:var(–oro); font-weight:500; }
#cpm-campo-anio { display:none; margin-top:14px; }
#cpm-campo-otro { display:none; }
@media (max-width:480px) {
.cpm-seccion { padding:20px 16px; }
.cpm-radio-grupo { flex-direction:column; }
.cpm-radio-item { min-width:100%; }
.cpm-personas-btn { padding:12px 6px; font-size:16px; }
}
</style>
<div class=”cpm-form-wrap”>
<!– HERO –>
<div class=”cpm-hero”>
<div class=”cpm-emblema”>
<svg viewBox=”0 0 38 38″ fill=”none” xmlns=”http://www.w3.org/2000/svg”>
<circle cx=”19″ cy=”19″ r=”16″ stroke=”#c9a84c” stroke-width=”1.2″/>
<path d=”M19 10 L22 16 L29 17 L24 22 L25.5 29 L19 26 L12.5 29 L14 22 L9 17 L16 16 Z” fill=”#c9a84c” opacity=”0.85″/>
<path d=”M15 19 Q19 15 23 19 Q19 26 15 19Z” fill=”#b8c4d0″ opacity=”0.6″/>
</svg>
</div>
<p class=”cpm-eyebrow”>Programa Corazón de Plata Morelos · Morelenses en Texas</p>
<h2 class=”cpm-titulo”>GALA CONMEMORATIVA<br>10° Aniversario</h2>
<p class=”cpm-subtitulo”>Uniendo Familias Morelenses · 2016 – 2026</p>
<div class=”cpm-divisor”><div class=”cpm-divisor-linea”></div><div class=”cpm-divisor-rombo”></div><div class=”cpm-divisor-linea”></div></div>
<p class=”cpm-meta”>19 de Junio, 2026 · Hotel Las Termas, Tepalcingo, Morelos</p>
</div>
<!– FORM –>
<div class=”cpm-contenedor”>
<div class=”cpm-intro”>
<p>Confirma tu asistencia a la noche más emotiva de una década.<br>Máximo <strong style=”color:var(–oro)”>2 personas</strong> por registro.</p>
</div>
<form id=”cpm-form” novalidate>
<!– DATOS –>
<div class=”cpm-seccion”>
<p class=”cpm-stit”>✦ Datos del Asistente</p>
<div class=”cpm-campo”>
<label for=”cpm-nombre”>Nombre completo <span class=”req”>*</span></label>
<input type=”text” id=”cpm-nombre” placeholder=”Nombre(s) y apellidos” autocomplete=”name”>
<p class=”cpm-msg-err” id=”cpm-err-nombre”>Por favor ingresa tu nombre completo.</p>
</div>
<div class=”cpm-campo”>
<label for=”cpm-tel”>Teléfono de contacto <span class=”req”>*</span></label>
<input type=”tel” id=”cpm-tel” placeholder=”Ej. 7351234567 · WhatsApp” autocomplete=”tel”>
<p class=”cpm-msg-err” id=”cpm-err-tel”>Ingresa un número de teléfono válido.</p>
</div>
</div>
<!– MUNICIPIO –>
<div class=”cpm-seccion”>
<p class=”cpm-stit”>✦ Municipio de Origen</p>
<div class=”cpm-campo”>
<label for=”cpm-mun”>Municipio al que pertenece <span class=”req”>*</span></label>
<select id=”cpm-mun”>
<option value=”” disabled selected>— Selecciona tu municipio —</option>
<optgroup label=”Región Sur”>
<option>Tepalcingo</option><option>Axochiapan</option>
<option>Jonacatepec de Leandro Valle</option><option>Jantetelco</option>
<option>Zacualpan de Amilpas</option><option>Temoac</option>
</optgroup>
<optgroup label=”Región Centro”>
<option>Cuernavaca</option><option>Jiutepec</option><option>Temixco</option>
<option>Emiliano Zapata</option><option>Xochitepec</option><option>Jojutla</option>
<option>Tlaquiltenango</option><option>Puente de Ixtla</option>
</optgroup>
<optgroup label=”Región Oriente”>
<option>Cuautla</option><option>Yautepec</option><option>Yecapixtla</option>
<option>Atlatlahucan</option><option>Ocuituco</option><option>Tetela del Volcán</option>
</optgroup>
<optgroup label=”Región Norte”>
<option>Huitzilac</option><option>Tlalnepantla</option>
<option>Miacatlán</option><option>Coatlán del Río</option>
</optgroup>
<optgroup label=”Desde Texas / EE.UU.”>
<option>Garland, TX</option><option>Dallas, TX</option><option>Houston, TX</option>
<option>San Antonio, TX</option><option>Otro estado de EE.UU.</option>
</optgroup>
<option value=”otro”>Otro municipio</option>
</select>
<p class=”cpm-msg-err” id=”cpm-err-mun”>Selecciona tu municipio.</p>
</div>
<div class=”cpm-campo” id=”cpm-campo-otro”>
<label for=”cpm-otro-mun”>Especifica tu municipio</label>
<input type=”text” id=”cpm-otro-mun” placeholder=”Municipio, Estado”>
</div>
</div>
<!– BENEFICIARIO –>
<div class=”cpm-seccion”>
<p class=”cpm-stit”>✦ Vínculo con Corazón de Plata</p>
<div class=”cpm-campo”>
<label>¿Eres beneficiario del Programa? <span class=”req”>*</span></label>
<div class=”cpm-radio-grupo”>
<label class=”cpm-radio-item”>
<input type=”radio” name=”cpm_benef” value=”si” onchange=”cpmToggleAnio(this)”>
<span>Sí, soy beneficiario</span>
</label>
<label class=”cpm-radio-item”>
<input type=”radio” name=”cpm_benef” value=”no” onchange=”cpmToggleAnio(this)”>
<span>No soy beneficiario</span>
</label>
</div>
<p class=”cpm-msg-err” id=”cpm-err-benef”>Por favor selecciona una opción.</p>
</div>
<div id=”cpm-campo-anio” class=”cpm-campo”>
<label for=”cpm-anio”>¿En qué año participaste? <span class=”req”>*</span></label>
<select id=”cpm-anio”>
<option value=”” disabled selected>— Selecciona el año —</option>
<option>2016</option><option>2017</option><option>2018</option><option>2019</option>
<option>2020</option><option>2021</option><option>2022</option><option>2023</option>
<option>2024</option><option>2025</option><option>2026</option>
<option value=”no-recuerdo”>No recuerdo el año exacto</option>
</select>
<p class=”cpm-msg-err” id=”cpm-err-anio”>Selecciona el año de participación.</p>
</div>
</div>
<!– PERSONAS MAX 2 –>
<div class=”cpm-seccion”>
<p class=”cpm-stit”>✦ Número de Asistentes</p>
<div class=”cpm-campo”>
<label>¿Cuántas personas asistirán? <span class=”req”>*</span></label>
<div class=”cpm-personas-opciones”>
<div class=”cpm-personas-btn” id=”cpm-btn-1″ onclick=”cpmSelPersonas(1)”>
1<span class=”cpm-personas-label”>Solo yo</span>
</div>
<div class=”cpm-personas-btn” id=”cpm-btn-2″ onclick=”cpmSelPersonas(2)”>
2<span class=”cpm-personas-label”>Yo + acompañante</span>
</div>
</div>
<p class=”cpm-msg-err” id=”cpm-err-personas”>Selecciona el número de asistentes.</p>
</div>
</div>
<button type=”submit” class=”cpm-btn” id=”cpm-submit”>Confirmar Registro</button>
<div class=”cpm-err-red” id=”cpm-err-red”>⚠ No se pudo guardar el registro. Verifica tu conexión e intenta de nuevo.</div>
</form>
<div class=”cpm-exito” id=”cpm-exito”>
<span class=”cpm-exito-icon”>🌟</span>
<h3>¡Registro Confirmado!</h3>
<p id=”cpm-txt-exito”></p>
<div class=”cpm-divisor” style=”margin:20px auto 0″><div class=”cpm-divisor-linea”></div><div class=”cpm-divisor-rombo”></div><div class=”cpm-divisor-linea”></div></div>
</div>
</div>
<div class=”cpm-footer”>
<strong>Programa Corazón de Plata Morelos</strong> · Morelenses en Texas, A.C. · EIN 81-2194608
</div>
</div><!– /cpm-form-wrap –>
<script>
(function(){
// ══════════════════════════════════════════════
// CONFIGURACIÓN — pega tu URL de Apps Script
// ══════════════════════════════════════════════
var SCRIPT_URL = “PEGA_AQUI_TU_URL_DE_APPS_SCRIPT”;
// ══════════════════════════════════════════════
var personasSeleccionadas = 0;
window.cpmToggleAnio = function(radio) {
var campo = document.getElementById(‘cpm-campo-anio’);
campo.style.display = radio.value === ‘si’ ? ‘block’ : ‘none’;
if (radio.value !== ‘si’) {
document.getElementById(‘cpm-anio’).value = ”;
document.getElementById(‘cpm-err-anio’).style.display = ‘none’;
}
};
document.getElementById(‘cpm-mun’).addEventListener(‘change’, function() {
document.getElementById(‘cpm-campo-otro’).style.display = this.value === ‘otro’ ? ‘block’ : ‘none’;
});
window.cpmSelPersonas = function(n) {
personasSeleccionadas = n;
document.getElementById(‘cpm-btn-1’).classList.toggle(‘activo’, n === 1);
document.getElementById(‘cpm-btn-2’).classList.toggle(‘activo’, n === 2);
document.getElementById(‘cpm-err-personas’).style.display = ‘none’;
};
function validar() {
var ok = true;
function chk(id, errId, test) {
var el = document.getElementById(id);
var err = document.getElementById(errId);
if (!test(el ? el.value : ”)) {
if (el) el.classList.add(‘cpm-err-input’);
err.style.display = ‘block’; ok = false;
} else {
if (el) el.classList.remove(‘cpm-err-input’);
err.style.display = ‘none’;
}
}
chk(‘cpm-nombre’,’cpm-err-nombre’, function(v){ return v.trim().length >= 3; });
chk(‘cpm-tel’,’cpm-err-tel’, function(v){ return v.replace(/\D/g,”).length >= 8; });
chk(‘cpm-mun’,’cpm-err-mun’, function(v){ return !!v; });
var radios = document.querySelectorAll(‘input[name=”cpm_benef”]’);
var sel = [].find.call(radios, function(r){ return r.checked; });
var errB = document.getElementById(‘cpm-err-benef’);
if (!sel) { errB.style.display=’block’; ok=false; }
else {
errB.style.display=’none’;
if (sel.value === ‘si’) chk(‘cpm-anio’,’cpm-err-anio’, function(v){ return !!v; });
}
var errP = document.getElementById(‘cpm-err-personas’);
if (!personasSeleccionadas) { errP.style.display=’block’; ok=false; }
else errP.style.display=’none’;
return ok;
}
document.getElementById(‘cpm-form’).addEventListener(‘submit’, function(e) {
e.preventDefault();
if (!validar()) return;
var btn = document.getElementById(‘cpm-submit’);
var errRed = document.getElementById(‘cpm-err-red’);
btn.disabled = true;
btn.innerHTML = ‘<span class=”cpm-spinner”></span> Enviando…’;
errRed.style.display = ‘none’;
var nombre = document.getElementById(‘cpm-nombre’).value.trim();
var tel = document.getElementById(‘cpm-tel’).value.trim();
var munEl = document.getElementById(‘cpm-mun’);
var municipio = munEl.value === ‘otro’
? (document.getElementById(‘cpm-otro-mun’).value.trim() || ‘Otro’)
: munEl.value;
var radios = document.querySelectorAll(‘input[name=”cpm_benef”]’);
var esBenef = [].find.call(radios,function(r){return r.checked;}).value === ‘si’ ? ‘Sí’ : ‘No’;
var anio = esBenef === ‘Sí’ ? document.getElementById(‘cpm-anio’).value : ‘—’;
var folio = ‘CPM-‘ + Date.now().toString().slice(-6);
var fecha = new Date().toLocaleString(‘es-MX’, {timeZone:’America/Mexico_City’});
var payload = { folio:folio, fecha:fecha, nombre:nombre, telefono:tel,
municipio:municipio, esBenef:esBenef, anio:anio, personas:personasSeleccionadas };
fetch(SCRIPT_URL, {
method:’POST’, mode:’no-cors’,
headers:{‘Content-Type’:’application/json’},
body: JSON.stringify(payload)
}).then(function() {
mostrarExito(nombre, folio);
}).catch(function() {
btn.disabled = false;
btn.textContent = ‘Confirmar Registro’;
errRed.style.display = ‘block’;
});
});
function mostrarExito(nombre, folio) {
document.getElementById(‘cpm-form’).style.display = ‘none’;
var exito = document.getElementById(‘cpm-exito’);
exito.style.display = ‘block’;
var label = personasSeleccionadas === 2 ? ‘2 personas (tú + acompañante)’ : ‘1 persona’;
document.getElementById(‘cpm-txt-exito’).innerHTML =
‘<strong>’ + nombre + ‘</strong>, tu lugar está reservado para <strong>’ + label + ‘</strong>.<br>’ +
‘Folio de confirmación: <strong style=”color:var(–oro-claro)”>’ + folio + ‘</strong><br><br>’ +
‘Nos vemos el <strong>19 de Junio</strong> en Hotel Las Termas, Tepalcingo.<br>’ +
‘<em style=”color:var(–plata)”>Diez años uniendo corazones morelenses.</em>’;
exito.scrollIntoView({ behavior:’smooth’, block:’center’ });
}
})();
</script>