Fix/seo issue 89

2026/about.html

@@ -8,12 +8,14 @@
     <meta name="description" content="Conoce más sobre PyCon Panamá 2026, la conferencia anual de Python en Panamá.">
     <meta name="theme-color" content="#2f8cff">
     <meta property="og:type" content="website">
+    <meta property="og:image" content="https://pycon.pa/2026_dev/public/images/PyConPet.jpg">
     <meta property="og:locale" content="es_PA">
     <meta property="og:site_name" content="PyCon Panamá">
     <meta property="og:title" content="Acerca de PyCon Panamá 2026">
     <meta property="og:description" content="Conoce la conferencia anual de Python en Panamá.">
     <meta property="og:url" content="https://pycon.pa/2026/about.html">
     <meta name="twitter:card" content="summary">
+    <meta name="twitter:image" content="https://pycon.pa/2026_dev/public/images/PyConPet.jpg">
     <link rel="canonical" href="https://pycon.pa/2026/about.html">
     <link rel="icon" href="favicon.ico" sizes="any">
     <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>

2026/agenda.html

@@ -8,12 +8,14 @@
     <meta name="description" content="Agenda de PyCon Panamá 2026: dos días de conferencias, actividades y networking.">
     <meta name="theme-color" content="#2f8cff">
     <meta property="og:type" content="website">
+    <meta property="og:image" content="https://pycon.pa/2026_dev/public/images/PyConPet.jpg">
     <meta property="og:locale" content="es_PA">
     <meta property="og:site_name" content="PyCon Panamá">
     <meta property="og:title" content="Agenda de PyCon Panamá 2026">
     <meta property="og:description" content="Dos días de conferencias, actividades y networking.">
     <meta property="og:url" content="https://pycon.pa/2026/agenda.html">
     <meta name="twitter:card" content="summary">
+    <meta name="twitter:image" content="https://pycon.pa/2026_dev/public/images/PyConPet.jpg">
     <link rel="canonical" href="https://pycon.pa/2026/agenda.html">
     <link rel="icon" href="favicon.ico" sizes="any">
     <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>

2026/codigo_conducta.html

@@ -8,12 +8,14 @@
     <meta name="description" content="Código de Conducta de PyCon Panamá 2026: qué esperamos de cada participante, qué no se acepta, cómo reportar un incidente y qué hacemos cuando recibimos un reporte.">
     <meta name="theme-color" content="#2f8cff">
     <meta property="og:type" content="website">
+    <meta property="og:image" content="https://pycon.pa/2026_dev/public/images/PyConPet.jpg">
     <meta property="og:locale" content="es_PA">
     <meta property="og:site_name" content="PyCon Panamá">
     <meta property="og:title" content="Código de Conducta - PyCon Panamá 2026">
     <meta property="og:description" content="Un evento libre de acoso: qué esperamos de ti, qué no se acepta y a quién acudir si algo pasa.">
     <meta property="og:url" content="https://pycon.pa/2026/codigo_conducta.html">
     <meta name="twitter:card" content="summary">
+    <meta name="twitter:image" content="https://pycon.pa/2026_dev/public/images/PyConPet.jpg">
     <link rel="canonical" href="https://pycon.pa/2026/codigo_conducta.html">
     <link rel="icon" href="favicon.ico" sizes="any">
     <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>

2026/css/style.css

@@ -242,6 +242,135 @@
   background: linear-gradient(180deg, var(--accent-soft) 0%, transparent 100%);
 }
 
+
+/* ==========================================================================
+   Forms
+   ========================================================================== */
+
+.container form {
+  max-width: 820px;
+  margin: 0 auto;
+}
+
+.form-card {
+  background: var(--bg);
+  border-radius: var(--radius-lg);
+  padding: var(--space-5);
+  box-shadow: 0 8px 24px rgba(2,6,23,0.06);
+  border: 1px solid rgba(17,24,39,0.04);
+}
+
+label {
+  display: block;
+  margin-bottom: var(--space-3);
+  font-size: var(--fs-sm);
+  color: var(--text-secondary);
+}
+
+input[type="text"],
+input[type="email"],
+input[type="tel"],
+input[type="number"],
+select,
+textarea {
+  width: 100%;
+  background: var(--input-bg);
+  border: 1px solid var(--input-border);
+  padding: var(--input-padding);
+  border-radius: var(--input-radius);
+  font-size: var(--fs-base);
+  color: var(--text);
+  box-shadow: none;
+  transition: box-shadow var(--transition), border-color var(--transition);
+}
+
+textarea { resize: vertical; min-height: 120px; max-height: 400px; }
+
+input:focus, select:focus, textarea:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(47,140,255,0.12);
+  border-color: var(--accent);
+}
+
+/* Required field visual hint */
+input:required, textarea:required, select:required {
+  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.02);
+}
+
+input:invalid, textarea:invalid {
+  border-color: var(--color-error);
+}
+
+/* Buttons */
+.btn { padding: var(--btn-padding); border-radius: var(--btn-radius); display: inline-flex; align-items: center; gap: 8px; }
+.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-color); border: 1px solid transparent; }
+.btn-primary:hover { filter: brightness(0.96); }
+.btn-secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-color); border: 1px solid rgba(17,24,39,0.06); }
+
+.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
+@media (max-width: 720px) { .form-row { grid-template-columns: 1fr; } }
+
+label { font-weight: 600; }
+
+.form-note { font-size: 0.9rem; color: var(--text-secondary); margin-top: calc(var(--space-2) * -1); }
+
+/* Form utilities inspired by python_panama_website (Bootstrap-like) */
+.form-group { margin-bottom: var(--space-4); }
+.form-label { display: block; margin-bottom: var(--space-2); font-weight: 700; }
+.form-control {
+  display: block;
+  width: 100%;
+  height: calc(1.5em + 1rem);
+  padding: 0.5rem 0.75rem;
+  font-size: var(--fs-base);
+  line-height: 1.5;
+  color: var(--text);
+  background: var(--input-bg);
+  border: 1px solid var(--input-border);
+  border-radius: calc(var(--input-radius) - 2px);
+}
+.form-control::placeholder { color: var(--text-secondary); }
+.form-control:focus { box-shadow: 0 0 0 4px rgba(47,140,255,0.12); border-color: var(--accent); }
+.form-select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%), linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%); background-position: right .75rem center, right .5rem center; background-size: .45rem .45rem, .45rem .45rem; background-repeat: no-repeat; padding-right: 2.5rem; }
+
+.form-check { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-3); }
+.form-check-input { margin-top: .2rem; width: 1.1rem; height: 1.1rem; }
+.form-check-label { margin: 0; }
+
+.alert { padding: var(--space-3); border-radius: var(--radius-sm); margin-bottom: var(--space-4); }
+.alert-success { background: rgba(16,185,129,0.06); color: var(--color-success); border-left: 4px solid var(--color-success); }
+.alert-danger { background: rgba(220,38,38,0.04); color: var(--color-error); border-left: 4px solid var(--color-error); }
+
+.btn-lg { padding: 14px 22px; font-size: 1.05rem; }
+.btn-outline-primary { background: transparent; border: 1px solid rgba(47,140,255,0.12); color: var(--accent); }
+
+.form-info-box { display: flex; gap: var(--space-3); align-items: flex-start; margin-top: var(--space-4); padding: var(--space-3); border-radius: var(--radius-sm); background: rgba(47,140,255,0.03); }
+.form-info-box i { font-size: 1.2rem; color: var(--accent); }
+.data-protection-box { padding: var(--space-3); background: rgba(0,0,0,0.02); border-radius: var(--radius-sm); margin-bottom: var(--space-3); }
+
+.me-2 { margin-right: .5rem; }
+
+button[type="submit"], .btn {
+  cursor: pointer;
+}
+
+.form-message {
+  margin-top: var(--space-4);
+  padding: var(--space-3);
+  border-radius: var(--radius-sm);
+  background: var(--form-message-bg);
+  color: var(--text);
+}
+
+.form-message.error { border-left: 4px solid var(--color-error); color: var(--color-error); background: rgba(220,38,38,0.04); }
+.form-message.success { border-left: 4px solid var(--color-success); color: var(--color-success); background: rgba(5,150,105,0.04); }
+
+.form-actions { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-4); }
+
+@media (max-width: 600px) {
+  .form-actions { flex-direction: column; align-items: stretch; }
+}
+
 .hero-content {
   display: grid;
   grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);
@@ -806,15 +935,17 @@
 }
 
 .checkbox-item {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1.1rem minmax(0, 1fr);
   align-items: flex-start;
   gap: 0.6rem;
   color: var(--text-secondary);
   font-size: var(--fs-sm);
 }
 
 .checkbox-item input {
-  width: auto;
+  width: 1.1rem;
+  height: 1.1rem;
   margin-top: 0.2rem;
 }
 

2026/css/variables.css

@@ -81,4 +81,19 @@
   /* --- Foco (accesibilidad) ---------------------------------------------- */
   --focus-ring: 3px solid var(--accent);
   --focus-offset: 3px;
+  /* --- Form controls ---------------------------------------------------- */
+  --input-bg: #ffffff;
+  --input-border: rgba(17,24,39,0.08);
+  --input-radius: 10px;
+  --input-padding: 12px 14px;
+  --color-error: #dc2626;
+  --color-success: #059669;
+  --form-message-bg: rgba(47,140,255,0.03);
+  /* --- Botones ---------------------------------------------------------- */
+  --btn-primary-bg: var(--accent);
+  --btn-primary-color: var(--text-on-accent);
+  --btn-secondary-bg: transparent;
+  --btn-secondary-color: var(--text);
+  --btn-padding: 10px 18px;
+  --btn-radius: 10px;
 }

2026/faq.html

@@ -8,12 +8,14 @@
     <meta name="description" content="Preguntas frecuentes sobre PyCon Panamá 2026: asistencia, ponencias, patrocinio y sedes.">
     <meta name="theme-color" content="#2f8cff">
     <meta property="og:type" content="website">
+    <meta property="og:image" content="https://pycon.pa/2026_dev/public/images/PyConPet.jpg">
     <meta property="og:locale" content="es_PA">
     <meta property="og:site_name" content="PyCon Panamá">
     <meta property="og:title" content="Preguntas frecuentes - PyCon Panamá 2026">
     <meta property="og:description" content="Resuelve las dudas más comunes sobre PyCon Panamá 2026.">
     <meta property="og:url" content="https://pycon.pa/2026/faq.html">
     <meta name="twitter:card" content="summary">
+    <meta name="twitter:image" content="https://pycon.pa/2026_dev/public/images/PyConPet.jpg">
     <link rel="canonical" href="https://pycon.pa/2026/faq.html">
     <link rel="icon" href="favicon.ico" sizes="any">
     <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>