/* ShareMyCards — estilos de la tarjeta pública (nicho Médicos, plan Premium+) */ .smc-body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #F4F5F7; } .smc-tarjeta { max-width: 480px; margin: 0 auto; background: #FFFFFF; position: relative; padding-bottom: 72px; /* espacio para la barra de tabs */ box-sizing: border-box; } /* Portada — valores literales del mockup Negocio Local (Main.dc.html), 4 oct 2026 */ @keyframes smc-menu-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .smc-tarjeta * { box-sizing: border-box; } .smc-tarjeta a { text-decoration: none; } .smc-portada { position: relative; width: 100%; height: 460px; overflow: hidden; background-color: #12161F; background-size: cover; background-position: center; } /* Un solo degradado continuo: blanco abajo del todo, sube a negro para texto/botones, se aclara arriba hacia la foto */ .smc-portada__sombra { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, #FFFFFF 0%, #FFFFFF 10%, rgba(var(--smc-ov,0,0,0),.9) 32%, rgba(var(--smc-ov,0,0,0),.82) 52%, rgba(var(--smc-ov,0,0,0),.5) 70%, rgba(var(--smc-ov,0,0,0),.15) 88%, rgba(var(--smc-ov,0,0,0),0) 100%); } /* Corte recto: sin degradado, bloque sólido con borde duro que arranca donde empieza el texto */ .smc-portada--original-corte .smc-portada__sombra, .smc-portada--centrada-corte .smc-portada__sombra { background: none; } .smc-portada--original-corte::after, .smc-portada--centrada-corte::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 54%; background: rgb(var(--smc-ov,18,22,31)); } .smc-portada__remiendo { margin-top: -4px; height: 4px; background: #FFFFFF; position: relative; z-index: 2; } .smc-portada__contenido { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 20px 108px; color: #FFFFFF; text-shadow: 0 2px 10px rgba(0,0,0,.6); } .smc-portada .smc-logo { display: block; max-width: 180px; width: auto; height: auto; max-height: 90px; object-fit: contain; object-position: left bottom; margin: 0; } .smc-portada .smc-tagline { margin-top: 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .8; } .smc-portada .smc-nombre { margin: 16px 0 0; font-size: 21px; font-weight: 800; line-height: 1.1; } .smc-portada .smc-puesto { margin-top: 3px; font-size: 14px; font-weight: 500; opacity: .9; } .smc-portada .smc-lema { margin: 14px 0 0; font-size: 13px; line-height: 1.4; opacity: .85; max-width: 300px; } /* Layout centrado: logo suelto arriba a la izquierda, todo el texto más grande y centrado */ .smc-portada--centrada .smc-portada__contenido, .smc-portada--centrada-corte .smc-portada__contenido { padding: 0 24px 112px; text-align: center; } .smc-portada--centrada .smc-logo, .smc-portada--centrada-corte .smc-logo { position: absolute; top: 20px; left: 20px; max-width: 140px; max-height: 52px; object-position: left top; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); } .smc-portada--centrada .smc-tagline, .smc-portada--centrada-corte .smc-tagline { margin-top: 0; font-size: 11px; letter-spacing: .12em; opacity: .85; } .smc-portada--centrada .smc-nombre, .smc-portada--centrada-corte .smc-nombre { margin-top: 14px; font-size: 28px; line-height: 1.15; } .smc-portada--centrada .smc-puesto, .smc-portada--centrada-corte .smc-puesto { margin-top: 5px; font-size: 16px; } .smc-portada--centrada .smc-lema, .smc-portada--centrada-corte .smc-lema { margin: 16px auto 0; font-size: 13.5px; max-width: 280px; } /* Portada: contenido video/carrusel (panel de cliente, 1 oct 2026) */ .smc-portada__video { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .smc-portada__video iframe { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; min-width: 100%; min-height: 177.78vh; /* cubre el contenedor sin importar el aspect ratio */ transform: translate(-50%, -50%); } /* Accesos rápidos — plan Básico (debajo de la identidad): sin cambios */ .smc-accesos { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 20px 0; } .smc-acceso { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1 1 64px; padding: 12px 4px; border-radius: 14px; text-decoration: none; font-size: 11px; font-weight: 700; color: #FFFFFF; } .smc-acceso--llamar { background: #2563EB; } .smc-acceso--whatsapp { background: #1D9A5B; } .smc-acceso--facebook { background: #1877F2; } .smc-acceso--instagram { background: linear-gradient(135deg,#F58529,#DD2A7B,#8134AF); } .smc-acceso--extra { background: var(--smc-acento); } .smc-acceso__icono { font-size: 18px; } /* Accesos rápidos sobre la portada — Premium+ (mockup) */ .smc-portada .smc-accesos { position: absolute; left: 20px; right: 20px; bottom: 22px; z-index: 2; padding: 0; flex-wrap: nowrap; gap: 8px; } .smc-portada .smc-acceso { flex: 1 1 0; min-width: 0; gap: 5px; padding: 12px 4px; border-radius: 14px; font-size: 11px; } .smc-portada .smc-acceso__icono { font-size: 0; line-height: 0; display: flex; } .smc-portada .smc-acceso__icono svg { width: 20px; height: 20px; display: block; } .smc-portada .smc-acceso--llamar { background: #2554EB; } .smc-portada .smc-acceso--whatsapp { background: #22C35E; } .smc-portada .smc-acceso--facebook { background: #1877F2; } .smc-portada .smc-acceso--extra { background: #4B5563; } /* Estilo círculos: ícono en círculo y etiqueta debajo */ .smc-portada .smc-accesos--circulos { bottom: 16px; justify-content: space-around; gap: 6px; } .smc-portada .smc-accesos--circulos .smc-acceso { flex: none; background: none !important; padding: 0; gap: 6px; } .smc-portada .smc-accesos--circulos .smc-acceso__icono { width: 46px; height: 46px; border-radius: 50%; align-items: center; justify-content: center; box-shadow: 0 6px 14px -4px rgba(0,0,0,.5); } .smc-portada .smc-accesos--circulos .smc-acceso__icono svg { width: 19px; height: 19px; } .smc-portada .smc-accesos--circulos .smc-acceso--llamar .smc-acceso__icono { background: #2554EB; } .smc-portada .smc-accesos--circulos .smc-acceso--whatsapp .smc-acceso__icono { background: #22C35E; } .smc-portada .smc-accesos--circulos .smc-acceso--facebook .smc-acceso__icono { background: #1877F2; } .smc-portada .smc-accesos--circulos .smc-acceso--instagram .smc-acceso__icono { background: linear-gradient(135deg,#F58529,#DD2A7B,#8134AF); } .smc-portada .smc-accesos--circulos .smc-acceso--extra .smc-acceso__icono { background: #4B5563; } .smc-portada .smc-accesos--circulos .smc-acceso__texto { font-size: 10px; text-shadow: 0 2px 6px rgba(0,0,0,.6); } /* Estilo tarjetas oscuras ("píldoras"): vidrio oscuro con borde, ícono de línea arriba */ .smc-portada .smc-accesos--oscuras .smc-acceso { gap: 6px; padding: 13px 4px; background: rgba(15,17,23,.6) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.14); } .smc-portada .smc-accesos--oscuras .smc-acceso__icono svg { width: 19px; height: 19px; } .smc-portada .smc-accesos--oscuras .smc-acceso__texto { font-size: 10.5px; } .smc-portada .smc-accesos--oscuras.smc-accesos--cinco { gap: 6px; } .smc-portada .smc-accesos--oscuras.smc-accesos--cinco .smc-acceso { gap: 4px; padding: 8px 2px; border-radius: 11px; } .smc-portada .smc-accesos--oscuras.smc-accesos--cinco .smc-acceso__icono svg { width: 15px; height: 15px; } .smc-portada .smc-accesos--oscuras.smc-accesos--cinco .smc-acceso__texto { font-size: 8.5px; text-align: center; } /* Botones anchos: Descargar contacto / Agendar cita, uno al lado del otro (mockup) */ .smc-botones-anchos { margin: 6px 24px 0; display: flex; gap: 8px; padding: 0; } .smc-boton-ancho { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 8px; border-radius: 12px; font-size: 12.5px; font-weight: 700; white-space: nowrap; background: #F4F5F7; color: #17181C; border: none; text-decoration: none; cursor: pointer; font-family: inherit; } .smc-boton-ancho--acento { background: var(--smc-acento); color: #FFFFFF; } .smc-boton-ancho--blanco { background: #FFFFFF; border: 1px solid #E3E0D8; color: #14171F; } /* Secciones — encabezado en mayúsculas pequeñas (mockup) */ .smc-seccion { margin: 30px 0 0; padding: 0; } .smc-botones-anchos + .smc-seccion { margin-top: 24px; } .smc-seccion__titulo { display: block; margin: 0 24px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8A8D94; } .smc-seccion__cabecera { display: flex; align-items: baseline; justify-content: space-between; margin: 0 24px; } .smc-seccion__cabecera .smc-seccion__titulo { margin: 0; } /* Catálogo: carrusel automático, lento y sin fin (mockup) */ .smc-carrusel { margin: 10px 0 0; overflow: hidden; } .smc-menu-track { display: flex; gap: 10px; width: max-content; padding: 0 24px; animation: smc-menu-scroll 26s linear infinite; } .smc-tarjeta-servicio { flex: 0 0 130px; border: 1px solid #ECEDF0; border-radius: 14px; overflow: hidden; background: #FFFFFF; box-shadow: 0 1px 2px rgba(20,23,31,.04), 0 8px 20px -14px rgba(20,23,31,.18); cursor: pointer; text-align: left; padding: 0; } .smc-tarjeta-servicio img { width: 100%; height: 70px; object-fit: cover; display: block; } .smc-tarjeta-servicio__cuerpo { padding: 9px 10px 11px; } .smc-tarjeta-servicio__titulo { font-size: 12.5px; font-weight: 700; color: #17181C; } .smc-tarjeta-servicio__precio { font-size: 11px; font-weight: 800; color: var(--smc-acento); margin-top: 2px; } .smc-tarjeta-servicio__detalle { font-size: 10.5px; color: #8A8D94; margin-top: 2px; line-height: 1.3; } .smc-ver-todo { display: flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--smc-acento); background: transparent; color: var(--smc-acento); font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; margin: 0; } .smc-precio { color: var(--smc-acento); font-weight: 700; } /* Video */ .smc-video { margin: 10px 24px 0; position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; background: #14171F; } .smc-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Preguntas frecuentes — acordeón con tarjeta gris (mockup) */ .smc-faq { margin: 10px 24px 0; border-radius: 16px; overflow: hidden; background: #F7F8FA; border: 1px solid #ECEDF0; } .smc-faq__pregunta { width: 100%; display: flex; align-items: center; gap: 12px; padding: 15px 16px; cursor: pointer; text-align: left; background: none; border: none; border-bottom: 1px solid #ECEDF0; font-family: inherit; color: #14171F; } .smc-faq__item:last-child .smc-faq__pregunta { border-bottom: none; } .smc-faq__icono { width: 30px; height: 30px; border-radius: 9px; background: rgba(20,23,31,.05); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--smc-acento); } .smc-faq__texto { flex: 1; font-size: 14px; font-weight: 700; color: #14171F; } .smc-faq__chevron { flex-shrink: 0; transition: transform .2s; } .smc-faq__item.abierto .smc-faq__chevron { transform: rotate(180deg); } .smc-faq__respuesta { display: none; padding: 0 16px 18px 58px; font-size: 13px; line-height: 1.55; color: #6B7280; border-bottom: 1px solid #ECEDF0; } .smc-faq__item.abierto .smc-faq__respuesta { display: block; } .smc-faq__item:last-child .smc-faq__respuesta { border-bottom: none; } /* Especiales */ .smc-especiales { margin: 10px 0 0; overflow: hidden; } .smc-especiales .smc-menu-track { animation-duration: 30s; } .smc-especial { flex: 0 0 calc((min(100vw, 480px) - 58px) / 2); border-radius: 14px; overflow: hidden; cursor: pointer; box-shadow: 0 1px 2px rgba(20,23,31,.04), 0 8px 20px -14px rgba(20,23,31,.18); } .smc-especial img { width: 100%; height: 230px; object-fit: cover; display: block; } /* Ubicación */ .smc-mapa { margin: 10px 24px 0; border-radius: 14px; overflow: hidden; border: 1px solid #ECEDF0; } .smc-mapa__mapa { height: 140px; background: #EDEFF3; } .smc-mapa__mapa iframe { width: 100%; height: 100%; border: 0; display: block; } .smc-mapa__pie { padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .smc-direccion { font-size: 13px; font-weight: 600; color: #14171F; } .smc-como-llegar { display: flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 700; color: var(--smc-acento); flex-shrink: 0; } /* Menú inferior fijo (mockup) */ .smc-tabs { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 480px; background: #F7F8FA; display: flex; border-top: 1px solid #ECEDF0; z-index: 50; padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px)); } .smc-tab { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0; background: none; border: none; color: #8A8D94; font-size: 10.5px; font-weight: 700; cursor: pointer; font-family: inherit; } .smc-tab + .smc-tab::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 26px; background: rgba(20,23,31,.08); } .smc-tab__icono { width: 22px; height: 22px; display: block; } .smc-tab__bandera { display: block; } .smc-tab__bandera--mx { display: none; } .smc-tarjeta[data-idioma="en"] .smc-tab__bandera--us { display: none; } .smc-tarjeta[data-idioma="en"] .smc-tab__bandera--mx { display: block; } /* Hojas (modales) que suben desde abajo (mockup) */ .smc-modal { display: none; position: fixed; inset: 0; background: rgba(10,12,16,.55); z-index: 100; align-items: flex-end; justify-content: center; } .smc-modal.smc-abierto { display: flex; } .smc-modal__caja { width: 100%; max-width: 480px; max-height: 85vh; overflow-y: auto; background: #FFFFFF; border-radius: 22px 22px 0 0; padding: 20px 22px calc(20px + env(safe-area-inset-bottom, 0px)); position: relative; } .smc-modal__cerrar { position: absolute; top: 16px; right: 16px; z-index: 3; width: 30px; height: 30px; min-width: 0 !important; min-height: 0 !important; display: flex; align-items: center; justify-content: center; padding: 0 !important; line-height: 1; cursor: pointer; color: #14171F !important; background: #F1F2F5 !important; border: none !important; border-radius: 50% !important; box-shadow: none !important; outline: none; } .smc-modal__cerrar svg { width: 14px; height: 14px; display: block; } .smc-modal__cerrar--oscuro { color: #FFFFFF !important; background: rgba(255,255,255,.12) !important; } .smc-modal__cerrar--sobre-foto { top: 14px; right: 14px; color: #FFFFFF !important; background: rgba(20,23,31,.5) !important; } .smc-modal__caja--foto { padding: 0; } .smc-modal__cuerpo { padding: 18px 22px calc(20px + env(safe-area-inset-bottom, 0px)); } .smc-modal__caja--sin-foto .smc-modal__cuerpo { padding-top: 20px; } .smc-modal__caja--sin-foto .smc-detalle__titulo { padding-right: 36px; } .smc-detalle-foto { width: 100%; height: 190px; object-fit: cover; display: block; border-radius: 0; margin: 0; } .smc-detalle__titulo { font-size: 19px; font-weight: 800; color: #14171F; } .smc-detalle__precio { font-size: 15px; font-weight: 800; color: var(--smc-acento); margin-top: 4px; } .smc-detalle__texto { margin: 8px 0 18px; font-size: 13.5px; line-height: 1.55; color: #6B7280; } .smc-hoja__titulo { font-size: 18px; font-weight: 800; color: #14171F; margin-bottom: 14px; padding-right: 40px; } .smc-hoja__sub { font-size: 12.5px; color: #8A8D94; margin: -10px 0 12px; } .smc-hoja__etiqueta { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8A8D94; margin-bottom: 10px; } .smc-hoja__botones { display: flex; gap: 8px; } .smc-hoja__boton { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 13px; border-radius: 12px; background: var(--smc-acento); color: #FFFFFF; font-size: 14px; font-weight: 700; border: none; cursor: pointer; font-family: inherit; text-decoration: none; } .smc-hoja__boton--mitad { flex: 1; width: auto; padding: 12px; font-size: 13.5px; } .smc-hoja__boton--blanco { background: #FFFFFF; border: 1px solid #E3E0D8; color: #14171F; } /* Lista completa del catálogo */ .smc-fila-servicio { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid #F1F2F5; cursor: pointer; text-align: left; } .smc-fila-servicio__foto { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex-shrink: 0; } .smc-fila-servicio__texto { flex: 1; } .smc-fila-servicio__titulo { font-size: 13.5px; font-weight: 700; color: #14171F; } .smc-fila-servicio__precio { font-size: 11.5px; font-weight: 800; color: var(--smc-acento); margin-top: 1px; } .smc-fila-servicio__detalle { font-size: 12px; color: #8A8D94; margin-top: 2px; line-height: 1.35; } /* Compartir */ .smc-compartir-lista { display: flex; flex-direction: column; } .smc-compartir-opcion { width: 100%; display: flex; align-items: center; gap: 12px; padding: 13px 2px; background: none; border: none; border-bottom: 1px solid #F1F2F5; cursor: pointer; text-align: left; font-family: inherit; color: #14171F; font-size: 14px; font-weight: 600; text-decoration: none; } .smc-compartir-lista .smc-compartir-opcion:last-child { border-bottom: none; } .smc-compartir-opcion__icono { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .smc-qr { width: 200px; height: 200px; display: block; margin: 16px auto 0; } /* Contacto y formularios dentro de las hojas */ .smc-contacto-datos { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 18px; } .smc-contacto-dato { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #14171F; } .smc-contacto-dato--alto { align-items: flex-start; } .smc-form-contacto { display: flex; flex-direction: column; gap: 8px; } .smc-modal input[type="text"], .smc-modal input[type="tel"], .smc-modal input[type="email"], .smc-modal textarea { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid #E3E0D8; font-size: 13.5px; font-family: inherit; resize: none; } .smc-form-contacto .smc-hoja__boton { margin-top: 6px; } .smc-form-cita label, .smc-modal > .smc-modal__caja > label { display: block; font-size: 11px; font-weight: 700; color: #8A8D94; margin: 10px 0 4px; } .smc-form-cita__mensaje, .smc-form-contacto__mensaje { margin-top: 10px; font-size: 12px; font-weight: 700; } /* Agendar cita — hoja oscura con calendario del mes (mockup) */ .smc-modal__caja--oscura { background: #14171F; color: #FFFFFF; max-height: 88vh; padding: 22px 22px calc(22px + env(safe-area-inset-bottom, 0px)); } .smc-agenda__etiqueta { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--smc-acento); } .smc-agenda__titulo { font-size: 20px; font-weight: 700; font-family: Georgia, serif; margin-top: 6px; } .smc-agenda__sub { margin: 6px 0 16px; font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,.6); } .smc-agenda__mes { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 13.5px; font-weight: 700; } .smc-agenda__nav { display: flex; gap: 4px; } .smc-agenda__nav button { width: 26px; height: 26px; padding: 0; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); cursor: pointer; } .smc-agenda__nav button:disabled { opacity: .3; cursor: default; } .smc-calendario-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; } .smc-calendario-semana span { text-align: center; font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.4); padding: 4px 0; } .smc-calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 0 0 18px; } .smc-calendario span, .smc-calendario button { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 12.5px; font-weight: 600; border: none; padding: 0; font-family: inherit; } .smc-calendario button { background: rgba(255,255,255,.08); color: #FFFFFF; cursor: pointer; } .smc-calendario button:disabled { background: transparent; color: rgba(255,255,255,.25); cursor: default; } .smc-calendario button.smc-dia-elegido { background: var(--smc-acento); color: #FFFFFF; } .smc-horarios-titulo { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 10px; } .smc-horarios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 20px; } .smc-horarios:empty { margin-bottom: 0; } .smc-horarios button { text-align: center; padding: 10px 4px; border-radius: 12px; border: 1px solid rgba(255,255,255,.18); background: transparent; color: #FFFFFF; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit; } .smc-horarios button.smc-hora-elegida { background: var(--smc-acento); border-color: var(--smc-acento); } .smc-modal__caja--oscura .smc-form-cita label { color: rgba(255,255,255,.6); } .smc-modal__caja--oscura input[type="text"], .smc-modal__caja--oscura input[type="tel"], .smc-modal__caja--oscura input[type="email"] { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #FFFFFF; } .smc-agenda__continuar { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; padding: 13px; border-radius: 12px; background: rgba(255,255,255,.14); color: #FFFFFF; font-size: 14px; font-weight: 700; border: none; cursor: pointer; font-family: inherit; } /* Un "especial" en grande (mockup) */ .smc-modal__caja--negra { background: #0A0C10; padding: 0; overflow: hidden; max-height: 90vh; } .smc-especial-grande { width: 100%; max-height: 78vh; object-fit: contain; display: block; } .smc-especial-nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px)); } .smc-especial-nav button { display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px; border: none; background: rgba(255,255,255,.12); color: #FFFFFF; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; } .smc-especial-nav span { font-size: 12px; color: rgba(255,255,255,.5); font-weight: 600; } /* Específicos de Bienes Raíces / Coches */ .smc-specs { font-size: 12px; color: #565A63; margin: 4px 0; } .smc-badge { display: inline-block; font-size: 10px; font-weight: 700; background: #F4F5F7; color: #17181C; padding: 3px 8px; border-radius: 999px; } /* Carrito (Restaurantes / Negocio Local en modo Productos) — mockup */ .smc-carrito-controles { display: flex; align-items: center; gap: 10px; } .smc-carrito-cantidad { display: flex; align-items: center; gap: 14px; border: 1px solid #ECEDF0; border-radius: 12px; padding: 8px 14px; } .smc-carrito-cantidad button { width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(20,23,31,.06); color: #14171F; font-size: 15px; font-weight: 700; line-height: 1; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; } .smc-carrito-cantidad span { font-size: 14px; font-weight: 700; color: #14171F; min-width: 14px; text-align: center; } .smc-carrito-agregar { flex: 1; width: auto; font-size: 13.5px; } .smc-carrito-flotante { position: fixed; right: max(16px, calc(50% - 224px)); bottom: 92px; z-index: 40; display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; border: none; background: var(--smc-acento); color: #FFFFFF; font-size: 13px; font-weight: 700; box-shadow: 0 8px 20px -6px rgba(20,23,31,.45); cursor: pointer; font-family: inherit; } .smc-carrito-fila { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #F1F2F5; font-size: 13px; } .smc-carrito-total-linea { text-align: right; margin: 12px 0; font-size: 14px; } /* Plan Básico */ .smc-tarjeta--basico { padding-bottom: 60px; } .smc-portada-basico { height: 210px; background: var(--smc-acento); background-size: cover; background-position: center; position: relative; } /* Estilo de portada del plan Básico — según mockup (2 oct 2026): Recta = como está por default. Degradado = el color de la portada se desvanece hacia el fondo (no una sombra oscura). Curva = curva pareja y marcada, con el círculo centrado justo en el punto más bajo de la curva, no en la misma línea que recta/degradado. */ .smc-portada-basico--degradado { -webkit-mask-image: linear-gradient( 180deg, #000 55%, transparent 100% ); mask-image: linear-gradient( 180deg, #000 55%, transparent 100% ); } .smc-portada-basico--curvo { padding-bottom: 60px; border-radius: 0 0 50% 50% / 0 0 60px 60px; } .smc-portada-basico--curvo + .smc-identidad-basico { margin-top: -48px; position: relative; z-index: 3; } /* Pedro pidió (2 oct 2026): el círculo va encima de la foto (antes solo se asomaba la mitad) y el logo se tiene que adaptar sin recortarse — object-fit:contain + fondo blanco en vez de cover, para que un logo no cuadrado no quede cortado dentro del círculo. */ .smc-identidad-basico { text-align: center; margin-top: -72px; padding: 0 20px; position: relative; z-index: 2; } .smc-avatar-basico { display: block; width: 96px; height: 96px; margin: 0 auto; border-radius: 50%; object-fit: contain; background: #FFFFFF; border: 4px solid #FFF; box-sizing: border-box; padding: 3px; } .smc-tabs--basico { grid-template-columns: repeat(4, 1fr); } /* Blindaje contra estilos de botón del tema de WordPress (4 oct 2026): sin esto el tema les pone borde azul, ancho automático y apila las banderas. Mismos valores del mockup. */ .smc-tarjeta .smc-faq__pregunta { display: flex !important; flex-direction: row !important; align-items: center !important; width: 100% !important; gap: 12px !important; padding: 15px 16px !important; margin: 0 !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid #ECEDF0 !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; color: #14171F !important; text-align: left !important; text-transform: none !important; letter-spacing: normal !important; font-size: 14px !important; line-height: 1.3 !important; min-height: 0 !important; height: auto !important; } .smc-tarjeta .smc-faq__item:last-child .smc-faq__pregunta { border-bottom: 0 !important; } .smc-tarjeta .smc-faq__texto { flex: 1 !important; font-size: 14px !important; font-weight: 700 !important; color: #14171F !important; } .smc-tarjeta .smc-faq__icono { flex-shrink: 0 !important; } .smc-tarjeta .smc-tab { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; padding: 0 !important; margin: 0 !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; flex: 1 !important; color: #8A8D94 !important; text-transform: none !important; letter-spacing: normal !important; } .smc-tarjeta .smc-tab__bandera { display: block !important; margin: 0 !important; } .smc-tarjeta .smc-tab__bandera--mx { display: none !important; } .smc-tarjeta[data-idioma="en"] .smc-tab__bandera--us { display: none !important; } .smc-tarjeta[data-idioma="en"] .smc-tab__bandera--mx { display: block !important; } /* Botón X de las hojas: círculo perfecto aunque el tema estire los botones (4 oct 2026). */ .smc-tarjeta .smc-modal__cerrar, .smc-modal .smc-modal__cerrar { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; max-width: 32px !important; max-height: 32px !important; flex: 0 0 32px !important; aspect-ratio: 1 / 1; padding: 0 !important; border-radius: 50% !important; line-height: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 0 !important; box-shadow: none !important; } .smc-modal .smc-modal__cerrar svg { width: 14px !important; height: 14px !important; stroke-width: 2.2; } .smc-modal .smc-modal__cerrar--sobre-foto { background: rgba(20,23,31,.55) !important; color: #FFFFFF !important; } .smc-modal .smc-modal__cerrar--oscuro { background: rgba(255,255,255,.14) !important; color: #FFFFFF !important; } /* Mapa premium (pedido de Pedro, 4 oct 2026): más alto, sombra suave, pie con ícono y botón. */ .smc-tarjeta .smc-mapa { border-radius: 20px; border: 1px solid #ECEDF0; background: #FFFFFF; box-shadow: 0 1px 2px rgba(20,23,31,.04), 0 14px 30px -18px rgba(20,23,31,.28); } .smc-tarjeta .smc-mapa__mapa { height: 210px; } .smc-tarjeta .smc-mapa__mapa iframe { filter: saturate(.85) contrast(1.02); } .smc-tarjeta .smc-mapa__pie { padding: 14px 16px; gap: 12px; border-top: 1px solid #ECEDF0; } .smc-mapa__pin { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--smc-acento); background: #F1F2F5; } .smc-mapa__texto { flex: 1; min-width: 0; } .smc-mapa__etiqueta { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8A8D94; margin-bottom: 2px; } .smc-tarjeta .smc-direccion { font-size: 13px; font-weight: 700; line-height: 1.3; } .smc-tarjeta a.smc-como-llegar { display: inline-flex !important; align-items: center; gap: 6px !important; padding: 10px 14px !important; border-radius: 999px !important; background: var(--smc-acento) !important; color: #FFFFFF !important; font-size: 12.5px !important; font-weight: 700 !important; text-decoration: none !important; white-space: nowrap; box-shadow: none !important; } /* Blindaje contra el tema: botones anchos y "Ver ..." con los valores del mockup (4 oct 2026) */ .smc-tarjeta .smc-botones-anchos .smc-boton-ancho { display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 11px 8px !important; border-radius: 12px !important; font-size: 12.5px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: normal !important; text-transform: none !important; box-shadow: none !important; outline: none !important; white-space: nowrap !important; border: 0 !important; background: #F4F5F7 !important; color: #17181C !important; } .smc-tarjeta .smc-botones-anchos .smc-boton-ancho--acento { background: var(--smc-acento) !important; color: #FFFFFF !important; } .smc-tarjeta .smc-botones-anchos .smc-boton-ancho--blanco { background: #FFFFFF !important; border: 1px solid #E3E0D8 !important; color: #14171F !important; } .smc-tarjeta .smc-boton-ancho svg { flex: 0 0 auto; } .smc-tarjeta .smc-ver-todo { display: inline-flex !important; align-items: center !important; gap: 4px !important; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; padding: 6px 12px !important; margin: 0 !important; border-radius: 999px !important; border: 1px solid var(--smc-acento) !important; background: transparent !important; color: var(--smc-acento) !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: normal !important; text-transform: none !important; box-shadow: none !important; outline: none !important; } .smc-tarjeta .smc-seccion__cabecera { align-items: center !important; } /* Tarjetas de venta más grandes: ~3 visibles a lo ancho (mín. 150px en celular), scroll automático siempre (pedido de Pedro, 4 oct 2026) */ .smc-tarjeta .smc-tarjeta-servicio { flex: 0 0 clamp(150px, calc((min(100vw, 480px) - 68px) / 3), 300px); } .smc-tarjeta .smc-tarjeta-servicio img { height: 110px; } .smc-tarjeta .smc-tarjeta-servicio__cuerpo { padding: 12px 13px 14px; } .smc-tarjeta .smc-tarjeta-servicio__titulo { font-size: 14px; line-height: 1.25; } .smc-tarjeta .smc-tarjeta-servicio__precio { font-size: 12.5px; margin-top: 3px; } .smc-tarjeta .smc-tarjeta-servicio__detalle { font-size: 11.5px; margin-top: 3px; line-height: 1.35; } .smc-tarjeta .smc-menu-track { animation-play-state: running !important; } /* Portada "corte recto": la foto se funde suave con el bloque oscuro (pedido de Pedro, 4 oct 2026) */ .smc-portada--original-corte::after, .smc-portada--centrada-corte::after { top: 38%; background: linear-gradient(180deg, rgba(var(--smc-ov,18,22,31),0) 0%, rgba(var(--smc-ov,18,22,31),.75) 22%, rgb(var(--smc-ov,18,22,31)) 40%, rgb(var(--smc-ov,18,22,31)) 100%); } /* "Confirmar cita" premium (pedido de Pedro, 4 oct 2026) */ .smc-tarjeta .smc-agenda__continuar, .smc-modal .smc-agenda__continuar { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 18px 0 0 !important; padding: 16px 18px !important; border: 0 !important; border-radius: 16px !important; outline: none !important; background: linear-gradient(135deg, var(--smc-acento) 0%, color-mix(in srgb, var(--smc-acento) 70%, #000) 100%) !important; color: #FFFFFF !important; font-size: 15px !important; font-weight: 800 !important; letter-spacing: .01em !important; line-height: 1.2 !important; text-transform: none !important; box-shadow: 0 12px 26px -10px var(--smc-acento), inset 0 1px 0 rgba(255,255,255,.22) !important; cursor: pointer; transition: transform .15s, box-shadow .15s; } .smc-modal .smc-agenda__continuar:active { transform: scale(.98); } .smc-modal .smc-agenda__continuar svg { width: 22px !important; height: 22px !important; padding: 4px; border-radius: 50%; background: rgba(255,255,255,.2); flex: 0 0 22px; } .smc-modal .smc-form-cita label { margin: 12px 0 6px !important; } /* Fondo de la tarjeta: color / imagen / textura (capa detrás del contenido, se funde con la portada) */ .smc-tarjeta { isolation: isolate; } .smc-fondo-capa { position: absolute; left: 0; right: 0; bottom: 0; top: 430px; z-index: -1; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 110px); mask-image: linear-gradient(180deg, transparent 0, #000 110px); background-size: cover; background-position: center; } .smc-tarjeta--basico .smc-fondo-capa { top: 0; -webkit-mask-image: none; mask-image: none; } .smc-fondo-capa--textura { background-color: transparent; background-size: auto; background-position: 0 0; } /* Portada "curvo": bloque oscuro con borde superior curvo (opción nueva, pedido de Pedro, 4 oct 2026) */ .smc-portada--original-curvo .smc-portada__sombra, .smc-portada--centrada-curvo .smc-portada__sombra { background: none; } .smc-portada--original-curvo::after, .smc-portada--centrada-curvo::after { content: ""; position: absolute; left: -12%; right: -12%; bottom: 0; top: 52%; background: #12161F; border-radius: 50% 50% 0 0 / 46px 46px 0 0; } .smc-portada--centrada-curvo .smc-portada__contenido { padding: 0 24px 112px; text-align: center; } .smc-portada--centrada-curvo .smc-logo { position: absolute; top: 20px; left: 20px; max-width: 140px; max-height: 52px; object-position: left top; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); } .smc-portada--centrada-curvo .smc-tagline { margin-top: 0; font-size: 11px; letter-spacing: .12em; opacity: .85; } .smc-portada--centrada-curvo .smc-nombre { margin-top: 14px; font-size: 28px; line-height: 1.15; } .smc-portada--centrada-curvo .smc-puesto { margin-top: 5px; font-size: 16px; } .smc-portada--centrada-curvo .smc-lema { margin: 16px auto 0; font-size: 13.5px; max-width: 280px; } /* Más aire entre la portada, los botones y las secciones (pedido de Pedro, 4 oct 2026) */ .smc-tarjeta .smc-portada { height: 476px; } .smc-tarjeta .smc-portada .smc-accesos { bottom: 34px; } .smc-tarjeta .smc-portada__contenido { padding-bottom: 124px; } .smc-tarjeta .smc-portada--centrada .smc-portada__contenido, .smc-tarjeta .smc-portada--centrada-corte .smc-portada__contenido, .smc-tarjeta .smc-portada--centrada-curvo .smc-portada__contenido { padding-bottom: 128px; } .smc-tarjeta .smc-botones-anchos { margin-top: 24px; } .smc-tarjeta .smc-botones-anchos + .smc-seccion { margin-top: 36px; } .smc-tarjeta .smc-seccion { margin-top: 36px; } /* ===== Blindaje final contra el tema para TODOS los botones restantes (4 oct 2026) ===== Mismos valores del mockup; !important porque el tema de WordPress estira, colorea y bordea botones. */ .smc-tarjeta button, .smc-modal button { font-family: inherit; text-transform: none; letter-spacing: normal; box-shadow: none; } /* Botones de las hojas (Agendar este servicio, Enviar, etc.) */ .smc-modal .smc-hoja__boton, .smc-tarjeta .smc-hoja__boton { display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 14px !important; border: 0 !important; border-radius: 12px !important; outline: none !important; box-shadow: none !important; background: var(--smc-acento) !important; color: #FFFFFF !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.2 !important; text-decoration: none !important; cursor: pointer; } .smc-modal .smc-hoja__boton--mitad { flex: 1 1 0 !important; width: auto !important; padding: 12px !important; font-size: 13.5px !important; } .smc-modal .smc-hoja__boton--blanco { background: #FFFFFF !important; border: 1px solid #E3E0D8 !important; color: #14171F !important; } .smc-modal .smc-carrito-agregar { flex: 1 1 0 !important; width: auto !important; font-size: 13.5px !important; } .smc-modal .smc-hoja__botones { display: flex !important; gap: 8px !important; margin-top: 14px; } /* Cantidad − / + del carrito */ .smc-modal .smc-carrito-cantidad button { width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: rgba(20,23,31,.06) !important; color: #14171F !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; } .smc-tarjeta .smc-carrito-flotante { display: flex; align-items: center !important; gap: 8px !important; width: auto !important; min-width: 0 !important; height: auto !important; padding: 12px 18px !important; border: 0 !important; border-radius: 999px !important; background: var(--smc-acento) !important; color: #FFFFFF !important; font-size: 13px !important; font-weight: 700 !important; box-shadow: 0 8px 20px -6px rgba(20,23,31,.45) !important; } /* Agendar: navegación del mes, días y horas */ .smc-modal .smc-agenda__nav button { width: 26px !important; height: 26px !important; min-width: 26px !important; min-height: 26px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: rgba(255,255,255,.08) !important; color: rgba(255,255,255,.7) !important; display: flex !important; align-items: center !important; justify-content: center !important; } .smc-modal .smc-calendario button { width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; aspect-ratio: 1 !important; padding: 0 !important; border: 0 !important; border-radius: 10px !important; background: rgba(255,255,255,.08) !important; color: #FFFFFF !important; font-size: 12.5px !important; font-weight: 600 !important; display: flex !important; align-items: center !important; justify-content: center !important; } .smc-modal .smc-calendario button:disabled { background: transparent !important; color: rgba(255,255,255,.25) !important; } .smc-modal .smc-calendario button.smc-dia-elegido { background: var(--smc-acento) !important; color: #FFFFFF !important; } .smc-modal .smc-horarios button { width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; padding: 10px 4px !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius: 12px !important; background: transparent !important; color: #FFFFFF !important; font-size: 13.5px !important; font-weight: 600 !important; text-align: center !important; } .smc-modal .smc-horarios button.smc-hora-elegida { background: var(--smc-acento) !important; border-color: var(--smc-acento) !important; } /* Visor de especiales: Anterior / Siguiente */ .smc-modal .smc-especial-nav button { display: flex !important; align-items: center !important; gap: 6px !important; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; padding: 10px 16px !important; border: 0 !important; border-radius: 999px !important; background: rgba(255,255,255,.12) !important; color: #FFFFFF !important; font-size: 12.5px !important; font-weight: 700 !important; } /* Con fondo propio (color / imagen / textura): la portada se desvanece hacia el fondo en vez de terminar en blanco (pedido de Pedro, 4 oct 2026) */ .smc-tarjeta--con-fondo .smc-fondo-capa { top: 0; -webkit-mask-image: none; mask-image: none; } .smc-tarjeta--con-fondo .smc-portada { height: 540px; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 72px), transparent 100%); mask-image: linear-gradient(180deg, #000 calc(100% - 72px), transparent 100%); } .smc-tarjeta--con-fondo .smc-portada__sombra { background: linear-gradient(0deg, rgba(var(--smc-ov,0,0,0),.9) 0%, rgba(var(--smc-ov,0,0,0),.9) 32%, rgba(var(--smc-ov,0,0,0),.82) 52%, rgba(var(--smc-ov,0,0,0),.5) 70%, rgba(var(--smc-ov,0,0,0),.15) 88%, rgba(var(--smc-ov,0,0,0),0) 100%); } .smc-tarjeta--con-fondo .smc-portada--original-corte .smc-portada__sombra, .smc-tarjeta--con-fondo .smc-portada--centrada-corte .smc-portada__sombra { background: none; } .smc-tarjeta--con-fondo .smc-portada .smc-accesos { bottom: 76px; } .smc-tarjeta--con-fondo .smc-portada__contenido { padding-bottom: 166px; } .smc-tarjeta--con-fondo .smc-portada--centrada .smc-portada__contenido, .smc-tarjeta--con-fondo .smc-portada--centrada-corte .smc-portada__contenido { padding-bottom: 170px; } .smc-tarjeta--con-fondo .smc-portada__remiendo { display: none; } .smc-tarjeta--con-fondo .smc-botones-anchos { margin-top: -26px; position: relative; z-index: 3; } /* Fondo con imagen: queda fija al tamaño de la pantalla (antes se estiraba a todo el largo de la tarjeta y se veía ampliada) */ .smc-fondo-capa--imagen { position: fixed !important; top: 0 !important; bottom: auto !important; left: 50% !important; right: auto !important; width: min(100%, 480px) !important; height: 100vh !important; transform: translateX(-50%); background-size: cover; background-position: center top; -webkit-mask-image: none !important; mask-image: none !important; } /* Oscurecer la foto de portada: Suave / Mínimo (opción nueva; "Normal" es el degradado del mockup) */ .smc-portada--osc-suave .smc-portada__sombra { background: linear-gradient(0deg, #FFFFFF 0%, #FFFFFF 10%, rgba(var(--smc-ov,0,0,0),.66) 30%, rgba(var(--smc-ov,0,0,0),.4) 48%, rgba(var(--smc-ov,0,0,0),.14) 66%, rgba(var(--smc-ov,0,0,0),0) 82%); } .smc-portada--osc-minimo .smc-portada__sombra { background: linear-gradient(0deg, #FFFFFF 0%, #FFFFFF 10%, rgba(var(--smc-ov,0,0,0),.14) 26%, rgba(var(--smc-ov,0,0,0),.05) 40%, rgba(var(--smc-ov,0,0,0),0) 54%); } .smc-tarjeta--con-fondo .smc-portada--osc-suave .smc-portada__sombra { background: linear-gradient(0deg, rgba(var(--smc-ov,0,0,0),.66) 0%, rgba(var(--smc-ov,0,0,0),.66) 10%, rgba(var(--smc-ov,0,0,0),.66) 30%, rgba(var(--smc-ov,0,0,0),.4) 48%, rgba(var(--smc-ov,0,0,0),.14) 66%, rgba(var(--smc-ov,0,0,0),0) 82%); } .smc-tarjeta--con-fondo .smc-portada--osc-minimo .smc-portada__sombra { background: linear-gradient(0deg, rgba(var(--smc-ov,0,0,0),.16) 0%, rgba(var(--smc-ov,0,0,0),.14) 10%, rgba(var(--smc-ov,0,0,0),.14) 26%, rgba(var(--smc-ov,0,0,0),.05) 40%, rgba(var(--smc-ov,0,0,0),0) 54%); } /* Posición de la foto de portada: una capa con la misma foto, ampliada un poco, que se ancla arriba o abajo (la portada normal queda detrás por si sobra hueco) */ .smc-portada.smc-portada--pos-arriba::before, .smc-portada.smc-portada--pos-abajo::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: inherit; background-size: auto 114%; background-repeat: no-repeat; } .smc-portada.smc-portada--pos-arriba::before { background-position: center top; } .smc-portada.smc-portada--pos-abajo::before { background-position: center bottom; } /* Corte recto con fondo propio: borde recto de verdad, sin desvanecer */ .smc-tarjeta--con-fondo .smc-portada--original-corte, .smc-tarjeta--con-fondo .smc-portada--centrada-corte { -webkit-mask-image: none; mask-image: none; } /* Oscurecer la foto: "Difuminado" — en vez del degradado negro, solo la parte baja de la foto (donde va el texto) se desenfoca; el resto queda nítido */ .smc-portada.smc-portada--osc-blur .smc-portada__sombra { background: inherit; background-repeat: no-repeat; filter: blur(16px) brightness(.8); transform: scale(1.08); -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 26%, transparent 52%); mask-image: linear-gradient(0deg, #000 0%, #000 26%, transparent 52%); } .smc-portada.smc-portada--osc-blur:not(.smc-portada--original-corte):not(.smc-portada--centrada-corte)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; pointer-events: none; background: linear-gradient(0deg, #FFFFFF 0%, #FFFFFF 12%, rgba(255,255,255,0) 100%); } .smc-tarjeta--con-fondo .smc-portada.smc-portada--osc-blur::after { display: none; } /* Difuminado + corte recto: bloque de foto desenfocada con borde superior recto */ .smc-portada.smc-portada--osc-blur.smc-portada--original-corte .smc-portada__sombra, .smc-portada.smc-portada--osc-blur.smc-portada--centrada-corte .smc-portada__sombra { background: inherit; background-repeat: no-repeat; filter: blur(18px) brightness(.8); transform: scale(1.08); -webkit-mask-image: linear-gradient(0deg, #000 0, #000 56%, transparent 56%); mask-image: linear-gradient(0deg, #000 0, #000 56%, transparent 56%); } .smc-portada.smc-portada--osc-blur.smc-portada--original-corte::after, .smc-portada.smc-portada--osc-blur.smc-portada--centrada-corte::after { top: 44%; background: rgba(var(--smc-ov,10,12,18),.28); display: block; } /* Texturas de fondo (generadas): sutiles y coloridas */ .smc-fondo-capa[data-smc-textura="puntos"] { background-image: radial-gradient(rgba(20,23,31,.16) 1.3px, transparent 1.6px); background-size: 16px 16px; } .smc-fondo-capa[data-smc-textura="cuadricula"] { background-image: linear-gradient(rgba(20,23,31,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(20,23,31,.07) 1px, transparent 1px); background-size: 24px 24px; } .smc-fondo-capa[data-smc-textura="diagonales"] { background-image: repeating-linear-gradient(45deg, rgba(20,23,31,.07) 0 1px, transparent 1px 11px); } .smc-fondo-capa[data-smc-textura="ondas"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='20' viewBox='0 0 60 20'%3E%3Cpath d='M0 10 Q15 0 30 10 T60 10' fill='none' stroke='%2314171F' stroke-opacity='.10' stroke-width='1.2'/%3E%3C/svg%3E"); background-size: 60px 20px; } .smc-fondo-capa[data-smc-textura="grano"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .09 0 0 0 0 .12 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E"); } .smc-fondo-capa[data-smc-textura="lino"] { background-image: repeating-linear-gradient(0deg, rgba(20,23,31,.05) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(20,23,31,.05) 0 1px, transparent 1px 4px); } .smc-fondo-capa[data-smc-textura="cruces"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2724%27%20height=%2724%27%20viewBox=%270%200%2024%2024%27%3E%3Cpath%20d=%27M12%208v8M8%2012h8%27%20stroke=%27%2314171F%27%20stroke-opacity=%27.16%27%20stroke-width=%271.2%27%20stroke-linecap=%27round%27/%3E%3C/svg%3E"); background-size: 24px 24px; } .smc-fondo-capa[data-smc-textura="rombos"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2728%27%20height=%2728%27%20viewBox=%270%200%2028%2028%27%3E%3Cpath%20d=%27M14%202l12%2012-12%2012L2%2014z%27%20fill=%27none%27%20stroke=%27%2314171F%27%20stroke-opacity=%27.09%27%20stroke-width=%271.1%27/%3E%3C/svg%3E"); background-size: 28px 28px; } .smc-fondo-capa[data-smc-textura="escamas"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2732%27%20height=%2720%27%20viewBox=%270%200%2032%2020%27%3E%3Cpath%20d=%27M0%2020a16%2016%200%200%201%2032%200M-16%2010a16%2016%200%200%201%2032%200M16%2010a16%2016%200%200%201%2032%200%27%20fill=%27none%27%20stroke=%27%2314171F%27%20stroke-opacity=%27.10%27%20stroke-width=%271.1%27/%3E%3C/svg%3E"); background-size: 32px 20px; } .smc-fondo-capa[data-smc-textura="triangulos"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2730%27%20height=%2726%27%20viewBox=%270%200%2030%2026%27%3E%3Cpath%20d=%27M15%203l12%2020H3z%27%20fill=%27none%27%20stroke=%27%2314171F%27%20stroke-opacity=%27.09%27%20stroke-width=%271.1%27/%3E%3C/svg%3E"); background-size: 30px 26px; } .smc-fondo-capa[data-smc-textura="circulos"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2736%27%20height=%2736%27%20viewBox=%270%200%2036%2036%27%3E%3Ccircle%20cx=%2718%27%20cy=%2718%27%20r=%2712%27%20fill=%27none%27%20stroke=%27%2314171F%27%20stroke-opacity=%27.09%27%20stroke-width=%271.1%27/%3E%3Ccircle%20cx=%2718%27%20cy=%2718%27%20r=%275%27%20fill=%27none%27%20stroke=%27%2314171F%27%20stroke-opacity=%27.09%27%20stroke-width=%271.1%27/%3E%3C/svg%3E"); background-size: 36px 36px; } .smc-fondo-capa[data-smc-textura="topografia"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%27120%27%20height=%27120%27%20viewBox=%270%200%20120%20120%27%3E%3Cg%20fill=%27none%27%20stroke=%27%2314171F%27%20stroke-opacity=%27.10%27%20stroke-width=%271.1%27%3E%3Cpath%20d=%27M0%2030c20-14%2040%2014%2060%200s40-14%2060%200%27/%3E%3Cpath%20d=%27M0%2060c20-14%2040%2014%2060%200s40-14%2060%200%27/%3E%3Cpath%20d=%27M0%2090c20-14%2040%2014%2060%200s40-14%2060%200%27/%3E%3Cpath%20d=%27M0%20118c20-14%2040%2014%2060%200s40-14%2060%200%27/%3E%3C/g%3E%3C/svg%3E"); background-size: 120px 120px; } .smc-fondo-capa[data-smc-textura="aurora"] { background-image: radial-gradient(circle at 15% 8%, color-mix(in srgb, var(--smc-acento,#2554EB) 22%, transparent), transparent 46%), radial-gradient(circle at 88% 38%, color-mix(in srgb, var(--smc-acento,#2554EB) 16%, transparent), transparent 44%), radial-gradient(circle at 30% 85%, color-mix(in srgb, var(--smc-acento,#2554EB) 14%, transparent), transparent 48%); } .smc-fondo-capa[data-smc-textura="amanecer"] { background-image: linear-gradient(180deg, rgba(255,183,120,.30) 0%, rgba(255,140,170,.22) 40%, rgba(160,140,255,.16) 100%); } .smc-fondo-capa[data-smc-textura="atardecer"] { background-image: linear-gradient(180deg, rgba(255,120,90,.26) 0%, rgba(214,70,140,.22) 45%, rgba(90,60,200,.20) 100%); } .smc-fondo-capa[data-smc-textura="oceano"] { background-image: linear-gradient(180deg, rgba(56,189,248,.24) 0%, rgba(37,99,235,.18) 50%, rgba(20,184,166,.20) 100%); } .smc-fondo-capa[data-smc-textura="menta"] { background-image: radial-gradient(circle at 10% 10%, rgba(52,211,153,.30), transparent 50%), radial-gradient(circle at 90% 70%, rgba(110,231,183,.26), transparent 52%); } .smc-fondo-capa[data-smc-textura="lavanda"] { background-image: radial-gradient(circle at 85% 8%, rgba(167,139,250,.32), transparent 50%), radial-gradient(circle at 10% 75%, rgba(244,114,182,.20), transparent 52%); } .smc-fondo-capa[data-smc-textura="malla"] { background-image: radial-gradient(circle at 12% 12%, rgba(255,107,129,.26), transparent 42%), radial-gradient(circle at 88% 20%, rgba(94,129,255,.26), transparent 44%), radial-gradient(circle at 20% 88%, rgba(45,212,191,.24), transparent 44%), radial-gradient(circle at 85% 85%, rgba(250,204,21,.24), transparent 42%); } .smc-fondo-capa[data-smc-textura="neon"] { background-image: radial-gradient(circle at 0% 30%, rgba(236,72,153,.30), transparent 45%), radial-gradient(circle at 100% 65%, rgba(34,211,238,.30), transparent 45%); } .smc-fondo-capa[data-smc-textura="prisma"] { background-image: conic-gradient(from 210deg at 50% 38%, rgba(255,107,129,.20), rgba(250,204,21,.18), rgba(52,211,153,.18), rgba(56,189,248,.20), rgba(167,139,250,.20), rgba(255,107,129,.20)); } .smc-fondo-capa[data-smc-textura="confeti"] { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2770%27%20height=%2770%27%20viewBox=%270%200%2070%2070%27%3E%3Cg%3E%3Ccircle%20cx=%279%27%20cy=%2711%27%20r=%272.2%27%20fill=%27%23F43F5E%27%20fill-opacity=%27.45%27/%3E%3Ccircle%20cx=%2740%27%20cy=%277%27%20r=%271.8%27%20fill=%27%23FACC15%27%20fill-opacity=%27.6%27/%3E%3Ccircle%20cx=%2762%27%20cy=%2724%27%20r=%272.2%27%20fill=%27%2338BDF8%27%20fill-opacity=%27.5%27/%3E%3Ccircle%20cx=%2724%27%20cy=%2736%27%20r=%271.8%27%20fill=%27%2334D399%27%20fill-opacity=%27.55%27/%3E%3Ccircle%20cx=%2752%27%20cy=%2752%27%20r=%272.2%27%20fill=%27%23A78BFA%27%20fill-opacity=%27.5%27/%3E%3Ccircle%20cx=%2710%27%20cy=%2760%27%20r=%271.8%27%20fill=%27%23FB923C%27%20fill-opacity=%27.55%27/%3E%3Crect%20x=%2734%27%20y=%2726%27%20width=%275%27%20height=%272%27%20rx=%271%27%20fill=%27%23F43F5E%27%20fill-opacity=%27.4%27%20transform=%27rotate(35%2036%2027)%27/%3E%3Crect%20x=%2714%27%20y=%2730%27%20width=%275%27%20height=%272%27%20rx=%271%27%20fill=%27%2338BDF8%27%20fill-opacity=%27.45%27%20transform=%27rotate(-30%2016%2031)%27/%3E%3Crect%20x=%2758%27%20y=%2762%27%20width=%275%27%20height=%272%27%20rx=%271%27%20fill=%27%2334D399%27%20fill-opacity=%27.45%27%20transform=%27rotate(60%2060%2063)%27/%3E%3C/g%3E%3C/svg%3E"); background-size: 70px 70px; } .smc-fondo-capa[data-smc-textura="burbujas"] { background-image: radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--smc-acento,#2554EB) 14%, transparent) 0 28px, transparent 29px), radial-gradient(circle at 78% 30%, rgba(236,72,153,.12) 0 44px, transparent 45px), radial-gradient(circle at 35% 70%, rgba(34,211,238,.14) 0 36px, transparent 37px), radial-gradient(circle at 85% 88%, rgba(250,204,21,.16) 0 30px, transparent 31px); } .smc-fondo-capa[data-smc-textura="bruma"] { background-image: linear-gradient(180deg, color-mix(in srgb, var(--smc-acento,#2554EB) 18%, transparent) 0%, transparent 70%); } /* Portada original: el nombre manda — más grande que el logo (pedido de Pedro, 4 oct 2026) */ .smc-tarjeta .smc-portada--original .smc-logo, .smc-tarjeta .smc-portada--original-corte .smc-logo { max-width: min(520px, 100%); max-height: 176px; } .smc-tarjeta .smc-portada--original .smc-nombre, .smc-tarjeta .smc-portada--original-corte .smc-nombre { font-size: 30px; line-height: 1.12; margin-top: 12px; } .smc-tarjeta .smc-portada--original .smc-puesto, .smc-tarjeta .smc-portada--original-corte .smc-puesto { font-size: 15px; } /* Corte recto: Suave / Mínimo también aclaran el bloque */ .smc-portada--osc-suave.smc-portada--original-corte::after, .smc-portada--osc-suave.smc-portada--centrada-corte::after { opacity: .62; } .smc-portada--osc-minimo.smc-portada--original-corte::after, .smc-portada--osc-minimo.smc-portada--centrada-corte::after { opacity: .32; } /* Diseño de botones: "Cristal" (vidrio esmerilado claro) y "Aros" (círculos de línea) — nuevos, sutiles */ .smc-portada .smc-accesos--cristal .smc-acceso { gap: 6px; padding: 13px 4px; background: rgba(30,36,50,.34) !important; border: 1px solid rgba(255,255,255,.34); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 10px 22px -12px rgba(0,0,0,.55); } .smc-portada .smc-accesos--cristal .smc-acceso__icono svg { width: 19px; height: 19px; } .smc-portada .smc-accesos--cristal .smc-acceso__texto { font-size: 10.5px; text-shadow: 0 1px 4px rgba(0,0,0,.4); } .smc-portada .smc-accesos--cristal.smc-accesos--cinco { gap: 6px; } .smc-portada .smc-accesos--cristal.smc-accesos--cinco .smc-acceso { gap: 4px; padding: 8px 2px; border-radius: 11px; } .smc-portada .smc-accesos--cristal.smc-accesos--cinco .smc-acceso__icono svg { width: 15px; height: 15px; } .smc-portada .smc-accesos--cristal.smc-accesos--cinco .smc-acceso__texto { font-size: 8.5px; text-align: center; } .smc-portada .smc-accesos--aros { bottom: 16px; justify-content: space-around; gap: 6px; } .smc-portada .smc-accesos--aros .smc-acceso { flex: none; background: none !important; padding: 0; gap: 7px; } .smc-portada .smc-accesos--aros .smc-acceso__icono { width: 46px; height: 46px; border-radius: 50%; align-items: center; justify-content: center; border: 1.3px solid rgba(255,255,255,.8); background: rgba(20,24,34,.34); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 6px 16px -8px rgba(0,0,0,.5); transition: background .15s, border-color .15s, transform .15s; } .smc-portada .smc-accesos--aros .smc-acceso__icono svg { width: 19px; height: 19px; } .smc-portada .smc-accesos--aros .smc-acceso__texto { font-size: 10px; text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.5); } /* Al tocar un botón se nota en todos los diseños */ .smc-portada .smc-acceso { transition: transform .15s ease, filter .15s ease, background-color .15s ease; -webkit-tap-highlight-color: transparent; } .smc-portada .smc-acceso:active, .smc-portada .smc-acceso:focus-visible { transform: scale(.94); filter: brightness(1.14); } .smc-portada .smc-accesos--oscuras .smc-acceso:active, .smc-portada .smc-accesos--cristal .smc-acceso:active { background: rgba(255,255,255,.26) !important; } .smc-portada .smc-accesos--circulos .smc-acceso:active .smc-acceso__icono, .smc-portada .smc-accesos--aros .smc-acceso:active .smc-acceso__icono { transform: scale(.9); } .smc-portada .smc-accesos--aros .smc-acceso:active .smc-acceso__icono { background: rgba(255,255,255,.28); border-color: #FFFFFF; } /* Difuminado: la copia desenfocada usa el mismo encuadre que la foto nítida (antes con "Posición" Arriba/Abajo no coincidían) */ .smc-portada.smc-portada--osc-blur.smc-portada--pos-arriba .smc-portada__sombra { background-size: auto 114%; background-position: center top; } .smc-portada.smc-portada--osc-blur.smc-portada--pos-abajo .smc-portada__sombra { background-size: auto 114%; background-position: center bottom; } .smc-portada.smc-portada--osc-blur .smc-portada__sombra { transform: scale(1.03); } .smc-portada.smc-portada--osc-blur.smc-portada--original-corte .smc-portada__sombra, .smc-portada.smc-portada--osc-blur.smc-portada--centrada-corte .smc-portada__sombra { filter: blur(22px) saturate(1.1) brightness(.92); transform: scale(1.03); } .smc-portada.smc-portada--osc-blur.smc-portada--original-corte::after, .smc-portada.smc-portada--osc-blur.smc-portada--centrada-corte::after { background: rgba(var(--smc-ov,10,12,18),.2); } /* Difuminado + corte recto: borde RECTO abajo y desenfoque que se suaviza hacia arriba (para que la persona siga viéndose) */ .smc-portada.smc-portada--osc-blur.smc-portada--original-corte .smc-portada__sombra, .smc-portada.smc-portada--osc-blur.smc-portada--centrada-corte .smc-portada__sombra { -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 30%, rgba(0,0,0,.6) 42%, rgba(0,0,0,.2) 52%, transparent 60%); mask-image: linear-gradient(0deg, #000 0%, #000 30%, rgba(0,0,0,.6) 42%, rgba(0,0,0,.2) 52%, transparent 60%); } .smc-portada.smc-portada--osc-blur.smc-portada--original-corte::after, .smc-portada.smc-portada--osc-blur.smc-portada--centrada-corte::after { top: 36%; background: linear-gradient(0deg, rgba(var(--smc-ov,10,12,18),.34) 0%, rgba(var(--smc-ov,10,12,18),.26) 45%, rgba(var(--smc-ov,10,12,18),0) 100%); } /* Velo con color propio (--smc-ov lo pone la portada cuando eliges un color) */ .smc-portada { --smc-ov-a: 0; } .smc-portada.smc-portada--osc-blur .smc-portada__sombra { box-shadow: inset 0 -260px 150px -90px rgba(var(--smc-ov,0,0,0), var(--smc-ov-a)); } /* Compartir: filas a prueba del tema (los