Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Caso de Estudio: Ecuador y COBIEC</title> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap'); | |
| body, html { | |
| margin: 0; | |
| padding: 0; | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background-color: #333; | |
| } | |
| .slide { | |
| width: 1280px; | |
| height: 720px; | |
| background-color: #0d1a26; | |
| color: #e0e0e0; | |
| font-family: 'Poppins', sans-serif; | |
| display: flex; | |
| flex-direction: column; | |
| padding: 40px; | |
| box-sizing: border-box; | |
| overflow: hidden; | |
| } | |
| .header { | |
| flex-shrink: 0; | |
| padding-bottom: 20px; | |
| } | |
| .title { | |
| font-size: 48px; | |
| font-weight: 700; | |
| color: #ffffff; | |
| margin: 0; | |
| animation: fadeInDown 0.8s ease-out; | |
| } | |
| .title .highlight { | |
| color: #FBCB0A; | |
| } | |
| .subtitle { | |
| font-size: 20px; | |
| font-weight: 400; | |
| color: #9cb3c9; | |
| margin: 5px 0 0 0; | |
| animation: fadeInDown 0.8s ease-out 0.2s; | |
| animation-fill-mode: backwards; | |
| } | |
| .content-grid { | |
| flex-grow: 1; | |
| display: grid; | |
| grid-template-columns: 4fr 5fr; | |
| grid-template-rows: minmax(0, 1fr) auto; | |
| gap: 20px; | |
| height: 100%; | |
| } | |
| .info-box { | |
| background-color: rgba(23, 42, 58, 0.7); | |
| border: 1px solid #29c7ac; | |
| border-radius: 16px; | |
| padding: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| box-shadow: 0 0 20px rgba(41, 199, 172, 0.1); | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| animation: fadeInUp 0.6s ease-out; | |
| animation-fill-mode: backwards; | |
| } | |
| .info-box:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 8px 30px rgba(41, 199, 172, 0.25); | |
| } | |
| .box-title { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| font-size: 20px; | |
| font-weight: 600; | |
| color: #33d6b8; | |
| margin-bottom: 12px; | |
| flex-shrink: 0; | |
| } | |
| .box-title .icon { | |
| width: 24px; | |
| height: 24px; | |
| fill: currentColor; | |
| } | |
| .box-content { | |
| flex-grow: 1; | |
| overflow: hidden; | |
| } | |
| .box-content ul { | |
| list-style: none; | |
| padding-left: 10px; | |
| margin: 0; | |
| } | |
| .box-content li { | |
| font-size: 15px; | |
| line-height: 1.6; | |
| padding-left: 20px; | |
| position: relative; | |
| } | |
| .box-content li:not(:last-child) { | |
| margin-bottom: 8px; | |
| } | |
| .box-content li::before { | |
| content: '■'; | |
| position: absolute; | |
| left: 0; | |
| color: #FBCB0A; | |
| font-size: 14px; | |
| } | |
| .top-left { | |
| grid-area: 1 / 1 / 2 / 2; | |
| animation-delay: 0.3s; | |
| padding: 0; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .top-right { | |
| grid-area: 1 / 2 / 2 / 3; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| min-height: 0; | |
| } | |
| .top-right .info-box { | |
| flex: 1; | |
| min-height: 0; | |
| } | |
| .top-right .info-box:nth-child(1) { animation-delay: 0.5s; } | |
| .top-right .info-box:nth-child(2) { animation-delay: 0.6s; } | |
| .bottom-row { | |
| grid-area: 2 / 1 / 3 / 3; | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 20px; | |
| } | |
| .bottom-row .info-box:nth-child(1) { animation-delay: 0.7s; } | |
| .bottom-row .info-box:nth-child(2) { animation-delay: 0.8s; } | |
| .bottom-row .info-box:nth-child(3) { animation-delay: 0.9s; } | |
| .bottom-row .box-content li { | |
| font-size: 13px; | |
| } | |
| .fish-container { | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| filter: drop-shadow(0 0 15px rgba(51, 214, 184, 0.6)); | |
| } | |
| .fish-svg { | |
| width: 80%; | |
| stroke-width: 4; | |
| stroke: #33d6b8; | |
| fill: none; | |
| stroke-linecap: round; | |
| stroke-linejoin: round; | |
| } | |
| .fish-glow-dot { | |
| fill: #FBCB0A; | |
| stroke: none; | |
| filter: drop-shadow(0 0 8px #FBCB0A); | |
| } | |
| @keyframes fadeInDown { | |
| from { opacity: 0; transform: translateY(-20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes fadeInUp { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="slide"> | |
| <header class="header"> | |
| <h1 class="title">Caso de Estudio: <span class="highlight">Ecuador y COBIEC</span></h1> | |
| <p class="subtitle">El ejemplo más reciente de colegiación profesional en biotecnología</p> | |
| </header> | |
| <main class="content-grid"> | |
| <div class="info-box top-left"> | |
| <div class="fish-container"> | |
| <svg viewBox="0 0 200 120" class="fish-svg"> | |
| <g> | |
| <path d="M178.4,56.7c0,27.1-41,49-91.7,49S-5,83.8-5,56.7S36,7.7,86.7,7.7S178.4,29.6,178.4,56.7z M125.1,19.3 c-7.4,1.8-14.1,4.7-20.1,8.3 M125.1,19.3l21.6-13.6l10.8,17.2L146.7,30 M146.7,30l10.8,17.2l-21.6-13.6"/> | |
| <circle class="fish-glow-dot" cx="130" cy="45" r="5" /> | |
| <circle class="fish-glow-dot" cx="145" cy="70" r="4" /> | |
| <circle class="fish-glow-dot" cx="110" cy="85" r="4" /> | |
| </g> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="top-right"> | |
| <div class="info-box"> | |
| <h2 class="box-title"> | |
| <svg class="icon" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-12h2v4h-2zm0 6h2v2h-2zm-5-2h2v2H6zm10 0h2v2h-2zM12 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg> | |
| <span>Objetivo Principal</span> | |
| </h2> | |
| <div class="box-content"> | |
| <ul> | |
| <li>Agrupar y representar a los biotecnólogos del país.</li> | |
| <li>Regular la práctica profesional en salud y biomedicina.</li> | |
| <li>Establecer estándares éticos y profesionales de alto nivel.</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="info-box"> | |
| <h2 class="box-title"> | |
| <svg class="icon" viewBox="0 0 24 24"><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/></svg> | |
| <span>Contexto Académico</span> | |
| </h2> | |
| <div class="box-content"> | |
| <ul> | |
| <li>Base robusta con más de 11 universidades ofertando la carrera.</li> | |
| <li>Graduados calificados sin una estructura gremial previa.</li> | |
| <li>Alto potencial de transferencia tecnológica universidad-industria.</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bottom-row"> | |
| <div class="info-box"> | |
| <h2 class="box-title"> | |
| <svg class="icon" viewBox="0 0 24 24"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l |