Hugging Face's logo

Spaces:
C2MV
/
Biotech-Analysis
Running

App Files Community
Biotech-Analysis / slides /slide14_modelos_comparativos.html
C2MV's picture
C2MV
Upload 71 files
0615069 verified
raw
history blame contribute delete
8.46 kB
 <!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modelos Organizacionales Comparativos</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: #f0f4f8;
font-family: 'Poppins', sans-serif;
}
.slide {
width: 1280px;
height: 720px;
background-color: #f0f4f8;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px;
box-sizing: border-box;
animation: fadeIn 1s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.header {
text-align: center;
margin-bottom: 30px;
color: #1c3d5a;
}
.header h1 {
font-size: 44px;
font-weight: 700;
margin: 0;
}
.header p {
font-size: 20px;
font-weight: 400;
margin: 5px 0 0 0;
color: #5a7184;
}
.comparison-container {
display: flex;
justify-content: center;
gap: 40px;
width: 100%;
}
.card {
background-color: #ffffff;
border-radius: 16px;
box-shadow: 0 8px 25px rgba(28, 61, 90, 0.1);
width: 540px;
padding: 25px 30px;
box-sizing: border-box;
border-top: 5px solid;
display: flex;
flex-direction: column;
gap: 20px;
animation: slideUp 0.8s ease-out forwards;
opacity: 0;
}
.card:nth-child(1) { animation-delay: 0.2s; }
.card:nth-child(2) { animation-delay: 0.4s; }
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.card-industrial { border-color: #0077B6; }
.card-professional { border-color: #4CAF50; }
.card-header {
display: flex;
align-items: center;
gap: 15px;
}
.card-header .icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
}
.icon-industrial { background-color: #e6f2f8; }
.icon-professional { background-color: #e8f5e9; }
.card-header h2 {
font-size: 22px;
font-weight: 600;
margin: 0;
}
.card-industrial .card-header h2 { color: #0077B6; }
.card-professional .card-header h2 { color: #4CAF50; }
.section-title {
font-size: 18px;
font-weight: 600;
color: #1c3d5a;
margin-bottom: 10px;
}
.structure-items {
display: flex;
gap: 10px;
}
.structure-item {
background-color: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 8px 12px;
font-size: 14px;
color: #495057;
flex-grow: 1;
text-align: center;
}
.card-industrial .structure-item {
background-color: #e6f2f8;
border-color: #b3d7e8;
color: #005f8e;
}
.card-professional .structure-item {
background-color: #e8f5e9;
border-color: #c8e6c9;
color: #388e3c;
}
.examples-list, .functions-list {
list-style: none;
padding-left: 0;
margin: 0;
font-size: 15px;
color: #5a7184;
}
.examples-list li, .functions-list li {
margin-bottom: 8px;
line-height: 1.5;
}
.examples-list strong {
color: #343a40;
font-weight: 600;
}
.functions-list li {
display: flex;
align-items: center;
gap: 10px;
}
.check-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
}
</style>
</head>
<body>
<div class="slide">
<div class="header">
<h1>Modelos Organizacionales Comparativos</h1>
<p>An谩lisis estructural de enfoques globales</p>
</div>
<div class="comparison-container">
<div class="card card-industrial">
<div class="card-header">
<div class="icon icon-industrial">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#0077B6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
</div>
<h2>MODELO INDUSTRIAL/GREMIAL</h2>
</div>
<div>
<h3 class="section-title">Estructura:</h3>
<div class="structure-items">
<div class="structure-item">Asociaciones</div>
<div class="structure-item">Federaciones</div>
<div class="structure-item">C谩maras</div>
</div>
</div>
<div>
<h3 class="section-title">Ejemplos Representativos:</h3>
<ul class="examples-list">
<li><strong>BIO (EE.UU.)</strong> - 1,000+ empresas</li>
<li><strong>EuropaBio (UE)</strong> - Federaci贸n</li>
<li><strong>AseBio (Espa帽a)</strong> - 280+ socios</li>
<li><strong>AusBiotech (Australia)</strong> - Ecosistema</li>
</ul>
</div>
<div>
<h3 class="section-title">Funciones Principales:</h3>
<ul class="functions-list">
<li><svg class="check-icon" viewBox="0 0 24 24" fill="#0077B6"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>Lobby y advocacy pol铆tico</li>
<li><svg class="check-icon" viewBox="0 0 24 24" fill="#0077B6"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>Desarrollo de mercados</li>
<li><svg class="check-icon" viewBox="0 0 24 24" fill="#0077B6"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>Networking empresarial</li>
<li><svg class="check-icon" viewBox="0 0 24 24" fill="#0077B6"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>Promoci贸n de inversi贸n</li>
</ul>
</div>
</div>
<div class="card card-professional">
<div class="card-header">
<div class="icon icon-professional">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#4CAF50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
</div>
<h2>MODELO REGULACI脫N PROFESIONAL</h2>
</div>
<div>
<h3 class="section-title">Estructura:</h3>
<div class="structure-items">
<div class="structure-item">Colegios profesionales</div>
<div class="structure-item">Consejos regulatorios</div>
<div class="structure-item">脫rganos de control</div>
</div>
</div>
<div>
<h3 class="section-title">Ejemplos Representativos:</h3>
<ul class="examples-list">
<li><strong>CSB Argentina</strong> - Ley Provincial 13.490</li>
<li><strong>COBIEC Ecuador</strong> - Acuerdo Ministerial</li>
<li><strong>CPBiol Colombia</strong> - Regulaci贸n por campo</li>
<li><strong>脫rganos de Control 脡tico</strong> - Varios pa铆ses</li>
</ul>
</div>
<div>
<h3 class="section-title">Funciones Principales:</h3>
<ul class="functions-list">
<li><svg class="check-icon" viewBox="0 0 24 24" fill="#4CAF50"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>Matriculaci贸n profesional</li>
<li><svg class="check-icon" viewBox="0 0 24 24" fill="#4CAF50"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>Control del ejercicio</li>
<li><svg class="check-icon" viewBox="0 0 24 24" fill="#4CAF50"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>Est谩ndares 茅ticos</li>
<li><svg class="check-icon" viewBox="0 0 24 24" fill="#4CAF50"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>Defensa gremial</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>