Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Ecosistema Académico Global en Biotecnología</title> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap'); | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| background-color: #f0f2f5; | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| .slide { | |
| width: 1280px; | |
| height: 720px; | |
| background: linear-gradient(135deg, #e0f7fa 0%, #f0f4c3 100%); | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| position: relative; | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.1); | |
| animation: fadeIn 1s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: scale(0.95); } | |
| to { opacity: 1; transform: scale(1); } | |
| } | |
| .header { | |
| padding: 20px 50px; | |
| text-align: center; | |
| color: #003366; | |
| border-bottom: 2px solid rgba(0, 83, 156, 0.1); | |
| } | |
| .header h1 { | |
| font-size: 36px; | |
| margin: 0; | |
| font-weight: 700; | |
| } | |
| .header h2 { | |
| font-size: 18px; | |
| margin: 5px 0 0; | |
| font-weight: 400; | |
| color: #00539c; | |
| } | |
| .main-content { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| grid-template-rows: auto auto; | |
| gap: 15px; | |
| padding: 20px; | |
| flex-grow: 1; | |
| } | |
| .region-card { | |
| background-color: rgba(255, 255, 255, 0.8); | |
| border-radius: 12px; | |
| padding: 15px; | |
| border: 1px solid rgba(0,0,0,0.05); | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.05); | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .region-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 8px 20px rgba(0,0,0,0.1); | |
| } | |
| .region-card h3 { | |
| margin: 0 0 10px 0; | |
| font-size: 16px; | |
| font-weight: 600; | |
| display: flex; | |
| align-items: center; | |
| border-bottom: 2px solid; | |
| padding-bottom: 8px; | |
| } | |
| .region-card h3 .icon { | |
| width: 20px; | |
| height: 20px; | |
| margin-right: 8px; | |
| } | |
| .region-card ul { | |
| margin: 0; | |
| padding-left: 20px; | |
| font-size: 13px; | |
| color: #333; | |
| } | |
| .region-card ul li { | |
| margin-bottom: 6px; | |
| line-height: 1.4; | |
| } | |
| .region-card ul li::marker { | |
| font-size: 1.2em; | |
| } | |
| #ecuador { grid-column: 1 / 2; grid-row: 1 / 2; border-left: 5px solid #FFC107; } | |
| #ecuador h3 { color: #D4A000; border-color: #FFC107; } | |
| #latam { grid-column: 2 / 3; grid-row: 1 / 2; border-left: 5px solid #28A745; } | |
| #latam h3 { color: #1E7E34; border-color: #28A745; } | |
| #global { grid-column: 1 / 2; grid-row: 2 / 3; border-left: 5px solid #007BFF; } | |
| #global h3 { color: #0056B3; border-color: #007BFF; } | |
| #apac { grid-column: 2 / 3; grid-row: 2 / 3; border-left: 5px solid #DC3545; } | |
| #apac h3 { color: #B02A37; border-color: #DC3545; } | |
| .map-container { | |
| grid-column: 3 / 5; | |
| grid-row: 1 / 3; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| position: relative; | |
| } | |
| #world-map { | |
| width: 100%; | |
| height: auto; | |
| } | |
| #world-map .land { | |
| fill: #b2dfdb; /* Light teal for land */ | |
| stroke: #ffffff; | |
| stroke-width: 0.5; | |
| } | |
| .map-marker { | |
| fill: rgba(220, 53, 69, 0.8); /* Red marker */ | |
| stroke: white; | |
| stroke-width: 0.5px; | |
| animation: pulse 2s infinite; | |
| cursor: pointer; | |
| } | |
| .map-marker-usa { fill: rgba(0, 123, 255, 0.8); } /* Blue for USA */ | |
| .map-marker-eu { fill: rgba(0, 123, 255, 0.8); } /* Blue for Europe */ | |
| .map-marker-latam { fill: rgba(40, 167, 69, 0.8); } /* Green for Latam */ | |
| .map-marker-apac { fill: rgba(220, 53, 69, 0.8); } /* Red for APAC */ | |
| .map-marker-ecu { fill: rgba(255, 193, 7, 0.9); } /* Yellow for Ecuador */ | |
| @keyframes pulse { | |
| 0% { r: 3; opacity: 1; } | |
| 50% { r: 6; opacity: 0.5; } | |
| 100% { r: 3; opacity: 1; } | |
| } | |
| .footer { | |
| display: grid; | |
| grid-template-columns: 1fr 1.5fr; | |
| gap: 20px; | |
| padding: 0 20px 20px 20px; | |
| align-items: stretch; | |
| } | |
| .conclusion-box, .factors-box, .flow-box { | |
| background-color: rgba(255, 255, 255, 0.8); | |
| border-radius: 12px; | |
| padding: 15px; | |
| border: 1px solid rgba(0,0,0,0.05); | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.05); | |
| } | |
| .bottom-container { | |
| grid-column: 1 / 5; | |
| display: flex; | |
| gap: 15px; | |
| align-items: stretch; | |
| } | |
| .flow-box { | |
| flex: 2; | |
| border-top: 5px solid #6f42c1; | |
| } | |
| .flow-chart { | |
| display: flex; | |
| justify-content: space-around; | |
| align-items: center; | |
| height: 100%; | |
| } | |
| .flow-item { | |
| text-align: center; | |
| color: #6f42c1; | |
| font-weight: 600; | |
| } | |
| .flow-item .icon { | |
| width: 40px; | |
| height: 40px; | |
| margin-bottom: 5px; | |
| fill: #6f42c1; | |
| } | |
| .flow-arrow { | |
| font-size: 30px; | |
| color: #6f42c1; | |
| font-weight: bold; | |
| opacity: 0.5; | |
| } | |
| .conclusion-box { | |
| flex: 1.5; | |
| border-top: 5px solid #17a2b8; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| } | |
| .conclusion-box h4 { | |
| margin: 0 0 5px 0; | |
| font-size: 16px; | |
| color: #0f6674; | |
| } | |
| .conclusion-box p { | |
| margin: 0; | |
| font-size: 16px; | |
| font-style: italic; | |
| text-align: center; | |
| color: #0f6674; | |
| font-weight: 600; | |
| } | |
| .factors-box { | |
| flex: 1.5; | |
| border-top: 5px solid #fd7e14; | |
| } | |
| .factors-box h4 { | |
| margin: 0 0 10px 0; | |
| font-size: 16px; | |
| color: #c4610f; | |
| } | |
| .factors-box ul { | |
| margin: 0; | |
| padding-left: 20px; | |
| font-size: 13px; | |
| color: #333; | |
| list-style-type: '✓ '; | |
| } | |
| .factors-box ul li { | |
| margin-bottom: 2px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="slide"> | |
| <div class="header"> | |
| <h1>Ecosistema Académico Global en Biotecnología</h1> | |
| <h2>Base educativa como fundamento del desarrollo industrial</h2> | |
| </div> | |
| <div class="main-content"> | |
| <div class="region-card" id="ecuador"> | |
| <h3><svg class="icon" viewBox="0 0 24 24"><path fill="currentColor" d="M12,3L1,9L12,15L21,10.09V17H23V9L12,3M5,10.18L12,13.72L19,10.18L12,6.63L5,10.18Z" /></svg>Ecuador</h3> | |
| <ul> | |
| <li>11+ universidades con programas consolidados</li> | |
| <li>Fortaleza en formación pero brecha de transferencia</li> | |
| <li>Potencial para COBIEC como catalizador</li> | |
| </ul> | |
| </div> | |
| <div class="region-card" id="latam"> | |
| <h3><svg class="icon" viewBox="0 0 24 24"><path fill="currentColor" d="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10s10,-4.48 10,-10S17.52,2 12,2zM13,12c0,3.31 -2.69,6 -6,6c-0.34,0 -0.67,-0.03 -1,-0.08C6.32,14.26 8.94,12 12,12c0.34,0 0.67,0.03 1,0.08c-0.32,3.72 -3.26,6.66 -7,6.92C3.18,17.43 2,14.86 2,12c0,-2.03 0.63,-3.9 1.69,-5.43C5.63,7.5 8.5,10.43 8.08,14c0.33,-0.05 0.66,-0.08 1,-0.08c3.31,0 6,-2.69 6,-6c0.34,0 0.67,0.03 1,0.08c-0.42,-3.57 2.2,-6.3 5.31,-6.63C16.37,3.63 14.03,6 11,6c-0.34,0 -0.67,-0.03 -1,-0.08c0.32,-3.72 3.26,-6.66 7,-6.92C19.82,4.57 22,8.14 22,12c0,2.03 -0.63,3.9 -1.69,5.43c-1.92,-0.92 -3.5,-2.59 -4.31,-4.5C14.5,10.43 11.5,7.5 11.92,4c-0.33,0.05 -0.66,0.08 -1,0.08C7.69,4 5,6.69 5,10c0,-0.34 -0.03,-0.67 -0.08,-1C8.74,8.68 12,5.45 12,2z" /></svg>Líderes Regionales: América Latina</h3> | |
| <ul> | |
| <li><b>Brasil:</b> Líder regional con ecosistema robusto</li> | |
| <li><b>México:</b> Base académica sólida y sector industrial creciente</li> | |
| <li><b>Argentina:</b> Modelo provincial avanzado (Colegio Santafesino)</li> | |
| </ul> | |
| </div> | |
| <div class="region-card" id="global"> | |
| <h3><svg class="icon" viewBox="0 0 24 24"><path fill="currentColor" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>Potencias Globales</h3> | |
| <ul> | |
| <li><b>EE.UU.:</b> MIT, Harvard, Stanford - Ecosistema integrado</li> | |
| <li><b>Reino Unido:</b> Cambridge, Oxford - Excelencia investigativa</li> | |
| <li><b>Suiza:</b> ETH Zurich - Modelo de alta eficiencia</li> | |
| <li><b>Alemania:</b> Sistema descentralizado de BioRegions</li> | |
| </ul> | |
| </div> | |
| <div class="region-card" id="apac"> | |
| <h3><svg class="icon" viewBox="0 0 24 24"><path fill="currentColor" d="M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z" /></svg>Asia-Pacífico Emergente</h3> | |
| <ul> | |
| <li><b>Japón:</b> U. de Tokio - Biotecnología médica</li> | |
| <li><b>Corea del Sur:</b> U. Nacional de Seúl - Liderazgo en patentes</li> | |
| <li><b>Australia:</b> Melbourne, Queensland - Crecimiento acelerado</li> | |
| </ul> | |
| </div> | |
| <div class="map-container"> | |
| <svg id="world-map" viewBox="0 0 1000 500"> | |
| <path class="land" d="M632.5 425.8l-5.6-3.8-2.3-4.2-2.3-4.2-3.4-3.8-2.3-4.2-3.1-3.8-2.3-4.2-2.3-4.2-3.1-3.8-2.3-4.2-2.3-4.2-3.4-3.8-3.1-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3-4.2-2.3-4.2-3.1-3.8-3.4-3.8-2.3- |