/* =========================================================
Merak Empresas y Productos — hoja de estilos
Paleta de marca: naranja, blanco, negro.
Este archivo solo se carga en las páginas del directorio,
nunca afecta el resto del sitio.
========================================================= */
/* Las secciones "a todo el ancho" (barra superior, encabezado del
directorio) usan el truco de 100vw + margen negativo para salirse del
contenedor angosto de la página. En computadoras con la barra de scroll
vertical visible, 100vw es unos 15px más ancho que el área realmente
visible (100vw incluye el grosor de esa barra), lo que generaba un
desborde horizontal que cortaba el botón "Publicar mi empresa" y el
enlace "Explorar todo" contra el borde derecho. Esta línea evita ese
desborde; como esta hoja de estilos solo se carga en las páginas del
plugin, no afecta el resto del sitio. */
body { overflow-x: hidden; }
/* OJO: la franja "Hola, [correo]" (la barra de administración de
WordPress — "Howdy" traducido al español es "Hola") YA NO se esconde
acá con CSS. Se probó (display:none + "html{margin-top:0}") y no
funcionaba bien: WordPress imprime su propio en el DESPUÉS de esta hoja de estilos,
así que con la misma especificidad (html + !important) siempre ganaba
el de WordPress por cargar al final, dejando un hueco en blanco del
tamaño de la barra aunque la barra en sí ya no se viera. La forma
correcta es evitar que WordPress la programe desde el principio — ver
merak_ep_ocultar_barra_admin() en merak-empresas-productos.php, que
usa show_admin_bar(false), la función nativa para esto. */
.merak-ep {
--merak-naranja: #E8642C;
--merak-naranja-oscuro: #C94F1E;
--merak-naranja-claro: #FF8A50;
/* Verde: color de acento propio del directorio B2B (naranja sigue
siendo el color del directorio general) — mismo patrón de 3 tonos
que el naranja, para poder armar un degradado equivalente. */
--merak-verde: #1E9E5A;
--merak-verde-oscuro: #147A43;
--merak-verde-claro: #4CC98A;
--merak-negro: #1A1A1A;
--merak-gris: #666666;
--merak-gris-claro: #F4F4F4;
--merak-blanco: #FFFFFF;
--merak-radio: 14px;
--merak-gradiente: linear-gradient(135deg, var(--merak-naranja-claro) 0%, var(--merak-naranja) 45%, var(--merak-naranja-oscuro) 100%);
--merak-gradiente-verde: linear-gradient(135deg, var(--merak-verde-claro) 0%, var(--merak-verde) 45%, var(--merak-verde-oscuro) 100%);
--merak-sombra-suave: 0 10px 30px rgba(26,26,26,0.08);
/* Sombra más marcada, para paneles que flotan sobre un fondo ahora
blanco/gris muy claro (ver .merak-directorio-cuerpo): con el fondo
casi sin color, --merak-sombra-suave ya no alcanza para que el ojo
distinga dónde termina el panel blanco y empieza el fondo. */
--merak-sombra-flotante: 0 18px 40px rgba(26,26,26,0.12), 0 3px 10px rgba(26,26,26,0.06);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
color: var(--merak-negro);
box-sizing: border-box;
/* OJO — el "both" que tenía esto antes (animation: ... both;) era la
verdadera causa de que el menú hamburgués del panel (ver
".merak-panel-menu-envoltorio" más abajo) se viera perfecto en
celular pero NINGÚN toque le llegara a un enlace — todo se lo comía
el fondo oscurecido de atrás. La razón es sutil: cualquier elemento
con una animación CSS cuyo "animation-fill-mode" sea "forwards" o
"both" pasa a ser, por regla del propio estándar, su PROPIO contexto
de apilamiento de forma permanente — no importa que la animación ya
haya terminado hace rato, ni que los valores finales (opacity:1,
transform:none) sean, de por sí, invisibles/neutros. Como TODO
".merak-ep" (y ".merak-panel" es uno) tenía esta animación de
aparición con "both", ".merak-panel" quedaba atrapado como contexto
de apilamiento propio para siempre — eso "encapsulaba" el z-index
alto del menú (201) dentro de él, así que ya no competía de igual a
igual con el fondo oscurecido (z-index:190, fuera de ".merak-panel")
y siempre terminaba pintado (y respondiendo a los toques) por debajo.
Quitar "both" no cambia en nada cómo se ve la animación (los valores
por defecto de opacity y transform ya son exactamente los mismos que
deja el "to" del keyframe, así que antes y después de la animación se
ve idéntico) — solo evita que el elemento quede marcado como contexto
de apilamiento para siempre después de que la animación terminó. */
animation: merak-aparecer 0.5s ease;
}
.merak-ep *, .merak-ep *::before, .merak-ep *::after { box-sizing: inherit; }
@keyframes merak-aparecer {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.merak-ep { animation: none; }
}
.merak-ep h1, .merak-ep h2, .merak-ep h3 { color: var(--merak-negro); line-height: 1.25; }
.merak-ep h2 { position: relative; padding-bottom: 10px; }
.merak-ep h2::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 46px;
height: 4px;
border-radius: 999px;
background: var(--merak-gradiente);
}
.merak-ep a { color: var(--merak-naranja-oscuro); text-decoration: none; transition: color 0.15s ease; }
.merak-ep a:hover { text-decoration: underline; }
/* ============================================================
Barra de navegación superior, estilo marketplace: logo + buscador +
accesos a la derecha, y una segunda fila con las categorías. Se agrega
arriba del contenido de cada página del directorio (ver navbar.php),
siempre debajo del encabezado real del sitio, nunca reemplazándolo.
============================================================ */
/* position: fixed (en vez del truco de 100vw + margen negativo) porque el
tema/Elementor tiene algún contenedor con overflow recortado más angosto
que la pantalla completa, y ese truco quedaba cortado por ese
contenedor. "fixed" saca la barra del flujo normal y la ancla
directamente a la ventana del navegador, sin depender del ancho de
ningún contenedor intermedio — por eso el botón y "Explorar todo" ya no
se cortan. Como "fixed" saca la barra del flujo, el contenido que sigue
necesita un espacio reservado arriba (ver ".merak-navbar-superior +
.merak-ep" más abajo) para que no quede tapado debajo de la barra. */
.merak-navbar-superior {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 200;
background: var(--merak-blanco);
animation: none; /* no repetir el fade-in general en algo que queda pegado arriba */
}
/* Si Sebastián ve el sitio con la sesión de WordPress iniciada, la barra
de administración de WordPress ocupa los primeros 32px (46px en
celulares) arriba de todo; sin esto, nuestra barra quedaría tapada
detrás de ella. Un visitante normal (sin sesión) nunca tiene esa barra,
así que a él no le cambia nada. */
body.admin-bar .merak-navbar-superior { top: 32px; }
@media screen and (max-width: 782px) {
body.admin-bar .merak-navbar-superior { top: 46px; }
}
.merak-navbar-superior::after {
content: "";
display: block;
height: 3px;
background: var(--merak-gradiente);
}
/* Espacio reservado arriba del contenido de cada página para compensar que
la barra ahora está "fixed" (fuera del flujo normal). Es un div propio
(ver merak_ep_navbar_con_espaciador() en navbar.php) que siempre viaja
pegado a la barra, en vez de un selector que dependa de qué envoltorio
HTML use cada página — así funciona igual sin importar qué shortcode
sea, incluido el formulario de crear empresa que no trae su propio
contenedor ".merak-ep". */
.merak-navbar-espaciador {
height: 148px;
}
@media (max-width: 900px) {
.merak-navbar-espaciador {
height: 205px; /* el buscador baja a su propia fila y la barra crece */
}
}
.merak-navbar-fila-1 {
/* Sin max-width: en pantallas anchas, el logo y los accesos deben
quedar pegados a cada esquina (con solo el padding como respiro),
no centrados dejando un vacío grande antes del borde real. */
display: flex;
align-items: center;
gap: 32px;
padding: 24px clamp(20px, 4vw, 44px);
}
.merak-navbar-logo {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none !important;
flex-shrink: 0;
}
.merak-navbar-logo-marca {
width: 54px;
height: 54px;
border-radius: 13px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
}
.merak-navbar-logo-marca-oscuro { background: var(--merak-negro); }
.merak-navbar-logo-marca-claro { background: var(--merak-blanco); border: 1px solid #eee; }
.merak-navbar-logo-marca img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.merak-navbar-logo-texto { display: flex; flex-direction: column; line-height: 1; font-size: 28px; font-weight: 800; letter-spacing: -0.5px; color: var(--merak-negro); }
.merak-navbar-logo-texto-sub { margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--merak-naranja); }
.merak-navbar-buscar {
/* Sin flex:1 a propósito: el buscador ya no "flota" en el medio de la
barra, se agrupa junto con los accesos en la esquina derecha (el
margin-left:auto empuja todo ese grupo hacia allá, dejando el hueco
entre el logo y el buscador en vez de entre el buscador y el botón). */
flex: 0 0 420px;
margin-left: auto;
display: flex;
align-items: center;
background: var(--merak-gris-claro);
border-radius: 999px;
padding: 6px 6px 6px 24px;
transition: background 0.2s ease, box-shadow 0.2s ease;
}
.merak-navbar-buscar:focus-within { background: var(--merak-blanco); box-shadow: 0 0 0 2px var(--merak-naranja); }
.merak-navbar-buscar input[type=search] { flex: 1; border: none; background: transparent; outline: none; font-size: 17px; padding: 13px 0; color: var(--merak-negro); font-family: inherit; }
.merak-navbar-buscar button {
border: 2px solid var(--merak-naranja);
background: var(--merak-blanco);
color: var(--merak-naranja-oscuro);
width: 46px;
height: 46px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.merak-navbar-buscar button:hover {
background: var(--merak-gradiente);
color: var(--merak-blanco);
border-color: transparent;
transform: scale(1.08) rotate(8deg);
}
.merak-navbar-acciones { display: flex; align-items: center; gap: 24px; flex-shrink: 0; }
/* Botón hamburguesa: solo se muestra en celular (ver el breakpoint de
520px más abajo) — en escritorio/tablet queda oculto porque ahí los
enlaces/botones de ".merak-navbar-acciones" ya caben sueltos. Las tres
rayitas se convierten en una "X" con transform cuando el menú está
abierto (clase ".merak-abierto", la misma convención que ya usa el
selector de ubicación de la ficha de empresa). */
.merak-navbar-hamburguesa {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
width: 44px;
height: 44px;
border-radius: 12px;
border: 2px solid var(--merak-negro);
background: var(--merak-blanco);
padding: 0;
cursor: pointer;
flex-shrink: 0;
transition: background 0.2s ease, border-color 0.2s ease;
}
.merak-navbar-hamburguesa span {
display: block;
width: 20px;
height: 2px;
border-radius: 2px;
background: var(--merak-negro);
transition: transform 0.25s ease, opacity 0.2s ease, background 0.2s ease;
}
.merak-navbar-hamburguesa:hover { border-color: var(--merak-naranja); }
.merak-navbar-hamburguesa.merak-abierto { background: var(--merak-negro); border-color: var(--merak-negro); }
.merak-navbar-hamburguesa.merak-abierto span { background: var(--merak-blanco); }
.merak-navbar-hamburguesa.merak-abierto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.merak-navbar-hamburguesa.merak-abierto span:nth-child(2) { opacity: 0; }
.merak-navbar-hamburguesa.merak-abierto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Panel desplegable del menú hamburgués — fuera del breakpoint de celular
queda con "display:none" a propósito (además del atributo HTML
"hidden"), como red de seguridad para que nunca se vea suelto en
escritorio/tablet aunque algo lo abriera por error. Dentro del
breakpoint se posiciona pegado justo debajo de ".merak-navbar-fila-1"
(que es su ancestro con position:relative — ver ese breakpoint), tapando
la barra de categorías que queda debajo mientras está abierto, como
cualquier menú/"drawer" de navegación de celular. */
.merak-navbar-menu-movil { display: none; }
.merak-navbar-enlace {
color: var(--merak-negro) !important;
text-decoration: none !important;
font-size: 17px;
font-weight: 700;
white-space: nowrap;
position: relative;
transition: color 0.2s ease;
}
.merak-navbar-enlace::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -4px;
height: 2px;
background: var(--merak-gradiente);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.25s ease;
}
.merak-navbar-enlace:hover { color: var(--merak-naranja-oscuro) !important; }
.merak-navbar-enlace:hover::after { transform: scaleX(1); }
.merak-navbar-separador { width: 1px; height: 28px; background: #e2e2e2; }
/* El botón principal nace blanco con borde/letra naranja ("entre blanco y
naranja") y se llena con el degradado de marca al pasar el mouse — en vez
de nacer ya relleno de naranja como el resto de los botones del sitio. El
selector compuesto (dos clases) le gana en especificidad a .merak-btn sin
importar el orden en el archivo, así no hace falta reordenar nada. */
.merak-navbar-fila-1 .merak-navbar-btn-vender {
background: var(--merak-blanco) !important;
color: var(--merak-naranja-oscuro) !important;
border: 2px solid var(--merak-naranja);
padding: 15px 32px;
font-size: 17px;
font-weight: 700;
white-space: nowrap;
box-shadow: none;
}
.merak-navbar-fila-1 .merak-navbar-btn-vender::before {
background: linear-gradient(120deg, transparent, rgba(232,100,44,0.3), transparent);
}
.merak-navbar-fila-1 .merak-navbar-btn-vender:hover {
background: var(--merak-gradiente) !important;
color: var(--merak-blanco) !important;
border-color: transparent;
}
/* Botón secundario "Negocios B2B": mismo estilo de contorno-que-se-rellena
que "Publicar mi empresa", pero en negro en vez de naranja, para que se
note que es una acción distinta (secundaria) sin competir por atención
con el botón naranja principal. Es genérico (no ".merak-navbar-...") porque
se reutiliza en dos lugares: la barra superior y la barra de filtros del
directorio; cada contexto ajusta solo su tamaño más abajo. */
/* Selector compuesto ".merak-btn.merak-btn-b2b" (no solo ".merak-btn-b2b") a
propósito: tiene más especificidad que ".merak-btn" (más abajo en este
archivo, también con !important en "color"), así que gana siempre sin
depender del orden de las reglas en el archivo. Con solo una clase, ambas
reglas empatan en especificidad y gana la que esté más abajo en el
archivo (".merak-btn"), lo que dejaba el botón con texto blanco sobre
fondo blanco — invisible hasta pasarle el mouse encima. */
.merak-btn.merak-btn-b2b {
background: var(--merak-blanco) !important;
color: var(--merak-negro) !important;
border: 2px solid var(--merak-negro);
font-weight: 700;
white-space: nowrap;
box-shadow: none;
}
.merak-btn.merak-btn-b2b::before {
background: linear-gradient(120deg, transparent, rgba(0,0,0,0.15), transparent);
}
.merak-btn.merak-btn-b2b:hover {
background: var(--merak-negro) !important;
color: var(--merak-blanco) !important;
border-color: transparent;
}
.merak-navbar-fila-1 .merak-btn-b2b {
padding: 15px 32px;
font-size: 17px;
}
.merak-directorio-filtros .merak-btn-b2b {
padding: 13px 24px;
font-size: 14px;
text-align: center;
}
/* Barra deslizante ("marquee") con las categorías, en vez de la fila con
menús desplegables que había antes — mismo mecanismo que el código que
mandaste: dos copias idénticas del listado una al lado de la otra
(.merak-navbar-marquee-grupo), animadas con translateX(0 → -50%) en
bucle infinito, así el "salto" al reiniciar la animación es invisible
(la segunda copia ya está exactamente donde estaba la primera). Los
nombres siguen siendo enlaces de verdad a cada categoría (no es solo
decorativo), y la animación se pausa al pasar el mouse o el teclado por
encima para poder hacer clic con comodidad. */
.merak-navbar-marquee {
overflow: hidden;
background: var(--merak-naranja);
border-top: 2px solid var(--merak-negro);
border-bottom: 2px solid var(--merak-negro);
white-space: nowrap;
}
.merak-navbar-marquee-b2b { background: var(--merak-verde); }
.merak-navbar-marquee-pista {
display: inline-flex;
width: max-content;
animation: merak-marquee 32s linear infinite;
}
.merak-navbar-marquee:hover .merak-navbar-marquee-pista,
.merak-navbar-marquee:focus-within .merak-navbar-marquee-pista { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.merak-navbar-marquee-pista { animation: none; }
}
.merak-navbar-marquee-grupo { display: inline-flex; align-items: center; }
.merak-navbar-marquee-enlace {
font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-weight: 600;
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--merak-negro) !important;
text-decoration: none !important;
padding: 14px 20px;
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
opacity: 0.88;
transition: opacity 0.15s ease;
}
.merak-navbar-marquee-enlace:hover { opacity: 1; text-decoration: underline !important; }
.merak-navbar-marquee-enlace::before { content: "✦"; }
@keyframes merak-marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes merak-menu-movil-entrada {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.merak-navbar-menu-movil { animation: none !important; }
}
/* Botones — con brillo animado al pasar el mouse, para una sensación más
tecnológica que un botón plano tradicional. */
.merak-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
overflow: hidden;
background: var(--merak-gradiente);
background-size: 160% 160%;
background-position: 0% 50%;
color: var(--merak-blanco) !important;
padding: 12px 26px;
border-radius: 999px;
font-weight: 600;
letter-spacing: 0.2px;
border: none;
cursor: pointer;
transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s ease, background-position 0.5s ease;
text-decoration: none !important;
}
.merak-btn::before {
content: "";
position: absolute;
top: 0;
left: -60%;
width: 40%;
height: 100%;
background: linear-gradient(120deg, transparent, rgba(255,255,255,0.45), transparent);
transform: skewX(-20deg);
transition: left 0.6s ease;
pointer-events: none;
}
.merak-btn:hover { background-position: 100% 50%; transform: translateY(-3px) scale(1.015); box-shadow: 0 10px 22px rgba(232,100,44,0.4); }
.merak-btn:hover::before { left: 130%; }
.merak-btn:active { transform: translateY(-1px) scale(0.99); }
.merak-btn-secundario { background: var(--merak-negro); background-image: linear-gradient(135deg, #2b2b2b, #111); }
.merak-btn-secundario:hover { box-shadow: 0 10px 22px rgba(0,0,0,0.28); }
.merak-btn-whatsapp { background: #25D366; background-image: linear-gradient(135deg, #34e07c, #1DA851); }
.merak-btn-whatsapp:hover { box-shadow: 0 10px 22px rgba(37,211,102,0.35); }
.merak-btn-peligro { background: #B3261E; background-image: linear-gradient(135deg, #E5473C, #941F17); }
.merak-btn-peligro:hover { box-shadow: 0 10px 22px rgba(179,38,30,0.35); }
.merak-btn:disabled,
.merak-btn[disabled] {
background: #b9b9b9;
background-image: none;
color: #6f6f6f !important;
cursor: not-allowed;
box-shadow: none;
}
.merak-btn:disabled:hover,
.merak-btn[disabled]:hover {
transform: none;
box-shadow: none;
background-position: 0% 50%;
}
.merak-btn:disabled::before,
.merak-btn[disabled]::before {
display: none;
}
.merak-link-peligro { color: #B3261E !important; }
/* Caja de "zona de peligro" (ej. eliminar cuenta). */
.merak-caja-peligro {
margin-top: 32px;
border: 1px solid #F3C9C5;
background: #FFF8F7;
border-radius: var(--merak-radio);
padding: 22px;
}
.merak-caja-peligro h3 { color: #941F17; margin-top: 0; }
/* Formularios */
.merak-form { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.merak-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; }
.merak-form input[type=text], .merak-form input[type=email], .merak-form input[type=password],
.merak-form input[type=url], .merak-form input[type=number], .merak-form input[type=search],
.merak-form input[type=file], .merak-form select, .merak-form textarea {
font-weight: 400;
padding: 10px 14px;
border: 1px solid #ddd;
border-radius: 10px;
font-size: 15px;
background: var(--merak-blanco);
}
.merak-form input[type=text], .merak-form input[type=email], .merak-form input[type=password],
.merak-form input[type=url], .merak-form input[type=number], .merak-form input[type=search],
.merak-form select, .merak-form textarea {
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.merak-form input:focus, .merak-form select:focus, .merak-form textarea:focus {
outline: none;
border-color: var(--merak-naranja);
box-shadow: 0 0 0 4px rgba(232,100,44,0.15);
}
.merak-form-botones { display: flex; gap: 12px; flex-wrap: wrap; }
.merak-checkbox { flex-direction: row !important; align-items: center; gap: 8px !important; }
/* Vista previa de imagen (agregada por merak.js al elegir un archivo nuevo,
o ya presente al cargar la página si el campo tenía una imagen guardada
— ver company-form.php). max-width/margin/border-radius quedan acá para
que la miniatura del archivo NUEVO (JS le pone esos mismos valores en
línea) y la de la imagen YA GUARDADA (esta regla) se vean idénticas. */
.merak-preview-imagen { display: block; max-width: 140px; margin-top: 8px; border-radius: 10px; animation: merak-aparecer 0.35s ease both; box-shadow: var(--merak-sombra-suave); }
.merak-preview-actual { display: block; }
.merak-preview-actual small { display: block; margin-top: 4px; color: var(--merak-gris); font-weight: 400; }
/* Mensajes */
.merak-mensaje { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-weight: 500; }
.merak-mensaje-exito { background: #E5F6EA; color: #1E7A34; }
.merak-mensaje-error { background: #FCEAEA; color: #B3261E; }
.merak-aviso { background: var(--merak-gris-claro); padding: 16px; border-radius: 10px; }
.merak-caja-plan { background: var(--merak-gris-claro); border-radius: var(--merak-radio); padding: 24px; margin-top: 16px; border-left: 4px solid var(--merak-naranja); }
.merak-caja-plan h3 { margin-top: 0; }
.merak-nota { color: var(--merak-gris); font-size: 13px; }
/* Badges */
.merak-badge { display: inline-block; background: var(--merak-gris-claro); color: var(--merak-negro); padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; margin-right: 6px; }
.merak-badge-secundario { background: #FCE3D6; }
.merak-badge-agotado { background: #FCEAEA; color: #B3261E; }
.merak-estado-publish { background: #E5F6EA; color: #1E7A34; }
.merak-estado-draft { background: #F4F4F4; }
.merak-estado-pending { background: #FFF4E0; color: #8A5A00; }
.merak-estado-merak_rechazada, .merak-estado-merak_suspendida { background: #FCEAEA; color: #B3261E; }
/* Fondo "aurora": manchas de color difuminadas que flotan muy lento,
detrás del contenido. Ver merak_ep_fondo_aurora() en helpers.php — se
reutiliza en el login, el directorio y la ficha de empresa para que la
plataforma se sienta "viva" sin depender de JavaScript (es puro CSS; si
quieres, merak.js le agrega un ligero movimiento extra según el mouse). */
.merak-aurora { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; border-radius: inherit; }
.merak-aurora span { position: absolute; width: 240px; height: 240px; border-radius: 50%; filter: blur(50px); }
.merak-aurora span:nth-child(1) { background: radial-gradient(circle, var(--merak-naranja-claro), transparent 72%); top: -18%; left: -10%; opacity: 0.55; }
.merak-aurora span:nth-child(2) { background: radial-gradient(circle, var(--merak-naranja), transparent 72%); bottom: -22%; right: -8%; opacity: 0.4; width: 280px; height: 280px; }
.merak-aurora span:nth-child(3) { background: radial-gradient(circle, #FFD1B0, transparent 72%); top: 25%; right: 15%; width: 170px; height: 170px; opacity: 0.35; }
@media (prefers-reduced-motion: no-preference) {
.merak-aurora span { animation: merak-aurora-flotar 17s ease-in-out infinite; }
.merak-aurora span:nth-child(2) { animation-duration: 21s; animation-direction: reverse; }
.merak-aurora span:nth-child(3) { animation-duration: 25s; }
}
@keyframes merak-aurora-flotar {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(5%, 7%) scale(1.1); }
66% { transform: translate(-4%, -5%) scale(0.94); }
}
/* Variante verde del fondo "aurora", exclusiva del directorio B2B (ver
merak_ep_fondo_aurora('verde') en helpers.php) — mismas 3 manchas,
mismo movimiento, solo cambia el color para darle identidad propia a
"Negocios B2B" frente al naranja del directorio general. */
.merak-aurora-verde span:nth-child(1) { background: radial-gradient(circle, var(--merak-verde-claro), transparent 72%); }
.merak-aurora-verde span:nth-child(2) { background: radial-gradient(circle, var(--merak-verde), transparent 72%); }
.merak-aurora-verde span:nth-child(3) { background: radial-gradient(circle, #B6F0CE, transparent 72%); }
/* ------------------------------------------------------------------
Autenticación (rediseño a pedido de Sebastián, a partir de una imagen
de referencia): tarjeta oscura de dos columnas — el formulario a la
izquierda, un panel de marca a la derecha — en vez del formulario
suelto sobre una tarjeta blanca de antes. Mismo lenguaje visual oscuro
"premium" que ya tiene el perfil de empresa (fondo con puntos +
degradado casi negro), para que el inicio de sesión se sienta parte
del mismo sitio. OJO: la imagen de referencia traía su propio
personaje ilustrado (un panda) — ese NO se usa; el panel derecho
muestra el logo real de Merak (ver merak_ep_render_auth_lateral() en
auth.php).
.merak-auth-pagina es la franja de fondo NEGRA que ocupa todo el ancho
de la ventana (misma técnica de "sangrado completo" — 100vw + márgenes
negativos — que ya usa .merak-directorio-encabezado), con el efecto
"aurora" detrás (las mismas manchas de color que se mueven solas en
toda la web, ver @keyframes merak-aurora-flotar más arriba: esa
animación es la que pidió Sebastián, en vez de inventar una nueva). La
tarjeta .merak-auth queda centrada adentro, tanto horizontal (flexbox)
como verticalmente: min-height le resta el alto de la barra fija de
navegación (148px, o 205px en celular — el mismo valor que
.merak-navbar-espaciador de arriba) al 100% de la ventana, así la
tarjeta queda centrada en el espacio que realmente se ve debajo de la
barra, no en toda la altura del documento. */
.merak-auth-pagina {
position: relative;
overflow: hidden;
width: 100vw;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
background:
radial-gradient(circle at 1px 1px, rgba(255,255,255,0.045) 1.4px, transparent 1.5px) 0 0 / 26px 26px,
linear-gradient(160deg, #101010, var(--merak-negro) 55%, #0b0b0b);
min-height: calc(100vh - 148px);
}
@media (max-width: 900px) {
.merak-auth-pagina { min-height: calc(100vh - 205px); }
}
.merak-auth {
max-width: 920px;
width: 100%;
margin: 0 auto;
position: relative;
z-index: 1;
border-radius: 20px;
overflow: hidden;
background:
radial-gradient(circle at 1px 1px, rgba(255,255,255,0.07) 1.4px, transparent 1.5px) 0 0 / 26px 26px,
linear-gradient(160deg, #101010, var(--merak-negro) 55%, #0b0b0b);
/* Sombra "clara" a pedido de Sebastián: sobre el fondo negro de
.merak-auth-pagina, la sombra oscura de siempre (--merak-sombra-
flotante) es invisible — hacía falta un resplandor claro alrededor
del borde de la tarjeta para que se distinga del fondo, en vez de
una sombra que oscurece. */
box-shadow:
0 0 0 1px rgba(255,255,255,0.09),
0 0 70px rgba(232,100,44,0.18),
0 25px 70px rgba(0,0,0,0.55);
}
.merak-auth-cuerpo { display: grid; grid-template-columns: 1fr 300px; align-items: stretch; }
.merak-auth-principal { padding: clamp(28px, 4vw, 44px); }
.merak-auth-principal h2 { color: var(--merak-blanco); margin-top: 0; }
.merak-auth-tabs { display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 2px solid rgba(255,255,255,0.12); flex-wrap: wrap; }
.merak-auth-tabs a { padding: 10px 6px; font-weight: 600; color: rgba(255,255,255,0.55); border-bottom: 3px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; }
.merak-auth-tabs a.activo { color: var(--merak-naranja-claro); border-color: var(--merak-naranja); }
.merak-auth-social { margin: 0 0 20px; text-align: left; animation: merak-social-entrada 0.5s ease both; animation-delay: 0.1s; }
.merak-auth-social p { color: var(--merak-blanco); margin: 0 0 12px; text-align: left; }
/* "Continuar con:" queda a la izquierda (alineado con el resto del
formulario, como "Correo o usuario" más abajo). Los botones de Nextend
van en su propio envoltorio (.merak-auth-social-botones, agregado en
merak_ep_shortcode_auth()) con su propio ancho y centrado, independiente
del texto — así uno queda a la izquierda y el otro centrado, cada uno
con su propia alineación. */
.merak-auth-social-botones { max-width: 420px; margin: 0 auto; text-align: center; }
/* Los botones de Google/Facebook los pinta el plugin Nextend Social Login,
no nuestro propio código. OJO — versión anterior de esta regla forzaba
width:100% con selectores por substring (ej. [class*="nsl-button"]), pero
eso también agarraba el ÍCONO interno del botón (su clase real es algo
como "nsl-button-svg-container", que también contiene el texto
"nsl-button" — un selector por substring no distingue eso de la clase
exacta "nsl-button"), y al forzarle el 100% de ancho empujaba el texto
"Continue with Facebook/Google" fuera de la vista. Por eso ahora:
1) NO se toca el ancho de nada por dentro del botón — se deja que
Nextend calcule el suyo con su propio JS, tal como lo diseñó.
2) Solo se limita el ancho del CONTENEDOR (.merak-auth-social, con
max-width) y se centra con margin:auto — el botón, al medir un
contenedor más angosto, sale más chico y centrado sin que se le
toque nada por dentro.
3) El hover/la animación sí usan selectores de clase exacta (.nsl-button)
en vez de substring, por la misma razón de arriba. */
.merak-auth-social .nsl-container { margin: 0 auto !important; }
.merak-auth-social .nsl-button,
.merak-auth-social a.nsl-button,
.merak-auth-social button.nsl-button {
transition: transform 0.2s cubic-bezier(.2,.8,.2,1), box-shadow 0.2s ease, filter 0.2s ease !important;
}
.merak-auth-social .nsl-button:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 10px 24px rgba(0,0,0,0.4);
filter: brightness(1.06);
}
.merak-auth-social .nsl-button:active { transform: translateY(-1px) scale(1.0); }
@keyframes merak-social-entrada {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.merak-auth-social { animation: none; }
.merak-auth-social .nsl-button { transition: none !important; }
}
/* Etiquetas, campos y enlaces del formulario dentro de la tarjeta oscura:
.merak-form por defecto está pensado para fondos blancos (texto casi
negro, campos con borde gris claro) — acá se necesita la versión clara
sobre fondo oscuro. Selector con [type=...] a propósito, igual de
específico que la regla base de .merak-form en vez de más simple, para
que esta sí gane pase lo que pase el orden en que quede el archivo. */
.merak-auth .merak-form label { color: rgba(255,255,255,0.85); }
.merak-auth .merak-form input[type=text], .merak-auth .merak-form input[type=email], .merak-auth .merak-form input[type=password] {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.18);
color: var(--merak-blanco);
}
.merak-auth .merak-form input::placeholder { color: rgba(255,255,255,0.35); }
.merak-auth .merak-form a { color: var(--merak-naranja-claro); }
.merak-auth .merak-mensaje-exito { background: rgba(30,158,90,0.18); color: #6FE3A6; }
.merak-auth .merak-mensaje-error { background: rgba(179,38,30,0.2); color: #FF9A90; }
.merak-auth .merak-nota { color: rgba(255,255,255,0.5); font-size: 13px; }
/* Ícono dentro del campo (usuario/correo/contraseña), como en la imagen
de referencia. */
.merak-campo-icono { position: relative; display: flex; align-items: center; }
.merak-campo-icono svg { position: absolute; left: 14px; color: rgba(255,255,255,0.38); pointer-events: none; }
.merak-campo-icono input { width: 100%; padding-left: 40px !important; }
/* Botón de "ojito" para mostrar/ocultar la contraseña (ver
merak_ep_campo_clave() en helpers.php y el clic en merak.js). El campo de
candado a la izquierda usa la regla de arriba (posición left:14px); este
botón necesita quedar del lado derecho, así que su ícono se saca de esa
regla general con una selector más específico. */
.merak-campo-icono-clave input { padding-right: 40px !important; }
.merak-toggle-clave {
position: absolute;
right: 6px;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
background: none;
border: none;
border-radius: 8px;
color: rgba(255,255,255,0.4);
cursor: pointer;
transition: color 0.2s ease, background 0.2s ease;
}
.merak-campo-icono-clave .merak-toggle-clave svg { position: static; left: auto; color: inherit; pointer-events: none; }
.merak-toggle-clave:hover { color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.06); }
.merak-toggle-clave:focus-visible { outline: none; color: var(--merak-naranja-claro); background: rgba(255,255,255,0.06); }
.merak-toggle-clave.merak-mostrando { color: var(--merak-naranja-claro); }
/* Los dos íconos (ojo abierto / cerrado) viven siempre los dos en el HTML;
solo se muestra uno a la vez según si merak.js le agregó la clase
"merak-mostrando" al botón al hacer clic. Así, si JS no llega a cargar,
el botón simplemente no hace nada (sigue mostrando el ojo abierto) en vez
de quedar con los dos íconos superpuestos o vacío. */
.merak-toggle-clave .merak-icono-ojo, .merak-toggle-clave .merak-icono-ojo-cerrado { display: flex; align-items: center; }
.merak-toggle-clave .merak-icono-ojo-cerrado { display: none; }
.merak-toggle-clave.merak-mostrando .merak-icono-ojo { display: none; }
.merak-toggle-clave.merak-mostrando .merak-icono-ojo-cerrado { display: flex; }
/* Panel lateral de marca: el mismo efecto "aurora" que el resto del
sitio, detrás del emblema del logo real. En pantallas angostas se
oculta (no en display:none puro sino quitando la columna) para no
quitarle espacio al formulario, que es lo importante en un celular. */
.merak-auth-lateral {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 32px;
border-left: 1px solid rgba(255,255,255,0.08);
}
.merak-auth-lateral-cuerpo { position: relative; z-index: 1; text-align: center; }
.merak-auth-lateral-logo {
display: flex;
align-items: center;
justify-content: center;
width: 88px;
height: 88px;
margin: 0 auto 18px;
border-radius: 50%;
font-size: 40px;
box-shadow: 0 14px 30px rgba(0,0,0,0.4);
border: 4px solid rgba(255,255,255,0.18);
overflow: hidden;
}
.merak-auth-lateral-logo img { width: 100%; height: 100%; object-fit: contain; }
.merak-auth-lateral-logo-claro { background: var(--merak-blanco); }
/* Imagen propia del panel de login (ver merak_ep_logo_auth_id()): a
diferencia del logo del sitio (que puede llegar con fondo transparente,
por eso usa object-fit:contain arriba), esta imagen suele venir ya
diseñada como una ilustración cuadrada de fondo sólido — "cover" la
recorta para llenar el círculo por completo, sin dejar barras vacías
a los lados. El fondo oscuro de respaldo solo se nota si la imagen no
es perfectamente cuadrada. */
.merak-auth-lateral-logo-imagen { background: var(--merak-negro); }
.merak-auth-lateral-logo-imagen img { object-fit: cover; }
.merak-auth-lateral-cuerpo h3 { color: var(--merak-blanco); margin: 0 0 10px; font-size: 19px; }
.merak-auth-lateral-cuerpo p { color: var(--merak-blanco); font-size: 13.5px; line-height: 1.6; margin: 0; }
@media (max-width: 780px) {
.merak-auth-cuerpo { grid-template-columns: 1fr; }
.merak-auth-lateral { display: none; }
}
/* Página de agradecimiento ([merak_gracias], ver includes/pagina-gracias.php)
— mismo truco de fondo "full-bleed" (100vw) y la misma aurora oscura que
.merak-auth-pagina de arriba, para que se sienta parte de la misma familia
visual del sitio en vez de una pantalla suelta, con el agregado de un
confeti cayendo (generado en PHP, con posición/velocidad al azar por
pieza) y el zorro de la marca saludando con una animación. */
.merak-pagina-gracias {
position: relative;
overflow: hidden;
width: 100vw;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 60px 20px;
background:
radial-gradient(circle at 1px 1px, rgba(255,255,255,0.045) 1.4px, transparent 1.5px) 0 0 / 26px 26px,
linear-gradient(160deg, #101010, var(--merak-negro) 55%, #0b0b0b);
min-height: calc(100vh - 148px);
}
@media (max-width: 900px) {
.merak-pagina-gracias { min-height: calc(100vh - 205px); }
}
.merak-pagina-gracias-cuerpo {
position: relative;
z-index: 2;
max-width: 560px;
width: 100%;
background: var(--merak-blanco);
border-radius: 24px;
padding: clamp(32px, 5vw, 56px) clamp(24px, 5vw, 44px);
box-shadow:
0 0 0 1px rgba(255,255,255,0.09),
0 0 70px rgba(232,100,44,0.18),
0 25px 70px rgba(0,0,0,0.55);
}
.merak-pagina-gracias-zorro {
display: inline-block;
font-size: 72px;
line-height: 1;
animation: merak-gracias-saludo 1.7s ease-in-out infinite;
}
@keyframes merak-gracias-saludo {
0%, 100% { transform: rotate(0deg) translateY(0); }
15% { transform: rotate(-14deg) translateY(-6px); }
30% { transform: rotate(10deg) translateY(-11px); }
45% { transform: rotate(-9deg) translateY(-4px); }
60% { transform: rotate(7deg) translateY(-9px); }
78% { transform: rotate(0deg) translateY(0); }
}
.merak-pagina-gracias-cuerpo h1 { margin: 18px 0 10px; font-size: clamp(26px, 4vw, 34px); }
.merak-pagina-gracias-cuerpo p { color: var(--merak-gris); font-size: 16px; line-height: 1.6; margin: 0 0 26px; }
/* Confeti: piezas de colores cayendo desde arriba de la pantalla, con
posición horizontal, demora y duración al azar por pieza (asignadas en
PHP al generar el markup) para que no caigan todas "en fila" — es pura
animación CSS, sin depender de que GSAP llegue a cargar. */
.merak-confeti { position: absolute; inset: 0; overflow: hidden; z-index: 1; pointer-events: none; }
.merak-confeti span {
position: absolute;
top: -12%;
width: 9px;
height: 15px;
opacity: 0.85;
border-radius: 2px;
animation-name: merak-confeti-caer;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.merak-confeti span:nth-child(odd) { border-radius: 50%; }
.merak-confeti span:nth-child(3n) { width: 7px; height: 7px; }
@keyframes merak-confeti-caer {
0% { transform: translateY(0) rotate(0deg); opacity: 0.9; }
85% { opacity: 0.9; }
100% { transform: translateY(115vh) rotate(360deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.merak-pagina-gracias-zorro,
.merak-confeti span { animation: none; }
}
/* Selector de secciones ([merak_selector_secciones], ver
includes/selector-seccion.php) — el nuevo "hub" que se recomienda como
punto de entrada antes de /empresas-productos/ o /negocios-b2b/. Mismo
truco de fondo full-bleed oscuro que .merak-pagina-gracias de arriba,
pero con dos tarjetas de decisión (una por sección) en vez de un solo
mensaje de agradecimiento.
A diferencia de .merak-pagina-gracias (que sí se queda con la cabecera
real del tema por encima y usa el truco de "100vw + márgenes negativos"
para ser full-bleed DENTRO del flujo normal de la página), acá Sebastián
pidió que la pantalla use TODO el alto Y ancho de la ventana de verdad —
por eso esta usa "position: fixed" con las 4 esquinas en 0 en vez de ese
truco: queda anclada exactamente al viewport, sin importar si algún
contenedor del tema (el `.wp-site-blocks`, `.entry-content`, etc.) tiene
`overflow-x: hidden`, `max-width` o cualquier otra cosa que hubiera
recortado el "100vw + márgenes negativos" y dejado una franja en blanco
al costado (eso fue justo lo que pasó en la versión anterior). Además,
merak.js esconde por su cuenta la cabecera/pie real del tema y el
padding de sus contenedores en esta pantalla puntual (ver el bloque
"Pantalla completa del selector..." en merak.js) — aunque con
"position: fixed" ya ni hace falta que el resto de la página "colabore",
porque esta capa se dibuja por encima de todo lo demás sin importar
dónde quede colocada en el documento. */
.merak-selector-secciones {
position: fixed;
inset: 0;
z-index: 100000;
overflow-y: auto;
overflow-x: hidden;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 60px 20px;
background:
radial-gradient(circle at 1px 1px, rgba(255,255,255,0.045) 1.4px, transparent 1.5px) 0 0 / 26px 26px,
linear-gradient(160deg, #101010, var(--merak-negro) 55%, #0b0b0b);
}
body.merak-selector-pantalla-completa { margin: 0; padding: 0; overflow: hidden; }
/* Fondo animado: el mismo componente ".merak-aurora" que usa el resto del
sitio (ver merak_ep_fondo_aurora()), pero agrandado y con más recorrido
solo en esta pantalla — acá el fondo es todo el protagonismo (no hay
cabecera con texto encima tapándolo), así que puede moverse más sin
estorbar la lectura. */
.merak-selector-secciones .merak-aurora span { width: 420px; height: 420px; filter: blur(75px); opacity: 0.55; }
.merak-selector-secciones .merak-aurora span:nth-child(2) { width: 460px; height: 460px; background: radial-gradient(circle, var(--merak-verde-claro), transparent 72%); opacity: 0.45; }
.merak-selector-secciones .merak-aurora span:nth-child(3) { width: 320px; height: 320px; background: radial-gradient(circle, #FFD1B0, transparent 72%); }
@media (prefers-reduced-motion: no-preference) {
.merak-selector-secciones .merak-aurora span { animation-name: merak-selector-aurora-flotar; animation-duration: 7s; }
.merak-selector-secciones .merak-aurora span:nth-child(2) { animation-duration: 9s; }
.merak-selector-secciones .merak-aurora span:nth-child(3) { animation-duration: 11s; }
}
@keyframes merak-selector-aurora-flotar {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(60px, -70px) scale(1.15); }
66% { transform: translate(-50px, 50px) scale(0.92); }
}
/* Partículas flotantes (ver el bucle PHP en includes/selector-seccion.php):
emojis de productos (cajas, etiquetas, engranajes, herramientas...) que
suben desde abajo en bucle infinito, con posición/tamaño/velocidad al
azar por partícula, para que el fondo se sienta vivo Y relacionado con lo
que se ofrece en ambos directorios, en vez de un adorno genérico. */
.merak-selector-particulas { position: absolute; inset: 0; overflow: hidden; z-index: 1; pointer-events: none; }
.merak-selector-particulas span {
position: absolute;
bottom: -8%;
line-height: 1;
opacity: 0;
filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
animation-name: merak-selector-particula-subir;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
@keyframes merak-selector-particula-subir {
0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
12% { opacity: 0.85; }
50% { transform: translateY(-52vh) translateX(24px) rotate(12deg); }
88% { opacity: 0.8; }
100% { transform: translateY(-104vh) translateX(-18px) rotate(-10deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.merak-selector-particulas span,
.merak-selector-secciones .merak-aurora span { animation: none; }
}
.merak-selector-cuerpo {
position: relative;
z-index: 2;
max-width: 960px;
width: 100%;
}
.merak-selector-zorro { display: inline-block; font-size: clamp(64px, 8vw, 88px); line-height: 1; }
.merak-selector-cuerpo h1 { margin: 18px 0 12px; font-size: clamp(34px, 5.5vw, 54px); color: var(--merak-blanco); }
.merak-selector-cuerpo > p { color: #d4d4d4; font-size: clamp(17px, 2vw, 21px); line-height: 1.6; margin: 0 0 46px; }
.merak-selector-opciones {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
@media (max-width: 700px) {
.merak-selector-opciones { grid-template-columns: 1fr; }
}
.merak-selector-tarjeta {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
text-decoration: none !important;
background: var(--merak-blanco);
border-radius: 24px;
padding: clamp(36px, 5vw, 56px) clamp(26px, 4vw, 40px);
box-shadow: 0 0 0 1px rgba(255,255,255,0.09), 0 20px 50px rgba(0,0,0,0.45);
transition: transform .25s ease, box-shadow .25s ease;
}
.merak-selector-tarjeta:hover { transform: translateY(-8px) scale(1.015); }
/* Marca de agua grande y tenue detrás del contenido de cada tarjeta (una
caja para "Emprendedores", un engranaje para "Negocios B2B") — refuerza
el tema de "productos" sin competir con el texto, que va por encima con
z-index. */
.merak-selector-tarjeta-marca-agua {
position: absolute;
top: -22px;
right: -22px;
font-size: 130px;
line-height: 1;
opacity: 0.07;
transform: rotate(12deg);
pointer-events: none;
}
.merak-selector-tarjeta-icono { position: relative; z-index: 1; font-size: clamp(52px, 6vw, 68px); line-height: 1; margin-bottom: 18px; }
.merak-selector-tarjeta-titulo { font-size: clamp(24px, 3vw, 30px); font-weight: 800; color: var(--merak-negro); margin-bottom: 12px; }
.merak-selector-tarjeta-texto { font-size: clamp(15px, 1.6vw, 17px); line-height: 1.6; color: var(--merak-gris); margin-bottom: 28px; }
.merak-selector-tarjeta-boton {
display: inline-block;
padding: 16px 34px;
border-radius: 999px;
font-weight: 700;
font-size: 16px;
color: var(--merak-blanco);
background: var(--merak-gradiente);
}
.merak-selector-tarjeta-naranja:hover { box-shadow: 0 0 0 1px rgba(255,255,255,0.09), 0 24px 60px rgba(232,100,44,0.4); }
.merak-selector-tarjeta-verde .merak-selector-tarjeta-boton { background: var(--merak-gradiente-verde); }
.merak-selector-tarjeta-verde:hover { box-shadow: 0 0 0 1px rgba(255,255,255,0.09), 0 24px 60px rgba(30,158,90,0.4); }
/* Directorio — la cabecera es una "tarjeta de cristal" (glassmorphism)
sobre la aurora, en vez de un fondo blanco plano. */
/* Cabecera del directorio: negro como color principal, con el naranja
reservado para degradados/acentos (aurora, resaltado del título, botón
principal) — igual al esquema que pediste. La sección "se sale" del
ancho del contenido y ocupa todo el ancho de la ventana (técnica
estándar de full-bleed con 100vw + márgenes negativos), en vez de
quedar como una tarjeta flotante con márgenes. */
.merak-directorio-encabezado {
position: relative;
overflow: hidden;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100vw;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
margin-top: 0;
margin-bottom: 0;
/* OJO: el padding-bottom NO debe ser más grande que el padding-top para
alargar la sección — eso deja el texto pegado arriba (todo el
espacio de más queda como hueco abajo, porque align-items:center
solo reparte el espacio SOBRANTE del alto de la caja, y sin
min-height la caja mide justo lo que ocupan el padding + el
contenido, sin sobrante que repartir). Para que la sección sea larga
Y el texto quede bien centrado dentro, el padding es simétrico y el
alto mínimo (min-height) es lo que la alarga — así sí hay espacio de
sobra para que align-items lo reparta parejo arriba y abajo. */
padding: 56px clamp(20px, 6vw, 90px);
min-height: 340px;
border-radius: 0;
background:
radial-gradient(circle at 1px 1px, rgba(255,255,255,0.09) 1.4px, transparent 1.5px) 0 0 / 26px 26px,
linear-gradient(160deg, #101010, var(--merak-negro) 55%, #0b0b0b);
box-shadow: inset 0 -1px 0 rgba(255,255,255,0.06);
}
.merak-directorio-encabezado > *:not(.merak-aurora) { position: relative; z-index: 1; }
.merak-directorio-encabezado .merak-aurora span { opacity: 0.75; }
.merak-directorio-encabezado-texto { max-width: 760px; }
.merak-directorio-encabezado h1 { margin: 10px 0 16px; font-size: clamp(38px, 6.5vw, 68px); font-weight: 800; letter-spacing: -1px; line-height: 1.05; color: var(--merak-blanco); }
.merak-directorio-encabezado .merak-resaltado {
background: var(--merak-gradiente);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--merak-naranja-claro);
}
.merak-directorio-encabezado .merak-eyebrow { color: var(--merak-naranja-claro); }
/* Título con un brillo degradado que recorre el texto en bucle,
automáticamente, sin necesitar que el usuario haga nada. */
.merak-titulo-animado {
background: linear-gradient(100deg,
var(--merak-blanco) 0%, var(--merak-blanco) 38%,
var(--merak-naranja-claro) 48%, var(--merak-naranja) 52%,
var(--merak-blanco) 62%, var(--merak-blanco) 100%);
background-size: 260% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--merak-blanco);
}
@media (prefers-reduced-motion: no-preference) {
.merak-titulo-animado { animation: merak-brillo-titulo 5s linear infinite; }
}
@keyframes merak-brillo-titulo {
0% { background-position: 100% 50%; }
100% { background-position: -160% 50%; }
}
.merak-directorio-subtexto { color: rgba(255,255,255,0.72); font-size: 15px; max-width: 520px; margin: 0; }
.merak-directorio-botones-cuenta { display: flex; gap: 10px; flex-wrap: wrap; }
/* Botón "claro": blanco con texto oscuro, para usarse sobre el fondo negro
de esta cabecera (conserva el mismo brillo/onda animados que .merak-btn). */
.merak-directorio-botones-cuenta .merak-btn-claro {
background: var(--merak-blanco);
background-image: none;
color: var(--merak-negro) !important;
}
.merak-directorio-botones-cuenta .merak-btn-claro:hover { box-shadow: 0 10px 22px rgba(255,255,255,0.25); }
/* Barra de búsqueda/filtros — tarjeta blanca "flotante" que se monta sobre
el borde inferior de la cabecera oscura (efecto de profundidad típico de
los buscadores de sitios SaaS modernos), con selects e input rediseñados
(sin el estilo por defecto del navegador). */
/* Lienzo oscuro detrás del buscador, las categorías y los resultados —
mismo truco 100vw + márgenes negativos que usa .merak-directorio-encabezado
para llegar de punta a punta de la pantalla (son hermanos, no anidados,
así que cada uno calcula su propio 50vw sin pisarse). Encima de este
lienzo, cada sección (buscador, resultados, categorías) flota como una
tarjeta blanca — igual al estilo de referencia que mandaste. El B2B usa
su propio verde de acento (ver .merak-directorio-b2b más abajo) en vez
del naranja, para mantener la misma identidad de color que ya tiene el
resto del sitio. */
/* Naranja como color dominante del lienzo (grande área del degradado),
blanco como acento secundario (los dos puntitos de brillo) y negro como
acento terciario (la cuadrícula tenue de fondo, estilo "papel
cuadriculado") — mismo orden de protagonismo que pediste. El B2B usa
la misma composición pero con su verde de acento en vez del naranja. */
/* Fondo tipo "wallpaper" fluido (como el que mandaste): varias manchas
grandes y suaves, sin bordes duros, sobre una base blanca en vez de
negra — igual composición que la imagen de referencia, cambiando solo
el color de base. El tamaño del "background" es más grande que el
contenedor (250% en vez de 100%) y se anima moviendo la posición muy
lentamente, para que las manchas se sientan vivas sin que se note un
salto ni un centro fijo. B2B usa su propio verde de acento en vez del
naranja, igual que en el resto del sitio. */
.merak-directorio-cuerpo {
position: relative;
width: 100vw;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
/* padding-top: 1px (en vez de 0) — sin esto, el margen negativo de
.merak-directorio-filtros "colapsa" con este contenedor (una regla de
CSS: el margen negativo del primer hijo se fusiona con el del padre
cuando no hay padding/borde entre ambos) y termina moviendo TODO este
bloque hacia arriba en vez de solo la barra — el resultado se veía
como si la barra nunca llegara a tocar la parte oscura, porque el
fondo claro de este bloque se corría para taparla. El 1px de padding
rompe esa fusión (es el truco estándar para esto) y es
imperceptible. */
padding: 1px clamp(20px, 6vw, 90px) 56px;
/* Fondo más "profesional": blanco/gris muy claro como color principal
(antes el degradado de color ocupaba casi toda la pantalla), con el
naranja de acento reducido a un par de manchas apenas insinuadas —
igual de "vivas" (siguen moviéndose despacio) pero sin competir con
las tarjetas blancas de encima, que ahora se distinguen del fondo
por su sombra (ver merak-sombra-flotante) en vez de por el contraste
de color. */
background-color: var(--merak-gris-claro);
background-repeat: no-repeat;
background-size: 220% 220%;
background-image:
radial-gradient(ellipse at 15% 0%, rgba(232,100,44,0.07), transparent 55%),
radial-gradient(ellipse at 100% 100%, rgba(232,100,44,0.06), transparent 50%);
animation: merak-fondo-fluido 42s ease-in-out infinite;
}
.merak-directorio-b2b .merak-directorio-cuerpo {
background-image:
radial-gradient(ellipse at 15% 0%, rgba(30,158,90,0.07), transparent 55%),
radial-gradient(ellipse at 100% 100%, rgba(30,158,90,0.06), transparent 50%);
}
@keyframes merak-fondo-fluido {
0%, 100% { background-position: 0% 0%; }
50% { background-position: 100% 40%; }
}
@media (prefers-reduced-motion: reduce) {
.merak-directorio-cuerpo { animation: none; }
}
/* La barra queda centrada justo sobre la línea que divide el encabezado
oscuro del cuerpo naranja: en vez de adivinar un margen negativo fijo
(que solo queda centrado si el alto real de la barra coincide con lo
calculado a mano), se fija un alto conocido (--altura-filtros) y el
margen negativo es exactamente la mitad de ese alto — así la mitad de
arriba cae siempre sobre la parte oscura y la mitad de abajo sobre la
parte clara, sin importar el tamaño de letra del navegador. */
.merak-directorio-filtros {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr auto auto;
gap: 10px;
align-items: center;
align-content: center;
max-width: 1180px;
--altura-filtros: 84px;
height: var(--altura-filtros);
margin: calc(var(--altura-filtros) / -2) auto 32px;
padding: 0 14px;
background: var(--merak-blanco);
border-radius: 18px;
border: 1px solid #f0f0f0;
box-shadow: 0 24px 44px rgba(0,0,0,0.16), 0 2px 10px rgba(0,0,0,0.06);
}
.merak-directorio-filtros input[type=search],
.merak-directorio-filtros select {
width: 100%;
border: 1.5px solid transparent;
background-color: var(--merak-gris-claro);
border-radius: 12px;
padding: 13px 16px;
font-size: 14px;
font-family: inherit;
color: var(--merak-negro);
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.merak-directorio-filtros input[type=search] {
padding-left: 42px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: 14px center;
}
.merak-directorio-filtros select {
padding-right: 34px;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
}
.merak-directorio-filtros input[type=search]:hover,
.merak-directorio-filtros select:hover { background-color: #eee; }
.merak-directorio-filtros input[type=search]:focus,
.merak-directorio-filtros select:focus {
outline: none;
background-color: var(--merak-blanco);
border-color: var(--merak-naranja);
box-shadow: 0 0 0 4px rgba(232,100,44,0.15);
}
.merak-directorio-filtros button.merak-btn { white-space: nowrap; padding: 13px 24px; }
.merak-directorio-filtros a.merak-btn { display: flex; align-items: center; justify-content: center; }
/* ============================================================
Grilla "bento" de categorías (ver category-tiles.php): una
tarjeta grande y colorida por cada categoría de nivel superior,
con imagen o ícono grande, degradado de color propio, y tamaños
variados (grande/horizontal/vertical/mediana/cuadrada) para que
la cuadrícula se sienta dinámica en vez de pareja — estilo
"tienda premium" en vez de catálogo plano.
============================================================ */
/* Igual que .merak-panel-resultados: panel blanco flotando sobre el
lienzo oscuro, para que las tarjetas de categorías (que mantienen sus
propios colores) se destaquen contra un fondo neutro en vez del negro
directo. */
.merak-seccion-categorias {
position: relative;
z-index: 2;
max-width: 1180px;
margin: 0 auto;
padding: 28px;
background: var(--merak-blanco);
border-radius: 20px;
border: 1px solid #f0f0f0;
box-shadow: var(--merak-sombra-flotante);
}
.merak-seccion-categorias-titulo { font-size: 26px; font-weight: 800; margin: 0 0 18px; color: var(--merak-negro); }
.merak-grid-categorias-bento {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 168px;
grid-auto-flow: dense;
gap: 18px;
}
.merak-tile-categoria {
--mx: 50%;
--my: 30%;
position: relative;
display: flex;
align-items: flex-start;
border-radius: 16px;
overflow: hidden;
text-decoration: none !important;
/* Sombra de reposo + un anillo interno de 1px casi invisible — el
truco de "borde de vidrio" que usan las tarjetas premium tipo
Apple/Nike para que el recorte contra el fondo blanco de la página
se vea intencional y no un simple recorte plano. */
box-shadow: 0 10px 26px rgba(0,0,0,0.14), inset 0 0 0 1px rgba(255,255,255,0.10);
transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease;
will-change: transform;
}
.merak-tile-categoria:hover {
transform: translateY(-8px) scale(1.02);
/* Sombra base (siempre válida) primero; la versión con "glow" del color
propio de la categoría queda como una segunda declaración aparte —
si el navegador no soporta color-mix(), ignora solo esa línea y se
queda con la sombra base de arriba en vez de perder la sombra entera. */
box-shadow: 0 22px 44px rgba(0,0,0,0.26), inset 0 0 0 1px rgba(255,255,255,0.16);
box-shadow: 0 22px 44px rgba(0,0,0,0.26), 0 8px 18px color-mix(in srgb, var(--tile-oscuro) 55%, transparent), inset 0 0 0 1px rgba(255,255,255,0.16);
}
.merak-tile-categoria-fondo {
position: absolute;
inset: 0;
/* Degradado principal por categoría + un realce radial suave en la
esquina superior izquierda, para que el color no se vea plano —
el mismo recurso que usan los banners publicitarios "premium". */
background:
radial-gradient(130% 150% at 6% -10%, rgba(255,255,255,0.25) 0%, transparent 48%),
linear-gradient(150deg, var(--tile-claro) 0%, var(--tile-oscuro) 100%);
z-index: 0;
transition: transform 0.5s ease;
}
.merak-tile-categoria:hover .merak-tile-categoria-fondo { transform: scale(1.08); }
/* Brillo suave que sigue al cursor (efecto "glow"), pensado solo para
mouse/trackpad reales — en táctil no hay posición de cursor que seguir,
así que ahí simplemente no se activa (opacity se queda en 0). */
.merak-tile-categoria-brillo {
position: absolute;
inset: 0;
z-index: 1;
background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,0.35), transparent 55%);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
.merak-tile-categoria:hover .merak-tile-categoria-brillo { opacity: 1; }
/* Con el texto arriba a la izquierda (estilo VanMich/Nexora), el
refuerzo de contraste va como un lavado oscuro concentrado en esa
esquina — no una franja abajo, que ahí solo taparía el producto. */
.merak-tile-categoria::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(120% 120% at 0% 0%, rgba(0,0,0,0.4) 0%, transparent 58%);
z-index: 1;
pointer-events: none;
}
/* El producto flota directo sobre el color, sin marco ni tarjeta —
el mismo recurso que usan las tiendas de referencia (VanMich, Nexora):
una sola sombra debajo del producto, nada de vidrio ni bordes. */
.merak-tile-categoria-foto {
position: absolute;
right: 3%;
bottom: 0;
top: 20%;
width: 60%;
z-index: 1;
transition: transform 0.45s cubic-bezier(.2,.8,.2,1);
}
.merak-tile-categoria:hover .merak-tile-categoria-foto { transform: translateY(-6px) scale(1.05); }
.merak-tile-categoria-imagen {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: bottom center;
filter: drop-shadow(0 20px 24px rgba(0,0,0,0.4));
transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
}
.merak-tile-categoria:hover .merak-tile-categoria-imagen { transform: scale(1.06); }
/* El ícono es el protagonista de la tarjeta (ya no hay foto de stock por
defecto) — por eso tiene su propio movimiento de reposo bien visible:
flota subiendo y bajando mientras se balancea suavemente de lado a
lado, como un objeto colgando. Al pasar el mouse, además, hace un
"salto" corto con giro — el gesto de vida extra que se pidió. */
.merak-tile-categoria-insignia {
position: absolute;
right: 6%;
bottom: 10%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
animation: merak-tile-flotar 4.5s ease-in-out infinite;
transform-origin: 50% 85%;
}
.merak-tile-categoria:hover .merak-tile-categoria-insignia { animation: merak-tile-saltar 0.7s cubic-bezier(.34,1.56,.64,1); }
.merak-tile-categoria-icono {
display: block;
font-size: clamp(38px, 7.5vw, 84px);
line-height: 1;
filter: drop-shadow(0 14px 20px rgba(0,0,0,0.32));
}
@media (prefers-reduced-motion: reduce) {
.merak-tile-categoria-insignia,
.merak-tile-categoria:hover .merak-tile-categoria-insignia { animation: none; }
}
@keyframes merak-tile-flotar {
0%, 100% { transform: translateY(0) rotate(0deg); }
25% { transform: translateY(-7px) rotate(-5deg); }
50% { transform: translateY(-12px) rotate(0deg); }
75% { transform: translateY(-7px) rotate(5deg); }
}
@keyframes merak-tile-saltar {
0% { transform: translateY(0) rotate(0deg) scale(1); }
35% { transform: translateY(-20px) rotate(-10deg) scale(1.14); }
65% { transform: translateY(-20px) rotate(8deg) scale(1.14); }
100% { transform: translateY(0) rotate(0deg) scale(1); }
}
/* Texto arriba a la izquierda (como en la referencia): etiqueta chica,
nombre grande y en negrita debajo, botón sólido al final — en vez del
bloque centrado abajo que tenía antes. */
.merak-tile-categoria-contenido {
position: relative;
z-index: 2;
padding: 16px 18px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
color: var(--merak-blanco);
max-width: 62%;
width: 100%;
height: 100%;
}
.merak-tile-categoria-subtitulo {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.3px;
opacity: 0.85;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.merak-tile-categoria-titulo {
font-size: clamp(17px, 1.7vw, 24px);
font-weight: 800;
letter-spacing: -0.01em;
line-height: 1.16;
text-shadow: 0 2px 12px rgba(0,0,0,0.28);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
/* Nombres de una sola palabra larga (ej. "Tecnología") o compuestos
(ej. "Accesorios de mascotas") deben poder partirse en vez de
desbordar el ancho de la tarjeta y quedar recortados a la mitad.
OJO: SOLO overflow-wrap (no word-break:break-word) — a propósito.
overflow-wrap:break-word solo parte una palabra cuando de verdad no
cabe entera ni en su propia línea (último recurso); word-break:
break-word es más agresivo y partía palabras que sí hubieran cabido
enteras bajando de línea (ej. "Automatización Industrial" se veía
como "Automati-" / "zación" en vez de "Automatización" / "Industrial"
en tarjetas angostas). Con hyphens:auto, si de verdad hace falta
partir una palabra, al menos queda con un guion en vez de un corte
seco. */
overflow-wrap: break-word;
hyphens: auto;
}
/* Botón sólido y opaco (no de vidrio) — blanco con el color oscuro propio
de la categoría como texto, igual que los botones "browse" de la
referencia. */
.merak-tile-categoria-boton {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 10px;
font-size: 12.5px;
font-weight: 700;
background: rgba(255,255,255,0.95);
color: var(--tile-oscuro);
border: none;
padding: 8px 16px;
border-radius: 999px;
width: fit-content;
flex-shrink: 0;
box-shadow: 0 6px 14px rgba(0,0,0,0.2);
transition: transform 0.25s ease, box-shadow 0.25s ease, gap 0.25s ease;
}
.merak-tile-categoria:hover .merak-tile-categoria-boton { transform: translateX(2px) scale(1.03); gap: 9px; box-shadow: 0 9px 18px rgba(0,0,0,0.26); }
/* Tamaños "bento", ciclados por posición (ver
merak_ep_tamano_tile_categoria() en category-tiles.php). Cada tamaño
ajusta también cuánto espacio visual (imagen/ícono) e infoblock le
corresponde, para que ninguna combinación de título largo + tarjeta
chica termine encimándose. */
.merak-tile-categoria--grande { grid-column: span 2; grid-row: span 2; }
.merak-tile-categoria--horizontal { grid-column: span 2; grid-row: span 1; }
.merak-tile-categoria--vertical { grid-column: span 1; grid-row: span 2; }
.merak-tile-categoria--mediana,
.merak-tile-categoria--cuadrada { grid-column: span 1; grid-row: span 1; }
.merak-tile-categoria--grande .merak-tile-categoria-titulo { font-size: clamp(24px, 2.6vw, 34px); -webkit-line-clamp: 3; }
.merak-tile-categoria--grande .merak-tile-categoria-contenido { max-width: 50%; }
.merak-tile-categoria--grande .merak-tile-categoria-foto { top: 14%; right: 4%; width: 54%; }
.merak-tile-categoria--grande .merak-tile-categoria-insignia { bottom: 12%; }
.merak-tile-categoria--grande .merak-tile-categoria-icono { font-size: clamp(56px, 8vw, 110px); }
.merak-tile-categoria--vertical .merak-tile-categoria-contenido { max-width: 90%; }
.merak-tile-categoria--vertical .merak-tile-categoria-foto { top: 32%; right: 2%; width: 82%; }
/* "cuadrada"/"mediana"/"horizontal" son las más bajas de altura (una sola
fila) — el producto ocupa una franja más baja y angosta para dejarle
siempre 2 líneas de título limpias arriba, sin superponerse. */
.merak-tile-categoria--cuadrada .merak-tile-categoria-foto,
.merak-tile-categoria--mediana .merak-tile-categoria-foto,
.merak-tile-categoria--horizontal .merak-tile-categoria-foto { top: 40%; right: 2%; width: 52%; }
.merak-tile-categoria--cuadrada .merak-tile-categoria-insignia,
.merak-tile-categoria--mediana .merak-tile-categoria-insignia,
.merak-tile-categoria--horizontal .merak-tile-categoria-insignia { bottom: 12%; }
.merak-tile-categoria--cuadrada .merak-tile-categoria-icono,
.merak-tile-categoria--mediana .merak-tile-categoria-icono,
.merak-tile-categoria--horizontal .merak-tile-categoria-icono { font-size: clamp(30px, 6vw, 52px); }
/* Tarjetas de una sola fila: título un poco más chico y contenido con más
ancho disponible, para que nombres largos (ej. "Accesorios de
mascotas") entren cómodos en 2 líneas sin desbordar ni empujar el
botón fuera de la tarjeta. */
.merak-tile-categoria--cuadrada .merak-tile-categoria-titulo,
.merak-tile-categoria--mediana .merak-tile-categoria-titulo,
.merak-tile-categoria--horizontal .merak-tile-categoria-titulo { font-size: clamp(15px, 1.5vw, 19px); }
.merak-tile-categoria--cuadrada .merak-tile-categoria-contenido,
.merak-tile-categoria--mediana .merak-tile-categoria-contenido { max-width: 66%; }
/* Fijo a 3 columnas x 6 filas por página (posts_per_page => 18 en
directory.php), en vez de auto-fill: así la grilla siempre se ve
ordenada y predecible en pantallas grandes, sin huecos irregulares. */
/* Panel blanco que envuelve la grilla de resultados (empresas/productos)
para que "flote" sobre el lienzo oscuro de .merak-directorio-cuerpo, en
vez de quedar directamente sobre el fondo oscuro. */
.merak-panel-resultados {
position: relative;
z-index: 2;
max-width: 1180px;
margin: 0 auto 40px;
padding: 28px;
background: var(--merak-blanco);
border-radius: 20px;
border: 1px solid #f0f0f0;
box-shadow: var(--merak-sombra-flotante);
}
.merak-grid-empresas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
/* Etiqueta pequeña con guion, tipo "— NOVEDADES MERAK", y el resaltado
naranja dentro de un título — mismo lenguaje visual que el resto del
sitio (ver merakmd.com/productos/). */
.merak-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.2px;
color: var(--merak-naranja-oscuro);
text-transform: uppercase;
}
.merak-resaltado { color: var(--merak-naranja); }
.merak-tarjeta-empresa {
/* Variables de "acento" en vez de usar var(--merak-naranja...) directo:
así el directorio B2B puede recolorear la tarjeta entera (barra
superior, badge, borde al pasar el mouse, botón) a verde con 4 líneas
de más abajo (.merak-directorio-b2b .merak-tarjeta-empresa), en vez
de duplicar toda esta regla. Naranja es el valor por defecto (lo que
ya se veía antes) para el directorio general. */
--acento-gradiente: var(--merak-gradiente);
--acento-oscuro: var(--merak-naranja-oscuro);
--acento-claro-fondo: #FCE3D6;
--acento-borde-hover: rgba(232,100,44,0.25);
position: relative;
display: flex;
flex-direction: column;
background: var(--merak-blanco);
border: 1px solid #eee;
border-radius: 18px;
overflow: hidden;
transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.merak-tarjeta-empresa::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--acento-gradiente);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
z-index: 2;
}
.merak-tarjeta-empresa:hover { transform: translateY(-6px); box-shadow: 0 16px 30px rgba(0,0,0,0.1); border-color: var(--acento-borde-hover); }
.merak-tarjeta-empresa:hover::before { transform: scaleX(1); }
/* Marco de imagen (como las fotos de producto en merakmd.com/productos/):
franja superior con el logo centrado dentro. En vez de un fondo
cuadriculado fijo (que se veía mal con logos de fondo transparente), el
color del marco se calcula a partir del color dominante del logo (ver
merak_ep_calcular_fondo_logo en helpers.php) para que el logo se sienta
integrado en vez de "flotando" sobre un fondo que no combina. */
.merak-marco-logo {
display: flex;
align-items: center;
justify-content: center;
height: 240px;
padding: 20px;
text-decoration: none !important;
}
/* Negro y blanco puros a propósito acá (no las variables --merak-negro/
--merak-blanco, que son un poco más suaves) — Sebastián pidió el
contraste más fuerte posible detrás del logo de cada tarjeta del
listado, para que combine con logos como el de Merak (fondo 100% negro)
sin que se note la diferencia entre el marco y el propio logo. */
.merak-marco-logo-oscuro { background: #000000; }
.merak-marco-logo-claro { background: #FFFFFF; border-bottom: 1px solid #f0f0f0; }
.merak-logo-tarjeta { width: 100%; height: 100%; max-width: 200px; max-height: 200px; object-fit: contain; display: block; transition: transform 0.3s ease; }
.merak-logo-tarjeta-placeholder { font-size: 56px; opacity: 0.5; }
.merak-tarjeta-empresa:hover .merak-logo-tarjeta { transform: scale(1.06); }
.merak-tarjeta-empresa-cuerpo { padding: 18px 20px 20px; text-align: left; display: flex; flex-direction: column; flex: 1; }
.merak-tarjeta-empresa-cuerpo h3 { margin: 8px 0 6px; }
.merak-badge-categoria {
align-self: flex-start;
background: var(--acento-claro-fondo);
color: var(--acento-oscuro);
font-size: 10.5px;
letter-spacing: 0.4px;
}
.merak-descripcion-corta { color: var(--merak-gris); font-size: 14px; min-height: 40px; }
.merak-mini-productos { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
/* max-width + elipsis: un nombre de producto largo (ej. "Audífonos
inalámbricos Pro X") no debe estirar la etiqueta hasta salirse de la
tarjeta ni ocupar su propia línea completa — se corta con "…" y el resto
de las etiquetas siguen acomodándose en la misma fila. */
.merak-mini-producto { background: var(--merak-gris-claro); font-size: 11px; padding: 3px 10px; border-radius: 999px; transition: background 0.2s ease, color 0.2s ease; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.merak-tarjeta-empresa:hover .merak-mini-producto { background: var(--acento-claro-fondo); }
/* Fila de acciones de la tarjeta: "Ver perfil" (botón principal, ocupa el
espacio disponible) + dos botones circulares para llamar y escribir por
WhatsApp, que solo aparecen si la empresa cargó ese dato — así nunca hay
un botón roto apuntando a un teléfono vacío. */
.merak-tarjeta-empresa-acciones { margin-top: auto; display: flex; align-items: center; gap: 8px; }
.merak-tarjeta-empresa-acciones .merak-btn-perfil { flex: 1; background: var(--acento-gradiente); padding: 12px 18px; text-align: center; }
.merak-btn-icono {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
font-size: 18px;
color: var(--merak-blanco) !important;
text-decoration: none !important;
transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s ease;
}
.merak-btn-icono-llamar { background: var(--merak-negro); background-image: linear-gradient(135deg, #2b2b2b, #111); }
.merak-btn-icono-llamar:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 10px 20px rgba(0,0,0,0.3); }
.merak-btn-icono-whatsapp { background: #25D366; background-image: linear-gradient(135deg, #34e07c, #1DA851); }
.merak-btn-icono-whatsapp:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 10px 20px rgba(37,211,102,0.4); }
/* Directorio B2B: mismas tarjetas de siempre, pero con acento verde en vez
de naranja (barra superior de la tarjeta, badge de categoría, borde al
pasar el mouse y botón "Ver empresa") — refuerza la identidad de color
ya usada en el fondo "aurora" (ver .merak-aurora-verde) y en la barra de
navegación de esta página. */
.merak-directorio-b2b .merak-tarjeta-empresa {
--acento-gradiente: var(--merak-gradiente-verde);
--acento-oscuro: var(--merak-verde-oscuro);
--acento-claro-fondo: #D9F2E3;
--acento-borde-hover: rgba(30,158,90,0.28);
}
/* "Plan contratado" (panel privado): tarjetas con el mismo lenguaje visual
que .merak-tarjeta-empresa de arriba (barra de acento, borde suave,
elevación al pasar el mouse) — Sebastián pidió explícitamente "en cuadros
como los de empresas y productos". Clases propias en vez de reusar
.merak-tarjeta-empresa tal cual porque estas tarjetas no llevan logo/foto,
solo título, precio, resumen, lista de "incluye" y botones de acción. */
/* auto-fit/minmax en vez de 3 columnas fijas + puntos de quiebre por ancho
de PANTALLA: esta cuadrícula vive dentro del panel privado, que ya tiene
su propio menú lateral angosto — el espacio real disponible para las
tarjetas es más chico que el ancho de la pantalla, así que un punto de
quiebre pensado para el ancho de pantalla (900px/600px) podía no activarse
nunca aunque cada tarjeta ya estuviera muy angosta, dejando muy poco
espacio para el título. Con auto-fit, el número de columnas se ajusta solo
al ancho real del contenedor, sin importar el de la pantalla. */
.merak-grid-planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; margin: 24px 0; }
.merak-tarjeta-plan {
position: relative;
display: flex;
flex-direction: column;
background: var(--merak-blanco);
border: 1px solid #eee;
border-radius: 18px;
overflow: hidden;
transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.merak-tarjeta-plan::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--merak-gradiente);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
z-index: 2;
}
.merak-tarjeta-plan:hover { transform: translateY(-6px); box-shadow: 0 16px 30px rgba(0,0,0,0.1); border-color: rgba(232,100,44,0.25); }
.merak-tarjeta-plan:hover::before { transform: scaleX(1); }
.merak-tarjeta-plan-cuerpo { padding: 22px 22px 20px; text-align: left; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.merak-tarjeta-plan-encabezado { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.merak-tarjeta-plan-icono {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 12px;
background: #FCE3D6;
font-size: 20px;
}
/* font-size explícito en vez de heredar el h3 del tema: el resto del sitio
de Sebastián usa una tipografía de encabezados grande (serif), pensada
para títulos cortos — con títulos más largos como "Plan Google/Meta Ads
gestionado" o "Tienda Virtual (WooCommerce)" ese tamaño no entraba en el
ancho de la tarjeta y el texto se cortaba en vez de acomodarse en varias
líneas. overflow-wrap/word-break de respaldo para que, aunque algún
título futuro sea aún más largo, siempre se acomode dentro de la tarjeta
en vez de desbordarla. */
.merak-tarjeta-plan-cuerpo h3 {
margin: 12px 0 4px;
font-size: 19px !important; /* !important: el h3 del tema de Sebastián es grande y, si su hoja de estilos carga después que esta, puede empatar en especificidad y ganar por orden de carga — igual que el caso ya documentado en merak-empresas-productos.php sobre la barra de administración. */
line-height: 1.3 !important;
overflow-wrap: break-word;
word-break: break-word;
hyphens: auto;
}
.merak-tarjeta-plan-cuerpo .merak-badge { align-self: flex-start; }
.merak-tarjeta-plan-precio { font-weight: 700; color: var(--merak-naranja-oscuro); margin: 0 0 8px; }
.merak-tarjeta-plan-incluye { list-style: disc; margin: 4px 0 16px 1.1em; padding: 0; color: var(--merak-gris); font-size: 13.5px; }
.merak-tarjeta-plan-incluye li { margin-bottom: 4px; }
.merak-tarjeta-plan-acciones { margin-top: auto; display: flex; align-items: center; gap: 8px; }
.merak-tarjeta-plan-acciones .merak-btn,
.merak-tarjeta-plan-acciones .merak-btn-peligro,
.merak-tarjeta-plan-acciones .merak-btn-secundario { flex: 1; text-align: center; }
.merak-tarjeta-plan-acciones form { flex: 1; display: flex; }
.merak-tarjeta-plan-acciones form .merak-btn-peligro { width: 100%; }
/* Ya no se fuerza el número de columnas por ancho de pantalla (ver el
comentario en .merak-grid-planes más arriba) — auto-fit/minmax ya
resuelve eso solo. Acá solo quedan los ajustes de espaciado para
pantallas chicas. */
@media (max-width: 600px) {
.merak-grid-planes { gap: 14px; }
.merak-tarjeta-plan-cuerpo { padding: 16px 16px 14px; }
}
.merak-sin-resultados { text-align: center; padding: 40px; color: var(--merak-gris); }
.merak-paginacion { display: flex; justify-content: center; gap: 8px; margin-top: 30px; }
/* Ficha de empresa individual */
/* Antes tenía 24px de espacio arriba, además del espacio que ya reserva
".merak-navbar-espaciador" para la barra fija — Sebastián lo vio
como demasiado aire entre la barra de arriba y la tarjeta del perfil,
así que se redujo a lo mínimo. OJO: si después de esto TODAVÍA se ve
un espacio grande en blanco arriba de la tarjeta, ya no es este
padding — lo más probable es que sea el propio encabezado del tema de
WordPress (logo/menú del sitio) que se sigue mostrando arriba de
nuestra barra en esta página en particular (es la única del plugin que
llama a get_header() del tema, ver templates/single-empresa.php), y
eso ya no es algo que este archivo pueda controlar — habría que
revisar si esa página tiene asignada una plantilla "en blanco"/sin
encabezado, como sí la tienen aparentemente las demás páginas del
directorio. */
/* OJO: 1100px de ancho máximo se veía perdido en una pantalla grande —
quedaba flotando en el centro con muchísimo espacio en blanco a los
lados. Se subió bastante (1600px, y hasta el 96% del ancho de la
ventana en pantallas más chicas que eso) para que la tarjeta ocupe casi
todo el espacio disponible, en vez de un recuadro angosto perdido en
medio de la pantalla. */
.merak-ep-contenedor { max-width: 1600px; width: 96%; margin: 0 auto; padding: 6px 0 60px; }
/* ------------------------------------------------------------------
Rediseño del perfil de empresa (a pedido de Sebastián, a partir de una
imagen de referencia): toda la ficha vive dentro de una sola tarjeta
oscura de punta a punta — no solo la cabecera — para que se vea como
una página completa "premium", con la franja de arriba (logo, nombre,
insignias, contacto) y el resto del contenido (descripción, productos)
fundidos en el mismo fondo oscuro, en vez de una cabecera oscura sobre
un cuerpo blanco suelto. Las fotos siguen siendo las que cada empresa
suba (logo/portada/producto) — el diseño no trae ninguna imagen fija.
------------------------------------------------------------------ */
.merak-ficha-empresa {
--acento-ficha: var(--merak-naranja);
--acento-ficha-claro: var(--merak-naranja-claro);
position: relative;
overflow: hidden;
border-radius: var(--merak-radio);
padding: clamp(22px, 4vw, 44px);
color: var(--merak-blanco);
background:
radial-gradient(circle at 1px 1px, rgba(255,255,255,0.07) 1.4px, transparent 1.5px) 0 0 / 26px 26px,
linear-gradient(160deg, #101010, var(--merak-negro) 55%, #0b0b0b);
box-shadow: var(--merak-sombra-flotante);
}
.merak-ficha-empresa-verde { --acento-ficha: var(--merak-verde); --acento-ficha-claro: var(--merak-verde-claro); }
/* Enlaces sueltos (no botones) dentro de la ficha necesitan un tono más
claro que el naranja oscuro por defecto (.merak-ep a) para leerse bien
sobre el fondo casi negro. */
.merak-ficha-empresa a:not(.merak-btn) { color: var(--acento-ficha-claro); }
.merak-ficha-empresa h2 { color: var(--merak-blanco); }
/* OJO: la foto de portada NO se hace "sangrado completo" (edge-to-edge)
con un margen negativo — .merak-ficha-empresa usa padding: clamp(...),
y un margen negativo fijo no calzaría con ese padding fluido en todos
los anchos de pantalla. En vez de eso, el hero es un bloque normal
dentro del mismo padding del contenedor (con su propio borde
redondeado): se ve igual de bien y no depende de que dos valores
distintos coincidan exactamente. */
.merak-ficha-hero { position: relative; border-radius: var(--merak-radio); overflow: hidden; margin: 0 0 8px; }
.merak-ficha-hero-portada {
position: absolute;
inset: 0;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.merak-ficha-hero-portada::after {
content: "";
position: absolute;
inset: 0;
/* La foto de portada se desvanece hacia el negro del resto de la
ficha, para que quede fundida con el fondo en vez de un recorte
duro — el mismo efecto de las cabeceras de perfil de redes
sociales. Antes empezaba muy clara (0.45) arriba, que es justo
donde van el nombre y las insignias — con una foto de portada clara
o con mucho detalle (como un carro), el texto casi no se distinguía.
Ahora arranca bastante más oscura desde arriba. */
background: linear-gradient(180deg, rgba(8,8,8,0.68) 0%, rgba(8,8,8,0.8) 65%, var(--merak-negro) 100%);
}
.merak-ficha-hero > *:not(.merak-ficha-hero-portada):not(.merak-aurora) { position: relative; z-index: 1; }
.merak-ficha-hero .merak-aurora span:nth-child(1) { background: radial-gradient(circle, var(--acento-ficha-claro), transparent 72%); }
.merak-ficha-hero .merak-aurora span:nth-child(2) { background: radial-gradient(circle, var(--acento-ficha), transparent 72%); }
/* Botón "Volver": flota encima de la esquina superior izquierda de la
foto/degradado del hero, SIN ocupar espacio propio en el flujo (no
empuja el resto del contenido hacia abajo — importante porque el
pedido explícito era reducir el espacio arriba, no agregar más). Lleva
el mismo tratamiento "sólido + desenfoque" que las insignias, para
leerse bien encima de cualquier foto de portada. */
.merak-ficha-hero .merak-ficha-volver {
position: absolute;
top: 18px;
left: 18px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 7px;
background: rgba(10,10,10,0.55);
border: 1px solid rgba(255,255,255,0.22);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
color: var(--merak-blanco) !important;
padding: 8px 16px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
text-decoration: none !important;
transition: background 0.2s ease, transform 0.2s ease;
}
.merak-ficha-hero .merak-ficha-volver:hover { background: rgba(10,10,10,0.75); transform: translateX(-2px); }
.merak-ficha-hero-cuerpo {
display: grid;
grid-template-columns: 1fr 320px;
gap: 28px;
align-items: start;
/* El padding de arriba deja lugar de sobra para el botón "Volver"
(flotando en la esquina superior izquierda, ver .merak-ficha-volver)
— así nunca se encima con el logo/nombre. */
padding: clamp(62px, 9vw, 76px) clamp(20px, 4vw, 40px) 26px;
}
.merak-ficha-hero-principal { display: flex; gap: 18px; align-items: flex-start; }
.merak-ficha-hero-logo-marco {
width: 92px;
height: 92px;
flex-shrink: 0;
border-radius: 50%;
background: var(--merak-blanco);
border: 4px solid rgba(255,255,255,0.85);
box-shadow: 0 10px 22px rgba(0,0,0,0.4);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.merak-ficha-hero-logo { width: 100%; height: 100%; object-fit: contain; }
.merak-ficha-hero-logo-placeholder { font-size: 38px; opacity: 0.55; }
.merak-ficha-hero-texto { min-width: 0; }
.merak-ficha-hero-titulo-fila { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.merak-ficha-hero-texto h1 { margin: 0; font-size: clamp(26px, 3.6vw, 38px); color: var(--merak-blanco); letter-spacing: -0.5px; }
.merak-badge-destacada {
display: inline-flex;
align-items: center;
gap: 5px;
background: var(--acento-ficha);
color: var(--merak-blanco);
padding: 4px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
.merak-ficha-hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
/* OJO — antes estas insignias y la caja de contacto eran casi
transparentes (fondo blanco al 5-8% de opacidad), pensadas para verse
sutiles sobre el degradado oscuro liso del "aurora". Pero cuando la
empresa sí tiene una foto de portada real (un carro, un local, lo que
sea), esa foto se ve DETRÁS de las insignias y la caja, y con tan poca
opacidad el texto queda ilegible encima de la foto. Ahora llevan un
fondo bastante más sólido (con "backdrop-filter" para difuminar lo que
quede detrás, y si el navegador no lo soporta, el fondo ya es lo
bastante oscuro por sí solo) — se ven bien tanto sobre el degradado
liso como sobre cualquier foto de portada. */
.merak-badge-oscuro {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(10,10,10,0.55);
border: 1px solid rgba(255,255,255,0.22);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
color: var(--merak-blanco);
padding: 5px 13px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
/* Insignia de ubicación cuando SÍ despliega el menú "Abrir en Waze" / "Abrir
en Google Maps" (la empresa puso su dirección en "Editar perfil" — ver
merak_ep_link_waze()/merak_ep_link_google_maps() en helpers.php). Sin
dirección, la insignia se queda como normal, sin estas reglas,
para que se note que no es clickeable.
Ahora es un