Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Tendencias Emergentes 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; | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #0A192F; | |
| color: #CCD6F6; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| width: 100vw; | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| .slide { | |
| width: 1280px; | |
| height: 720px; | |
| background: radial-gradient(circle at top right, rgba(10, 25, 47, 0.8), #0A192F 70%), linear-gradient(135deg, #0A192F 0%, #112240 100%); | |
| position: relative; | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| padding: 40px 60px; | |
| box-sizing: border-box; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .header { | |
| animation: fadeIn 0.8s ease-out; | |
| } | |
| h1 { | |
| font-size: 48px; | |
| font-weight: 700; | |
| color: #FFFFFF; | |
| margin: 0; | |
| line-height: 1.1; | |
| } | |
| h2 { | |
| font-size: 20px; | |
| font-weight: 400; | |
| color: #64FFDA; | |
| margin: 5px 0 0 0; | |
| } | |
| .content-grid { | |
| display: grid; | |
| grid-template-columns: 270px 270px 1fr; | |
| grid-template-rows: auto auto; | |
| gap: 20px; | |
| margin-top: 25px; | |
| flex-grow: 1; | |
| } | |
| .card { | |
| background-color: rgba(17, 34, 64, 0.5); | |
| border: 1px solid rgba(100, 255, 218, 0.2); | |
| border-radius: 8px; | |
| padding: 20px; | |
| box-sizing: border-box; | |
| animation: fadeIn 1s ease-out forwards; | |
| backdrop-filter: blur(4px); | |
| } | |
| .card:nth-child(1) { animation-delay: 0.2s; opacity: 0; } | |
| .card:nth-child(2) { animation-delay: 0.3s; opacity: 0; } | |
| .card:nth-child(3) { animation-delay: 0.4s; opacity: 0; } | |
| .card:nth-child(4) { animation-delay: 0.5s; opacity: 0; } | |
| .info-section { animation-delay: 0.6s; opacity: 0; } | |
| .info-box { animation-delay: 0.7s; opacity: 0; } | |
| .region-box { animation-delay: 0.8s; opacity: 0; } | |
| .card-title { | |
| font-size: 16px; | |
| font-weight: 600; | |
| color: #64FFDA; | |
| margin-bottom: 12px; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .card-title .icon { | |
| margin-right: 8px; | |
| fill: #64FFDA; | |
| width: 20px; | |
| height: 20px; | |
| } | |
| .card ul { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .card li { | |
| font-size: 13px; | |
| line-height: 1.6; | |
| color: #CCD6F6; | |
| margin-bottom: 6px; | |
| padding-left: 15px; | |
| position: relative; | |
| } | |
| .card li::before { | |
| content: '•'; | |
| position: absolute; | |
| left: 0; | |
| color: #64FFDA; | |
| } | |
| .arrow-connector { | |
| position: absolute; | |
| top: 265px; | |
| left: 310px; | |
| width: 30px; | |
| height: 30px; | |
| background-color: #64FFDA; | |
| clip-path: polygon(0 0, 100% 50%, 0 100%); | |
| opacity: 0.5; | |
| } | |
| .info-section { | |
| grid-column: 3 / 4; | |
| grid-row: 1 / 3; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| animation: fadeIn 1s ease-out forwards; | |
| } | |
| .venn-diagram-container { | |
| position: relative; | |
| width: 100%; | |
| height: 280px; | |
| margin-top: -20px; | |
| } | |
| .venn-circle { | |
| position: absolute; | |
| border-radius: 50%; | |
| mix-blend-mode: screen; | |
| opacity: 0.7; | |
| } | |
| .circle1 { | |
| width: 160px; | |
| height: 160px; | |
| background: rgba(100, 255, 218, 0.4); | |
| top: 20px; | |
| left: 50px; | |
| } | |
| .circle2 { | |
| width: 160px; | |
| height: 160px; | |
| background: rgba(100, 200, 255, 0.4); | |
| top: 20px; | |
| right: 50px; | |
| } | |
| .circle3 { | |
| width: 160px; | |
| height: 160px; | |
| background: rgba(138, 100, 255, 0.4); | |
| bottom: 10px; | |
| left: 125px; | |
| } | |
| .venn-label { | |
| position: absolute; | |
| color: #FFFFFF; | |
| font-size: 14px; | |
| font-weight: 600; | |
| text-align: center; | |
| } | |
| .label-ia { top: 10px; left: 45px; } | |
| .label-sintetica { top: 10px; right: 45px; width: 100px; } | |
| .label-nano { bottom: 0px; left: 110px; } | |
| .label-expo { top: 110px; left: 50%; transform: translateX(-50%); font-size: 16px; color: #FFFFFF; width: 120px; } | |
| .info-box { | |
| background-color: rgba(17, 34, 64, 0.5); | |
| border-top: 2px solid #64FFDA; | |
| padding: 15px; | |
| border-radius: 0 0 4px 4px; | |
| animation: fadeIn 1s ease-out forwards; | |
| } | |
| .info-box-title { | |
| font-size: 16px; | |
| font-weight: 600; | |
| color: #FFFFFF; | |
| margin-bottom: 10px; | |
| } | |
| .info-box p { | |
| font-size: 13px; | |
| line-height: 1.6; | |
| color: #CCD6F6; | |
| margin: 0 0 8px 0; | |
| } | |
| .info-box p strong { | |
| color: #64FFDA; | |
| font-weight: 600; | |
| } | |
| .region-box { | |
| background-color: rgba(17, 34, 64, 0.5); | |
| border-top: 2px solid #64FFDA; | |
| padding: 15px; | |
| border-radius: 0 0 4px 4px; | |
| animation: fadeIn 1s ease-out forwards; | |
| } | |
| .region-box ul { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .region-box li { | |
| font-size: 13px; | |
| color: #CCD6F6; | |
| margin-bottom: 5px; | |
| } | |
| .region-box li strong { | |
| color: #64FFDA; | |
| font-weight: 600; | |
| min-width: 100px; | |
| display: inline-block; | |
| } | |
| .timeline { | |
| position: absolute; | |
| bottom: 40px; | |
| left: 60px; | |
| right: 60px; | |
| height: 30px; | |
| animation: fadeIn 1s ease-out 1s forwards; | |
| opacity: 0; | |
| } | |
| .timeline-line { | |
| width: 100%; | |
| height: 2px; | |
| background-color: rgba(100, 255, 218, 0.3); | |
| position: absolute; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| } | |
| .timeline-marker { | |
| position: absolute; | |
| top: 50%; | |
| transform: translate(-50%, -50%); | |
| } | |
| .timeline-marker .dot { | |
| width: 12px; | |
| height: 12px; | |
| background-color: #0A192F; | |
| border: 2px solid #64FFDA; | |
| border-radius: 50%; | |
| } | |
| .timeline-marker .year { | |
| position: absolute; | |
| top: -25px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| font-size: 14px; | |
| color: #CCD6F6; | |
| } | |
| .marker-2024 { left: 10%; } | |
| .marker-2025 { left: 25%; } | |
| .marker-2027 { left: 55%; } | |
| .marker-2030 { left: 95%; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="slide"> | |
| <div class="header"> | |
| <h1>Tendencias Emergentes en <br>Biotecnología</h1> | |
| <h2>Análisis Prospectivo 2024-2025</h2> | |
| </div> | |
| <div class="content-grid"> | |
| <!-- Column 1 --> | |
| <div class="card"> | |
| <div class="card-title"> | |
| <svg class="icon" viewBox="0 0 24 24"><path d="M12,2A10,10,0,0,0,2,12C2,16.42,5.58,20,10,20C14.42,20,18,16.42,18,12H16C16,15.31,13.31,18,10,18C6.69,18,4,15.31,4,12C4,8.69,6.69,6,10,6V2M12,4.67C12,6.4,10.4,7.84,8.67,7.62C7.2,7.42,6,6.23,5.73,4.82C5.5,3.5,6.2,2.23,7.47,1.93C8.8,1.6,10.09,2.27,10.83,3.34L12,4.67M19,8H22V11H19V8M19,13H22V16H19V13M19,18H22V21H19V18Z"></path></svg> | |
| Biotecnología Verde y Sostenibilidad | |
| </div> | |
| <ul> | |
| <li>Economía circular y bioeconomía</li> | |
| <li>Reducción de huella de carbono</li> | |
| <li>Materiales biodegradables y bioplásticos</li> | |
| <li>Agricultura sostenible y precision farming</li> | |
| </ul> | |
| </div> | |
| <div class="card"> | |
| <div class="card-title"> | |
| <svg class="icon" viewBox="0 0 24 24"><path d="M12.4,5.1C12,4.9,11.6,5,11.3,5.3L7.8,8.8L6.4,7.4C6.1,7.1,5.6,7,5.3,7.3C5,7.6,4.9,8,5.1,8.4L7.1,11.4C7.2,11.5,7.4,11.6,7.5,11.7C7.6,11.7,7.8,11.8,7.9,11.8C8,11.8,8.2,11.7,8.3,11.7C8.5,11.6,8.6,11.5,8.7,11.4L12.9,7.1C13.2,6.8,13.2,6.3,12.9,6C12.8,5.8,12.6,5.7,12.4,5.7V5.7M21.7,13.8C20.8,13.4,19.7,13.3,18.6,13.6C17.6,13.8,16.6,14.4,15.9,15.1C15.2,15.8,14.6,16.8,14.4,17.8C14.1,18.9,14.2,20,14.6,21L13,22.6C12.8,22.8,12.5,23,12.2,23C12,23,11.7,22.9,11.5,22.7L9.3,20.5C9.1,20.3,9,20,9,19.8C9,19.5,9.1,19.2,9.3,19L10.9,17.4C10,17,9.1,17.1,8.2,17.4C7.2,17.6,6.2,18.2,5.5,18.9C4.8,19.6,4.2,20.6,4,21.6C3.7,22.7,3.8,23.8,4.2,24.7C4.4,25.2,4.8,25.5,5.3,25.5C5.4,25.5,5.5,25.5,5.6,25.4C6.6,25.1,7.5,24.6,8.2,23.9C8.9,23.2,9.5,22.3,9.7,21.3C10,20.5,9.9,19.6,9.5,18.8L11.5,16.8C11.7,16.6,12,16.5,12.2,16.5C12.5,16.5,12.8,16.6,13,16.8L14.6,18.4C15.1,17.9,15.6,17.5,16.2,17.2C16.8,16.9,17.5,16.7,18.2,16.6C18.9,16.5,19.6,16.6,20.3,16.8C21,17.1,21.6,17.5,22.2,18C22.4,18.2,22.7,18.3,23,18.3C23.2,18.3,23.5,18.2,23.7,18L25.5,16.2C25.7,16,25.8,15.7,25.8,15.5C25.8,15.2,25.7,14.9,25.5,14.7L22.9,12.1C22.6,11.8,22.1,11.7,21.8,12C21.7,12,21.6,12.1,21.5,12.1L19.9,13.7C19.4,13.2,18.8,12.8,18.2,12.5C17.6,12.2,16.9,12,16.2,11.9C15.5,11.8,14.8,11.9,14.1,12.1C13.4,12.4,12.8,12.8,12.2,13.3C12,13.1,11.7,13,11.5,13C11.2,13,10.9,13.1,10.7,13.3L8.9,15.1C9.1,15.3,9.3,15.4,9.5,15.6C9.7,15.8,9.8,16,9.9,16.2C10.2,17.1,10.1,18,9.7,18.8C9.5,19.7,8.9,20.5,8.2,21.2C7.5,21.9,6.6,22.5,5.6,22.7C4.8,23,4.1,22.9,3.5,22.5C2.8,22.1,2.3,21.5,2.1,20.7C1.9,19.8,2,18.9,2.4,18.1C2.8,17.3,3.4,16.6,4.1,16C4.8,15.3,5.7,14.7,6.7,14.5C7.7,14.2,8.8,14.3,9.7,14.7C9.9,14.8,10.1,14.8,10.3,14.7C10.5,14.7,10.7,14.6,10.8,14.4L12.8,12.4C12.7,12.2,12.6,12,12.5,11.8C12.4,11.6,12.3,11.5,12.2,11.3C11.9,10.4,12,9.5,12.4,8.7C12.8,7.9,13.4,7.2,14.1,6.6C14.8,5.9,15.7,5.3,16.7,5.1C17.7,4.8,18.8,4.9,19.7,5.3C20.2,5.5,20.5,6,20.5,6.5C20.5,6.6,20.5,6.7,20.4,6.8C20.1,7.8,19.6,8.7,18.9,9.4C18.2,10.1,17.3,10.7,16.3,10.9C15.5,11.2,14.6,11.1,13.8,10.7L15.8,8.7C16,8.5,16.1,8.2,16.1,8C16.1,7.7,16,7.4,15.8,7.2L14.2,5.6C14.7,5.1,15.2,4.7,15.8,4.4C16.4,4.1,17.1,3.9,17.8,3.8C18.5,3.7,19.2,3.8,19.9,4C20.6,4.3,21.2,4.7,21.8,5.2C22,5,22.3,4.9,22.5,4.9C22.8,4.9,23.1,5,23.3,5.2L25.1,7C25.3,7.2,25.4,7.5,25.4,7.7C25.4,8,25.3,8.3,25.1,8.5L22.5,11.1C22.3,11.3,22,11.4,21.8,11.4C21.5,11.4,21.2,11.3,21,11.1C20.1,10.2,19.6,9,19.6,7.8C19.6,7.2,19.7,6.7,20,6.2C19.5,5.9,19,5.7,18.5,5.6C17.9,5.5,17.4,5.5,16.9,5.7C16.3,5.8,15.8,6.1,15.4,6.4L17,8C17.5,8.5,17.5,9.3,17,9.8C16.8,10,16.5,10.1,16.2,10.1C16,10.1,15.7,10,15.5,9.8L13.5,7.8C13.4,8.6,13.5,9.5,13.9,10.3C14.3,11.1,14.9,11.8,15.6,12.4C16.3,13.1,17.2,13.7,18.2,13.9C19.1,14.1,20,14,20.8,13.6C21.1,13.5,21.4,13.5,21.7,13.8Z" transform="translate(-2 -1.9)"/></svg> | |
| Convergencia Tecnológica | |
| </div> | |
| <ul> | |
| <li>IA aplicada a drug discovery</li> | |
| <li>Biotecnología digital y bioinformática</li> | |
| <li>Nanotecnología biomédica</li> | |
| <li>Synthetic biology y bioingeniería</li> | |
| </ul> | |
| </div> | |
| <!-- Column 2 --> | |
| <div class="card"> | |
| <div class="card-title"> | |
| <svg class="icon" viewBox="0 0 24 24"><path d="M12,2A3,3 0 0,1 15,5V7H9V5A3,3 0 0,1 12,2M19,13H17V11H15V13H13V15H15V17H17V15H19V13M9,9H7V7H5V9H3V11H5V13H7V11H9V9M15,9H13V7H11V9H9V11H15V9M9,15V17H11V19H13V17H15V15H9Z"></path></svg> | |
| Terapias Avanzadas y Medicina Personalizada | |
| </div> | |
| <ul> | |
| <li>Terapias génicas y celulares</li> | |
| <li>Medicina de precisión basada en genómica</li> | |
| <li>Inmunoterapias de nueva generación</li> | |
| <li>Biomarkers y diagnósticos companion</li> | |
| </ul> | |
| </div> | |
| <div class="card"> | |
| <div class="card-title"> | |
| <svg class="icon" viewBox="0 0 24 24"><path d="M16 14H18V20H22V12C22 10.9 21.1 10 20 10H16V14M10 14H12V16H14V14H16V10H10V14M4 14H6V16H8V14H10V10H4V14M20 6H22V8H20V6M2 2H14V8H2V2M4 4V6H12V4H4Z"></path></svg> | |
| Nuevos Modelos Organizacionales | |
| </div> | |
| <ul> | |
| <li>Consolidación industrial (M&A)</li> | |
| <li>Partnerships universidad-industria</li> | |
| <li>Hubs de innovación regionales</li> | |
| <li>Regulación adaptativa y fast-track</li> | |
| </ul> | |
| </div> | |
| <div class="arrow-connector"></div> | |
| <!-- |