Created
May 25, 2026 18:46
-
-
Save fbencosme/4eac0f3503a3610bd3ad2f6e28f6f0c0 to your computer and use it in GitHub Desktop.
Guía para docentes — Igualdad y prevención de la violencia basada en género (RD) · Resumen visual interactivo de las 5 unidades · NAM · OPDM · PROFAMILIA · UE · 2025
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Guía para docentes — Igualdad y prevención de la violencia basada en género</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=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" /> | |
| <style> | |
| :root { | |
| --ink: #0f2747; | |
| --ink-soft: #1b3461; | |
| --violet-900: #143f7e; | |
| --violet-700: #1f549e; | |
| --violet-500: #2d6dc9; | |
| --violet-300: #94b7e0; | |
| --violet-100: #dde9f5; | |
| --violet-50: #f2f7fc; | |
| --coral: #dc2626; | |
| --coral-soft: #fee2e2; | |
| --gold: #8dc340; | |
| --gold-soft: #e8f4d0; | |
| --green: #6baa2e; | |
| --green-soft: #def0c2; | |
| --amber: #f59e0b; | |
| --paper: #ffffff; | |
| --cream: #f8fafc; | |
| --line: #dde9f5; | |
| --shadow-sm: 0 1px 2px rgba(31, 84, 158, 0.06); | |
| --shadow-md: 0 4px 16px rgba(31, 84, 158, 0.08); | |
| --shadow-lg: 0 12px 40px rgba(31, 84, 158, 0.14); | |
| } | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| font-family: 'Inter', system-ui, sans-serif; | |
| color: var(--ink); | |
| background: var(--cream); | |
| line-height: 1.6; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| h1, h2, h3, h4 { font-family: 'Fraunces', Georgia, serif; line-height: 1.15; letter-spacing: -0.01em; } | |
| h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 700; } | |
| h2 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); font-weight: 600; } | |
| h3 { font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 600; } | |
| h4 { font-size: 1.05rem; font-weight: 600; font-family: 'Inter', sans-serif; letter-spacing: 0.02em; text-transform: uppercase; } | |
| p { font-size: 1.02rem; } | |
| a { color: var(--violet-700); text-decoration: none; } | |
| a:hover { text-decoration: underline; } | |
| /* HERO */ | |
| .hero { | |
| background: | |
| radial-gradient(ellipse at top right, rgba(141, 195, 64, 0.22), transparent 60%), | |
| radial-gradient(ellipse at bottom left, rgba(45, 109, 201, 0.18), transparent 55%), | |
| linear-gradient(180deg, var(--ink) 0%, var(--violet-900) 100%); | |
| color: white; | |
| padding: 80px 24px 100px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background-image: | |
| radial-gradient(circle at 20% 30%, rgba(141, 195, 64, 0.10) 0, transparent 8%), | |
| radial-gradient(circle at 80% 70%, rgba(148, 183, 224, 0.12) 0, transparent 10%), | |
| radial-gradient(circle at 50% 90%, rgba(45, 109, 201, 0.14) 0, transparent 12%); | |
| pointer-events: none; | |
| } | |
| .hero-container { max-width: 1100px; margin: 0 auto; position: relative; } | |
| .hero-eyebrow { | |
| display: inline-flex; align-items: center; gap: 8px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border: 1px solid rgba(255, 255, 255, 0.18); | |
| padding: 6px 14px; border-radius: 999px; | |
| font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; | |
| margin-bottom: 24px; | |
| } | |
| .hero-eyebrow::before { | |
| content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); | |
| } | |
| .hero h1 { color: white; max-width: 18ch; margin-bottom: 20px; } | |
| .hero h1 em { | |
| font-style: normal; | |
| background: linear-gradient(120deg, var(--gold), #c5e89c); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .hero-lead { | |
| font-size: 1.15rem; max-width: 56ch; color: rgba(255, 255, 255, 0.85); | |
| margin-bottom: 32px; | |
| } | |
| .hero-meta { | |
| display: flex; flex-wrap: wrap; gap: 32px; margin-top: 48px; | |
| padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, 0.12); | |
| font-size: 0.88rem; color: rgba(255, 255, 255, 0.7); | |
| } | |
| .hero-meta strong { color: white; display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; font-weight: 500; } | |
| /* EMERGENCY BAR */ | |
| .emergency { | |
| position: sticky; top: 0; z-index: 50; | |
| background: var(--coral); | |
| color: white; | |
| padding: 10px 24px; | |
| font-size: 0.88rem; | |
| display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; | |
| box-shadow: 0 2px 12px rgba(239, 71, 111, 0.3); | |
| } | |
| .emergency span { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; } | |
| .emergency strong { font-weight: 700; letter-spacing: 0.04em; } | |
| .emergency .pulse-dot { | |
| width: 8px; height: 8px; border-radius: 50%; background: white; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; transform: scale(1); } | |
| 50% { opacity: 0.5; transform: scale(1.3); } | |
| } | |
| /* NAV */ | |
| .topnav { | |
| position: sticky; top: 38px; z-index: 40; | |
| background: rgba(254, 250, 246, 0.92); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .topnav-inner { | |
| max-width: 1100px; margin: 0 auto; | |
| display: flex; align-items: center; gap: 8px; | |
| padding: 12px 24px; overflow-x: auto; | |
| } | |
| .topnav a { | |
| flex-shrink: 0; | |
| padding: 8px 14px; border-radius: 999px; | |
| font-size: 0.85rem; font-weight: 500; | |
| color: var(--ink-soft); | |
| transition: all 0.2s; | |
| } | |
| .topnav a:hover { background: var(--violet-100); color: var(--violet-700); text-decoration: none; } | |
| .topnav a.active { background: var(--violet-700); color: white; } | |
| /* SECTIONS */ | |
| .unit { padding: 80px 24px; max-width: 1100px; margin: 0 auto; } | |
| .unit-header { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; margin-bottom: 48px; } | |
| .unit-number { | |
| font-family: 'Fraunces', serif; | |
| font-size: 4rem; | |
| font-weight: 700; | |
| color: var(--violet-300); | |
| line-height: 1; | |
| letter-spacing: -0.04em; | |
| } | |
| .unit-tag { | |
| display: inline-block; | |
| font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; | |
| text-transform: uppercase; color: var(--violet-700); | |
| margin-bottom: 12px; | |
| } | |
| .unit-title { color: var(--ink); max-width: 22ch; } | |
| .unit-intro { | |
| margin-top: 16px; font-size: 1.08rem; color: var(--ink-soft); | |
| max-width: 65ch; | |
| } | |
| /* CARDS */ | |
| .card { | |
| background: var(--paper); | |
| border: 1px solid var(--line); | |
| border-radius: 16px; | |
| padding: 28px; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .card-grid { display: grid; gap: 20px; margin-top: 32px; } | |
| .grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } | |
| .grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } | |
| .grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } | |
| .card h3 { margin-bottom: 10px; color: var(--violet-900); } | |
| .card p { color: var(--ink-soft); font-size: 0.95rem; } | |
| /* COMPARISON: SEXO VS GÉNERO */ | |
| .compare { | |
| display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; | |
| align-items: stretch; | |
| margin: 40px 0; | |
| } | |
| .compare-side { | |
| border-radius: 20px; | |
| padding: 32px; | |
| position: relative; | |
| } | |
| .compare-side.bio { background: linear-gradient(135deg, #fff7ed, #ffedd5); border: 1px solid #fed7aa; } | |
| .compare-side.cult { background: linear-gradient(135deg, var(--violet-50), #f3e8ff); border: 1px solid var(--violet-300); } | |
| .compare-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; } | |
| .compare-side.bio .compare-label { color: #c2410c; } | |
| .compare-side.cult .compare-label { color: var(--violet-700); } | |
| .compare-side h3 { font-size: 1.8rem; margin-bottom: 16px; } | |
| .compare-side ul { list-style: none; } | |
| .compare-side li { padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,0.04); font-size: 0.95rem; } | |
| .compare-side li::before { content: '— '; opacity: 0.4; } | |
| .compare-divider { | |
| align-self: center; | |
| font-family: 'Fraunces', serif; | |
| font-size: 2rem; | |
| color: var(--violet-300); | |
| padding: 0 8px; | |
| } | |
| @media (max-width: 720px) { .compare { grid-template-columns: 1fr; } .compare-divider { transform: rotate(90deg); } } | |
| /* CICLO DE LA VIOLENCIA — visualización principal */ | |
| .ciclo-wrap { | |
| margin: 56px auto; | |
| max-width: 920px; | |
| background: var(--paper); | |
| border: 1px solid var(--line); | |
| border-radius: 24px; | |
| padding: 48px 32px; | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .ciclo-title { text-align: center; margin-bottom: 8px; color: var(--violet-900); } | |
| .ciclo-subtitle { text-align: center; color: var(--ink-soft); margin-bottom: 40px; font-size: 0.95rem; } | |
| .ciclo { | |
| position: relative; | |
| width: 100%; | |
| max-width: 560px; | |
| aspect-ratio: 1; | |
| margin: 0 auto; | |
| } | |
| .ciclo-center { | |
| position: absolute; inset: 30%; | |
| background: radial-gradient(circle, var(--violet-700) 0%, var(--violet-900) 100%); | |
| border-radius: 50%; | |
| display: flex; flex-direction: column; align-items: center; justify-content: center; | |
| color: white; text-align: center; | |
| box-shadow: 0 8px 32px rgba(107, 33, 168, 0.3); | |
| z-index: 2; | |
| } | |
| .ciclo-center span { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7; } | |
| .ciclo-center strong { font-family: 'Fraunces', serif; font-size: 1.4rem; font-weight: 600; line-height: 1.1; margin-top: 4px; } | |
| .ciclo-fase { | |
| position: absolute; | |
| width: 38%; | |
| aspect-ratio: 1; | |
| border-radius: 50%; | |
| display: flex; flex-direction: column; align-items: center; justify-content: center; | |
| text-align: center; padding: 12px; | |
| cursor: pointer; | |
| transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s; | |
| border: 2px solid transparent; | |
| } | |
| .ciclo-fase:hover { transform: scale(1.08); box-shadow: var(--shadow-lg); z-index: 3; } | |
| .ciclo-fase.active { transform: scale(1.12); border-color: var(--gold); z-index: 3; } | |
| .ciclo-fase .fase-num { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; opacity: 0.6; } | |
| .ciclo-fase .fase-name { font-family: 'Fraunces', serif; font-size: 1.05rem; font-weight: 600; line-height: 1.1; margin-top: 4px; } | |
| .ciclo-fase[data-fase="1"] { top: 0; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #fef3c7, #fde68a); color: #78350f; } | |
| .ciclo-fase[data-fase="2"] { top: 50%; right: 0; transform: translateY(-50%); background: linear-gradient(135deg, #fee2e2, #fecaca); color: #991b1b; } | |
| .ciclo-fase[data-fase="3"] { bottom: 0; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1e3a8a; } | |
| .ciclo-fase[data-fase="4"] { top: 50%; left: 0; transform: translateY(-50%); background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #065f46; } | |
| .ciclo-fase[data-fase="1"]:hover, .ciclo-fase[data-fase="1"].active { transform: translateX(-50%) scale(1.12); } | |
| .ciclo-fase[data-fase="3"]:hover, .ciclo-fase[data-fase="3"].active { transform: translateX(-50%) scale(1.12); } | |
| .ciclo-fase[data-fase="2"]:hover, .ciclo-fase[data-fase="2"].active { transform: translateY(-50%) scale(1.12); } | |
| .ciclo-fase[data-fase="4"]:hover, .ciclo-fase[data-fase="4"].active { transform: translateY(-50%) scale(1.12); } | |
| .ciclo-arrow { | |
| position: absolute; | |
| width: 100%; height: 100%; | |
| top: 0; left: 0; | |
| pointer-events: none; | |
| animation: spin 24s linear infinite; | |
| } | |
| @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } | |
| .ciclo-detail { | |
| margin-top: 32px; | |
| padding: 24px; | |
| background: var(--violet-50); | |
| border-radius: 12px; | |
| border-left: 4px solid var(--violet-700); | |
| min-height: 120px; | |
| transition: all 0.3s; | |
| } | |
| .ciclo-detail h4 { color: var(--violet-700); margin-bottom: 8px; text-transform: none; letter-spacing: 0; font-size: 1.1rem; font-family: 'Fraunces', serif; } | |
| .ciclo-detail p { font-size: 0.95rem; color: var(--ink-soft); } | |
| /* TIPOS DE VIOLENCIA */ | |
| .tipos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 32px; } | |
| .tipo-card { | |
| background: var(--paper); | |
| border: 1px solid var(--line); | |
| border-radius: 12px; | |
| padding: 20px; | |
| transition: all 0.3s; | |
| cursor: pointer; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .tipo-card::before { | |
| content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; | |
| background: var(--accent, var(--violet-700)); | |
| transition: width 0.3s; | |
| } | |
| .tipo-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } | |
| .tipo-card:hover::before { width: 100%; opacity: 0.06; } | |
| .tipo-icon { font-size: 1.4rem; margin-bottom: 8px; } | |
| .tipo-card h4 { | |
| font-family: 'Fraunces', serif; text-transform: none; letter-spacing: 0; | |
| font-size: 1.05rem; margin-bottom: 6px; color: var(--ink); | |
| } | |
| .tipo-card p { font-size: 0.85rem; color: var(--ink-soft); } | |
| /* ICEBERG */ | |
| .iceberg { | |
| position: relative; | |
| margin: 48px auto; | |
| max-width: 720px; | |
| background: linear-gradient(180deg, #e0f2fe 0%, #e0f2fe 38%, #1e3a8a 38%, #0f172a 100%); | |
| border-radius: 20px; | |
| padding: 48px 40px; | |
| overflow: hidden; | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .iceberg-shape { | |
| position: absolute; | |
| left: 50%; top: 50%; | |
| transform: translate(-50%, -50%); | |
| width: 60%; | |
| opacity: 0.15; | |
| } | |
| .iceberg-content { position: relative; z-index: 1; } | |
| .iceberg-section { padding: 12px 0; } | |
| .iceberg-section.visible { color: #1e3a8a; } | |
| .iceberg-section.hidden-section { color: #f1f5f9; padding-top: 28px; } | |
| .iceberg-label { | |
| font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; | |
| opacity: 0.7; margin-bottom: 8px; | |
| } | |
| .iceberg h3 { font-family: 'Fraunces', serif; font-size: 1.4rem; margin-bottom: 12px; } | |
| .iceberg-section.visible h3 { color: #1e3a8a; } | |
| .iceberg-section.hidden-section h3 { color: white; } | |
| .iceberg ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; } | |
| .iceberg li { padding: 4px 0; font-size: 0.9rem; opacity: 0.85; } | |
| .iceberg li::before { content: '• '; opacity: 0.5; } | |
| .waterline { | |
| position: absolute; left: 0; right: 0; top: 38%; | |
| height: 2px; background: rgba(255,255,255,0.4); | |
| z-index: 0; | |
| } | |
| .waterline::after { | |
| content: 'Línea de visibilidad social'; | |
| position: absolute; right: 16px; top: -22px; | |
| font-size: 0.7rem; color: #475569; | |
| letter-spacing: 0.08em; text-transform: uppercase; | |
| } | |
| /* ESTADÍSTICAS RD */ | |
| .stats-banner { | |
| background: linear-gradient(135deg, var(--violet-900), var(--ink)); | |
| color: white; | |
| border-radius: 20px; | |
| padding: 40px; | |
| margin: 48px 0; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .stats-banner::before { | |
| content: ''; | |
| position: absolute; | |
| right: -40px; top: -40px; | |
| width: 200px; height: 200px; | |
| background: radial-gradient(circle, rgba(239, 71, 111, 0.25), transparent 70%); | |
| } | |
| .stats-banner-eyebrow { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7; margin-bottom: 12px; } | |
| .stats-banner h3 { color: white; margin-bottom: 28px; max-width: 24ch; } | |
| .stats-numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; position: relative; } | |
| .stat { border-left: 3px solid var(--coral); padding-left: 16px; } | |
| .stat-value { font-family: 'Fraunces', serif; font-size: 2.4rem; font-weight: 700; color: var(--gold); line-height: 1; } | |
| .stat-label { font-size: 0.82rem; opacity: 0.8; margin-top: 6px; } | |
| .stats-source { margin-top: 24px; font-size: 0.78rem; opacity: 0.6; } | |
| /* INSTITUCIONES */ | |
| .red-instituciones { | |
| position: relative; | |
| margin: 40px auto; | |
| max-width: 800px; | |
| } | |
| .red-center { | |
| background: linear-gradient(135deg, var(--violet-700), var(--violet-900)); | |
| color: white; | |
| border-radius: 16px; | |
| padding: 24px; | |
| text-align: center; | |
| box-shadow: var(--shadow-md); | |
| margin-bottom: 0; | |
| } | |
| .red-center h3 { color: white; font-size: 1.3rem; } | |
| .red-center p { color: rgba(255,255,255,0.85); font-size: 0.9rem; margin-top: 8px; } | |
| .red-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); | |
| gap: 12px; | |
| margin-top: 20px; | |
| } | |
| .red-item { | |
| background: var(--paper); | |
| border: 1px solid var(--line); | |
| border-radius: 10px; | |
| padding: 16px; | |
| transition: all 0.2s; | |
| } | |
| .red-item:hover { border-color: var(--violet-500); box-shadow: var(--shadow-sm); } | |
| .red-item-name { font-weight: 600; color: var(--violet-900); font-size: 0.95rem; } | |
| .red-item-role { font-size: 0.82rem; color: var(--ink-soft); margin-top: 4px; } | |
| .emergency-numbers { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); | |
| gap: 16px; | |
| margin-top: 40px; | |
| } | |
| .em-num { | |
| background: var(--coral-soft); | |
| border: 2px solid var(--coral); | |
| border-radius: 16px; | |
| padding: 24px; | |
| text-align: center; | |
| } | |
| .em-num-label { font-size: 0.78rem; font-weight: 600; color: var(--coral); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; } | |
| .em-num-value { font-family: 'Fraunces', serif; font-size: 1.8rem; font-weight: 700; color: var(--ink); } | |
| .em-num-desc { font-size: 0.85rem; color: var(--ink-soft); margin-top: 6px; } | |
| /* MANDATOS BOX (Unidad IV) */ | |
| .mandatos { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); | |
| gap: 16px; | |
| margin-top: 32px; | |
| } | |
| .mandato-col { | |
| border-radius: 16px; | |
| padding: 24px; | |
| min-height: 240px; | |
| } | |
| .mandato-col.ayuda { background: var(--green-soft); border: 1px solid #6ee7b7; } | |
| .mandato-col.estorbo { background: var(--gold-soft); border: 1px solid #fcd34d; } | |
| .mandato-col.dano { background: var(--coral-soft); border: 1px solid #fda4af; } | |
| .mandato-label { | |
| font-family: 'Fraunces', serif; | |
| font-size: 1.3rem; font-weight: 700; | |
| display: flex; align-items: center; gap: 10px; | |
| margin-bottom: 16px; | |
| } | |
| .mandato-col.ayuda .mandato-label { color: #065f46; } | |
| .mandato-col.estorbo .mandato-label { color: #92400e; } | |
| .mandato-col.dano .mandato-label { color: #9f1239; } | |
| .mandato-list { list-style: none; } | |
| .mandato-list li { | |
| padding: 10px 0; | |
| border-bottom: 1px solid rgba(0,0,0,0.06); | |
| font-size: 0.92rem; | |
| } | |
| .mandato-list li:last-child { border-bottom: none; } | |
| /* GLOSARIO CARDS (Unidad IV) */ | |
| .glosario { | |
| margin-top: 40px; | |
| } | |
| .glosario-filter { | |
| display: flex; gap: 8px; flex-wrap: wrap; | |
| margin-bottom: 24px; | |
| } | |
| .glosario-filter button { | |
| background: var(--paper); | |
| border: 1px solid var(--line); | |
| color: var(--ink-soft); | |
| padding: 8px 14px; | |
| border-radius: 999px; | |
| font-size: 0.82rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| font-family: inherit; | |
| } | |
| .glosario-filter button:hover { border-color: var(--violet-500); } | |
| .glosario-filter button.active { background: var(--violet-700); color: white; border-color: var(--violet-700); } | |
| .glosario-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 16px; | |
| } | |
| .glo-card { | |
| background: var(--paper); | |
| border: 1px solid var(--line); | |
| border-radius: 14px; | |
| padding: 20px; | |
| transition: all 0.25s; | |
| position: relative; | |
| } | |
| .glo-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--violet-300); } | |
| .glo-cat { | |
| display: inline-block; | |
| font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; | |
| color: var(--violet-700); margin-bottom: 8px; | |
| } | |
| .glo-term { | |
| font-family: 'Fraunces', serif; | |
| font-size: 1.2rem; font-weight: 600; | |
| color: var(--ink); | |
| margin-bottom: 8px; | |
| } | |
| .glo-def { font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 14px; } | |
| .glo-alerta, .glo-alt { | |
| font-size: 0.82rem; | |
| padding: 8px 12px; | |
| border-radius: 8px; | |
| margin-bottom: 8px; | |
| display: flex; gap: 8px; align-items: flex-start; | |
| } | |
| .glo-alerta { background: #fef2f2; color: #7f1d1d; } | |
| .glo-alt { background: #ecfdf5; color: #065f46; } | |
| .glo-alerta::before { content: '!'; font-weight: 700; flex-shrink: 0; } | |
| .glo-alt::before { content: '✓'; font-weight: 700; flex-shrink: 0; } | |
| /* ESPACIOS (Unidad V) */ | |
| .espacios { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); | |
| gap: 16px; | |
| margin: 32px 0; | |
| } | |
| .espacio { | |
| background: var(--paper); | |
| border: 1px solid var(--line); | |
| border-radius: 14px; | |
| padding: 20px; | |
| text-align: center; | |
| transition: all 0.25s; | |
| cursor: pointer; | |
| } | |
| .espacio:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--violet-500); } | |
| .espacio-emoji { font-size: 2rem; margin-bottom: 8px; } | |
| .espacio h4 { font-family: 'Fraunces', serif; text-transform: none; letter-spacing: 0; font-size: 1.05rem; margin-bottom: 6px; color: var(--ink); } | |
| .espacio p { font-size: 0.8rem; color: var(--ink-soft); } | |
| /* SEMÁFORO */ | |
| .semaforo { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 16px; | |
| margin: 32px 0; | |
| } | |
| .sem-col { | |
| border-radius: 14px; | |
| padding: 20px; | |
| border: 1px solid; | |
| } | |
| .sem-col.verde { background: #ecfdf5; border-color: #6ee7b7; } | |
| .sem-col.amarillo { background: #fffbeb; border-color: #fcd34d; } | |
| .sem-col.rojo { background: #fef2f2; border-color: #fca5a5; } | |
| .sem-light { | |
| width: 18px; height: 18px; border-radius: 50%; | |
| display: inline-block; vertical-align: middle; margin-right: 8px; | |
| } | |
| .sem-col.verde .sem-light { background: #10b981; box-shadow: 0 0 12px rgba(16, 185, 129, 0.5); } | |
| .sem-col.amarillo .sem-light { background: #f59e0b; box-shadow: 0 0 12px rgba(245, 158, 11, 0.5); } | |
| .sem-col.rojo .sem-light { background: #ef4444; box-shadow: 0 0 12px rgba(239, 68, 68, 0.5); } | |
| .sem-title { font-family: 'Fraunces', serif; font-size: 1.1rem; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; } | |
| .sem-col.verde .sem-title { color: #065f46; } | |
| .sem-col.amarillo .sem-title { color: #92400e; } | |
| .sem-col.rojo .sem-title { color: #9f1239; } | |
| .sem-col ul { list-style: none; } | |
| .sem-col li { font-size: 0.88rem; padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,0.05); } | |
| .sem-col li:last-child { border-bottom: none; } | |
| @media (max-width: 720px) { .semaforo { grid-template-columns: 1fr; } } | |
| /* 4D STRATEGY */ | |
| .four-d { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 12px; | |
| margin: 32px 0; | |
| } | |
| .d-step { | |
| background: var(--paper); | |
| border: 2px solid var(--violet-300); | |
| border-radius: 14px; | |
| padding: 24px; | |
| position: relative; | |
| transition: all 0.3s; | |
| } | |
| .d-step:hover { border-color: var(--violet-700); transform: translateY(-4px); box-shadow: var(--shadow-md); } | |
| .d-step-num { | |
| position: absolute; top: -14px; left: 20px; | |
| background: var(--violet-700); color: white; | |
| width: 32px; height: 32px; border-radius: 50%; | |
| display: flex; align-items: center; justify-content: center; | |
| font-weight: 700; font-size: 0.9rem; | |
| } | |
| .d-step h4 { | |
| font-family: 'Fraunces', serif; text-transform: none; letter-spacing: 0; | |
| font-size: 1.3rem; color: var(--violet-900); margin-bottom: 8px; margin-top: 8px; | |
| } | |
| .d-step p { font-size: 0.88rem; color: var(--ink-soft); } | |
| /* RÚBRICA RESUMEN */ | |
| .rubrica { | |
| margin-top: 40px; | |
| background: var(--violet-50); | |
| border-radius: 16px; | |
| padding: 28px; | |
| border: 1px solid var(--violet-300); | |
| } | |
| .rubrica h4 { | |
| font-family: 'Fraunces', serif; text-transform: none; letter-spacing: 0; | |
| font-size: 1.2rem; color: var(--violet-900); margin-bottom: 16px; | |
| } | |
| .rubrica-scale { | |
| display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; | |
| margin-bottom: 16px; | |
| } | |
| .rub-level { | |
| text-align: center; padding: 10px; | |
| background: var(--paper); border-radius: 8px; | |
| border: 1px solid var(--line); | |
| } | |
| .rub-level-name { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } | |
| .rub-level-range { font-size: 0.78rem; color: var(--ink-soft); margin-top: 4px; } | |
| .rub-level.l1 .rub-level-name { color: #9f1239; } | |
| .rub-level.l2 .rub-level-name { color: #92400e; } | |
| .rub-level.l3 .rub-level-name { color: #0369a1; } | |
| .rub-level.l4 .rub-level-name { color: #065f46; } | |
| .rubrica p { font-size: 0.9rem; color: var(--ink-soft); } | |
| @media (max-width: 600px) { .rubrica-scale { grid-template-columns: repeat(2, 1fr); } } | |
| /* CALLOUT — IDEA CLAVE PARA EL AULA */ | |
| .callout { | |
| margin: 28px 0; | |
| background: linear-gradient(135deg, var(--gold-soft), #fff8e1); | |
| border-left: 4px solid var(--gold); | |
| border-radius: 12px; | |
| padding: 20px 24px; | |
| } | |
| .callout-label { | |
| font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; | |
| color: #92400e; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; | |
| } | |
| .callout-label::before { content: '✏'; font-size: 1rem; } | |
| .callout p { color: #78350f; font-size: 0.95rem; } | |
| /* MITOS VS REALIDAD */ | |
| .mitos { | |
| display: grid; gap: 12px; | |
| margin: 32px 0; | |
| } | |
| .mito-row { | |
| display: grid; | |
| grid-template-columns: 1fr auto 1fr; | |
| gap: 16px; | |
| align-items: center; | |
| background: var(--paper); | |
| border: 1px solid var(--line); | |
| border-radius: 12px; | |
| padding: 16px 20px; | |
| } | |
| .mito-text { | |
| padding: 12px 16px; border-radius: 8px; | |
| font-size: 0.92rem; | |
| } | |
| .mito-text.falso { background: #fef2f2; color: #991b1b; text-decoration: line-through; text-decoration-color: #fca5a5; } | |
| .mito-text.verdadero { background: #ecfdf5; color: #065f46; } | |
| .mito-arrow { color: var(--violet-500); font-size: 1.4rem; font-weight: 700; } | |
| @media (max-width: 720px) { .mito-row { grid-template-columns: 1fr; } .mito-arrow { transform: rotate(90deg); } } | |
| /* CITAS */ | |
| .quote { | |
| background: var(--paper); | |
| border-left: 4px solid var(--violet-500); | |
| padding: 24px 28px; | |
| margin: 32px 0; | |
| border-radius: 0 12px 12px 0; | |
| font-family: 'Fraunces', serif; | |
| font-size: 1.1rem; | |
| color: var(--ink-soft); | |
| line-height: 1.5; | |
| font-style: italic; | |
| } | |
| .quote cite { | |
| display: block; | |
| font-style: normal; | |
| font-family: 'Inter', sans-serif; | |
| font-size: 0.82rem; | |
| color: var(--violet-700); | |
| margin-top: 12px; | |
| letter-spacing: 0.04em; | |
| } | |
| /* FOOTER */ | |
| .footer { | |
| background: var(--ink); | |
| color: rgba(255,255,255,0.7); | |
| padding: 64px 24px 32px; | |
| margin-top: 80px; | |
| } | |
| .footer-container { max-width: 1100px; margin: 0 auto; } | |
| .footer h3 { color: white; font-size: 1.1rem; margin-bottom: 16px; } | |
| .footer-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); | |
| gap: 32px; | |
| margin-bottom: 48px; | |
| } | |
| .footer ul { list-style: none; font-size: 0.88rem; } | |
| .footer li { padding: 4px 0; } | |
| .footer a { color: rgba(255,255,255,0.85); } | |
| .footer-bottom { | |
| padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); | |
| font-size: 0.78rem; color: rgba(255,255,255,0.5); | |
| display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; | |
| } | |
| /* PRINT */ | |
| @media print { | |
| .emergency, .topnav { position: static; } | |
| .hero { background: white; color: black; } | |
| .hero h1, .hero p { color: black; } | |
| .ciclo-fase { box-shadow: none; } | |
| .footer { background: white; color: black; } | |
| section { page-break-inside: avoid; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="emergency" role="region" aria-label="Líneas de emergencia"> | |
| <span><span class="pulse-dot"></span><strong>*212</strong> Línea de Emergencia · Ministerio de la Mujer</span> | |
| <span><strong>911</strong> Sistema Nacional de Emergencias</span> | |
| <span><strong>809-200-1202</strong> Línea Vida · PGR</span> | |
| </div> | |
| <header class="hero" id="inicio"> | |
| <div class="hero-container"> | |
| <span class="hero-eyebrow">Guía para docentes · Educación secundaria · RD</span> | |
| <h1>Igualdad y prevención de la <em>violencia basada en género</em></h1> | |
| <p class="hero-lead"> | |
| Resumen visual e interactivo de las cinco unidades de formación docente. Material para | |
| capacitación, planificación de aula y articulación con la comunidad educativa. | |
| </p> | |
| <div class="hero-meta"> | |
| <div><strong>Proyecto</strong>Articulación para la Dignidad y la Libertad</div> | |
| <div><strong>Instituciones</strong>NAM · OPDM · PROFAMILIA · Unión Europea</div> | |
| <div><strong>Autoría</strong>Fidelina de la Rosa Hidalgo · Ramón Stalin Montero Santiago</div> | |
| <div><strong>Publicación</strong>Noviembre de 2025</div> | |
| </div> | |
| </div> | |
| </header> | |
| <nav class="topnav" aria-label="Navegación por unidades"> | |
| <div class="topnav-inner"> | |
| <a href="#unidad-1">I · Enfoque de género</a> | |
| <a href="#unidad-2">II · Violencia de género</a> | |
| <a href="#unidad-3">III · Marco legal</a> | |
| <a href="#unidad-4">IV · Masculinidades</a> | |
| <a href="#unidad-5">V · Prevención comunitaria</a> | |
| </div> | |
| </nav> | |
| <!-- ===================== UNIDAD I ===================== --> | |
| <section class="unit" id="unidad-1"> | |
| <div class="unit-header"> | |
| <div class="unit-number">I</div> | |
| <div> | |
| <span class="unit-tag">Unidad I</span> | |
| <h2 class="unit-title">Comprendiendo el enfoque de género</h2> | |
| <p class="unit-intro"> | |
| El género es un marco cultural que organiza cómo entendemos y valoramos a las personas a | |
| partir de la diferencia sexual. No es lo mismo que el sexo biológico. Reconocer esa distinción | |
| permite identificar dónde nacen las desigualdades y cómo intervenir desde la práctica docente. | |
| </p> | |
| </div> | |
| </div> | |
| <h3 style="margin-bottom:8px;color:var(--violet-900)">Sexo y género no son lo mismo</h3> | |
| <p style="color:var(--ink-soft); max-width: 60ch;">El sexo alude a rasgos corporales. El género nombra normas, expectativas y significados que una sociedad atribuye a esos cuerpos.</p> | |
| <div class="compare"> | |
| <div class="compare-side bio"> | |
| <div class="compare-label">Lo biológico</div> | |
| <h3>Sexo</h3> | |
| <ul> | |
| <li>Cromosomas, hormonas, anatomía</li> | |
| <li>Caracteres sexuales primarios y secundarios</li> | |
| <li>Se manifiesta en el cuerpo</li> | |
| <li>Universal entre culturas</li> | |
| </ul> | |
| </div> | |
| <div class="compare-divider">≠</div> | |
| <div class="compare-side cult"> | |
| <div class="compare-label">Lo cultural</div> | |
| <h3>Género</h3> | |
| <ul> | |
| <li>Roles, normas y expectativas sociales</li> | |
| <li>Cambia con el tiempo y entre culturas</li> | |
| <li>Se aprende y se enseña</li> | |
| <li>Se puede transformar</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <h3 style="margin-top:48px;margin-bottom:16px;color:var(--violet-900)">Conceptos clave para el aula</h3> | |
| <div class="card-grid grid-3"> | |
| <div class="card"> | |
| <h3>Estereotipos</h3> | |
| <p>Construcciones mentales que fijan cómo "deben ser" mujeres y hombres. Funcionan como reglas no escritas en refranes, chistes, anuncios y clases.</p> | |
| </div> | |
| <div class="card"> | |
| <h3>Roles de género</h3> | |
| <p>Conductas y responsabilidades que la cultura espera. En el hogar suelen recaer en mujeres y niñas el cuidado y la organización doméstica.</p> | |
| </div> | |
| <div class="card"> | |
| <h3>Discriminación</h3> | |
| <p>Trato desigual que limita derechos por razón de sexo, identidad o orientación. Puede ser directa, indirecta o institucional.</p> | |
| </div> | |
| <div class="card"> | |
| <h3>Sexismo hostil</h3> | |
| <p>Descalificación abierta: insultos, burlas, negación de capacidades. "Eso no es para mujeres".</p> | |
| </div> | |
| <div class="card"> | |
| <h3>Sexismo benevolente</h3> | |
| <p>Halagos que mantienen la dependencia: "ellas no deben preocuparse, nosotros resolvemos". Igualmente limita autonomía.</p> | |
| </div> | |
| <div class="card"> | |
| <h3>Transversalización</h3> | |
| <p>Decisión pedagógica de colocar el enfoque de igualdad en todo el ciclo de enseñanza: diagnóstico, materiales, metodología, evaluación y convivencia.</p> | |
| </div> | |
| </div> | |
| <div class="callout"> | |
| <div class="callout-label">Idea clave para el aula</div> | |
| <p>Pida al grupo que escriba y complete: <em>"En mi casa, ser mujer/hombre significa…"</em>. Luego haga una lluvia de ideas para distinguir entre lo corporal y lo cultural. Termine con un cuadro comparativo de "Sexo" vs "Género" usando ejemplos cotidianos.</p> | |
| </div> | |
| <div class="rubrica"> | |
| <h4>Rúbrica · evaluación de la unidad</h4> | |
| <div class="rubrica-scale"> | |
| <div class="rub-level l1"><div class="rub-level-name">Inicial</div><div class="rub-level-range">0 – 69</div></div> | |
| <div class="rub-level l2"><div class="rub-level-name">Básico</div><div class="rub-level-range">70 – 79</div></div> | |
| <div class="rub-level l3"><div class="rub-level-name">Competente</div><div class="rub-level-range">80 – 89</div></div> | |
| <div class="rub-level l4"><div class="rub-level-name">Avanzado</div><div class="rub-level-range">90 – 100</div></div> | |
| </div> | |
| <p>Criterios: comprensión conceptual (25%) · análisis crítico (20%) · propuesta de cambio (20%) · comunicación y argumentación (15%) · trabajo colaborativo (10%) · referenciación y ética (10%).</p> | |
| </div> | |
| </section> | |
| <!-- ===================== UNIDAD II ===================== --> | |
| <section class="unit" id="unidad-2"> | |
| <div class="unit-header"> | |
| <div class="unit-number">II</div> | |
| <div> | |
| <span class="unit-tag">Unidad II</span> | |
| <h2 class="unit-title">La violencia de género: formas, tipos, mitos y consecuencias</h2> | |
| <p class="unit-intro"> | |
| La violencia basada en género (VBG) es cualquier acción u omisión que, apoyada en normas y | |
| jerarquías de género, cause daño o sufrimiento físico, sexual, psicológico o económico, o limite | |
| derechos y libertades de una persona. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="ciclo-wrap"> | |
| <h3 class="ciclo-title">El ciclo de la violencia</h3> | |
| <p class="ciclo-subtitle">En violencia de pareja suelen repetirse cuatro fases. Haga clic en cada una.</p> | |
| <div class="ciclo"> | |
| <div class="ciclo-center"> | |
| <span>Ciclo</span> | |
| <strong>de la<br/>violencia</strong> | |
| </div> | |
| <div class="ciclo-fase active" data-fase="1" data-title="Aumento de tensión" data-text="Irritabilidad, microagresiones y control. La víctima evita conflictos y asume culpas. La tensión se acumula durante días, semanas o meses."> | |
| <div class="fase-num">FASE 1</div> | |
| <div class="fase-name">Aumento<br/>de tensión</div> | |
| </div> | |
| <div class="ciclo-fase" data-fase="2" data-title="Explosión o incidente agudo" data-text="Descarga de agresión con alta destructividad: gritos, golpes, amenazas, daños. Dura poco comparado con la tensión acumulada, pero deja secuelas profundas."> | |
| <div class="fase-num">FASE 2</div> | |
| <div class="fase-name">Explosión</div> | |
| </div> | |
| <div class="ciclo-fase" data-fase="3" data-title="Alejamiento o separación" data-text="La víctima en ocasiones reconoce el riesgo y busca apoyo. Es una ventana crítica para cortar el ciclo y activar rutas de protección."> | |
| <div class="fase-num">FASE 3</div> | |
| <div class="fase-name">Alejamiento</div> | |
| </div> | |
| <div class="ciclo-fase" data-fase="4" data-title="Luna de miel o arrepentimiento" data-text="Promesas de cambio y minimización del agresor. Con frecuencia se produce la reconciliación. Luego el ciclo se reinicia, a menudo con más intensidad."> | |
| <div class="fase-num">FASE 4</div> | |
| <div class="fase-name">Luna<br/>de miel</div> | |
| </div> | |
| </div> | |
| <div class="ciclo-detail" id="ciclo-detail"> | |
| <h4 id="ciclo-detail-title">Aumento de tensión</h4> | |
| <p id="ciclo-detail-text">Irritabilidad, microagresiones y control. La víctima evita conflictos y asume culpas. La tensión se acumula durante días, semanas o meses.</p> | |
| </div> | |
| </div> | |
| <h3 style="margin-top:24px;margin-bottom:16px;color:var(--violet-900)">Tipos de violencia de género</h3> | |
| <p style="color:var(--ink-soft); max-width:60ch;">Puede presentarse sola o combinada. Reconocerla ayuda a pedir ayuda a tiempo.</p> | |
| <div class="tipos-grid"> | |
| <div class="tipo-card" style="--accent:#ef476f"><div class="tipo-icon">▣</div><h4>Verbal</h4><p>Insultos, gritos, burlas, apodos degradantes, humillaciones en público o en redes.</p></div> | |
| <div class="tipo-card" style="--accent:#a855f7"><div class="tipo-icon">◐</div><h4>Emocional o psicológica</h4><p>Amenazas, chantaje, control del celular y amistades, aislamiento, celos, vigilancia.</p></div> | |
| <div class="tipo-card" style="--accent:#dc2626"><div class="tipo-icon">▼</div><h4>Sexual</h4><p>Cualquier acto sexual sin consentimiento, dentro o fuera de la pareja.</p></div> | |
| <div class="tipo-card" style="--accent:#f59e0b"><div class="tipo-icon">$</div><h4>Económica o patrimonial</h4><p>Control del dinero, documentos o bienes para generar dependencia.</p></div> | |
| <div class="tipo-card" style="--accent:#7c2d12"><div class="tipo-icon">✕</div><h4>Física</h4><p>Empujones, golpes, estrangulación, uso de objetos o armas.</p></div> | |
| <div class="tipo-card" style="--accent:#0891b2"><div class="tipo-icon">◉</div><h4>Reproductiva</h4><p>Obstáculos o coerción para decidir sobre anticoncepción, gestación y atención obstétrica.</p></div> | |
| <div class="tipo-card" style="--accent:#1e3a8a"><div class="tipo-icon">▲</div><h4>Feminicida</h4><p>Forma extrema de VBG contra mujeres, asociada a impunidad social o estatal.</p></div> | |
| <div class="tipo-card" style="--accent:#6b21a8"><div class="tipo-icon">◆</div><h4>Contra personas LGBTIQ+</h4><p>Agresiones motivadas por prejuicios sobre sexualidad e identidad de género.</p></div> | |
| </div> | |
| <h3 style="margin-top:56px;margin-bottom:16px;color:var(--violet-900)">El iceberg de la violencia</h3> | |
| <p style="color:var(--ink-soft); max-width:60ch;">La mayor parte de la violencia que sostiene al sistema patriarcal está debajo de la línea de visibilidad social.</p> | |
| <div class="iceberg"> | |
| <div class="waterline"></div> | |
| <div class="iceberg-content"> | |
| <div class="iceberg-section visible"> | |
| <div class="iceberg-label">Lo visible</div> | |
| <h3>Lo que se denuncia y nombra</h3> | |
| <ul> | |
| <li>Feminicidio</li><li>Violación</li><li>Golpes y lesiones</li><li>Amenazas explícitas</li> | |
| </ul> | |
| </div> | |
| <div class="iceberg-section hidden-section"> | |
| <div class="iceberg-label">Lo invisible · violencia simbólica</div> | |
| <h3>Lo que se normaliza como costumbre</h3> | |
| <ul> | |
| <li>Chistes y refranes sexistas</li> | |
| <li>Piropos y acoso callejero</li> | |
| <li>Control del celular</li> | |
| <li>Celos como "prueba de amor"</li> | |
| <li>Reparto desigual del cuidado</li> | |
| <li>Lenguaje que invisibiliza</li> | |
| <li>Publicidad que cosifica</li> | |
| <li>Currículo oculto escolar</li> | |
| <li>Mansplaining y manterrupting</li> | |
| <li>Sexismo benevolente</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="stats-banner"> | |
| <div class="stats-banner-eyebrow">Feminicidios · República Dominicana</div> | |
| <h3>El problema persiste en el ámbito íntimo y relacional</h3> | |
| <div class="stats-numbers"> | |
| <div class="stat"><div class="stat-value">63</div><div class="stat-label">Feminicidios · Ene–Nov 2024</div></div> | |
| <div class="stat"><div class="stat-value">53</div><div class="stat-label">Homicidios de mujeres · Ene–Nov 2024</div></div> | |
| <div class="stat"><div class="stat-value">116</div><div class="stat-label">Víctimas totales en el periodo</div></div> | |
| <div class="stat"><div class="stat-value">1.27</div><div class="stat-label">Feminicidios por 100,000 hab. (tasa)</div></div> | |
| </div> | |
| <p class="stats-source">Fuente: Procuraduría General de la República. Ligera reducción frente a 131 víctimas en el mismo periodo de 2023.</p> | |
| </div> | |
| <h3 style="margin-top:24px;margin-bottom:16px;color:var(--violet-900)">Mitos que sostienen la violencia</h3> | |
| <div class="mitos"> | |
| <div class="mito-row"> | |
| <div class="mito-text falso">"Con celos hay amor"</div> | |
| <div class="mito-arrow">→</div> | |
| <div class="mito-text verdadero">Los celos son control disfrazado. El amor se basa en confianza y autonomía.</div> | |
| </div> | |
| <div class="mito-row"> | |
| <div class="mito-text falso">"Si no se va es porque no quiere"</div> | |
| <div class="mito-arrow">→</div> | |
| <div class="mito-text verdadero">Hay dependencia económica, miedo, amenazas, presión familiar y falta de redes de apoyo.</div> | |
| </div> | |
| <div class="mito-row"> | |
| <div class="mito-text falso">"Si no hay golpes no es violencia"</div> | |
| <div class="mito-arrow">→</div> | |
| <div class="mito-text verdadero">La violencia también es emocional, sexual, económica y simbólica.</div> | |
| </div> | |
| <div class="mito-row"> | |
| <div class="mito-text falso">"Fue por alcohol o estrés"</div> | |
| <div class="mito-arrow">→</div> | |
| <div class="mito-text verdadero">El consumo no causa violencia; la facilita. La responsabilidad es siempre del agresor.</div> | |
| </div> | |
| <div class="mito-row"> | |
| <div class="mito-text falso">"Eso solo pasa en ciertos barrios"</div> | |
| <div class="mito-arrow">→</div> | |
| <div class="mito-text verdadero">La VBG atraviesa todas las clases, niveles educativos y territorios.</div> | |
| </div> | |
| </div> | |
| <div class="callout"> | |
| <div class="callout-label">Idea clave para el aula</div> | |
| <p>Semáforo de riesgos: ubique ejemplos reales o ficticios en verde (prevención), amarillo (alerta) o rojo (urgencia). Para cada uno, decida con el grupo a quién acudir y por qué.</p> | |
| </div> | |
| </section> | |
| <!-- ===================== UNIDAD III ===================== --> | |
| <section class="unit" id="unidad-3"> | |
| <div class="unit-header"> | |
| <div class="unit-number">III</div> | |
| <div> | |
| <span class="unit-tag">Unidad III</span> | |
| <h2 class="unit-title">Marco legal para construir la igualdad de derechos</h2> | |
| <p class="unit-intro"> | |
| En República Dominicana la igualdad no es un gesto de buena voluntad: es un mandato jurídico. | |
| La Constitución reconoce que todas las personas nacen libres e iguales y garantiza el derecho a | |
| vivir sin violencia. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="quote"> | |
| "La igualdad es un derecho, no un privilegio. La escuela es un espacio estratégico para traducir el marco legal en convivencia cotidiana." | |
| <cite>— Artículos 39 y 42 · Constitución Dominicana · Ley 24-97 · PLANEG III</cite> | |
| </div> | |
| <h3 style="margin-top:48px;margin-bottom:16px;color:var(--violet-900)">Marco normativo dominicano</h3> | |
| <div class="card-grid grid-2"> | |
| <div class="card"> | |
| <h3>Constitución · Art. 39</h3> | |
| <p>Reconoce que todas las personas nacen libres e iguales y prohíbe la discriminación por razón de género.</p> | |
| </div> | |
| <div class="card"> | |
| <h3>Constitución · Art. 42</h3> | |
| <p>Garantiza el derecho a la integridad personal y a vivir libre de violencia.</p> | |
| </div> | |
| <div class="card"> | |
| <h3>Ley 24-97</h3> | |
| <p>Modifica el Código Penal para sancionar distintas formas de violencia contra la mujer.</p> | |
| </div> | |
| <div class="card"> | |
| <h3>Ley 136-03</h3> | |
| <p>Protección integral a niñez y adolescencia.</p> | |
| </div> | |
| <div class="card"> | |
| <h3>PLANEG III 2020–2030</h3> | |
| <p>Plan Nacional de Igualdad y Equidad de Género, con metas intersectoriales.</p> | |
| </div> | |
| <div class="card"> | |
| <h3>Compromisos internacionales</h3> | |
| <p>CEDAW (ONU) y Convención de Belém do Pará (OEA), que orientan la acción estatal y escolar.</p> | |
| </div> | |
| </div> | |
| <h3 style="margin-top:56px;margin-bottom:16px;color:var(--violet-900)">La red institucional de protección</h3> | |
| <div class="red-instituciones"> | |
| <div class="red-center"> | |
| <h3>Modelo Nacional de Prevención y Atención</h3> | |
| <p>Coordinado por el Ministerio de la Mujer · Articulado por CONAPLUVI</p> | |
| </div> | |
| <div class="red-grid"> | |
| <div class="red-item"><div class="red-item-name">Ministerio de la Mujer</div><div class="red-item-role">Define políticas y coordina</div></div> | |
| <div class="red-item"><div class="red-item-name">Ministerio Público</div><div class="red-item-role">Procuradurías especializadas</div></div> | |
| <div class="red-item"><div class="red-item-name">Policía Nacional</div><div class="red-item-role">Puerta de entrada en riesgo</div></div> | |
| <div class="red-item"><div class="red-item-name">Salud Pública</div><div class="red-item-role">Atención física y emocional</div></div> | |
| <div class="red-item"><div class="red-item-name">Poder Judicial</div><div class="red-item-role">Sanción y reparación</div></div> | |
| <div class="red-item"><div class="red-item-name">CONANI</div><div class="red-item-role">Protección a niñez y adolescencia</div></div> | |
| </div> | |
| </div> | |
| <h3 style="margin-top:56px;margin-bottom:8px;color:var(--violet-900)">Números útiles que toda la comunidad escolar debe conocer</h3> | |
| <div class="emergency-numbers"> | |
| <div class="em-num"> | |
| <div class="em-num-label">Ministerio de la Mujer</div> | |
| <div class="em-num-value">*212</div> | |
| <div class="em-num-desc">Línea de Emergencia · 24 horas</div> | |
| </div> | |
| <div class="em-num"> | |
| <div class="em-num-label">Procuraduría General</div> | |
| <div class="em-num-value">809-200-1202</div> | |
| <div class="em-num-desc">Línea Vida</div> | |
| </div> | |
| <div class="em-num"> | |
| <div class="em-num-label">Emergencias</div> | |
| <div class="em-num-value">911</div> | |
| <div class="em-num-desc">Sistema Nacional</div> | |
| </div> | |
| </div> | |
| <h3 style="margin-top:56px;margin-bottom:16px;color:var(--violet-900)">Ruta de protección en el centro educativo</h3> | |
| <div class="card-grid grid-3"> | |
| <div class="card" style="border-top:4px solid var(--violet-700)"><h3>1 · Prevención</h3><p>Políticas claras, campañas visibles, formación y señalética de tolerancia cero al acoso.</p></div> | |
| <div class="card" style="border-top:4px solid var(--violet-700)"><h3>2 · Protección</h3><p>Medidas inmediatas, confidencialidad, no revictimización, acompañamiento seguro de entrada y salida.</p></div> | |
| <div class="card" style="border-top:4px solid var(--violet-700)"><h3>3 · Investigación</h3><p>Diligente, imparcial, con enfoque de derechos. Plazos y responsables definidos.</p></div> | |
| <div class="card" style="border-top:4px solid var(--violet-700)"><h3>4 · Sanción y reparación</h3><p>Proporcional, oportuna y con seguimiento.</p></div> | |
| <div class="card" style="border-top:4px solid var(--violet-700)"><h3>5 · Articulación</h3><p>Trabajo coordinado con CONANI, Policía, Ministerio Público, Salud Pública y gobierno local.</p></div> | |
| <div class="card" style="border-top:4px solid var(--violet-700)"><h3>6 · Rendición de cuentas</h3><p>Registro de casos, revisión mensual y mejora continua del protocolo.</p></div> | |
| </div> | |
| <div class="callout"> | |
| <div class="callout-label">Idea clave para el aula</div> | |
| <p>Elabore con el curso un directorio local con teléfonos, horarios y responsables. Ensaye con casos ficticios: acoso en pasillo, en transporte y en la calle cerca del centro.</p> | |
| </div> | |
| </section> | |
| <!-- ===================== UNIDAD IV ===================== --> | |
| <section class="unit" id="unidad-4"> | |
| <div class="unit-header"> | |
| <div class="unit-number">IV</div> | |
| <div> | |
| <span class="unit-tag">Unidad IV</span> | |
| <h2 class="unit-title">Masculinidades: participación de los hombres en la lucha por la igualdad</h2> | |
| <p class="unit-intro"> | |
| No hay un único modo de ser hombre. La masculinidad tradicional enseña a mandar, resistir el | |
| dolor y no mostrar emociones. Cuestionar ese modelo previene violencia y también libera a los | |
| propios varones. | |
| </p> | |
| </div> | |
| </div> | |
| <h3 style="margin-bottom:8px;color:var(--violet-900)">La caja de los mandatos masculinos</h3> | |
| <p style="color:var(--ink-soft); max-width:60ch;">Lo que se espera de un hombre puede ayudar, estorbar o dañar. Visibilizarlo es el primer paso para transformarlo.</p> | |
| <div class="mandatos"> | |
| <div class="mandato-col ayuda"> | |
| <div class="mandato-label">Ayuda</div> | |
| <ul class="mandato-list"> | |
| <li>Cuidar de la familia</li> | |
| <li>Compromiso con el trabajo</li> | |
| <li>Lealtad con amistades</li> | |
| <li>Proteger a quien lo necesita</li> | |
| </ul> | |
| </div> | |
| <div class="mandato-col estorbo"> | |
| <div class="mandato-label">Estorba</div> | |
| <ul class="mandato-list"> | |
| <li>"Los hombres no lloran"</li> | |
| <li>Aguantar todo solo</li> | |
| <li>No pedir ayuda</li> | |
| <li>Tener siempre la última palabra</li> | |
| <li>Resolver sin diálogo</li> | |
| </ul> | |
| </div> | |
| <div class="mandato-col dano"> | |
| <div class="mandato-label">Daña</div> | |
| <ul class="mandato-list"> | |
| <li>Mandar sobre la pareja</li> | |
| <li>Controlar el cuerpo y el tiempo ajenos</li> | |
| <li>Resolver con violencia</li> | |
| <li>Castigar la vulnerabilidad</li> | |
| <li>Demostrar hombría con desprecio</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <h3 style="margin-top:56px;margin-bottom:8px;color:var(--violet-900)">Glosario de masculinidades contemporáneas</h3> | |
| <p style="color:var(--ink-soft); max-width:60ch;">Lenguaje para nombrar prácticas que dañan la confianza y la igualdad. Describimos conductas, no etiquetamos personas.</p> | |
| <div class="glosario"> | |
| <div class="glosario-filter"> | |
| <button class="active" data-cat="todos">Todos</button> | |
| <button data-cat="control">Control y manipulación</button> | |
| <button data-cat="comunic">Comunicación</button> | |
| <button data-cat="digital">Dinámicas digitales</button> | |
| <button data-cat="sexual">Sexualidad y consentimiento</button> | |
| <button data-cat="ideol">Subculturas ideológicas</button> | |
| </div> | |
| <div class="glosario-grid"> | |
| <article class="glo-card" data-cat="control"> | |
| <div class="glo-cat">Control · manipulación</div> | |
| <h4 class="glo-term">Gaslighting</h4> | |
| <p class="glo-def">Hacer dudar a la pareja de su memoria o cordura para controlar la relación.</p> | |
| <div class="glo-alerta"><span>"Eso nunca pasó", "estás exagerando".</span></div> | |
| <div class="glo-alt"><span>Validar emociones y contrastar hechos sin burlas.</span></div> | |
| </article> | |
| <article class="glo-card" data-cat="control"> | |
| <div class="glo-cat">Control · manipulación</div> | |
| <h4 class="glo-term">Love bombing</h4> | |
| <p class="glo-def">Exceso de atención y promesas al inicio para enganchar y luego controlar.</p> | |
| <div class="glo-alerta"><span>"Te amo" al segundo día, exclusividad inmediata.</span></div> | |
| <div class="glo-alt"><span>Ritmo sano, límites claros, consentimiento en cada paso.</span></div> | |
| </article> | |
| <article class="glo-card" data-cat="control"> | |
| <div class="glo-cat">Control · manipulación</div> | |
| <h4 class="glo-term">Negging</h4> | |
| <p class="glo-def">Halagos con veneno que bajan la autoestima para ganar poder.</p> | |
| <div class="glo-alerta"><span>Cumplidos que humillan entre risas.</span></div> | |
| <div class="glo-alt"><span>Feedback respetuoso y directo.</span></div> | |
| </article> | |
| <article class="glo-card" data-cat="control"> | |
| <div class="glo-cat">Control · manipulación</div> | |
| <h4 class="glo-term">DARVO</h4> | |
| <p class="glo-def">Negar, atacar y victimizarse para evitar hacerse cargo.</p> | |
| <div class="glo-alerta"><span>Te culpan por reaccionar al maltrato.</span></div> | |
| <div class="glo-alt"><span>Responsabilizarse y reparar.</span></div> | |
| </article> | |
| <article class="glo-card" data-cat="comunic"> | |
| <div class="glo-cat">Comunicación</div> | |
| <h4 class="glo-term">Mansplaining</h4> | |
| <p class="glo-def">Explicar con condescendencia a una mujer temas que ella ya domina.</p> | |
| <div class="glo-alerta"><span>Interrumpir para decir lo mismo.</span></div> | |
| <div class="glo-alt"><span>Escuchar, preguntar y reconocer saberes.</span></div> | |
| </article> | |
| <article class="glo-card" data-cat="comunic"> | |
| <div class="glo-cat">Comunicación</div> | |
| <h4 class="glo-term">Manterrupting</h4> | |
| <p class="glo-def">Interrumpir a mujeres de forma sistemática en reuniones o clase.</p> | |
| <div class="glo-alerta"><span>Ellas hablan menos en plenaria.</span></div> | |
| <div class="glo-alt"><span>Reglas de turno y moderación activa.</span></div> | |
| </article> | |
| <article class="glo-card" data-cat="comunic"> | |
| <div class="glo-cat">Comunicación</div> | |
| <h4 class="glo-term">Manspreading</h4> | |
| <p class="glo-def">Ocupar de más en transporte o aula, restando espacio a otras personas.</p> | |
| <div class="glo-alerta"><span>Piernas muy abiertas, mochilas como barrera.</span></div> | |
| <div class="glo-alt"><span>Uso consciente del espacio común.</span></div> | |
| </article> | |
| <article class="glo-card" data-cat="digital"> | |
| <div class="glo-cat">Dinámicas digitales</div> | |
| <h4 class="glo-term">Ghosting</h4> | |
| <p class="glo-def">Desaparecer sin avisar para evitar una conversación incómoda.</p> | |
| <div class="glo-alerta"><span>Silencio total tras cercanía.</span></div> | |
| <div class="glo-alt"><span>Cierre respetuoso y breve.</span></div> | |
| </article> | |
| <article class="glo-card" data-cat="digital"> | |
| <div class="glo-cat">Dinámicas digitales</div> | |
| <h4 class="glo-term">Breadcrumbing</h4> | |
| <p class="glo-def">Dar migajas de interés para mantener disponible sin compromiso real.</p> | |
| <div class="glo-alerta"><span>Mensajes esporádicos que reactivan sin plan concreto.</span></div> | |
| <div class="glo-alt"><span>Comunicar expectativas, cortar ambigüedades.</span></div> | |
| </article> | |
| <article class="glo-card" data-cat="digital"> | |
| <div class="glo-cat">Dinámicas digitales</div> | |
| <h4 class="glo-term">Stalking digital</h4> | |
| <p class="glo-def">Vigilar ubicación, contraseñas o contactos como prueba de "amor".</p> | |
| <div class="glo-alerta"><span>"Dime tu ubicación en tiempo real, revisa tu celular".</span></div> | |
| <div class="glo-alt"><span>Privacidad y acuerdos claros de uso.</span></div> | |
| </article> | |
| <article class="glo-card" data-cat="digital"> | |
| <div class="glo-cat">Dinámicas digitales</div> | |
| <h4 class="glo-term">Difusión no consentida</h4> | |
| <p class="glo-def">Compartir fotos o videos íntimos sin permiso.</p> | |
| <div class="glo-alerta"><span>Presión para enviar, chantaje con material.</span></div> | |
| <div class="glo-alt"><span>Nunca compartir sin consentimiento. Rutas de ayuda.</span></div> | |
| </article> | |
| <article class="glo-card" data-cat="sexual"> | |
| <div class="glo-cat">Sexualidad · consentimiento</div> | |
| <h4 class="glo-term">Stealthing</h4> | |
| <p class="glo-def">Retirar el preservativo sin consentimiento durante la relación.</p> | |
| <div class="glo-alerta"><span>"Lo hice para sentir más".</span></div> | |
| <div class="glo-alt"><span>Consentimiento explícito en cada cambio.</span></div> | |
| </article> | |
| <article class="glo-card" data-cat="sexual"> | |
| <div class="glo-cat">Sexualidad · consentimiento</div> | |
| <h4 class="glo-term">Grooming</h4> | |
| <p class="glo-def">Adulto que gana confianza de un menor para fines sexuales.</p> | |
| <div class="glo-alerta"><span>Secretos, regalos, chats a escondidas.</span></div> | |
| <div class="glo-alt"><span>Educar en límites, reportar y proteger.</span></div> | |
| </article> | |
| <article class="glo-card" data-cat="ideol"> | |
| <div class="glo-cat">Subculturas ideológicas</div> | |
| <h4 class="glo-term">Incel</h4> | |
| <p class="glo-def">Varón que se declara célibe involuntario y puede culpar y odiar a las mujeres.</p> | |
| <div class="glo-alerta"><span>Discursos de desprecio o violencia.</span></div> | |
| <div class="glo-alt"><span>Educación emocional y redes de apoyo.</span></div> | |
| </article> | |
| <article class="glo-card" data-cat="ideol"> | |
| <div class="glo-cat">Subculturas ideológicas</div> | |
| <h4 class="glo-term">Red pill / manosphere</h4> | |
| <p class="glo-def">Narrativa que presenta la igualdad como amenaza y promueve jerarquías rígidas.</p> | |
| <div class="glo-alerta"><span>Generalizaciones y teorías conspirativas.</span></div> | |
| <div class="glo-alt"><span>Pensamiento crítico y datos.</span></div> | |
| </article> | |
| <article class="glo-card" data-cat="ideol"> | |
| <div class="glo-cat">Subculturas ideológicas</div> | |
| <h4 class="glo-term">Alfa / beta / sigma</h4> | |
| <p class="glo-def">Etiquetas que encasillan la valía masculina en dominación o desapego.</p> | |
| <div class="glo-alerta"><span>Justificar control o frialdad emocional.</span></div> | |
| <div class="glo-alt"><span>Diversidad de masculinidades y habilidades de cuidado.</span></div> | |
| </article> | |
| </div> | |
| </div> | |
| <div class="callout"> | |
| <div class="callout-label">Idea clave para el aula</div> | |
| <p>Tarjetas por equipos: tomar un término del glosario, dar un ejemplo local, identificar el efecto y proponer una alternativa saludable. Cerrar con un mini decálogo de buenas prácticas del curso en redes y aula.</p> | |
| </div> | |
| </section> | |
| <!-- ===================== UNIDAD V ===================== --> | |
| <section class="unit" id="unidad-5"> | |
| <div class="unit-header"> | |
| <div class="unit-number">V</div> | |
| <div> | |
| <span class="unit-tag">Unidad V</span> | |
| <h2 class="unit-title">Prevención de la VBG en nuestros espacios de socialización</h2> | |
| <p class="unit-intro"> | |
| Los espacios de socialización son verdaderas aulas de vida. Allí se aprenden modelos sobre lo que | |
| significa ser mujer u hombre. La tarea educativa es doble: nombrar lo que pasa y ofrecer | |
| alternativas concretas de convivencia. | |
| </p> | |
| </div> | |
| </div> | |
| <h3 style="margin-bottom:8px;color:var(--violet-900)">Mapa de espacios de socialización</h3> | |
| <p style="color:var(--ink-soft); max-width:60ch;">La violencia adopta códigos propios según el lugar. Lo útil es mirar el guion del espacio.</p> | |
| <div class="espacios"> | |
| <div class="espacio"><div class="espacio-emoji">⌂</div><h4>Familia</h4><p>Reparto del cuidado, decisiones, modelos de relación</p></div> | |
| <div class="espacio"><div class="espacio-emoji">▤</div><h4>Escuela</h4><p>Currículo oculto, participación, liderazgos</p></div> | |
| <div class="espacio"><div class="espacio-emoji">◐</div><h4>Iglesias</h4><p>Discursos sobre vestimenta, movilidad, denuncia</p></div> | |
| <div class="espacio"><div class="espacio-emoji">⚐</div><h4>Clubes deportivos</h4><p>Novatadas, cánticos, "pruebas de hombría"</p></div> | |
| <div class="espacio"><div class="espacio-emoji">✂</div><h4>Barberías y salones</h4><p>Conversaciones que cosifican, packs</p></div> | |
| <div class="espacio"><div class="espacio-emoji">◉</div><h4>Comercios</h4><p>Piropos insistentes, presión con alcohol</p></div> | |
| <div class="espacio"><div class="espacio-emoji">▶</div><h4>Transporte</h4><p>Seguimientos, comentarios, fotos sin consentimiento</p></div> | |
| <div class="espacio"><div class="espacio-emoji">@</div><h4>Redes y medios</h4><p>Memes, retos, contenido viral que humilla</p></div> | |
| </div> | |
| <h3 style="margin-top:56px;margin-bottom:8px;color:var(--violet-900)">Semáforo de señales en la comunidad</h3> | |
| <p style="color:var(--ink-soft); max-width:60ch;">Verde: prácticas cuidadosas. Amarillo: dudas que requieren conversación. Rojo: acciones que activan intervención inmediata.</p> | |
| <div class="semaforo"> | |
| <div class="sem-col verde"> | |
| <div class="sem-title"><span class="sem-light"></span>Verde · prevención</div> | |
| <ul> | |
| <li>Reglas de turno y escucha activa</li> | |
| <li>Liderazgos rotativos</li> | |
| <li>Lenguaje inclusivo en circulares</li> | |
| <li>Consentimiento explícito</li> | |
| <li>Acompañamiento entre pares</li> | |
| </ul> | |
| </div> | |
| <div class="sem-col amarillo"> | |
| <div class="sem-title"><span class="sem-light"></span>Amarillo · alerta</div> | |
| <ul> | |
| <li>Chistes sexistas "inocentes"</li> | |
| <li>Control del celular en pareja</li> | |
| <li>Reparto desigual de tareas</li> | |
| <li>Comentarios sobre cuerpo o ropa</li> | |
| <li>Bromas que silencian</li> | |
| </ul> | |
| </div> | |
| <div class="sem-col rojo"> | |
| <div class="sem-title"><span class="sem-light"></span>Rojo · urgencia</div> | |
| <ul> | |
| <li>Tocamientos no consentidos</li> | |
| <li>Amenazas o coacción</li> | |
| <li>Difusión de imágenes íntimas</li> | |
| <li>Aislamiento forzado</li> | |
| <li>Cualquier agresión física</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <h3 style="margin-top:56px;margin-bottom:8px;color:var(--violet-900)">Estrategia 4D para personas testigo</h3> | |
| <p style="color:var(--ink-soft); max-width:60ch;">Cuando se observa una situación de violencia, hay cuatro acciones para intervenir sin exponerse.</p> | |
| <div class="four-d"> | |
| <div class="d-step"> | |
| <div class="d-step-num">1</div> | |
| <h4>Detener</h4> | |
| <p>Cortar la cadena con una frase breve y firme. "Aquí no". "Eso no se dice".</p> | |
| </div> | |
| <div class="d-step"> | |
| <div class="d-step-num">2</div> | |
| <h4>Desviar</h4> | |
| <p>Cambiar el foco con otra tarea o pregunta. Crear espacio para que la víctima salga de la situación.</p> | |
| </div> | |
| <div class="d-step"> | |
| <div class="d-step-num">3</div> | |
| <h4>Delegar</h4> | |
| <p>Buscar apoyo de alguien con autoridad: docente, coordinación, personal de seguridad, policía.</p> | |
| </div> | |
| <div class="d-step"> | |
| <div class="d-step-num">4</div> | |
| <h4>Documentar</h4> | |
| <p>Anotar fecha, hora, lugar y testigos. Guardar evidencias si es seguro. No exponer a la víctima.</p> | |
| </div> | |
| </div> | |
| <h3 style="margin-top:56px;margin-bottom:16px;color:var(--violet-900)">Lenguaje inclusivo · tres caminos prácticos</h3> | |
| <div class="card-grid grid-3"> | |
| <div class="card"> | |
| <h3>1 · Colectivos neutros</h3> | |
| <p>Use sustantivos colectivos reales cuando sea posible.</p> | |
| <p style="margin-top:12px;padding:12px;background:var(--violet-50);border-radius:8px;font-size:0.9rem;"> | |
| <span style="color:#991b1b;text-decoration:line-through;">"los alumnos"</span><br/> | |
| <span style="color:#065f46;font-weight:600;">"el estudiantado"</span> | |
| </p> | |
| </div> | |
| <div class="card"> | |
| <h3>2 · Desdoblamiento medido</h3> | |
| <p>Cuando aluda a personas concretas y el contexto lo permita.</p> | |
| <p style="margin-top:12px;padding:12px;background:var(--violet-50);border-radius:8px;font-size:0.9rem;"> | |
| <span style="color:#991b1b;text-decoration:line-through;">"los egresados"</span><br/> | |
| <span style="color:#065f46;font-weight:600;">"las y los egresados"</span> | |
| </p> | |
| </div> | |
| <div class="card"> | |
| <h3>3 · Cargos en femenino</h3> | |
| <p>Nombre en femenino los cargos que desempeñan mujeres.</p> | |
| <p style="margin-top:12px;padding:12px;background:var(--violet-50);border-radius:8px;font-size:0.9rem;"> | |
| <span style="color:#991b1b;text-decoration:line-through;">"la rector"</span><br/> | |
| <span style="color:#065f46;font-weight:600;">"la rectora", "la ingeniera"</span> | |
| </p> | |
| </div> | |
| </div> | |
| <div class="callout"> | |
| <div class="callout-label">Idea clave para el aula</div> | |
| <p>Pacto de convivencia del sector: en una página por lugar, defina cinco reglas del código, dos frases de intervención 4D, contactos de apoyo y un microcompromiso firmado por una persona responsable y un representante juvenil.</p> | |
| </div> | |
| </section> | |
| <footer class="footer"> | |
| <div class="footer-container"> | |
| <div class="footer-grid"> | |
| <div> | |
| <h3>Sobre la guía</h3> | |
| <p style="font-size:0.88rem;">Material editado en el marco del proyecto Articulación para la Dignidad y la Libertad, liderado por NAM, OPDM y Profamilia, con el apoyo de la Unión Europea.</p> | |
| </div> | |
| <div> | |
| <h3>Autoría</h3> | |
| <ul> | |
| <li>Fidelina de la Rosa Hidalgo (Virtudes)</li> | |
| <li>Ramón Stalin Montero Santiago</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3>Producción</h3> | |
| <ul> | |
| <li>Diseño: Meriliza Victorino</li> | |
| <li>Ilustraciones: Luis Encarnación</li> | |
| <li>Corrección: Jovanka Suero M.</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3>Líneas de ayuda</h3> | |
| <ul> | |
| <li><strong style="color:white">*212</strong> · Ministerio de la Mujer</li> | |
| <li><strong style="color:white">911</strong> · Emergencias</li> | |
| <li><strong style="color:white">809-200-1202</strong> · Línea Vida</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <span>Publicación: Noviembre de 2025 · República Dominicana</span> | |
| <span>Resumen visual interactivo · uso pedagógico</span> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| const fases = document.querySelectorAll('.ciclo-fase'); | |
| const detailTitle = document.getElementById('ciclo-detail-title'); | |
| const detailText = document.getElementById('ciclo-detail-text'); | |
| fases.forEach(f => { | |
| f.addEventListener('click', () => { | |
| fases.forEach(x => x.classList.remove('active')); | |
| f.classList.add('active'); | |
| detailTitle.textContent = f.dataset.title; | |
| detailText.textContent = f.dataset.text; | |
| }); | |
| }); | |
| const filterBtns = document.querySelectorAll('.glosario-filter button'); | |
| const cards = document.querySelectorAll('.glo-card'); | |
| filterBtns.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| filterBtns.forEach(b => b.classList.remove('active')); | |
| btn.classList.add('active'); | |
| const cat = btn.dataset.cat; | |
| cards.forEach(c => { | |
| c.style.display = (cat === 'todos' || c.dataset.cat === cat) ? '' : 'none'; | |
| }); | |
| }); | |
| }); | |
| const navLinks = document.querySelectorAll('.topnav a'); | |
| const sections = document.querySelectorAll('.unit'); | |
| const setActiveNav = () => { | |
| let current = ''; | |
| sections.forEach(s => { | |
| const top = s.getBoundingClientRect().top; | |
| if (top < 200) current = s.id; | |
| }); | |
| navLinks.forEach(l => { | |
| l.classList.toggle('active', l.getAttribute('href') === '#' + current); | |
| }); | |
| }; | |
| window.addEventListener('scroll', setActiveNav); | |
| setActiveNav(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment