Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Modelo 1: Asociación Industrial/Gremial</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: #1a1a1a; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| } | |
| .slide { | |
| width: 1280px; | |
| height: 720px; | |
| background: linear-gradient(135deg, #023e8a 0%, #0077b6 50%, #0096c7 100%); | |
| color: #ffffff; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-start; | |
| align-items: center; | |
| position: relative; | |
| overflow: hidden; | |
| padding: 40px 60px; | |
| box-sizing: border-box; | |
| animation: fadeIn 1s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: scale(0.95); } | |
| to { opacity: 1; transform: scale(1); } | |
| } | |
| .map-background { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| opacity: 0.08; | |
| z-index: 0; | |
| pointer-events: none; | |
| } | |
| .continent { | |
| position: absolute; | |
| background: #ffffff; | |
| } | |
| .north-america { top: 15%; left: 10%; width: 250px; height: 200px; border-radius: 60% 40% 30% 70% / 70% 50% 50% 30%; transform: rotate(-15deg); } | |
| .europe { top: 20%; left: 45%; width: 150px; height: 120px; border-radius: 50% 50% 30% 70% / 60% 40% 60% 40%; } | |
| .asia-pacific { top: 25%; left: 65%; width: 300px; height: 250px; border-radius: 30% 70% 50% 50% / 50% 60% 40% 50%; transform: rotate(10deg); } | |
| .header { | |
| width: 100%; | |
| text-align: center; | |
| margin-bottom: 30px; | |
| z-index: 1; | |
| } | |
| .header h1 { | |
| font-size: 48px; | |
| font-weight: 700; | |
| margin: 0; | |
| text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3); | |
| } | |
| .header h2 { | |
| font-size: 22px; | |
| font-weight: 300; | |
| margin: 5px 0 0 0; | |
| opacity: 0.9; | |
| } | |
| .content-grid { | |
| display: grid; | |
| grid-template-columns: 1.1fr 1fr; | |
| gap: 30px; | |
| width: 100%; | |
| flex-grow: 1; | |
| z-index: 1; | |
| } | |
| .column { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 30px; | |
| } | |
| .card { | |
| background: rgba(255, 255, 255, 0.1); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| border-radius: 12px; | |
| padding: 25px; | |
| box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2); | |
| backdrop-filter: blur(4px); | |
| -webkit-backdrop-filter: blur(4px); | |
| height: 100%; | |
| box-sizing: border-box; | |
| animation: popIn 0.5s ease-out forwards; | |
| opacity: 0; | |
| } | |
| .column:nth-child(1) .card { animation-delay: 0.2s; } | |
| .column:nth-child(2) .card:nth-child(1) { animation-delay: 0.4s; } | |
| .column:nth-child(2) .card:nth-child(2) { animation-delay: 0.6s; } | |
| @keyframes popIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .card h3 { | |
| font-size: 24px; | |
| font-weight: 600; | |
| color: #ade8f4; | |
| margin: 0 0 20px 0; | |
| padding-bottom: 10px; | |
| border-bottom: 2px solid rgba(173, 232, 244, 0.5); | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .card ul { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .card ul li { | |
| font-size: 16px; | |
| line-height: 1.6; | |
| margin-bottom: 15px; | |
| display: flex; | |
| align-items: flex-start; | |
| } | |
| .card ul li::before { | |
| content: '■'; | |
| color: #ade8f4; | |
| font-size: 12px; | |
| margin-right: 12px; | |
| margin-top: 5px; | |
| } | |
| .card ul li strong { | |
| font-weight: 600; | |
| color: #ffffff; | |
| } | |
| .card ul li span { | |
| opacity: 0.85; | |
| display: block; | |
| margin-left: 0; | |
| } | |
| /* CSS Icons */ | |
| .css-icon { display: inline-block; position: relative; width: 24px; height: 24px; } | |
| .icon-building::before { | |
| content: ''; | |
| position: absolute; | |
| width: 18px; | |
| height: 22px; | |
| background: #ade8f4; | |
| bottom: 0; | |
| left: 3px; | |
| } | |
| .icon-building::after { | |
| content: ''; | |
| position: absolute; | |
| width: 24px; | |
| height: 4px; | |
| background: #ade8f4; | |
| bottom: 0; | |
| left: 0; | |
| } | |
| .icon-goals::before { | |
| content: ''; | |
| position: absolute; | |
| width: 20px; | |
| height: 20px; | |
| border: 3px solid #ade8f4; | |
| border-radius: 50%; | |
| top: 0; | |
| left: 0; | |
| } | |
| .icon-goals::after { | |
| content: ''; | |
| position: absolute; | |
| width: 10px; | |
| height: 10px; | |
| background: #ade8f4; | |
| border-radius: 50%; | |
| top: 5px; | |
| left: 5px; | |
| } | |
| .icon-features::before { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 0; | |
| border-left: 12px solid transparent; | |
| border-right: 12px solid transparent; | |
| border-bottom: 20px solid #ade8f4; | |
| top: 2px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="slide"> | |
| <div class="map-background"> | |
| <div class="continent north-america"></div> | |
| <div class="continent europe"></div> | |
| <div class="continent asia-pacific"></div> | |
| </div> | |
| <div class="header"> | |
| <h1>Modelo 1: Asociación Industrial/Gremial</h1> | |
| <h2>Dominante en Norteamérica, Europa y Asia-Pacífico</h2> | |
| </div> | |
| <div class="content-grid"> | |
| <div class="column"> | |
| <div class="card"> | |
| <h3><div class="css-icon icon-building"></div>Actores Clave</h3> | |
| <ul> | |
| <li><strong>BIO (Estados Unidos)</strong><span>Biotechnology Innovation Organization</span></li> | |
| <li><strong>EuropaBio (Unión Europea)</strong><span>European Association for Bioindustries</span></li> | |
| <li><strong>AseBio (España)</strong><span>Asociación Española de Bioempresas</span></li> | |
| <li><strong>AusBiotech (Australia)</strong><span>Australia's Biotechnology Organization</span></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="column"> | |
| <div class="card"> | |
| <h3><div class="css-icon icon-goals"></div>Objetivos Principales</h3> | |
| <ul> | |
| <li>Lobby y desarrollo de políticas públicas favorables</li> | |
| <li>Promoción del desarrollo de negocios y networking</li> | |
| <li>Impulso a la innovación y atracción de inversión</li> | |
| <li>Creación de ecosistemas empresariales robustos</li> | |
| </ul> | |
| </div> | |
| <div class="card"> | |
| <h3><div class="css-icon icon-features"></div>Características</h3> | |
| <ul> | |
| <li>Foco en las empresas y el ecosistema, no en el profesional individual</li> | |
| <li>Orientación hacia mercados y comercialización</li> | |
| <li>Representación de intereses industriales</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |