Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Indicadores Clave del Desarrollo Biotecnológico</title> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap'); | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| background-color: #f0f0f0; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| .slide { | |
| width: 1280px; | |
| height: 720px; | |
| background: linear-gradient(135deg, #0A1931 0%, #182848 100%); | |
| color: #E0E0E0; | |
| display: flex; | |
| flex-direction: column; | |
| padding: 40px; | |
| box-sizing: border-box; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| @keyframes slideUp { | |
| from { transform: translateY(20px); opacity: 0; } | |
| to { transform: translateY(0); opacity: 1; } | |
| } | |
| .slide-header { | |
| animation: fadeIn 1s ease-out; | |
| padding-bottom: 20px; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .slide-header h1 { | |
| font-size: 36px; | |
| margin: 0; | |
| color: #FFFFFF; | |
| font-weight: 700; | |
| } | |
| .slide-header h2 { | |
| font-size: 18px; | |
| margin: 5px 0 0 0; | |
| color: #A0B0C0; | |
| font-weight: 400; | |
| } | |
| .slide-content { | |
| display: grid; | |
| grid-template-columns: 1fr 1.2fr 1fr; | |
| gap: 25px; | |
| flex-grow: 1; | |
| padding-top: 25px; | |
| } | |
| .card { | |
| background-color: rgba(255, 255, 255, 0.03); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 12px; | |
| padding: 20px; | |
| box-sizing: border-box; | |
| display: flex; | |
| flex-direction: column; | |
| animation: slideUp 0.8s ease-out forwards; | |
| opacity: 0; | |
| } | |
| .card:nth-child(1) { animation-delay: 0.2s; } | |
| .card:nth-child(2) { animation-delay: 0.3s; } | |
| .card:nth-child(3) { animation-delay: 0.4s; } | |
| .card:nth-child(4) { animation-delay: 0.5s; } | |
| .card:nth-child(5) { animation-delay: 0.6s; } | |
| .card-title { | |
| font-size: 18px; | |
| font-weight: 600; | |
| color: #4DD0E1; | |
| margin: 0 0 15px 0; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .card-title svg { | |
| margin-right: 10px; | |
| width: 22px; | |
| height: 22px; | |
| } | |
| .card ul { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| font-size: 14px; | |
| line-height: 1.7; | |
| } | |
| .card ul li { | |
| padding-left: 20px; | |
| position: relative; | |
| margin-bottom: 8px; | |
| } | |
| .card ul li::before { | |
| content: '•'; | |
| position: absolute; | |
| left: 0; | |
| color: #FFCA28; | |
| font-size: 18px; | |
| line-height: 1; | |
| } | |
| .highlight { | |
| color: #FFCA28; | |
| font-weight: 600; | |
| } | |
| .column-1, .column-2, .column-3 { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 25px; | |
| } | |
| /* Patent Chart Styles */ | |
| .patent-chart { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| width: 100%; | |
| } | |
| .patent-item { | |
| margin-bottom: 12px; | |
| animation: slideUp 0.8s ease-out forwards; | |
| opacity: 0; | |
| } | |
| .patent-item:nth-child(1) { animation-delay: 0.5s; } | |
| .patent-item:nth-child(2) { animation-delay: 0.6s; } | |
| .patent-item:nth-child(3) { animation-delay: 0.7s; } | |
| .patent-item:nth-child(4) { animation-delay: 0.8s; } | |
| .patent-label { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 14px; | |
| margin-bottom: 5px; | |
| } | |
| .patent-bar-container { | |
| background-color: rgba(0, 0, 0, 0.2); | |
| border-radius: 4px; | |
| height: 20px; | |
| overflow: hidden; | |
| } | |
| @keyframes growBar { | |
| from { width: 0%; } | |
| to { /* width is set inline */ } | |
| } | |
| .patent-bar { | |
| height: 100%; | |
| background: linear-gradient(90deg, #29B6F6 0%, #4DD0E1 100%); | |
| border-radius: 4px; | |
| animation: growBar 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; | |
| } | |
| /* Investment Chart Styles */ | |
| .investment-chart-container { | |
| flex-grow: 1; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-end; | |
| } | |
| .chart-body { | |
| display: flex; | |
| justify-content: space-around; | |
| align-items: flex-end; | |
| height: 100%; | |
| border-bottom: 1px solid #A0B0C0; | |
| padding-bottom: 5px; | |
| gap: 15px; | |
| } | |
| @keyframes growBarVertical { | |
| from { height: 0%; } | |
| to { /* height is set inline */ } | |
| } | |
| .chart-bar { | |
| width: 35px; | |
| background: linear-gradient(180deg, #4DD0E1 0%, #29B6F6 100%); | |
| border-radius: 5px 5px 0 0; | |
| animation: growBarVertical 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; | |
| } | |
| .chart-labels { | |
| display: flex; | |
| justify-content: space-around; | |
| font-size: 12px; | |
| color: #A0B0C0; | |
| padding-top: 5px; | |
| gap: 15px; | |
| } | |
| .chart-label-item { | |
| flex: 1; | |
| text-align: center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="slide"> | |
| <div class="slide-header"> | |
| <h1>Indicadores Clave del Desarrollo Biotecnológico</h1> | |
| <h2>Datos Actualizados 2023-2024</h2> | |
| </div> | |
| <div class="slide-content"> | |
| <div class="column-1"> | |
| <div class="card" style="animation-delay: 0.2s;"> | |
| <h3 class="card-title"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#FFCA28"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.41 16.09V20h-2.82v-3.91c-1.7-.44-3-1.99-3-3.86 0-2.21 1.79-4 4-4s4 1.79 4 4c0 1.87-1.3 3.42-3 3.86zM12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg> | |
| Inversión Global 2023-2024 | |
| </h3> | |
| <ul> | |
| <li>EE.UU: <span class="highlight">$15.2B</span> en capital de riesgo.</li> | |
| <li>Europa: <span class="highlight">€99.5B</span> contribución al PIB (UE27).</li> | |
| <li>Tendencias: Mercado de IPOs selectivo, foco en terapias avanzadas.</li> | |
| </ul> | |
| </div> | |
| <div class="card" style="animation-delay: 0.3s;"> | |
| <h3 class="card-title"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#4DD0E1"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg> | |
| Empleo y Impacto Económico | |
| </h3> | |
| <ul> | |
| <li>UE27: <span class="highlight">825,000</span> empleos totales.</li> | |
| <li>Crecimiento sostenido en biotecnología médica.</li> | |
| <li>Expansión en biotecnología industrial y ambiental.</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="column-2"> | |
| <div class="card" style="flex-grow: 1; animation-delay: 0.4s;"> | |
| <h3 class="card-title">Emerging Therapeutic Company Investment Trends</h3> | |
| <div class="investment-chart-container"> | |
| <div class="chart-body"> | |
| <div class="chart-bar" style="height: 45%; animation-delay: 0.5s;"></div> | |
| <div class="chart-bar" style="height: 60%; animation-delay: 0.6s;"></div> | |
| <div class="chart-bar" style="height: 55%; animation-delay: 0.7s;"></div> | |
| <div class="chart-bar" style="height: 80%; animation-delay: 0.8s;"></div> | |
| <div class="chart-bar" style="height: 95%; animation-delay: 0.9s;"></div> | |
| <div class="chart-bar" style="height: 75%; animation-delay: 1.0s;"></div> | |
| </div> | |
| <div class="chart-labels"> | |
| <div class="chart-label-item">2019</div> | |
| <div class="chart-label-item">2020</div> | |
| <div class="chart-label-item">2021</div> | |
| <div class="chart-label-item">2022</div> | |
| <div class="chart-label-item">2023</div> | |
| <div class="chart-label-item">2024</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card" style="animation-delay: 0.5s;"> | |
| <h3 class="card-title">Análisis</h3> | |
| <ul> | |
| <li>Consolidación del sector: Fusiones y adquisiciones.</li> | |
| <li>Foco en sostenibilidad: Biotecnología verde.</li> | |
| <li>Digitalización: IA aplicada a la biotecnología.</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="column-3"> | |
| <div class="card" style="animation-delay: 0.6s;"> | |
| <h3 class="card-title"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#4DD0E1"><path d="M4 19h16v-7h-4v3h-2v-3h-4v3H8v-3H4v7zm0-9h16V4H4v6zm2-4h2v2H6V6zm4 0h2v2h-2V6zm4 0h2v2h-2V6z"/></svg> | |
| Patentes y Innovación (2022) | |
| </h3> | |
| <ul class="patent-chart"> | |
| <li class="patent-item"> | |
| <div class="patent-label"><span>Corea del Sur</span><span>1,407</span></div> | |
| <div class="patent-bar-container"><div class="patent-bar" style="width: 100%;"></div></div> | |
| </li> | |
| <li class="patent-item"> | |
| <div class="patent-label"><span>Alemania</span><span>659</span></div> | |
| <div class="patent-bar-container"><div class="patent-bar" style="width: 46.8%;"></div></div> | |
| </li> | |
| <li class="patent-item"> | |
| <div class="patent-label"><span>Francia</span><span>528</span></div> | |
| <div class="patent-bar-container"><div class="patent-bar" style="width: 37.5%;"></div></div> | |
| </li> | |
| <li class="patent-item"> | |
| <div class="patent-label"><span>Canadá</span><span>309</span></div> | |
| <div class="patent-bar-container"><div class="patent-bar" style="width: 21.9%;"></div></div> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="card" style="animation-delay: 0.7s;"> | |
| <h3 class="card-title"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#FFCA28"><path d="M14 6V4h-4v2h4zM4 8v11h16V8H4zm16-2c1.11 0 2 .89 2 2v11c0 1.11-.89 2-2 2H4c-1.11 0-2-.89-2-2V8c0-1.11.89-2 2-2h3V4c0-1.11.89-2 2-2h6c1.11 0 2 .89 2 2v2h3z"/></svg> | |
| Modelos de Intensidad I+D | |
| </h3> | |
| <ul> | |
| <li>Suiza: <span class="highlight">13.6 M USD</span> por empresa.</li> | |
| <li>Alemania: <span class="highlight">5.6 M USD</span> por empresa.</li> | |
| <li>España: <span class="highlight">1.2 M USD</span> por empresa.</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |