/* ===================================================================== custom.css - Hoja de estilos personalizada de Marketing Strategies --------------------------------------------------------------------- Esta hoja se carga DESPUÉS de tailwind.css, por lo que sus reglas prevalecen sobre las utilidades de Tailwind. Aquí se centralizan todos los estilos a medida que vayan surgiendo en el proyecto. ===================================================================== */ /* --------------------------------------------------------------------- 1. Tipografías --------------------------------------------------------------------- */ /* Las fuentes se cargan vía Google Fonts en (header2.php). - Montserrat -> logo / marca - Poppins -> textos del footer y elementos a medida */ /* Poppins como fuente base de todo el sitio. Se hereda en párrafos, listas, enlaces, etiquetas, tablas, etc., manteniendo los tamaños y estilos definidos por Tailwind. Los encabezados (h1-h6) y el logo se excluyen más abajo. */ body, p, span, a, li, td, th, label, input, textarea, select, button, blockquote, small, strong, em, b, i, u, caption, code, pre, div { font-family: var(--ms-font-text); } /* Encabezados: ahora también usan Poppins, igual que el resto del sitio. */ h1, h2, h3, h4, h5, h6 { font-family: var(--ms-font-text); } /* El logo conserva Montserrat con prioridad máxima. */ .ms-logo, .ms-logo * { font-family: var(--ms-font-logo) !important; } :root { /* Paleta corporativa */ --ms-color-text: #62748e; /* texto base (Poppins) */ --ms-color-dark: #000000; /* "Marketing" del logo */ --ms-color-light: #62748e; /* "Strategies" del logo */ --ms-color-accent: #1e2939; /* hover / detalles */ --ms-border: #e5e7eb; /* separadores */ /* Tipografías */ --ms-font-logo: 'Montserrat', sans-serif; --ms-font-text: 'Poppins', sans-serif; } /* --------------------------------------------------------------------- 2. Logo tipográfico --------------------------------------------------------------------- */ .ms-logo { font-family: var(--ms-font-logo); line-height: 1; letter-spacing: -0.02em; user-select: none; text-decoration: none; display: inline-block; text-transform: uppercase; } .ms-logo__part--bold { font-weight: 800; color: var(--ms-color-dark); margin-right: 0; } .ms-logo__part--light { font-weight: 500; color: var(--ms-color-light); margin-left: 0; } .ms-logo__part--accent { font-weight: 500; color: #523def; margin-left: 0; } /* Tamaños responsive del logo */ .ms-logo--lg { font-size: 1.25rem; } /* 20px - footer */ .ms-logo--md { font-size: 1.125rem; } /* 18px */ .ms-logo--sm { font-size: 1rem; } /* 16px */ @media (max-width: 640px) { .ms-logo--lg { font-size: 1.125rem; } } /* --------------------------------------------------------------------- 3. Footer --------------------------------------------------------------------- */ .ms-footer { background-color: #ffffff; border-top: 1px solid var(--ms-border); font-family: var(--ms-font-text); color: var(--ms-color-text); padding: 2rem 1.5rem; } /* Contenedor principal: una fila en desktop, columnas en móvil */ .ms-footer__inner { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; } /* Bloques individuales del footer */ .ms-footer__brand, .ms-footer__legal, .ms-footer__social { display: flex; align-items: center; } .ms-footer__legal { flex-wrap: wrap; justify-content: center; gap: 1.5rem; } .ms-footer__social { gap: 0.75rem; } /* Enlaces del footer */ .ms-footer__link { font-family: var(--ms-font-text); font-size: 0.9rem; font-weight: 400; color: var(--ms-color-text); text-decoration: none; transition: color 0.2s ease; } .ms-footer__link:hover { color: var(--ms-color-accent); text-decoration: underline; } /* Iconos sociales */ .ms-footer__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px; border: 1px solid var(--ms-border); color: var(--ms-color-text); text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } .ms-footer__icon:hover { color: #ffffff; background-color: var(--ms-color-accent); border-color: var(--ms-color-accent); } .ms-footer__icon svg { width: 1rem; height: 1rem; } /* Copyright / texto legal secundario */ .ms-footer__copy { width: 100%; text-align: center; font-family: var(--ms-font-text); font-size: 0.8rem; color: var(--ms-color-text); margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--ms-border); } /* --------------------------------------------------------------------- 4. Responsive del footer --------------------------------------------------------------------- */ @media (max-width: 768px) { .ms-footer__inner { flex-direction: column; text-align: center; } .ms-footer__legal { gap: 1rem; } } /* --------------------------------------------------------------------- 5. Hero de la HOME --------------------------------------------------------------------- Basado en el diseño del diseñador: alineación izquierda, contraste de pesos (palabras clave gruesas + conectores finos) y fragmento destacado en color #523DEF (violeta corporativo). */ .ms-hero { text-align: left; font-family: var(--ms-font-text); } .ms-hero__title { font-family: var(--ms-font-text); color: var(--ms-color-dark); /* negro */ font-weight: 800; /* mismo grosor en todo el H1 */ line-height: 1.1; letter-spacing: -0.02em; } /* Fragmento destacado del H1: color violeta (mismo grosor que el resto) */ .ms-hero__highlight { color: #523def; font-weight: 800; } /* Subtítulo del hero: frase descriptiva bajo el H1 */ .ms-hero__subtitle { font-family: var(--ms-font-text); color: var(--ms-color-text); /* #62748e */ font-weight: 600; line-height: 1.3; letter-spacing: 0.01em; } .ms-hero__lead { color: var(--ms-color-text); /* #62748e */ font-weight: 300; } /* Tamaños responsive del hero */ .ms-hero__title { font-size: 1.875rem; /* 30px móvil */ } .ms-hero__subtitle { font-size: 1.125rem; /* 18px móvil */ } .ms-hero__lead { font-size: 1rem; /* 16px móvil */ } @media (min-width: 768px) { .ms-hero__title { font-size: 2.5rem; } /* 40px tablet */ .ms-hero__subtitle { font-size: 1.375rem; } /* 22px tablet */ .ms-hero__lead { font-size: 1.125rem; } /* 18px tablet */ } @media (min-width: 1024px) { .ms-hero__title { font-size: 3.25rem; } /* 52px desktop */ .ms-hero__subtitle { font-size: 1.5rem; } /* 24px desktop */ .ms-hero__lead { font-size: 1.25rem; } /* 20px desktop */ } /* --------------------------------------------------------------------- 6. Colores de fondo (sobrescritura de Tailwind) --------------------------------------------------------------------- Tailwind define --color-gray-50 en oklch (equivalente a #f9fafb). Aquí lo sobrescribimos para que bg-gray-50 use nuestro color #f7f9fa. Como custom.css se carga después de tailwind.css, esta regla prevalece y afecta al body, hover de tarjetas, bloques destacados, etc. */ :root, :host { --color-gray-50: #f7f9fa; } /* --------------------------------------------------------------------- 7. Ficha de negocio (negocio.php) --------------------------------------------------------------------- */ .ms-card { background-color: #ffffff; border-radius: 0.75rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); overflow: hidden; font-family: var(--ms-font-text); } /* Banner superior con la imagen */ .ms-card__banner { width: 100%; height: 280px; object-fit: cover; display: block; } /* Cabecera: bloque de texto (izq) + botones (der) en dos columnas */ .ms-card__header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1.5rem; padding: 2rem; } .ms-card__heading { flex: 1 1 320px; min-width: 0; } .ms-card__category { font-family: var(--ms-font-text); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: #523def; margin: 0 0 0.5rem 0; } .ms-card__title { font-family: var(--ms-font-text); font-weight: 700; color: #000000; font-size: 1.875rem; line-height: 1.2; margin: 0 0 0.5rem 0; } .ms-card__subtitle { font-family: var(--ms-font-text); font-weight: 400; color: var(--ms-color-text); font-size: 1rem; margin: 0 0 0.75rem 0; } .ms-card__rating { display: flex; align-items: center; gap: 0.5rem; color: var(--ms-color-text); font-size: 0.95rem; } .ms-card__rating .stars { color: #f5b301; } .ms-card__buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; flex-shrink: 0; } /* Botones de acción (ofuscados) */ .ms-btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--ms-font-text); font-weight: 500; font-size: 0.95rem; padding: 0.7rem 1.4rem; border-radius: 0.5rem; border: 1px solid transparent; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .ms-btn--primary { background-color: #523def; color: #ffffff; } .ms-btn--primary:hover { background-color: #3b2bb8; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(82, 61, 239, 0.3); } /* Botón secundario en estilo outline (fondo blanco con borde) */ .ms-btn--outline { background-color: #ffffff; color: #1e2939; border-color: #cbd5e1; } .ms-btn--outline:hover { background-color: #f1f5f9; border-color: #94a3b8; transform: translateY(-1px); } .ms-btn--secondary { background-color: #1e2939; color: #ffffff; } .ms-btn--secondary:hover { background-color: #111827; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } /* Bloques de contenido (descripción, servicios, mapa, horarios) */ .ms-card__body { padding: 2rem; } /* Grid de dos columnas: 66% principal / 33% lateral */ .ms-card__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; } .ms-card__main { min-width: 0; } .ms-card__aside { display: flex; flex-direction: column; gap: 1rem; min-width: 0; } .ms-card__section { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--ms-border); } .ms-card__section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .ms-card__section-title { font-family: var(--ms-font-text); font-weight: 700; color: #000000; font-size: 1rem; /* ~16px, más pequeño */ text-transform: uppercase; /* mayúsculas como en el diseño */ letter-spacing: 0.03em; margin: 0 0 1rem 0; } .ms-card__text { color: #475569; line-height: 1.7; font-size: 1rem; } /* Servicios como pills/tags con color de fondo */ .ms-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; } .ms-tags__pill { display: inline-block; font-family: var(--ms-font-text); font-size: 0.85rem; font-weight: 500; color: #3b2bb8; background-color: rgba(82, 61, 239, 0.1); padding: 0.35rem 0.85rem; border-radius: 9999px; line-height: 1.4; } /* Módulos independientes del lateral (dirección, contacto, horario, fiscal) */ .ms-box { background-color: #f8f9fb; border: 1px solid var(--ms-border); border-radius: 0.5rem; padding: 1.1rem 1.25rem; } .ms-box__title { font-family: var(--ms-font-text); font-weight: 700; color: #000000; font-size: 0.95rem; margin: 0 0 0.6rem 0; display: flex; align-items: center; gap: 0.5rem; } .ms-box__title i { color: #523def; } .ms-box__text { color: #475569; font-size: 0.9rem; line-height: 1.6; margin: 0 0 0.35rem 0; } .ms-box__text:last-child { margin-bottom: 0; } /* Mapa */ .ms-map { border-radius: 0.5rem; overflow: hidden; border: 1px solid var(--ms-border); } .ms-map iframe { width: 100%; height: 300px; border: 0; display: block; } /* Galería de fotos debajo de horarios */ .ms-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } .ms-gallery__img { width: 100%; height: 160px; object-fit: cover; border-radius: 0.5rem; display: block; transition: transform 0.2s ease; } .ms-gallery__img:hover { transform: scale(1.03); } /* --------------------------------------------------------------------- 8. Bloque "Cómo elaboramos la selección" (listados de negocios) --------------------------------------------------------------------- Caja envolvente con fondo violeta claro (#EDEBFD) y esquinas redondeadas. Se inserta entre la intro y el listado de negocios. */ .ms-selection { background-color: #EDEBFD; border-radius: 1rem; padding: 1.5rem 1.75rem; margin: 0 0 2rem 0; } /* Variante "About": bloque .ms-selection centrado y con ancho acotado, pensado para usarse en la página "Quiénes somos". */ .ms-selection--about { max-width: 48rem; margin-left: auto; margin-right: auto; } .ms-selection__title { font-family: var(--ms-font-text); font-weight: 700; color: #000000; font-size: 1.5rem; line-height: 1.3; margin: 0 0 0.75rem 0; } .ms-selection__text { font-family: var(--ms-font-text); color: #475569; font-size: 0.95rem; line-height: 1.7; margin: 0; } /* Variante apilada: una sola columna (una foto debajo de otra). Pensada para la galería en la columna lateral estrecha. */ .ms-gallery--stack { grid-template-columns: 1fr; gap: 0.75rem; } .ms-gallery--stack .ms-gallery__img { height: auto; aspect-ratio: 16 / 9; width: 100%; } /* --------------------------------------------------------------------- 7.1. Módulos del lateral (negocio.php): Datos de contacto y Horario --------------------------------------------------------------------- Réplica del diseño de la captura de referencia: - Cada módulo es una CARD INDEPENDIENTE (fondo blanco, sombra suave, borde-radius) y se separa del siguiente con un gap vertical. - Cabecera con icono violeta (#523def) + título en negro, negrita. - Horario en dos columnas (día | horas) con línea separadora entre filas. */ .ms-info-card { background-color: #ffffff; border: 1px solid var(--ms-border); border-radius: 0.75rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); padding: 1.25rem; font-family: var(--ms-font-text); } /* Cabecera del módulo: icono + título */ .ms-info-card__title { font-weight: 700; color: #000000; font-size: 0.95rem; margin: 0 0 1rem 0; display: flex; align-items: center; gap: 0.5rem; } .ms-info-card__title i { color: #523def; font-size: 1rem; } /* Filas de datos de contacto (dirección / teléfono / web) */ .ms-info-card__row { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.5rem 0; border-bottom: 1px solid var(--ms-border); } .ms-info-card__row:last-child { border-bottom: none; } .ms-info-card__row i { color: #523def; font-size: 0.9rem; margin-top: 0.15rem; flex-shrink: 0; width: 1rem; text-align: center; } .ms-info-card__row-label { color: #1e2939; font-weight: 600; font-size: 0.85rem; display: block; margin-bottom: 0.1rem; } .ms-info-card__row-value { color: #475569; font-size: 0.88rem; line-height: 1.5; word-break: break-word; } .ms-info-card__row-value a { color: #475569; text-decoration: none; transition: color 0.2s ease; } .ms-info-card__row-value a:hover { color: #523def; text-decoration: underline; } /* Lista de horarios en dos columnas (día | tramo horario) con separador */ .ms-schedule { list-style: none; margin: 0; padding: 0; } .ms-schedule__row { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); column-gap: 1rem; align-items: baseline; padding: 0.5rem 0; border-bottom: 1px solid var(--ms-border); } .ms-schedule__row:last-child { border-bottom: none; } .ms-schedule__day { color: #1e2939; font-weight: 600; font-size: 0.88rem; } .ms-schedule__time { color: #475569; font-size: 0.88rem; text-align: right; font-variant-numeric: tabular-nums; } /* Estado "cerrado" para un día sin atención */ .ms-schedule__time--closed { color: #94a3b8; font-style: italic; } /* Fallback: si el horario no se pudo parsear, se muestra como texto libre */ .ms-schedule__fallback { color: #475569; font-size: 0.9rem; line-height: 1.6; margin: 0; white-space: pre-line; } /* Responsive de la ficha */ @media (max-width: 768px) { .ms-card__header { padding: 1.25rem; } .ms-card__title { font-size: 1.5rem; } .ms-card__buttons { width: 100%; } .ms-btn { flex: 1; justify-content: center; } .ms-card__body, .ms-card__grid { padding: 1.25rem; gap: 1.5rem; } /* En móvil, las dos columnas se apilan */ .ms-card__grid { grid-template-columns: 1fr; } .ms-gallery { grid-template-columns: repeat(2, 1fr); } .ms-gallery__img { height: 140px; } /* La galería apilada (módulo lateral de Fotos) sigue en una sola columna en móvil, ignorando la regla general de 2 columnas. */ .ms-gallery--stack { grid-template-columns: 1fr; } .ms-gallery--stack .ms-gallery__img { height: auto; } .ms-card__banner { height: 200px; } /* En móvil, la columna de horas del horario se mantiene a la derecha pero con menos separación para no apretar demasiado. */ .ms-schedule { column-gap: 0.75rem; row-gap: 0.35rem; } } /* --------------------------------------------------------------------- 9. Firma del autor (listados de negocios) --------------------------------------------------------------------- Bloque que aparece al final del listado, antes de "¿Por qué elegir...". Card blanca con sombra, foto circular + nombre/rol/bio/enlaces. */ .ms-author { background-color: #ffffff; border: 1px solid var(--ms-border); border-radius: 0.75rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); padding: 1.5rem; margin: 0 0 3rem 0; font-family: var(--ms-font-text); } .ms-author__inner { display: flex; align-items: flex-start; gap: 1.25rem; } .ms-author__photo { flex-shrink: 0; width: 88px; height: 88px; border-radius: 9999px; object-fit: cover; border: 3px solid #EDEBFD; } .ms-author__body { min-width: 0; flex: 1; } .ms-author__label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #523def; margin: 0 0 0.25rem 0; } .ms-author__name { font-size: 1.15rem; font-weight: 800; color: #000000; line-height: 1.2; margin: 0 0 0.15rem 0; } .ms-author__role { font-size: 0.88rem; font-weight: 600; color: #1e2939; margin: 0 0 0.6rem 0; } .ms-author__bio { font-size: 0.9rem; line-height: 1.6; color: #475569; margin: 0 0 0.75rem 0; } .ms-author__links { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.82rem; } .ms-author__links a { color: #1e2939; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; transition: color 0.2s ease; } .ms-author__links a:hover { color: #523def; text-decoration: underline; } .ms-author__links i { color: #523def; font-size: 0.9rem; } /* Responsive: en móvil la foto se queda arriba pero más pequeña */ @media (max-width: 640px) { .ms-author { padding: 1.25rem; } .ms-author__photo { width: 64px; height: 64px; } } /* --------------------------------------------------------------------- 10. Hover unificado de botones --------------------------------------------------------------------- Todos los botones del proyecto cambian a fondo #EDEBFD (violeta claro) al pasar el ratón por encima, independientemente de su color base. Esta regla se carga en custom.css (después de tailwind.css), por lo que prevalece sobre los hovers definidos en otras hojas. */ .mi-elemento:hover, .mi-elemento-content:hover, .ms-btn:hover, .ms-btn--primary:hover, .ms-btn--outline:hover, .ms-btn--secondary:hover, .btn-primary:hover, .btn-outline:hover, .cta-section .btn-outline:hover, .search-btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover, a[class*="btn"]:hover { background-color: #edebfd !important; color: #1e2939 !important; } /* Mantener el efecto de elevación que tenían algunos botones (.mi-elemento), pero sin el fondo oscuro original. */ .mi-elemento:hover, .mi-elemento-content:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } /* --------------------------------------------------------------------- 11. Página "Quiénes somos" (nosotros.php) --------------------------------------------------------------------- */ /* Tarjeta de valor/beneficio (icono + título + texto) */ .ms-value { background-color: #ffffff; border: 1px solid var(--ms-border); border-radius: 0.75rem; padding: 1.5rem; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); transition: transform 0.2s ease, box-shadow 0.2s ease; height: 100%; } .ms-value:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08); } .ms-value__icon { width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem; border-radius: 9999px; background-color: rgba(82, 61, 239, 0.1); color: #523def; display: flex; align-items: center; justify-content: center; } .ms-value__icon i { font-size: 1.25rem; } .ms-value__title { font-weight: 700; color: #000000; font-size: 1.05rem; margin: 0 0 0.5rem 0; } .ms-value__text { color: #475569; font-size: 0.9rem; line-height: 1.6; margin: 0; } /* Encabezado de sección reutilizable (H2 + subtítulo centrados) */ .ms-section-head { text-align: center; max-width: 48rem; margin: 0 auto 2.5rem; } .ms-section-head__title { font-weight: 800; color: #000000; font-size: 1.875rem; line-height: 1.2; margin: 0 0 0.75rem 0; } .ms-section-head__text { color: var(--ms-color-text); font-size: 1rem; line-height: 1.6; margin: 0; } /* Bloque "Explora el directorio" (enlaces a ciudades/categoría) */ .ms-explore { background-color: #f8f9fb; border: 1px solid var(--ms-border); border-radius: 0.75rem; padding: 2rem; text-align: center; } .ms-explore__links { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.25rem; } .ms-explore__link { display: inline-flex; align-items: center; gap: 0.5rem; background-color: #ffffff; border: 1px solid var(--ms-border); border-radius: 0.5rem; padding: 0.7rem 1.2rem; color: #1e2939; font-weight: 600; font-size: 0.92rem; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .ms-explore__link:hover { background-color: #edebfd; border-color: #523def; color: #523def; } .ms-explore__link i { color: #523def; } /* Responsive de la página Quiénes somos */ @media (max-width: 640px) { .ms-section-head__title { font-size: 1.5rem; } .ms-explore { padding: 1.5rem; } } /* --------------------------------------------------------------------- 12. Ranking de criterios de selección (barras animadas) --------------------------------------------------------------------- Card contenedora + filas con % / etiqueta / barra de progreso. La animación de relleno se dispara vía IntersectionObserver al entrar en viewport (ver js/main.js). */ .ms-ranking { background-color: #ffffff; border: 1px solid var(--ms-border); border-radius: 0.75rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); padding: 2rem; max-width: 48rem; margin: 0 auto; } .ms-ranking__intro { color: #475569; font-size: 0.95rem; line-height: 1.7; margin: 0 0 1.75rem 0; } .ms-ranking__intro strong { color: #1e2939; } .ms-ranking__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; } .ms-ranking__row { margin: 0; padding: 0; } /* Cabecera de cada criterio: % a la izquierda + etiqueta */ .ms-ranking__head { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.4rem; } .ms-ranking__pct { font-weight: 800; color: #523def; font-size: 1.05rem; min-width: 3rem; font-variant-numeric: tabular-nums; } .ms-ranking__label { color: #1e2939; font-weight: 600; font-size: 0.95rem; } /* Pista de la barra (fondo gris claro) */ .ms-ranking__track { background-color: #f1f5f9; border-radius: 9999px; height: 0.6rem; overflow: hidden; } /* Relleno de la barra (gradiente violeta). Por defecto ancho 0; el JS le aplica el ancho final (en %) cuando entra en viewport. */ .ms-ranking__bar { display: block; height: 100%; width: 0; border-radius: 9999px; background: linear-gradient(90deg, #523def 0%, #8b7df5 100%); transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1); } /* Responsive: en móvil reduce el padding y el tamaño de fuentes */ @media (max-width: 640px) { .ms-ranking { padding: 1.5rem; } .ms-ranking__pct { font-size: 0.95rem; min-width: 2.5rem; } .ms-ranking__label { font-size: 0.88rem; } }