/*
* ============================================================
* EL CHINO SPORTS — global.css
* Estilos base, variables, reset, tipografía y componentes
* compartidos en todas las páginas.
*
* DEPENDENCIAS EXTERNAS — pega estos dos en el
* de cada página HTML antes de tus propios CSS:
*
*
*
*
*
*
*
*
* ============================================================
*/
/* ============================================================
1. VARIABLES CSS
============================================================ */
:root {
/* --- Paleta principal --- */
--color-verde: #1B5E20;
--color-verde-hover: #2E7D32;
--color-verde-claro: #4CAF50; /* acento suave para detalles */
--color-rojo: #C62828;
--color-rojo-hover: #B71C1C;
--color-blanco: #FFFFFF;
--color-fondo: #F5F5F5;
--color-fondo-tarjeta: #FFFFFF;
/* --- Texto --- */
--color-texto: #1A1A1A;
--color-texto-secundario: #666666;
--color-texto-claro: #999999;
/* --- Bordes y sombras --- */
--color-borde: #E0E0E0;
--sombra-suave: 0 2px 8px rgba(0, 0, 0, 0.08);
--sombra-media: 0 4px 16px rgba(0, 0, 0, 0.14);
--sombra-fuerte: 0 8px 32px rgba(0, 0, 0, 0.22);
/* --- Tipografías --- */
--fuente-titulo: 'Bebas Neue', sans-serif;
--fuente-cuerpo: 'Nunito', sans-serif;
/* --- Espaciado base --- */
--espacio-xs: 4px;
--espacio-sm: 8px;
--espacio-md: 16px;
--espacio-lg: 24px;
--espacio-xl: 40px;
--espacio-xxl: 64px;
/* --- Bordes redondeados --- */
--radio-sm: 4px;
--radio-md: 8px;
--radio-lg: 16px;
--radio-pill: 999px;
/* --- Transiciones --- */
--transicion: 0.25s ease;
--transicion-rapida: 0.15s ease;
/* --- Ancho máximo del contenedor --- */
--ancho-max: 1200px;
/* --- WhatsApp --- */
--color-whatsapp: #25D366;
--color-whatsapp-hover: #1da851;
}
/* ============================================================
2. CSS RESET LIMPIO
============================================================ */
/* Box-sizing universal */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Scroll suave en todo el sitio */
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%; /* evita zoom automático en iOS */
}
/* Fuente base y color de fondo */
body {
font-family: var(--fuente-cuerpo);
font-size: 16px;
line-height: 1.6;
color: var(--color-texto);
background-color: var(--color-fondo);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Imágenes responsivas por defecto */
img,
svg,
video {
display: block;
max-width: 100%;
height: auto;
}
/* Listas sin estilo (se estilizan donde se necesitan) */
ul,
ol {
list-style: none;
}
/* Botones: sin estilos nativos del navegador */
button {
font-family: var(--fuente-cuerpo);
cursor: pointer;
border: none;
background: none;
}
/* Links base */
a {
color: inherit;
text-decoration: none;
}
/* Tablas limpias */
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
/* Inputs y selects: hereden tipografía */
input,
select,
textarea,
button {
font-family: inherit;
font-size: inherit;
}
/* Elimina el outline feo pero mantiene accesibilidad con :focus-visible */
*:focus {
outline: none;
}
*:focus-visible {
outline: 2px solid var(--color-verde);
outline-offset: 3px;
}
/* ============================================================
3. TIPOGRAFÍA BASE
============================================================ */
h1,
h2,
h3,
h4 {
font-family: var(--fuente-titulo);
line-height: 1.1;
color: var(--color-texto);
letter-spacing: 0.03em;
}
/* Escala tipográfica mobile-first */
h1 { font-size: clamp(2rem, 6vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.3rem, 3vw, 1.8rem); }
h4 { font-size: clamp(1.1rem, 2vw, 1.4rem); }
p {
font-size: 1rem;
line-height: 1.7;
color: var(--color-texto);
margin-bottom: var(--espacio-md);
}
/* Último párrafo sin margen inferior (evita espacio extra en tarjetas) */
p:last-child {
margin-bottom: 0;
}
/* Links con color de marca */
a:hover {
color: var(--color-verde-hover);
}
strong {
font-weight: 800;
}
/* ============================================================
4. CONTENEDOR PRINCIPAL
============================================================ */
.contenedor {
width: 100%;
max-width: var(--ancho-max);
margin: 0 auto;
padding: 0 var(--espacio-md); /* 16px lateral en mobile */
}
/* Más padding en tablet+ */
@media (min-width: 768px) {
.contenedor {
padding: 0 var(--espacio-lg); /* 24px */
}
}
/* Aún más en desktop */
@media (min-width: 1024px) {
.contenedor {
padding: 0 var(--espacio-xl); /* 40px */
}
}
/* ============================================================
5. BOTÓN WHATSAPP (.btn-whatsapp)
============================================================ */
.btn-whatsapp {
display: inline-flex;
align-items: center;
gap: var(--espacio-sm);
background-color: var(--color-verde);
color: var(--color-blanco);
font-family: var(--fuente-cuerpo);
font-weight: 700;
font-size: 1rem;
padding: 12px 24px;
border-radius: var(--radio-pill);
border: 2px solid transparent;
text-decoration: none;
cursor: pointer;
transition:
background-color var(--transicion),
transform var(--transicion),
box-shadow var(--transicion);
box-shadow: var(--sombra-suave);
white-space: nowrap;
user-select: none;
}
/* Ícono de Font Awesome dentro del botón */
.btn-whatsapp i,
.btn-whatsapp .fa-whatsapp {
font-size: 1.15em;
flex-shrink: 0;
}
/* Hover + focus */
.btn-whatsapp:hover,
.btn-whatsapp:focus-visible {
background-color: var(--color-verde-hover);
color: var(--color-blanco);
transform: translateY(-2px);
box-shadow: var(--sombra-media);
}
/* Click / active */
.btn-whatsapp:active {
transform: translateY(0);
box-shadow: var(--sombra-suave);
}
/* Variante grande (se usa en el hero) */
.btn-whatsapp--grande {
font-size: 1.1rem;
padding: 15px 32px;
}
/* Variante pequeña (se usa en tarjetas de producto) */
.btn-whatsapp--chico {
font-size: 0.875rem;
padding: 9px 18px;
}
/* ============================================================
6. BOTÓN SECUNDARIO (.btn-secundario)
============================================================ */
.btn-secundario {
display: inline-flex;
align-items: center;
gap: var(--espacio-sm);
background-color: transparent;
color: var(--color-verde);
font-family: var(--fuente-cuerpo);
font-weight: 700;
font-size: 1rem;
padding: 11px 23px; /* -1px para compensar el borde */
border-radius: var(--radio-pill);
border: 2px solid var(--color-verde);
text-decoration: none;
cursor: pointer;
transition:
background-color var(--transicion),
color var(--transicion),
transform var(--transicion);
white-space: nowrap;
user-select: none;
}
.btn-secundario:hover,
.btn-secundario:focus-visible {
background-color: var(--color-verde);
color: var(--color-blanco);
transform: translateY(-2px);
}
.btn-secundario:active {
transform: translateY(0);
}
/* Variante "rojo" para acciones destructivas o de alerta */
.btn-secundario--rojo {
color: var(--color-rojo);
border-color: var(--color-rojo);
}
.btn-secundario--rojo:hover,
.btn-secundario--rojo:focus-visible {
background-color: var(--color-rojo);
color: var(--color-blanco);
}
/* ============================================================
7. BADGES (.badge)
============================================================ */
.badge {
display: inline-block;
font-family: var(--fuente-titulo);
font-size: 0.75rem;
letter-spacing: 0.08em;
line-height: 1;
padding: 5px 10px;
border-radius: var(--radio-sm);
text-transform: uppercase;
white-space: nowrap;
user-select: none;
}
/* AGOTADO — rojo */
.badge--agotado {
background-color: var(--color-rojo);
color: var(--color-blanco);
}
/* MUNDIAL / colección especial — verde oscuro */
.badge--mundial {
background-color: var(--color-verde);
color: var(--color-blanco);
}
/* NUEVO — azul */
.badge--nuevo {
background-color: #1565C0;
color: var(--color-blanco);
}
/* DESTACADO — dorado */
.badge--destacado {
background-color: #E65100;
color: var(--color-blanco);
}
/* ============================================================
8. OVERLAY DE PRODUCTO AGOTADO
Uso: dentro de .tarjeta
============================================================ */
.producto-agotado-overlay {
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.55);
display: flex;
align-items: center;
justify-content: center;
border-radius: inherit;
z-index: 10;
pointer-events: none; /* el click pasa a través */
}
.producto-agotado-overlay .badge {
font-size: 1rem;
padding: 10px 20px;
box-shadow: var(--sombra-media);
transform: rotate(-5deg);
}
/* ============================================================
9. CLASES DE UTILIDAD
============================================================ */
/* Colores de texto */
.texto-verde { color: var(--color-verde); }
.texto-rojo { color: var(--color-rojo); }
.texto-gris { color: var(--color-texto-secundario); }
.texto-claro { color: var(--color-texto-claro); }
.texto-blanco { color: var(--color-blanco); }
/* Alineación de texto */
.text-center { text-align: center; }
.text-right { text-align: right; }
/* Ocultamiento accesible — mantiene el elemento en el DOM */
.oculto {
display: none !important;
}
/* Oculta visualmente pero accesible para lectores de pantalla */
.visualmente-oculto {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Responsive show/hide */
/* Mobile-first: .solo-desktop oculto en mobile */
.solo-desktop {
display: none !important;
}
@media (min-width: 1024px) {
.solo-desktop {
display: revert !important; /* restaura el display natural del elemento */
}
.solo-mobile {
display: none !important;
}
}
/* Flex helpers */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-entre { display: flex; align-items: center; justify-content: space-between; }
.flex-column { display: flex; flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.gap-sm { gap: var(--espacio-sm); }
.gap-md { gap: var(--espacio-md); }
.gap-lg { gap: var(--espacio-lg); }
/* Espaciado rápido */
.mt-sm { margin-top: var(--espacio-sm); }
.mt-md { margin-top: var(--espacio-md); }
.mt-lg { margin-top: var(--espacio-lg); }
.mb-sm { margin-bottom: var(--espacio-sm); }
.mb-md { margin-bottom: var(--espacio-md); }
.mb-lg { margin-bottom: var(--espacio-lg); }
/* Anchura completa */
.ancho-completo {
width: 100%;
}
/* ============================================================
10. DIVIDER / SEPARADOR
============================================================ */
.separador {
border: none;
border-top: 2px solid var(--color-borde);
margin: var(--espacio-xl) 0;
}
.separador--verde {
border-top-color: var(--color-verde);
}
/* ============================================================
11. SECCIÓN BASE (padding vertical uniforme)
============================================================ */
.seccion {
padding-top: var(--espacio-xl);
padding-bottom: var(--espacio-xl);
}
@media (min-width: 768px) {
.seccion {
padding-top: var(--espacio-xxl);
padding-bottom: var(--espacio-xxl);
}
}
/* ============================================================
12. ETIQUETA DE PRECIO
============================================================ */
.precio {
font-family: var(--fuente-titulo);
font-size: 1.6rem;
color: var(--color-verde);
letter-spacing: 0.02em;
}
.precio--grande {
font-size: 2rem;
}
.precio--tachado {
font-size: 1.1rem;
color: var(--color-texto-claro);
text-decoration: line-through;
font-family: var(--fuente-cuerpo);
font-weight: 400;
}
/* ============================================================
13. MENSAJES / ALERTAS
============================================================ */
.alerta {
display: flex;
align-items: flex-start;
gap: var(--espacio-sm);
padding: var(--espacio-md);
border-radius: var(--radio-md);
font-size: 0.9rem;
line-height: 1.5;
}
.alerta i {
flex-shrink: 0;
margin-top: 2px;
}
.alerta--info {
background-color: #E3F2FD;
color: #1565C0;
border-left: 4px solid #1565C0;
}
.alerta--exito {
background-color: #E8F5E9;
color: var(--color-verde);
border-left: 4px solid var(--color-verde);
}
.alerta--error {
background-color: #FFEBEE;
color: var(--color-rojo);
border-left: 4px solid var(--color-rojo);
}
/* ============================================================
14. SPINNER DE CARGA
============================================================ */
.spinner {
display: inline-block;
width: 36px;
height: 36px;
border: 4px solid var(--color-borde);
border-top: 4px solid var(--color-verde);
border-radius: 50%;
animation: girar 0.7s linear infinite;
}
@keyframes girar {
to { transform: rotate(360deg); }
}
.cargando {
display: flex;
justify-content: center;
align-items: center;
padding: var(--espacio-xxl) var(--espacio-md);
}
/* ============================================================
15. SCROLL TOP BUTTON (global, visible en todas las páginas)
============================================================ */
.btn-scroll-top {
position: fixed;
bottom: 24px;
right: 24px;
width: 44px;
height: 44px;
background-color: var(--color-verde);
color: var(--color-blanco);
border-radius: 50%;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
box-shadow: var(--sombra-media);
transition:
background-color var(--transicion),
transform var(--transicion),
opacity var(--transicion);
opacity: 0;
pointer-events: none;
z-index: 500;
}
.btn-scroll-top.visible {
opacity: 1;
pointer-events: auto;
}
.btn-scroll-top:hover {
background-color: var(--color-verde-hover);
transform: translateY(-3px);
}
/* ============================================================
16. TARJETA DE PRODUCTO (.producto-card)
Componente compartido: home, catálogo, producto relacionado.
============================================================ */
.producto-card {
background-color: var(--color-fondo-tarjeta);
border-radius: var(--radio-lg);
overflow: hidden;
box-shadow: var(--sombra-suave);
transition:
transform var(--transicion),
box-shadow var(--transicion);
display: flex;
flex-direction: column;
position: relative;
}
.producto-card:hover {
transform: translateY(-5px);
box-shadow: var(--sombra-media);
}
/* Badge flotante */
.producto-card__badge {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
}
/* Imagen */
.producto-card__img-wrap {
position: relative;
background-color: #e8f5e9;
aspect-ratio: 4/3;
overflow: hidden;
}
.producto-card__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s ease;
}
.producto-card:hover .producto-card__img {
transform: scale(1.06);
}
/* Placeholder cuando no hay imagen */
.producto-card__img-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
color: rgba(27, 94, 32, .3);
background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
}
/* Cuerpo */
.producto-card__cuerpo {
padding: var(--espacio-md);
display: flex;
flex-direction: column;
gap: var(--espacio-sm);
flex: 1;
}
.producto-card__nombre {
font-family: var(--fuente-cuerpo);
font-weight: 700;
font-size: .9rem;
color: var(--color-texto);
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.producto-card__precio {
font-family: var(--fuente-titulo);
font-size: 1.4rem;
color: var(--color-verde);
letter-spacing: .02em;
line-height: 1;
}
/* Chips de tallas en tarjeta */
.producto-card__tallas {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.talla-chip {
font-size: .7rem;
font-weight: 700;
font-family: var(--fuente-cuerpo);
padding: 2px 7px;
border-radius: var(--radio-sm);
border: 1.5px solid var(--color-borde);
color: var(--color-texto-secundario);
background-color: var(--color-fondo);
line-height: 1.6;
white-space: nowrap;
transition: border-color var(--transicion), color var(--transicion);
}
.talla-chip--disponible {
border-color: var(--color-verde);
color: var(--color-verde);
}
/* Talla que coincide con el filtro activo */
.talla-chip--filtrada {
background-color: var(--color-verde);
color: var(--color-blanco);
}
.talla-chip--agotada {
opacity: .45;
text-decoration: line-through;
}
/* Footer de tarjeta (CTA) */
.producto-card__footer {
padding: 0 var(--espacio-md) var(--espacio-md);
margin-top: auto;
}
.producto-card__cta {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
padding: 9px 0;
background-color: var(--color-verde);
color: var(--color-blanco);
font-family: var(--fuente-cuerpo);
font-weight: 700;
font-size: .875rem;
border-radius: var(--radio-md);
text-decoration: none;
border: 2px solid transparent;
transition:
background-color var(--transicion),
transform var(--transicion);
}
.producto-card__cta:hover {
background-color: var(--color-verde-hover);
color: var(--color-blanco);
transform: translateY(-1px);
}
/* ============================================================
17. FOOTER DEL SITIO (.site-footer)
Componente compartido: index, catálogo, producto, 404.
============================================================ */
.site-footer {
background-color: #0a1f0b;
color: rgba(255,255,255,.75);
padding: var(--espacio-xxl) 0 var(--espacio-lg);
}
.footer__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--espacio-xl);
margin-bottom: var(--espacio-xl);
}
@media (min-width: 768px) {
.footer__grid {
grid-template-columns: 1.5fr 1fr 1fr;
}
}
/* Logo dentro del footer */
.footer__logo {
text-decoration: none;
display: inline-flex;
flex-direction: column;
line-height: 1;
margin-bottom: var(--espacio-md);
}
.footer__logo-linea1 {
font-family: var(--fuente-titulo);
font-size: .95rem;
letter-spacing: .1em;
color: rgba(255,255,255,.6);
}
.footer__logo-linea2 {
font-family: var(--fuente-titulo);
font-size: 1.5rem;
letter-spacing: .06em;
color: var(--color-blanco);
margin-top: -3px;
}
.footer__logo:hover .footer__logo-linea2 {
color: var(--color-verde-claro);
}
.footer__desc {
font-size: .875rem;
line-height: 1.6;
color: rgba(255,255,255,.55);
margin-bottom: var(--espacio-md);
}
/* Íconos redes sociales */
.footer__sociales {
display: flex;
gap: var(--espacio-sm);
margin-top: var(--espacio-sm);
flex-wrap: wrap;
}
.footer__social-link {
width: 38px;
height: 38px;
border-radius: 50%;
border: 1.5px solid rgba(255,255,255,.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
color: rgba(255,255,255,.65);
text-decoration: none;
transition:
border-color var(--transicion),
color var(--transicion),
background-color var(--transicion);
}
.footer__social-link:hover {
border-color: var(--color-verde-claro);
color: var(--color-blanco);
background-color: rgba(76,175,80,.15);
}
/* Columnas de navegación */
.footer__col-titulo {
font-family: var(--fuente-titulo);
font-size: .85rem;
letter-spacing: .15em;
text-transform: uppercase;
color: rgba(255,255,255,.4);
margin-bottom: var(--espacio-md);
}
.footer__nav {
display: flex;
flex-direction: column;
gap: var(--espacio-sm);
}
.footer__nav-link {
font-size: .875rem;
color: rgba(255,255,255,.6);
text-decoration: none;
transition: color var(--transicion);
display: inline-flex;
align-items: center;
gap: 6px;
}
.footer__nav-link:hover {
color: var(--color-verde-claro);
}
/* Barra inferior del footer */
.footer__bottom {
border-top: 1px solid rgba(255,255,255,.08);
padding-top: var(--espacio-lg);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--espacio-sm);
}
.footer__copyright {
font-size: .8rem;
color: rgba(255,255,255,.35);
margin: 0;
}
.footer__hecho-con {
font-size: .8rem;
color: rgba(255,255,255,.25);
}
.footer__hecho-con span {
color: #EF5350;
}