card-tabla

 Aquí tienes el código con una tabla de cinco columnas dentro del card-body, explicado de la manera más sencilla posible:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tarjeta con Tabla</title>
</head>
<style>
    /* Reset básico */
    *{
        margin: 0;
        padding: 0;
    }

    body{
        background-color: #f0f0f0;
    }

    .container{
        display: flex;
        justify-content: center;
        padding-top: 10px;  
    }

    .card{
        background-color: white;
        display: flex;
        flex-direction: column;
        width: 600px;  /* Un poco más ancha para la tabla */
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .card-header{
        background-color: #f8f9fa;
        border-radius: 8px 8px 0 0;
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid #dee2e6;
    }

    .card-body{
        padding: 30px 20px;
        background: white;
        display: flex;
        flex-direction: column;
        gap: 20px;  /* Un poco más de espacio */
    }

    /* ===============================================
       ESTILOS PARA LA TABLA DE 5 COLUMNAS
       =============================================== */
    
    /* La tabla ocupa todo el ancho disponible */
    .tabla-productos {
        width: 100%;
        border-collapse: collapse;  /* Elimina espacios entre bordes */
        font-family: Arial, sans-serif;
    }

    /* Estilo para las celdas de cabecera (th) y datos (td) */
    .tabla-productos th,
    .tabla-productos td {
        border: 1px solid #dee2e6;  /* Borde gris suave */
        padding: 12px;               /* Espacio interno */
        text-align: left;            /* Texto alineado a la izquierda */
    }

    /* Estilo especial para la cabecera */
    .tabla-productos th {
        background-color: #f8f9fa;   /* Fondo gris claro */
        font-weight: bold;            /* Texto en negrita */
    }

    /* Efecto "raya de cebra" en las filas (opcional, para mejor lectura) */
    .tabla-productos tbody tr:nth-child(even) {
        background-color: #f8f9fa;    /* Fondo gris muy claro en filas pares */
    }

    /* Efecto hover al pasar el ratón (opcional) */
    .tabla-productos tbody tr:hover {
        background-color: #e9ecef;    /* Fondo un poco más oscuro al pasar el ratón */
    }

    /* Los textos siguen centrados como antes */
    .card-body p {
        width: 100%;
        text-align: center;
    }

    .card-body h2 {
        width: 100%;
        text-align: center;
    }

    /* El botón igual que antes */
    .card-body button {
        align-self: flex-start;
        background-color: #0d6efd;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 16px;
    }

    /* Pequeño ajuste para el footer */
    .card-footer {
        background-color: #f8f9fa;
        padding: 15px 20px;
        border-top: 1px solid #dee2e6;
        border-radius: 0 0 8px 8px;
        text-align: center;
        color: #6c757d;
    }
</style>
<body>
    <div class="container">
        <div class="card">
            <div class="card-header">
                <h1>Sotelo</h1>
            </div>
            <div class="card-body">
                <h2>Lista de Productos</h2>
                <p>Productos disponibles en nuestra tienda</p>
                
                <!-- ===============================================
                     TABLA DE 5 COLUMNAS - LA PARTE IMPORTANTE
                     =============================================== -->
                <table class="tabla-productos">
                    <!-- Cabecera de la tabla (con 5 columnas) -->
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Producto</th>
                            <th>Categoría</th>
                            <th>Precio</th>
                            <th>Stock</th>
                        </tr>
                    </thead>
                    
                    <!-- Cuerpo de la tabla (datos) -->
                    <tbody>
                        <tr>
                            <td>001</td>
                            <td>Portátil Pro</td>
                            <td>Informática</td>
                            <td>899€</td>
                            <td>15</td>
                        </tr>
                        <tr>
                            <td>002</td>
                            <td>Monitor 24"</td>
                            <td>Periféricos</td>
                            <td>199€</td>
                            <td>8</td>
                        </tr>
                        <tr>
                            <td>003</td>
                            <td>Teclado Mecánico</td>
                            <td>Periféricos</td>
                            <td>89€</td>
                            <td>23</td>
                        </tr>
                        <tr>
                            <td>004</td>
                            <td>Ratón Inalámbrico</td>
                            <td>Periféricos</td>
                            <td>29€</td>
                            <td>42</td>
                        </tr>
                        <tr>
                            <td>005</td>
                            <td>Auriculares Gaming</td>
                            <td>Audio</td>
                            <td>59€</td>
                            <td>11</td>
                        </tr>
                    </tbody>
                </table>

                <button>Ver catálogo completo</button>
            </div>
            <div class="card-footer">
                Total de productos: 5 | Actualizado hoy
            </div>
        </div>
    </div>  
</body>
</html>

Explicación sencilla de la tabla:

📊 Estructura de la tabla de 5 columnas:

html
<table>
    <thead>     → Cabecera (títulos de las columnas)
        <tr>    → Fila
            <th>ID</th>          ← Columna 1
            <th>Producto</th>     ← Columna 2  
            <th>Categoría</th>    ← Columna 3
            <th>Precio</th>       ← Columna 4
            <th>Stock</th>        ← Columna 5
        </tr>
    </thead>
    <tbody>     → Cuerpo (datos)
        <tr>    → Fila 1
            <td>001</td>          ← Dato columna 1
            <td>Portátil Pro</td> ← Dato columna 2
            <td>Informática</td>  ← Dato columna 3
            <td>899€</td>         ← Dato columna 4
            <td>15</td>           ← Dato columna 5
        </tr>
        <!-- más filas... -->
    </tbody>
</table>

🎨 CSS simplificado explicado:

Propiedad¿Qué hace?
width: 100%La tabla ocupa todo el ancho de la tarjeta
border-collapse: collapseJunta los bordes para que no hayan dobles líneas
border: 1px solid #dee2e6Añade un borde gris a cada celda
padding: 12pxEspacio dentro de cada celda (más legible)
text-align: leftTexto alineado a la izquierda (más natural para tablas)
background-colorColores de fondo para diferenciar cabecera y filas

📝 Versión aún más simple (solo lo esencial):

Si quieres la tabla MÍNIMA para empezar, esto es todo lo que necesitas:

css
.tabla-simple {
    width: 100%;
    border-collapse: collapse;
}
.tabla-simple th, .tabla-simple td {
    border: 1px solid gray;
    padding: 8px;
}
html
<table class="tabla-simple">
    <tr>
        <th>Col1</th><th>Col2</th><th>Col3</th><th>Col4</th><th>Col5</th>
    </tr>
    <tr>
        <td>Dato1</td><td>Dato2</td><td>Dato3</td><td>Dato4</td><td>Dato5</td>
    </tr>
</table>

¡Y eso es todo! La tabla se adapta automáticamente al ancho de la tarjeta y las 5 columnas se reparten el espacio disponible.

¡Excelente pregunta! Vamos a entender cómo funciona el ancho de las tablas y por qué tomé esa decisión.

📏 1. ¿Cómo determiné el ancho de la tabla?

css
.tabla-productos {
    width: 100%;  /* <--- ESTA ES LA CLAVE */
}

Respuesta simple: La tabla hereda su ancho del elemento que la contiene (su padre).

Visualicemos la jerarquía:

text
.card (ancho: 600px) ← El padre de todo
└── .card-body (padding: 30px 20px) ← Reduce el espacio disponible
    └── table (width: 100%) ← Ocupa el 100% del espacio que le deja .card-body

Cálculo exacto del ancho:

  1. .card tiene width: 600px → Espacio total: 600px

  2. .card-body tiene padding: 30px 20px:

    • padding-left: 20px

    • padding-right: 20px

    • Espacio disponible para la tabla = 600px - 40px = 560px

  3. .tabla-productos con width: 100% → Ocupa 560px

🔄 2. ¿Por qué no dejar que fluya naturalmente?

El flujo natural de una tabla SIN width: 100%:

css
.tabla-productos {
    /* sin width definido */
}

Si NO pones width: 100%, la tabla se comporta así:

SituaciónComportamientoProblema
Pocos datosLa tabla se encoge al mínimo necesarioSe ve pequeña y desaprovecha el espacio
Textos cortosCada columna mide lo que mide su textoQueda espacio vacío a la derecha
Contenido variableEl ancho cambia según el contenidoDiseño inconsistente

Ejemplo visual:

text
SIN width:100% (flujo natural):
┌─────────────────────────────────────┐
│ ID  Producto  Categoría  Precio  St │ ← La tabla se encoge
│ 001 Portátil  Informát.  899€    15 │
└─────────────────────────────────────┘
        ↑ Mucho espacio vacío aquí

CON width:100% (controlado):
┌─────────────────────────────────────────────┐
│ ID  │ Producto  │ Categoría │ Precio │ Stock │
│ 001 │ Portátil  │ Informát. │ 899€   │ 15    │
└─────────────────────────────────────────────┘
        ↑ La tabla ocupa todo el espacio disponible

📊 3. ¿Cómo saber cuánto crece cada columna?

Aquí viene lo interesante. Con width: 100%, las 5 columnas se reparten el espacio, pero no de cualquier forma:

Reglas de distribución del ancho:

css
.tabla-productos {
    width: 100%;
    table-layout: auto;  /* ← Esto es lo que hace que las columnas se ajusten al contenido */
}

¿Cómo se reparten los 560px?

html
<th>ID</th>          ← Texto corto (2 caracteres)
<th>Producto</th>    ← Texto largo (8 caracteres)
<th>Categoría</th>   ← Texto medio (9 caracteres)
<th>Precio</th>      ← Texto corto (6 caracteres)
<th>Stock</th>       ← Texto corto (5 caracteres)

El navegador hace este cálculo automático:

  1. Mira el contenido de cada columna

  2. Calcula el mínimo necesario para cada una

  3. Reparte el espacio sobrante proporcionalmente

Resultado aproximado:

ColumnaContenidoAncho aproximado
ID"001" (corto)~60px
Producto"Portátil Pro" (largo)~180px
Categoría"Informática" (medio)~120px
Precio"899€" (corto)~80px
Stock"15" (corto)~120px
TOTAL~560px

🎯 4. ¿Cómo CONTROLAR el crecimiento?

Si quieres tener control total sobre el ancho de cada columna, usa table-layout: fixed:

css
.tabla-productos {
    width: 100%;
    table-layout: fixed;  /* ← Tú decides los anchos */
}

/* Ahora SÍ puedes definir anchos exactos */
.tabla-productos th:nth-child(1) { width: 10%; }  /* ID */
.tabla-productos th:nth-child(2) { width: 30%; }  /* Producto */
.tabla-productos th:nth-child(3) { width: 20%; }  /* Categoría */
.tabla-productos th:nth-child(4) { width: 15%; }  /* Precio */
.tabla-productos th:nth-child(5) { width: 25%; }  /* Stock */

Diferencia clave:

ModoCómo se distribuyeCuándo usarlo
auto (natural)Según el contenidoTablas con contenido variable, textos impredecibles
fixed (controlado)Según tus porcentajesDashboards, informes, diseños precisos

✅ 5. Mi recomendación (la más simple)

Para mantenerlo sencillo y claro, haz esto:

css
/* Opción 1: Déjalo fluir naturalmente */
.tabla-productos {
    width: 100%;  /* Ocupa todo el espacio, pero respeta el contenido */
    /* No pongas table-layout, deja el auto por defecto */
}

/* Opción 2: Si quieres control total */
.tabla-productos {
    width: 100%;
    table-layout: fixed;
}

.tabla-productos th:first-child { width: 15%; }   /* ID */
.tabla-productos th:nth-child(2) { width: 35%; }  /* Producto - más espacio */
.tabla-productos th:nth-child(3) { width: 20%; }  /* Categoría */
.tabla-productos th:nth-child(4) { width: 15%; }  /* Precio */
.tabla-productos th:last-child { width: 15%; }    /* Stock */

📝 Resumen final

PreguntaRespuesta
¿Por qué width:100%?Para que la tabla aproveche todo el espacio disponible y se vea proporcionada
¿Qué pasa si no lo pongo?La tabla se encoge al mínimo necesario, dejando espacios vacíos
¿Cómo crecen las columnas?Con auto (por defecto) crecen según el contenido de cada celda
¿Puedo controlarlo?Sí, con table-layout: fixed y definiendo anchos específicos

En tu caso, como querías "la manera más sencilla y clara", width:100% con table-layout:auto (el valor por defecto) es la opción perfecta. La tabla se adapta sola y siempre se ve bien.


¡Exactamente! Has dado en el clavo. 🎯

Sí, para que una tabla con más columnas tenga mayor ancho, debes aumentar el ancho del contenedor padre (la tarjeta).

Te explico por qué y cómo hacerlo:

📦 La regla de oro: El padre manda

text
El ancho de la tabla NUNCA puede ser mayor que el espacio que le da su PADRE

Jerarquía visual:

css
.card {                    /* ← PADRE: 600px */
    width: 600px;
}

.card-body {               /* ← HIJO: 600px - 40px de padding = 560px */
    padding: 30px 20px;
}

.tabla-productos {         /* ← NIETO: máximo 560px */
    width: 100%;           /* = 560px, no puede pasar de ahí */
}

📊 Ejemplo: Tabla con 8 columnas

Si quieres una tabla con 8 columnas, necesitas más espacio:

css
.card {
    width: 900px;  /* ← Aumentamos el ancho de la tarjeta */
}

Comparativa visual:

text
CON 600px (para 5 columnas):
┌─────────────────────────────────────────────┐
│ ID │ Producto  │ Categoría │ Precio │ Stock │ ← Cabe justo
└─────────────────────────────────────────────┘

CON 600px (para 8 columnas - ¡NO CABE!):
┌─────────────────────────────────────────────┐
│ ID │ Prod │ Cat │ Prec │ St │ Fec │ Ven │ # │ ← Textos aplastados
└─────────────────────────────────────────────┘

CON 900px (para 8 columnas):
┌─────────────────────────────────────────────────────────────┐
│ ID │ Producto │ Categoría │ Precio │ Stock │ Fecha │ Vende │ # │
└─────────────────────────────────────────────────────────────┘

💻 Código completo: Tabla de 8 columnas

Aquí tienes el ejemplo con una tabla de 8 columnas y la tarjeta más ancha:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tarjeta con Tabla de 8 Columnas</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }

    body{
        background-color: #f0f0f0;
    }

    .container{
        display: flex;
        justify-content: center;
        padding-top: 10px;  
    }

    .card{
        background-color: white;
        display: flex;
        flex-direction: column;
        width: 1000px;  /* ← ¡MÁS ANCHA! Para 8 columnas */
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .card-header{
        background-color: #f8f9fa;
        border-radius: 8px 8px 0 0;
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid #dee2e6;
    }

    .card-body{
        padding: 30px 20px;
        background: white;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* 
    ===============================================
    TABLA DE 8 COLUMNAS
    ===============================================
    */
    .tabla-ventas {
        width: 100%;
        border-collapse: collapse;
        font-family: Arial, sans-serif;
        font-size: 14px;  /* Fuente un poco más pequeña para 8 columnas */
    }

    .tabla-ventas th,
    .tabla-ventas td {
        border: 1px solid #dee2e6;
        padding: 10px 8px;  /* Padding más ajustado */
        text-align: left;
    }

    .tabla-ventas th {
        background-color: #f8f9fa;
        font-weight: bold;
    }

    /* Filas con color alterno para mejor lectura */
    .tabla-ventas tbody tr:nth-child(even) {
        background-color: #f8f9fa;
    }

    /* Los textos centrados */
    .card-body p {
        width: 100%;
        text-align: center;
    }

    .card-body h2 {
        width: 100%;
        text-align: center;
    }

    .card-body button {
        align-self: flex-start;
        background-color: #0d6efd;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 16px;
    }

    .card-footer {
        background-color: #f8f9fa;
        padding: 15px 20px;
        border-top: 1px solid #dee2e6;
        border-radius: 0 0 8px 8px;
        text-align: center;
        color: #6c757d;
    }
</style>
<body>
    <div class="container">
        <div class="card">
            <div class="card-header">
                <h1>Sotelo - Reporte de Ventas</h1>
            </div>
            <div class="card-body">
                <h2>Ventas del primer trimestre</h2>
                <p>Desglose por producto y región</p>
                
                <!-- ===============================================
                     TABLA DE 8 COLUMNAS
                     =============================================== -->
                <table class="tabla-ventas">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Producto</th>
                            <th>Categoría</th>
                            <th>Precio</th>
                            <th>Stock</th>
                            <th>Vendidos</th>
                            <th>Región</th>
                            <th>Fecha</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>001</td>
                            <td>Portátil Pro</td>
                            <td>Informática</td>
                            <td>899€</td>
                            <td>15</td>
                            <td>7</td>
                            <td>Norte</td>
                            <td>2024-01-15</td>
                        </tr>
                        <tr>
                            <td>002</td>
                            <td>Monitor 24"</td>
                            <td>Periféricos</td>
                            <td>199€</td>
                            <td>8</td>
                            <td>12</td>
                            <td>Sur</td>
                            <td>2024-01-20</td>
                        </tr>
                        <tr>
                            <td>003</td>
                            <td>Teclado Mecánico</td>
                            <td>Periféricos</td>
                            <td>89€</td>
                            <td>23</td>
                            <td>18</td>
                            <td>Este</td>
                            <td>2024-02-01</td>
                        </tr>
                        <tr>
                            <td>004</td>
                            <td>Ratón Inalámbrico</td>
                            <td>Periféricos</td>
                            <td>29€</td>
                            <td>42</td>
                            <td>31</td>
                            <td>Oeste</td>
                            <td>2024-02-10</td>
                        </tr>
                        <tr>
                            <td>005</td>
                            <td>Auriculares</td>
                            <td>Audio</td>
                            <td>59€</td>
                            <td>11</td>
                            <td>9</td>
                            <td>Centro</td>
                            <td>2024-02-15</td>
                        </tr>
                    </tbody>
                </table>

                <button>Exportar reporte completo</button>
            </div>
            <div class="card-footer">
                Total de registros: 5 | Generado: 2024-03-17
            </div>
        </div>
    </div>  
</body>
</html>

📐 ¿Cómo saber cuánto ancho darle?

Regla práctica: Calculadora de ancho mínimo

Para cada columna, calcula aproximadamente:

Tipo de contenidoAncho aproximado
Números cortos (ID, Precio)60-80px
Texto corto (Categoría, Stock)80-100px
Texto medio (Producto, Región)120-150px
Texto largo (Descripción)180-200px
Fechas90-100px

Fórmula rápida:

text
Ancho del padre = (Nº columnas × 100px) + (padding × 2)

Para 8 columnas:

  • Columnas: 8 × 100px = 800px

  • Padding del card-body: 40px (20px izquierda + 20px derecha)

  • TOTAL: 840px (por eso usé 1000px, para dar margen)

🎯 Opciones para manejar el ancho

Opción 1: Aumentar el padre (recomendada)

css
.card {
    width: 1000px;  /* Fijo pero más grande */
}

✅ Control total
❌ Puede no caber en pantallas pequeñas

Opción 2: Usar porcentajes relativos

css
.card {
    width: 90%;      /* Relativo al viewport */
    max-width: 1200px; /* Pero no más de 1200px */
}

✅ Se adapta a diferentes pantallas
✅ Límite superior controlado

Opción 3: Scroll horizontal (solución de emergencia)

css
.card-body {
    overflow-x: auto;  /* Scroll si no cabe */
}

.tabla-ventas {
    min-width: 900px;  /* La tabla necesita este mínimo */
}

✅ El padre puede ser pequeño
✅ La tabla mantiene su tamaño
❌ Usuario tiene que hacer scroll horizontal

✅ Mi recomendación final

Para tu caso, con 8 columnas, usa:

css
.card {
    width: 95%;          /* Ocupa casi todo el ancho disponible */
    max-width: 1100px;   /* Pero no pasa de 1100px */
}

.card-body {
    overflow-x: auto;     /* Por si acaso en móviles */
}

.tabla-ventas {
    min-width: 900px;     /* La tabla necesita al menos esto */
}

Así te aseguras de que:

  • En pantallas grandes (ordenador) → Se ve completa sin scroll

  • En pantallas medianas (tablet) → Se adapta al ancho

  • En pantallas pequeñas (móvil) → Aparece scroll horizontal si es necesario

📝 Resumen

PreguntaRespuesta
¿Hay que aumentar el padre?Sí, SIEMPRE. El padre define el espacio máximo
¿Cuánto aumentarlo?(Nº columnas × 100px) + padding
¿Y si no cabe en la pantalla?Usa max-width o overflow-x: auto
¿Puede la tabla ser más ancha que el padre?No, a menos que uses overflow

Comentarios

Publicar un comentario

Entradas más populares de este blog

Tutorial de CSS: De Cero a Estilizar tu Primera Página Web

1. ¿Qué es CSS? CSS son las siglas de  Cascading Style Sheets  (Hojas de Estilo en Cascada). Es un lenguaje que usamos para describir la  presentación  de un documento escrito en HTML. Mientras que HTML se encarga de la estructura y el contenido (títulos, párrafos, imágenes), CSS se encarga de cómo se ve ese contenido (colores, fuentes, tamaños, posición). 2. ¿Cómo se integra CSS con HTML? Hay tres formas principales de incluir CSS en tu proyecto: CSS en línea (Inline):  Se aplica directamente a una etiqueta HTML usando el atributo  style . Es el método menos recomendado porque mezcla contenido con presentación y es difícil de mantener. html < p style = " color : blue ; font-size : 18px ; " > Este es un párrafo azul. </ p > CSS interno (Internal):  Se escribe dentro de la etiqueta  <style>  en la sección  <head>  del documento HTML. Es útil para páginas individuales o para hacer pruebas rápidas. html <...
Leer más

layouts

   "Explica el siguiente código HTML y CSS poniendo especial énfasis en: La maquetación de cajas : cómo se estructuran visualmente cada uno de los elementos (body, tarjeta, imagen, textos, botón). El flujo natural de las cajas : cómo se comportan los elementos en el flujo por defecto (elementos de bloque vs. en línea) y cómo se van posicionando unos respecto a otros. La agrupación de elementos : cómo se relacionan visualmente los elementos que están dentro de un mismo contenedor. La jerarquía padre-hijo : cómo afectan las propiedades del elemento padre a sus hijos directos e indirectos (herencia, contención, y cómo el espacio del padre condiciona el espacio de los hijos). f Tutorial: Creando una Plantilla de Registro HTML/CSS Objetivo del Proyecto Vamos a crear la estructura básica de una página web que contiene: Un menú de navegación con 4 opciones. Un formulario de registro de usuario. Estilos CSS para que todo se vea ordenado y profesional. Paso 1: Entendiendo la Estructura...
Leer más

Proyecto Práctico: Tarjeta de Perfil

"Explica el siguiente código HTML y CSS poniendo especial énfasis en: La maquetación de cajas : cómo se estructuran visualmente cada uno de los elementos (body, tarjeta, imagen, textos, botón). El flujo natural de las cajas : cómo se comportan los elementos en el flujo por defecto (elementos de bloque vs. en línea) y cómo se van posicionando unos respecto a otros. La agrupación de elementos : cómo se relacionan visualmente los elementos que están dentro de un mismo contenedor. La jerarquía padre-hijo : cómo afectan las propiedades del elemento padre a sus hijos directos e indirectos (herencia, contención, y cómo el espacio del padre condiciona el espacio de los hijos).    Creando una Tarjeta de Perfil con HTML y CSS Descripción del Proyecto Vamos a crear una tarjeta de perfil profesional que contiene: Foto de perfil circular Nombre de la persona Descripción breve Ubicación Botón interactivo con efectos Al final, tendremos una tarjeta moderna y responsive que se centra en la pa...
Leer más