/* -------------------- 1. VARIABLES -------------------- */ :root { /* Colores de marca */ --color-fondo: #fbf6f1; /* fondo general, tono crema */ --color-texto: #2b2420; /* texto principal, casi negro */ --color-texto-suave: #6b6157; /* texto secundario (descripciones) */ --color-borde: #e6ded4; /* bordes y separadores */ --color-blanco: #fefdfb; /* tarjetas y cabecera */ --color-naranja: #e2632d; /* color principal (botones, precios) */ --color-naranja-suave: #fbe4d3; /* fondos suaves en tono naranja */ --color-teal: #3fa6a6; /* color secundario (acentos) */ --color-teal-suave: #ddf0ee; /* fondos suaves en tono teal */ --color-oscuro: #26314a; /* fondo oscuro (franja PLAY4EVER) */ --color-verde-neon: #8fe0b0; /* acento sobre fondo oscuro */ /* Tipografías (cargadas desde Google Fonts en el ) */ --fuente-titulos: 'Baloo 2', sans-serif; --fuente-texto: 'Plus Jakarta Sans', sans-serif; /* Medidas reutilizables */ --ancho-maximo: 1280px; --radio-grande: 28px; --radio-medio: 20px; --radio-pequeno: 12px; } /* -------------------- 2. ESTILOS GENERALES -------------------- */ body { background: var(--color-fondo); color: var(--color-texto); font-family: var(--fuente-texto); } /* Contenedor centrado que usamos en cada sección para no pegar el contenido a los bordes de la pantalla. */ .contenedor { max-width: var(--ancho-maximo); margin: 0 auto; padding: 0 24px; } /* Título de cada sección de la portada ("Novedades", "Explora el catálogo"...) */ .titulo-seccion { font-family: var(--fuente-titulos); font-weight: 700; font-size: 22px; margin-bottom: 20px; } .cabecera-seccion { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; } .enlace-ver-todo { font-weight: 700; font-size: 14px; color: var(--color-naranja); } /* Botón "pastilla" reutilizable en toda la web */ .boton { display: inline-block; padding: 12px 24px; border-radius: 999px; font-weight: 700; font-size: 15px; border: 2px solid transparent; } .boton--principal { background: var(--color-texto); color: var(--color-blanco); } .boton--secundario { background: transparent; border-color: rgba(255, 255, 255, 0.7); color: var(--color-blanco); } .boton--oscuro { background: var(--color-oscuro); color: white; } /* -------------------- 3. CABECERA / NAVEGACIÓN -------------------- */ .cabecera { position: sticky; top: 0; z-index: 50; background: var(--color-blanco); border-bottom: 1px solid var(--color-borde); } .barra-nav { display: flex; align-items: center; gap: 16px; height: 76px; } .logo { flex: none; font-family: var(--fuente-titulos); font-weight: 800; font-size: 24px; color: var(--color-naranja); } /* La "R" del logo va invertida (como en el logotipo real de Toys"R"Us) */ .logo__r { display: inline-block; color: var(--color-teal); transform: scaleX(-1); } .menu-principal { display: flex; align-items: center; gap: 2px; flex: none; } /* Cada elemento del menú principal (Juguetes, Marcas, Ofertas...) */ .enlace-nav { padding: 8px 12px; border-radius: 999px; font-weight: 600; font-size: 14px; white-space: nowrap; } .enlace-nav:hover, .enlace-nav[aria-expanded="true"] { background: var(--color-naranja-suave); color: var(--color-naranja); } .nav-empuja { flex: 1; } .buscador { flex: 0 1 220px; min-width: 70px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--color-borde); background: var(--color-fondo); font-size: 14px; } .enlace-cuenta { flex: none; padding: 8px 16px; border-radius: 999px; font-weight: 600; font-size: 13px; border: 1px solid var(--color-borde); white-space: nowrap; } .enlace-cesta { flex: none; padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: 13px; background: var(--color-naranja); color: white; white-space: nowrap; } /* Menú desplegable ("mega menú") que aparece bajo Juguetes / Marcas. Por defecto está oculto; el JS le añade la clase ".abierto". */ .mega-menu { display: none; position: absolute; left: 24px; right: 24px; top: 76px; background: var(--color-blanco); border: 1px solid var(--color-borde); border-radius: 0 0 var(--radio-grande) var(--radio-grande); box-shadow: 0 24px 48px -12px rgba(43, 36, 32, 0.18); padding: 32px 40px; gap: 48px; } .mega-menu.abierto { display: flex; } .nav-contenedor { position: relative; } .mega-menu__columna { flex: none; width: 190px; } .mega-menu__titulo { font-weight: 700; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-texto-suave); margin-bottom: 14px; } .mega-menu__lista { display: flex; flex-direction: column; gap: 10px; } .mega-menu__lista a { font-size: 15px; font-weight: 500; } .mega-menu__destacado { flex: 1; border-radius: var(--radio-medio); padding: 28px; display: flex; align-items: center; gap: 24px; } .mega-menu__destacado--juguetes { background: var(--color-naranja-suave); } .mega-menu__destacado--marcas { background: var(--color-oscuro); color: white; } /* -------------------- 4. SECCIONES DE LA PORTADA -------------------- */ /* HERO: gran banner de bienvenida */ .hero { background: var(--color-teal); border-radius: 32px; padding: 56px; margin-top: 40px; display: flex; align-items: center; gap: 48px; overflow: hidden; } .hero__texto { flex: 1; min-width: 280px; } .hero__etiqueta { display: inline-block; padding: 6px 16px; border-radius: 999px; background: rgba(254, 253, 251, 0.85); font-weight: 700; font-size: 13px; color: var(--color-teal); margin-bottom: 18px; } .hero__titulo { font-family: var(--fuente-titulos); font-weight: 800; font-size: 46px; line-height: 1.1; color: white; max-width: 520px; margin-bottom: 18px; } .hero__descripcion { font-size: 17px; line-height: 1.5; color: rgba(254, 253, 251, 0.92); max-width: 460px; margin-bottom: 28px; } .hero__botones { display: flex; gap: 14px; flex-wrap: wrap; } .hero__imagen { flex: none; width: 320px; border-radius: 24px; overflow: hidden; } /* Chips "Comprar por edad" */ .lista-chips { display: flex; gap: 12px; flex-wrap: wrap; } .chip { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; border: 1.5px solid var(--color-borde); background: var(--color-blanco); font-weight: 600; font-size: 15px; } .chip__punto { width: 10px; height: 10px; border-radius: 999px; background: var(--color-naranja); } /* Tarjetas de categoría ("Explora el catálogo") */ .grid-categorias { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; } .tarjeta-categoria { border-radius: var(--radio-medio); padding: 26px; display: flex; flex-direction: column; gap: 12px; } .tarjeta-categoria--clara-a { background: var(--color-teal-suave); } .tarjeta-categoria--clara-b { background: var(--color-naranja-suave); } .tarjeta-categoria--oscura { background: var(--color-oscuro); color: white; } .tarjeta-categoria__icono { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: white; } .tarjeta-categoria__titulo { font-family: var(--fuente-titulos); font-weight: 700; font-size: 18px; } .tarjeta-categoria__texto { font-size: 14px; color: var(--color-texto-suave); } .tarjeta-categoria--oscura .tarjeta-categoria__texto { color: rgba(255, 255, 255, 0.75); } /* Rejilla de productos (se reutiliza en "Novedades", "Más vendidos"... ) */ .grid-productos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; } .tarjeta-producto { background: var(--color-blanco); border: 1px solid var(--color-borde); border-radius: var(--radio-medio); overflow: hidden; } .tarjeta-producto__imagen { position: relative; aspect-ratio: 1 / 1; overflow: hidden; } .tarjeta-producto__imagen img { width: 100%; height: 100%; object-fit: cover; } .tarjeta-producto__etiqueta { position: absolute; top: 12px; left: 12px; background: var(--color-naranja); color: white; font-weight: 700; font-size: 12px; padding: 5px 12px; border-radius: 999px; } .tarjeta-producto__info { padding: 16px; } .tarjeta-producto__nombre { font-weight: 600; font-size: 15px; margin-bottom: 6px; } .tarjeta-producto__detalle { font-size: 13px; color: var(--color-texto-suave); margin-bottom: 10px; } .tarjeta-producto__precio { font-family: var(--fuente-titulos); font-weight: 700; font-size: 17px; } /* Banners grandes de licencias (Marvel, Pokémon...) */ .grid-licencias { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; } .banner-licencia { border-radius: var(--radio-medio); padding: 32px; min-height: 140px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; color: white; } .banner-licencia__titulo { font-family: var(--fuente-titulos); font-weight: 700; font-size: 22px; } .banner-licencia__enlace { font-size: 14px; color: rgba(255, 255, 255, 0.85); } /* Franja PLAY4EVER */ .franja-play4ever { background: var(--color-oscuro); border-radius: 32px; padding: 48px 56px; display: flex; align-items: center; gap: 40px; overflow: hidden; color: white; } /* Sin esto el bloque de texto solo ocupa lo que mide su contenido y la imagen queda "flotando" con un hueco vacío a su derecha en pantallas anchas: al crecer con flex:1, empuja la imagen hasta el borde. */ .franja-play4ever__texto-bloque { flex: 1; } .franja-play4ever__etiqueta { font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-verde-neon); margin-bottom: 12px; } .franja-play4ever__titulo { font-family: var(--fuente-titulos); font-weight: 800; font-size: 36px; margin-bottom: 14px; } .franja-play4ever__texto { font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, 0.75); max-width: 420px; margin-bottom: 22px; } .franja-play4ever__imagen { flex: none; width: 220px; border-radius: 18px; overflow: hidden; } .boton--neon { background: var(--color-verde-neon); color: #143024; } /* Chips "Marcas de confianza" */ .lista-marcas { display: flex; gap: 12px; flex-wrap: wrap; } .chip-marca { padding: 13px 22px; border-radius: 14px; border: 1px solid var(--color-borde); background: var(--color-blanco); font-weight: 600; font-size: 15px; } /* Separación estándar entre secciones de la portada */ .seccion { padding-top: 56px; } /* -------------------- 5. PÁGINA "JUEGOS DE MESA" -------------------- */ .migas { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--color-texto-suave); padding-top: 20px; } .migas a { font-weight: 600; } .migas__actual { color: var(--color-texto); font-weight: 700; } .cabecera-categoria { background: #f2e9c9; border-radius: var(--radio-grande); padding: 40px 48px; margin-top: 16px; display: flex; align-items: center; gap: 36px; justify-content: space-between; } .cabecera-categoria__titulo { font-family: var(--fuente-titulos); font-weight: 800; font-size: 34px; margin-bottom: 8px; } .cabecera-categoria__texto { font-size: 16px; color: var(--color-texto-suave); max-width: 500px; } .cabecera-categoria__imagen { flex: none; width: 130px; border-radius: 16px; overflow: hidden; } .listado { display: flex; gap: 36px; align-items: flex-start; padding-top: 36px; padding-bottom: 64px; } /* Barra lateral de filtros */ .filtros { flex: none; width: 220px; display: flex; flex-direction: column; gap: 26px; } .filtros__grupo-titulo { font-weight: 700; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-texto-suave); margin-bottom: 12px; } .filtros__opciones { display: flex; flex-direction: column; gap: 10px; } .filtros__opcion { display: flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; } /* Resultados: cabecera con contador + orden, y la rejilla de productos */ .resultados { flex: 1; } .resultados__cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .resultados__contador { font-size: 14px; color: var(--color-texto-suave); } .selector-orden { padding: 9px 14px; border-radius: var(--radio-pequeno); border: 1px solid var(--color-borde); background: white; font-size: 14px; } /* -------------------- 6. PIE DE PÁGINA -------------------- */ .pie { margin-top: 80px; background: var(--color-oscuro); color: white; } .pie__columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 36px; padding: 48px 24px; } .pie__logo { font-family: var(--fuente-titulos); font-weight: 800; font-size: 22px; margin-bottom: 14px; } .pie__descripcion { font-size: 14px; color: rgba(255, 255, 255, 0.65); line-height: 1.6; } .pie__titulo-columna { font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 14px; } .pie__enlaces { display: flex; flex-direction: column; gap: 10px; } .pie__enlaces a { font-size: 14px; color: rgba(255, 255, 255, 0.75); } .pie__legal { border-top: 1px solid rgba(255, 255, 255, 0.15); padding: 18px 24px; text-align: center; font-size: 13px; color: rgba(255, 255, 255, 0.6); } /* -------------------- 7. RESPONSIVE -------------------- */ /* Tablets: ocultamos el buscador de la cabecera para dejar sitio al menú */ @media (max-width: 900px) { .buscador { display: none; } /* El hero y la franja PLAY4EVER llevan una imagen de ejemplo que en pantallas estrechas solo añade altura sin aportar información: la ocultamos y reducimos el título para que el banner no ocupe toda la pantalla. */ .hero { flex-direction: column; text-align: center; padding: 36px 28px; } .hero__titulo { font-size: 32px; } .hero__imagen { display: none; } .hero__botones { justify-content: center; } .franja-play4ever { flex-direction: column; text-align: center; padding: 36px 28px; } .franja-play4ever__titulo { font-size: 30px; } .franja-play4ever__imagen { display: none; } } /* Móviles: apilamos el listado de "Juegos de mesa" (filtros arriba, grid debajo) */ @media (max-width: 700px) { .barra-nav { flex-wrap: wrap; height: auto; padding: 12px 0; } .menu-principal { order: 3; width: 100%; flex-wrap: wrap; } .listado { flex-direction: column; } .filtros { width: 100%; } .cabecera-categoria { flex-direction: column; text-align: center; } /* El hero y la franja PLAY4EVER llevan una imagen de ejemplo que en móvil solo añade altura sin aportar información: la ocultamos y apretamos tamaños/espaciados para que el banner ocupe menos pantalla. */ .hero { padding: 28px 20px; margin-top: 16px; } .hero__etiqueta { margin-bottom: 12px; } .hero__titulo { font-size: 26px; margin-bottom: 12px; } .hero__descripcion { font-size: 14px; margin-bottom: 20px; } .hero__botones .boton { padding: 11px 20px; font-size: 14px; } .hero__imagen { display: none; } .franja-play4ever { padding: 28px 20px; } .franja-play4ever__titulo { font-size: 24px; margin-bottom: 10px; } .franja-play4ever__texto { font-size: 14px; margin-bottom: 18px; } .franja-play4ever__imagen { display: none; } }