/* Elimina bordes y márgenes predeterminados del navegador */
body {
margin: 0;
padding: 0;
}
/* Ajusta la imagen a todo el ancho de la pantalla */
.banner-full {
width: 100%;
height: auto; /* Mantiene la proporción de la imagen */
display: block; /* Elimina espacio blanco inferior por defecto */
}
Sección de Contenidos y Videos
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body {
background-color: #f1f3f7;
padding: 24px 16px;
display: flex;
justify-content: center;
}
/* Contenedor Principal Flex */
.main-container {
display: flex;
gap: 16px;
width: 100%;
max-width: 1320px;
}
/* Paneles / Columnas */
.panel {
background: #ffffff;
border-radius: 18px;
padding: 20px;
display: flex;
flex-direction: column;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}
.panel-large { flex: 1.2; }
.panel-medium { flex: 0.85; }
/* Encabezado del Panel */
.panel-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.panel-title {
display: flex;
align-items: center;
gap: 8px;
color: #0b1a48;
font-size: 15px;
font-weight: 800;
letter-spacing: 0.4px;
}
.green-bar {
width: 4px;
height: 18px;
background-color: #8dc63f;
border-radius: 2px;
}
.see-all {
color: #0b1a48;
font-size: 12px;
font-weight: 700;
text-decoration: none;
display: flex;
align-items: center;
gap: 2px;
}
.see-all:hover {
text-decoration: underline;
}
/* Rejilla de Tarjetas */
.cards-row {
display: flex;
gap: 12px;
height: 100%;
}
.card {
flex: 1;
display: flex;
flex-direction: column;
}
/* Contenedor de la Imagen */
.card-media {
position: relative;
width: 100%;
padding-top: 105%; /* Mantiene relación de aspecto cuadricular */
border-radius: 12px;
overflow: hidden;
margin-bottom: 12px;
background-color: #e2e8f0;
}
.card-media img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Botón de Play */
.play-button {
position: absolute;
bottom: 10px;
left: 10px;
width: 32px;
height: 32px;
background: rgba(0, 0, 0, 0.45);
border: 2px solid #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(2px);
cursor: pointer;
transition: transform 0.2s ease, background 0.2s ease;
}
.play-button:hover {
transform: scale(1.08);
background: rgba(0, 0, 0, 0.65);
}
.play-icon {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 9px solid #ffffff;
margin-left: 2px;
}
/* Textos de la Tarjeta */
.card-title {
color: #0b1a48;
font-size: 13px;
font-weight: 700;
line-height: 1.25;
margin-bottom: 4px;
}
.card-subtitle {
color: #526075;
font-size: 11px;
font-weight: 600;
margin-bottom: 8px;
}
/* Línea Verde Inferior */
.card-line {
width: 22px;
height: 3px;
background-color: #8dc63f;
border-radius: 2px;
margin-top: auto;
}
/* Adaptación Responsiva Básica */
@media (max-width: 1024px) {
.main-container {
flex-direction: column;
}
}
<!-- PANEL 1: EPISODIOS -->
<div class="panel panel-large">
<div class="panel-header">
<div class="panel-title">
<span class="green-bar"></span>
<span>EPISODIOS</span>
</div>
<a href="#" class="see-all">Ver todos ›</a>
</div>
<div class="cards-row">
<!-- Tarjeta 1 -->
<div class="card">
<div class="card-media">
<img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?w=400&auto=format&fit=crop" alt="El origen">
<div class="play-button"><div class="play-icon"></div></div>
</div>
<div class="card-title">El origen</div>
<div class="card-line"></div>
</div>
<!-- Tarjeta 2 -->
<div class="card">
<div class="card-media">
<img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=400&auto=format&fit=crop" alt="Aprendizajes">
<div class="play-button"><div class="play-icon"></div></div>
</div>
<div class="card-title">Aprendizajes</div>
<div class="card-line"></div>
</div>
<!-- Tarjeta 3 -->
<div class="card">
<div class="card-media">
<img src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=400&auto=format&fit=crop" alt="Respaldo en Bolivia">
<div class="play-button"><div class="play-icon"></div></div>
</div>
<div class="card-title">Respaldo en Bolivia</div>
<div class="card-line"></div>
</div>
</div>
</div>
<!-- PANEL 2: NOTAS DE EXPERTOS -->
<div class="panel panel-medium">
<div class="panel-header">
<div class="panel-title">
<span class="green-bar"></span>
<span>NOTAS DE EXPERTOS</span>
</div>
<a href="#" class="see-all">Ver todas ›</a>
</div>
<div class="cards-row">
<!-- Tarjeta 1 -->
<div class="card">
<div class="card-media">
<img src="https://images.unsplash.com/photo-1563720223185-11003d516935?w=400&auto=format&fit=crop" alt="Nuevas energías">
<div class="play-button"><div class="play-icon"></div></div>
</div>
<div class="card-title">¿Cuánto cuesta realmente moverse con nuevas energías?</div>
<div class="card-line"></div>
</div>
<!-- Tarjeta 2 -->
<div class="card">
<div class="card-media">
<img src="https://images.unsplash.com/photo-1486006920555-c77dce18193b?w=400&auto=format&fit=crop" alt="Respaldo Imcruz">
<div class="play-button"><div class="play-icon"></div></div>
</div>
<div class="card-title">¿Cómo IMCRUZ respalda y revisa estos vehículos?</div>
<div class="card-line"></div>
</div>
</div>
</div>
<!-- PANEL 3: PRIMERA CARGA CON... -->
<div class="panel panel-large">
<div class="panel-header">
<div class="panel-title">
<span class="green-bar"></span>
<span>PRIMERA CARGA CON...</span>
</div>
<a href="#" class="see-all">Ver todas ›</a>
</div>
<div class="cards-row">
<!-- Tarjeta 1 -->
<div class="card">
<div class="card-media">
<img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=400&auto=format&fit=crop" alt="Ruta en la ciudad">
<div class="play-button"><div class="play-icon"></div></div>
</div>
<div class="card-title">Ruta en la ciudad</div>
<div class="card-subtitle">Luciana Acosta</div>
<div class="card-line"></div>
</div>
<!-- Tarjeta 2 -->
<div class="card">
<div class="card-media">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&auto=format&fit=crop" alt="La cuenta">
<div class="play-button"><div class="play-icon"></div></div>
</div>
<div class="card-title">La cuenta, ¿es en serio?</div>
<div class="card-subtitle">Richard Pereira</div>
<div class="card-line"></div>
</div>
<!-- Tarjeta 3 -->
<div class="card">
<div class="card-media">
<img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&auto=format&fit=crop" alt="Confianza en marcha">
<div class="play-button"><div class="play-icon"></div></div>
</div>
<div class="card-title">Confianza en marcha</div>
<div class="card-subtitle">Carolina Paz Rivero</div>
<div class="card-line"></div>
</div>
</div>
</div>