/* ========================================================================== MineraCatch — Sistema de diseño Paleta minera (ocre/tierra/roca) · mobile-first · componentes reutilizables ========================================================================== */ :root { /* Marca — el dorado es la identidad de MineraCatch: se mantiene igual en modo claro y oscuro (ver [data-tema="oscuro"] más abajo). */ --mm-ochre: #e0a526; --mm-ochre-600: #c8901a; --mm-ochre-700: #a8790f; --mm-ochre-050: #fdf6e6; --mm-ochre-light: #eab73c; --mm-ochre-rgb: 224, 165, 38; --mm-ochre-600-rgb: 200, 144, 26; --mm-ochre-border: #f0e2c2; /* Variante de --mm-ochre-700 pensada para TEXTO (links, precio, chips) en vez de fondos — en modo oscuro se aclara para mantener contraste legible; --mm-ochre-700 en sí no se toca porque también se usa como FONDO (ej. #ast-scroll-top) y aclararlo ahí rompería ese botón. */ --mm-ochre-ink: var(--mm-ochre-700); --mm-dark: #211d1a; --mm-dark-800: #2e2823; --mm-earth: #6b4a3a; --mm-cream: #f6f2ea; /* Fondo — separado en "página" y "tarjeta/panel elevado" a propósito: en modo claro son casi iguales (ambos blancos), pero en modo oscuro necesitan valores DISTINTOS para que las tarjetas se noten sobre el fondo en vez de fundirse con él. */ --mm-bg: #ffffff; --mm-bg-elevado: #ffffff; /* Alias de compatibilidad: todo el código nuevo usa --mm-bg/--mm-bg-elevado directamente, pero se deja --mm-surface apuntando a --mm-bg-elevado por si algún selector todavía no migrado la referencia. */ --mm-surface: var(--mm-bg-elevado); --mm-surface-2: #faf7f1; /* Fondo fijo detrás de logos subidos por usuarios (empresas, etc.): se mantiene claro en ambos modos a propósito — la mayoría de los logos están pensados para verse sobre fondo claro. */ --mm-logo-bg: #ffffff; /* Texto y bordes */ --mm-ink: #201c19; --mm-body: #4f463f; --mm-muted: #8a7f74; --mm-line: #e7ded1; --mm-line-strong: #d7cbb9; /* Estados (mensajes/badges) — color de texto/ícono + su propio par de fondo/borde clarito, que en modo claro es un pastel y en oscuro necesita ser un tono oscuro tintado en vez de un pastel suelto. */ --mm-error: #b3261e; --mm-error-bg: #fbeceb; --mm-error-border: #f2ccc9; --mm-success: #2e7d32; --mm-success-bg: #eaf5ea; --mm-success-border: #cbe6cb; --mm-verif-text: #1666c2; --mm-verif-bg: #e7f3ff; --mm-verif-border: #bcdcff; /* Marca de terceros (WhatsApp) — no cambia con el tema, es la marca de otro producto. */ --mm-whatsapp: #25d366; --mm-whatsapp-hover: #1ebe5b; /* Texto sobre secciones SIEMPRE oscuras (CTA final, hero de Empleabilidad/Asesorías, tarjetas de cotizaciones) — estas secciones ya son oscuras en modo claro, así que su texto claro no cambia con el tema del sitio. */ --mm-cta-texto: #d8cfc4; --mm-emp-hero-texto: #e6ded3; --mm-cotiz-sub-texto: #cbb89a; /* Elevación — rgb en variable aparte para poder reusar el mismo alpha con un color de sombra distinto en modo oscuro. */ --mm-shadow-rgb: 33, 29, 26; --mm-shadow-sm: 0 1px 2px rgba(var(--mm-shadow-rgb), 0.06), 0 1px 3px rgba(var(--mm-shadow-rgb), 0.10); --mm-shadow-md: 0 4px 12px rgba(var(--mm-shadow-rgb), 0.10), 0 2px 4px rgba(var(--mm-shadow-rgb), 0.06); --mm-shadow-lg: 0 12px 28px rgba(var(--mm-shadow-rgb), 0.14), 0 6px 12px rgba(var(--mm-shadow-rgb), 0.08); --mm-shadow-ochre: 0 6px 18px rgba(var(--mm-ochre-600-rgb), 0.35); /* Forma y ritmo */ --mm-radius: 12px; --mm-radius-lg: 18px; --mm-radius-pill: 999px; --mm-ease: 180ms cubic-bezier(0.4, 0, 0.2, 1); } /* ========================================================================== Modo oscuro — activado poniendo data-tema="oscuro" en (ver MM_Pages::script_anti_flash_tema para el script que evita el flash de tema claro, y assets/js/mm-tema.js para el selector sol/luna del menú). Solo se sobreescriben acá las variables que realmente necesitan cambiar: el dorado de marca (--mm-ochre*), los tonos "siempre oscuros" (--mm-dark*, --mm-earth, --mm-cta-texto, etc.) y --mm-logo-bg quedan igual a propósito. Contraste de chips/badges dorados (--mm-ochre-700 sobre --mm-ochre-050) se revisa en detalle en la Fase 3 (puntos conflictivos), no acá. ========================================================================== */ [data-tema="oscuro"] { /* Fondo: página más oscura que las tarjetas/paneles elevados, para que se note la separación (al revés que en modo claro, donde ambas son blancas). */ --mm-bg: #121212; --mm-bg-elevado: #1e1a17; --mm-surface-2: #241f1a; /* Texto: nunca blanco/negro puro, para que no sea tan agresivo. */ --mm-ink: #ece7e0; --mm-body: #cbc0b2; --mm-muted: #9c9084; --mm-line: #3a332c; --mm-line-strong: #4a4239; /* Fondo pastel de chips (ej. zona) pasa a un dorado tintado oscuro en vez de un pastel clarito, que se vería "quemado" sobre fondo oscuro. */ --mm-ochre-050: #2b2410; --mm-ochre-border: #4a3d1f; /* --mm-ochre-700 (#a8790f) sobre el fondo oscuro de página/tarjeta no llega a 4.5:1 — se aclara acá SOLO la variante de texto, no el dorado de marca en sí (ver comentario junto a --mm-ochre-ink en :root). */ --mm-ochre-ink: #d9ac4e; /* Mensajes/badges: mismo criterio, fondo pastel → tinte oscuro, y el color de texto/ícono se aclara un poco para mantener buen contraste. */ --mm-error: #ff6b60; --mm-error-bg: #3a1f1c; --mm-error-border: #5c2e29; --mm-success: #6fcf73; --mm-success-bg: #1c2e1c; --mm-success-border: #2e4a2e; --mm-verif-text: #7ab8ff; --mm-verif-bg: #16283d; --mm-verif-border: #274363; /* El header/menú y otras zonas del tema Astra (footer, breadcrumbs, etc.) no usan variables --mm-*, usan las propias de Astra. Sobreescribirlas acá hace que ese "chrome" del tema (barra de header blanca, texto de menú, footer) siga el modo oscuro sin tener que perseguir cada selector interno de Astra uno por uno. */ --ast-global-color-2: var(--mm-ink); --ast-global-color-3: var(--mm-body); --ast-global-color-4: var(--mm-bg-elevado); --ast-global-color-5: var(--mm-bg); --ast-global-color-6: var(--mm-ink); --ast-global-color-7: var(--mm-line); /* --mm-earth (marrón tierra) se usa como TEXTO en pills/chips/botón fantasma sobre fondo transparente — en modo claro tiene contraste de sobra, pero en oscuro (#6b4a3a sobre ~#1e1a17) queda casi invisible. Se aclara acá; no se usa como fondo en ningún lado así que es seguro tocarlo globalmente (a diferencia de --mm-ochre-700). */ --mm-earth: #c9a084; } /* Ítems de texto del menú ("Trabajos", "Reclutá Talento", "Sobre Nosotros", "Crear perfil"): heredan --ast-global-color-3 (mapeado arriba a --mm-body, un gris cálido) y se leían grisáceos sobre el header oscuro. Blanco roto fijo, puntual para el menú. :not(.mm-btn-primary) para no pisar el color de los botones dorados del menú (Iniciar Sesión / Asesorías), que ya tienen su propia regla de contraste. */ [data-tema="oscuro"] .main-header-menu .menu-item > .menu-link:not(.mm-btn-primary), [data-tema="oscuro"] #ast-hf-mobile-menu .menu-item > .menu-link:not(.mm-btn-primary) { color: #f2f2f2; } /* Toggle de tema (🌙/☀️) y buscador (🔍) en el menú (2026-07-26): en desktop, con TODOS los ítems de texto + el botón dorado, el renglón del menú (#ast-hf-menu-1, flex-wrap:wrap) llega ~3px corto para el toggle, que al ser el ÚLTIMO ítem del DOM es el que salta solo a un segundo renglón, lejos del buscador — de ahí el efecto "tocado con pinza", desconectado del resto. Causa real: falta de espacio horizontal, no un bug de posición. Se resuelve angostando el padding heredado de Astra (0 10px) SOLO en estos dos ítems-ícono (no tienen texto, no lo necesitan) para liberar los px que faltan, y se reordena con `order` para que el toggle quede a la izquierda del buscador como se pidió. Ambas imágenes .emoji (ver conversion cliente de WordPress) ya miden 16-18px, tamaño correcto — no hace falta tocar eso acá. */ @media (min-width: 921px) { .main-header-menu .menu-item.mm-tema-toggle { order: 8; } .main-header-menu .menu-item.mm-buscador-toggle { order: 9; } .main-header-menu .menu-item.mm-tema-toggle > .menu-link, .main-header-menu .menu-item.mm-buscador-toggle > .menu-link { padding-left: 0.4rem; padding-right: 0.4rem; } } /* Toggle de tema + buscador en el menu HAMBURGUESA (mobile, <921px, 2026-07-26): la regla anterior solo reordenaba estos dos items en desktop; en el menu apilado de Astra (".stack-on-mobile li{width:100%}" sobre un contenedor display:flex;flex-wrap:wrap, NO flex-direction:column) cada item de texto ocupa su propia fila completa y el toggle terminaba como el ULTIMO
  • de la lista, aislado despues del boton "Asesorias Personalizadas" -- el mismo efecto "descolgado" reportado, ahora por orden natural del DOM en vez de position:absolute. Fix: se les saca el width:100% heredado (mismo truco de order que en desktop, que aca tambien funciona porque el contenedor sigue siendo flex-row+wrap) para que compartan una sola fila final en vez de dos filas sueltas de un solo icono cada una. */ @media (max-width: 920.98px) { #ast-hf-mobile-menu .menu-item.mm-tema-toggle, #ast-hf-mobile-menu .menu-item.mm-buscador-toggle { width: auto; flex: 0 0 auto; order: 20; } #ast-hf-mobile-menu .menu-item.mm-buscador-toggle { order: 21; } #ast-hf-mobile-menu .menu-item.mm-tema-toggle > .menu-link, #ast-hf-mobile-menu .menu-item.mm-buscador-toggle > .menu-link { padding: 0.7rem 1rem; } } /* 2026-07-31: logo reducido a solo el ícono (mineramatch-icono-96/192.png, dorado sobre transparente). Antes había acá un chip de fondo claro fijo y un segundo superpuesto que se alternaba por opacity entre logo claro/oscuro — hacía falta porque el logo viejo tenía una mitad con relleno negro que desaparecía sobre header oscuro, y el archivo en sí tenía fondo blanco opaco (no transparente de verdad). El ícono nuevo es dorado puro sobre transparencia real y se ve bien en los dos modos (verificado), así que ya no hace falta nada de eso: un solo archivo, sin chip, sin swap. .site-logo-img NO es nuestro — es el que arma Astra (tema padre) alrededor del logo, con su propio fondo blanco y padding por defecto. Antes quedaba disimulado porque el PNG viejo también era blanco opaco; con el ícono transparente nuevo, ese fondo de Astra queda expuesto — se neutraliza acá sin tocar el tema padre. El tamaño real se controla en el (ver MM_Pages::agregar_srcset_logo), no en este wrapper. */ .site-logo-img { background: transparent !important; padding: 0 !important; } img.custom-logo { width: 76px !important; height: 76px !important; object-fit: contain; } /* Punto conflictivo 2 (cotizaciones): estas tarjetas ya son oscuras a propósito en modo claro (ver --mm-cotiz-sub-texto); en modo oscuro su borde dorado semitransparente se nota demasiado poco contra la página, que ahora también es oscura. Se sube la opacidad del borde solamente. */ [data-tema="oscuro"] .mm-cotiz-card { border-color: rgba(var(--mm-ochre-rgb), 0.45); } [data-tema="oscuro"] .mm-cotiz-oro { border-color: rgba(var(--mm-ochre-rgb), 0.8); } /* Punto conflictivo 3 (mapa Leaflet/OSM): las teselas del mapa son siempre claras (tercero, no se puede tokenizar) — se les pone un marco para que se lean como una "ventana" intencional en vez de un rectángulo roto. Grosor de borde FIJO en los dos modos (transparente en claro): agregar el borde solo en oscuro hacía que el mapa "creciera" 6px al alternar tema. */ .mm-oferta-mapa { box-sizing: border-box; border: 3px solid transparent; } [data-tema="oscuro"] .mm-oferta-mapa { border-color: var(--mm-line-strong); } /* Punto conflictivo 4 (feed de Instagram): Smash Balloon no hereda variables --mm-*, así que su contenido (fotos, botón "Seguir") queda igual en los dos modos — es un tercero, no se puede tokenizar. El CONTENEDOR sí es nuestro y usa --mm-bg-elevado (superficie elevada oscura en modo oscuro, como cualquier otra tarjeta del sitio) en vez de quedar claro fijo. Padding/borde FIJOS en los dos modos (transparente en claro) por el mismo motivo que el mapa — antes solo existían en oscuro y el bloque cambiaba de tamaño al alternar tema. */ .mm-redes { padding: 1.5rem; border: 1px solid transparent; border-radius: var(--mm-radius-lg); background: transparent; } [data-tema="oscuro"] .mm-redes { background: var(--mm-bg-elevado); border-color: var(--mm-line); } /* El h2 ("Seguinos en Instagram") es texto propio del plugin, no de Smash Balloon: no necesita override acá — ya usa --mm-ink vía la regla general ".mm-redes h2, .mm-planes h2" más abajo, que se aclara solo en modo oscuro porque el fondo del contenedor (arriba) también es oscuro ahí. */ /* El logo ya trae el nombre de marca dibujado; ocultamos el texto duplicado que Astra agrega automáticamente al completar el título del sitio (SEO). */ .ast-site-title-wrap .site-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } body.page { background: var(--mm-bg); color: var(--mm-ink); transition: background-color 200ms ease, color 200ms ease; } /* ---- Navegación (polish sobre el tema Astra) ---- */ .main-header-menu .menu-link { position: relative; font-weight: 600; transition: color var(--mm-ease); } .main-header-menu .menu-item > .menu-link::after { content: ""; position: absolute; left: 0.9em; right: 0.9em; bottom: 0.35em; height: 2px; background: var(--mm-ochre); border-radius: 2px; transform: scaleX(0); transform-origin: left center; transition: transform var(--mm-ease); } .main-header-menu .menu-item:hover > .menu-link::after, .main-header-menu .current-menu-item > .menu-link::after { transform: scaleX(1); } /* ========================================================================== Botones ========================================================================== */ .mm-btn-primary, .mm-btn-secondary, .mm-btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.8rem 1.4rem; font-family: inherit; font-size: 1rem; font-weight: 700; line-height: 1.1; text-align: center; text-decoration: none; border-radius: var(--mm-radius); border: 2px solid transparent; cursor: pointer; box-sizing: border-box; transition: transform var(--mm-ease), box-shadow var(--mm-ease), background-color var(--mm-ease), border-color var(--mm-ease), color var(--mm-ease); } .mm-btn-primary:focus-visible, .mm-btn-secondary:focus-visible, .mm-btn-ghost:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--mm-ochre-050), 0 0 0 5px var(--mm-ochre-600); } /* Primario (acción principal) */ .mm-btn-primary { color: var(--mm-dark); background: linear-gradient(180deg, var(--mm-ochre-light) 0%, var(--mm-ochre) 55%, var(--mm-ochre-600) 100%); box-shadow: var(--mm-shadow-sm); } .mm-btn-primary:hover { background: linear-gradient(180deg, var(--mm-ochre) 0%, var(--mm-ochre-600) 100%); box-shadow: var(--mm-shadow-ochre); transform: translateY(-2px); color: var(--mm-dark); } /* Texto sobre el dorado de marca en modo oscuro: el dorado NO se oscurece (--mm-ochre/--mm-ochre-600 quedan exactamente igual que en claro), solo cambia el color del texto. #1A1207 sobre el dorado de marca da entre 6.58:1 y 10:1 de contraste según el punto del degradado (verificado con la fórmula WCAG), muy por encima del mínimo 4.5:1 (AA) e incluso de 7:1 (AAA) en la mayor parte del botón. Aplica a TODOS los botones .mm-btn-primary (Iniciar Sesión, Asesorías Personalizadas, Buscar, Busco trabajo, Ver todas las ofertas, Ver todos los talentos, etc.) porque todos comparten esta clase; los botones del MENÚ (Iniciar Sesión / Asesorías Personalizadas) necesitan además un override de mayor especificidad para ganarle a Astra — ver astra-child/style.css. */ [data-tema="oscuro"] { --mm-texto-sobre-dorado: #1A1207; } [data-tema="oscuro"] .mm-btn-primary, [data-tema="oscuro"] .mm-btn-primary:hover { color: var(--mm-texto-sobre-dorado); } .mm-btn-primary:active { transform: translateY(0); box-shadow: var(--mm-shadow-sm); } /* Secundario (oscuro) */ .mm-btn-secondary { color: var(--mm-cream); background: var(--mm-dark); border-color: var(--mm-dark); box-shadow: var(--mm-shadow-sm); } .mm-btn-secondary:hover { background: var(--mm-dark-800); color: #fff; transform: translateY(-2px); box-shadow: var(--mm-shadow-md); } .mm-btn-secondary:active { transform: translateY(0); } /* Fantasma (terciario) */ .mm-btn-ghost { color: var(--mm-earth); background: transparent; border-color: var(--mm-line-strong); } .mm-btn-ghost:hover { border-color: var(--mm-earth); background: var(--mm-surface-2); color: var(--mm-earth); } /* Botones de formulario: ancho completo, pero SOLO dentro de .mm-form. Fuera de un formulario (filtros, toolbar del CV, chat) el botón mantiene su ancho natural para no quedar desproporcionado. */ .mm-form button.mm-btn-primary, .mm-form button.mm-btn-secondary { width: 100%; } .mm-btn-lg { padding: 1rem 1.9rem; font-size: 1.05rem; } /* ========================================================================== Formularios ========================================================================== */ .mm-form label { display: block; margin-bottom: 1.1rem; font-weight: 600; color: var(--mm-ink); font-size: 0.95rem; } .mm-form-hint { margin: -0.6rem 0 1.1rem; color: var(--mm-muted); font-size: 0.85rem; font-weight: 400; line-height: 1.4; } .mm-form input, .mm-form select, .mm-form textarea { display: block; width: 100%; margin-top: 0.4rem; padding: 0.8rem 0.9rem; font-size: 1rem; font-family: inherit; color: var(--mm-ink); background: var(--mm-bg-elevado); border: 1.5px solid var(--mm-line-strong); border-radius: 10px; box-sizing: border-box; transition: border-color var(--mm-ease), box-shadow var(--mm-ease); } .mm-form input:focus, .mm-form select:focus, .mm-form textarea:focus { outline: none; border-color: var(--mm-ochre); box-shadow: 0 0 0 3px var(--mm-ochre-050); } /* En modo oscuro --mm-ochre-050 pasa a ser un dorado tinte OSCURO (fondo de chips), así que como halo de foco quedaría invisible — acá se usa un dorado semitransparente en su lugar, que sí se nota sobre fondo oscuro. */ [data-tema="oscuro"] .mm-form input:focus, [data-tema="oscuro"] .mm-form select:focus, [data-tema="oscuro"] .mm-form textarea:focus { box-shadow: 0 0 0 3px rgba(var(--mm-ochre-rgb), 0.35); } .mm-form input[type="file"] { padding: 0.5rem 0; border: none; box-shadow: none; } .mm-form fieldset { border: 1.5px solid var(--mm-line); border-radius: 12px; padding: 1rem 1.1rem; margin: 0 0 1.1rem; } .mm-form fieldset legend { font-weight: 700; color: var(--mm-ink); padding: 0 0.45rem; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.03em; } .mm-form label.mm-check { display: flex; align-items: center; gap: 0.6rem; font-weight: 500; margin-bottom: 0.55rem; cursor: pointer; } .mm-form label.mm-check input { width: auto; margin-top: 0; accent-color: var(--mm-ochre-600); } .mm-mensaje-ok { color: var(--mm-success); font-weight: 600; background: var(--mm-success-bg); border: 1px solid var(--mm-success-border); border-radius: 10px; padding: 0.7rem 1rem; } .mm-error { color: var(--mm-error); font-weight: 600; background: var(--mm-error-bg); border: 1px solid var(--mm-error-border); border-radius: 10px; padding: 0.7rem 1rem; } /* Cartel único de aviso de estado (dueño/admin), ver MM_Estado::render_cartel(). */ .mm-cartel-estado { color: var(--mm-error); background: var(--mm-error-bg); border: 1px solid var(--mm-error-border); border-radius: 10px; padding: 1rem 1.15rem; margin-bottom: 1.25rem; } .mm-cartel-motivo { margin: 0 0 0.85rem; font-weight: 600; } .mm-cartel-acciones { display: flex; gap: 0.6rem; flex-wrap: wrap; } /* ========================================================================== Tarjetas de autenticación / onboarding ========================================================================== */ .mm-auth-card, .mm-onboarding { max-width: 440px; margin: 3rem auto; padding: 2rem 1.75rem; background: var(--mm-bg-elevado); border: 1px solid var(--mm-line); border-radius: var(--mm-radius-lg); box-shadow: var(--mm-shadow-lg); } .mm-onboarding { max-width: 680px; } .mm-auth-card > p:last-child { text-align: center; color: var(--mm-body); margin-top: 1.25rem; } .mm-auth-links { text-align: center; margin-top: 0.85rem; font-size: 0.9rem; } .mm-auth-card a, .mm-landing a:not(.mm-btn-primary):not(.mm-btn-secondary):not(.mm-btn-ghost) { color: var(--mm-ochre-ink); font-weight: 600; } .mm-rol-badge { text-align: center; color: var(--mm-earth); background: var(--mm-ochre-050); border: 1px solid var(--mm-ochre-border); border-radius: 10px; padding: 0.6rem 1rem; margin-bottom: 1.25rem; } /* Login social */ .mm-social-login { margin: 1.25rem 0 0.5rem; text-align: center; } .mm-social-divider { display: flex; align-items: center; gap: 0.85rem; margin: 1.5rem 0 1.25rem; color: var(--mm-muted); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; } .mm-social-divider::before, .mm-social-divider::after { content: ""; flex: 1; height: 1px; background: var(--mm-line); } .mm-onboarding h2 { color: var(--mm-ink); text-align: center; margin-bottom: 1.75rem; } .mm-onboarding-form { display: flex; flex-direction: column; gap: 1rem; } .mm-role-card { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.5rem; text-align: left; background: var(--mm-bg-elevado); border: 2px solid var(--mm-line-strong); border-radius: var(--mm-radius); cursor: pointer; transition: transform var(--mm-ease), border-color var(--mm-ease), box-shadow var(--mm-ease), background-color var(--mm-ease); } .mm-role-card strong { font-size: 1.15rem; color: var(--mm-ink); } .mm-role-card span { color: var(--mm-body); } .mm-role-card:hover, .mm-role-card:focus-visible { border-color: var(--mm-ochre); background: var(--mm-ochre-050); box-shadow: var(--mm-shadow-md); transform: translateY(-2px); outline: none; } /* ========================================================================== Layout general de secciones ========================================================================== */ .mm-hero, .mm-steps, .mm-rubros, .mm-cta-final, .mm-landing, .mm-redes, .mm-planes { max-width: 1120px; margin: 0 auto; padding: 3rem 1.25rem; } /* Franja compacta de "Rubros que cubrimos" (2026-07-26): mudada justo debajo de "¿Cómo funciona?" (ver render_home en class-mm-pages.php), entre dos secciones que ya traen su propio padding de 3rem — acá no hace falta otro tanto de aire, con esto queda como una línea de chips liviana en vez de un bloque de sección completo. */ .mm-rubros-compacta { padding-top: 1.25rem; padding-bottom: 1.25rem; } .mm-rubros-compacta h2 { margin-bottom: 1rem; font-size: 1.15rem; } /* Hero */ .mm-hero { display: flex; flex-direction: column-reverse; gap: 2.25rem; align-items: center; text-align: center; } .mm-hero-text h1 { font-size: clamp(2rem, 6vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--mm-ink); margin-bottom: 1rem; font-weight: 800; } .mm-hero-text p { font-size: 1.15rem; color: var(--mm-body); margin-bottom: 1.75rem; max-width: 34ch; margin-left: auto; margin-right: auto; } .mm-hero-image { position: relative; width: 100%; } .mm-hero-image img { width: 100%; max-width: 520px; height: auto; border-radius: var(--mm-radius-lg); box-shadow: var(--mm-shadow-lg); } /* Auspicio del hero (2026-07-23): swap por JS de la foto default cuando hay un proveedor pagando por el lugar — ver MM_Proveedores::get_hero_activo() y cargarHeroAuspiciado() en mm-vitrina.js. El link envuelve la imagen entera; el badge es la única señal de que es contenido patrocinado. */ .mm-hero-auspicio-link { position: relative; display: inline-block; width: 100%; } .mm-hero-auspicio-badge { position: absolute; left: 0.9rem; bottom: 0.9rem; padding: 0.3rem 0.75rem; border-radius: var(--mm-radius-pill); background: var(--mm-bg-elevado); color: var(--mm-ink); font-size: 0.78rem; font-weight: 700; box-shadow: var(--mm-shadow-sm); } .mm-hero-ctas { display: flex; flex-direction: column; flex-wrap: wrap; gap: 0.9rem; } /* Pasos */ .mm-steps h2, .mm-rubros h2, .mm-cta-final h2, .mm-redes h2, .mm-planes h2 { text-align: center; color: var(--mm-ink); font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 800; letter-spacing: -0.01em; margin-bottom: 2rem; } .mm-steps-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } .mm-step { background: var(--mm-bg-elevado); border: 1px solid var(--mm-line); border-radius: var(--mm-radius-lg); padding: 1.75rem 1.5rem; text-align: center; box-shadow: var(--mm-shadow-sm); transition: transform var(--mm-ease), box-shadow var(--mm-ease); } .mm-step:hover { transform: translateY(-3px); box-shadow: var(--mm-shadow-md); } .mm-step-num { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; margin-bottom: 1rem; background: linear-gradient(180deg, var(--mm-ochre-light), var(--mm-ochre-600)); color: var(--mm-dark); font-weight: 800; font-size: 1.1rem; border-radius: 50%; box-shadow: var(--mm-shadow-ochre); } .mm-step h3 { color: var(--mm-ink); margin-bottom: 0.5rem; font-size: 1.15rem; } .mm-step p { color: var(--mm-body); } /* Pills / rubros */ .mm-pills { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; } .mm-pill { padding: 0.5rem 1.05rem; background: var(--mm-bg-elevado); border: 1.5px solid var(--mm-line-strong); border-radius: var(--mm-radius-pill); color: var(--mm-earth); font-size: 0.9rem; font-weight: 600; transition: border-color var(--mm-ease), background-color var(--mm-ease), color var(--mm-ease); } .mm-pill:hover { border-color: var(--mm-ochre); background: var(--mm-ochre-050); color: var(--mm-ochre-ink); } /* CTA final */ .mm-cta-final { text-align: center; background: radial-gradient(120% 120% at 50% 0%, #2e2823 0%, var(--mm-dark) 60%); border-radius: var(--mm-radius-lg); color: #fff; padding: 3rem 1.5rem; max-width: 1120px; } .mm-cta-final h2 { color: #fff; } .mm-cta-final .mm-hero-ctas { max-width: 420px; margin: 0 auto; /* .mm-hero-ctas de base no trae justify-content (en el hero de arriba no hace falta, ese bloque es asimétrico a propósito); en fila (desde el breakpoint desktop, ver @media más abajo) sin esto los botones quedan pegados a la izquierda DENTRO de esta caja ya centrada, en vez de centrados junto con el título. */ justify-content: center; } /* Landing genérico */ .mm-landing h1 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); color: var(--mm-ink); margin-bottom: 1rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; } .mm-landing h2 { color: var(--mm-ink); margin: 1.75rem 0 1rem; font-weight: 700; } .mm-landing p { color: var(--mm-body); font-size: 1.08rem; margin-bottom: 1rem; line-height: 1.6; } .mm-landing .mm-pills { justify-content: flex-start; margin-bottom: 1.75rem; } .mm-benefits { list-style: none; padding: 0; margin: 0 0 1.75rem; } .mm-benefits li { position: relative; padding-left: 2rem; margin-bottom: 0.85rem; color: var(--mm-body); font-size: 1.05rem; } .mm-benefits li::before { content: "✓"; position: absolute; left: 0; top: 0.05em; display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; background: var(--mm-ochre-050); color: var(--mm-ochre-ink); border-radius: 50%; font-size: 0.8rem; font-weight: 800; } .mm-landing .mm-btn-lg { display: inline-flex; } /* Listas de ofertas / matches / guardados */ .mm-oferta-list, .mm-match-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; } .mm-oferta-item, .mm-match-item { background: var(--mm-bg-elevado); border: 1px solid var(--mm-line); border-radius: var(--mm-radius); padding: 1.15rem 1.35rem; box-shadow: var(--mm-shadow-sm); transition: box-shadow var(--mm-ease), transform var(--mm-ease); } .mm-oferta-item:hover, .mm-match-item:hover { box-shadow: var(--mm-shadow-md); transform: translateY(-2px); } .mm-oferta-item a { margin-left: 1rem; color: var(--mm-ochre-ink); font-weight: 600; } .mm-oferta-estado { color: var(--mm-muted); font-size: 0.9rem; margin-left: 0.5rem; } .mm-match-item h3 { color: var(--mm-ink); margin-bottom: 0.35rem; } .mm-match-acciones { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.5rem; } .mm-perfil-form img, .mm-perfil-form .attachment-thumbnail { border-radius: var(--mm-radius); margin-bottom: 1rem; box-shadow: var(--mm-shadow-sm); } /* ========================================================================== Redes sociales embebidas ========================================================================== */ .mm-redes { margin-top: 1rem; } /* ========================================================================== Insignia Verificado ========================================================================== */ .mm-badge-verif { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.12rem 0.55rem; margin-left: 0.4rem; background: var(--mm-verif-bg); color: var(--mm-verif-text); border: 1px solid var(--mm-verif-border); border-radius: var(--mm-radius-pill); font-size: 0.78rem; font-weight: 700; vertical-align: middle; } /* Buzón de CVs / solicitud abierta — distingue estas publicaciones de las vacantes concretas, en "Mis ofertas", /matches y las tarjetas de swipe. */ .mm-badge-buzon { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.12rem 0.55rem; margin-left: 0.4rem; background: var(--mm-ochre-050); color: var(--mm-ochre-ink); border: 1px solid var(--mm-ochre-border); border-radius: var(--mm-radius-pill); font-size: 0.78rem; font-weight: 700; vertical-align: middle; } .mm-verif { margin: 0.15rem 0 0.5rem; } /* ========================================================================== Botón WhatsApp ========================================================================== */ .mm-btn-whatsapp { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.8rem 1.4rem; font-size: 1rem; font-weight: 700; line-height: 1.1; background: var(--mm-whatsapp); color: #fff !important; border: 2px solid transparent; border-radius: var(--mm-radius); box-sizing: border-box; text-decoration: none; box-shadow: var(--mm-shadow-sm); transition: transform var(--mm-ease), box-shadow var(--mm-ease), background-color var(--mm-ease); } .mm-btn-whatsapp:hover { background: var(--mm-whatsapp-hover); transform: translateY(-2px); box-shadow: var(--mm-shadow-md); } /* ========================================================================== Barra de progreso del perfil ========================================================================== */ .mm-progress { background: var(--mm-bg-elevado); border: 1px solid var(--mm-line); border-radius: var(--mm-radius); padding: 1rem 1.15rem; margin: 1rem 0 1.5rem; box-shadow: var(--mm-shadow-sm); } .mm-progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.6rem; color: var(--mm-ink); font-size: 0.95rem; } .mm-progress-hint { color: var(--mm-ochre-ink); font-weight: 600; font-size: 0.88rem; } .mm-progress-bar { height: 10px; background: var(--mm-line); border-radius: var(--mm-radius-pill); overflow: hidden; } .mm-progress-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--mm-ochre), var(--mm-ochre-600)); border-radius: var(--mm-radius-pill); transition: width 400ms ease; } /* ========================================================================== Dashboard (panel del usuario) ========================================================================== */ .mm-dashboard-sub { color: var(--mm-body); font-size: 1.1rem; margin-bottom: 2rem; } .mm-dash-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; } .mm-dash-tile { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.5rem 1.4rem; background: var(--mm-bg-elevado); border: 1.5px solid var(--mm-line); border-radius: var(--mm-radius-lg); box-shadow: var(--mm-shadow-sm); text-decoration: none; transition: transform var(--mm-ease), box-shadow var(--mm-ease), border-color var(--mm-ease); } .mm-dash-tile:hover { transform: translateY(-3px); box-shadow: var(--mm-shadow-md); border-color: var(--mm-line-strong); } .mm-dash-tile-primary { background: radial-gradient(120% 120% at 0% 0%, #2e2823 0%, var(--mm-dark) 70%); border-color: var(--mm-dark); } .mm-dash-ico { font-size: 1.9rem; line-height: 1; } .mm-dash-titulo { font-size: 1.15rem; font-weight: 800; color: var(--mm-ink); } .mm-dash-desc { color: var(--mm-body); font-size: 0.95rem; } .mm-dash-tile-primary .mm-dash-titulo { color: #fff; } .mm-dash-tile-primary .mm-dash-desc { color: var(--mm-cta-texto); } /* ========================================================================== Panel de métricas (admin) ========================================================================== */ .mm-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.5rem; } .mm-stat { display: flex; flex-direction: column; gap: 0.2rem; padding: 1.4rem 1.25rem; background: var(--mm-bg-elevado); border: 1px solid var(--mm-line); border-radius: var(--mm-radius-lg); box-shadow: var(--mm-shadow-sm); } .mm-stat-num { font-size: 2rem; font-weight: 800; color: var(--mm-ink); letter-spacing: -0.02em; } .mm-stat-label { color: var(--mm-muted); font-size: 0.9rem; font-weight: 600; } @media (min-width: 680px) { .mm-stats-grid { grid-template-columns: repeat(3, 1fr); } } /* ========================================================================== Panel de formulario (Mi Perfil / Publicar oferta) ========================================================================== */ .mm-card-panel { background: var(--mm-bg-elevado); border: 1px solid var(--mm-line); border-radius: var(--mm-radius-lg); box-shadow: var(--mm-shadow-md); padding: 1.75rem 1.6rem; margin-top: 1rem; } /* Pantalla de "subí tu CV" que reemplaza a /descubrir cuando un postulante todavía no cargó un CV válido (ver MM_Frontend::render_descubrir()). */ .mm-descubrir-cv-requerido { max-width: 420px; margin-left: auto; margin-right: auto; text-align: center; } .mm-descubrir-cv-requerido p { color: var(--mm-body); margin: 0 0 1.1rem; } .mm-perfil-foto { margin-bottom: 1.25rem; } .mm-perfil-foto img { border-radius: 50%; width: 96px; height: 96px; object-fit: cover; box-shadow: var(--mm-shadow-md); border: 3px solid var(--mm-bg-elevado); } .mm-empresa-logo { margin-bottom: 1.25rem; } .mm-empresa-logo img { width: 88px; height: 88px; object-fit: cover; border-radius: 14px; box-shadow: var(--mm-shadow-sm); border: 1px solid var(--mm-line); background: var(--mm-logo-bg); } /* Widget de adjuntos (logo/foto/CV) con vista previa + Cambiar/Eliminar, ver includes/class-mm-adjuntos.php + assets/js/mm-adjuntos.js. */ .mm-form .mm-adjunto-label { display: block; font-weight: 600; color: var(--mm-ink); font-size: 0.95rem; margin-bottom: 0.4rem; } .mm-adjunto { background: var(--mm-surface-2); border: 1px solid var(--mm-line); border-radius: var(--mm-radius, 14px); padding: 1rem 1.1rem; margin: 0.75rem 0 1.25rem; } .mm-adjunto-preview { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; } .mm-adjunto-img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; box-shadow: var(--mm-shadow-sm); border: 1px solid var(--mm-line); background: var(--mm-logo-bg); } .mm-adjunto-nombre { font-size: 0.85rem; color: var(--mm-muted); word-break: break-all; } .mm-adjunto-vacio { font-size: 0.9rem; color: var(--mm-muted); } .mm-adjunto-doc-link { font-weight: 600; color: var(--mm-ochre-ink); } .mm-adjunto-acciones { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .mm-adjunto-preview-confirmar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0.85rem 0 0; padding: 0.75rem; background: var(--mm-bg-elevado); border: 1px dashed var(--mm-line-strong); border-radius: 10px; } .mm-adjunto-ayuda { font-size: 0.78rem; color: var(--mm-muted); margin: 0.6rem 0 0; } .mm-adjunto-estado { font-size: 0.85rem; margin-top: 0.5rem; } .mm-adjunto-estado-error { color: var(--mm-error); font-weight: 600; } /* ========================================================================== CV online ========================================================================== */ .mm-cv-toolbar { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .mm-cv { background: var(--mm-bg-elevado); border: 1px solid var(--mm-line); border-radius: var(--mm-radius-lg); box-shadow: var(--mm-shadow-md); padding: 2rem 1.9rem; max-width: 820px; } .mm-cv-head { display: flex; align-items: center; gap: 1.25rem; border-bottom: 2px solid var(--mm-ochre); padding-bottom: 1.25rem; margin-bottom: 1.25rem; } .mm-cv-foto { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; border: 3px solid var(--mm-bg-elevado); box-shadow: var(--mm-shadow-sm); flex: 0 0 auto; } .mm-cv-head h1 { font-size: 1.8rem; margin: 0 0 0.2rem; color: var(--mm-ink); } .mm-cv-rol { color: var(--mm-ochre-ink); font-weight: 700; margin: 0 0 0.2rem; } .mm-cv-contacto { color: var(--mm-muted); font-size: 0.95rem; margin: 0; } .mm-cv section { margin-bottom: 1.1rem; } .mm-cv h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mm-earth); margin: 0 0 0.4rem; } .mm-cv p { color: var(--mm-body); margin: 0; line-height: 1.5; } .mm-cv-datos ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 1.5rem; } .mm-cv-datos li { color: var(--mm-body); } .mm-cv-pie { margin-top: 1.5rem !important; padding-top: 1rem; border-top: 1px solid var(--mm-line); color: var(--mm-muted) !important; font-size: 0.85rem; text-align: center; } @media print { body * { visibility: hidden !important; } .mm-cv, .mm-cv * { visibility: visible !important; } .mm-cv { position: absolute; left: 0; top: 0; width: 100%; border: none; box-shadow: none; border-radius: 0; padding: 0; } .mm-cv-toolbar { display: none !important; } .mm-badge-verif { border-color: #bcdcff; } } /* ========================================================================== Páginas legales (privacidad / términos) ========================================================================== */ .mm-legal { max-width: 800px; } .mm-legal h2 { font-size: 1.2rem; margin-top: 2rem; } .mm-legal p em { color: var(--mm-muted); } .mm-legal .mm-benefits li { font-size: 1rem; } /* ========================================================================== Planes / precios ========================================================================== */ .mm-planes-intro { text-align: center; max-width: 46ch; margin: 0 auto 2.5rem; color: var(--mm-body); font-size: 1.08rem; } .mm-planes-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: stretch; } .mm-plan-card { display: flex; flex-direction: column; background: var(--mm-bg-elevado); border: 1.5px solid var(--mm-line); border-radius: var(--mm-radius-lg); padding: 2rem 1.75rem; box-shadow: var(--mm-shadow-sm); transition: transform var(--mm-ease), box-shadow var(--mm-ease); } .mm-plan-card:hover { transform: translateY(-4px); box-shadow: var(--mm-shadow-lg); } .mm-plan-card.mm-plan-destacado { border-color: var(--mm-ochre); box-shadow: var(--mm-shadow-lg); position: relative; } .mm-plan-card.mm-plan-full { border-color: var(--mm-dark); background: linear-gradient(180deg, var(--mm-bg-elevado) 0%, var(--mm-surface-2) 100%); } .mm-plan-card.mm-plan-full .mm-plan-nombre { color: var(--mm-dark); } .mm-plan-badge { position: absolute; top: -0.85rem; left: 50%; transform: translateX(-50%); background: linear-gradient(180deg, var(--mm-ochre-light), var(--mm-ochre-600)); color: var(--mm-dark); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.35rem 0.9rem; border-radius: var(--mm-radius-pill); box-shadow: var(--mm-shadow-ochre); } .mm-plan-nombre { font-size: 1.25rem; font-weight: 800; color: var(--mm-ink); margin-bottom: 0.25rem; } .mm-plan-target { color: var(--mm-muted); font-size: 0.9rem; margin-bottom: 1.25rem; } .mm-plan-precio { display: flex; align-items: baseline; gap: 0.35rem; margin-bottom: 1.5rem; } .mm-plan-precio .mm-plan-monto { font-size: 2.4rem; font-weight: 800; color: var(--mm-ink); letter-spacing: -0.02em; } .mm-plan-precio .mm-plan-periodo { color: var(--mm-muted); font-size: 0.95rem; font-weight: 600; } .mm-plan-features { list-style: none; padding: 0; margin: 0 0 1.75rem; flex: 1; } .mm-plan-features li { position: relative; padding-left: 1.8rem; margin-bottom: 0.7rem; color: var(--mm-body); font-size: 0.98rem; line-height: 1.4; } .mm-plan-features li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--mm-ochre-ink); font-weight: 800; } .mm-plan-features li.mm-plan-no { color: var(--mm-muted); } .mm-plan-features li.mm-plan-no::before { content: "–"; color: var(--mm-line-strong); } .mm-plan-card .mm-btn-primary, .mm-plan-card .mm-btn-secondary, .mm-plan-card .mm-btn-ghost { width: 100%; } .mm-planes-nota { text-align: center; color: var(--mm-muted); font-size: 0.9rem; margin-top: 2rem; } /* ========================================================================== Responsive ========================================================================== */ @media (min-width: 640px) { .mm-onboarding-form { flex-direction: row; } .mm-role-card { flex: 1; } .mm-dash-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 780px) { .mm-hero { flex-direction: row; text-align: left; padding-top: 4rem; padding-bottom: 4rem; } .mm-hero-text { flex: 1; } .mm-hero-text p { margin-left: 0; } .mm-hero-image { flex: 1; } .mm-hero-ctas { flex-direction: row; } .mm-steps-grid { grid-template-columns: repeat(3, 1fr); } .mm-planes-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 680px) { .mm-planes-grid.mm-planes-4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .mm-planes-grid.mm-planes-4 { grid-template-columns: repeat(4, 1fr); } } /* ========================================================================== Centro de Empleabilidad Minera (sección /empleabilidad) ========================================================================== */ .mm-emp-hero { background: radial-gradient(120% 120% at 50% 0%, #2e2823 0%, var(--mm-dark) 60%); color: #fff; text-align: center; padding: 4rem 1.25rem; } .mm-emp-hero-inner { max-width: 720px; margin: 0 auto; } .mm-emp-eyebrow { display: inline-block; color: var(--mm-ochre); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.82rem; margin-bottom: 1rem; } .mm-emp-hero h1 { color: #fff; font-size: clamp(2rem, 6vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; font-weight: 800; margin-bottom: 1rem; } .mm-emp-hero p { color: var(--mm-emp-hero-texto); font-size: 1.15rem; max-width: 52ch; margin: 0 auto 1.75rem; } .mm-emp-hero .mm-hero-ctas { justify-content: center; max-width: 460px; margin: 0 auto; } /* Descripción dentro de las tarjetas de pack */ .mm-plan-card .mm-plan-desc { color: var(--mm-body); font-size: 0.96rem; line-height: 1.45; margin: 0 0 1.1rem; } /* Estructura del CV (pills centradas + texto de apoyo) */ .mm-cv-estructura { text-align: center; } .mm-cv-estructura .mm-pills { justify-content: center; margin-bottom: 1.5rem; } .mm-cv-estructura p { max-width: 60ch; margin: 0 auto; } /* Grilla de 4 pasos (¿Cómo funciona?) */ @media (min-width: 780px) { .mm-steps-grid.mm-steps-4 { grid-template-columns: repeat(4, 1fr); } } /* ------------------------------------------------------------------ Página pública de empresa */ .mm-empresa-header { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; margin-bottom: 2rem; } .mm-empresa-logo-big img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--mm-radius, 14px); box-shadow: var(--mm-shadow-md); background: var(--mm-logo-bg); } .mm-empresa-header h1 { margin: 0 0 0.25rem; } .mm-empresa-meta { color: var(--mm-muted); margin: 0.25rem 0; } .mm-empresa-redes { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin: 0.25rem 0 0; } .mm-empresa-desc { margin-bottom: 2rem; } .mm-empresa-ofertas { margin-bottom: 2.5rem; } .mm-empresa-oferta-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.5rem 0; } .mm-empresa-oferta-sal { color: var(--mm-ochre-shade, var(--mm-ochre)); font-weight: 700; margin: 0.25rem 0; } .mm-empresa-publink { background: var(--mm-cream, #f5f0e8); border: 1px solid var(--mm-line); border-radius: var(--mm-radius, 12px); padding: 0.75rem 1rem; margin-bottom: 1.25rem; word-break: break-all; } @media (min-width: 780px) { .mm-empresa-header { flex-direction: row; text-align: left; align-items: center; } .mm-empresa-redes { justify-content: flex-start; } } /* Botón "volver arriba" de Astra: tono dorado oscuro de la marca en vez del azul por defecto */ #ast-scroll-top { background-color: var(--mm-ochre-700, #a8790f) !important; color: #fff !important; } /* ------------------------------------------------------------------ Estados vacíos */ .mm-empty { text-align: center; max-width: 460px; margin: 2rem auto; padding: 2.5rem 1.5rem; background: var(--mm-bg-elevado); border: 1px solid var(--mm-line); border-radius: var(--mm-radius-lg, 18px); box-shadow: var(--mm-shadow-sm); } .mm-empty-ico { font-size: 2.6rem; line-height: 1; display: block; margin-bottom: 0.6rem; } .mm-empty h3 { margin: 0 0 0.5rem; color: var(--mm-ink); } .mm-empty p { color: var(--mm-body); margin: 0 auto 1.4rem; max-width: 40ch; } /* ------------------------------------------------------------------ Caja de verificación */ .mm-verif-box { background: var(--mm-ochre-050, #fdf6e6); border: 1px solid var(--mm-ochre-border); border-radius: var(--mm-radius, 12px); padding: 1rem 1.25rem; margin-bottom: 1.5rem; } .mm-verif-box h3 { margin: 0 0 0.35rem; color: var(--mm-ink); font-size: 1.05rem; } .mm-verif-box p { margin: 0 0 0.75rem; color: var(--mm-body); font-size: 0.95rem; } .mm-verif-box form { margin: 0; } /* ------------------------------------------------------------------ Compartir empresa */ .mm-empresa-share { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; margin-bottom: 2rem; } @media (min-width: 780px) { .mm-empresa-share { justify-content: flex-start; } } /* ------------------------------------------------------------------ Sobre Nosotros: Misión / Visión */ .mm-mv-grid { display: grid; gap: 1.25rem; } .mm-mv-card { border-top: 3px solid var(--mm-ochre); } .mm-mv-eyebrow { display: block; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; color: var(--mm-ochre-ink, #a8790f); margin-bottom: 0.6rem; } .mm-mv-card p { margin: 0; } .mm-valores .mm-pills { justify-content: center; } .mm-valores .mm-pill { font-size: 1rem; padding: 0.55rem 1.2rem; } @media (min-width: 780px) { .mm-mv-grid { grid-template-columns: 1fr 1fr; } } /* ------------------------------------------------------------------ Widget de cotizaciones (dólar + oro) */ .mm-cotiz { max-width: 1000px; margin: 0 auto; } .mm-cotiz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 1rem; } .mm-cotiz-card { background: linear-gradient(160deg, #2a231b, var(--mm-dark, #211d1a)); color: var(--mm-cream, #f6f2ea); border: 1px solid rgba(224, 165, 38, 0.28); border-radius: var(--mm-radius, 14px); padding: 1.05rem 1.2rem; display: flex; flex-direction: column; gap: 0.3rem; box-shadow: var(--mm-shadow-sm); } .mm-cotiz-nombre { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mm-ochre); font-weight: 700; } .mm-cotiz-valor { font-size: 1.7rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; } .mm-cotiz-sub { font-size: 0.8rem; color: var(--mm-cotiz-sub-texto); } .mm-cotiz-oro { border-color: rgba(224, 165, 38, 0.6); background: linear-gradient(160deg, #3c2d12, #241d10); } .mm-cotiz-oro .mm-cotiz-valor { color: var(--mm-ochre); } .mm-cotiz-foot { text-align: center; font-size: 0.75rem; color: var(--mm-muted); margin-top: 0.9rem; } /* ------------------------------------------------------------------ Página pública de oferta */ .mm-oferta-header { text-align: center; margin-bottom: 2rem; } .mm-oferta-meta { display: flex; gap: 0.4rem; justify-content: center; flex-wrap: wrap; margin: 0.75rem 0; } .mm-oferta-cta { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; margin: 1.5rem 0 2rem; } .mm-oferta-cta a { width: 100%; max-width: 360px; text-align: center; } /* Botón de contacto ARRIBA de la oferta, pegado al título (above the fold): la descripción larga puede ser extensa y en mobile empuja el botón real (más abajo, en .mm-oferta-cta) fuera de pantalla — una postulante avisó por Instagram que no encontraba cómo postularse por esto mismo. Este es el mismo botón/canal repetido arriba, nunca uno distinto. */ .mm-oferta-cta-top { margin-top: 1.25rem; } .mm-oferta-cta-top a { width: 100%; max-width: 420px; min-height: 48px; justify-content: center; font-size: 1.1rem; } .mm-oferta-cta-top-nota { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--mm-muted); } /* Barra de contacto fija (sticky) en mobile: repite el botón principal de arriba para que quede accionable en todo momento mientras se scrollea la descripción/requisitos, sin importar cuán larga sea la oferta. Se oculta en desktop (≥780px) porque ahí el botón de arriba ya queda a la vista sin scrollear. safe-area-inset-bottom evita que el notch/gesture-bar de iOS tape el botón. */ .mm-oferta-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; display: flex; justify-content: center; padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom, 0px)); background: var(--mm-bg-elevado); border-top: 1px solid var(--mm-line); box-shadow: 0 -6px 16px rgba(var(--mm-shadow-rgb), 0.14); } .mm-oferta-sticky a { width: 100%; max-width: 480px; min-height: 48px; justify-content: center; text-align: center; } /* Compensa la altura de la barra sticky para que no tape el mapa ni el footer del sitio al llegar al final de la oferta. Solo en mobile, que es donde existe la barra — en desktop no hace falta padding extra. */ @media (max-width: 779.98px) { .mm-oferta-publica--sticky { padding-bottom: 5.5rem; } } .mm-oferta-mapa { width: 100%; height: 320px; border-radius: var(--mm-radius, 12px); overflow: hidden; } @media (min-width: 780px) { .mm-oferta-header { text-align: left; } .mm-oferta-meta { justify-content: flex-start; } .mm-oferta-cta { align-items: flex-start; flex-direction: row; flex-wrap: wrap; } .mm-oferta-cta a { width: auto; } .mm-oferta-cta-top a { width: auto; } /* El botón de arriba ya es visible sin scrollear en pantallas grandes: la barra sticky (pensada para mobile) sería redundante y taparía el footer, así que se oculta acá. */ .mm-oferta-sticky { display: none; } } /* ------------------------------------------------------------------ Notas de Cuyovision (home) */ .mm-notas-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } .mm-nota-card, .mm-nota-card:hover, .mm-nota-card * { text-decoration: none !important; } .mm-nota-card { display: flex; flex-direction: column; background: var(--mm-bg-elevado); border: 1px solid var(--mm-line); border-radius: var(--mm-radius-lg, 18px); overflow: hidden; box-shadow: var(--mm-shadow-sm); color: inherit; transition: transform var(--mm-ease), box-shadow var(--mm-ease); } .mm-nota-card:hover { transform: translateY(-3px); box-shadow: var(--mm-shadow-lg); } .mm-nota-img { width: 100%; height: 170px; object-fit: cover; display: block; } .mm-nota-body { padding: 1.1rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: 0.4rem; } .mm-nota-fuente { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mm-ochre-ink); } .mm-nota-titulo { color: var(--mm-ink); font-size: 1.05rem; line-height: 1.35; margin: 0; } .mm-nota-extracto { color: var(--mm-body); font-size: 0.9rem; line-height: 1.5; margin: 0; } .mm-nota-fecha { font-size: 0.78rem; color: var(--mm-muted); margin-top: 0.2rem; } @media (min-width: 780px) { .mm-notas-grid { /* --mm-notas-cols la define inline PHP según cuántas notas hay realmente (1 a 3), para que nunca quede un hueco vacío en el grid si hay menos de 3 notas publicadas. */ grid-template-columns: repeat(var(--mm-notas-cols, 3), minmax(0, 360px)); justify-content: center; } } /* ------------------------------------------------------------------ Vitrina aleatoria del home */ .mm-vitrina-fila { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0.25rem 0.1rem 0.9rem; margin: 0 -0.1rem; } .mm-vitrina-fila::-webkit-scrollbar { height: 6px; } .mm-vitrina-fila::-webkit-scrollbar-thumb { background: var(--mm-line-strong); border-radius: 999px; } .mm-vitrina-card, .mm-vitrina-card:hover, .mm-vitrina-card * { text-decoration: none !important; } .mm-vitrina-card { flex: 0 0 240px; scroll-snap-align: start; display: flex; flex-direction: column; background: var(--mm-bg-elevado); border: 1px solid var(--mm-line); border-radius: var(--mm-radius-lg); padding: 1.1rem 1.15rem; color: inherit; box-shadow: var(--mm-shadow-sm); transition: transform var(--mm-ease), box-shadow var(--mm-ease); height: 100%; box-sizing: border-box; } .mm-vitrina-card:hover { transform: translateY(-3px); box-shadow: var(--mm-shadow-lg); } .mm-vitrina-card .mm-pill { display: inline-block; margin-bottom: 0.45rem; } .mm-vitrina-logo { width: 44px; height: 44px; object-fit: cover; border-radius: 10px; margin-bottom: 0.6rem; border: 1px solid var(--mm-line); background: var(--mm-logo-bg); } .mm-vitrina-foto { width: 72px; height: 72px; object-fit: cover; border-radius: 50%; margin: 0 auto 0.7rem; display: block; border: 2px solid var(--mm-ochre-050); } .mm-vitrina-foto-vacia { display: flex; align-items: center; justify-content: center; font-size: 1.8rem; background: var(--mm-ochre-050); color: var(--mm-ochre-ink); } .mm-vitrina-titulo { font-size: 1.02rem; color: var(--mm-ink); margin: 0 0 0.25rem; line-height: 1.3; /* Recorta títulos largos a 2 líneas con puntos suspensivos, para que todas las tarjetas de una misma fila terminen a la misma altura. */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .mm-vitrina-card-talento { text-align: center; } .mm-vitrina-card-talento .mm-pill { margin-left: auto; margin-right: auto; } .mm-vitrina-sub { color: var(--mm-earth); font-weight: 600; font-size: 0.88rem; margin: 0 0 0.5rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; } .mm-vitrina-ubic { color: var(--mm-muted); font-size: 0.85rem; margin: 0.4rem 0 0; } /* Toda la tarjeta ya es un clickeable, pero sin esto no había ninguna señal visual de que llevaba a postularse — quedaba en el usuario intuir que la tarjeta entera era un link. margin-top:auto la empuja al fondo (misma técnica que .mm-vitrina-card-talento .mm-vitrina-btn más abajo), así queda alineada entre tarjetas con distinta cantidad de texto arriba. */ .mm-vitrina-cta-chip { display: inline-block; margin-top: auto; padding-top: 0.6rem; font-weight: 700; font-size: 0.85rem; color: var(--mm-ochre-ink, var(--mm-ochre-700, #a8790f)); } .mm-vitrina-desc { color: var(--mm-body); font-size: 0.85rem; margin: 0.5rem 0 0; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .mm-vitrina-btn { margin-top: 0.75rem; align-self: center; } /* Empuja el botón "Ver perfil" al fondo de la tarjeta y la descripción a ocupar el espacio disponible, así todas las tarjetas de una fila quedan con el mismo alto pero el contenido interno se acomoda parejo. */ .mm-vitrina-card-talento { height: 100%; } .mm-vitrina-card-talento .mm-vitrina-btn { margin-top: auto; padding-top: 0.75rem; } .mm-vitrina-cargando, .mm-vitrina-vacio { color: var(--mm-muted); padding: 1.5rem 0; } .mm-vitrina-cta { text-align: center; margin-top: 0.5rem; } /* Variante con dos botones (CTA de proveedores debajo del carrusel de la home, 2026-07-23) — el primario ("Quiero sumarme...") va primero y pesa más visualmente; el secundario acompaña sin competirle. Apilados y centrados en mobile para que ninguno quede angosto. */ .mm-vitrina-cta-doble { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem; } .mm-vitrina-cta-doble .mm-btn-primary, .mm-vitrina-cta-doble .mm-btn-secondary { min-height: 48px; } /* Astra le gana a .mm-btn-primary/.mm-btn-secondary (sin !important) con una regla de mayor especificidad sobre los links del contenido — mismo bug ya visto antes con .mm-vitrina-card/.mm-nota-card, misma solución: forzar acá puntualmente, sin tocar el tema. */ .mm-vitrina-cta-doble a, .mm-vitrina-cta-doble a:hover, .mm-prov-cta-banner a, .mm-prov-cta-banner a:hover { text-decoration: none !important; } /* ------------------------------------------------------------------ Desktop/tablet: grilla de columnas FIJAS (no auto-fill), para que nunca quede una fila incompleta con huecos sueltos a la derecha. Reglas: - grid-template-columns con ancho fijo (260px) + max-width en el contenedor limitado a exactamente N columnas: aunque la pantalla sea enorme, jamás aparece una 4ta/3ra columna de más. - auto-fit (no auto-fill) + justify-content:center: si hay MENOS tarjetas que columnas, los tracks vacíos colapsan y el bloque que queda se centra en vez de pegarse a la izquierda con un hueco. - Truncar a múltiplo exacto de columnas (cuando SÍ hay de sobra) lo hace mm-vitrina.js antes de pintar, no el CSS — acá solo se define cuántas columnas hay en cada breakpoint para que el JS calcule lo mismo. Mobile (<560px) no se toca: sigue el carrusel horizontal de siempre. ========================================================================== */ @media (min-width: 560px) and (max-width: 779.98px) { .mm-vitrina-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 260px)); justify-content: center; /* +2px de margen: sin esto, el padding heredado de la regla base (aunque se resetea acá) y el redondeo del navegador pueden dejar el contenedor unos px por debajo de lo justo para 2 columnas, y auto-fit colapsa a menos columnas de las que debería. */ max-width: calc(2 * 260px + 1rem + 2px); margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; overflow-x: visible; align-items: stretch; box-sizing: content-box; } .mm-vitrina-card { flex: initial; } } @media (min-width: 780px) { .mm-vitrina-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 260px)); justify-content: center; /* Mismo margen de seguridad que en tablet, ver comentario arriba. */ max-width: calc(3 * 260px + 2rem + 2px); margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; overflow-x: visible; align-items: stretch; box-sizing: content-box; } .mm-vitrina-card { flex: initial; } } /* Ofertas + Trabajadores en dos columnas lado a lado (2026-07-24) — una sola fila de alto en vez de dos secciones apiladas. Mobile: apiladas (Ofertas arriba, Trabajadores abajo), cada una carrusel horizontal de siempre. Desde 780px: lado a lado. */ .mm-vitrinas-dobles { display: grid; grid-template-columns: 1fr; gap: 2.5rem; } /* min-width:0 es el fix clásico de este bug de grid/flex: sin esto, el carrusel horizontal interno (que scrollea su propio overflow) hace que el navegador calcule el ancho "intrínseco" de la columna como la suma de TODAS las tarjetas sin cortar, no el ancho visible — la columna termina más ancha que su propio contenedor en vez de recortar con scroll. */ .mm-vitrinas-dobles-col { min-width: 0; } /* Título y bajada de cada columna ("Ofertas destacadas" / "Trabajadores disponibles") venían con text-align:start heredado — no están en la lista de selectores centrados de .mm-rubros/.mm-cta-final/etc. La columna en sí ya es 50/50 (grid-template-columns: 1fr 1fr más abajo); esto solo centra el contenido DENTRO de cada columna. */ .mm-vitrinas-dobles-col h2 { text-align: center; } @media (min-width: 780px) { .mm-vitrinas-dobles { grid-template-columns: 1fr 1fr; gap: 2rem; } } /* A media página, una grilla de 2-3 columnas no entra cómoda — estas dos vitrinas se quedan como carrusel horizontal en CUALQUIER ancho de pantalla (mismo criterio ya usado en Proveedores destacados), pisando a propósito las reglas de "pasar a grilla en desktop" de más arriba. Dos clases (mayor especificidad) para ganarle a esas reglas sin usar `!important`. */ @media (min-width: 560px) { .mm-vitrina-fila.mm-vitrina-fila-carrusel { display: flex; grid-template-columns: none; max-width: none; margin-left: 0; margin-right: 0; padding: 0.25rem 0.1rem 0.9rem; overflow-x: auto; box-sizing: border-box; } .mm-vitrina-fila.mm-vitrina-fila-carrusel .mm-vitrina-card { flex: 0 0 240px; } } /* ------------------------------------------------------------------ Filtros (base, sitewide): usado por el panel colapsable de /descubrir (mm-swipe.css agrega el look del
    ahí) y por el buscador destacado del home (mm-buscador, siempre visible, sin
    ). ========================================================================== */ .mm-filtros { margin-bottom: 1rem; } .mm-filtros-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; padding: 0 1rem 0.75rem; } .mm-filtros-grid label { display: block; font-weight: 600; font-size: 0.9rem; color: var(--mm-ink, #201c19); } .mm-filtros-grid select, .mm-filtros-grid input { display: block; width: 100%; margin-top: 0.3rem; padding: 0.6rem 0.7rem; font-size: 1rem; font-family: inherit; border: 1.5px solid var(--mm-line-strong, #d7cbb9); border-radius: 10px; box-sizing: border-box; } .mm-filtros-acciones { display: flex; gap: 0.6rem; padding: 0 1rem 1rem; } .mm-filtros-acciones .mm-btn-primary, .mm-filtros-acciones .mm-btn-ghost { flex: 1; } @media (min-width: 560px) { .mm-filtros-grid { grid-template-columns: repeat(3, 1fr); } } /* Buscador destacado del home: mismo look de tarjeta que el
    de Descubrir, pero siempre visible (sin colapsar) ya que acá se pidió que quede destacado, no escondido detrás de un desplegable. */ .mm-buscador { background: var(--mm-bg-elevado); border: 1px solid var(--mm-line); border-radius: var(--mm-radius-lg); box-shadow: var(--mm-shadow-sm); padding: 1rem 0.25rem 0; max-width: 900px; margin: 0 auto; } /* Buscador global (2026-07-24) — antes vivía como sección fija en el home, ahora es un panel flotante que despliega el ícono 🔍 del menú principal (clase mm-buscador-toggle en el ítem de menú, ver wp-admin → Apariencia → Menús), disponible en CUALQUIER página, no solo el home. El panel siempre existe en el DOM (impreso una vez en el footer) y solo cambia [hidden] — mismo criterio ya usado para el chatbot y el modal de match. */ .mm-buscador-panel { position: fixed; top: 5.5rem; left: 50%; transform: translateX(-50%); z-index: 9999; width: min(720px, calc(100vw - 1.5rem)); max-height: calc(100vh - 7rem); overflow-y: auto; background: var(--mm-bg-elevado); border: 1px solid var(--mm-line); border-radius: var(--mm-radius-lg); box-shadow: var(--mm-shadow-lg); padding: 1.25rem 1rem; } .mm-buscador-panel[hidden] { display: none; } .mm-buscador-panel .mm-buscador { border: none; box-shadow: none; padding: 0; max-width: none; } .mm-buscador-panel-cerrar { position: absolute; /* 0.9rem en vez de 0.6rem (2026-07-26): a 0.6rem el botón quedaba metido en la curva del border-radius del panel (var(--mm-radius-lg)), se veía "montado" sobre el borde en vez de dentro de la esquina. */ top: 0.9rem; right: 0.9rem; /* Astra imprime "button { padding: 15px 30px }" inline en el (más específico/tardío de lo que parece) — sin resetear el padding acá y sin !important en el tamaño, ese padding termina ganando y el botón redondo de 36px se infla a un óvalo de ~63px. */ padding: 0 !important; display: flex; align-items: center; justify-content: center; width: 36px !important; height: 36px !important; border-radius: 50%; border: 1px solid var(--mm-line); background: var(--mm-bg); color: var(--mm-ink); font-size: 1rem; line-height: 1; cursor: pointer; } /* Objetivo táctil ≥40×40px en mobile (antes 32px). */ @media (max-width: 680px) { .mm-buscador-panel-cerrar { width: 40px !important; height: 40px !important; top: 0.75rem; right: 0.75rem; } } .mm-buscador-panel .mm-buscar-resultados { margin-top: 1.25rem; } .mm-buscador .mm-filtros-grid { padding: 0 1rem 1rem; } @media (min-width: 780px) { .mm-buscador .mm-filtros-grid { grid-template-columns: repeat(4, 1fr); } } /* Buscador simplificado del home (2026-07-23): un campo + botón siempre visibles, el resto de los filtros (Tipo/Especialidad/Zona) quedan atrás de "Búsqueda avanzada" — mismo criterio de
    que ya usa Descubrir, pero acá SÍ colapsado por default (a diferencia del buscador completo de /proveedores/, que se dejó tal cual estaba). */ .mm-buscador-simple { display: flex; flex-direction: column; gap: 0.6rem; padding: 0 1rem 0.75rem; } .mm-buscador-simple-label { flex: 1; font-weight: 600; font-size: 0.9rem; color: var(--mm-ink); } .mm-buscador-simple-label input { display: block; width: 100%; margin-top: 0.3rem; padding: 0.6rem 0.7rem; font-size: 1rem; font-family: inherit; border: 1.5px solid var(--mm-line-strong); border-radius: 10px; box-sizing: border-box; } .mm-buscador-avanzado { margin: 0 1rem 0.75rem; border-top: 1px solid var(--mm-line); padding-top: 0.75rem; } .mm-buscador-avanzado summary { cursor: pointer; font-weight: 700; font-size: 0.88rem; color: var(--mm-ochre-ink, var(--mm-ink)); list-style: none; } .mm-buscador-avanzado summary::-webkit-details-marker { display: none; } .mm-buscador-avanzado summary::before { content: '▸ '; } .mm-buscador-avanzado[open] summary::before { content: '▾ '; } .mm-buscador-avanzado .mm-filtros-grid { padding: 0.75rem 0 0; } /* Con "Buscar" ahora en .mm-buscador-simple, acá solo queda "Limpiar" — ya no tiene sentido que ocupe el 100% del ancho (flex:1 heredado de la regla genérica de .mm-filtros-acciones), se centra y se achica. */ .mm-buscador .mm-filtros-acciones { justify-content: center; } .mm-buscador .mm-filtros-acciones .mm-btn-ghost { flex: 0 0 auto; } @media (min-width: 560px) { .mm-buscador-simple { flex-direction: row; align-items: flex-end; } .mm-buscador-simple #mm-buscar-aplicar { flex: 0 0 auto; } } /* CTA "Quiero ser proveedor" (2026-07-23) — banner propio, fijo debajo del buscador y antes de "Proveedores destacados": es el botón que genera ingresos, tiene que verse sin esfuerzo. Antes vivía como tarjeta al final del carrusel de destacados, invisible en la práctica con 18+ destacados cargados (ver mm-proveedores.js, pintarDestacados()). Mobile-first: apilado y centrado por defecto, fila horizontal desde 780px. Compacto a propósito para no empujar mucho la sección de abajo. */ .mm-prov-cta-banner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.9rem; max-width: 900px; margin: 1.25rem auto; padding: 1.1rem 1.25rem; background: var(--mm-bg-elevado); border: 1px solid var(--mm-ochre-border); border-radius: var(--mm-radius-lg); box-shadow: var(--mm-shadow-ochre), var(--mm-shadow-sm); } .mm-prov-cta-texto h2 { margin: 0 0 0.2rem; font-size: 1.15rem; color: var(--mm-ink); } .mm-prov-cta-texto p { margin: 0; color: var(--mm-body); font-size: 0.92rem; } .mm-prov-cta-precios { margin-top: 0.35rem !important; color: var(--mm-muted) !important; font-size: 0.82rem !important; } .mm-prov-cta-btn { flex: 0 0 auto; white-space: nowrap; min-height: 48px; } @media (min-width: 780px) { .mm-prov-cta-banner { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; padding: 1.2rem 1.6rem; } } .mm-buscar-resultados { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.5rem; } .mm-buscar-resultados .mm-vitrina-card { height: 100%; } @media (min-width: 560px) { .mm-buscar-resultados { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 780px) { .mm-buscar-resultados { grid-template-columns: repeat(3, 1fr); } } /* ========================================================================== Directorio de proveedores (Fase 2) — /proveedores/, home y ficha individual. Todo con variables --mm-*, así el modo oscuro se resuelve solo, igual que el resto del sitio. Mobile-first: carrusel horizontal en mobile para la fila de destacados (igual que .mm-vitrina-fila), grilla de columnas fijas desde 560px. El listado completo (gratuitos) es una grilla normal que envuelve a varias filas, no un carrusel de una fila. ========================================================================== */ .mm-proveedores-destacados h2, .mm-proveedores-listado h2, .mm-proveedores-referencia h2, .mm-proveedores-home-section h2 { text-align: center; } /* Fase 2 (2026-07-22): "Otras empresas del sector (listado de referencia)" — subtítulo del propio h2, deliberadamente MENOS protagónico (color apagado, más chico) para que nunca compita visualmente con "Proveedores destacados" ni "Directorio". Las tarjetas de esta sección, cuando existan (Fase 3), NO llevan mm-proveedor-card-destacado ni badges — su diferenciación es justamente no tener ninguno de los adornos pagos. */ .mm-proveedores-referencia-sub { display: block; color: var(--mm-muted); font-size: 0.75em; font-weight: 400; margin-top: 0.2rem; } .mm-proveedores-referencia { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--mm-line); } .mm-proveedores-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.25rem; } /* Fila de destacados (home + tope del directorio) — 2026-07-23: a diferencia de .mm-vitrina-fila, esta fila NO pasa a grilla en desktop. Como ahora se muestran TODOS los "Destacado" activos sin tope (pueden ser muchos), se queda como carrusel horizontal de una sola fila en CUALQUIER ancho de pantalla — apilarlos en grilla en desktop volvía a estirar la home verticalmente sin límite. Ver .mm-carrusel-wrap para las flechas y el contador que acompañan este carrusel. */ .mm-proveedores-grid-destacados { display: flex; align-items: stretch; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0.25rem 0.1rem 0.9rem; margin: 0; scroll-behavior: smooth; } /* .mm-proveedor-card trae height:100% para el Directorio (CSS grid, filas con alto propio). Acá, dentro del carrusel flex, ese 100% contra un contenedor de alto automático se resuelve como "auto" y evita que align-items:stretch iguale las tarjetas — se anula el 100% puntualmente acá para que el stretch sí funcione y todas las tarjetas queden a la misma altura (la de la más alta), pareja en toda la fila. */ .mm-proveedores-grid-destacados .mm-proveedor-card { height: auto; } .mm-proveedores-grid-destacados::-webkit-scrollbar { height: 6px; } .mm-proveedores-grid-destacados::-webkit-scrollbar-thumb { background: var(--mm-line-strong); border-radius: 999px; } /* ========================================================================== Carrusel con flechas + contador (2026-07-23) — envuelve .mm-proveedores-grid-destacados. Flechas ocultas en mobile (el deslizamiento táctil ya alcanza y dos botones angostos ahí solo estorban); visibles desde 780px, superpuestas a los bordes de la fila. ========================================================================== */ .mm-carrusel-wrap { position: relative; margin-top: 1.25rem; } .mm-carrusel-flecha { display: none; } .mm-carrusel-contador { text-align: center; margin: 0.4rem 0 0; font-size: 0.82rem; color: var(--mm-muted); } @media (min-width: 780px) { .mm-carrusel-flecha { display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--mm-line); background: var(--mm-bg-elevado); color: var(--mm-ink); font-size: 1.4rem; line-height: 1; cursor: pointer; box-shadow: var(--mm-shadow-sm); z-index: 2; transition: background var(--mm-ease), transform var(--mm-ease); } .mm-carrusel-flecha:hover { background: var(--mm-ochre-050); transform: translateY(-50%) scale(1.05); } .mm-carrusel-flecha-prev { left: -8px; } .mm-carrusel-flecha-next { right: -8px; } } .mm-proveedor-card, .mm-proveedor-card:hover, .mm-proveedor-card * { text-decoration: none !important; } .mm-proveedor-card { position: relative; display: flex; flex-direction: column; background: var(--mm-bg-elevado); border: 1px solid var(--mm-line); border-radius: var(--mm-radius-lg); padding: 1.1rem 1.15rem; color: inherit; box-shadow: var(--mm-shadow-sm); transition: transform var(--mm-ease), box-shadow var(--mm-ease); box-sizing: border-box; height: 100%; } .mm-proveedor-card:hover { transform: translateY(-3px); box-shadow: var(--mm-shadow-lg); } /* Los destacados llevan además el marco dorado — "que se note y valga la pena pagarlo", como pidió el brief. */ .mm-proveedor-card-destacado { flex: 0 0 260px; scroll-snap-align: start; border-color: var(--mm-ochre-border); box-shadow: var(--mm-shadow-ochre), var(--mm-shadow-sm); padding: 1.4rem 1.3rem; } .mm-badge-premium { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.6rem; margin-bottom: 0.6rem; border-radius: var(--mm-radius-pill); background: linear-gradient(180deg, var(--mm-ochre-light) 0%, var(--mm-ochre) 100%); color: var(--mm-texto-sobre-dorado, var(--mm-dark)); font-size: 0.72rem; font-weight: 800; align-self: flex-start; } .mm-proveedor-logo { width: 56px; height: 56px; object-fit: contain; border-radius: 10px; margin-bottom: 0.6rem; border: 1px solid var(--mm-line); background: var(--mm-logo-bg); } .mm-proveedor-card-destacado .mm-proveedor-logo { width: 72px; height: 72px; } .mm-proveedor-logo-vacio { display: flex; align-items: center; justify-content: center; font-size: 1.6rem; background: var(--mm-ochre-050); color: var(--mm-ochre-ink); } .mm-proveedor-nombre { font-size: 1.02rem; color: var(--mm-ink); margin: 0 0 0.35rem; line-height: 1.3; /* Nombres de empresa muy largos (ej. razones sociales completas) hacían que esa tarjeta sola estirara la altura de todo el carrusel (flex stretch iguala todas las tarjetas a la más alta) — 2 líneas alcanzan para casi cualquier nombre real y evitan el desborde. */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .mm-proveedor-pills { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.4rem; } .mm-proveedor-pills .mm-pill { margin: 0; } .mm-proveedor-zona { color: var(--mm-muted); font-size: 0.85rem; margin: 0.2rem 0 0; } .mm-proveedor-desc { color: var(--mm-body); font-size: 0.85rem; margin: 0.5rem 0 0; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } /* Reusa exactamente la técnica ya probada en .mm-vitrina-cta-chip: la tarjeta entera es un , esto es la única señal visual de que lleva a la ficha — empujada al fondo con margin-top:auto para alinearse entre tarjetas con distinta cantidad de texto arriba. */ .mm-proveedor-card .mm-vitrina-cta-chip { margin-top: auto; } /* Fase 3 (2026-07-22) — listado de referencia: empresas reales que NO se registraron, no dieron consentimiento y no pagan. Nunca deben confundirse con un proveedor pago (sin halo dorado, sin badges) y SIEMPRE tienen que mostrar la leyenda obligatoria, legible (no "letra chica" ilegible) en los 3 lugares: tarjeta del directorio, tarjeta de la home y ficha individual. */ .mm-proveedor-card-referencia { border-style: dashed; } .mm-proveedor-disclaimer { color: var(--mm-muted); background: var(--mm-bg-sutil, rgba(127, 127, 127, 0.1)); font-size: 0.76rem; font-weight: 600; padding: 0.35rem 0.5rem; border-radius: 6px; margin: 0.5rem 0 0; line-height: 1.3; } .mm-proveedor-disclaimer-banner { background: var(--mm-bg-elevado); border: 1px solid var(--mm-line-strong); border-left: 4px solid var(--mm-muted); padding: 0.85rem 1.1rem; border-radius: var(--mm-radius); font-weight: 700; margin-bottom: 1.25rem; color: var(--mm-body); } /* ---------- Ficha pública individual (/proveedor/{id}/) ---------- */ .mm-proveedor-header { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; margin-bottom: 1.5rem; } /* Fase 3 (2026-07-22): las fichas de referencia no tienen logo — el mismo placeholder vacío (.mm-proveedor-logo-vacio, ya usado en las tarjetas) se reusa acá como
    directo, sin adentro, así que necesita su propio tamaño en vez de heredarlo de la regla "img" de abajo. */ .mm-proveedor-logo-big.mm-proveedor-logo-vacio { width: 96px; height: 96px; border-radius: var(--mm-radius); border: 1px solid var(--mm-line); font-size: 2.2rem; } .mm-proveedor-logo-big img { width: 96px; height: 96px; object-fit: contain; border-radius: var(--mm-radius); border: 1px solid var(--mm-line); background: var(--mm-logo-bg); } .mm-proveedor-meta { display: flex; gap: 0.4rem; justify-content: center; flex-wrap: wrap; margin: 0.6rem 0; } .mm-proveedor-telefono { color: var(--mm-body); font-weight: 600; margin: 0.3rem 0; } @media (min-width: 780px) { .mm-proveedor-header { flex-direction: row; text-align: left; align-items: flex-start; } .mm-proveedor-meta { justify-content: flex-start; } } /* ---------- Formulario de autogestión en /mi-perfil/ ---------- */ .mm-proveedor-form .mm-checkbox-inline { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0 0.9rem 0.6rem 0; font-weight: 500; } .mm-prov-rubros-fieldset { border: 1px solid var(--mm-line); border-radius: var(--mm-radius); padding: 0.9rem 1rem 0.4rem; margin-bottom: 1.1rem; } .mm-prov-rubros-fieldset legend { font-weight: 600; padding: 0 0.4rem; } .mm-proveedor-nivel-info { background: var(--mm-ochre-050); border: 1px solid var(--mm-ochre-border); border-radius: var(--mm-radius); padding: 0.7rem 0.9rem; color: var(--mm-ochre-ink); margin-bottom: 1.1rem; } .mm-prov-logo-actual img { max-width: 120px; border-radius: var(--mm-radius); border: 1px solid var(--mm-line); } /* ---------- Pantalla de planes en /mi-perfil/ (100% pago, sin nivel gratuito) ---------- */ .mm-proveedor-planes-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 1rem 0; } @media (min-width: 560px) { .mm-proveedor-planes-grid { grid-template-columns: repeat(2, 1fr); } } .mm-proveedor-plan-card { position: relative; background: var(--mm-bg-elevado); border: 1px solid var(--mm-line); border-radius: var(--mm-radius-lg); padding: 1.4rem 1.3rem; box-shadow: var(--mm-shadow-sm); } .mm-proveedor-plan-card-prioridad { border-color: var(--mm-ochre-border); box-shadow: var(--mm-shadow-ochre), var(--mm-shadow-sm); } .mm-proveedor-plan-card-prioridad .mm-badge-premium { position: absolute; top: -0.7rem; right: 1rem; } .mm-proveedor-plan-card h3 { margin: 0 0 0.3rem; color: var(--mm-ink); } .mm-proveedor-plan-precio { font-size: 1.6rem; font-weight: 800; color: var(--mm-ochre-ink); margin: 0 0 0.9rem; } .mm-proveedor-plan-precio span { font-size: 0.9rem; font-weight: 600; color: var(--mm-muted); } .mm-proveedor-plan-card ul { margin: 0 0 1.1rem; padding-left: 1.2rem; color: var(--mm-body); font-size: 0.9rem; line-height: 1.6; } .mm-proveedor-plan-card button { width: 100%; } .mm-proveedor-plan-card button:disabled { opacity: 0.6; cursor: not-allowed; } .mm-proveedor-plan-nota { font-size: 0.8rem; color: var(--mm-muted); margin-top: 0.6rem; } /* ========================================================================== CV Estratégico con IA — Fase 1 (2026-07-22): entrevista guiada, mobile-first. Reusa .mm-progress-bar (misma barra que el perfil) y .mm-card-panel/.mm-form ya existentes para no duplicar estilos base. Modo oscuro vía --mm-* como el resto del sitio — los PDF (fases siguientes) siempre van a ser aparte, generados en HTML propio, nunca heredan estas variables. ========================================================================== */ .mm-cvia-intro { max-width: 640px; margin: 0 auto 1.5rem; text-align: center; } .mm-cvia-app { max-width: 640px; margin: 0 auto; } .mm-cvia-progreso-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.6rem; color: var(--mm-ink); font-size: 0.9rem; flex-wrap: wrap; } .mm-cvia-guardado-indicador { color: var(--mm-muted); font-size: 0.8rem; } .mm-cvia-paso { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.9rem; } .mm-cvia-paso label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; color: var(--mm-ink); } .mm-cvia-paso input[type="text"], .mm-cvia-paso input[type="email"], .mm-cvia-paso select, .mm-cvia-paso textarea { padding: 0.6rem 0.7rem; border: 1px solid var(--mm-line); border-radius: var(--mm-radius); background: var(--mm-bg); color: var(--mm-ink); font: inherit; width: 100%; box-sizing: border-box; } .mm-cvia-paso label.mm-check { flex-direction: row; align-items: center; } .mm-cvia-fechas { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; } .mm-cvia-repetible { border: 1px solid var(--mm-line); border-radius: var(--mm-radius); padding: 0.9rem; display: flex; flex-direction: column; gap: 0.6rem; background: var(--mm-bg-elevado); } .mm-cvia-repetible-inline { display: flex; gap: 0.5rem; align-items: center; } .mm-cvia-repetible-inline input, .mm-cvia-repetible-inline select { flex: 1; } .mm-cvia-nota { font-size: 0.82rem; color: var(--mm-muted); margin: 0; } .mm-cvia-nav { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 1.25rem; } .mm-cvia-nav button { flex: 1; } @media (min-width: 560px) { .mm-cvia-nav { justify-content: flex-end; } .mm-cvia-nav button { flex: 0 0 auto; } } /* ========================================================================== Índice de Competitividad Profesional — Fase 4 (2026-07-22). Se muestra arriba del wizard, fuera de #mm-cvia-app para no perderse al cambiar de paso (ver comentario en class-mm-cv-ia.php). Tono constructivo, nunca descalificador — el propio texto del widget aclara que mide el documento, no si la persona va a conseguir trabajo. ========================================================================== */ .mm-cvia-icp { max-width: 640px; margin: 0 auto 1.25rem; background: var(--mm-bg-elevado); border: 1px solid var(--mm-ochre-border); border-radius: var(--mm-radius); padding: 1rem 1.15rem; box-shadow: var(--mm-shadow-sm); } .mm-cvia-icp-cabecera { display: flex; align-items: center; gap: 1rem; } .mm-cvia-icp-numero { font-size: 2rem; font-weight: 800; color: var(--mm-ochre-ink); flex: 0 0 auto; line-height: 1; } .mm-cvia-icp-numero span { font-size: 1rem; font-weight: 600; color: var(--mm-muted); } .mm-cvia-icp-texto p { margin: 0.25rem 0 0; font-size: 0.82rem; color: var(--mm-muted); line-height: 1.4; } .mm-cvia-icp-recos { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--mm-line); font-size: 0.88rem; } .mm-cvia-icp-recos ul { margin: 0.4rem 0 0; padding-left: 1.1rem; } .mm-cvia-icp-recos li { margin-bottom: 0.3rem; line-height: 1.4; } /* ========================================================================== CV Estratégico con IA — Fase 5 (2026-07-22): "Mis CVs" y pantalla de revisión. Reusan .mm-card-panel/.mm-cvia-nav/.mm-cvia-nota ya definidos. ========================================================================== */ .mm-cvia-link-lista { display: block; margin-top: 0.5rem; font-size: 0.78rem; padding: 0; } .mm-cvia-lista, .mm-cvia-revision { max-width: 640px; margin: 0 auto; } .mm-cvia-lista-items { display: flex; flex-direction: column; gap: 0.6rem; margin: 1rem 0; } .mm-cvia-lista-item { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; border: 1px solid var(--mm-line); border-radius: var(--mm-radius); padding: 0.8rem 1rem; background: var(--mm-bg-elevado); flex-wrap: wrap; } .mm-cvia-lista-info { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.9rem; color: var(--mm-ink); } .mm-cvia-lista-icp { color: var(--mm-ochre-ink); font-size: 0.8rem; font-weight: 600; } .mm-cvia-lista-estado { color: var(--mm-muted); font-size: 0.78rem; } .mm-cvia-lista-nuevo { border-top: 1px solid var(--mm-line); padding-top: 1rem; margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.7rem; } .mm-cvia-lista-nuevo label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.88rem; color: var(--mm-ink); } .mm-cvia-lista-nuevo input[type="text"] { padding: 0.55rem 0.65rem; border: 1px solid var(--mm-line); border-radius: var(--mm-radius); background: var(--mm-bg); color: var(--mm-ink); } .mm-cvia-revision label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.88rem; color: var(--mm-ink); margin-top: 0.9rem; } .mm-cvia-revision textarea { padding: 0.6rem 0.7rem; border: 1px solid var(--mm-line); border-radius: var(--mm-radius); background: var(--mm-bg); color: var(--mm-ink); font: inherit; width: 100%; box-sizing: border-box; } /* Subida de CV por AJAX (fix bug ERR_UPLOAD_FILE_CHANGED, 2026-07-22) */ .mm-cv-upload-status { margin-top: 0.5rem; } .mm-cv-upload-status p { margin: 0.35rem 0 0; font-size: 0.9rem; } .mm-cv-progreso { height: 8px; background: var(--mm-line); border-radius: var(--mm-radius-pill); overflow: hidden; } .mm-cv-progreso span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--mm-ochre), var(--mm-ochre-600)); border-radius: var(--mm-radius-pill); transition: width 200ms ease; } .mm-cv-upload-ok p { color: var(--mm-success); } .mm-cv-upload-error p { color: var(--mm-error); } /* Nota cruzada entre el pack manual y el CV con IA (Fase 6, 2026-07-22) */ .mm-plan-nota-cruzada { margin-top: 0.75rem; color: var(--mm-muted); font-size: 0.82rem; line-height: 1.4; } .mm-plan-nota-cruzada a { color: var(--mm-ochre-ink); font-weight: 600; } /* ========================================================================== CV Estratégico con IA — Fase 6 (pago, 2026-07-22): vista previa gratis, compra y descarga de PDF en la pantalla de revisión. ========================================================================== */ .mm-cvia-preview { background: var(--mm-bg-elevado); border: 1px solid var(--mm-line); border-radius: var(--mm-radius); padding: 1rem 1.15rem; margin-bottom: 1.25rem; } .mm-cvia-preview-texto { font-style: italic; color: var(--mm-ink); line-height: 1.5; margin: 0.4rem 0 0.85rem; } .mm-cvia-comprar { background: var(--mm-ochre-050); border: 1px solid var(--mm-ochre-border); border-radius: var(--mm-radius); padding: 1.15rem; text-align: center; } .mm-cvia-comprar h3 { margin: 0 0 0.4rem; color: var(--mm-ochre-ink); } .mm-cvia-comprar p { margin: 0 0 0.9rem; color: var(--mm-muted); font-size: 0.9rem; line-height: 1.4; } .mm-cvia-descargas { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--mm-line); display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; } .mm-cvia-descargas h3 { width: 100%; margin: 0 0 0.25rem; } /* ========================================================================== Banners publicitarios — Fase 2 (2026-07-22): motor real de selección, tracking e inserción. Reusa tokens --mm-* existentes. ========================================================================== */ .mm-ad { position: relative; max-width: 100%; margin: 1.5rem auto; text-align: center; } .mm-ad-etiqueta { position: absolute; top: 6px; left: 6px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.68rem; letter-spacing: 0.03em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--mm-radius-pill); pointer-events: none; z-index: 1; } .mm-ad picture, .mm-ad img { display: block; width: 100%; height: auto; border-radius: var(--mm-radius); } .mm-ad a { display: inline-block; max-width: 100%; } .mm-ad--footer { margin: 0 auto 1.5rem; padding: 0 1rem; } .mm-ad--panel_usuario { margin: 1.5rem 0; } .mm-ad--swipe_card { margin: 0; max-width: 420px; } .mm-ad--swipe_card .mm-ad-siguiente { margin-top: 0.75rem; } /* ========================================================================== Prioridad paga — postulantes y ofertas (2026-07-23). ========================================================================== */ .mm-badge-destacado { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.6rem; background: linear-gradient(90deg, var(--mm-ochre), var(--mm-ochre-600)); color: #1a1a1a; font-weight: 700; font-size: 0.78rem; border-radius: var(--mm-radius-pill); position: absolute; top: 10px; left: 10px; z-index: 2; } .mm-vitrina-card, .mm-card-inner { position: relative; } .mm-prioridad-box { background: var(--mm-bg-elevado); border: 1px solid var(--mm-ochre-border); border-radius: var(--mm-radius); padding: 1rem 1.15rem; margin: 1rem 0; } .mm-prioridad-box h3 { margin: 0 0 0.4rem; } .mm-prioridad-planes { display: flex; gap: 0.75rem; margin-top: 0.85rem; flex-wrap: wrap; } .mm-prioridad-plan { flex: 1 1 160px; background: var(--mm-bg); border: 1px solid var(--mm-line); border-radius: var(--mm-radius); padding: 0.85rem; text-align: center; } .mm-prioridad-plan p { margin: 0.3rem 0 0.7rem; font-weight: 700; color: var(--mm-ochre-ink); } .mm-prioridad-box-oferta { margin: 0.75rem 0 0; } .mm-prioridad-planes-oferta { flex-wrap: wrap; } .mm-prioridad-planes-oferta a { flex: 1 1 auto; } /* Caja de "subir de plan pagando el diferencial" — ver MM_Upgrade. */ .mm-upgrade-box { background: var(--mm-bg-elevado); border: 1px solid var(--mm-ochre-border); border-radius: var(--mm-radius); padding: 1rem 1.15rem; margin: 1rem 0; } .mm-upgrade-box h3 { margin: 0 0 0.4rem; } .mm-upgrade-desglose { width: 100%; max-width: 420px; border-collapse: collapse; margin: 0.75rem 0; font-size: 0.9rem; } .mm-upgrade-desglose td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--mm-line); } .mm-upgrade-desglose td:first-child { color: var(--mm-muted); } .mm-upgrade-desglose td:last-child { text-align: right; } /* ========================================================================== Selector de período (trimestral/semestral/anual) — 2026-07-27, reestructuración de precios Parte 4. Reusado por proveedores/postulantes/ ofertas vía MM_Planes::render_selector_periodo(). ========================================================================== */ .mm-periodos { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.6rem; width: 100%; } .mm-periodo-fila { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; padding: 0.5rem 0.7rem; border: 1px solid var(--mm-border, #e5ddd0); border-radius: var(--mm-radius-sm, 8px); font-size: 0.85rem; } .mm-periodo-nombre { font-weight: 600; min-width: 5.5rem; } .mm-periodo-precio { font-weight: 700; } .mm-periodo-ahorro { color: var(--mm-ochre, #b5762a); font-size: 0.8rem; } .mm-periodo-anual { border-color: var(--mm-ochre, #b5762a); background: rgba(181, 118, 42, 0.06); } .mm-periodo-congelado { font-size: 0.78rem; font-style: italic; color: var(--mm-muted); flex-basis: 100%; } .mm-periodo-fila .mm-btn-sm { margin-left: auto; } .mm-btn-sm { padding: 0.35rem 0.8rem; font-size: 0.82rem; }