/* ---
Código html:
--- */
/*
============================================================================
ESTILOS DE LA SECCIÓN DE PRODUCTOS
============================================================================
Contenedor principal que envuelve la sección de productos del menú.
Incluye estilos para el contenedor, títulos y efectos de tema oscuro.
============================================================================ */
/* Contenedor principal de la sección de productos */
.main-section-p {
/* Fondo y borde */
background-color: var(--color-section-bg); /* Color de fondo usando variable CSS */
border: 1px solid var(--color-section-border); /* Borde sutil */
border-radius: 1rem; /* Esquinas redondeadas */
/* Espaciado y dimensiones */
padding: 2.5rem 1.5rem; /* Relleno interno: 2.5rem arriba/abajo, 1.5rem izquierda/derecha */
max-width: 40rem; /* Ancho máximo para mejor legibilidad */
margin: 3rem auto 4rem auto; /* Margen: 3rem arriba, auto en lados, 4rem abajo */
/* Efectos visuales */
box-shadow: 0 0.5rem 1.5rem var(--color-shadow); /* Sombra suave */
/* Transiciones suaves para cambios de tema */
transition:
background-color 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease;
}
/*
============================================================================
MODO OSCURO - CONTENEDOR
============================================================================
Ajustes específicos para el tema oscuro
============================================================================ */
body.dark .main-section-p {
background-color: var(--color-section-bg-dark); /* Fondo más oscuro */
border-color: var(--color-section-border-dark); /* Borde con tono más oscuro */
box-shadow: 0 0.5rem 2rem var(--color-shadow-dark); /* Sombra más pronunciada */
}
/*
============================================================================
TÍTULO DE LA SECCIÓN
============================================================================
Estilos para el título principal de la sección de productos
============================================================================ */
.main-section-p > h2 {
/* Tipografía */
font-size: 2rem; /* Tamaño grande para el título */
font-weight: 700; /* Negrita */
color: var(--color-primary); /* Color primario del tema */
/* Diseño */
text-align: center; /* Centrado */
margin-bottom: 2.5rem; /* Espacio inferior */
/* Posicionamiento para el subrayado decorativo */
position: relative;
padding-bottom: 1rem; /* Espacio para el subrayado */
/* Transición suave para cambios de tema */
transition: color 0.3s ease;
}
/*
============================================================================
SUBRAYADO DECORATIVO DEL TÍTULO
============================================================================
Línea decorativa debajo del título principal
============================================================================ */
.main-section-p > h2::after {
content: ''; /* Necesario para que se muestre el pseudoelemento */
/* Posicionamiento */
position: absolute;
bottom: 0; /* Alineado con el borde inferior del título */
left: 50%; /* Centrado horizontalmente */
transform: translateX(-50%); /* Centrado preciso */
/* Dimensiones */
width: 4rem; /* Ancho de la línea */
height: 0.25rem; /* Grosor de la línea */
/* Estilo visual */
background: linear-gradient(90deg,
transparent,
var(--color-primary),
transparent); /* Degradado suave */
border-radius: 0.125rem; /* Esquinas ligeramente redondeadas */
}
/*
============================================================================
MODO OSCURO - TÍTULO
============================================================================
Ajustes del título en modo oscuro
============================================================================ */
body.dark .main-section-p > h2 {
color: var(--color-primary-dark); /* Color primario para modo oscuro */
}
/*
============================================================================
MODO OSCURO - SUBRAYADO
============================================================================
Ajustes del subrayado en modo oscuro
============================================================================ */
body.dark .main-section-p > h2::after {
background: linear-gradient(90deg,
transparent,
var(--color-primary-dark),
transparent); /* Degradado con color primario oscuro */
}
/*
============================================================================
TARJETA DE PRODUCTO
============================================================================
Estilos para las tarjetas individuales de productos dentro de la sección.
Incluye efectos de hover y soporte para modo oscuro.
============================================================================ */
.main-section-p .Producto {
/* Fondo y borde */
background-color: var(--color-section-bg-alt); /* Fondo alternativo */
border: 1px solid var(--color-section-border); /* Borde sutil */
border-radius: 0.75rem; /* Esquinas redondeadas */
/* Efectos visuales */
box-shadow: 0 0.25rem 0.75rem var(--color-shadow); /* Sombra suave */
/* Espaciado y disposición */
padding: 1.25rem; /* Relleno interno */
margin-bottom: 2rem; /* Espaciado inferior */
/* Transiciones */
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Transición suave */
/* Comportamiento */
overflow: hidden; /* Contenido que sobresale se recorta */
}
/*
============================================================================
ÚLTIMO PRODUCTO
============================================================================
Elimina el margen inferior del último producto para evitar espacio extra
============================================================================ */
.main-section-p .Producto:last-child {
margin-bottom: 0; /* Sin margen inferior en el último elemento */
}
/*
============================================================================
EFECTO HOVER - TARJETA DE PRODUCTO
============================================================================
Efectos que se aplican al pasar el ratón sobre un producto
============================================================================ */
.main-section-p .Producto:hover {
transform: translateY(-0.25rem); /* Elevación sutil */
box-shadow: 0 0.75rem 2rem var(--color-shadow-hover); /* Sombra más pronunciada */
border-color: var(--color-primary-light); /* Borde con color primario claro */
}
/*
============================================================================
MODO OSCURO - TARJETA DE PRODUCTO
============================================================================
Ajustes específicos para el tema oscuro
============================================================================ */
body.dark .main-section-p .Producto {
/* Fondo y borde oscuros */
background-color: var(--color-section-bg-alt-dark);
border-color: var(--color-section-border-dark);
/* Sombra más oscura */
box-shadow: 0 0.25rem 1rem var(--color-shadow-dark);
}
/*
============================================================================
MODO OSCURO - EFECTO HOVER
============================================================================
Efectos de hover específicos para el tema oscuro
============================================================================ */
body.dark .main-section-p .Producto:hover {
/* Sombra más intensa en modo oscuro */
box-shadow: 0 0.75rem 2.5rem var(--color-shadow-hover-dark);
/* Borde con color primario oscuro */
border-color: var(--color-primary-dark);
}
/*
============================================================================
IMAGEN DEL PRODUCTO
============================================================================
Estilos para las imágenes dentro de las tarjetas de producto.
Incluye efectos de hover y ajustes para modo oscuro.
============================================================================ */
.main-section-p .Producto img {
/* Comportamiento de visualización */
display: block; /* Elimina espacio inferior fantasma */
width: 100%; /* Ancho completo del contenedor */
max-width: 100%; /* Evita desbordamiento */
height: 15rem; /* Altura fija para uniformidad */
/* Estilo visual */
border-radius: 0.5rem; /* Esquinas ligeramente redondeadas */
box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1); /* Sombra sutil */
/* Espaciado */
margin-bottom: 1.25rem; /* Separación con el contenido inferior */
/* Comportamiento de la imagen */
object-fit: cover; /* Cubre el área manteniendo relación de aspecto */
/* Transiciones */
transition:
transform 0.4s ease, /* Transición suave para escalado */
filter 0.3s ease; /* Transición para efectos de brillo */
}
/*
============================================================================
EFECTO HOVER - IMAGEN
============================================================================
Efecto sutil de zoom al pasar el ratón sobre la imagen
============================================================================ */
.main-section-p .Producto:hover img {
transform: scale(1.02); /* Escala ligeramente la imagen */
}
/*
============================================================================
MODO OSCURO - IMAGEN
============================================================================
Ajustes de brillo para mejorar la visualización en modo oscuro
============================================================================ */
body.dark .main-section-p .Producto img {
filter: brightness(0.9); /* Reduce ligeramente el brillo en modo oscuro */
}
/*
============================================================================
MODO OSCURO - EFECTO HOVER
============================================================================
Ajuste de brillo al hacer hover en modo oscuro
============================================================================ */
body.dark .main-section-p .Producto:hover img {
filter: brightness(1); /* Restaura el brillo normal al hacer hover */
}
/*
============================================================================
TÍTULO DEL PRODUCTO
============================================================================
Estilos para el título (h3) dentro de las tarjetas de producto.
Incluye transiciones de color y soporte para modo oscuro.
============================================================================ */
.main-section-p .Producto h3 {
/* Tipografía */
font-size: 1.375rem; /* Tamaño de fuente grande para el título */
font-weight: 600; /* Peso semibold para mejor legibilidad */
line-height: 1.3; /* Interlineado óptimo para lectura */
/* Color y transición */
color: var(--color-primary); /* Color primario del tema */
transition: color 0.3s ease; /* Transición suave para cambios de color */
/* Espaciado */
margin: 0 0 0.75rem 0; /* Margen inferior para separar del precio */
}
/*
============================================================================
MODO OSCURO - TÍTULO
============================================================================
Ajustes de color para el título en modo oscuro
============================================================================ */
body.dark .main-section-p .Producto h3 {
color: var(--color-primary-dark); /* Color primario para modo oscuro */
}
/*
============================================================================
EFECTO HOVER - TÍTULO
============================================================================
Cambio de color al pasar el ratón sobre el producto
============================================================================ */
.main-section-p .Producto:hover h3 {
color: var(--color-primary-hover); /* Color más claro al hacer hover */
}
/*
============================================================================
MODO OSCURO - EFECTO HOVER
============================================================================
Ajuste de color hover para modo oscuro
============================================================================ */
body.dark .main-section-p .Producto:hover h3 {
color: var(--color-primary-hover-dark); /* Color hover para modo oscuro */
}
/*
============================================================================
PRECIO DEL PRODUCTO
============================================================================
Estilos para el precio (etiqueta ) dentro de las tarjetas de producto.
Incluye un fondo sutil con gradiente y transiciones.
============================================================================ */
.main-section-p .Producto strong {
/* Comportamiento de visualización */
display: inline-block; /* Permite aplicar márgenes y padding */
/* Tipografía */
font-size: 1.5rem; /* Tamaño grande para destacar el precio */
font-weight: 700; /* Negrita para mayor énfasis */
/* Espaciado */
margin-bottom: 1rem; /* Separación con el contenido inferior */
padding: 0.25rem 0.75rem; /* Relleno interno para el fondo */
/* Estilo visual */
color: var(--color-primary); /* Color primario del tema */
background: linear-gradient(135deg,
var(--color-primary-light),
transparent); /* Degradado sutil */
border-radius: 0.375rem; /* Esquinas ligeramente redondeadas */
/* Transiciones */
transition: all 0.3s ease; /* Transición suave para efectos hover */
}
/*
============================================================================
MODO OSCURO - PRECIO
============================================================================
Ajustes de estilo para el precio en modo oscuro
============================================================================ */
body.dark .main-section-p .Producto strong {
background: linear-gradient(135deg,
rgba(239, 68, 68, 0.2), /* Tono rojo suave con transparencia */
transparent);
}
/*
============================================================================
DESCRIPCIÓN DEL PRODUCTO
============================================================================
Estilos para el párrafo de descripción dentro de las tarjetas de producto
============================================================================ */
.main-section-p .Producto p {
/* Tipografía */
font-size: 1rem; /* Tamaño estándar para mejor legibilidad */
line-height: 1.6; /* Interlineado generoso para párrafos */
text-align: justify; /* Texto justificado para mejor apariencia */
/* Color y contraste */
color: var(--color-text-secondary); /* Color secundario para el texto */
/* Espaciado */
margin-bottom: 1.25rem; /* Separación con la lista de características */
}
/*
============================================================================
MODO OSCURO - DESCRIPCIÓN
============================================================================
Ajustes de color para la descripción en modo oscuro
============================================================================ */
body.dark .main-section-p .Producto p {
color: var(--color-text-secondary-dark); /* Color más claro para mejor contraste */
}
/*
============================================================================
LISTA DE CARACTERÍSTICAS
============================================================================
Estilos para la lista de características de cada producto.
Incluye viñetas personalizadas y soporte para modo oscuro.
============================================================================ */
.main-section-p .Producto ul {
/* Eliminar estilos por defecto */
list-style: none; /* Quita las viñetas por defecto */
padding: 0; /* Elimina el padding por defecto */
margin: 0; /* Elimina los márgenes por defecto */
/* Fondo y borde */
background-color: rgba(230, 57, 70, 0.05); /* Fondo sutil con color primario */
border-radius: 0.5rem; /* Esquinas redondeadas */
border-left: 0.25rem solid var(--color-primary); /* Borde lateral izquierdo */
/* Espaciado interno */
padding: 1rem 1.25rem; /* Relleno interno generoso */
}
/*
============================================================================
MODO OSCURO - LISTA
============================================================================
Ajustes de estilo para la lista en modo oscuro
============================================================================ */
body.dark .main-section-p .Producto ul {
background-color: rgba(239, 68, 68, 0.1); /* Fondo más oscuro */
border-left-color: var(--color-primary-dark); /* Color de borde para modo oscuro */
}
/*
============================================================================
ELEMENTOS DE LA LISTA
============================================================================
Estilos para cada ítem de la lista de características
============================================================================ */
.main-section-p .Producto ul li {
/* Tipografía */
font-size: 0.95rem; /* Tamaño ligeramente más pequeño */
/* Espaciado y posición */
margin-bottom: 0.5rem; /* Separación entre elementos */
padding-left: 1.5rem; /* Espacio para la viñeta personalizada */
position: relative; /* Contexto para posicionar la viñeta */
/* Transición */
transition: color 0.2s ease; /* Transición suave para el color */
}
/*
============================================================================
ÚLTIMO ELEMENTO DE LA LISTA
============================================================================
Elimina el margen inferior del último elemento para evitar espacio extra
============================================================================ */
.main-section-p .Producto ul li:last-child {
margin-bottom: 0; /* Sin margen inferior en el último elemento */
}
/*
============================================================================
VIÑETA PERSONALIZADA
============================================================================
Reemplaza las viñetas por defecto con un check (✓) personalizado
============================================================================ */
.main-section-p .Producto ul li::before {
content: '✓'; /* Símbolo de check */
/* Posicionamiento */
position: absolute;
left: 0; /* Alineado a la izquierda */
/* Estilo */
color: var(--color-primary); /* Color primario del tema */
font-weight: bold; /* Negrita para mejor visibilidad */
font-size: 1rem; /* Tamaño ligeramente mayor */
}
/*
============================================================================
MODO OSCURO - VIÑETA
============================================================================
Ajuste de color para la viñeta en modo oscuro
============================================================================ */
body.dark .main-section-p .Producto ul li::before {
color: var(--color-primary-dark); /* Color primario para modo oscuro */
}
/*
============================================================================
DISEÑO RESPONSIVE - TABLETS (≥640px)
============================================================================
Ajustes específicos para pantallas medianas (tablets y pantallas pequeñas).
Implementa un diseño de cuadrícula de 2 columnas para mejor organización.
============================================================================ */
@media (min-width: 40rem) { /* 640px */
/*
Contenedor principal - Diseño de cuadrícula
========================================== */
.main-section-p {
max-width: 50rem; /* Ancho máximo aumentado */
padding: 3.5rem 2.5rem; /* Más espacio interno */
margin: 4rem auto 5rem; /* Márgenes verticales mayores */
/* Diseño de cuadrícula de 2 columnas */
display: grid;
grid-template-columns: repeat(2, 1fr); /* 2 columnas de igual ancho */
gap: 2rem; /* Espacio entre elementos */
align-items: start; /* Alineación superior de los elementos */
}
/*
Título de la sección
=================== */
.main-section-p > h2 {
font-size: 2.5rem; /* Tamaño de fuente aumentado */
margin-bottom: 2rem; /* Espaciado inferior */
grid-column: 1 / -1; /* Ocupa ambas columnas */
}
/*
Tarjeta de producto
================= */
.main-section-p .Producto {
display: flex; /* Usa flexbox para el diseño interno */
flex-direction: column; /* Apila los elementos verticalmente */
padding: 1.5rem; /* Relleno interno */
margin-bottom: 0; /* Sin margen inferior (controlado por gap del grid) */
}
/*
Imagen del producto
================= */
.main-section-p .Producto img {
width: 100%; /* Ocupa todo el ancho disponible */
height: 12rem; /* Altura fija para uniformidad */
border-radius: 0.75rem; /* Bordes más redondeados */
margin-bottom: 1rem; /* Espaciado inferior */
}
/*
Título del producto
================= */
.main-section-p .Producto h3 {
font-size: 1.375rem; /* Tamaño de fuente aumentado */
}
/*
Precio
===== */
.main-section-p .Producto strong {
font-size: 1.375rem; /* Tamaño de fuente aumentado */
margin-bottom: 0.875rem; /* Espaciado inferior ajustado */
}
/*
Descripción
========== */
.main-section-p .Producto p {
font-size: 1rem; /* Tamaño de fuente estándar */
margin-bottom: 1rem; /* Espaciado inferior */
}
/*
Lista de características
====================== */
.main-section-p .Producto ul {
margin-top: auto; /* Empuja la lista hacia abajo */
}
/*
Elementos de la lista
==================== */
.main-section-p .Producto ul li {
font-size: 0.9375rem; /* Tamaño de fuente ligeramente mayor */
}
}
/*
============================================================================
DISEÑO RESPONSIVE - ESCRITORIO (≥1024px)
============================================================================
Ajustes para pantallas de escritorio medianas.
Cambia a un diseño de 3 columnas y ajusta los tamaños de fuente.
============================================================================ */
@media (min-width: 64rem) { /* 1024px */
/*
Contenedor principal
================== */
.main-section-p {
max-width: 75rem; /* Ancho máximo aumentado */
padding: 4rem 3rem; /* Más espacio interno */
margin: 5rem auto 6rem; /* Márgenes verticales mayores */
grid-template-columns: repeat(3, 1fr); /* 3 columnas */
gap: 2rem; /* Espacio entre elementos */
}
/*
Título de la sección
=================== */
.main-section-p > h2 {
font-size: 2.75rem; /* Tamaño de fuente aumentado */
margin-bottom: 2rem; /* Espaciado inferior */
}
/*
Tarjeta de producto
================= */
.main-section-p .Producto {
padding: 1.5rem; /* Relleno interno consistente */
}
/*
Imagen del producto
================= */
.main-section-p .Producto img {
height: 13rem; /* Altura ligeramente mayor */
}
/*
Título del producto
================= */
.main-section-p .Producto h3 {
font-size: 1.375rem; /* Tamaño de fuente consistente */
}
/*
Precio
===== */
.main-section-p .Producto strong {
font-size: 1.375rem; /* Tamaño de fuente consistente */
}
/*
Descripción
========== */
.main-section-p .Producto p {
font-size: 0.9375rem; /* Tamaño de fuente ligeramente reducido */
}
/*
Elementos de la lista
==================== */
.main-section-p .Producto ul li {
font-size: 0.875rem; /* Tamaño de fuente reducido */
}
}
/*
============================================================================
DISEÑO RESPONSIVE - PANTALLAS GRANDES (≥1440px)
============================================================================
Ajustes para pantallas de escritorio grandes.
Cambia a un diseño de 4 columnas.
============================================================================ */
@media (min-width: 90rem) { /* 1440px */
.main-section-p {
max-width: 95rem; /* Ancho máximo aumentado */
grid-template-columns: repeat(4, 1fr); /* 4 columnas */
}
}
/*
============================================================================
ANIMACIÓN DE ENTRADA
============================================================================
Efecto de aparición suave para las tarjetas de producto
============================================================================ */
@keyframes fadeInUp {
from {
opacity: 0; /* Inicia invisible */
transform: translateY(1.25rem); /* Desplazamiento inicial hacia abajo */
}
to {
opacity: 1; /* Termina completamente visible */
transform: translateY(0); /* Sin desplazamiento */
}
}
/*
============================================================================
APLICACIÓN DE LA ANIMACIÓN
============================================================================
Aplica la animación a todas las tarjetas de producto
============================================================================ */
.main-section-p .Producto {
animation: fadeInUp 0.6s ease-out; /* Duración y función de tiempo */
}