<style>

  .registro-contenedor {

    max-width: 480px;

    margin: 0 auto;

    padding: 16px;

    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    background: #f7f7f7;

    border-radius: 12px;

    box-shadow: 0 2px 6px rgba(0,0,0,0.12);

  }

  .registro-contenedor h2 {

    text-align: center;

    margin-bottom: 12px;

  }

  .registro-descripcion {

    font-size: 0.9rem;

    color: #555;

    margin-bottom: 16px;

    text-align: center;

  }

  .registro-grupo {

    margin-bottom: 12px;

  }

  .registro-label {

    display: block;

    font-size: 0.9rem;

    margin-bottom: 4px;

    font-weight: 600;

  }

  .registro-input,

  .registro-textarea {

    width: 100%;

    padding: 10px 12px;

    font-size: 1rem;

    border-radius: 8px;

    border: 1px solid #ccc;

    box-sizing: border-box;

  }

  .registro-textarea {

    min-height: 60px;

    resize: vertical;

  }

  .registro-checkbox-row {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 0.9rem;

  }

  .registro-boton {

    width: 100%;

    padding: 12px;

    font-size: 1rem;

    border-radius: 999px;

    border: none;

    cursor: pointer;

    font-weight: 700;

    background: #ff9800;

  }

  .registro-boton:active {

    transform: scale(0.98);

  }

  @media (max-width: 480px) {

    .registro-contenedor {

      margin: 0 8px;

      padding: 12px;

    }

  }

</style>

<form action="URL_DE_TU_WEB_APP_AQUI" method="POST">

  <div class="registro-contenedor">

    <h2>Registro de Contacto</h2>

    <p class="registro-descripcion">

      Ingresa los datos con cuidado. Verifica antes de guardar.

    </p>

    <div class="registro-grupo">

      <label class="registro-label">Nombre(s)</label>

      <input class="registro-input" type="text" name="nombre" required>

    </div>

    <div class="registro-grupo">

      <label class="registro-label">Apellidos</label>

      <input class="registro-input" type="text" name="apellidos" required>

    </div>

    <div class="registro-grupo">

      <label class="registro-label">Edad</label>

      <input class="registro-input" type="number" name="edad" min="18" max="120" required>

    </div>

    <div class="registro-grupo">

      <label class="registro-label">Teléfono (opcional)</label>

      <input class="registro-input" type="tel" name="telefono" placeholder="10 dígitos">

    </div>

    <div class="registro-grupo">

      <label class="registro-label">Calle y número</label>

      <input class="registro-input" type="text" name="calle" required>

    </div>

    <div class="registro-grupo">

      <label class="registro-label">Colonia / Localidad</label>

      <input class="registro-input" type="text" name="localidad" required>

    </div>

    <div class="registro-grupo">

      <label class="registro-label">Municipio</label>

      <input class="registro-input" type="text" name="municipio" required>

    </div>

    <div class="registro-grupo">

      <label class="registro-label">Estado</label>

      <input class="registro-input" type="text" name="estado" required>

    </div>

    <div class="registro-grupo">

      <label class="registro-label">Código Postal (opcional)</label>

      <input class="registro-input" type="text" name="cp">

    </div>

    <div class="registro-grupo">

      <label class="registro-label">Sección para votar</label>

      <input class="registro-input" type="text" name="seccion" required>

    </div>

    <div class="registro-grupo">

      <label class="registro-label">Nombre del promotor (quien captura)</label>

      <input class="registro-input" type="text" name="promotor">

    </div>

    <div class="registro-grupo">

      <label class="registro-label">Notas / comentarios</label>

      <textarea class="registro-textarea" name="notas" placeholder="Opcional"></textarea>

    </div>

    <div class="registro-grupo registro-checkbox-row">

      <input type="checkbox" id="acepta_info" name="acepta_info" value="si">

      <label for="acepta_info">Acepta recibir información y seguimiento</label>

    </div>

    <button type="submit" class="registro-boton">

      Guardar registro

    </button>

  </div>

</form>